Basic Menu Layout Tutorial

Table of Contents

Basic menu layout tutorial


The purpose of this tutorial is to demonstrate how the <mobi:contentStack> and <mobi:contentPane> components can be used to layout an ICEmobile application for both small and large device screen sizes. The <mobi:contentStackMenu> and <mobi:contentNavBar> components will be used to add menu based navigation while <mobi:pagePanel> and <mobi:splitPane> will provide additional styling and layout.



The full source can be found at the bottom of the tutorial here. Additional information regarding these components can be found here:


Device screen size detection and CSS Styling


ICEmobile will detect the mobile device's host operating system and screen size using the <mobi:deviceResource> component. This component will render the necessary head resources such as device-specific meta tags, the CSS stylesheets for that device theme, and any required javascript. Operating system detection is used to match the application's look and feel to that of the host operating system while screen size detection is used to determine whether we will display for example, a small (handheld) or large (tablet) screen layout. The <mobi:smallView> component will be used to specify markup that should be displayed in smaller views such as phones, while the <mobi:largeView> component will be used for larger views such as tablet and desktop views. For a complete list of supported operating systems, please review our supported platforms here.


Create index.xhtml in the web/ directory of your project and paste the following code:


index.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:mobi="http://www.icesoft.com/icefaces/mobile/component">
<h:head>
	<mobi:deviceResource/>
</h:head>
<h:body>
	<mobi:smallView>
	    <ui:param name="viewSize" value="small" />
	    <!--define your small view page -->
            <ui:include src="WEB-INF/includes/views/small.xhtml" />
	</mobi:smallView>
	<mobi:largeView>
	    <ui:param name="viewSize" value="large" />
            <!--define your large view page -->
	    <ui:include src="WEB-INF/includes/views/large.xhtml" />
	</mobi:largeView>
</h:body>
</html>


NOTE:

  • Even though both a small and large view are declared via <ui:include>, ICEmobile will ensure that only the rendered view is added to the component for that session/view.


Small view layout


The small layout will be used to accommodate mobile devices with smaller viewing areas and as such will maximize the limited amount of screen real estate by having a single column menu whose individual menu item content will slide in/out of the main view. The first contentPane will contain a <mobi:contentStackMenu> that will allow us to navigate between the 3 other contentPane areas. Each contentPane in the small view contains a contentNavBar button that will allow us to return to the main menu screen.


Create small.xhtml in a new folder named views in the WEB-INF directory of your project. The WEB-INF is a protected folder and cannot be publicly accessed which will prevent users from requesting a partial page. Please paste the following code into small.xhtml:


small.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:mobi="http://www.icesoft.com/icefaces/mobile/component"
	xmlns:f="http://java.sun.com/jsf/core">
	<h:form>
		<mobi:pagePanel>
			<f:facet name="header">Header</f:facet>
			<f:facet name="body">
				<mobi:contentStack id="stack1"
					currentId="#{navigationBean.singleColSelectedPane}"
					contentMenuId="mnu">
					<mobi:contentPane id="mnuPanel" menuOrHome="true">
						<mobi:contentStackMenu id="mnu" contentStackId="stack1"
							selectedPane="#{navigationBean.singleColSelectedPane}">
							<mobi:contentMenuItem label="Menu Title" />
							<mobi:contentMenuItem label="Panel 1" value="panel1" />
							<mobi:contentMenuItem label="Panel 2" value="panel2" />
							<mobi:contentMenuItem label="Panel 3" value="panel3" />
						</mobi:contentStackMenu>
					</mobi:contentPane>
					<mobi:contentPane id="panel1">
						<mobi:contentNavBar>
							<mobi:contentMenuItem label="Menu" value="mnuPanel" />
							<h3>Content Pane 1</h3>
						</mobi:contentNavBar>
						<mobi:fieldsetGroup>
							<p>Content Panel 1 - Insert Your Content Here</p>
						</mobi:fieldsetGroup>
					</mobi:contentPane>
					<mobi:contentPane id="panel2">
						<mobi:contentNavBar>
							<mobi:contentMenuItem label="Menu" value="mnuPanel" />
							<h3>Content Pane 2</h3>
						</mobi:contentNavBar>
						<mobi:fieldsetGroup>
							<p>Content Panel 2 - Insert Your Content Here</p>
						</mobi:fieldsetGroup>
					</mobi:contentPane>
					<mobi:contentPane id="panel3">
						<mobi:contentNavBar>
							<mobi:contentMenuItem label="Menu" value="mnuPanel" />
							<h3>Content Pane 3</h3>
						</mobi:contentNavBar>
						<mobi:fieldsetGroup>
							<p>Content Panel 3 - Insert Your Content Here</p>
						</mobi:fieldsetGroup>
					</mobi:contentPane>
				</mobi:contentStack>
			</f:facet>
			<f:facet name="footer">
			Footer
		</f:facet>
		</mobi:pagePanel>
	</h:form>
