Optimise Nokia Maps applications for Nokia Asha Touch phones

Nokia Series 40

Optimizing Nokia Map
Applications for Series 40 Touch
Devices

Jason Fox
Technical Support Engineer
Maps Platform
1 © Nokia 2012 Creating Map Components for Touch.pptx

Agenda
1. Architectural Overview of the
Nokia Maps API for Java ME.
2. An Introduction to Map Components
3. Reacting to Map Events
4. Creating Touchable Map Components
5. Adding Buttons to a Map Canvas
6. Adding Gesture Controls
7. Retrofitting Touch Controls to your App
Note: A complete set of video demos is available at:
http://www.youtube.com/watch?v=P3qfd7_OrpY


Architectural Overview of the
Nokia Maps API for Java ME


What is Nokia Maps API for Java ME?
An extendable API aimed at Series 40 Phones,
targeting all devices supporting MIDP 2.0 or higher.
Allows you to develop mobile applications based on
Nokia Maps.
• Multiple map types optimised for mobile displays

• “Out-of-the box” support for common mapping use cases
(Markers, Images, Polygons, Polylines, Pan and Zoom)

• In-built libraries to access search, routing and POI information
services.

• Façade Pattern - hides all the “plumbing” code - the low level
connection calls, image manipulation etc.

Comes as standard as part of the Nokia SDK 2.0 for Java
http://www.developer.nokia.com/Develop/Java/Tools/

Architectural Design

• MapCanvas - a concrete instantiation of the
javax.microedition.lcdui.Canvas class. Handles
the low-level graphics painting the map and the delivery
of events .

• MapDisplay – defines the part of the World to be
displayed, and encapsulates the details of any custom
points of interest. That is it contains MapObjects

• MapObjects may be also be placed within a
MapContainer

• Use the MapFactory to create MapObjects and add them to the MapDisplay.

• Both the MapDisplay and MapConatiners are themselves MapObjects


An Introduction to Map
Components


What is a Map component?
MapComponents are used to alter or extend the functionality of the basic map.
Five standard MapComponents already exist:

