Class Accordion

java.lang.Object
com.codename1.ui.Component
com.codename1.ui.Container
com.codename1.components.Accordion
All Implemented Interfaces:
Animation, Editable, StyleListener, Iterable<Component>
public class Accordion extends Container

The Accordion ui pattern is a vertically stacked list of items. Each item can be opened/closed to reveal more content similarly to a com.codename1.ui.tree.Tree however unlike the com.codename1.ui.tree.Tree the Accordion is designed to include containers or arbitrary components rather than model based data.

This makes the Accordion more convenient as a tool for folding/collapsing UI elements known in advance whereas a com.codename1.ui.tree.Tree makes more sense as a tool to map data e.g. filesystem structure, XML hierarchy etc.

Note that the Accordion like many composite components in Codename One is scrollable by default which means you should use it within a non-scrollable hierarchy. If you wish to add it into a scrollable com.codename1.ui.Container you should disable it's default scrollability using setScrollable(false).

Example Usage

Form f = new Form("Accordion", new BorderLayout());
Accordion accr = new Accordion();
accr.addContent("Item1", new SpanLabel("The quick brown fox jumps over the lazy dog\n"
        + "The quick brown fox jumps over the lazy dog"));
accr.addContent("Item2", new SpanLabel("The quick brown fox jumps over the lazy dog\n"
        + "The quick brown fox jumps over the lazy dog\n "
        + "The quick brown fox jumps over the lazy dog\n "
        + "The quick brown fox jumps over the lazy dog\n "
        + ""));

accr.addContent("Item3", BoxLayout.encloseY(new Label("Label"), new TextField(), new Button("Button"), new CheckBox("CheckBox")));

f.add(BorderLayout.CENTER, accr);
f.show();

