Optimizing Nokia Map Applications for Series 40 Touch Devices
Nokia Series 40
1 © Nokia 2012 Creating Map Components for Touch.pptx
Jason Fox Technical Support Engineer Maps Platform
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
Agenda
2 © Nokia 2012 Creating Map Components for Touch.pptx
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
3 © Nokia 2012 Creating Map Components for Touch.pptx
What is Nokia Maps API for Java ME?
4 © Nokia 2012 Creating Map Components for Touch.pptx
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.
Comes as standard as part of the Nokia SDK 2.0 for Java http://www.developer.nokia.com/Develop/Java/Tools/
• 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.
Architectural Design
5 © Nokia 2012 Creating Map Components for Touch.pptx
• 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
6 © Nokia 2012 Creating Map Components for Touch.pptx
What is a Map component?
7 © Nokia 2012 Creating Map Components for Touch.pptx
MapComponents are used to alter or extend the functionality of the basic map. Five standard MapComponents already exist:
Component ID
Function
Visible
Responds to Touch
Responds to Key Press
ZoomImg Component
Zooms the map when the on screen +/- buttons are pressed.
Touch Behavior
Zooms and Pans the map using gesture
Download Indicator
Displays Memory usage on screen
Default Cursor
Draws a focal point (bull's-eye) at the center of the map screen
Map Behavior
Zooms and Pans the map using Keypad
To include new functionality:
To remove existing functionality:
Hello World Component
8 © Nokia 2012 Creating Map Components for Touch.pptx
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
9 © Nokia 2012 Creating Map Components for Touch.pptx
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)
Any custom map component must implement the MapComponent interface, hence at a minimum, the component must handle all the events shown below:
Reacting to Map Events
10 © Nokia 2012 Creating Map Components for Touch.pptx
Reacting to Map Events
11 © Nokia 2012 Creating Map Components for Touch.pptx
Every MapComponent should do this!
• 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
All usable MapComponents must react to one or more events
Map Restriction Component
12 © Nokia 2012 Creating Map Components for Touch.pptx
What is it? A visible fixed grey box, the User cannot escape What Events Does it consume ?
What does it do? • Prevents the User from moving the Map Outside of a
given GeoBoundingBox • Facilitates the use of Viewport clustering
mapUpdated Emits an audible warning if the user attempts to move the centre of the map outside of a given limit.
Demo: http://www.youtube.com/watch?v=zEShGKpesIw http://www.youtube.com/watch?v=QED-xV0rjbw
Map Restriction Component
13 © Nokia 2012 Creating Map Components for Touch.pptx
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
14 © Nokia 2012 Creating Map Components for Touch.pptx
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 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. What Events Does it consume ?
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
15 © Nokia 2012 Creating Map Components for Touch.pptx
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
16 © Nokia 2012 Creating Map Components for Touch.pptx
mapUpdated Displays /Hides the tooltip control dependent upon the object at the centre of the screen.
What is it? A static tooltip control What Events Does it consume ?
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
17 © Nokia 2012 Creating Map Components for Touch.pptx
Reacting to Touch
18 © Nokia 2012 Creating Map Components for Touch.pptx
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() • pointerReleased() • pointerDragged()
• keyPressed() • keyReleased() • 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
19 © Nokia 2012 Creating Map Components for Touch.pptx
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 is it? A component adding a touch event to the map, centring/reacting to the marker touched. What Events Does it consume ?
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
20 © Nokia 2012 Creating Map Components for Touch.pptx
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 is it? A clickable, scrollable Infobubble control What Events Does it consume ?
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
21 © Nokia 2012 Creating Map Components for Touch.pptx
Adding Buttons to a Map Canvas
22 © Nokia 2012 Creating Map Components for Touch.pptx
• 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
23 © Nokia 2012 Creating Map Components for Touch.pptx
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 is it? A dynamic text button What Events Does it consume ?
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.
24 © Nokia 2012 Creating Map Components for Touch.pptx
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 is it? A dynamic image button What Events Does it consume ?
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.
25 © Nokia 2012 Creating Map Components for Touch.pptx
pointerPressed Highlights the Image / Button
clear Remove highlight
pointerReleased Removes highlight and shows/hides the Map Selector
What is it? A static image button What Events Does it consume ?
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.
26 © Nokia 2012 Creating Map Components for Touch.pptx
pointerPressed Highlights the Image / Button
clear Remove highlight
pointerReleased Remove highlight and activates or deactivates the Geolocation API
What is it? A static image button What Events Does it consume ?
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
27 © Nokia 2012 Creating Map Components for Touch.pptx
Reacting to Gesture
28 © Nokia 2012 Creating Map Components for Touch.pptx
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
29 © Nokia 2012 Creating Map Components for Touch.pptx
Create a well known interface such as ExtendedEventListener to receive and handle events like flick(), longPress() and pinch()
Pointer Events pointerPressed() pointerReleased() and pointerDragged() are automatically sent to any attached MapComponents by the MapCanvas via the standard EventListener interface.
GestureEvents The CustomGestureHandler must listen out for gestures actions and pass them on to any attached Gesture handling MapComponents
Long Press Component
30 © Nokia 2012 Creating Map Components for Touch.pptx
longPress Calculates the geolocation of the pixel touched by the long press action and fires the associated Command
What is it? A control which reacts to the long press gesture from the Gesture API What Events Does it consume ?
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
31 © Nokia 2012 Creating Map Components for Touch.pptx
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 is it? A context menu What Events Does it consume ?
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
32 © Nokia 2012 Creating Map Components for Touch.pptx
Touchable KML Demo
33 © Nokia 2012 Creating Map Components for Touch.pptx
• 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
34 © Nokia 2012 Creating Map Components for Touch.pptx
When a Search is completed, add the Places Data to the FocalObserver.
• Remove Default Cursor • Remove Download Indicator • Add Centerer Component • Add FocalObserver Component • Add ContextMenu Component • Add Infobubble Component
Demo: http://www.youtube.com/watch?v=33Zcpj3wqsM
Touchable Places Demo
35 © Nokia 2012 Creating Map Components for Touch.pptx
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
36 © Nokia 2012 Creating Map Components for Touch.pptx
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
• Remove Default Cursor • Remove Download Indicator • Add Centerer Component • Add LongPress Component • Add SideBar Component
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
37 © Nokia 2012 Creating Map Components for Touch.pptx