Accordion Layout Tutorial

Table of Contents

Accordion Layout Tutorial

This tutorial will demonstrate two ways in which we can implement an accordion style menu layout. The first will use the mobi:accordion component to expand and collapse menu items while the second will use the accordion attribute with the mobi:contentStackMenu.

  1. mobi:accordion
  2. accordion attribute

The full source can be found at the bottom of the tutorial here. Additional information regarding <mobi:accordion> and contentStackMenu accordion attribute can be found here:


Basic <mobi:accordion> layout


The basic accordion layout will consist of 3 expandable/collapsible contentPanes within <mobi:accordion>. The first step is to add the following code to the <h:body> of you your main page:


index.xhtml
<mobi:accordion id="acc" selectedId="#{accBean.selectedPane}">			
</mobi:accordion>


The accordion component requires that we keep track of the currently selected contentPane ID in our backing bean. We will add the selectedPane bean property shortly.

Our next step is to add the content for our accordion. Please add the following 3 contentPanes within the <mobi:accordion> component:


index.xhtml
      <mobi:contentPane id="panel1" title="panel1">
	   <mobi:fieldsetGroup>
		<mobi:fieldsetRow>
                     Panel 1
		</mobi:fieldsetRow>
	    </mobi:fieldsetGroup>
      </mobi:contentPane>
      <mobi:contentPane id="panel2" title="panel2">
	    <mobi:fieldsetGroup>
		<mobi:fieldsetRow>
		     Panel 2
		</mobi:fieldsetRow>
	    </mobi:fieldsetGroup>
      </mobi:contentPane>
      <mobi:contentPane id="panel3" title="panel3">
	    <mobi:fieldsetGroup>
		<mobi:fieldsetRow>
		     Panel 3
	        </mobi:fieldsetRow>
            </mobi:fieldsetGroup>
      </mobi:contentPane>


To demonstrate moving between accordion panes, we will add a commandButton that will allow us to move from Panel 1 to Panel 3.. Please add the following <mobi:commandButton> to the contentPane with id 'panel1':


index.xhtml
    <mobi:contentPane id="panel1" title="panel1">
	 <mobi:fieldsetGroup>
	    <mobi:fieldsetRow>Panel 1
		<mobi:commandButton value="Go To Panel 3" actionListener="#{accBean.changeToPane3}"/>
	    </mobi:fieldsetRow>
	 </mobi:fieldsetGroup>
    </mobi:contentPane>


Managed Bean

The final step is to create the backing bean that will contain our selected id and actionListener code. Please add AccBean.java to your project and add the following code:


AccBean.java
@ManagedBean(name = "accBean")
@ViewScoped
public class AccBean implements Serializable {

	private String selectedPane = "panel1";

	public void changeToPane3() {
		this.selectedPane = "panel3";
	}

	public String getSelectedPane() {
		return selectedPane;
	}

	public void setSelectedPane(String selectedPane) {
		this.selectedPane = selectedPane;
	}
}


The accordion will now look like the following:





Accordion attribute


This example will demonstrate how to create an accordion menu layout using the contentStackMenu's accordion attribute instead of the <mobi:accordion> component. The first step is to create our layout using the <mobi:splitPane> to create left and right view areas. Please add the following code to the <body> of your page:


index.xhtml
     <mobi:splitPane>
	 <f:facet name="left">
         </f:facet>
	 <f:facet name="right">
         </f:facet>
     </mobi:splitPane>


The menu items on the left hand side screen and will drive the content area on the right. The <mobi:contentStackMenu> will iterate over an array of custom MenuEntry objects which contain a menu item's label, value, icon, url, etc.. To enable expandable/collapsible regions on the contactStackMenu, we set the accordion attribute to true. Please add the following inside of the <f:facet name="left"> tag:


index.xhtml
<f:facet name="left">
   <h:form id="menuForm">
	<mobi:contentStackMenu id="mnu" value="#{menuAcc.allPanes}" var="item" accordion="true"
        contentStackId="stack1" selectedPane="#{menuAcc.selPane}">
		<mobi:contentMenuItem label="#{item.label}" value="#{item.value}" />
	</mobi:contentStackMenu>
   </h:form>
</f:facet>


The contentStackMenu is tied to the contentStack via it's contentStackId="stack1" attribute. Selecting a contentStackMenu item will render the corresponding contentPane in the contentStack. Please add the following code to the right facet:


<f:facet name="right">
      <mobi:fieldsetGroup>
		<mobi:fieldsetRow>
			<mobi:contentStack id="stack1" currentId="#{accBean.selPane}" contentMenuId="mnu">
				<mobi:contentPane id="panel1">
                                     Content Pane 1
                                </mobi:contentPane>
				<mobi:contentPane id="panel2">
                                     Content Pane 2
                                </mobi:contentPane>
				<mobi:contentPane id="panel3">
                                     Content Pane 3
		                </mobi:contentPane>
				<mobi:contentPane id="panel4">
                                     Content Pane 4
                                </mobi:contentPane>
				<mobi:contentPane id="panel5">
                                     Content Pane 5
                                </mobi:contentPane>
				<mobi:contentPane id="panel6">
                                     Content Pane 6
                                </mobi:contentPane>
			</mobi:contentStack>
		</mobi:fieldsetRow>
      </mobi:fieldsetGroup>
</f:facet>


Managed Bean

Rather than hard code our menu items in the view, we will populate two menu lists in the bean: menuA and menuB. Each menu list will contain 3 menu items whose underlying representation will be a custom MenuEntry object. Lists menuA and menuB will be added to a master list named allPanes. Please add the following to your managed bean:


AccBean.java
@ManagedBean(name = "accBean")
@SessionScoped
public class AccBean implements Serializable {

	private List<MenuEntry> menuA = new ArrayList<MenuEntry>();
	private List<MenuEntry> menuB = new ArrayList<MenuEntry>();
	private List<MenuEntry> allPanes = new ArrayList<MenuEntry>();

        // default selected pane
	private String selPane = "panel1";
	
	public AccBean() {
		menuA.add(new MenuEntry("Menu Item 1", "panel1", false));
		menuA.add(new MenuEntry("Menu Item 2", "panel2", false));
		menuA.add(new MenuEntry("Menu Item 3", "panel3", false));
		menuB.add(new MenuEntry("Menu Item 1", "panel4", false));
		menuB.add(new MenuEntry("Menu Item 2", "panel5", false));
		menuB.add(new MenuEntry("Menu Item 3", "panel6", false));

		allPanes.add(new MenuEntry("Menu A", null, true));
		allPanes.addAll(menuA);
		allPanes.add(new MenuEntry("Menu B", null, true));
		allPanes.addAll(menuB);
	}
     
        // TODO: GENERATE GETTERS/SETTERS
}


We will now add our MenuEntry inner class to AccBean. The MenuEntry class will allow us to define each menu item's label, value, url, icon and whether it is a menu header. Please add the following class inside of AccBean:


AccBean.java
public class AccBean implements Serializable {

     public static class MenuEntry implements Serializable {
		private String label;
		private String value;
		private String url;
		private String icon;
		private boolean menuHeader;

		public MenuEntry(String label, String value, boolean menuHeader) {
			this.label = label;
			this.value = value;
			this.menuHeader = menuHeader;
		}

                // TODO: GENERATE GETTERS/SETTERS
      }

}


Our application will now look like the following:



Source

1. accordion-layout-basic.zip
2. accordion-layout-menu.zip

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2016 ICEsoft Technologies Canada Corp.