</ui:composition>


<mobi:contentPane> has the following two important attributes:

  • client - If client is set to true, all markup (even non-visible panes) will be rendered to the browser. This will help improve performance by limiting the size and frequency of DOM updates and ultimately reduce the amount of throughput over the wireless connection which is a goal for any mobile application.
  • facelet - If facelet to true, the children of that contentPane are not added to the component tree unless that particular contentPane is selected and being viewed which can help reduce server side memory consumption.

Additional information regarding these attributes can be found here.



Large view layout


The large layout will be used to accommodate devices with a larger viewing area and will contain two visible columns. The menu items in the left column will render their selected content in the right column. We will use the <mobi:splitPane> component to provide the two column layout.


Create large.xhtml in WEB-INF/views and paste the following code into large.xhtml:


large.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:mobi="http://www.icesoft.com/icefaces/mobile/component"
	xmlns:f="http://java.sun.com/jsf/core">
	<h:form>
		<mobi:pagePanel>
			<f:facet name="header">Header</f:facet>
			<f:facet name="body">
				<mobi:splitPane>
					<f:facet name="left">
						<h:panelGroup>
							<mobi:contentStackMenu id="mnu" contentStackId="stack1"
								selectedPane="#{navigationBean.twoColSelectedPane}">
								<mobi:contentMenuItem label="Menu Title" />
								<mobi:contentMenuItem label="Panel 1" value="panel1" />
								<mobi:contentMenuItem label="Panel 2" value="panel2" />
								<mobi:contentMenuItem label="Panel 3" value="panel3" />
							</mobi:contentStackMenu>
						</h:panelGroup>
					</f:facet>
					<f:facet name="right">
						<mobi:contentStack id="stack1"
							currentId="#{navigationBean.twoColSelectedPane}"
							contentMenuId="mnu">
							<mobi:contentPane id="panel1">
								<mobi:fieldsetGroup>
								   <p>Content Panel 1 - Insert Your Content Here</p>
								</mobi:fieldsetGroup>
							</mobi:contentPane>
							<mobi:contentPane id="panel2">
								<mobi:fieldsetGroup>
								   <p>Content Panel 2 - Insert Your Content Here</p>
								</mobi:fieldsetGroup>
							</mobi:contentPane>
							<mobi:contentPane id="panel3">
								<mobi:fieldsetGroup>
								   <p>Content Panel 3 - Insert Your Content Here</p>
								</mobi:fieldsetGroup>
							</mobi:contentPane>
						</mobi:contentStack>
					</f:facet>
				</mobi:splitPane>
			</f:facet>
			<f:facet name="footer">
			Footer
		</f:facet>
		</mobi:pagePanel>
	</h:form>
</ui:composition>



NavigationBean.java


Create NavigationBean.java in a package named org.icemobile.samples in the src folder of your project. This managed bean will hold the currently selected values for both of our small and large layouts. Please paste the following code into NavigationBean.java:


NavigationBean.java
package org.icemobile.samples;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean(name = "navigationBean")
@ViewScoped
public class NavigationBean implements Serializable {

	private static final long serialVersionUID = 1L;

	private String singleColSelectedPane = "mnuPanel";
	private String twoColSelectedPane = "panel1";

	public String getSingleColSelectedPane() {
		return singleColSelectedPane;
	}
	public void setSingleColSelectedPane(String singleColSelectedPane) {
		this.singleColSelectedPane = singleColSelectedPane;
	}
	public String getTwoColSelectedPane() {
		return twoColSelectedPane;
	}
	public void setTwoColSelectedPane(String twoColSelectedPane) {
		this.twoColSelectedPane = twoColSelectedPane;
	}
}


Additional Tips

  • <mobi:contentStackMenu> can be dynamically bound to a list versus having to hard code each <mobi:contentMenuItem>. Here is an example:


<mobi:contentStackMenu  value="#{contentMenuBean.menuList}" var="item">
   <mobi:contentMenuItem label="#{item.label}" value="#{item.value}"/>
</mobi:contentSta!basic-menu-large.png|align=center!ckMenu>



Running the Example

Small View

When using a handheld device such as phone, ICEmobile will render the small single column view which will look like the following:



Large View

A device with a larger screen will render the large layout which is the two column menu layout:



Source Code

icemobile-layout-tutorial.zip

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

© Copyright 2016 ICEsoft Technologies Canada Corp.