Class Tabs

All Implemented Interfaces:
Animation, Editable, StyleListener, Iterable<Component>

public class Tabs extends Container

A component that lets the user switch between a group of components by clicking on a tab with a given title and/or icon.

Tabs/components are added to a Tabs object by using the addTab and insertTab methods. A tab is represented by an index corresponding to the position it was added in, where the first tab has an index equal to 0 and the last tab has an index equal to the tab count minus 1.

The Tabs uses a SingleSelectionModel to represent the set of tab indices and the currently selected index. If the tab count is greater than 0, then there will always be a selected index, which by default will be initialized to the first tab. If the tab count is 0, then the selected index will be -1.

A simple Tabs sample looks a bit like this:

Form hi = new Form("Tabs", new BorderLayout());

Tabs t = new Tabs();
Style s = UIManager.getInstance().getComponentStyle("Tab");
FontImage icon1 = FontImage.createMaterial(FontImage.MATERIAL_QUESTION_ANSWER, s);

Container container1 = BoxLayout.encloseY(new Label("Label1"), new Label("Label2"));
t.addTab("Tab1", icon1, container1);
t.addTab("Tab2", new SpanLabel("Some text directly in the tab"));

hi.add(BorderLayout.CENTER, t);

The Tabs allows swiping on the X-axis (by default) but also on the Y-axis (demo video):

Form hi = new Form("Test swipe on tabs", BorderLayout.absolute());
Tabs tabs = new Tabs();
ButtonGroup btnGroup = new ButtonGroup();
Button swipeXBtn = RadioButton.createToggle("Swipe on X-Axis", btnGroup);
Button swipeYBtn = RadioButton.createToggle("Swipe on Y-Axis", btnGroup);
btnGroup.setSelected(0);

swipeXBtn.addActionListener(l -> {
    tabs.setSwipeOnXAxis(true);
});

swipeYBtn.addActionListener(l -> {
    tabs.setSwipeOnXAxis(false);
});

hi.add(BorderLayout.NORTH, GridLayout.encloseIn(2, swipeXBtn, swipeYBtn));

//tabs.hideTabs();
hi.add(BorderLayout.CENTER, tabs);

