Optimise Nokia Maps applications for Nokia Asha Touch phones

Nokia Series 40Optimizing Nokia MapApplications for Series 40 TouchDevicesJason FoxTechnical Support EngineerMaps Platform1 © Nokia 2012 Creating Map Components for Touch.pptx

Agenda1. Architectural Overview of the Nokia Maps API for Java ME.2. An Introduction to Map Components3. Reacting to Map Events4. Creating Touchable Map Components5. Adding Buttons to a Map Canvas6. Adding Gesture Controls7. Retrofitting Touch Controls to your App Note: A complete set of video demos is available at: http://www.youtube.com/watch?v=P3qfd7_OrpY2 © Nokia 2012 Creating Map Components for Touch.pptx

Architectural Overview of theNokia Maps API for Java ME3 © Nokia 2012 Creating Map Components for Touch.pptx

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 onNokia 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 Javahttp://www.developer.nokia.com/Develop/Java/Tools/ 4 © Nokia 2012 Creating Map Components for Touch.pptx

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 MapObjects5 © Nokia 2012 Creating Map Components for Touch.pptx

An Introduction to MapComponents6 © Nokia 2012 Creating Map Components for Touch.pptx

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 (bulls-eye) at the Cursor center of the map screen Map Zooms and Pans the map using Keypad BehaviorTo include new functionality:To remove existing functionality:7 © Nokia 2012 Creating Map Components for Touch.pptx

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 .8 © Nokia 2012 Creating Map Components for Touch.pptx

Hello World ComponentAny 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)9 © Nokia 2012 Creating Map Components for Touch.pptx

Reacting to Map Events10 © Nokia 2012 Creating Map Components for Touch.pptx

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 mapObjectsEvery MapComponent should do this! 11 © Nokia 2012 Creating Map Components for Touch.pptx

Map Restriction Component What is it? A visible fixed grey box, the User cannot escape What Events Does it consume ? 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-xV0rjbw12 © Nokia 2012 Creating Map Components for Touch.pptx

Map Restriction ComponentHow does it work?Interaction between the Map RestrictionComponent and the Map BehaviourComponentOne 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: 13 © Nokia 2012 Creating Map Components for Touch.pptx

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. What Events Does it consume ? 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 KMLMapComponentDemo: http://www.youtube.com/watch?v=BUM-gEE_wXU14 © Nokia 2012 Creating Map Components for Touch.pptx

Focal Observer ComponentHow does it work?The MIDlet must offer a callback function of a well known interface, andhandle 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 MapObject15 © Nokia 2012 Creating Map Components for Touch.pptx

Tooltip Component What is it? A static tooltip control What Events Does it consume ? 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-Y16 © Nokia 2012 Creating Map Components for Touch.pptx

Creating Touchable MapComponents17 © Nokia 2012 Creating Map Components for Touch.pptx

Reacting to TouchTo react to touch events (and key presses) a MapComponent will need its ownEventListener. Pointer and Key Press Events created by the MapCanvas are passedby 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)18 © Nokia 2012 Creating Map Components for Touch.pptx

Centering Control What is it? A component adding a touch event to the map, centring/reacting to the marker touched. What Events Does it consume ? 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=wtBHN2VhI2Q19 © Nokia 2012 Creating Map Components for Touch.pptx

Infobubble Component What is it? A clickable, scrollable Infobubble control What Events Does it consume ? 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=MTRbpXkaGAk20 © Nokia 2012 Creating Map Components for Touch.pptx

Adding Buttons to a Map Canvas21 © Nokia 2012 Creating Map Components for Touch.pptx

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.22 © Nokia 2012 Creating Map Components for Touch.pptx

Scale Bar What is it? A dynamic text button What Events Does it consume ? 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_11Zx1ck23 © Nokia 2012 Creating Map Components for Touch.pptx

Picture-in-Picture Button. What is it? A dynamic image button What Events Does it consume ? 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-Yno24 © Nokia 2012 Creating Map Components for Touch.pptx

Map Selector Button. What is it? A static image button What Events Does it consume ? 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-E425 © Nokia 2012 Creating Map Components for Touch.pptx

Geolocation Button. What is it? A static image button What Events Does it consume ? 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=rtmSpk0vANo26 © Nokia 2012 Creating Map Components for Touch.pptx

Reacting to GestureThe Gesture API allows MIDlets to receive notifications when the userinteracts with Canvas. The API registers touch interaction as a series ofgesture 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_ENDNeed to set up our own CustomGestureHandler, pass in the Canvas,implement a GestureListenerFor 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 28 © Nokia 2012 Creating Map Components for Touch.pptx

Creating a Gesture Framework GestureEvents Pointer EventsThe CustomGestureHandler must pointerPressed()listen out for gestures actions and pointerReleased() andpass them on to any attached Gesture pointerDragged() arehandling MapComponents automatically sent to any attached MapComponents by the MapCanvas via the standard EventListener interface.Create a well known interface suchas ExtendedEventListener toreceive and handle events likeflick(), longPress() andpinch() 29 © Nokia 2012 Creating Map Components for Touch.pptx

Long Press Component What is it? A control which reacts to the long press gesture from the Gesture API What Events Does it consume ? 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_DKmMU04fw30 © Nokia 2012 Creating Map Components for Touch.pptx

Context Menu Component What is it? A context menu What Events Does it consume ? 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=b2YKo8jnmug31 © Nokia 2012 Creating Map Components for Touch.pptx

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 CommandDemo: http://www.youtube.com/watch?v=_jownw6ESI433 © Nokia 2012 Creating Map Components for Touch.pptx

Touchable Places Demo • Remove Default Cursor • Remove Download Indicator • Add Centerer Component • 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=33Zcpj3wqsM34 © Nokia 2012 Creating Map Components for Touch.pptx

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.35 © Nokia 2012 Creating Map Components for Touch.pptx

Touchable Routing Demo • Remove Default Cursor • Remove Download Indicator • Add Centerer Component • 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=6Ss07MgkrBk36 © Nokia 2012 Creating Map Components for Touch.pptx

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/mapcomponentdemos37 © Nokia 2012 Creating Map Components for Touch.pptx

Optimise Nokia Maps applications for Nokia Asha Touch phones

by Nokia Developer on Sep 17, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Optimise Nokia Maps applications for Nokia Asha Touch phones Presentation Transcript