• Nesting Dojo Tab Containers

    By Ryan Buening 1 decade ago

    I'm wanting to nest a dojo tab container/pane inside another dojo tab container/pane. Image below is the ultimate goal. (Locations can have multiple buildings associated with them)

    Is this possible with XPages? When I try to "Add Building" with .createTab() on the building container, the partial doesn't seem to run. Was wondering if anyone has done this, or has any examples? Thanks.

    • Nested Property?

      By Ryan Buening 1 decade ago

      http://dojotoolkit.org/reference-guide/dijit/layout/TabContainer-examples.html

      On that page it shows nested TabContainers is possible, but they state:

      "When you have nested tabs you should set the nested parameter to true, to make the formatting distinctive from the outer TabContainer."

      The "nested" property doesn't exist in XPages for the tag though...

      • I had the same problem

        By Pieter JD Malan 1 decade ago

        As temporary workaround I am using a stack container inside tab containers. Not nice and uniform, but works for now.

        • Solution

          By Darin Egan 1 decade ago

          For any properties which do not explicitly appear in the All Properties view, it is possible to add them using the dojoAttributes property. Doing so I was able to reproduce the example of a nested tab container as below. I hope this helps.

             
                 
                     
                         
                     

                     
                          Lorem ipsum and all around...
                         
                             
                             
                         

                     

                     
                          Lorem ipsum and all around - second...
                         
                             
                         

                     

                     
                          Lorem ipsum and all around - last...
                         
                             
                         

                     

                 

                 
                     
                         
                     

                     
                          Lorem ipsum and all around...
                         
                             
                             
                         

                     

                     
                          Lorem ipsum and all around - second...
                         
                             
                         

                     

                     
                          Lorem ipsum and all around - last...
                         
                             
                         

                     

                 

              

           

          • Add Tabs Dynamically

            By Ryan Buening 1 decade ago

            With this solution, is it possible to add tabs dynamically. Example here: http://208.85.190.65/demos/demoextlib.nsf/Core_DynamicTabs.xsp

             

            I've tried a few things, but I keep gettting:

            • Sample xsp

              By Darin Egan 1 decade ago

              Could you include the same *.xsp?

              • Sample XPage

                By Ryan Buening 1 decade ago


                 xmlns:xp="http://www.ibm.com/xsp/core"
                 xmlns:xe="http://www.ibm.com/xsp/coreex"
                >
                    id="button6"
                  value="Add Tab"
                 >
                     event="onclick"
                   submit="true"
                   refreshMode="partial"
                   refreshId="tabs"
                   immediate="true"
                  >
                   
                 
                 
                 
                 
                    id="tabs"
                 >
                     id="djTabContainer1"
                   style="width: 400px; height: 100px;"
                  >
                        id="djTabContainer2"
                    title="Tab 1"
                   >
                   
                            name="nested"
                      value="true"/>
                   

                         id="djTabPane1"
                    >
                     Lorem ipsum and all around...
                     
                             name="selected"
                       value="true"/>
                             name="title"
                       value="Tab 1 Pane 1"/>
                     

                   
                         id="djTabPane2"
                    >
                     Lorem ipsum and all around - second...
                     
                             name="title"
                       value="Tab 1 Pane 2"/>
                     

                   
                         id="djTabPane3"
                    >
                     Lorem ipsum and all around - last...
                     
                             name="title"
                       value="Tab 1 Pane 3"/>
                     

                   
                   
                        id="djTabContainer3"
                    title="Tab 2"
                   >
                   
                            name="nested"
                      value="true"/>
                   

                         id="djTabPane4"
                    >
                     Lorem ipsum and all around...
                     
                             name="selected"
                       value="true"/>
                             name="title"
                       value="Tab 2 Pane 1"/>
                     

                   
                         id="djTabPane5"
                    >
                     Lorem ipsum and all around - second...
                     
                             name="title"
                       value="Tab 2 Pane 2"/>
                     

                   
                         id="djTabPane6"
                    >
                     Lorem ipsum and all around - last...
                     
                             name="title"
                       value="Tab 2 Pane 3"/>
                     

                   
                   
                 
                 

                • Nested solutions

                  By Darin Egan 1 decade ago

                  Ryan,

                  It took me a moment to find the missing pieces, highlighted below. The first is to specify a property on the Tab Container specifying the default tab content. Next, is to declare the default tab as a facet of the Tab Container.

                   

                  <xp:button value="New Tab" id="button1">
                  
                  <xp:eventHandler event="onclick" submit="false">
                  
                  <xp:this.script><![CDATA[dijit.byId('#{id:djTabContainer1}').createTab()]]></xp:this.script>
                  
                  </xp:eventHandler>
                  
                  </xp:button>
                  
                  <xe:djTabContainer id="djTabContainer1" style="width:500px; height:250px;"
                  
                  defaultTabContent="doc1">
                  
                  <xp:this.facets>
                  
                  <xe:djTabPane id="djTabPane1" title="New Document"
                  
                  xp:key="doc1" closable="true" partialEvents="true">
                  
                  </xe:djTabPane>
                  
                  </xp:this.facets>
                  
                  <xe:djTabPane id="djTabPane2" title="Home Tab">
                  
                  <xp:label value="This is the home tab"></xp:label>
                  
                  </xe:djTabPane>
                  
                  </xe:djTabContainer>
                  
                  
                      <xp:button value="New Tab" id="button1">
                  
                      <xp:eventHandler event="onclick" submit="false">
                  
                      <xp:this.script><![CDATA[dijit.byId('#{id:djTabContainer1}').createTab()]]></xp:this.script>
                  
                      </xp:eventHandler>
                  
                      </xp:button>
                  
                      <xe:djTabContainer id="djTabContainer1" style="width:500px; height:250px;"
                  
                      defaultTabContent="doc1">
                  
                      <xp:this.facets>
                  
                      <xe:djTabPane id="djTabPane1" title="New Document"
                  
                      xp:key="doc1" closable="true" partialEvents="true">
                  
                      </xe:djTabPane>
                  
                      </xp:this.facets>
                  
                      <xe:djTabPane id="djTabPane2" title="Home Tab">
                  
                      <xp:label value="This is the home tab"></xp:label>
                  
                      </xe:djTabPane>
                  
                      </xe:djTabContainer>
                  
                  
                          <xp:button value="New Tab" id="button1">
                  
                          <xp:eventHandler event="onclick" submit="false">
                  
                          <xp:this.script><![CDATA[dijit.byId('#{id:djTabContainer1}').createTab()]]></xp:this.script>
                  
                          </xp:eventHandler>
                  
                          </xp:button>
                  
                          <xe:djTabContainer id="djTabContainer1" style="width:500px; height:250px;"
                  
                          defaultTabContent="doc1">
                  
                          <xp:this.facets>
                  
                          <xe:djTabPane id="djTabPane1" title="New Document"
                  
                          xp:key="doc1" closable="true" partialEvents="true">
                  
                          </xe:djTabPane>
                  
                          </xp:this.facets>
                  
                          <xe:djTabPane id="djTabPane2" title="Home Tab">
                  
                          <xp:label value="This is the home tab"></xp:label>
                  
                          </xe:djTabPane>
                  
                          </xe:djTabContainer>
                  
                          <span style="font-family:courier new,courier,monospace;">&nbsp;&lt;xp:button value=&quot;New Tab&quot; id=&quot;button1&quot;&gt;<br/>
                          &nbsp; &lt;xp:eventHandler event=&quot;onclick&quot; submit=&quot;false&quot;&gt;<br/>
                          &nbsp; &nbsp;&lt;xp:this.script&gt;&lt;![CDATA[dijit.byId(&#39;#{id:djTabContainer1}&#39;).createTab()]]&gt;&lt;/xp:this.script&gt;<br/>
                          &nbsp; &lt;/xp:eventHandler&gt;<br/>
                          &nbsp;&lt;/xp:button&gt;<br/>
                          &nbsp;&lt;xe:djTabContainer id=&quot;djTabContainer1&quot; style=&quot;width:500px; height:250px;&quot;<br/>
                          &nbsp; defaultTabContent=&quot;doc1&quot;&gt;<br/>
                          &nbsp; &lt;xp:this.facets&gt;<br/>
                          &nbsp; &nbsp;&lt;xe:djTabPane id=&quot;djTabPane1&quot; title=&quot;New Document&quot;<br/>
                          &nbsp; &nbsp; xp:key=&quot;doc1&quot; closable=&quot;true&quot; partialEvents=&quot;true&quot;&gt;<br/>
                          &nbsp; &nbsp;&lt;/xe:djTabPane&gt;<br/>
                          &nbsp; &lt;/xp:this.facets&gt;<br/>
                          &nbsp; &lt;xe:djTabPane id=&quot;djTabPane2&quot; title=&quot;Home Tab&quot;&gt;<br/>
                          &nbsp; &nbsp;&lt;xp:label value=&quot;This is the home tab&quot;&gt;&lt;/xp:label&gt;<br/>
                          &nbsp; &lt;/xe:djTabPane&gt;<br/>
                          &nbsp;&lt;/xe:djTabContainer&gt;</span><br/>
                          &nbsp;</div>
                      <p>
                          In order to get dynamic creation of inner tabs working, I mocked up an example below. However, the function createTab is declared on the Tab Container and can only add children tabs. Since the parent Tab Container has two children Tab Containers, the dynamically created tabs are added to the children Tab Containers respectively. I&#39;m not certain if it is possible to have a parent container with a child tab pane and a child tab container. For more details on the createTab function, have a look at the file Tabs.js.</p>
                      <p>
                          <span style="font-family:courier new,courier,monospace;">&nbsp;&lt;xp:button value=&quot;New Inner Tab 1 Pane&quot; id=&quot;button2&quot;&gt;<br/>
                          &nbsp; &lt;xp:eventHandler event=&quot;onclick&quot; submit=&quot;false&quot;&gt;<br/>
                          &nbsp; &nbsp;&lt;xp:this.script&gt;&lt;![CDATA[dijit.byId(&#39;#{id:djTabContainer3}&#39;).createTab()]]&gt;&lt;/xp:this.script&gt;<br/>
                          &nbsp; &lt;/xp:eventHandler&gt;<br/>
                          &nbsp;&lt;/xp:button&gt;<br/>
                          &nbsp;&lt;xp:button value=&quot;New Inner Tab 2 Pane&quot; id=&quot;button3&quot;&gt;<br/>
                          &nbsp; &lt;xp:eventHandler event=&quot;onclick&quot; submit=&quot;false&quot;&gt;<br/>
                          &nbsp; &nbsp;&lt;xp:this.script&gt;&lt;![CDATA[dijit.byId(&#39;#{id:djTabContainer4}&#39;).createTab()]]&gt;&lt;/xp:this.script&gt;<br/>
                          &nbsp; &lt;/xp:eventHandler&gt;<br/>
                          &nbsp;&lt;/xp:button&gt;<br/>
                          &nbsp;&lt;xe:djTabContainer id=&quot;djTabContainer2&quot; style=&quot;width:500px; height:250px;&quot;&gt;<br/>
                          &nbsp; &lt;xe:djTabContainer id=&quot;djTabContainer3&quot; title=&quot;Tab 1&quot;<br/>
                          &nbsp; &nbsp;defaultTabContent=&quot;doc2&quot;&gt;<br/>
                          &nbsp; &nbsp;&lt;xp:this.facets&gt;<br/>
                          &nbsp; &nbsp; &lt;xe:djTabPane id=&quot;djTabPane5&quot; title=&quot;New Document&quot;<br/>
                          &nbsp; &nbsp; &nbsp;xp:key=&quot;doc2&quot; closable=&quot;true&quot; partialEvents=&quot;true&quot;&gt;<br/>
                          &nbsp; &nbsp; &lt;/xe:djTabPane&gt;<br/>
                          &nbsp; &nbsp;&lt;/xp:this.facets&gt;<br/>
                          &nbsp; &nbsp;&lt;xe:this.dojoAttributes&gt;<br/>
                          &nbsp; &nbsp; &lt;xp:dojoAttribute name=&quot;nested&quot; value=&quot;true&quot;/&gt;<br/>
                          &nbsp; &nbsp;&lt;/xe:this.dojoAttributes&gt;<br/>
                          &nbsp; &nbsp; &nbsp; &lt;xe:djTabPane id=&quot;djTabPane3&quot; title=&quot;Inner Tab 1 Pane&quot;&gt;<br/>
                          &nbsp; &nbsp; &lt;xp:label value=&quot;Inner Tab 1 Pane&quot; id=&quot;label3&quot;&gt;&lt;/xp:label&gt;<br/>
                          &nbsp; &nbsp; &nbsp; &lt;/xe:djTabPane&gt;<br/>
                          &nbsp; &lt;/xe:djTabContainer&gt;<br/>
                          &nbsp; &lt;xe:djTabContainer id=&quot;djTabContainer4&quot; title=&quot;Tab 2&quot;<br/>
                          &nbsp; &nbsp;defaultTabContent=&quot;doc3&quot;&gt;<br/>
                          &nbsp; &nbsp;&lt;xp:this.facets&gt;<br/>
                          &nbsp; &nbsp; &lt;xe:djTabPane id=&quot;djTabPane6&quot; title=&quot;New Document&quot;<br/>
                          &nbsp; &nbsp; &nbsp;xp:key=&quot;doc3&quot; closable=&quot;true&quot; partialEvents=&quot;true&quot;&gt;<br/>
                          &nbsp; &nbsp; &lt;/xe:djTabPane&gt;<br/>
                          &nbsp; &nbsp;&lt;/xp:this.facets&gt;<br/>
                          &nbsp; &nbsp;&lt;xe:this.dojoAttributes&gt;<br/>
                          &nbsp; &nbsp; &lt;xp:dojoAttribute name=&quot;nested&quot; value=&quot;true&quot;/&gt;<br/>
                          &nbsp; &nbsp;&lt;/xe:this.dojoAttributes&gt;<br/>
                          &nbsp; &nbsp; &nbsp; &lt;xe:djTabPane id=&quot;djTabPane4&quot; title=&quot;Inner Tab 2 Pane&quot;&gt;<br/>
                          &nbsp; &nbsp; &lt;xp:label value=&quot;Inner Tab 2 Pane&quot; id=&quot;label4&quot;&gt;&lt;/xp:label&gt;<br/>
                          &nbsp; &nbsp; &nbsp; &lt;/xe:djTabPane&gt;<br/>
                          &nbsp; &lt;/xe:djTabContainer&gt;<br/>
                          &nbsp;&lt;/xe:djTabContainer&gt;</span><br/>
                          &nbsp;</p>
                      <p>
                          I hope this helps. Darin.</p>
                  </div>
                  

  • Thanks!

    By Ryan Buening 1 decade ago

    Thanks for the replies Darin. Not sure if the Dojo tab container will be the best way to approach my problem now, but you have given me some ideas.