Bootstrap Tabs

Version 15.1 by Pascal Bastien on 2015/05/07 10:34

cogA way to display data, from an xwiki application, with bootstrap style tabs and tooltip + an application example in Sandbox space
TypeXAR
CategoryApplication
Developed by

Pascal Bastien

Rating
0 Votes
LicenseDo What The Fuck You Want To Public License 2
Compatibility

Tested from xWiki 6.4 to 7.0.1 with flamingo skin.

Description

Recipe

I have an xWiki application with data and I want simply add tabs presentation and tooltip help.
This page is more an howto doc about xwiki application rendering than an extension.
My Xar extension BootstrapTabExample-0.9.xar provide 4 pages in Sandbox space: BootstrapTabExample, BootstrapTabClass, BootstrapTabSheet and BootstrapTabTemplate.

Ingredients

  • a nice application under Sandbox space with a Class BootstrapTabClass, Template BootstrapTabTemplate and Sheet BootstrapTabSheet
  • some CSS instruction to display tabs and tooltips in a  XWiki.StyleSheetExtension Objects attached to the Sheet BootstrapTabSheet
  • some javascript code to save last opened tab when we edit or view a page to stay on same opened tab in an XWiki.JavaScriptExtension object attached to the Sheet BootstrapTabSheet
  • some short CSS instruction to apply only in view mode in an XWiki.StyleSheetExtension Objects attached to the Class by example BootstrapTabClass
  • and finally some velocity instruction in my BootstrapTabSheet to display HTML code or not depending of property name.

Directions

Here velocity code in my BootstrapTabSheet sheet:

{{velocity}}
## tab and table CSS
#set($discard = $xwiki.ssx.use("Sandbox.BootstrapTabSheet"))
#if ($xcontext.action == 'view')
  ## Apply a specific CSS style in view mode (to hide tooltip icone)
  #set($discard = $xwiki.ssx.use("Sandbox.BootstrapTabClass"))
#end

## Javascript to drop a cookie to save last opened tab
#set($discard = $xwiki.jsx.use("Sandbox.BootstrapTabSheet"))

##Prefix to identify HTML code to display it
#set ($PrefxHtml= 'CodeH')

{{html wiki="true"}}

## Class to use
#set($class = $doc.getObject('Sandbox.BootstrapTabClass').xWikiClass)
## loop on Class properties
#foreach($prop in $class.properties)
  ## display HTML code (stored in Prettyname property) for tab and container
  #if ($prop.Name.startsWith("$!{PrefxHtml}_")=='true')
    ##Insert HTML code inserted in the property PrettyName
    #set ($StrLine= $prop.prettyName)
  #else
    ##display data in a table
    ##start the line
    #set ($StrLine= "<div class='BstRow'>")
    #if ($stringtool.trimToEmpty($prop.prettyName)!='')
      #set($classWidthColumn='BtsColumnNormalWidth')
      ## display PrettyName in first Column
      #set ($StrLine= $!StrLine+"<div class='BstColumn1'>$prop.prettyName</div>")
    #else
      #set($classWidthColumn='BtsColumnLargeWidth')
    #end
    ## display data in second Column
    ## #set ($StrLine= $!StrLine+" <div class='BstColumn2 BstViewValue'>$doc.display($prop.getName())</div>")
    #set ($StrLine= $!StrLine+" <div class='BstColumn2 BstViewValue " + $classWidthColumn + "'>$doc.display($prop.getName())</div>")
    ## end of the line
    #set ($StrLine= $!StrLine+"</div>")
  #end
  ## display the table line
  $!StrLine
  ## and reinit it
  #set ($StrLine='')
 #end

{{/html}}

{{/velocity}}

How is it working ?

I use a classic loop to display all my field/properties but I insert some HTML code for tab and tooltips. 

Tabs

I use a classic loop to display all my field/properties except for field who's the name starting with 'CodeH_' string. In this case, I display only the PrettyName value. This PrettyName value of this specific field contains of course HTML code for my tabs (and bloc).
For this property I use Computed Field type property because it is unnecessary to store data in this field.

  • Here, first HTML code to display all tabs on top of page:
    <div class="tabs"><ul class="nav nav-tabs"><li><a data-toggle="tab" href="#P1"><span class="Down">&#x25BC;</span> Tab one</a></li><li><a data-toggle="tab" href="#P2"><span class="Down">&#x25BC;</span> Tab two</a></li><li><a data-toggle="tab" href="#P9"><span class="Down">&#x25BC;</span> My last tab</a></li></ul><div class="tab-content"><div id="P1" class="tab-pane fade in active"><h4>My Tab one H4 title</h4><DIV Id="TabP1" Class="container"><div class="Bloc"><div class="BlocTitle">My bloc title</div> 
  • and HTML code to start a new tab:
    <div id="P2" class="tab-pane fade"><h4>Another Comment with large width</h4><DIV Id="TabP2" Class="container">

Here a screenshot of BootstrapTabClass and result to understand better:
BootstrapTabsClass

BootstrapTabsView

Tooltips

To display tooltips, in BootstrapTabClass I paste in the PrettyName of a property this HTML span tag code:
My PrettyName <span class="BtsHelp yellow-tooltip" rel="tooltip"  data-toggle="tooltip" data-placement="bottom" title="Text displayed in tooltip"> icon:lightbulb </span>
BootstrapTabsTooltip

Large column

If I want display a data (e.g a textarea comment) on full width of the page, I simply don't fill PrettyName of the property and BootstrapTabSheet will display data on one column.

BootstrapTabsLarge

Links

Tags: tab code
    

Get Connected