Navigational History

Much like the standard Web browsers we have today, WML provides a navigational history model that allows you to easily manage backward navigation. WML keeps track of a user's history by maintaining a stack of URLs, each of which represents where the users have visited. When examined together, this "history stack" as you can see in Figure 4.6 details exactly what path the user took to reach the current location.

As users navigate through cards and decks via the href attribute in the <go> tag, those cards are entered into the history stack. This entry occurs even when the last two entries are identical URLs. The history stack does not include card content but must include the following information:

• The card's absolute URL

• The method of accessing the card (get or post)

• Any post field's values

• Any request headers

When the <prev> command is executed, the WAP device will return the user to the previous card in the history stack.

WML provides three operations you can perform on the history stack:

• Reset This resets the history stack so that it only contains the current card.

• Push This pushes a new URL onto the history stack the user navigates to a new card.

• Pop This causes the URL at top of stack (which corresponds with the current card) to be popped when the user navigates backward.

This is especially useful when your navigational scheme includes tangled webs. For example, let's suppose that someone is using his WAP device to determine the nutritional value of items on the BurgerWorld menu. In one case, he looked up the nutritional value of a teaspoon of ketchup on a cheeseburger, and then he looked up the nutritional value of a teaspoon of ketchup on french fries. No matter how he navigated to the ketchup card, we are displaying the exact same data. Unless we pass some variables, we just don't know where the user came from. With the power of an automated navigational history, we can trace back through the navigation tree to return the user to the previous card, correctly.

Let's take a look at this with another example from BurgerWorld. This time, let's have the user navigate through three cards in the same menu deck. Each card after the first card will have a back button that will use the <prev> tag to return to the top card on the history stack. The comparison of the two methods is shown in Table 4.3.

<card id="main" title="Main Menu">

    <p>

        BurgerWorld<br/>

        Main Menu<br/>

        <a href="#food">Food</a><br/>

    <p>

  <card id="main" title="Main Menu">

    </p>

        BurgerWorld<br/>

        Main Menu<br/>

        <a href="#food">Food</a><br/>

<card id="main" title="Main Menu">

    <p>

        BurgerWorld<br/>

        Main Menu<br/>

        <a href="#food">Food</a><br/>

    </p>

   </card>

  <card id="main" title="Main Menu">

    <p>

        BurgerWorld<br/>

        Main Menu<br/>

        <a href="#food">Food</a><br/>

    </p>

   </card>

<card id="food" title="Food">

<p>

                             BurgerWorld<br/>

                             <b>Food Menu</b><br/>

                             Burgers $$2<br/>

                             Fries $$1<br/>

        <do type="options" label="Last">

            <prev/>

        </do>

        <a href="#drinks">Drinks</a><br/>

    </p>

   </card>

  <card id="food" title="Food">

  <p>

        BurgerWorld<br/>

        <b>Food Menu</b><br/>

                             Burgers $$2<br/>

                             Fries $$1<br/>

        <do type="options" label="Last">

            <go href="#main"/>

        </do>

        <a href="#drinks">Drinks</a><br/>

   </p>

   </card>

  <card id="drinks" title="Drinks">

  <p>

        BurgerWorld<br/>

        <b>Drink Menu</b><br/>

                             Soda Pop $$1<br/>

        <do type="options" label="Last">

            <prev/>

        </do>

        <a href="#main">Main Menu</a><br/>

    </p>

   </card>

  <card id="drinks" title="Drinks">

  <p>

        BurgerWorld<br/>

        <b>Drink Menu</b><br/>

                             Soda Pop $$1<br/>

        <do type="options" label="Last">

            <go href="#food"/>

        </do>

        <a href="#main">Main Menu</a><br/>

    </p>

   </card>

In the columns in Table 4.3, the code has exactly the same functionality, but the code on the left is much simpler to create, since we knew how the device would handle the "Last" element. On the right, we had to create a diagram to remember how the card navigation would work. Don't let the <do> tag in the example confuse you here.