From version 5.1
edited by Pascal Bastien
on 2015/05/05 16:33
To version 6.1
edited by Pascal Bastien
on 2015/05/05 18:34
Change comment: Initial version (still working on it)

Summary

Details

EXOExtensionCode.ExtensionClass[0]
Compatibility
... ... @@ -1,0 +1,1 @@
1 +Tested from xWiki 6.4 to 7.0.1 with flamingo skin.
ExtensionCode.ExtensionClass[0]
Authors
... ... @@ -1,0 +1,1 @@
1 +xwiki:XWiki.pbas
Category
... ... @@ -1,0 +1,1 @@
1 +application
Description
... ... @@ -1,0 +1,103 @@
1 + (still working on it)
2 +
3 += Recepi =
4 +
5 +I have an application with data but I want simply add tabs presentation and tooltip help.
6 +
7 += ingredients =
8 +
9 +* a nice application with a Class //BootstrapTabClass//, Template //BootstrapTabTemplate// and Sheet //BootstrapTabSheet//
10 +* some CSS instruction to dipslay tabs and tooltips in a XWiki.StyleSheetExtension Objects attached to the Sheet //BootstrapTabSheet//
11 +* 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//
12 +* some short CSS instruction to apply only in view mode in an XWiki.StyleSheetExtension Objects attached to the Class by example //BootstrapTabClass//
13 +
14 += Directions =
15 +Here velocity code in my //BootstrapTabSheet// sheet:
16 +
17 +{{code}}
18 +{{velocity}}
19 +## tab and table CSS
20 +#set($discard = $xwiki.ssx.use("Sandbox.BootstrapTabSheet"))
21 +#if ($xcontext.action == 'view')
22 + ## Affiche une CSS spécifique en visualisation
23 + #set($discard = $xwiki.ssx.use("Sandbox.BootstrapTabClass"))
24 +#end
25 +
26 +## Javascript to drop a cookie to save last opened tab
27 +#set($discard = $xwiki.jsx.use("Sandbox.BootstrapTabSheet"))
28 +
29 +##Prefix to identify HTML code to display it
30 +#set ($PrefxHtml= 'CodeH')
31 +
32 +{{html wiki="true"}}
33 +
34 +## Class to use
35 +#set($class = $doc.getObject('Sandbox.BootstrapTabClass').xWikiClass)
36 +## loop on Class properties
37 +#foreach($prop in $class.properties)
38 + ## display HTML code (stored in Prettyname property) for tab and container
39 + #if ($prop.Name.startsWith("$!{PrefxHtml}_")=='true')
40 + ##Début du bloc Div: insère le contenu HTML (début du Div) contenu dans le prettyName
41 + #set ($StrLine= $prop.prettyName)
42 + #else
43 + ##display data in a table
44 + ##start the line
45 + #set ($StrLine= "<div class='BstRow'>")
46 + #if ($stringtool.trimToEmpty($prop.prettyName)!='')
47 + #set($classWidthColumn='BtsColumnNormalWidth')
48 + ## display PrettyName in first Column
49 + #set ($StrLine= $!StrLine+"<div class='BstColumn1'>$prop.prettyName</div>")
50 + #else
51 + #set($classWidthColumn='BtsColumnLargeWidth')
52 + #end
53 + ## display data in second Column
54 + ## #set ($StrLine= $!StrLine+" <div class='BstColumn2 BstViewValue'>$doc.display($prop.getName())</div>")
55 + #set ($StrLine= $!StrLine+" <div class='BstColumn2 BstViewValue " + $classWidthColumn + "'>$doc.display($prop.getName())</div>")
56 + ## end of the line
57 + #set ($StrLine= $!StrLine+"</div>")
58 + #end
59 + ## display the table line
60 + $!StrLine
61 + ## and reinit it
62 + #set ($StrLine='')
63 +#end
64 +
65 +{{/html}}
66 +
67 +{{/velocity}}
68 +{{/code}}
69 +
70 +How it is working?
71 +
72 +I use a classic loop to display all my field except for field who's the name starting with 'CodeH_' string. In this case I display only the PrettyName value. The PrettyName value of this specific field contains of course this HTML code for my tabs.
73 +First HTML code for all tabs:
74 +{{code}}
75 +<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>
76 +{{/code}}
77 +and
78 +HTML code to start a new tab:
79 +{{code}}
80 +<div id="P2" class="tab-pane fade"><h4>Another Comment with large width</h4><DIV Id="TabP2" Class="container">
81 +{{/code}}
82 +Here a screenshot of //BootstrapTabClass// and result to understand better:
83 +[[image:BootstrapTabsClass.png||alt="BootstrapTabsClass"]]
84 +
85 +[[image:BootstrapTabsView.png||alt="BootstrapTabsView"]]
86 +
87 +
88 +To display tips I paste in the PrettyName this HTML code:
89 +{{code}}
90 +My PrettyName <span class="BtsHelp yellow-tooltip" rel="tooltip" data-toggle="tooltip" data-placement="bottom" title="Text displayed in tooltip"> icon:lightbulb </span>:
91 +{{/code}}
92 +
93 +
94 +
95 += Screenshots =
96 +
97 +[[image:BootstrapTabsTooltip.png||alt="BootstrapTabsTooltip"]]
98 +
99 +[[image:BootstrapTabsLarge.png||alt="BootstrapTabsLarge"]]
100 +
101 +
102 +
103 += Xar example in Sandbox space =
License Name
... ... @@ -1,1 +1,1 @@
1 -GNU General Public License 1
1 +Do What The Fuck You Want To Public License 2
Name
... ... @@ -1,0 +1,1 @@
1 +BootstrapTabs
Summary
... ... @@ -1,0 +1,1 @@
1 +A way to display data, from an xwiki application, with bootstrap style tabs and tooltip + an application example in Sandbox space
Type
... ... @@ -1,0 +1,1 @@
1 +xar

Get Connected