Home > Articles

  • Print
  • + Share This


Our previous article looked at how the go task may be used to navigate to specified URLs both within and between decks. In addition to go, three other tasks can be used to handle events specified by the <do> and <onevent> elements:

  • prev (go to the previous page in the history context)

  • refresh (update the variable context)

  • noop (do nothing)

Both prev and refresh can be used with the <anchor> element to provide links supporting history navigation and context refresh. It is important to note that the <a> anchor shorthand cannot be used for this purpose.

The <prev> element provides explicit navigation through the history context. Instead of relying on the mobile device's browser soft key, you can provide a link or soft key that guides the user to the previous card on the history stack. The card history contains a list of all URLs that the user has browsed since the last time the context was reset (by typing in a new URL or setting the newcontext card attribute to true). Navigation with prev may include cards from different decks. Variables may be set as part of the <prev> task using a contained <setvar> element. When using the <prev> element with a <do> event handler, the type attribute (type="prev") should be used to assist the user agent in displaying the appropriate item. A word of caution: prev does not work with the Phone.com simulator, which recognizes only the full word, previous.

The <refresh> element enables you to refresh the current card, updating all displayed information with the values contained in any nested setvar elements. Execution of a refresh task also interrupts currently executing timers and restarts nonrunning timers. Figure 2 illustrates the use of the <prev> and <refresh> tasks in a modified version of the health inspection health deck.

  <!--First card is splash screen--> 
    <!--Set the notice variable-->
    <onevent type="onenterforward">
        <setvar name="notice" 
                value="The annual charity bake sale will 
                       be held next Friday at noon."/>

    <!--If returning, clear the notice variable-->
    <onevent type="onenterbackward">
        <setvar name="notice" value=""/>

    <do type="accept" label="Categories">
      <go href="#MainCategories"/>
    <p align="center">
      <strong>Health Inspection</strong><br/>

  <!--Second card displays categories--> 
  <card id="MainCategories">
    <do type="previous" label="Back">
    <p mode="nowrap"> . . . </p>

Figure 2 <prev> and <refresh> task elements

In the previous example, we added two event handlers to illustrate how the refresh task element may be used to update browser context. When the desk is first entered, a notice is displayed to the user (first screen). However, if the first card is redisplayed via the Back button (second screen) or a prev task, the notice will be blanked out (third screen). Note the reference to the notice variable ($notice) in place of hard-coded text. The second card adds a prev event handler, which takes the user back to the previous card. This will be the first card if this is the first visit to the deck. The screens illustrate the initial selection sequence of the health deck (first screen), navigation to the main categories card (second screen), and selection of the prev task via the Back option (third screen).

The <noop> element, which appears somewhat useless on first acquaintance, serves an important function for deck-wide templates and card-specific events. Using the <noop> element in a card event handler is a simple way to override a deck-wide handler. This ensures that a particular navigation option is not available to the user on a specified card. Templates are discussed in the upcoming section, and Figure 3 illustrates both templates and the noop event.

  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.