This tutorial will demonstrate the use of various ICEmobile input and button components. Our goal is to create a page that will allow us to submit a first and last name, email, phone, date of birth, as well as a receive alerts preference.
Form Input & server side output
The source code for this sample can be found here.
We will layout our form using the <mobi:fieldsetGroup> and <mobi:fieldsetRow> components. Paste the following into the <h:body> of your ICEmobile page:
Our first two fields will be for the user's first and last name, followed by an <h:outputLabel> to render the label and a <mobi:inputText> for the entered value. We have set the type of the input text to 'text' and our placeholder will contain a default value for that field. We will also set singleSubmit to true which adds the ability to submit only one component to execute in the JSF lifecycle. You can find a listing of all component attributes in the ICEmobile TLD here. Please add the following inside the <mobi:fieldsetGroup> tag:
Our next two inputText fields will contain the user's email and phone number and will be identical to our first and last name fields except that we will change the type attribute of the inputText. Please paste the following below our last name fieldsetRow:
We will add a field for the user's date of birth using the mobi:dateSpinner. The dateSpinner component displays a popup that allows a user to select a date value. The component must be value bound to a Date object and support converters and timezone assignment. Add the following below our phone fieldsetRow:
|Please use the |
A flipswitch will be used to toggle if the user would like to receive update notices. The flipswitch component displays a command button that toggles between on and off states. This UI element is common on the iOS platform for toggling on/off settings. Add the following below our date of birth fieldsetRow:
The <mobi:commandButton> will be used to submit our form to the server. Keep in mind that since we've set singleSubmit to true on our input field components, the user entered values have already been set in the server side bean. This command button will execute an actionListener that will output our field values to the server console. Four types of buttons are allowed default, important, back and attention. Each render with a different style. We will also add an submitNotification component that will block the UI until the actionListener has completed. Please add the following code below our flipSwitch fieldsetRow:
In order to demonstrate singleSubmit and the dynamic updating of page values, we will add the following output below the <mobi:fieldsetGroup> that we added in the above steps:
Create a class named FormBean.java and paste the following:
The final step is to add the actionListener that will fire when our <mobi:commandButton> is clicked. Please paste the following into Bean.java:
We now have an input form with single submit enabled. When this attribute is set to true, only the specified component will decode, validate, update its bean model state, and trigger events, but a full render phase will occur. Here is what our form will look like:
When you tab through the form fields and enter data, the server side values are shown below the input components: