h1. Menu Confirmation Dialog 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 the option of selecting several actions and then confirm their selection via a confirmation dialog. The submit notification component will then prevent further user interaction until the backing bean process has completed. We will have cover two use cases:
* [Single dialog|single]
* [Dialog for each menu item|multiple]
The source code for both tutorials can be found [here|#source]. 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
\\
h3. 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:
\\
{code}
<h:form>
<mobi:fieldsetGroup style="width:200px">
<mobi:fieldsetRow>
.......
</mobi:fieldsetRow>
</mobi:fieldsetGroup>
</h:form>
{code}
\\
h3. Add <mobi:menuButton>
The menuButton allows a user to select and execute a menu item while ActionListener methods can be assigned for each of the MenuButtonItem's in the menu. We will also tie the menuButton with a panelConfirmation and submitNotification component. Please add the following within the <mobi:fieldsetRow>:
\\
{code}
<mobi:menuButton id="mnu" value="#{menu.menuData}" var="item">
</mobi:menuButton>
{code}
\\
The menuButton value binding menu.menuData, will consist of a list of <SelectItem> objects that will populate our menuButtonItems below.
\\
h2. Usage 1: Single Dialog
\\
h3. Add <menuButtonItem>
The menuButton will iterate over the list supplied by the value binding and create the menuButtonItems. The menuButtonItem options will 'add', 'edit' and 'delete' values. Please add the following code within the <mobi:menuButton>:
\\
{code}
<mobi:menuButtonItem value="#{item.value}" label="#{item.label}" panelConfirmation="pc1" submitNotification="sn1"
actionListener="#{menu.performAction}" />
{code}
\\
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 actionListener method performAction and lastly the <mobi:submitNotification> blocker.
h3. 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:
\\
{code}
<mobi:panelConfirmation id="pc1" message="Perform Action?" />
<mobi:submitNotification id="sn1">
<h:outputText value="Working..." />
</mobi:submitNotification>
{code}
\\
h3. Add action output
Add the following <mobi:fieldSetRow> below the row containing our panelConfirmation and submitNotification components:
\\
{code}
<mobi:fieldsetRow>
Action: <h:outputText value="#{menu.action}"/>
</mobi:fieldsetRow>
{code}
\\
h3. Add Managed Bean
Please add the following managed bean code in addition to generating getters and setters:
\\
{code}
@ManagedBean(name = "menu")
@ViewScoped
public class MenuBean implements Serializable {
List<SelectItem> menuData = new ArrayList<SelectItem>();
private String action;
public MenuBean() {
this.menuData.add(new SelectItem("Add", "Add"));
this.menuData.add(new SelectItem("Edit", "Edit"));
this.menuData.add(new SelectItem("Delete", "Delete"));
}
public void performAction(ActionEvent ae) {
try {
MenuButtonItem item = (MenuButtonItem) ae.getSource();
action = (String) item.getValue();
System.out.println("Action performed: " + action);
Thread.sleep(5000);
} catch (Exception e) {
}
}
//TODO GENERATE GETTERS/SETTERS
{code}
\\
Our actionListener performAction, will get the user's menu item selection from the ActionEvent and call Thread.sleep which is used to simulate a long running process in order to demonstrate the panelConfirmation functionality.
\\
h1. Usage 2 - Multiple confirmation dialogs
\\
h3. Modify the ICEmobile page
The menuButtonItems will have parameterized panelConfirmation and SubmitNotification attributes. We will keep track of these values in a custom object in our managed bean. Please replace the previous menuButton with the following:
\\
{code}
<mobi:menuButton id="mnu" value="#{menu.menuData}" var="item">
<mobi:menuButtonItem value="#{item.value}" label="#{item.label}" panelConfirmation="#{item.panelConfId}"
submitNotification="#{item.submitNotif}" actionListener="#{item.actionMethod}"/>
</mobi:menuButton>
{code}
\\
h3. Add additional panelConfirmation dialogs
Each menuButtonItem will now have a specific panelConfirmation component. Please add the following below the closing </mobi:menuButton> tag:
\\
{code}
<mobi:panelConfirmation id="pc1" message="Switch to iphone style?" />
<mobi:panelConfirmation id="pc2" message="Switch to ipad style"/>
<mobi:panelConfirmation id="pc3" message="Switch to android style"/>
<mobi:submitNotification id="sn1">
<h:outputText value="Working.." />
</mobi:submitNotification>
{code}
\\
h3. Add Managed Bean code
We will use a custom object to hold our menuButtonItem's value, label, and corresponding panelConfirmation and submitNotification ids. Please add the following managed bean code in addition to generating the getters and setters:
\\
{code}
@ManagedBean(name = "menu")
@ViewScoped
public class MenuBean implements Serializable {
List<ModelData> menuData = new ArrayList<ModelData>();
private String style = "iphone";
public MenuBean() {
this.menuData.add(new ModelData("ipad", "ipad","pc1","sn1"));
this.menuData.add(new ModelData("android", "android","pc2","sn1"));
this.menuData.add(new ModelData("iphone", "iphone","pc3","sn1"));
}
public void changeDeviceStyle(ActionEvent ae) {
try {
MenuButtonItem item = (MenuButtonItem) ae.getSource();
style = (String) item.getValue();
Thread.sleep(5000);
} catch (Exception e) {
}
}
//TODO GENERATE GETTERS/SETTERS
public class ModelData implements Serializable {
private String value;
private String label;
private String panelConfId;
private String submitNotif;
public ModelData(String val, String label, String pcId, String snId) {
this.value = val;
this.label = label;
this.submitNotif = snId;
this.panelConfId = pcId;
}
//TODO GENERATE GETTERS/SETTERS
}
}
{code}
This tutorial will demonstrate the use of the <mobi:menuButton>, <mobi:panelConfirmation> and <mobi:submitNotification> components. The menuButton drop down will allow the user the option of selecting several actions and then confirm their selection via a confirmation dialog. The submit notification component will then prevent further user interaction until the backing bean process has completed. We will have cover two use cases:
* [Single dialog|single]
* [Dialog for each menu item|multiple]
The source code for both tutorials can be found [here|#source]. 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
\\
h3. 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:
\\
{code}
<h:form>
<mobi:fieldsetGroup style="width:200px">
<mobi:fieldsetRow>
.......
</mobi:fieldsetRow>
</mobi:fieldsetGroup>
</h:form>
{code}
\\
h3. Add <mobi:menuButton>
The menuButton allows a user to select and execute a menu item while ActionListener methods can be assigned for each of the MenuButtonItem's in the menu. We will also tie the menuButton with a panelConfirmation and submitNotification component. Please add the following within the <mobi:fieldsetRow>:
\\
{code}
<mobi:menuButton id="mnu" value="#{menu.menuData}" var="item">
</mobi:menuButton>
{code}
\\
The menuButton value binding menu.menuData, will consist of a list of <SelectItem> objects that will populate our menuButtonItems below.
\\
h2. Usage 1: Single Dialog
\\
h3. Add <menuButtonItem>
The menuButton will iterate over the list supplied by the value binding and create the menuButtonItems. The menuButtonItem options will 'add', 'edit' and 'delete' values. Please add the following code within the <mobi:menuButton>:
\\
{code}
<mobi:menuButtonItem value="#{item.value}" label="#{item.label}" panelConfirmation="pc1" submitNotification="sn1"
actionListener="#{menu.performAction}" />
{code}
\\
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 actionListener method performAction and lastly the <mobi:submitNotification> blocker.
h3. 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:
\\
{code}
<mobi:panelConfirmation id="pc1" message="Perform Action?" />
<mobi:submitNotification id="sn1">
<h:outputText value="Working..." />
</mobi:submitNotification>
{code}
\\
h3. Add action output
Add the following <mobi:fieldSetRow> below the row containing our panelConfirmation and submitNotification components:
\\
{code}
<mobi:fieldsetRow>
Action: <h:outputText value="#{menu.action}"/>
</mobi:fieldsetRow>
{code}
\\
h3. Add Managed Bean
Please add the following managed bean code in addition to generating getters and setters:
\\
{code}
@ManagedBean(name = "menu")
@ViewScoped
public class MenuBean implements Serializable {
List<SelectItem> menuData = new ArrayList<SelectItem>();
private String action;
public MenuBean() {
this.menuData.add(new SelectItem("Add", "Add"));
this.menuData.add(new SelectItem("Edit", "Edit"));
this.menuData.add(new SelectItem("Delete", "Delete"));
}
public void performAction(ActionEvent ae) {
try {
MenuButtonItem item = (MenuButtonItem) ae.getSource();
action = (String) item.getValue();
System.out.println("Action performed: " + action);
Thread.sleep(5000);
} catch (Exception e) {
}
}
//TODO GENERATE GETTERS/SETTERS
{code}
\\
Our actionListener performAction, will get the user's menu item selection from the ActionEvent and call Thread.sleep which is used to simulate a long running process in order to demonstrate the panelConfirmation functionality.
\\
h1. Usage 2 - Multiple confirmation dialogs
\\
h3. Modify the ICEmobile page
The menuButtonItems will have parameterized panelConfirmation and SubmitNotification attributes. We will keep track of these values in a custom object in our managed bean. Please replace the previous menuButton with the following:
\\
{code}
<mobi:menuButton id="mnu" value="#{menu.menuData}" var="item">
<mobi:menuButtonItem value="#{item.value}" label="#{item.label}" panelConfirmation="#{item.panelConfId}"
submitNotification="#{item.submitNotif}" actionListener="#{item.actionMethod}"/>
</mobi:menuButton>
{code}
\\
h3. Add additional panelConfirmation dialogs
Each menuButtonItem will now have a specific panelConfirmation component. Please add the following below the closing </mobi:menuButton> tag:
\\
{code}
<mobi:panelConfirmation id="pc1" message="Switch to iphone style?" />
<mobi:panelConfirmation id="pc2" message="Switch to ipad style"/>
<mobi:panelConfirmation id="pc3" message="Switch to android style"/>
<mobi:submitNotification id="sn1">
<h:outputText value="Working.." />
</mobi:submitNotification>
{code}
\\
h3. Add Managed Bean code
We will use a custom object to hold our menuButtonItem's value, label, and corresponding panelConfirmation and submitNotification ids. Please add the following managed bean code in addition to generating the getters and setters:
\\
{code}
@ManagedBean(name = "menu")
@ViewScoped
public class MenuBean implements Serializable {
List<ModelData> menuData = new ArrayList<ModelData>();
private String style = "iphone";
public MenuBean() {
this.menuData.add(new ModelData("ipad", "ipad","pc1","sn1"));
this.menuData.add(new ModelData("android", "android","pc2","sn1"));
this.menuData.add(new ModelData("iphone", "iphone","pc3","sn1"));
}
public void changeDeviceStyle(ActionEvent ae) {
try {
MenuButtonItem item = (MenuButtonItem) ae.getSource();
style = (String) item.getValue();
Thread.sleep(5000);
} catch (Exception e) {
}
}
//TODO GENERATE GETTERS/SETTERS
public class ModelData implements Serializable {
private String value;
private String label;
private String panelConfId;
private String submitNotif;
public ModelData(String val, String label, String pcId, String snId) {
this.value = val;
this.label = label;
this.submitNotif = snId;
this.panelConfId = pcId;
}
//TODO GENERATE GETTERS/SETTERS
}
}
{code}