|
Newsletters
|
|
|
|
|
The WDN Symbian DevZone... Building a Communicator Interface in MobileVB
by Richard Bloor, September 03, 2002
This week we continue our occasional series looking at development on the Nokia
9200 using AppForge MobileVB. This week Richard takes a look at the
considerations that need to be made in building a Nokia compliant interface..
The user interface for the Nokia 9210 differs in several ways from Visual Basic's
native Windows interface. This means that when you use MobileVB to create
applications for the Nokia 9200 series communicator consideration needs to be
given to these differences and additional code written to create a Nokia compliant
interface. This article examines those differences.
Nokia Specific Ingots
As you will have seen in the Introduction to MobileVB Development (See Article)
MobileVB includes additional ingots designed to help create an interface that
looks and behaves like the 9200 series. In addition to the two used in the
example HelloWorld application there is a third Ingot, the Windows Background,
exclusively designed for the Communicator interface. In summary the additional
Nokia Ingots are:
AFCommandBtnAreaNS80 - This Ingot creates the Command Button Area on
the right of the Nokia screen that allows the user to
interact with the application using the 4 hardware
buttons
AFTitleBarNS80 - This Ingot adds a title to an application view
AFWindowBkgNS80 - This Ingot provides the frame to windows
implemented within a screen
The following screen shot shows all the MobileVB Nokia Ingots in AppForge’s
example Airports application.
Of the standard Ingots Radio Buttons, Check Boxes, the Up Down control and
Buttons are ones that should not be used in Nokia applications, as they don’t
have an equivalent in the 9200 interface. However these Ingots are still rendered
in a Nokia application as shown in the following screen:
Nokia Navigation
Once the correct Ingots have been selected for the application the next challenge
is to implement the Nokia navigation.
The 9200 interface uses an entirely different navigation paradigm from Microsoft
Windows. Rather than using tab to move between fields and other screen
elements the Nokia interface uses the cursor keys to move between fields and tab
to move between windows. The Windows standard is obviously the native
interface implemented in MobileVB.
Implementing correct Nokia navigation is dependant on two things, correctly
setting tab stops within the screen as well as intercepting keyboard commands
and then using them to set the focus on the field appropriate to the movement
selected. For a screen without windows none of the fields should have tab stops
while for screens with windows the tab stops should be set on the first field
within each window.
As the tab stopped fields receive focus the associated Window Background Ingot
should be highlighted. Highlighting one Window Background automatically turns
the highlighting off for all other Window Backgrounds on the form (in a similar
way to the standard Windows behavior of radio buttons).
To make the tab stop setting easier MobileVB sets the tab stop for all Ingots
added in a Nokia project to false. You then only need to set the tab stops
required rather than clear each one not needed.
To deal with requirements of the Nokia’s navigation between fields using the
cursor pad it is necessary to turn on the ability to capture keyboard commands
within MobileVB. This is done by setting a form's KeyPreview property to True.
MobileVB does this as the default for new forms created in a Nokia project. In
addition MobileVB also creates a template Subroutine to capture and process the
key events. We will take a look at the detailed coding for this in the next
MobileVB article.
Screen Size and Indicator
In the screenshots above you will see that to the left hand side of the screen there
is an Indicator window which shows information such as the current battery
status and signal strength. The Indicator comes in two forms, one wide (92 pixel)
and one narrow (32 pixel). MobileVB automatically determines which of the two
should be displayed based on the width of the application screen. When the
screen is 548 pixels wide or narrower the wide Indicator is displayed. When the
screen is 549 pixels or wider the narrow indicator is displayed but if the screen is
over 608 pixels wide it overwrites the Indicator from the right until the screen is
640 pixels wide when the entire Indicator is hidden. Basically this means that
you should create screens 548, 608 or 640 pixels wide.
Application Menus
Menus for the Nokia require no special consideration and are created using the
standard menu editor in Visual Basic.
Fonts
MobileVB currently does not implement the Nokia System Font for all the Ingots
automatically, which means that when building or running the application in
Visual Basic using the default fonts does not give a representative view of how it
will display in the emulator or on a device.
You can see this in the earlier screen displaying invalid Ingots, where in VB the
label at the top of the screen appears to accommodate all the text while when
running on the Nokia it wraps. The following shows how the Nokia screen looks
in MobileVB.
Setting the Ingots fonts displayed in Visual Basic to Ariel 20 Bold solves this
problem, giving a good approximation to how the application will look on the
communicator.
In addition to the font issues in Visual Basic, not all the Ingots use the correct
font in the emulator or devices, but this can be easily corrected by setting the
fonts in code when the form is opened.
Tabbed Dialogs
Nokia use a tab to allow multiple screens to be created for dialogs, such as this
one from the standard agenda application.
In MobileVB these tabs have to be simulated as they are in the following screen
from the sample recipes program.
This is achieved by using standard labels to represent the Tabs. The navigation
code then needs to highlight the label and display the appropriate underlying
dialog fields as the user navigates between them.
Additional Text in Windows Titles
There are circumstances when it is necessary to add extra text to the Title bar or
title section within a Windows background. An example would be an item count
indicator, such as the "1 of 100" count illustrated in this screen shot from the
example Airport application.
This is achieved by creating two labels one with white text, one with black, with
the black text being placed behind the white and offset by one pixel right and
down. When the focus moves away from the window the white text should be
turned black and the original black label hidden so it displays like this:
Conclusion
In this article we have briefly reviewed the main issues which affect creating a
Nokia compliant interface in MobileVB. In the next few articles on MobileVB we
will explore the coding required to implement the Nokia interface elements that
we have introduced in this article.
Other Reading
Finally, if you are unfamiliar with the Nokia UI style then you should take a look
at the Nokia Style Guide, a PDF document that is installed as part of the 9200
series SDK or can be obtained from Forum Nokia (forum.nokia.com), under
documentation in the Symbian section.
About the WDN Symbian Editor, Richard Bloor:
Richard Bloor has 16 years experience in the IT industry. His earlier
work was largely in design and development of commercial and
manufacturing systems but more recently has focused on
development and test management of government systems.
Richard Bloor is the Mobile Applications champion at System
Architecture consultancy Equinox of Wellington, New Zealand.
Richard can be reached at rbloor@wirelessdevnet.com.
Symbian DevZone Home
|
|
|
