4. TabContainer

Last page update: November 15, 2011

Note

TabContainer features:

• Type: Dojo widget
• Common attributes: check the common attributes section

• Definition

• Attributes

• Examples:

  • simple example
  • “tabPosition” example
  • “remote” example

4.1. Definition

pane.tabContainer([**kwargs])

A TabContainer is a container that has multiple panes, but shows only one pane at a time. There are a set of tabs corresponding to each pane, where each tab has the title of the pane.

4.2. Attributes

tabContainer’s attributes:

• tabPosition: define the place of the paneContainer’s labels. Default value is top-h. For all supported possibilities, check the “tabPosition” example

• selected: Allow to specify the pane to visualize. You will find in the datastore

  the current selected tab as a type-number into a specific folder. If you don’t specify it, then the first pane will be visualized (but in this case you have to pass it as a **kwargs)

attributes of the tabContainer’s children (paneContainers):

• title: the pane title shown on the relative pane tab

4.3. Examples

4.3.1. simple example

• tabContainer [basic]

  Note

  example elements’ list:

  • classes: GnrCustomWebPage
  • components: TestHandlerFull
  • webpage variables: py_requires
  • widgets: ContentPane

• Code:

  # -*- coding: UTF-8 -*-
  """tabContainer"""
  
  class GnrCustomWebPage(object):
      py_requires = "gnrcomponents/testhandler:TestHandlerFull"
  
      def test_1_basic(self, pane):
          """Basic tabs"""
          tc = pane.tabContainer(height='200px', selected='^.selected.tab')
          cp = tc.contentPane(title='first tab')
          cp.div("""A tabContainer with two contentPanes. The "title" attribute appears on tabs.
                    You find the tab selected in the datastore at the path specified in the
                    selected attribute (in this example, test/test_1_basic/selected/tab)""",
                    text_align='justify', margin='10px')
          tc.contentPane(title='Second tab').div('I\'m the second tab', font_size='.9em',
                                                 text_align='justify', margin='10px')
  

4.3.2. “tabPosition” example

• tabContainer [tabPosition]

• Description: features of the tabPosition attribute

  Note

  example elements’ list:

  • classes: GnrCustomWebPage
  • components: TestHandlerFull
  • webpage variables: py_requires
  • widgets: BorderContainer, ContentPane

• Code:

  # -*- coding: UTF-8 -*-
  """tabContainer - tabPosition"""
  
  class GnrCustomWebPage(object):
      py_requires = "gnrcomponents/testhandler:TestHandlerFull"
  
      def test_2_tabPosition(self, pane):
          """tabPosition attribute"""
          bc = pane.borderContainer(height='460px')
          tc = bc.tabContainer(height='100px', margin='1em', tabPosition='top-h')
          tc.contentPane(title='One').div("""tabPosition=\'top-h\' (this is the default
                                             value for the tabPosition.)""", margin='1em')
          tc.contentPane(title='Two')
          tc = bc.tabContainer(height='100px', margin='1em', tabPosition='left-h')
          tc.contentPane(title='One').div('tabPosition=\'left-h\'', margin='1em')
          tc.contentPane(title='Two')
          tc = bc.tabContainer(height='100px', margin='1em', tabPosition='right-h')
          tc.contentPane(title='One').div('tabPosition=\'right-h\'', margin='1em')
          tc.contentPane(title='Two')
          tc = bc.tabContainer(height='100px', tabPosition='bottom')
          tc.contentPane(title='One').div('tabPosition=\'bottom\'', margin='1em')
          tc.contentPane(title='Two')
  

4.3.3. “remote” example

• tabContainer [remote]

• Description: a tabContainer created remotely through the remote method (the NumberSpinner widget is used to choose the number of tabs)

  Note

  example elements’ list:

  • classes: GnrCustomWebPage
  • components: TestHandlerFull
  • controllers: remote
  • webpage variables: py_requires
  • widgets: BorderContainer, ContentPane, data, NumberSpinner

• Code:

  # -*- coding: UTF-8 -*-
  """tabContainer - remote"""
  
  class GnrCustomWebPage(object):
      py_requires = "gnrcomponents/testhandler:TestHandlerFull"
  
      def test_3_remote(self, pane):
          """remote tabContainer"""
          bc = pane.borderContainer(height='300px')
          fb = bc.contentPane(region='top', height='30px').formbuilder(cols=2)
          fb.numberspinner(value='^.numtabs', lbl='Number of tabs', min=0, max=20)
          bc.data('.numtabs', 0)
          fb.div('Move focus out of the NumberSpinner to update tabs (max tab numbers set to 20)',
                 font_size='.9em', text_align='justify', margin='10px')
          tc = bc.tabContainer(region='center')
          tc.remote('tabs', numtabs='^.numtabs')
  
      def remote_tabs(self, tc, numtabs):
          for i in range(numtabs):
              tab = tc.contentPane(title='Tab %d' % i, position='absolute', margin='60px')
              tab.div('This is tab n.%d' % i)