14
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

Event-driven map components for Series 40 apps

Embed Size (px)

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

Page 1: Event-driven map components for Series 40 apps

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

Page 2: Event-driven map components for Series 40 apps

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

Page 3: Event-driven map components for Series 40 apps

Nokia Maps API for Java ME Architectural Review

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

Page 4: Event-driven map components for Series 40 apps

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

Page 5: Event-driven map components for Series 40 apps

Map Components

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

Event Driven

Page 6: Event-driven map components for Series 40 apps

Deep-Dive Code Examples

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

Page 7: Event-driven map components for Series 40 apps

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.

Page 8: Event-driven map components for Series 40 apps

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.

Page 9: Event-driven map components for Series 40 apps

Gesture-Driven Component

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

e.g. Pinch Zoom Component

Page 10: Event-driven map components for Series 40 apps

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.

Page 11: Event-driven map components for Series 40 apps

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

Page 12: Event-driven map components for Series 40 apps

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

Page 13: Event-driven map components for Series 40 apps

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.”

Page 14: Event-driven map components for Series 40 apps

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