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