Event-driven map components for Series 40 apps

Preview:

DESCRIPTION

This webinar is for developers who want to use maps in their applications and extend the user interaction beyond basic pan and zoom functionality. You can extend the user’s interaction with a map canvas beyond basic panning and zooming by using the Maps API for Java ME to create custom map components. This webinar is for you if you’re looking to use maps in your applications and extend the UI in an intuitive manner to do what you want it to do. The Maps API for Java ME includes a framework through which your custom component can respond to standard mapCanvas events. In the presentation, Jason Fox of Nokia’s Location and Commerce team in Berlin will describe a series of intermediate and advanced situations where custom map components provide solutions to problems, and he’ll share a checklist of considerations for designing map components to be responsive to your users.

Citation preview

Architecture and Design of Event Driven Map Components

Jason Fox Technical Support Engineer Maps Platform

© Nokia 2013 Event-driven map components for Series 40.pptx

Agenda 1. API Architectural review

• Basic Architectural Design • Event Driven Map Components

2. Deep-Dive Code Examples

• Touch driven - Dragging a Marker • Timer driven - Adding Animation • Gesture driven - Pinch Zoom Control • Key press driven - Key Logging • Map State driven - Server-side Marker Clustering

© Nokia 2013 Event-driven map components for Series 40.pptx

Nokia Maps API for Java ME Architectural Review

© Nokia 2013 Event-driven map components for Series 40.pptx

Basic Architectural Design

© Nokia 2013 Event-driven map components for Series 40.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 MapContainers are themselves MapObjects

Map Components

© Nokia 2013 Event-driven map components for Series 40.pptx

Event Driven

Deep-Dive Code Examples

© Nokia 2013 Event-driven map components for Series 40.pptx

Touch-Driven Component

© Nokia 2013 Event-driven map components for Series 40.pptx

e.g. Marker Dragger Component Used for Marker location correction

EventListener pointerPressed() Hide Marker

EventListener pointerDragged() Drag Mask location

EventListener pointerReleased() Move Marker

MapComponent paint() Draw/Redraw Mask

How does it work? Interaction between Canvas Touch and Canvas Paint

Key Points • Updating Markers is slow. • Never update a MapMarker on a MapCanvas unless you are forced

to do so.

Timer-Driven Component

© Nokia 2013 Event-driven map components for Series 40.pptx

e.g. Marker Bouncer Component Used for drawing attention to a marker

MapListener onContentUpdated() Request Repaint

MapComponent paint() Draw the markers

How does it work? Interaction between Canvas repaint()requests and painting the MapComponent

Key Points Understand the correct usage of Point and GeoCoordinate • Hold/Calculate locations using Geocoordinates • Draw using pixel Points. • Never update a MapMarker on a MapCanvas unless you are forced

to do so.

Gesture-Driven Component

© Nokia 2013 Event-driven map components for Series 40.pptx

e.g. Pinch Zoom Component

Pinch Zoom Component

© Nokia 2013 Event-driven map components for Series 40.pptx

How does it work? Reacts to the pinch()event of the Gesture Framework

ExtendedEvent Listener

pinch() Alter Zoom Level

EventListener pointerReleased() Fix zoom focus point

Key Points • Separate your MapComponents from your MIDlets for backward

compatibility and re-use • Even though you may think you don’t need a MapComponent, you

probably do.

Key Press-Driven Component

© Nokia 2013 Event-driven map components for Series 40.pptx

e.g. Key Logger Component Used for adding/amending data associated with a MapMarker

How does it work? Interaction between Canvas Key Press and Canvas Paint.

EventListener keyPressed() Update FocalObserver Data

FocalEvent Listener

onFocusChanged() Update Tooltip text

Tooltip paint() Display updated text

Key Points • A well designed MapComponent does just one job • Use Interfaces to ensure MapComponents are loosely coupled

Map State-Driven Component

© Nokia 2013 Event-driven map components for Series 40.pptx

e.g. Marker Clustering Component Used for displaying large datasets on screen How does it work? Interaction between Canvas Completed and Canvas Paint.

MarkerClusterer mapUpdated() Decide if clustering required

MapCanvas onMapContentComplete() Start Clustering – request XML data

MarkerClusterer onParseComplete() Update MapMarkers

FocalEvent Listener

onFocusChanged() Update Tooltip text

Tooltip paint() Display updated text

Conclusion

© Nokia 2013 Event-driven map components for Series 40.pptx

• Complex interactions can be achieved through passing events between a series of simple MapComponents

• Application of Hoare's law for big problems

“Inside every big problem there is a small problem struggling to get out.”

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 HERE Developer Site http://developer.here.com

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

© Nokia 2013 Event-driven map components for Series 40.pptx

Recommended