INTRODUCTION TO FULL TOUCH UIFOR SERIES 40Andreas Jakl [@mopius]Technology Wizard, Nokia 1     © 2012 Nokia Introduction t...
CONTENTS• Introduction     – Platforms & Versions• New features for developers     –   UI     –   LWUIT     –   Text Input...
WHAT’S NEW?              Productivity Tools                                                                    Documentati...
PLATFORMSAPI Differences: bit.ly/S40Apis5th Ed., FP1    6th Ed., Lite            6th Ed.               6th Ed., FP1       ...
DP 2.0 – NEW APIS         Full touch                                        Virtual                                 Multip...
NOKIA IDE FOR JAVA ME(NetBeans is supported as well)         Integrated SDK + Toolchain                                   ...
USER INTERFACE7   © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
UX GUIDELINES• Design    – Layouts    – Interaction patterns    – Icon templates    – developer.nokia.com/Design/8      © ...
FULL TOUCH UI                                                                                     View title              ...
ICONCOMMAND                                                                                                         Action...
Example: JavaTouchUSING: ICONCOMMANDpublic class JavaFTMidlet extends MIDlet implements CommandListener {    private Form ...
CATEGORYBAR• View switching     – One element always highlighted     – Mandatory & automatic back button• Icons     – Max:...
CATEGORYBAR• Back     – Traditional back Command in Form          – Visible w/o CategoryBar                               ...
Example: JavaTouchUSING: CATEGORYBAR     public class JavaFTMidlet extends MIDlet implements CommandListener, ElementListe...
Example: JavaTouchORIENTATION• Portrait (default)     – Nokia-MIDlet-App-Orientation:       portrait• Landscape: landscape...
Example: JavaTouchORIENTATION     – Adapt content orientation       to phone / display       public void displayOrientatio...
Example: PaintAppSTATUS ZONE• Show status zone in full screen app     public class MainCanvas extends Canvas     {        ...
LWUIT• Stylable UI Components     – From Oracle: lwuit.java.net• Optimized for Nokia     – Native look & feel     – Uses N...
TEXT INPUT19   © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
VIRTUAL KEYBOARD• Use on-screen keyboard on Canvas      – Creates keyPressed() callbacks                                  ...
Example: PaintAppUSING: VIRTUAL KEYBOARD• Show keyboard     CustomKeyboardControl vkbControl = VirtualKeyboard.getCustomKe...
Example: PaintAppUSING: VIRTUAL KEYBOARD     public class MainCanvas extends Canvas implements KeyboardVisibilityListener ...
TEXTEDITOR• Text entry on a Canvas (custom UI)      – MIDP: only fullscreen TextBox      – Create own editor – not easy!• ...
Example: CanvasTextEditorUSING: TEXT EDITOR• Create text editor with Canvas as parent     // Create the text editor: no in...
Example: CanvasTextEditorUSING: TEXT EDITOR• Show & hide text editor in the Canvas     protected void pointerPressed(int x...
Example: CanvasTextEditorUSING: TEXT EDITOR• Draw text when TextEditor not active / visible     protected void paint(Graph...
TOUCH INPUT27   © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
Example: KeyAnalyzerAUTOMATIC KEY SIMULATION• No touch handling in Canvas?     – Drag gestures      automatically trigger ...
TOUCH GESTURES• Use in: Canvas-/CustomItem-based classes      – Optional: combine with Frame Animator API (kinetic scrolli...
Example: PaintAppUSING: GESTURES• Register as gesture listener      public class MainCanvas extends Canvas implements Gest...
Example: PaintAppUSING: GESTURES• Handling gesturespublic void gestureAction(Object container, GestureInteractiveZone gest...
MULTIPOINT TOUCH• Single touch     – Canvas.pointerPressed() part of MIDP     – Only tracks 1st touch point• Multipoint To...
Example: PaintAppUSING: MULTIPOINT TOUCH• Number of touch points                                                          ...
Example: PaintAppUSING: MULTIPOINT TOUCH• Handling touch events     public void pointersChanged(int[] pointerIds) {       ...
TOUCH SIMULATION• Record multipoint touch gestures     – One touchpoint at a time• Replay35      © 2012 Nokia Introduction...
SENSORS36   © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
SENSORS• JSR 256 Sensor API     – Generic: designed also for temperature, blood pressure, etc.     – Also available on Sym...
FINDING SENSORS          Application                      SensorManager                           SensorInfo       Connect...
SENSOR VALUES• Modes     – Synchronous        – Poll sensor        – Example: accelerometer in game loop     – Asynchronou...
Example: MovingBallUSING: SENSORS• Establish sensor connection     // Find all acceleration sensors, the contextType is le...
LOCATION41   © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
Example: mapExampleCELL ID POSITIONING• Approximate location using cell ID      – Online: ~ 3-10 kB per request• Specifica...
NOKIA MAPS API•    Maps•    Search•    (Reverse) Geocoding•    Routing•    Sharing: convert to URL•    KML         www.dev...
ADD MAPS LIBRARY TO PROJECTS• NetBeans     – Project properties → Build       Libraries and Resources → Add       Library ...
Example: mapExampleUSING: MAPS     public class MapMidlet extends MIDlet implements GeocodeRequestListener {         priva...
MIXED STUFF46   © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
OTHER NEW FULL TOUCH APIS• Font      – Support for light font style• Locale      – Adapt to changes of phone language at r...
COMPATIBILITY48   © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
COMPATIBILITY?• Source & binary compatible    – xx years old Java ME apps run on      full touch phones!• Downwards compat...
PORTING TO TOUCH• All Java ME apps should run on full touch phone      – High-Level UI           –   Adapts automatically ...
Example: RpsGamePORTING                                                                              Touch and typeNon-tou...
DYNAMIC API USAGE• Single code base for different phones     – Code that uses new APIs         – Externalize to extra clas...
Example: PaintAppEXAMPLE: PINCH GESTURE• Gesture API     – Available in Touch & Type     – Full Touch adds Pinch gesture  ...
EXAMPLE: OPTIONAL MULTITOUCH                                                                                              ...
Example: PaintAppEXAMPLE: API AVAILABILITY• No System property for the API version?     – Check Class availability     – C...
MONETIZATION56   © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
SERIES 40 – APP DOWNLOADS     Millions   1.400                1.200                1.000                 800              ...
IN APP PURCHASING• Phones     – Nokia Asha 200, 201, 202, 203     – Nokia Asha 302, 303, 305, 306, 311     – Nokia 110, 11...
IN APP ADVERTISING• 3rd party APIs• Recommended     – inneractive: www.inner-active.com/Nokia      Java ME + Qt + WP     –...
RESOURCES & TIPS60   © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
TIPS & SDK RELEASE NOTES• Emulator – Recommended     – Only 32 bit JRE!• NetBeans 7.x experience     – Don’t choose Featur...
TIPS• Reference problems when importing apps      – Project Properties → Platform →        Nokia SDK 2.0 for Java      – S...
TIPS• App not deployed?     – Make sure Nokia Suite has connection to phone     – Check if deployment method set in projec...
CODE EXAMPLES• Nokia IDE      – Nokia Hub → Nokia Series 40        Code Examples• Online      – bit.ly/JavaMeExamples• Emu...
REMOTE DEVICE ACCESS• Free for Nokia Developer users• Deploy & Test apps     – www.developer.nokia.com/Devices/      Remot...
GET STARTED• Overview     – www.developer.nokia.com/Develop/Java/Getting_started/• Downloads     – SDK: www.developer.noki...
EXERCISES67   © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
Monkey3D StartMONKEYTOUCH 3D• Add Touch support to the Monkey3D app     – Register for DRAG and PINCH gestures     – Rotat...
Monkey3D SolutionSOLUTION: MONKEYTOUCH     Register member in ViewerCanvas     /** Handle pinch and drag gestures. */     ...
Monkey3D SolutionSOLUTION: MONKEYTOUCH     Implement gesture call-back method public void gestureAction(Object container, ...
Monkey3D StartMONKEYTOUCH 3D #2• Add automatic screen orientation• Show status zone71    © 2012 Nokia Introduction to Full...
Monkey3D SolutionSOLUTION: MONKEYTOUCH2     Add attribute to application descriptor     Nokia-MIDlet-App-Orientation: manu...
Monkey3D SolutionSOLUTION: MONKEYTOUCH2     Implement orientation call-back method     public void displayOrientationChang...
CarRace StartCARRACE 3D• Add acceleration sensor control     – Find acceleration sensor & open connection in       RaceCan...
CarRace SolutionSOLUTION: CARRACE 3D     Register member in RaceCanvas     /** Acceleration sensor connection. */     priv...
CarRace SolutionSOLUTION: CARRACE 3D     Process sensor data and apply to the car     private void processSensors()     { ...
Example Apps                                                                     Download all code examples               ...
Upcoming SlideShare
Loading in...5
×

Introduction to Nokia Asha Touch UI

14,366

Published on

This webinar opens by showing you the new features of Series 40 platform. You will discover new tools that will help you to develop applications better and faster. Your apps will get the most out of the new Series 40 touch phones when you learn how to create a UI that perfectly fits to the full-touch interaction style. We’ll show you powerful new APIs to handle sensors, multipoint touch and virtual on-screen keyboards. If you already have an existing Java ME app, we will explain how to bring it to the latest generation of phones. We’ll end with an overview of resources available so you can learn more.

Published in: Technology, Spiritual
3 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
14,366
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
361
Comments
3
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to Nokia Asha Touch UI

  1. 1. INTRODUCTION TO FULL TOUCH UIFOR SERIES 40Andreas Jakl [@mopius]Technology Wizard, Nokia 1 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  2. 2. CONTENTS• Introduction – Platforms & Versions• New features for developers – UI – LWUIT – Text Input – Touch Input – Sensors – Location & Maps• App Compatibility• Publishing & Monetization• Resources 2 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  3. 3. WHAT’S NEW? Productivity Tools Documentation • Nokia SDK 2.0 for Java • Series 40 Porting Library • Nokia IDE for Java ME for Android Developers (Eclipse) • Lightweight User Interface Toolkit (LWUIT) • Maps API for Java ME • Nokia Web Tools 2.0 • Remote Device Access3 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  4. 4. PLATFORMSAPI Differences: bit.ly/S40Apis5th Ed., FP1 6th Ed., Lite 6th Ed. 6th Ed., FP1 DP 1.0 DP 1.1 Developer Platform 2.0 4 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  5. 5. DP 2.0 – NEW APIS Full touch Virtual Multipoint UI Keyboard Touch APIs Gestures: Sensors & ... Pinch Orientation5 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  6. 6. NOKIA IDE FOR JAVA ME(NetBeans is supported as well) Integrated SDK + Toolchain JAD Editor App Templates Device SDK Manager 6 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  7. 7. USER INTERFACE7 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  8. 8. UX GUIDELINES• Design – Layouts – Interaction patterns – Icon templates – developer.nokia.com/Design/8 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  9. 9. FULL TOUCH UI View title Status bar Header bar• Screen Action button 2 Action button 1 (options) – 240 x 400 px – 3:5 aspect ratio – Previous QVGA = 3:4• New Main content area – Action buttons – Category bar – Back button Navigation bar Category bar Back button9 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  10. 10. ICONCOMMAND Action button 1• Extends LCDUI Command class – Adds: Icon – Built-in system icon – Own icon (unselected, [selected]) – Back button: always default icon – Not possible to override! Category bar10 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  11. 11. Example: JavaTouchUSING: ICONCOMMANDpublic class JavaFTMidlet extends MIDlet implements CommandListener { private Form frmMain; private IconCommand cmdOk; Command mapped public JavaFTMidlet() { to action button 1 frmMain = new Form("Main"); cmdOk = new IconCommand("Ok", Command.OK, 1, IconCommand.ICON_OK); frmMain.addCommand(cmdOk); } Few predefined icons are available public void startApp() { frmMain.setCommandListener(this); Display.getDisplay(this).setCurrent(frmMain); } public void commandAction(Command c, Displayable d) { if (c == cmdOk) { /* Ok Command */ } }}11 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  12. 12. CATEGORYBAR• View switching – One element always highlighted – Mandatory & automatic back button• Icons – Max: 15 icons (+ back) 44 x 44 icon – Visible: portrait – 4, landscape – 6 – Size: 44 x 44 edge-to-edge. Make actual icon smaller!12 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  13. 13. CATEGORYBAR• Back – Traditional back Command in Form – Visible w/o CategoryBar Back command, CategoryBar visible – CommandListener Back command, – CategoryBar CategoryBar invisible – Back included by default – ElementListener.BACK – → back always visible if using CategoryBar: no back cmd needed13 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  14. 14. Example: JavaTouchUSING: CATEGORYBAR public class JavaFTMidlet extends MIDlet implements CommandListener, ElementListener { private IconCommand cmdHome; private IconCommand cmdInfo; Using same icon for ElementListener for public JavaFTMidlet() { highlighted state CategoryBar try { // Load icon images Image imgHome = Image.createImage("/home.png"); cmdHome = new IconCommand("Home", imgHome, imgHome, Command.SCREEN, 3); Image imgInfo = Image.createImage("/info.png"); cmdInfo = new IconCommand("Info", imgInfo, imgInfo, Command.SCREEN, 3); } catch (IOException ex) { } IconCommand[] iconCommands = {cmdHome, cmdInfo}; // Put commands into array CategoryBar categoryBar = new CategoryBar(iconCommands, true); categoryBar.setVisibility(true); // Make visible (default: invisible) categoryBar.setElementListener(this); // For notifyElementSelected() callback } public void notifyElementSelected(CategoryBar cb, int i) { Alert alert = new Alert("Element"); if (i == ElementListener.BACK) { // Default back element from category bar alert.setString("Back element"); // i == -1 Element 0 selected } else { by default alert.setString("Element: " + i); // Element ID: 0, 1, 2, ... starting left } display.setCurrent(alert); }14 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  15. 15. Example: JavaTouchORIENTATION• Portrait (default) – Nokia-MIDlet-App-Orientation: portrait• Landscape: landscape• Enable orientation changes – manual – Register OrientationListener, choose how to respond public class JavaFTMidlet extends MIDlet implements OrientationListener { public void startApp() { Orientation.addOrientationListener(this); }15 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  16. 16. Example: JavaTouchORIENTATION – Adapt content orientation to phone / display public void displayOrientationChanged(int newDisplayOrientation) { switch (newDisplayOrientation) { case Orientation.ORIENTATION_PORTRAIT: case Orientation.ORIENTATION_PORTRAIT_180: Orientation.setAppOrientation(Orientation.ORIENTATION_PORTRAIT); break; case Orientation.ORIENTATION_LANDSCAPE: case Orientation.ORIENTATION_LANDSCAPE_180: Orientation.setAppOrientation(Orientation.ORIENTATION_LANDSCAPE); break; } } – Calls sizeChanged() on current Displayable16 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  17. 17. Example: PaintAppSTATUS ZONE• Show status zone in full screen app public class MainCanvas extends Canvas { public MainCanvas() { // Activate full screen mode setFullScreenMode(true); // Make status bar visible LCDUIUtil.setObjectTrait(this, "nokia.ui.canvas.status_zone", Boolean.TRUE); } }17 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  18. 18. LWUIT• Stylable UI Components – From Oracle: lwuit.java.net• Optimized for Nokia – Native look & feel – Uses Nokia APIs for functionality – Better performance – projects.developer.nokia.com/LWUIT_for_Series_4018 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  19. 19. TEXT INPUT19 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  20. 20. VIRTUAL KEYBOARD• Use on-screen keyboard on Canvas – Creates keyPressed() callbacks VKB_MODE_DEFAULT – Get VKB height to avoid content overlap• Limitations VKB_MODE_NUMERIC – Portrait mode only (currently) – Always returns numbers, no letters – e.g., 2x “abc” key → 2x keycode 50 (= ‘2’), not 1x 96 (= ‘b’) – → Similar to ITU-T keypad VKB_MODE_ALPHA_LOWER_CASE 20 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  21. 21. Example: PaintAppUSING: VIRTUAL KEYBOARD• Show keyboard CustomKeyboardControl vkbControl = VirtualKeyboard.getCustomKeyboardControl(); vkbControl.launch(VirtualKeyboard.VKB_TYPE_ITUT, VirtualKeyboard.VKB_MODE_ALPHA_LOWER_CASE);• Hide keyboard vkbControl.dismiss();21 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  22. 22. Example: PaintAppUSING: VIRTUAL KEYBOARD public class MainCanvas extends Canvas implements KeyboardVisibilityListener { visibleHeight == 200 private int screenHeight; private int visibleHeight; public MainCanvas() { setFullScreenMode(true); screenHeight = getHeight(); // Original screen height == 400 visibleHeight = screenHeight; // No VKB visible -> == 400 VirtualKeyboard.setVisibilityListener(this); } visibleHeight == 400 public void showNotify(int keyboardCategory) { // VKB now visible -> visibleHeight == 200 visibleHeight = screenHeight - VirtualKeyboard.getHeight(); } public void hideNotify(int keyboardCategory) { // VKB now hidden -> visibleHeight == 400 visibleHeight = screenHeight; } }22 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  23. 23. TEXTEDITOR• Text entry on a Canvas (custom UI) – MIDP: only fullscreen TextBox – Create own editor – not easy!• Nokia TextEditor class – Since Java Runtime 1.0.0 – Define position, look & feel – Full VKB support – Input modes: similar to TextField (email, numeric, pwd, etc.) – Landscape & portrait – Listener available to check input, control caret movement, etc. 23 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  24. 24. Example: CanvasTextEditorUSING: TEXT EDITOR• Create text editor with Canvas as parent // Create the text editor: no input constraints, 20 chars max length textEditor = TextEditor.createTextEditor(text, 20, TextField.ANY, textBoxWidth, textBoxHeight); textEditor.setForegroundColor(0xFFFFFFFF); // Text color: white textEditor.setBackgroundColor(0x800092c2); // Transparent blue background (Alpha = 0x80) textEditor.setParent(this); // Canvas to draw on textEditor.setPosition(textBoxX, textBoxY); // x/y coordinates textEditor.setVisible(true); // By default invisible textEditor.setFocus(true); // Deliver keys to textEditor, not to Canvas24 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  25. 25. Example: CanvasTextEditorUSING: TEXT EDITOR• Show & hide text editor in the Canvas protected void pointerPressed(int x, int y) { if (x >= textBoxX && x < textBoxX + textBoxWidth && y >= textBoxY && y < textBoxY + textBoxHeight) { // Click in the box, show the text editor: no input constraints, 20 chars max length textEditor = TextEditor.createTextEditor(text, 20, TextField.ANY, textBoxWidth, textBoxHeight); textEditor.setForegroundColor(0xFFFFFFFF); // Text color: white textEditor.setBackgroundColor(0x800092c2); // Transparent blue background (Alpha = 0x80) textEditor.setParent(this); // Canvas to draw on textEditor.setPosition(textBoxX, textBoxY); // x/y coordinates textEditor.setVisible(true); // By default invisible textEditor.setFocus(true); // Deliver keys to textEditor, not to Canvas textEditor.setCaret(text.length()); // Caret at end of text } else if (textEditor != null) { // Click outside of the box, defocus the text editor text = textEditor.getContent(); // Copy text contents textEditor.setParent(null); textEditor = null; } repaint(); }25 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  26. 26. Example: CanvasTextEditorUSING: TEXT EDITOR• Draw text when TextEditor not active / visible protected void paint(Graphics g) { if (textEditor == null) { g.setColor(0xFFFFFF); g.drawRect(textBoxX - 2, textBoxY - 2, textBoxWidth, textBoxHeight); g.drawString(text, textBoxX, textBoxY, Graphics.TOP | Graphics.LEFT); } }26 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  27. 27. TOUCH INPUT27 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  28. 28. Example: KeyAnalyzerAUTOMATIC KEY SIMULATION• No touch handling in Canvas? – Drag gestures automatically trigger simulated key events – Up, Down, Left, Right – “open keypad” command added to menu28 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  29. 29. TOUCH GESTURES• Use in: Canvas-/CustomItem-based classes – Optional: combine with Frame Animator API (kinetic scrolling)• Available – Tap: touch + release – Long Press (& repeated): touch + hold – Drag: touch + drag – Drop: touch + drag + touch down (“stop”) + release – Flick: touch + drag + release while dragging – Pinch (new!): 2x touch + 2x drag + 2x touch down (“stop”) + 2x release 29 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  30. 30. Example: PaintAppUSING: GESTURES• Register as gesture listener public class MainCanvas extends Canvas implements GestureListener { private int curPinchDistance = -1; public MainCanvas() { // Set this as container (gesture source) and listener GestureRegistrationManager.setListener(this, this); // Register for pinch events in the whole canvas area gestureZone = new GestureInteractiveZone(GestureInteractiveZone.GESTURE_PINCH); GestureRegistrationManager.register(this, gestureZone); } – Zone: reacts to 1+ specified gestures – Whole screen or rectangular area – Overlap possible – Received events → GestureListener 30 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  31. 31. Example: PaintAppUSING: GESTURES• Handling gesturespublic void gestureAction(Object container, GestureInteractiveZone gestureInteractiveZone, GestureEvent gestureEvent) { int eventType = gestureEvent.getType(); switch (eventType) { case GestureInteractiveZone.GESTURE_PINCH: // Pinch detected curPinchDistance = gestureEvent.getPinchDistanceCurrent(); break; case GestureInteractiveZone.GESTURE_RECOGNITION_START: /* ... */ break; case GestureInteractiveZone.GESTURE_RECOGNITION_END: /* ... */ break; }} – Executed in UI thread – Lengthy operations (scaling image, etc.) → own thread! 31 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  32. 32. MULTIPOINT TOUCH• Single touch – Canvas.pointerPressed() part of MIDP – Only tracks 1st touch point• Multipoint Touch – Tracks multiple touch points – But: use Gesture API if only interested in pinch – Each associated with unique ID, x, y and state – Call-back for touch changes, but status available any time – Use in: Canvas-/CustomItem-based classes32 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  33. 33. Example: PaintAppUSING: MULTIPOINT TOUCH• Number of touch points == 2 on Nokia 305 / 306 MultipointTouch mpt = MultipointTouch.getInstance(); 5 on Nokia 311 int numTouchPoints = MultipointTouch.getMaxPointers(); – Limited accuracy of simultaneous touch points on a resistive screen (Nokia 305) → no on-screen joystick & shoot button• Register: touch point listener public class MainCanvas extends Canvas implements MultipointTouchListener { public MainCanvas() { // ... mpt.addMultipointTouchListener(this); }33 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  34. 34. Example: PaintAppUSING: MULTIPOINT TOUCH• Handling touch events public void pointersChanged(int[] pointerIds) { for(int i=0; i<pointerIds.length; i++) { // Loop through the changed touch points { int pointerId = pointerIds[i]; // Get the touch point ID int state = MultipointTouch.getState(pointerId); // Get the touch point state // Get the touch point x and y coordinates int x = MultipointTouch.getX(pointerId); int y = MultipointTouch.getY(pointerId); // Handle the UI update based on the touch point state, ID and coordinates switch(state) { case MultipointTouch.POINTER_PRESSED: // A new finger was pressed against the screen drawTouch(pointerId, x, y); break; case MultipointTouch.POINTER_DRAGGED: // A pressed finger was dragged over the screen drawTouch(pointerId, x, y); break; case MultipointTouch.POINTER_RELEASED: // A pressed finger was lifted from the screen break; } } }34 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  35. 35. TOUCH SIMULATION• Record multipoint touch gestures – One touchpoint at a time• Replay35 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  36. 36. SENSORS36 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  37. 37. SENSORS• JSR 256 Sensor API – Generic: designed also for temperature, blood pressure, etc. – Also available on Symbian• Currently supported – Battery Charge: 0 .. 100, charge percentage – Network Field Intensity: 0 .. 100, signal strength – Charger State: 0 .. 1, charger connected – Acceleration: –2g .. +2g, x / y / z axis – Double Tap: 1 .. 63, phone sides – Orientation: 0 .. 6, phone orientation37 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  38. 38. FINDING SENSORS Application SensorManager SensorInfo Connector findSensors(quantity, contextType) return SensorInfo[] getUrl() return URL Connector.open(URL) return SensorConnection38 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  39. 39. SENSOR VALUES• Modes – Synchronous – Poll sensor – Example: accelerometer in game loop – Asynchronous – DataListener callbacks – Example: phone charger plugged in39 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  40. 40. Example: MovingBallUSING: SENSORS• Establish sensor connection // Find all acceleration sensors, the contextType is left undefined SensorInfo[] sensorInfos = SensorManager.findSensors("acceleration", null); // Find an acceleration sensor that returns double values for (int i = 0; i < sensorInfos.length; i++) { if (sensorInfos[i].getChannelInfos()[0].getDataType() == ChannelInfo.TYPE_DOUBLE) { accSensor = (SensorConnection) Connector.open(sensorInfos[i].getUrl()); } }• Check data in game loop // Use 1 as a buffer size to get exactly 1 value for each axis Data[] data = accSensor.getData(1); speedX = -data[0].getDoubleValues()[0]; // data[0] => x-axis speedY = data[1].getDoubleValues()[0]; // data[1] => y-axis40 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  41. 41. LOCATION41 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  42. 42. Example: mapExampleCELL ID POSITIONING• Approximate location using cell ID – Online: ~ 3-10 kB per request• Specifically using cell ID positioning – Request generic LocationProvider through Nokia’s LocationUtil – No continuous updates (Listener) → 1-time, synchronous requests – Run in own thread – Raw cell ID: com.nokia.mid.cellid system property *//Specify the retrieval method to Online/Cell-IDint[] methods = {(Location.MTA_ASSISTED | Location.MTE_CELLID | Location.MTE_SHORTRANGE | Location.MTY_NETWORKBASED)};// Retrieve the location providerLocationProvider provider = LocationUtil.getLocationProvider(methods, null);// 50 seconds time-outLocation loc = provider.getLocation(50000);// Get longitude and latitudeQualifiedCoordinates coordinates = loc.getQualifiedCoordinates(); 42 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl * Series 40 5th Edition FP1 +: Manufacturer & Operator Domains. Java Runtime 1.0.0+: all domains
  43. 43. NOKIA MAPS API• Maps• Search• (Reverse) Geocoding• Routing• Sharing: convert to URL• KML www.developer.nokia.com/Develop/Maps/Maps_API_for_Java_ME/ Note: always requires AppID and Token: api.developer.nokia.com/ovi-api/ui/registration 43 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  44. 44. ADD MAPS LIBRARY TO PROJECTS• NetBeans – Project properties → Build Libraries and Resources → Add Library First time: Edit → New Library → Add JAR/Folder: C:NokiadevicesNokia_SDK 150 kB _2_0_Javapluginsmaps apibinMaps_API.jar (also add Javadoc)44 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  45. 45. Example: mapExampleUSING: MAPS public class MapMidlet extends MIDlet implements GeocodeRequestListener { private MapCanvas mapCanvas; public void startApp() { // Set registered application ID and token ApplicationContext.getInstance().setAppID("xxx"); ApplicationContext.getInstance().setToken("xxx"); // Create new Nokia Maps canvas Display display = Display.getDisplay(this); mapCanvas = new MapCanvas(display) { public void onMapUpdateError(...) {} public void onMapContentComplete() {} }; // Show map on the screen display.setCurrent(mapCanvas); } // Geocode an address } GeocodeRequest geocodeRequest = SearchFactory.getInstance().createGeocodeRequest(); geocodeRequest.geocode("Vienna, Austria", null, this); // ... center map on the latitude and longitude public void onRequestComplete(GeocodeRequest request, com.nokia.maps.common.Location[] locations) { mapCanvas.getMapDisplay().setCenter(locations[0].getDisplayPosition()); }45 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  46. 46. MIXED STUFF46 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  47. 47. OTHER NEW FULL TOUCH APIS• Font – Support for light font style• Locale – Adapt to changes of phone language at runtime• PopupList – Contextual menus• Video Playback – Stop & resume video playback (especially when sent to background)• New system properties – Query new API versions, tacticle support, screensaver prevention support, etc. 47 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  48. 48. COMPATIBILITY48 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  49. 49. COMPATIBILITY?• Source & binary compatible – xx years old Java ME apps run on full touch phones!• Downwards compatibility – Check API support of target phones – Lowest common denominator: → Nokia Java SDK 2.0 compiled app runs on old phones49 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  50. 50. PORTING TO TOUCH• All Java ME apps should run on full touch phone – High-Level UI – Adapts automatically – Components include touch-support – Check layout – New UI components (CategoryBar, etc.) don’t have to be used – Low-Level UI – New screen size & aspect ratio (but: most Java apps already flexible here) – Touch supported in Java ME since many years – Basic key simulation with drag gestures for non-touch apps• New APIs for Multitouch, Pinch, CategoryBar & Sensors – Only work on FT phones – Careful app design even keeps downwards compatibility 50 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  51. 51. Example: RpsGamePORTING Touch and typeNon-touch app with high-level UI (LCDUI):Automatically adapts to touch Non-touch51 Full touch © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  52. 52. DYNAMIC API USAGE• Single code base for different phones – Code that uses new APIs – Externalize to extra class – Check API support at runtime – Instantiate class if supported – Different methods for checking available52 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  53. 53. Example: PaintAppEXAMPLE: PINCH GESTURE• Gesture API – Available in Touch & Type – Full Touch adds Pinch gesture – Query support at runtime // Pinch gesture if (GestureInteractiveZone.isSupported(GestureInteractiveZone.GESTURE_PINCH)) { // Gesture is supported - register class as listener GestureRegistrationManager.setListener(this, this); // Register for pinch gesture gestureZone = new GestureInteractiveZone(GestureInteractiveZone.GESTURE_PINCH); GestureRegistrationManager.register(this, gestureZone); }53 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  54. 54. EXAMPLE: OPTIONAL MULTITOUCH Example: PaintApp• Encapsulate API using code to separate class public class MultitouchManager implements MultipointTouchListener { public MultitouchManager(MainCanvas canvas) { MultipointTouch mpt = MultipointTouch.getInstance(); Hint: only handle mpt.addMultipointTouchListener(this); Canvas.pointerPressed() } on single touch phones public void pointersChanged(int[] pointerIds) { /* ... */ } protected void pointerPressed(int x, int y) { } if (!useMultitouch) { // Handle touch event // on single-touch phone• Check support and instantiate on demand } } if (System.getProperty("com.nokia.mid.ui.multipointtouch.version") != null) { // API is supported: Can implement multipoint touch functionality multiManager = new MultitouchManager(this); In MainCanvas class useMultitouch = true; (extends Canvas) } 54 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  55. 55. Example: PaintAppEXAMPLE: API AVAILABILITY• No System property for the API version? – Check Class availability – ClassNotFoundException? → API not supported // Virtual keyboard support try { // Check if class is available Class.forName("com.nokia.mid.ui.VirtualKeyboard"); vkbManager = new VkbManager(this); useVkb = true; } catch (ClassNotFoundException e) { // Class not available: running app on Java Runtime < 2.0.0 phone. // -> no Virtual Keyboard API support. useVkb = false; } catch (Exception e) { }55 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  56. 56. MONETIZATION56 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  57. 57. SERIES 40 – APP DOWNLOADS Millions 1.400 1.200 1.000 800 600 400 200 0 April 2010 April 2011 April 2012 Mobile Phones57 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  58. 58. IN APP PURCHASING• Phones – Nokia Asha 200, 201, 202, 203 – Nokia Asha 302, 303, 305, 306, 311 – Nokia 110, 111, 112• Simulate with emulator• Tutorial videos – http://www.developer.nokia.com/ Distribute/In-app_purchasing/58 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  59. 59. IN APP ADVERTISING• 3rd party APIs• Recommended – inneractive: www.inner-active.com/Nokia Java ME + Qt + WP – vserv.mobi: vserv.mobi/ Java ME + WP59 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  60. 60. RESOURCES & TIPS60 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  61. 61. TIPS & SDK RELEASE NOTES• Emulator – Recommended – Only 32 bit JRE!• NetBeans 7.x experience – Don’t choose Features on Demand – Install Java SE + EE + ME• Run NetBeans as Administrator once after Nokia Java SDK install – Integrates SDK docs61 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  62. 62. TIPS• Reference problems when importing apps – Project Properties → Platform → Nokia SDK 2.0 for Java – Select (at least) all required optional packages• Emulator – Keep emulator running all the time – App doesn’t launch on first deployment after emulator boot → click “Run” (F6) again – Error “Supportive File – Nothing to display” → click “Run” (F6) again 62 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  63. 63. TIPS• App not deployed? – Make sure Nokia Suite has connection to phone – Check if deployment method set in project properties! No deployment done Deployment successful (not selected in project properties)63 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  64. 64. CODE EXAMPLES• Nokia IDE – Nokia Hub → Nokia Series 40 Code Examples• Online – bit.ly/JavaMeExamples• Emulator – Help → MIDlet Samples• Maps & LWUIT – C:NokiadevicesNokia_SDK_2_0_Javaplugins 64 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  65. 65. REMOTE DEVICE ACCESS• Free for Nokia Developer users• Deploy & Test apps – www.developer.nokia.com/Devices/ Remote_device_access/65 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  66. 66. GET STARTED• Overview – www.developer.nokia.com/Develop/Java/Getting_started/• Downloads – SDK: www.developer.nokia.com/Develop/Java/ – LWUIT: projects.developer.nokia.com/LWUIT_for_Series_40• Guides – Design & User Experience – Porting from Android – www.developer.nokia.com/Develop/Java/Documentation/ – Training Videos: www.developer.nokia.com/Develop/Java/Learning/ – Code Examples: www.developer.nokia.com/Develop/Java/Code_examples/66 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  67. 67. EXERCISES67 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  68. 68. Monkey3D StartMONKEYTOUCH 3D• Add Touch support to the Monkey3D app – Register for DRAG and PINCH gestures – Rotate x / y axis on drag – Call: rotateObject(float factor, float x, float y, float z) – x / y / z: fraction of rotation on each axis Rotate x-axis: x = 1.0f, y = 0.0f, z = 0.0f Rotate y-axis: x = 0.0f, y = 1.0f, z = 0.0f – Zoom in / out on pinch – Call: cameraZoom(float zoomFactor)68 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  69. 69. Monkey3D SolutionSOLUTION: MONKEYTOUCH Register member in ViewerCanvas /** Handle pinch and drag gestures. */ private GestureInteractiveZone gestureZone; Setup gesture listener for drag & pinch GestureRegistrationManager.setListener(this, this); gestureZone = new GestureInteractiveZone(GestureInteractiveZone.GESTURE_DRAG | GestureInteractiveZone.GESTURE_PINCH); GestureRegistrationManager.register(this, gestureZone); Implement GestureListener in ViewerCanvas public class ViewerCanvas extends GameCanvas implements CommandListener, Runnable, GestureListener69 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  70. 70. Monkey3D SolutionSOLUTION: MONKEYTOUCH Implement gesture call-back method public void gestureAction(Object container, GestureInteractiveZone gestureInteractiveZone, GestureEvent gestureEvent) { int eventType = gestureEvent.getType(); switch (eventType) { case GestureInteractiveZone.GESTURE_PINCH: cameraZoom(-gestureEvent.getPinchDistanceChange() / 5.0f); break; case GestureInteractiveZone.GESTURE_DRAG: rotateObject((float)gestureEvent.getDragDistanceX(), 0.0f, 0.0f, 1.0f); rotateObject((float)gestureEvent.getDragDistanceY(), 0.0f, 1.0f, 0.0f); break; } }70 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  71. 71. Monkey3D StartMONKEYTOUCH 3D #2• Add automatic screen orientation• Show status zone71 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  72. 72. Monkey3D SolutionSOLUTION: MONKEYTOUCH2 Add attribute to application descriptor Nokia-MIDlet-App-Orientation: manual Implement OrientationListener in ViewerCanvas public class ViewerCanvas extends GameCanvas implements CommandListener, Runnable, GestureListener, OrientationListener Register ViewerCanvas as listener in its constructor // Orientation support Orientation.addOrientationListener(this);72 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  73. 73. Monkey3D SolutionSOLUTION: MONKEYTOUCH2 Implement orientation call-back method public void displayOrientationChanged(int newDisplayOrientation) { // Assign display orientation Orientation.setAppOrientation(newDisplayOrientation); } Override sizeChanged() from Canvas base class Change camera to update aspect ratio protected void sizeChanged(int w, int h) { // Make sure the camera aspect ratio gets adapted cameraZoom(0.0f); } Show status zone in constructor // Show status zone LCDUIUtil.setObjectTrait(this, "nokia.ui.canvas.status_zone", Boolean.TRUE);73 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  74. 74. CarRace StartCARRACE 3D• Add acceleration sensor control – Find acceleration sensor & open connection in RaceCanvas.init() – Add call to new processSensors() in game loop: RaceCanvas.run(), below processKeys() – In processSensors(): [0] axis = speedX, [1] axis = speedY iCar.processAnalogInput((float)speedX, (float)speedY, iTimeScale);74 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  75. 75. CarRace SolutionSOLUTION: CARRACE 3D Register member in RaceCanvas /** Acceleration sensor connection. */ private SensorConnection accSensor; Init sensors after loadBackground() in RaceCanvas.init() // Find all acceleration sensors, the contextType is left undefined SensorInfo[] sensorInfos = SensorManager.findSensors("acceleration", null); if (sensorInfos.length > 0) { // Find an acceleration sensor that returns double values for (int i = 0; i < sensorInfos.length; i++) { if (sensorInfos[i].getChannelInfos()[0].getDataType() == ChannelInfo.TYPE_DOUBLE) { accSensor = (SensorConnection) Connector.open(sensorInfos[i].getUrl()); } } }75 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  76. 76. CarRace SolutionSOLUTION: CARRACE 3D Process sensor data and apply to the car private void processSensors() { try { Data[] data = accSensor.getData(1); // data[0] = x, [1] = y, [2] = z double speedX = data[0].getDoubleValues()[0]; double speedY = data[1].getDoubleValues()[0]; iCar.processAnalogInput((float)speedX, (float)speedY, iTimeScale); } catch (IOException ex) { ex.printStackTrace(); } } Call processSensors() in RaceCanvas.run() after processKeys() // Process sensor values processSensors();76 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  77. 77. Example Apps Download all code examples and the slides!THANK YOU! bit.ly/series40touchWant to learn more?www.developer.nokia.comAndreas Jakl [@mopius]Technology Wizard, Nokia 77 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×