Menu button popup tutorial

You are viewing an old version (v. 4) of this page.
The latest version is v. 33, last edited on Jun 20, 2013 (view differences | )
<< View previous version | view page history | view next version >>

Menu button popup tutorial

This tutorial will demonstrate the use of the <mobi:menuButton>, <mobi:panelConfirmation> and <mobi:submitNotification> components. The menuButton drop down will allow the user to dynamically change the page's CSS stylesheet between the iphone, ipad and android stylesheets. We will have cover two use cases:

  • [Single panelConfirmation & submitNotification]
  • [Multiple panelConfirmation & submitNotification]

Here are the descriptions of the main <mobi> components that will be used:

  • [<menuButton>] - This component renders a select menu button with a collection of menuButtonItems upon selection of a menuButtonItem, and actionListener will be queued.
  • [<panelConfirmation>|] - This mobility component renders a confirmation panel to be used with any mobi commandButton or menuButton
  • [<mobi:submitNotification>|] - This mobility component renders a panel to be used with any mobi commandButton which blocks any other submission for the duration the process triggered by the button until the update is complete
  • <mobi:deviceStylesheet> - This mobility component loads an outputStyleSheet in the head of a jsf view page while determining which device is to be supported and delivering the correct stylesheet based on the device type

Add <mobi:fieldsetGroup> layout component

We will layout our form using the <mobi:fieldsetGroup> and <mobi:fieldsetRow> components. Please paste the following into the <h:body> of your ICEmobile page:


<h:form>
    <mobi:fieldsetGroup style="width:200px">
       <mobi:fieldsetRow>
       .......
       </mobi:fieldsetRow>
    </mobi:fieldsetGroup>
</h:form>


Add <mobi:menuButton>

The menuButton allows a user to select and execute a menu item. ActionListener methods can be assigned for each MenuButtonItem in the menu which we will use to toggle the device specific CSS stylesheet of the page. We will also tie the menuButton with the panelConfirmation and submitNotification components. Please add the following within the <mobi:fieldsetRow>:


<mobi:menuButton id="mnu" value="#{menu.menuData}" var="item">
</mobi:menuButton>


The menuButton value binding menu.menuData, will consist of a list of <SelectItem> objects that will populate our menuButtonItems below.

Usage 1: Single <mobi:panelConfirmation> <mobi:submitNotification>

Add <menuButtonItem>

The menuButton will iterate over the list supplied by the value binding and create the menuButtonItems. The menuButtonItem options will include the ipad, iphone, and android values. Please add the following code within the <mobi:menuButton>:


<mobi:menuButtonItem value="#{item.value}" label="#{item.label}" panelConfirmation="pc1" submitNotification="sn1"
actionListener="#{menu.changeDeviceStyle}" />


The <SelectItem> values provided by the menuButton value binding will supply our menuButtonItems value and label attributes. When clicking a MenuButtonItem, the <mobi:panelConfirmation> with id="pc1" will be triggered followed by the <mobi:submitNotification> with id="sn1". Lastly, our actionListener method changeDeviceStyle will be called and will toggle the device CSS stylesheet applied by <mobi:deviceStylesheet>.

Add <mobi:panelConfirmation> <mobi:submitNotification>

The panelConfirmation will prompt the user to either accept or decline the action while the submitNotifcation will prevent any further user interaction until page processing has completed. Please add the following code below the closing </mobi:menuButton> tag:


<mobi:panelConfirmation id="pc1" message="Change Style?" />
<mobi:submitNotification id="sn1">
       <h:outputText value="Working.." />
</mobi:submitNotification>


Add <mobi:deviceStylesheet>

The deviceStylesheet will automatically provide the correct stylesheet for the target device (iPhone, iPad, Android, etc.). If the name attribute is provided, the component will render that stylesheet. Please add the following code to the <h:head> section of your ICEmobile page:


<mobi:deviceStylesheet name="#{menu.style}" />


We will dynamically change the stylesheet by modifying the menu.style property in our managed bean.

Add Managed Bean

Please add the following managed bean code:

@ManagedBean(name = "menu")
@ViewScoped
public class MenuBean implements Serializable {

        List<SelectItem> menuData = new ArrayList<SelectItem>();
	
        // Default to iPhone stylesheet 
        private String deviceStyle = "iphone";

	public MenuBean() {

                // Construct our menu items
		this.menuData.add(new SelectItem("ipad", "ipad"));
		this.menuData.add(new SelectItem("android", "android"));
		this.menuData.add(new SelectItem("iphone", "iphone"));
	}

	public void changeDeviceStyle(ActionEvent ae) {

		try {
			MenuButtonItem item = (MenuButtonItem) ae.getSource();
			style = (String) item.getValue();

                        // Used to simulate a long running process
			Thread.sleep(5000);

		} catch (Exception e) {
		}
	}


Our actionListener changeDeviceStyle, will get the user's menu item selection from the ActionEvent and will set the deviceStyle accordingly. The Thread.sleep is used to simulate a long running process in order to show the panelConfirmation functionality.

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

© Copyright 2017 ICEsoft Technologies Canada Corp.