Bootstrap Tabs
 | A way to display data, from an xwiki application, with bootstrap style tabs and tooltip + an application example in Sandbox space |
| Type | XAR |
| Category | Application |
| Developed by | |
| Rating | |
| License | Do What The Fuck You Want To Public License 2 |
| Compatibility | Tested from xWiki 6.4 to 7.0.1 with flamingo skin. |
Table of contents
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 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:
## 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">▼</span> Tab one</a></li><li><a data-toggle="tab" href="#P2"><span class="Down">▼</span> Tab two</a></li><li><a data-toggle="tab" href="#P9"><span class="Down">▼</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:
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>: 
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.
Links
- Bootstrap tabs: http://getbootstrap.com/components/#nav
- Bootstrap tooltips: http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
