From version < 14.4 >
edited by Vincent Massol
on 2015/05/06 17:34
To version < 15.1 >
edited by Pascal Bastien
on 2015/05/07 10:34
< >
Change comment: 2 links added

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -xwiki:XWiki.VincentMassol
1 +xwiki:XWiki.pbas
ExtensionCode.ExtensionClass[0]
Description
... ... @@ -2,7 +2,7 @@
2 2  
3 3  I have an xWiki application with data and I want simply add tabs presentation and tooltip help.
4 4  This page is more an howto doc about xwiki application rendering than an extension.
5 -My Xar extension provide 4 pages in Sandbox space: BootstrapTabExample, BootstrapTabClass, BootstrapTabSheet and BootstrapTabTemplate.
5 +My Xar extension [[BootstrapTabExample-0.9.xar>>attach:Sandbox.BootstrapTabExample-0.9.xar]] provide 4 pages in //Sandbox// space: //BootstrapTabExample//, //BootstrapTabClass//, //BootstrapTabSheet// and //BootstrapTabTemplate//.
6 6  
7 7  = Ingredients =
8 8  
... ... @@ -13,6 +13,7 @@
13 13  * and finally some velocity instruction in my //BootstrapTabSheet// to display HTML code or not depending of property name.
14 14  
15 15  = Directions =
16 +
16 16  Here velocity code in my //BootstrapTabSheet// sheet:
17 17  
18 18  {{code}}
... ... @@ -73,17 +73,14 @@
73 73  I use a classic loop to display all my field/properties but I insert some HTML code for tab and tooltips.
74 74  
75 75  === Tabs ===
77 +
76 76  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).
77 77  For this property I use //Computed Field// type property because it is unnecessary to store data in this field.
78 78  
79 79  * Here, first HTML code to display all tabs on top of page:
80 -{{code}}
81 -<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>
82 -{{/code}}
82 +{{code}}<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> {{/code}}
83 83  * and HTML code to start a new tab:
84 -{{code}}
85 -<div id="P2" class="tab-pane fade"><h4>Another Comment with large width</h4><DIV Id="TabP2" Class="container">
86 -{{/code}}
84 +{{code}}<div id="P2" class="tab-pane fade"><h4>Another Comment with large width</h4><DIV Id="TabP2" Class="container">{{/code}}
87 87  
88 88  Here a screenshot of //BootstrapTabClass// and result to understand better:
89 89  [[image:BootstrapTabsClass.png||alt="BootstrapTabsClass"]]
... ... @@ -91,15 +91,17 @@
91 91  [[image:BootstrapTabsView.png||alt="BootstrapTabsView"]]
92 92  
93 93  === Tooltips ===
92 +
94 94  To display tooltips, in //BootstrapTabClass// I paste in the PrettyName of a property this HTML span tag code:
95 -{{code}}
96 -My PrettyName <span class="BtsHelp yellow-tooltip" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title="Text displayed in tooltip"> icon:lightbulb </span>:
97 -{{/code}}
94 +{{code}}My PrettyName <span class="BtsHelp yellow-tooltip" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title="Text displayed in tooltip"> icon:lightbulb </span>: {{/code}}
98 98  [[image:BootstrapTabsTooltip.png||alt="BootstrapTabsTooltip"]]
99 99  
100 100  === Large column ===
98 +
101 101  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.
102 102  
103 103  [[image:BootstrapTabsLarge.png||alt="BootstrapTabsLarge"]]
104 104  
105 -= XAR example in Sandbox space =
103 += Links =
104 +* Bootstrap tabs: http://getbootstrap.com/components/#nav
105 +* Bootstrap tooltips: http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
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
Rate!
0 Votes
LicenseDo What The Fuck You Want To Public License 2

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.

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= "
")
    #if ($stringtool.trimToEmpty($prop.prettyName)!='')
      #set($classWidthColumn='BtsColumnNormalWidth')
      ## display PrettyName in first Column
      #set ($StrLine= $!StrLine+"
$prop.prettyName
")
    #else
      #set($classWidthColumn='BtsColumnLargeWidth')
    #end
    ## display data in second Column
    ## #set ($StrLine= $!StrLine+" 
$doc.display($prop.getName())
")
    #set ($StrLine= $!StrLine+" 
$doc.display($prop.getName())
")
    ## end of the line
    #set ($StrLine= $!StrLine+"
")
  #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:
    class="tabs"> class="nav nav-tabs">
  • data-toggle="tab" href="#P1"> class="Down"> Tab one
  • data-toggle="tab" href="#P2"> class="Down"> Tab two
  • data-toggle="tab" href="#P9"> class="Down"> My last tab
class="tab-content"> id="P1" class="tab-pane fade in active">

My Tab one H4 title

Id="TabP1" Class="container"> class="Bloc"> class="BlocTitle">My bloc title
 
  • and HTML code to start a new tab:
    id="P2" class="tab-pane fade">

    Another Comment with large width

    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 class="BtsHelp yellow-tooltip" rel="tooltip"  data-toggle="tooltip" data-placement="bottom" title="Text displayed in tooltip"> icon:lightbulb
    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

    XAR example in Sandbox space

    Links

    Get Connected