 |
|
    |
 |
|
 |
By Luca Passani
In the last two parts of our tutorial, I introduced menus. Menus are important, since mobile users should not be required to think too much when using a mobile application. For this reason, you should do whatever you can to avoid requiring users to enter words and numbers. Having said that, there will be cases when clicking links simply won't cut it. For example:
I am assuming that you are familiar with WML and XHTML Forms or, at the very least, with HTML forms as found on the big web. If not, please refer to the resources in the reference section at the end of this article. As is customary, before we delve into forms, a little preaching is required. Luca's "Usability" Preach Entering data on a mobile device is way more difficult and time-consuming than doing it on the web. For this reason, reproducing a web form into a wireless application is not a good idea. You should be creative and find ways to minimize user input. Here are a few tricks:
 Figure 1: Web form to collect credit cad information While such a form could also be implemented the same way on a mobile device, this would be far from optimal from a usability viewpoint. A more sensible way to collect the same data from a mobile user could be to split it up in the following steps:  Figure 2a, 2b and 2c: Credit card form made usable for wireless users. (2a) There are only a few credit card brands, so let users select theirs with one click. (2b) Once we know the credit card type, we can pre-fill the card number field with the first two digits (e.g., 37 = American Express). Of course, you can use input masks to turn the keypad into numeric mode and greatly simplify data input. (2c) For dates, the year and month are better modeled as text fields in numeric mode, rather than forcing the user to do a whole lot of scrolling to detect month and year through a combo-box. Now I'll step down off of my soapbox so we can see how WALL supports forms. HTML Forms If you target WAP2 devices, forms are implemented in a standard way that you may do without WALL. Not only is this guaranteed to work on WAP2 devices, but it will work on Imode CHTML devices too (you may want to replace <br> with <wall:br/>, though). One little note of caution is about those <p>/</p> tags. They must be there in the name of XHTML-MP conformance. If you don't use them, your form will still work on most browsers, but it will fail completely on some (notably, the SonyEricssons using the Teleca browsers).
Because of these well-formdness headaches, you may still want to use <wall:form>/</wall:form> instead of <form><p>/</p></form> while coding the form exactly as shown in Listing 1:
In addition to ensuring well-formdness, this will protect users who navigate to your site with a WML 1.X browser from receiving the error page (and you come across these browsers anyway since there are still many millions in circulation). Please note that WALL forms are on the same level as Blocks, Menus and Cool Menus, which means that you should not nest them into one another. Things get more complicated when we need to support WML too. Bringing WML Into The Picture WML forms are structurally different from HTML. First, there's no "form" tag. Widgets can be placed randomly in a card. There's no submit button in WML (at least not in WML 1.1). The role of submit buttons is assumed by hyperlinks, which can post the values of the widgets by lining up WML variables in their query string. Just refer to the WML Reference if you want to know more about how forms work in WML. In this context, finding a common denominator between HTML and WML forms is not simple. WALL did it by introducing a lot of magic and a few restrictions:
Time for an Example So, let's see a form in WML Compatibility mode in action: - Nothing new up to line 11. The 'enable_wml' attribute tells WALL that we want to support WML devices and we know what you are doing. If we omit that attribute (or set it to false), WML devices will be greeted by a message that their device is not supported. - line 13 is an 'input' element. As you can see, this is pure HTML, so there's not much you need to learn here. The only surprise is the 'format' attribute. It does not live in HTML, but since it is a friend (and a very useful one!) it was welcome to join WALL. We'll see how it is out to work. - lines 16 through 26 are new...or are they pure HTML again? You are probably more curious to see what this becomes for WML devices than getting those lines explained! Let's look at the code then. CHTML is no surprise. Our friend the 'format' attribute got down to work and turned into a nice 'istyle="4"'. While not exactly the same as requiring 4 digits, this construct will put the keyboard of Imode devices into numeric mode. This is very helpful for users. XHTML-MP is also no surprise. Here WALL will use either 'format="NNNN"' or 'style="-wap-input-format: 'NNNN'"' depending on what the device understands ('xhtml_format_as_css_property' and 'xhtml_format_as_attribute' are the relevant WURFL capabilities). Of course, things get much more interesting when we need to render for WML devices. WALL needs to do some magic to create WML variables behind the scenes and build a hyperlink that will post the values to the server. Observe how hidden fields need a slightly different treatment: If you have programmed WML in the past, you are probably aware of the differences in WML support by different devices. Some devices offer better usability when navigation takes advantage of softkeys ('softkey_support' capabilities). WALL recognizes this and produces optimized WML for those devices: Conclusions Doing forms in WAP 2 and Imode is not difficult. Things get trickier if you want to support WML too, since WML is a basically different mark-up. WALL can help there. As long as you keep your forms simple, you can still get away with a unique set of JSPs for all of your wireless. And, if you need more complex constructs, WALL can still be there to help, thanks to the power of JSTL, which we will cover in the next installment of this tutorial. Enjoy! References XHTML MP Tutorial (Forms) WML Reference WAP Usability |