Building A Mobile Application With O4W - Part 2

A Quick Review

Last month, I discussed Revelation Software's O4W web development toolkit, and how it has evolved since its introduction to support mobile devices. O4W Mobile is built upon jQuery Mobile, an open source community supported framework, to provide a device independent user interface that's appropriate for the "mobile computing environment" (with all the differences that entails from the traditional "desktop computing environment").

In Part 1, I demonstrated how you could build a simple display form using the O4W APIs; in Part 2, we'll take that same routine and enhance it to provide more interactivity, user input, and advanced interface elements.

Where We Left Off…

The form we ended up with displayed a static menu of items we could order at the imaginary Rev Pizza Parlor (fig. 1).

image_1 image_2

Fig. 1

Step-Wise Enhancements

An easy change to add some "pizzazz" is to make the content look less "static." We've already got our menu items grouped into different sections — one section for appetizers, one for entrees, etc. — so we can apply some "styles" to these sections to change their behavior.

(If you'll recall, most O4W API calls support a "style" or "option" parameter that allows you to alter or configure them. As we learned in Part 1, we use these "styles" in mobile development to tell O4W what role each section can play in the web page, and to turn normal browser output to "mobile friendly" output.)

By adding a style to the overall section marking it as a "collapsible set", and to each of the sections contained therein as "collapsible", we can let the user hide or show whichever section they want to see (fig. 2).

image_3 image_4

Fig. 2

Notice how the "collapsed" and "collapsible" sections are drawn with nice big bars, so they're easy to click on? This is all part of the finger-friendly user interface that jQuery Mobile generates.

And adding this functionality is simply a matter of adding the O4WMobileOptions("collapsible-set") option to our menuGroups section (in the O4WSectionStart call), and adding the O4WMobileOptions("collapsible") option to each of the other sections it contains (appDetails, entreeDetails, etc.). After the modification, our code now looks something like figure 3.


Fig. 3

Another easy change we can make is to take advantage of the free mapping service available via Google (thanks, Google!) to allow those pizza-crazed mobile users to find the Rev Pizza Parlor. Instead of just displaying the address in plain text (with the O4WText API call), we can also display a link, and pressing on that link will bring up the Google maps output. The code change is simple (fig. 4).


Fig. 4

…but the difference in functionality is dramatic (fig. 5).

image_7 image_8

Fig. 5

We can use the normal O4WLink API call, with the proper parameters to invoke Google Maps, and then make it "mobile friendly" by using the O4WMobileButtonOptions option. In this instance, we only need pass in the letter "b" to indicate that we want to use the "b" "theme swatch".

Can You Hear Me Now?

While these changes enhance the look and mobile usability of the form, they still don't allow the user to enter any data into the application. Changing the form to include O4W's different input elements (instead of just O4WText) will greatly increase its functionality, and make the application much more useful — in this case, allowing the pizza to actually be ordered, rather than just giving the customer a menu to read over.

We can begin be adding some radio buttons next to some "yes/no" questions. O4WRadioButton allows you to specify the prompts you'd like displayed, what values should be returned for each of the radio buttons, and the name of the variable that the form will use for these values. We can optionally specify which value we want to set as the default in the "options/styles" parameter.

O4WRadioButton("No", "0","GBREAD","GBREAD_0",o4wmarkedoptions(1))
O4WRadioButton("Yes", "1", "GBREAD", "GBREAD_1")

This creates a "No" and "Yes" radio button — if the "No" button is selected, a "0" will be returned as the "GBREAD" value. If the "Yes" button is selected, a "1" will be returned as the "GBREAD" value instead. To start with, the "No" button will be selected. You will also notice that each of the radio buttons has a unique ID (separate from the "variable name" of "GBREAD") — for all input controls, there is both the "variable name" (which can apply to multiple input controls), and a "unique ID" (which must be unique on each form) which can be used to address that particular input control.

We'll also enhance the text that we want to associate with the radio buttons — for example, for the "Garlic Bread" text, we'll add the O4WTextOptions "options/style" parameter to tell O4W that it's associated with the "GBREAD" radio button set:

O4WText("Garlic Bread","",O4WTextOptions("GBREAD"))

This allows the underlying jQuery Mobile layout engine to put the radio buttons and the text together in a meaningful way.

For those input fields that require more than a few choices, we can use a listbox instead of a radio button set. The O4WListbox API call looks very similar to O4WRadioButton:

O4WListBox("None", "0", "WINGS", "", "WINGS_0",o4wmarkedoptions(1))
O4WListBox("Half Dozen", "6","WINGS", "", "WINGS_6")
O4WListBox("Dozen", "12", "WINGS", "", "WINGS_12")
O4WListBox("Jumbo", "24", "WINGS", "", "WINGS_24")

Applying these changes to all the choices in the appetizer section, we end up with the form in figure 6.


Fig. 6

We'll apply the same changes to the Entrees section as well, but there are some items (such as pizzas themselves) where we want the user to be able to select one or more values (radio buttons and (usually) listboxes only allow you to select ­ one value). A checkbox, rather than a radio button, is a more appropriate input element for those circumstances.

The O4WCheckbox API is also very similar to the O4WRadioButton (and O4WListbox) API call (Fig. 7)

O4WCheckBox("Pepperoni", "P", "TOPPINGS", "TOPPINGS_P")
O4WCheckBox("Sausage", "S", "TOPPINGS", "TOPPINGS_S")
O4WCheckBox("Ham", "H", "TOPPINGS", "TOPPINGS_H")
O4WCheckBox("Meatball", "M", "TOPPINGS", "TOPPINGS_M")
O4WCheckBox("Chicken", "C", "TOPPINGS", "TOPPINGS_C")

Fig. 7

But here, to "dress it up" for mobile display, we have to add some additional styles to the sections that contain the checkboxes, rather than the checkboxes themselves.

First, we create a section that has the role of "fieldcontain" to indicate that we're going to have several elements contained together:

O4WSectionStart("toppingsChoices", o4wmobileoptions ("fieldcontain"):o4wmarkedoptions("0"))

Next, we create a section that has the role of "controlgroup" to indicate that we want these elements grouped together in a single user interface element, and we provide the label for this group in the O4WFieldSetOptions style/option call:

O4WSectionStart("toppingsFieldset", opts)

We can then use our O4WCheckBox calls to specify the available choices. When complete, and after changing the pizza size and sauce type to use listboxes, our code for the entrée section looks like the code in figure 8.


Fig. 8

And its output looks like figure 9.


Fig. 9

In our final installment (next month), we'll discuss how we can extract the data from the mobile form and process it appropriately.


View more articles


May/Jun 2013