Creating Touchable Custom Map Components for the Maps API for Java ME - Revision history

Jasfox: Jasfox -

2013-05-13T12:51:51Z

Jasfox -

Jasfox: Jasfox -

2013-05-13T12:46:35Z

Jasfox -

Hamishwillee: Text replace - "S40" to "Series 40"

2013-05-10T05:49:33Z

Text replace - "S40" to "Series 40"

Hamishwillee: Text replace - "[[Category:Nokia Maps" to "[[Category:HERE Maps"

2013-04-24T03:24:03Z

Text replace - "[[Category:Nokia Maps" to "[[Category:HERE Maps"

Jasfox: Jasfox - Add java

2013-04-17T07:53:58Z

Jasfox - Add java

Hamishwillee: Hamishwillee - Change to use new video player which works with Lumia 920 and other mobile browsers

2013-01-30T04:52:19Z

Hamishwillee - Change to use new video player which works with Lumia 920 and other mobile browsers

Jasfox: Jasfox -

2013-01-07T13:31:58Z

Jasfox -

Jasfox: Jasfox - typo.

2012-09-07T07:36:41Z

Jasfox - typo.

Jasfox: Jasfox - Clarify UI requirements.

2012-09-07T07:27:05Z

Jasfox - Clarify UI requirements.

Jasfox: Jasfox - /* Summary */

2012-09-06T11:45:17Z

Jasfox - - Summary

@@ Line 278: / Line 278: @@
 {{SeeAlso|
-*  [http://developer.here.net/java Map API for Java ME]
+* [http://developer.here.com/java HERE Maps API for Java ME]
 * [[Implementing a custom MapUrlProvider overlay with Maps API for Java ME|Map Overlay Example]]
 * [http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-components/buttons.html Full Touch UI  Guidelines - Buttons]
-* [https://projects.developer.nokia.com/mapcomponentdemos Map Components]
+* [https://projects.developer.nokia.com/mapcomponentdemos  HERE Maps Code Examples]
 }}
 {{ArticleMetaData

@@ Line 2: / Line 2: @@
 {{FeaturedArticle|timestamp=20120617}}
 {{Abstract|This article explains how to create a framework for custom {{Icode|MapComponents}} which respond to touch Events. A series of ''touchable'' components (scale bar, button, attribution image) are then added using the framework. }}
 [[File:touch_component_java_me.png]]

@@ Line 289: / Line 289: @@
 |sdk=[http://www.developer.nokia.com/Develop/Java/ Nokia SDK 1.1 for Java], [http://www.developer.nokia.com/Develop/Java/ Nokia SDK 2.0 for Java (beta)]
 |dependencies=   Maps API for Java ME v1.2
-|platform=S40, Symbian^1, Symbian^3
+|platform=Series 40, Symbian^1, Symbian^3
 |devicecompatability=All
 |signing=

@@ Line 1: / Line 1: @@
-[[Category:Nokia Maps]][[Category:Code Examples]][[Category:Java ME]][[Category:Series 40]][[Category:Symbian]][[Category:Series 40 6th Edition FP1]][[Category:Series 40 Developer Platform 2.0]][[Category:Series 40 Developer Platform 1.1]][[Category:Series 40 Developer Platform 2.0]][[Category:Java Runtime 2.1 for Symbian]][[Category:Java Runtime 2.3 for Symbian]]
+[[Category:HERE Maps]][[Category:Code Examples]][[Category:Java ME]][[Category:Series 40]][[Category:Symbian]][[Category:Series 40 6th Edition FP1]][[Category:Series 40 Developer Platform 2.0]][[Category:Series 40 Developer Platform 1.1]][[Category:Series 40 Developer Platform 2.0]][[Category:Java Runtime 2.1 for Symbian]][[Category:Java Runtime 2.3 for Symbian]]
 {{FeaturedArticle|timestamp=20120617}}
 {{Abstract|This article explains how to create a framework for custom {{Icode|MapComponents}} which respond to touch Events. A series of ''touchable'' components (scale bar, button, attribution image) are then added using the framework. }}

@@ Line 83: / Line 83: @@
 === Creating an EventHandler  ===
 The {{Icode|TouchableDisplayComponent}} contains a private class to handle touch events (all other events are ignored), and a  {{Icode|TouchEventListener}} to delegate events through a known interface. This {{Icode|TouchEventListener}}  is added through the usual system of getters and setters. The {{Icode|pointerPressed()}} method of the private class checks to see if a touch has occurred within the target area, and if it has, calls the {{Icode|doClick()}} method
-<code>
+<code java>
          public boolean pointerPressed(int x, int y) {
@@ Line 101: / Line 101: @@
 </code>
 The default implementation of  the {{Icode|doClick()}} method searches for a {{Icode|TouchEventListener}}  and passes thread of control to the listener if one exists.
-<code>
+<code java>
      public boolean doClick(int x, int y) {
          if (listener != null) {

@@ Line 305: / Line 305: @@
 A discussion of the necessary framework to do this is beyond the scope of this article, but has been created in the [https://projects.developer.nokia.com/mapcomponentdemos Map Components] project. Four videos showing highlightable buttons can be seen below.
-<div align="left">
+<mediaplayer>http://www.youtube.com/watch?v=qXwY0ja-Yno</mediaplayer>
-{{#ev:youtube|bbd_11Zx1ck}}{{#ev:youtube|qXwY0ja-Yno}}
-</div>
+<mediaplayer>http://www.youtube.com/watch?v=KLFiPj7XJms</mediaplayer>
-<div align="left">
-{{#ev:youtube|KLFiPj7XJms}}{{#ev:youtube|rtmSpk0vANo}}
+<mediaplayer>http://www.youtube.com/watch?v=rtmSpk0vANo</mediaplayer>
-</div>
 == Summary ==
 As can be seen from the  [[Media:FullScreenMidlet.zip|Worked Example]] , it is possible to use a framework to avoid duplicating code when working with {{Icode|MapComponents}}.  The problem of small screen sizes may be overcome to a certain extent through using the full screen mode. It should be noted however that each {{Icode|MapComponent}} will use up valuable screen real estate, and their use should be kept to a minimum to avoid clutter on the screen.

@@ Line 279: / Line 279: @@
 *  [http://www.developer.nokia.com/Develop/Maps/Maps_API_for_Java_ME/ Map API for Java ME]
 * [[Implementing a custom MapUrlProvider overlay with Maps API for Java ME|Map Overlay Example]]
 * [https://projects.developer.nokia.com/mapcomponentdemos Map Components]
 }}
@@ Line 300: / Line 301: @@
 }}
-== Summary ==
+== Extending the UI :  Adding Highlighting etc.  ==
-As can be seen from the  [[Media:FullScreenMidlet.zip|Worked Example]] and the videos below, it is possible to use a framework to avoid duplicating code when working with {{Icode|MapComponents}}.  The problem of small screen sizes may be overcome to a certain extent through using the full screen mode. It should be noted however that each {{Icode|MapComponent}} will use up valuable screen real estate, and their use should be kept to a minimum to avoid clutter on the screen. The code behind this example and other custom map components can be found in the [https://projects.developer.nokia.com/mapcomponentdemos Map Components] project.
+The coded example places a simple touchable area on screen. To fully comply with the  Full Touch UI Guidelines for [http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-components/buttons.html buttons], the example must be extended to add highlighting and for actions to be cancelable if the touch is dragged outside of the hit area of the button.
 <div align="left">
@@ Line 309: / Line 311: @@
 {{#ev:youtube|KLFiPj7XJms}}{{#ev:youtube|rtmSpk0vANo}}
 </div>