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
cog
cogA way to display data, from an xwiki application, with bootstrap style tabs and tooltip + an application example in Sandbox space
Type
TypeXAR
Developed byUnknown
CategoryApplication
Developed by

Pascal Bastien

Rating
Rate!
0 Votes
LicenseGNU General Public License 1
LicenseDo What The Fuck You Want To Public License 2

Description

 (still working on it)

Recepi

I have an application with data but I want simply add tabs presentation and tooltip help.

ingredients

  • a nice application with a Class BootstrapTabClass, Template BootstrapTabTemplate and Sheet BootstrapTabSheet
  • some CSS instruction to dipslay 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

Directions

Here velocity code in my BootstrapTabSheet sheet:

{{velocity}}
## tab and table CSS
#set($discard = $xwiki.ssx.use("Sandbox.BootstrapTabSheet"))
#if ($xcontext.action == 'view')
  ## Affiche une CSS spécifique en visualisation
  #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')
    ##Début du bloc Div: insère le contenu HTML (début du Div) contenu dans le 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 it is working?

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.
First HTML code for all tabs:
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

    To display tips I paste in the PrettyName this HTML code:
    My PrettyName class="BtsHelp yellow-tooltip" rel="tooltip"  data-toggle="tooltip" data-placement="bottom" title="Text displayed in tooltip"> icon:lightbulb

    Screenshots

    BootstrapTabsTooltip

    BootstrapTabsLarge

    Xar example in Sandbox space

    Get Connected