Page 1
Page 2
Page 3
Introduction
When designing almost any application,
one of the first design considerations is how to implement
GUI "navigation," that is how you present the
user with new screens of information. With VB 6 you have
a few options, but the most common is to use a different
Form for each screen of information. eMbedded Visual Basic
developers, especially newer ones, often use the same method
because, well, that's how they did it in VB.
In eVB this can cause some problems
and actually add work to a project. For example, if you
want to have a common set of menus across all of your screens,
you'll have to add a MenuBar to each form and then duplicate
the code to initialize it. You also have to worry more about
clean-up since you can't Unload a Form in eVB either.
A relatively simple, and fairly common,
solution to this is to use a single Form with a Frame for
each screen. When you want to display a screen to the user,
you simply make the right Frame visible and bring it into
the position desired. Remember, a Form can be much larger
than the visible screen area of the PocketPC.
An additional difficulty comes from
the inherent nature of a lot of Pocket PC applications.
Since the PocketPC has very limited screen real-estate,
often an application will have numerous screens, and often
the user will either have to, or at least have to option
to, "drill down" several screens.
Take, for example, an application used
to track your DVD collection. You may start with presenting
a list of titles. Selecting a title may present more detailed
information, like a general plot outline, major actors and
the like. Now let's assume that you can tap on an actor's
name and get a detailed bio of that person.
When you're done looking at the person's
bio, it would be nice to go back to the movie information
that you were looking at just before the bio, and this is
where the problems begin. You have a situation somewhat
like a browser session and the user wants to go "back."
How do you know where the user came from in order to display
the correct information?
If you had used multiple Forms you could
simply hide the current Form and the previous form would
be the next down in the z-order, and with Frames you could
probably achieve the same as well. Since the application
is simple, you could also hard code a back button to always
go from the bio screen back to the movie screen and from
the movie screen back to the movie list. But let's look
at a slightly more complex situation where this breaks down.
Let's say the actor's bio screen shows
a list of other movies the person has been in and tapping
one of these takes the user to the information screen about
that movie. One can assume that this is actually the same
GUI screen as the first move information screen. How do
you now allow the user to move not just back to that actor's
bio, but the movie info of the first movie selected, essentially
back two screens? Or what if from an actor's bio screen
we could select a co-star or spouse's name and go to their
bio? As you can imagine, the path between screens can no
longer be predicted, so you can't hard-code a back button.
At this point it's getting complex enough
that we should look at a concrete example with Frame names.
Let's assume we have 3 frames: fraListing which displays
the list of all movies, fraTitle which shows detailed
information about a title and fraBio which show biographical
information about an actor. In my example above, we started
out on fraListing, navigated to fraTitle,
navigated to fraBio and finally navigated to fraTitle
again.
One way of looking at this list of screens
is as a stack. Imagine, if you will, that each screen viewed
can be represented as a card. As a user views these screens,
the card is placed on a deck or stack. In our example, the
stack would now look like this:
fraTitle
fraBio
fraTitle
fraListing
The currently visible screen is always
on the top, and to go back in screens, you need only to
remove cards from the deck. In this way, you can "undo"
the actions taken by the user for any length of moves and
in any order, no matter how circuitous their path.
The FrameStack project
Now that you've got an understanding
of the idea of a stack, let's look at implementing one in
eVB. First, let's create a basic project that has a single
Form and three Frames. We can even name the frames like
we had in our sample: fraListing, fraTitle
and fraBio. Make the frames about the same width
as the screen (3495 twips) but not as tall, as we want to
have some buttons that apply to all screens, somewhat like
a menu.
To make things a bit simpler, we won't
use any real data or lists, instead we'll just add some
CommandButtons. On fraListing add a single Button.
This will simulate selecting a movie title. On fraTitle
add two buttons. One will navigate to fraBio (selecting
an actor's name) and another that will navigate to "another"
fraTitle (an associated movie, maybe in a series). On fraBio
add two buttons. One will navigate to fraTitle (other movies
the actor has been in) and one to fraBio (co-stars, spouse,
etc.).
Finally add two buttons below the frames
in a position where they will be visible on screen. One
of these will be used as a "Back" button and the
other to show the contents of the stack. Figure 1 shows
the completed form layout in the eVB IDE.
Now that you have a project, let's look
at the code to make the stack work. Manipulating a stack
requires two methods, one to add an item to the stack, which
is traditionally called "pushing" and one to remove,
or "pop," an item.
Next Page