List cards = new ArrayList<>();
for (int i=0; i {
    switch(i2) {
        case 0:
            if(!firstTab.isSelected()) {
                firstTab.setSelected(true);
            }
            break;
        case 1:
            if(!secondTab.isSelected()) {
                secondTab.setSelected(true);
            }
            break;
     }
});
  • Constructor Details

    • Tabs

      public Tabs()
      Creates an empty TabbedPane with a default tab placement of Component.TOP.
    • Tabs

      public Tabs(int tabP)

      Creates an empty TabbedPane with the specified tab placement of either: Component.TOP, Component.BOTTOM, Component.LEFT, or Component.RIGHT.

      Parameters
      • tabP: the placement for the tabs relative to the content
  • Method Details

    • shouldBlockSideSwipe

      protected boolean shouldBlockSideSwipe()
      Description copied from class: Component
      A component that might need side swipe such as the slider could block it from being used for some other purpose when on top of said component.
      Overrides:
      shouldBlockSideSwipe in class Component
    • initLaf

      protected void initLaf(UIManager manager)
      This method initializes the Component defaults constants
      Overrides:
      initLaf in class Container
    • refreshTheme

      public void refreshTheme(boolean merge)

      Makes sure the component is up to date with the current theme, ONLY INVOKE THIS METHOD IF YOU CHANGED THE THEME!

      Parameters
      • merge: indicates if the current styles should be merged with the new styles
      Overrides:
      refreshTheme in class Container
    • deinitialize

      protected void deinitialize()
      Invoked to indicate that the component initialization is being reversed since the component was detached from the container hierarchy. This allows the component to deregister animators and cleanup after itself. This method is the opposite of the initComponent() method.
      Overrides:
      deinitialize in class Component
    • initComponent

      protected void initComponent()
      Allows subclasses to bind functionality that relies on fully initialized and "ready for action" component state
      Overrides:
      initComponent in class Component
    • animate

      public boolean animate()

      Allows the animation to reduce "repaint" calls when it returns false. It is called once for every frame. Frames are defined by the com.codename1.ui.Display class.

      Returns

      true if a repaint is desired or false if no repaint is necessary

      Specified by:
      animate in interface Animation
      Overrides:
      animate in class Component
    • setTextPosition

      protected void setTextPosition(Component tabComponent, int textPosition)

      Invokes set text position on the given tab, the tab should be a toggle button radio by default but can be anything

      Parameters
      • tabComponent: the component representing the tab

      • textPosition: the text position

    • getTabTextPosition

      public int getTabTextPosition()

      Returns The position of the text relative to the icon

      Returns

      The position of the text relative to the icon, one of: LEFT, RIGHT, BOTTOM, TOP

      See also
      • #LEFT

      • #RIGHT

      • #BOTTOM

      • #TOP

    • setTabTextPosition

      public void setTabTextPosition(int textPosition)

      Sets the position of the text relative to the icon if exists

      Parameters
      • textPosition: alignment value (LEFT, RIGHT, BOTTOM or TOP)
      See also
      • #LEFT

      • #RIGHT

      • #BOTTOM

      • #TOP

    • addTab

      public void addTab(String title, Image icon, Component component)

      Adds a component represented by a title and/or icon, either of which can be null. Cover method for insertTab.

      Parameters
      • title: the title to be displayed in this tab

      • icon: the icon to be displayed in this tab

      • component: the component to be displayed when this tab is clicked

      See also
      • #insertTab

      • #removeTabAt

    • addTab

      public Tabs addTab(String title, Image icon, Image pressedIcon, Component component)

      Adds a component represented by a title and/or icon, either of which can be null. Cover method for insertTab.

      Parameters
      • title: the title to be displayed in this tab

      • icon: the icon to be displayed in this tab

      • pressedIcon: the icon shown when the tab is selected

      • component: the component to be displayed when this tab is clicked

      Returns

      this so these calls can be chained

      See also
      • #insertTab

      • #removeTabAt

    • addTab

      public Tabs addTab(String title, char materialIcon, float iconSize, Component component)

      Adds a component represented by a title and/or icon, either of which can be null. Cover method for insertTab.

      Parameters
      • title: the title to be displayed in this tab

      • materialIcon: one of the material design icon constants from com.codename1.ui.FontImage

      • iconSize: icon size in millimeters

      • component: the component to be displayed when this tab is clicked

      Returns

      this so these calls can be chained

      See also
      • #insertTab

      • #removeTabAt

    • addTab

      public Tabs addTab(String title, char icon, Font font, float iconSize, Component component)

      Adds a component represented by a title and/or icon, either of which can be null. Cover method for insertTab.

      Parameters
      • title: the title to be displayed in this tab

      • icon: an icon from the font

      • font: the font for the icon

      • iconSize: icon size in millimeters

      • component: the component to be displayed when this tab is clicked

      Returns

      this so these calls can be chained

      See also
      • #insertTab

      • #removeTabAt

    • addTab

      public void addTab(String title, Component component)

      Adds a component represented by a title and no icon. Cover method for insertTab.

      Parameters
      • title: the title to be displayed in this tab

      • component: the component to be displayed when this tab is clicked

      See also
      • #insertTab

      • #removeTabAt

    • addTab

      public void addTab(Button tab, Component component)

      Adds a component represented by a button. Cover method for insertTab. The Button styling will be associated with "Tab" UIID.

      Parameters
      • tab: represents the tab on top

      • component: the component to be displayed when this tab is clicked

      Deprecated

      should use radio button as an argument

      See also
      • #insertTab

      • #removeTabAt

    • createTab

      protected Component createTab(String title, Font font, char icon, float size)

      Creates a tab component by default this is a RadioButton but subclasses can use this to return anything

      Parameters
      • title: the title of the tab

      • icon: an icon from the font

      • font: the font for the icon

      Returns

      component instance

    • createTab

      protected Component createTab(String title, Image icon)

      Creates a tab component by default this is a RadioButton but subclasses can use this to return anything

      Parameters
      • title: the title of the tab

      • icon: the icon of the tab

      Returns

      component instance

    • insertTab

      public void insertTab(String title, Image icon, Component component, int index)

      Inserts a component, at index, represented by a title and/or icon, either of which may be null. Uses java.util.Vector internally, see insertElementAt for details of insertion conventions.

      Parameters
      • title: the title to be displayed in this tab

      • icon: the icon to be displayed in this tab

      • component: The component to be displayed when this tab is clicked.

      • index: the position to insert this new tab

      See also
      • #addTab

      • #removeTabAt

    • insertTab

      public void insertTab(String title, char icon, Font font, float iconSize, Component component, int index)

      Inserts a component, at index, represented by a title and/or icon, either of which may be null. Uses java.util.Vector internally, see insertElementAt for details of insertion conventions.

      Parameters
      • title: the title to be displayed in this tab

      • icon: an icon from the font

      • font: the font for the icon

      • component: The component to be displayed when this tab is clicked.

      • index: the position to insert this new tab

      See also
      • #addTab

      • #removeTabAt

    • insertTab

      public void insertTab(Component tab, Component component, int index)

      Inserts a component, at index, represented by a button Uses java.util.Vector internally, see insertElementAt for details of insertion conventions. The Button styling will be associated with "Tab" UIID.

      Parameters
      • tab: represents the tab on top

      • component: The component to be displayed when this tab is clicked.

      • index: the position to insert this new tab

      Deprecated

      should use radio button as an argument

      See also
      • #addTab

      • #removeTabAt

    • bindTabActionListener

      protected void bindTabActionListener(Component tab, ActionListener l)

      Binds an action listener to the tab component. this method should be used when overriding createTab

      Parameters
      • tab: the tab component

      • l: the listener

    • setTabTitle

      public void setTabTitle(String title, Image icon, int index)

      Updates the information about the tab details

      Parameters
      • title: the title to be displayed in this tab

      • icon: the icon to be displayed in this tab

      • index: the position to insert this new tab

    • setTabTitle

      protected void setTabTitle(Component tab, String title, Image icon)

      Updates the tabs title . This method should be used when overriding createTab

      Parameters
      • tab: the tab component

      • title: the title

      • icon: the new icon

    • getTabTitle

      public String getTabTitle(int index)

      Returns the title of the tab at the given index

      Parameters
      • index: index for the tab
      Returns

      label of the tab at the given index

    • getTabTitle

      protected String getTabTitle(Component tab)

      Returns the title of the tab component. This method should be used when overriding createTab

      Parameters
      • tab: the tab component
      Returns

      label of the tab

    • getTabIcon

      protected Image getTabIcon(Component tab)

      Returns the icon of the tab component. This method should be used when overriding createTab

      Parameters
      • tab: the tab component
      Returns

      icon of the tab

    • getTabIcon

      public Image getTabIcon(int index)

      Returns the icon of the tab at the given index

      Parameters
      • index: index for the tab
      Returns

      icon of the tab at the given index

    • getTabSelectedIcon

      protected Image getTabSelectedIcon(Component tab)

      Returns the selected icon of the tab component. This method should be used when overriding createTab

      Parameters
      • tab: the tab component
      Returns

      icon of the tab

    • getTabSelectedIcon

      public Image getTabSelectedIcon(int index)

      Returns the icon of the tab at the given index

      Parameters
      • index: index for the tab
      Returns

      icon of the tab at the given index

    • setTabSelectedIcon

      public void setTabSelectedIcon(int index, Image icon)

      Sets the selected icon of the tab at the given index

      Parameters
      • index: index for the tab

      • icon: of the tab at the given index

    • setTabSelectedIcon

      protected void setTabSelectedIcon(Component tab, Image icon)

      Sets the selected icon of the tab. This method should be used when overriding createTab

      Parameters
      • tab: the tab component

      • icon: of the tab

    • removeTabAt

      public void removeTabAt(int index)

      Removes the tab at index. After the component associated with index is removed, its visibility is reset to true to ensure it will be visible if added to other containers.

      Parameters
      • index: the index of the tab to be removed
      Throws
      • IndexOutOfBoundsException: @throws IndexOutOfBoundsException if index is out of range (index = tab count)
      See also
      • #addTab

      • #insertTab

    • getTabComponentAt

      public Component getTabComponentAt(int index)

      Returns the tab at index.

      Parameters
      • index: the index of the tab to be removed
      Returns

      the component at the given tab location

      Throws
      • IndexOutOfBoundsException: @throws IndexOutOfBoundsException if index is out of range (index = tab count)
      See also
      • #addTab

      • #insertTab

    • indexOfComponent

      public int indexOfComponent(Component component)

      Returns the index of the tab for the specified component. Returns -1 if there is no tab for this component.

      Parameters
      • component: the component for the tab
      Returns
      Returns:
      the first tab which matches this component, or -1 if there is no tab for this component
    • getTabCount

      public int getTabCount()

      Returns the number of tabs in this tabbedpane.

      Returns

      an integer specifying the number of tabbed pages

    • getSelectedIndex

      public int getSelectedIndex()

      Returns the currently selected index for this tabbedpane. Returns -1 if there is no currently selected tab.

      Returns

      the index of the selected tab

    • setSelectedIndex

      public void setSelectedIndex(int index)

      Sets the selected index for this tabbedpane. The index must be a valid tab index.

      Parameters
      • index: the index to be selected
      Throws
      • IndexOutOfBoundsException: @throws IndexOutOfBoundsException if index is out of range (index = tab count)
    • getSelectedComponent

      public Component getSelectedComponent()

      Returns the component associated with the tab at the given index

      Returns

      the component is now showing in the tabbed pane

    • addTabsFocusListener

      public void addTabsFocusListener(FocusListener listener)

      Adds a focus listener to the tabs buttons

      Parameters
      • listener: FocusListener
      Deprecated

      use addSelectionListener instead

    • removeTabsFocusListener

      public void removeTabsFocusListener(FocusListener listener)

      Removes a foucs Listener from the tabs buttons

      Parameters
      • listener: FocusListener
      Deprecated

      use addSelectionListener instead

    • addSelectionListener

      public void addSelectionListener(SelectionListener listener)

      Adds a selection listener to the tabs.

      Parameters
      • listener: SelectionListener
    • removeSelectionListener

      public void removeSelectionListener(SelectionListener listener)

      Removes a selection Listener from the tabs

      Parameters
      • listener: SelectionListener
    • toString

      public String toString()

      Overriden to return a useful value for debugging purposes

      Returns

      a string representation of this component

      Overrides:
      toString in class Component
    • getTabPlacement

      public int getTabPlacement()

      Returns the placement of the tabs for this tabbedpane.

      Returns

      the tab placement value

      See also
      • #setTabPlacement
    • setTabPlacement

      public void setTabPlacement(int tabPlacement)

      Sets the tab placement for this tabbedpane. Possible values are:

      • Component.TOP

      • Component.BOTTOM

      • Component.LEFT

      • Component.RIGHT

      The default value, if not set, is Component.TOP.

      Parameters
      • tabPlacement: the placement for the tabs relative to the content
    • getContentPane

      public Container getContentPane()

      This method retrieves the Tabs content pane

      Returns

      the content pane Container

    • getTabsContainer

      public Container getTabsContainer()

      This method retrieves the Tabs buttons Container

      Returns

      the Tabs Container

    • setSelectedIndex

      public void setSelectedIndex(int index, boolean slideToSelected)

      Sets the currently selected index in the tabs component

      Parameters
      • index: the index for the tab starting with tab 0.

      • slideToSelected: @param slideToSelected true to animate the transition to the new selection false to just move immediately

    • selectTab

      protected void selectTab(Component tab)

      Invoked to select a specific tab, this method should be overriden for subclasses overriding createTab

      Parameters
      • tab: the tab
    • hideTabs

      public void hideTabs()
      Hide the tabs bar
    • showTabs

      public void showTabs()
      Show the tabs bar if it was hidden
    • isSwipeActivated

      public boolean isSwipeActivated()

      Returns true if the swipe between tabs is activated, this is relevant for touch devices only

      Returns

      swipe activated flag

    • setSwipeActivated

      public void setSwipeActivated(boolean swipeActivated)

      Setter method for swipe mode

      Parameters
      • swipeActivated
    • isChangeTabOnFocus

      public boolean isChangeTabOnFocus()

      Indicates that a tab should change when the focus changes without the user physically pressing a button

      Returns

      the changeTabOnFocus

    • setChangeTabOnFocus

      public void setChangeTabOnFocus(boolean changeTabOnFocus)

      Indicates that a tab should change when the focus changes without the user physically pressing a button

      Parameters
      • changeTabOnFocus: the changeTabOnFocus to set
    • isChangeTabContainerStyleOnFocus

      public boolean isChangeTabContainerStyleOnFocus()

      Indicates that the tabs container should have its style changed to the selected style when one of the tabs has focus this allows incorporating it into the theme of the application

      Returns

      the changeTabContainerStyleOnFocus

    • setChangeTabContainerStyleOnFocus

      public void setChangeTabContainerStyleOnFocus(boolean changeTabContainerStyleOnFocus)

      Indicates that the tabs container should have its style changed to the selected style when one of the tabs has focus this allows incorporating it into the theme of the application

      Parameters
      • changeTabContainerStyleOnFocus: the changeTabContainerStyleOnFocus to set
    • setTabsContentGap

      public void setTabsContentGap(int tabsGap)

      This method allows setting the Tabs content pane spacing (right and left), This can be used to create an effect where the selected tab is smaller and the right and left tabs are visible on the sides

      Parameters
      • tabsGap: @param tabsGap the gap on the sides of the content in pixels, the value must be positive.
    • getTabUIID

      public String getTabUIID()

      The UIID for a tab component which defaults to Tab

      Returns

      the tabUIID

    • setTabUIID

      public void setTabUIID(String tabUIID)

      The UIID for a tab button which defaults to Tab. Tab buttons used to have two separate styles for selected and unselected. This was later consolidated so the tabs behave as a single toggle button (radio button) however one thing that remained is a call to setUIID that is implicitly made to restore the original "Tab" style.

      Effectively Tabs invokes the setUIID call on the Tab switch so if you want to manipulate the tab UIID manually (have one red and one green tab) this is a problem..

      To enable such code add all the tabs then just just invoke setTabUIID(null) to disable this behavior.

      Parameters
      • tabUIID: the tabUIID to set
    • isEagerSwipeMode

      public boolean isEagerSwipeMode()

      Allows marking tabs as swipe "eager" which instantly triggers swipe on movement rather than threshold the swipe.

      Returns

      the eagerSwipeMode

    • setEagerSwipeMode

      public void setEagerSwipeMode(boolean eagerSwipeMode)

      Allows marking tabs as swipe "eager" which instantly triggers swipe on movement rather than threshold the swipe.

      Parameters
      • eagerSwipeMode: the eagerSwipeMode to set
    • isAnimateTabSelection

      public boolean isAnimateTabSelection()

      Indicates whether clicking on a tab button should result in an animation to the selected tab or an immediate switch

      Returns

      the animateTabSelection

    • setAnimateTabSelection

      public void setAnimateTabSelection(boolean animateTabSelection)

      Indicates whether clicking on a tab button should result in an animation to the selected tab or an immediate switch

      Parameters
      • animateTabSelection: the animateTabSelection to set
    • createTabSlideMotion

      protected Motion createTabSlideMotion(int start, int end)

      Allows developers to customize the motion object for the slide effect to provide a linear slide effect. You can use the tabsSlideSpeedInt theme constant to define the time in milliseconds between releasing the swiped tab and reaching the next tab. This currently defaults to 200.

      Parameters
      • start: start position

      • end: end position for the motion

      Returns

      the motion object

    • isSwipeOnXAxis

      public boolean isSwipeOnXAxis()

      Returns true if the swipe is on the X-Axis, false if the swipe is on the Y-Axis.

      Returns

      swipe direction flag

    • setSwipeOnXAxis

      public void setSwipeOnXAxis(boolean b)

      It defaults to true; you can set it to false for use cases like the one discussed here: Realize a set of Containers that are browsable with a finger, like a deck of cards

      Example of usage (demo video):

      Form hi = new Form("Test swipe on tabs", BorderLayout.absolute());
      Tabs tabs = new Tabs();
      ButtonGroup btnGroup = new ButtonGroup();
      Button swipeXBtn = RadioButton.createToggle("Swipe on X-Axis", btnGroup);
      Button swipeYBtn = RadioButton.createToggle("Swipe on Y-Axis", btnGroup);
      btnGroup.setSelected(0);
      
      swipeXBtn.addActionListener(l -> {
          tabs.setSwipeOnXAxis(true);
      });
      
      swipeYBtn.addActionListener(l -> {
          tabs.setSwipeOnXAxis(false);
      });
      
      hi.add(BorderLayout.NORTH, GridLayout.encloseIn(2, swipeXBtn, swipeYBtn));
      
      //tabs.hideTabs();
      hi.add(BorderLayout.CENTER, tabs);
      
      List cards = new ArrayList<>();
      for (int i=0; i<20; i++) {
          Container card = new Container(BoxLayout.y());
          card.getAllStyles().setBorder(Border.createLineBorder(CN.convertToPixels(1)/5, 0));
          card.addAll(FlowLayout.encloseCenter(new Label(FontImage.createMaterial(FontImage.MATERIAL_PERSON, "Label", 50.0f))), new Label("Card " + i));
          cards.add(card);
          tabs.addTab("tab " + i, card);
      }
      
      hi.show();
      
      Parameters
      • b: true to set the swipe on the X-Axis, false to set the swipe on the Y-Axis
      Since

      8.0

    • getPropertyNames

      public String[] getPropertyNames()

      A component may expose mutable property names for a UI designer to manipulate, this API is designed for usage internally by the GUI builder code

      Returns

      the property names allowing mutation

      Overrides:
      getPropertyNames in class Component
    • getPropertyTypes

      public Class[] getPropertyTypes()

      Matches the property names method (see that method for further details).

      Returns

      the types of the properties

      Overrides:
      getPropertyTypes in class Component
    • getPropertyTypeNames

      public String[] getPropertyTypeNames()

      This method is here to workaround an XMLVM array type bug where property types aren't identified properly, it returns the names of the types using the following type names: String,int,double,long,byte,short,char,String[],String[][],byte[],Image,Image[],Object[],ListModel,ListCellRenderer

      Returns

      Array of type names

      Overrides:
      getPropertyTypeNames in class Component
    • getPropertyValue

      public Object getPropertyValue(String name)

      Returns the current value of the property name, this method is used by the GUI builder

      Parameters
      • name: the name of the property
      Returns

      the value of said property

      Overrides:
      getPropertyValue in class Component
    • setPropertyValue

      public String setPropertyValue(String name, Object value)

      Sets a new value to the given property, returns an error message if failed and null if successful. Notice that some builtin properties such as "$designMode" might be sent to components to indicate application state.

      Parameters
      • name: the name of the property

      • value: new value for the property

      Returns

      error message or null

      Overrides:
      setPropertyValue in class Component