Component Function Visible Responds Responds
ID to Touch to Key
Press
ZoomImg Zooms the map when the on screen +/-
Component buttons are pressed.
Touch Zooms and Pans the map using gesture
Behavior
Download Displays Memory usage on screen
Indicator
Default Draws a focal point (bull's-eye) at the
Cursor center of the map screen
Map Zooms and Pans the map using Keypad
Behavior

To include new functionality:

To remove existing functionality:


Hello World Component
What is it? The simplest introductory MapComponent

What Events Does it consume ?
• None

What does it do?
Paints Hello World over the top of the map
(of course.)

All visible MapComponents must be painted onto the
MapCanvas

Once a MapComponent has been attached, the
paint() method will be called after the underlining
MapDisplay has been rendered on the MapCanvas
.


Hello World Component
Any custom map component must implement the MapComponent interface,
hence at a minimum, the component must handle all the events shown below:

attach()and detach() are called when the component
is added/removed from the MapDisplay.

An EventListener is required for handling touch events
and key presses. This is optional.

For housekeeping, every component must offer a unique
Id and a version number.

mapUpdated()is called when the MapDisplay changes
state (Observer Pattern)


Reacting to Map Events


Reacting to Map Events
All usable MapComponents must
react to one or more events

• Once attached MapComponents are able to
respond to changes of the MapDisplay as
well as the paint()event.

• MapComponents with an EventListener
are also able to respond touch events and key
presses

• When the attach()method is called,
maintain a reference to the current
MapDisplay, to be able to observe the
details of the changes of state, alter the map
and access the associated mapObjects

Every MapComponent should do this!


Map Restriction Component
What is it? A visible fixed grey box, the User cannot
escape

mapUpdated Emits an audible warning if
the user attempts to move the
centre of the map outside of
a given limit.

What does it do?
• Prevents the User from moving the Map Outside of a
given GeoBoundingBox
• Facilitates the use of Viewport clustering

Demo: http://www.youtube.com/watch?v=zEShGKpesIw
http://www.youtube.com/watch?v=QED-xV0rjbw

Map Restriction Component
How does it work?

Interaction between the Map Restriction
Component and the Map Behaviour
Component

One Component = One Job

• When the map is updated, the center is
validated against a bounding box.

• The Display (for playSound()) and
MapListener (for repaint()) need
to have been passed into the
constructor.

• The call to onMapContentUpdated()
forces the map to be repainted:


Focal Observer Component
What is it? Fires a listener function, informing the
MIDlet that there is non-geographic data associated with
the MapObject currently at the centre of the map.

mapUpdated Checks to see if the MapObject at the
centre of the screen has any associated
non-geographic data, and passes it to its
Listener.

What does it do? Depends on the MIDlet
• Usually used in conjunction with other Forms and MapComponents
• Similar to the onFocusChanged()callback of the KMLMapComponent

Demo: http://www.youtube.com/watch?v=BUM-gEE_wXU

Focal Observer Component
How does it work?
The MIDlet must offer a callback function of a well known interface, and
handle the data accordingly.

Relies on three useful functions:
• to find the MapObject at the centre of the MapDisplay

• to find the central GeoCoordinate of a MapObject

• to find the pixel Point at the centre of a MapObject


Tooltip Component
What is it? A static tooltip control

mapUpdated Displays /Hides the tooltip control
dependent upon the object at the centre
of the screen.

What does it do?
• Displays a tooltip text associated with a MapObject
• Gives Visual Feedback/Reassurance to the User prior to making a selection.
• Use in association with the Focal Observer and OK Command Button.

Demo: http://www.youtube.com/watch?v=MvlQoOmFt-Y


Creating Touchable Map
Components


Reacting to Touch
To react to touch events (and key presses) a MapComponent will need its own
EventListener. Pointer and Key Press Events created by the MapCanvas are passed
by each attached MapComponent in turn until the event has been consumed.

There are six types of event to process

• pointerPressed() • keyPressed()
• pointerReleased() • keyReleased()
• pointerDragged() • keyRepeated()

• A typical touch control will process all three
types of pointer event, but will usually only
consume the pointerReleased()event.

• The type of processing to be done will depend
upon whether the pointer was within the hit area
of the control or not.

• All the Key press events should be left
unconsumed. (i.e. return false)


Centering Control
What is it? A component adding a touch event to the map, centring/reacting to
the marker touched.

pointerReleased Moves the touched control to the centre of the screen,
or fires a Command if the object is already at the centre
of the screen.

What does it do?
• Used for object selection
• Use in conjunction with Focal Observer and other
feedback components e.g. Tooltip, Infobubble etc.

Where is the Hit Area ?

Demo: http://www.youtube.com/watch?v=wtBHN2VhI2Q


Infobubble Component
What is it? A clickable, scrollable Infobubble control

mapUpdated Displays the Infobubble control and hides
the MapObject or vice-versa dependent
upon the object at the centre of the
screen.
pointerPressed Highlights the InfoBubble
clear Removes highlight
pointerReleased Fires the Command associated with the
InfoBubble
pointerDragged Drags the text within the Infobubble

What does it do?
• Extension of the tooltip control. More visual feedback prior to selection

Demo: http://www.youtube.com/watch?v=MTRbpXkaGAk


Adding Buttons to a Map Canvas


Adding Buttons to a Map Canvas
• Buttons are familiar visual components for users, who expect an event to
be triggered when a defined area of the screen (i.e. the hit area) is touched

• Each button on a MapCanvas will be a separate MapComponent which
responds to touch events in a standard fashion and overrides paint()to
render the button text, background and/or button glyph (Image).

• Standard conventions occur:
• With touch down, the button shows a highlight colour.
• With touch release, the action is triggered, and the highlight disappears.
• Highlight also disappears if release occurs outside of the hit area.

• Follow the Series 40 Full Touch Design Guidelines

• Buttons typically have a binary On/Off state.

• Don’t over use buttons – each button added reduces the area left to display
the map.


Scale Bar
What is it? A dynamic text button

pointerPressed Highlights the Button
clear Removes highlight
pointerReleased Removes highlight and switches
between Metric and Imperial
measurements
mapUpdated Recalculates the length of the scale
bar. Alters the legend based on the
zoom level.

What does it do?
• Displays a scale bar of a known length on the map with a legend in
Miles or Kilometers

Demo: http://www.youtube.com/watch?v=bbd_11Zx1ck


Picture-in-Picture Button.
What is it? A dynamic image button

pointerPressed Highlight s the Image Button or the
Pic-in-Pic Border if the control is active.
clear Removes any highlighting
pointerReleased Toggles Display of Pic-In-Pic
mapUpdated Recalculates Pic-Pic based on the view
on the screen

What does it do?

• Displays a small zoomed out Image with a dot
marking the current center point of the map.

Demo: http://www.youtube.com/watch?v=qXwY0ja-Yno


Map Selector Button.
What is it? A static image button

pointerPressed Highlights the Image /
Button
clear Remove highlight
pointerReleased Removes highlight and
shows/hides the Map
Selector

What does it do?

• Full Touch Phones – display and use a selection from a CategoryBar

• Fall back UI – Switch in a Modal Form as the current Display and make
an Exclusive ChoiceGroup Selection

Demo: http://www.youtube.com/watch?v=KLFiPj7XJms
http://www.youtube.com/watch?v=SOQRV5hp-E4

Geolocation Button.
What is it? A static image button

pointerPressed Highlights the Image / Button
clear Remove highlight
pointerReleased Remove highlight and activates or
deactivates the Geolocation API

What does it do?

• Requests GPS updates or polls for Cell ID
location and responds to location updates
by placing a marker on the map.

Demo: http://www.youtube.com/watch?v=rtmSpk0vANo


Adding Gesture Controls


Reacting to Gesture
The Gesture API allows MIDlets to receive notifications when the user
interacts with Canvas. The API registers touch interaction as a series of
gesture events.

Can potentially handle the following Events:
• GESTURE_TAP
• GESTURE_LONG_PRESS
• GESTURE_LONG_PRESS_REPEATED
• GESTURE_DRAG
• GESTURE_DROP
• GESTURE_FLICK
• GESTURE_PINCH
• GESTURE_RECOGNITION_START
• GESTURE_RECOGNITION_END

Need to set up our own CustomGestureHandler, pass in the Canvas,
implement a GestureListener

For details check out the Nokia Developer’s Guide:
http://www.developer.nokia.com/Resources/Library/Java/#!developers-
guides/ui-and-graphics/touch-ui/touch-interaction-in-series-40/using-
gestures.html


Creating a Gesture Framework
GestureEvents Pointer Events
The CustomGestureHandler must pointerPressed()
listen out for gestures actions and pointerReleased() and
pass them on to any attached Gesture pointerDragged() are
handling MapComponents automatically sent to any
attached MapComponents
by the MapCanvas via the
standard EventListener
interface.

Create a well known interface such
as ExtendedEventListener to
receive and handle events like
flick(), longPress() and
pinch()


Long Press Component
What is it? A control which reacts to the long press
gesture from the Gesture API


longPress Calculates the geolocation of the pixel
touched by the long press action and
fires the associated Command

What does it do?
• Fires a Command if a Long Press has occurred,
and remembers the location of the position
touched
• Used as an input device.

Demo: http://www.youtube.com/watch?v=R_DKmMU04fw


Context Menu Component
What is it? A context menu

pointerPressed Highlights the Menu Item selected
clear Removes highlight from the Menu Item
selected or closes the context menu.
pointerReleased Fires the Command associated with a
Menu item if selected
pointerDragged Moves the list of visible Menu Items up
or down
mapUpdated Displays the Context Menu control if
the associated MapObject lies at the
centre of the screen
flick Continues the movement of Menu
Items based on the flick velocity

What does it do?
• Displays a series of possible actions associate with a location.
Demo: http://www.youtube.com/watch?v=b2YKo8jnmug

Retrofitting Touch Controls to
your App


Touchable KML Demo
• Remove Default Cursor
• Remove Download Indicator
• Add Centerer Component
• Add Tooltips Component
• Add KMLMapComponent

When focused Changed add the tooltip and OK Command

• Select items by touching a MapObject
• Drill down by by touching a MapObject or
selecting the OK Command

Demo: http://www.youtube.com/watch?v=_jownw6ESI4

Touchable Places Demo
• Add FocalObserver Component
• Add ContextMenu Component
• Add Infobubble Component

When a Search is completed, add the
Places Data to the FocalObserver.

Demo: http://www.youtube.com/watch?v=33Zcpj3wqsM

Touchable Places Demo
When the FocalObserver fires - add the Place data to either the
InfoBubble or the ContextMenu depending upon whether there are
any contact details:

User expects all MapObjects to be touchable. The visual feedback
means that the user is always offered the correct control for touching
or making a choice.


Touchable Routing Demo
• Add LongPress Component
• Add SideBar Component

Use the LongPress Component to add markers
to the map.

Sidebar component :
• Familiar virtual keyboard style interface.
• Draggable handle reveals touchable icons.
• Shows/ Hides important Commands – no need
to take screen space away from the map.
• Maximum of four choices in landscape mode

Demo: http://www.youtube.com/watch?v=6Ss07MgkrBk


For More Information
Download the latest Nokia SDK for Java
http://developer.nokia.com/Develop/Series_40

Consult the Nokia Developer Library
http://library.developer.nokia.com

Nokia Maps API
http://api.maps.nokia.com

Download the Map Components
https://projects.developer.nokia.com/mapcomponentdemos


Optimise Nokia Maps applications for Nokia Asha Touch phones

Recommandé

Recommandé

Contenu connexe

Similaire à Optimise Nokia Maps applications for Nokia Asha Touch phones

Similaire à Optimise Nokia Maps applications for Nokia Asha Touch phones (20)

Plus de Microsoft Mobile Developer

Plus de Microsoft Mobile Developer (20)

Dernier

Dernier (20)

Optimise Nokia Maps applications for Nokia Asha Touch phones