Creating a Mock-Up

app Developers

Recommend: Java graphics bulb2_icon.gif Map your sketches to a set of screens, each of which enables the consumer to carry out one or more tasks. The screens should show the user-interface components of MIDP. This activity refines the sketches into a mock-up of the app.

The mock-up of the app should include navigational devices that a MIDP implementor might use. The remaining chapters help with this task by providing recommendations on how best to use LCDUI, the user-interface components of MIDP. The mock-up will have more screens than there were sketches because it will include screens for any busy indicators in the app and for any system menus (lists or menus generated by the MIDP implementation) that a device might use. For example, MIDP implementors often map abstract commands to system menus, so the mock-up could contain these screens. (Abstract commands are actions that have an interface determined by the MIDP implementation instead of being associated with a specific UI component such as a list. The following actions on the SmartTicket sketch for choosing a movie are abstract commands: showing a preview, seeing a list of movies, seeing which movies will be coming soon, rating movies, updating the user's account, and seeing an About box. See for more information.) Screenshot shows part of an early mock-up for SmartTicket, going from the Splash screen to a list of high-level tasks, then to a form for choosing a movie. The form happens to be drawn as four separate pictures, and shows the abstract commands on the last screen.

Screenshot Partial Mock-up for SmartTicket

Java graphics 03fig01.jpg

Recommend: Java graphics bulb2_icon.gif Use the mock-up to further study, test, and share your designs.

It is important to note that when the app is implemented, its screens will be laid out by the MIDP implementation on the device. Because MIDP implementations should strive to follow the conventions of the device, the app may or may not look like the mock-up. For example, Table 3.2 shows the SmartTicket screens that correspond to the mock-up on a mobile phone.

Table 3.2. Comparison of Mock-up and an Implementation

Screen Mock-up

Screen on a Mobile Phone

Java graphics 03inf04.gif

Java graphics 03inf07.gif

Java graphics 03inf05.gif

Java graphics 03inf08.gif

Java graphics 03inf06.gif

Java graphics 03inf09.gif

Java graphics 03inf10.gif

Java graphics 03inf11.gif