Practical Examples of Timers
Next, we'll look at some specific examples of using <timer> in real-world applications. It is important to design your WAP applications remembering the end user is going to be mobile. Since the timer element causes an action without the user's input, it may confuse them or even concern them that something happened with the application without their control. Therefore, it's important that your timer implementations flow with the rest of the application so it doesn't surprise or confuse the target user.
Some potential examples of timers include
Showing a reminder of a user's account balance as he shops.
Asking users to agree to terms and conditions of your application.
In the previous section, you saw a fairly advanced timer application. In this section, we'll walk through two short sample applications using the <timer> element, including an advertisement and an animation.
First, let's look at a commercial application: a text-based advertisement on a WAP site as shown in Listing 10.4.
Listing 10.4 A Three-Second Advertisement
The menu items in the second card will fail unless the files burgerworld.wml, tacoted.wml, and pizzaland.wml exist. You can see what this application looks like in Figures 10.8 and 10.9.
Figure 10.8. The advertisement displays for three seconds and then moves the user to the menu page of the application.
Figure 10.9. The main menu can be accessed only after the user views the three-second advertisement for Power-Cola.
Timers can be used to show quick messages or even quickly display a single image. In our last example, the Power-Cola ad might have been more appealing if we had added an image for quick display. Although you can use timers to display images for brief periods, you can also use them to display several images, in quick succession, to create an animation effect. In Listing 10.5, we'll see how the timer element can be used to create animations in an application.
Listing 10.5 Using Timers to Create Animations
The code in Listing 10.5 creates a rotating star image on the WAP device by displaying four separate images in quick succession. We did this by creating four nearly identical cards, with identical language, identical timers, and different images.
▸For more information on manipulating images, see Chapter 6, "Using Images."
You'll notice that in this example the <timer> values were set to 8, meaning eight-tenths of a second. Every eight-tenths of a second, the cards navigate to the next card, displaying the next image.
You can see what all four of the animation cards look like in Figures 10.10 through 10.13.
Figure 10.10. The first card in the deck begins the animation.
Figure 10.11. After eight-tenths of a second, the second card shows a new image.
Figure 10.12. The third card is nearly identical to the first and second.
Figure 10.13. To make the animation look as though it appears on a single card, each card has identical text.
The final card in the deck allows the user to begin the application again, if he so chooses, as seen in Figure 10.14.
Tip
When creating animations, keep all your images the same size. This helps guarantee consistent placement of your images on a variety of devices.
Figure 10.14. The final card in the deck allows the user to restart the application.
The preceding examples have given you the framework and mindset with which you can incorporate <timer> elements into your WML applications. You can find more advanced examples of timers in Chapter 9, "Using WMLScript," where external WMLScript files are used to control communication between the users and the application. In general, timers help you enhance the functionality of your application and usually shouldn't be the core technical component of them. As a final point, make sure that you identify the need for and effect of timers in your project; inappropriate use can easily confuse your target audience.