Screenshots

  • Constructor Details

    • Accordion

      public Accordion()
      Empty Constructor

    • Accordion

      public Accordion(Image openIcon, Image closeIcon)

      Create an accordion with open and close icons set

      Parameters

      • openIcon: the open icon of the accordion

      • closeIcon: the close icon of the accordion

    • Accordion

      public Accordion(char openIcon, char closeIcon)

      Create an accordion with open and close icons set

      Parameters

      • openIcon: the open icon of the accordion

      • closeIcon: the close icon of the accordion

    • Accordion

      public Accordion(char openIcon, char closeIcon, String openCloseUIID)

      Create an accordion with open and close icons set

      Parameters

      • openIcon: the open icon of the accordion

      • closeIcon: the close icon of the accordion

      • openCloseUIID: the uiid of the open and close icons

  • Method Details

    • addContent

      public void addContent(String header, Component body)

      Add an item to the Accordion Container

      Parameters

      • header: the item title

      • body: the item Component to hide/show

    • setHeader

      public void setHeader(String header, Component body)

      Replaces the title for content that was already added. Notice that this will fail if the content isn't in yet.

      Parameters

      • header: the new title for the content

      • body: the content that was already added with a different header using addContent

    • setHeader

      public void setHeader(Component header, Component body)

      Replaces the title for content that was already added. Notice that this will fail if the content isn't in yet.

      Parameters

      • header: the new title for the content

      • body: the content that was already added with a different header using addContent

    • removeContent

      public void removeContent(Component body)

      Removes the content from the accordion

      Parameters
      • body: the body previously added with com.codename1.ui.Component) or

    • addContent

      public void addContent(Component header, Component body)

      Add an item to the Accordion Container

      Parameters

      • header: the item title Component

      • body: the item Component to hide/show

    • setHeaderUIID

      public void setHeaderUIID(Component body, String uiid)

      Sets the header UIID for the given accordion uiid

      Parameters

      • body: the component within the accordion

      • uiid: the uiid for the header

    • getCurrentlyExpanded

      public Component getCurrentlyExpanded()

      Returns the body component of the currently expanded accordion element or null if none is expanded

      Returns

      a component

    • expand

      public void expand(Component body)

      Expands the accordion with the given "body"

      Parameters
      • body: the body component of the accordion to expand

    • collapse

      public void collapse(Component body)

      Closes the accordion with the given "body"

      Parameters
      • body: the body component of the accordion to close

    • setCloseIcon

      public void setCloseIcon(Image closeIcon)

      Sets the closed icon

      Parameters
      • closeIcon: the close icon

    • setOpenIcon

      public void setOpenIcon(Image openIcon)

      Sets the open icon

      Parameters
      • openIcon: the open icon

    • setCloseIcon

      public void setCloseIcon(char closeIcon)

      Sets the closed icon using material image

      Parameters
      • closeIcon: the close icon (e.g. FontImage.MATERIAL_KEYBOARD_ARROW_DOWN)

    • setOpenIcon

      public void setOpenIcon(char openIcon)

      Sets the open icon using material image

      Parameters
      • openIcon: the open icon (e.g. FontImage.MATERIAL_KEYBOARD_ARROW_RIGHT)

    • setCloseIcon

      public void setCloseIcon(char closeIcon, float size)

      Sets the closed icon using material image

      Parameters

      • closeIcon: the close icon (e.g. FontImage.MATERIAL_KEYBOARD_ARROW_DOWN)

      • size: the size in millimeters for the arrow

    • setOpenIcon

      public void setOpenIcon(char openIcon, float size)

      Sets the open icon using material image

      Parameters

      • openIcon: the open icon (e.g. FontImage.MATERIAL_KEYBOARD_ARROW_RIGHT)

      • size: the size in millimeters for the arrow

    • setCloseIcon

      public void setCloseIcon(char closeIcon, String uiid)

      Sets the closed icon using material image with a custom uiid

      Parameters

      • closeIcon: the close icon (e.g. FontImage.MATERIAL_KEYBOARD_ARROW_DOWN)

      • uiid: to custom icon from res file

    • setOpenIcon

      public void setOpenIcon(char openIcon, String uiid)

      Sets the open icon using material image with a custom uiid

      Parameters

      • openIcon: the open icon (e.g. FontImage.MATERIAL_KEYBOARD_ARROW_RIGHT)

      • uiid: to custom icon from res file

    • setAutoClose

      public void setAutoClose(boolean autoClose)

      Sets the auto close flag, if this flag is true clicking on an item to open an item will automatically close the previous opened item.

      Parameters
      • autoClose: determines if more then 1 item can be opened on screen

    • addOnClickItemListener

      public void addOnClickItemListener(ActionListener a)

      To listen item click in accordion component

      Parameters
      • a: ActionListener to implement the method

    • removeOnClickItemListener

      public void removeOnClickItemListener(ActionListener a)

      To remove item click in accordion component

      Parameters
      • a: ActionListener to implement the method

    • getBackgroundItemUIID

      public String getBackgroundItemUIID()

      Default UIID for the content item within the accordion

      Returns

      the uiid

    • setBackgroundItemUIID

      public void setBackgroundItemUIID(String uiidBackGroundItem)

      Default UIID for the content item within the accordion

      Parameters
      • uiidBackGroundItem: to custom the background in the accordion component

    • getHeaderUIID

      public String getHeaderUIID()
      UIID for the header component

    • setHeaderUIID

      public void setHeaderUIID(String uiidHeader)

      UIID for the header component

      Parameters
      • uiidHeader: to custom the header in the accordion component

    • getOpenCloseIconUIID

      public String getOpenCloseIconUIID()

      UIID for the arrow icon for expanding/collapsing

      Returns

      the UIID

    • setOpenCloseIconUIID

      public void setOpenCloseIconUIID(String uiidOpenCloseIcon)

      UIID for the arrow icon for expanding/collapsing

      Parameters
      • uiidOpenCloseIcon: to custom the background of the Open/Close icon