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
Prerequisites & Installation Instructions
We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.
You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:
- Log in the wiki with a user having Administration rights
- Go to the Administration page and select the Import category
- Follow the on-screen instructions to upload the downloaded XAR
- Click on the uploaded XAR and follow the instructions
- You'll also need to install all dependent Extensions that are not already installed in your wiki
Release Notes
v0.9
Version 0.9 (Initial version)
