Home : Support : Documentation : Jack's Hacks : Archive : January 2002
 

January 2002

 

Jack's Hack for the month of January, 2002:

Managing Backwards Navigation in WML

Preventing users from backing up into cards they should not have to revisit.

Users come to rely and feel less apprehensive using an application that has good backward navigation functions available. Allowing users to navigate backwards permits leaving an application without having to return to the home deck. This may be particularly helpful for applications that may be deeply embedded in the browser. For example, if a set of applications is 3 menus deep from the home card, backward navigation will allow the user to easily get to the start of the set without having to re-navigate through the first 2 ? 3 menus. In some cases, backward navigation must be carefully considered and designed such as, prohibiting navigation behind password protected cards.

There are a couple of ways to prevent users from navigating backwards into a card:

1. accelerate the user up the history stack

2. use activities

Option 1, accelerate the user up the history stack

<card id="main">
 ....
<option onpick="#pwentry">Log In</option>
 ...
</card>

<card id="pwentry" title="Login">
 <onevent type="onenterbackward">
   <prev/>
 </onevent>
 <do type="accept" label="login">
  <go href="/validatelogin.jsp">
   <postfield name="user" value="$uid"/>
   <postfield name="passwd" value="$password"/>
  </go>
 </do> 
 <p>
   Please Login:<br/>
   user: <input name="uid" title="User ID"/>
   password: <input name="password" title="Password"/>
 </p>
</card>

-- result of validatelogin.jsp --
....
<card id="success">
 <onevent type="onenterforward">
  <go href="loggedin.jsp">
 </onevent>
 <onevent type="onenterbackward">
  <prev/>
 </onevent>
<p>Login Success!</p>
</card>
...

In the code fragment above, after the user fills in the input fields and invokes the accept action they are sent on to a script (validatelogin.jsp). Assuming that this script process successfully, the user will be redirected to "loggedin.jsp". If the user presses the "back" key on the phone, the browser will navigate up the history stack, and the onenterbackward event will be triggered on the "success" and "pwentry" cards successively, so they will be further accelerated up the history stack to the "main" card. While this approach works, you must be careful to correctly include the <onevent> elements on the appropriate cards. However, there is a more elegant solution that can be used with the Openwave Mobile Browser v4.x and above..

Option 2, use activities to drop the password card off the history stack completely

<card id="main">
 ....
<option>
 <onevent type="onpick">
  <spawn href="#pwentry" onexit="loggedin.jsp">
   <catch/>
  </spawn>
 </onevent>Log In</option>
...
</card>

<card id="pwentry" title="Login">
 <do type="accept" label="login">
  <go href="/validatelogin.jsp">
   <postfield name="user" value="$uid"/>
   <postfield name="passwd" value="$password"/>
  </go>  
 </do>  
<p>
 Please Login:<br/>
 user: <input name="uid" title="User ID"/>
 password: <input name="password" title="Password"/>
</p>
</card>

-- result of validatelogin.jsp --
		
....
<card id="success">
  <onevent type="onenterforward">
    <exit/>
  </onevent>
<p>
Login Success!
</p>
</card>
...

There are three cards of importance displayed in this sequence to demonstrate the  use of the <spawn> element in place of the <go> element. The <spawn> from the "main" card results in the creation of a new context. When the user enters their username/login, and is validated, the script returns with a card that calls the <exit> task. When the <exit> task is executed, the "success" card, and the "pwentry" card are both dropped out of the history stack, and "loggedin.jsp" is requested as specified in the onexit attribute of the <spawn> element. Backward navigation for the end user is now simplified, and when they navigate back from "loggedin.jsp" they will go straight back to the "main"card.

For more detail about the <spawn> task, please refer to the WML 1.3 Language Reference which ships with the Openwave SDK 5.0