introduction to nokia asha touch ui

Andreas Jakl [@mopius]

Technology Wizard, Nokia

1 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl

INTRODUCTION TO FULL TOUCH UI FOR SERIES 40

CONTENTS

• Introduction

– Platforms & Versions

• New features for developers

– UI

– LWUIT

– Text Input

– Touch Input

– Sensors

– Location & Maps

• App Compatibility

• Publishing & Monetization

• Resources



WHAT’S NEW?

Productivity Tools

• Nokia SDK 2.0 for Java

• Nokia IDE for Java ME (Eclipse)

• Lightweight User Interface Toolkit (LWUIT)

• Maps API for Java ME

• Nokia Web Tools 2.0

• Remote Device Access

Documentation

• Series 40 Porting Library for Android Developers

PLATFORMS


Developer Platform 2.0 DP 1.1 DP 1.0 6th Ed., FP1 6th Ed. 6th Ed., Lite 5th Ed., FP1

API Differences: bit.ly/S40Apis

http://bit.ly/S40Apis

DP 2.0 – NEW APIS


Full touch UI

Virtual Keyboard

Multipoint Touch APIs

Gestures: Pinch

Sensors & Orientation

...

NOKIA IDE FOR JAVA ME


Device SDK Manager

Integrated SDK + Toolchain

App Templates

JAD Editor

(NetBeans is supported as well)


USER INTERFACE

UX GUIDELINES

• Design

– Layouts

– Interaction patterns

– Icon templates

– developer.nokia.com/Design/


http://www.developer.nokia.com/Design/

FULL TOUCH UI

• Screen

– 240 x 400 px

– 3:5 aspect ratio

– Previous QVGA = 3:4

• New

– Action buttons

– Category bar

– Back button


Status bar

Header bar

Action button 1

Main content area

Navigation bar

Back button Category bar

View title

Action button 2 (options)

ICONCOMMAND

• Extends LCDUI Command class

– Adds: Icon

– Built-in system icon

– Own icon (unselected, [selected])

– Back button: always default icon

– Not possible to override!


Action button 1

Category bar


USING: ICONCOMMAND public class JavaFTMidlet extends MIDlet implements CommandListener { private Form frmMain; private IconCommand cmdOk; public JavaFTMidlet() { frmMain = new Form("Main"); cmdOk = new IconCommand("Ok", Command.OK, 1, IconCommand.ICON_OK); frmMain.addCommand(cmdOk); } public void startApp() { frmMain.setCommandListener(this); Display.getDisplay(this).setCurrent(frmMain); } public void commandAction(Command c, Displayable d) { if (c == cmdOk) { /* Ok Command */ } } }

Command mapped to action button 1

Few predefined icons are available

Example: JavaTouch

CATEGORYBAR

• View switching

– One element always highlighted

– Mandatory & automatic back button

• Icons

– Max: 15 icons (+ back)

– Visible: portrait – 4, landscape – 6

– Size: 44 x 44 edge-to-edge. Make actual icon smaller!


44 x 44 icon

CATEGORYBAR

• Back

– Traditional back Command in Form

– Visible w/o CategoryBar

– CommandListener

– CategoryBar

– Back included by default

– ElementListener.BACK

– → back always visible if using CategoryBar: no back cmd needed


Back command, CategoryBar invisible

Back command, CategoryBar visible


USING: CATEGORYBAR public class JavaFTMidlet extends MIDlet implements CommandListener, ElementListener { private IconCommand cmdHome; private IconCommand cmdInfo; public JavaFTMidlet() { 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 } else { alert.setString("Element: " + i); // Element ID: 0, 1, 2, ... starting left } display.setCurrent(alert); }

Element 0 selected by default

Using same icon for highlighted state

ElementListener for CategoryBar

Example: JavaTouch

ORIENTATION

• 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); }

Example: JavaTouch

ORIENTATION

– Adapt content orientation

to phone / display

– Calls sizeChanged() on current Displayable


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; } }

Example: JavaTouch

STATUS 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); } }

Example: PaintApp

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_40

http://lwuit.java.net/

http://projects.developer.nokia.com/LWUIT_for_Series_40


TEXT INPUT

VIRTUAL KEYBOARD

• Use on-screen keyboard on Canvas – Creates keyPressed() callbacks

– Get VKB height to avoid content overlap

• Limitations

– 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

VKB_MODE_DEFAULT

VKB_MODE_NUMERIC

USING: VIRTUAL KEYBOARD

• Show keyboard

• Hide keyboard


CustomKeyboardControl vkbControl = VirtualKeyboard.getCustomKeyboardControl(); vkbControl.launch(VirtualKeyboard.VKB_TYPE_ITUT, VirtualKeyboard.VKB_MODE_ALPHA_LOWER_CASE);

vkbControl.dismiss();

Example: PaintApp

USING: VIRTUAL KEYBOARD


public class MainCanvas extends Canvas implements KeyboardVisibilityListener { 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); } 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; } }

visibleHeight == 200

visibleHeight == 400

Example: PaintApp

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.


USING: 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 Canvas

Example: CanvasTextEditor

USING: 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(); }


USING: 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); } }



TOUCH INPUT

AUTOMATIC KEY SIMULATION

• No touch handling in

Canvas?

– Drag gestures

automatically trigger

simulated key events

– Up, Down, Left, Right

– “open keypad” command

added to menu


Example: KeyAnalyzer

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


USING: GESTURES

• Register as gesture listener

– Zone: reacts to 1+ specified gestures – Whole screen or rectangular area – Overlap possible

– Received events → GestureListener


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); }

Example: PaintApp

USING: GESTURES

• Handling gestures

– Executed in UI thread

– Lengthy operations (scaling image, etc.) → own thread!


public 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; } }

Example: PaintApp

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 classes


USING: MULTIPOINT TOUCH

• Number of touch points

– Limited accuracy of simultaneous touch points on a resistive

screen (Nokia 305) → no on-screen joystick & shoot button

• Register: touch point listener


MultipointTouch mpt = MultipointTouch.getInstance(); int numTouchPoints = MultipointTouch.getMaxPointers();

== 2 on Nokia 305 / 306 5 on Nokia 311

public class MainCanvas extends Canvas implements MultipointTouchListener { public MainCanvas() { // ... mpt.addMultipointTouchListener(this); }

Example: PaintApp

USING: 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; } } }

Example: PaintApp

TOUCH SIMULATION

• Record multipoint touch gestures

– One touchpoint at a time

• Replay



SENSORS

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 orientation


FINDING SENSORS


Application SensorManager SensorInfo Connector

findSensors(quantity, contextType)

return SensorInfo[]

getUrl()

return URL

Connector.open(URL)

return SensorConnection

SENSOR VALUES

• Modes

– Synchronous

– Poll sensor

– Example: accelerometer in game loop

– Asynchronous

– DataListener callbacks

– Example: phone charger plugged in


USING: SENSORS

• Establish sensor connection

• Check data in game loop


// 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()); } }

// 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-axis

Example: MovingBall


LOCATION

CELL 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-ID int[] methods = {(Location.MTA_ASSISTED | Location.MTE_CELLID | Location.MTE_SHORTRANGE | Location.MTY_NETWORKBASED)}; // Retrieve the location provider LocationProvider provider = LocationUtil.getLocationProvider(methods, null); // 50 seconds time-out Location loc = provider.getLocation(50000); // Get longitude and latitude QualifiedCoordinates coordinates = loc.getQualifiedCoordinates();

* Series 40 5th Edition FP1 +: Manufacturer & Operator Domains. Java Runtime 1.0.0+: all domains

Example: mapExample

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


http://www.developer.nokia.com/Develop/Maps/Maps_API_for_Java_ME/

http://www.developer.nokia.com/Develop/Maps/Maps_API_for_Java_ME/

https://api.developer.nokia.com/ovi-api/ui/registration







ADD MAPS LIBRARY TO PROJECTS

• NetBeans

– Project properties → Build

Libraries and Resources → Add

Library

First time: Edit → New Library

→ Add JAR/Folder:

C:\Nokia\devices\Nokia_SDK

_2_0_Java\plugins\maps

api\bin\Maps_API.jar

(also add Javadoc)


150 kB

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); } }


USING: MAPS Example: mapExample

// 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()); }


MIXED STUFF

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.



COMPATIBILITY

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 phones


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


PORTING


No

n-t

ou

ch

To

uch

an

d t

yp

e

Example: RpsGame

Fu

ll t

ou

ch

Non-touch app with high-level UI (LCDUI): Automatically adapts to touch

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 available


EXAMPLE: 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); }

Example: PaintApp

EXAMPLE: OPTIONAL MULTITOUCH

• Encapsulate API using code to separate class

• Check support and instantiate on demand


public class MultitouchManager implements MultipointTouchListener { public MultitouchManager(MainCanvas canvas) { MultipointTouch mpt = MultipointTouch.getInstance(); mpt.addMultipointTouchListener(this); } public void pointersChanged(int[] pointerIds) { /* ... */ } }

if (System.getProperty("com.nokia.mid.ui.multipointtouch.version") != null) { // API is supported: Can implement multipoint touch functionality multiManager = new MultitouchManager(this); useMultitouch = true; }

protected void pointerPressed(int x, int y) { if (!useMultitouch) { // Handle touch event // on single-touch phone } }

In MainCanvas class (extends Canvas)

Hint: only handle Canvas.pointerPressed() on single touch phones

Example: PaintApp

EXAMPLE: 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) { }

Example: PaintApp


MONETIZATION

SERIES 40 – APP DOWNLOADS


0

200

400

600

800

1.000

1.200

1.400

April 2010 April 2011 April 2012

Mil

lio

ns

Mobile Phones

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/


http://www.developer.nokia.com/Distribute/In-app_purchasing/







IN APP ADVERTISING

• 3rd party APIs

• Recommended

– inneractive: www.inner-active.com/Nokia

Java ME + Qt + WP

– vserv.mobi: vserv.mobi/

Java ME + WP


http://www.inner-active.com/Nokia



http://vserv.mobi/


RESOURCES & TIPS

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 docs


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


TIPS

• App not deployed?

– Make sure Nokia Suite has connection to phone

– Check if deployment method set in project

properties!


No deployment done (not selected in project properties)

Deployment successful

CODE EXAMPLES

• Nokia IDE

– Nokia Hub → Nokia Series 40

Code Examples

• Online

– bit.ly/JavaMeExamples

• Emulator

– Help → MIDlet Samples

• Maps & LWUIT

– C:\Nokia\devices\Nokia_SDK_2_0_Java\plugins


http://bit.ly/JavaMeExamples

http://bit.ly/JavaMeExamples

REMOTE DEVICE ACCESS

• Free for Nokia Developer users

• Deploy & Test apps

– www.developer.nokia.com/Devices/

Remote_device_access/


http://www.developer.nokia.com/Devices/Remote_device_access/

http://www.developer.nokia.com/Devices/Remote_device_access/

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/


http://www.developer.nokia.com/Develop/Java/Getting_started/

http://www.developer.nokia.com/Develop/Java/

http://projects.developer.nokia.com/LWUIT_for_Series_40

http://www.developer.nokia.com/Develop/Java/Documentation/

http://www.developer.nokia.com/Develop/Java/Learning/

http://www.developer.nokia.com/Develop/Java/Code_examples/


EXERCISES

MONKEYTOUCH 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)


Monkey3D Start

SOLUTION: MONKEYTOUCH


/** Handle pinch and drag gestures. */ private GestureInteractiveZone gestureZone;

GestureRegistrationManager.setListener(this, this); gestureZone = new GestureInteractiveZone(GestureInteractiveZone.GESTURE_DRAG | GestureInteractiveZone.GESTURE_PINCH); GestureRegistrationManager.register(this, gestureZone);

public class ViewerCanvas extends GameCanvas implements CommandListener, Runnable, GestureListener

Register member in ViewerCanvas

Setup gesture listener for drag & pinch

Implement GestureListener in ViewerCanvas

Monkey3D Solution

SOLUTION: MONKEYTOUCH


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; } }

Implement gesture call-back method

Monkey3D Solution

MONKEYTOUCH 3D #2

• Add automatic screen orientation

• Show status zone


Monkey3D Start

SOLUTION: MONKEYTOUCH2


Monkey3D Solution

Nokia-MIDlet-App-Orientation: manual

public class ViewerCanvas extends GameCanvas implements CommandListener, Runnable, GestureListener, OrientationListener

Add attribute to application descriptor

Implement OrientationListener in ViewerCanvas

// Orientation support Orientation.addOrientationListener(this);

Register ViewerCanvas as listener in its constructor

SOLUTION: MONKEYTOUCH2


Monkey3D Solution

public void displayOrientationChanged(int newDisplayOrientation) { // Assign display orientation Orientation.setAppOrientation(newDisplayOrientation); }

protected void sizeChanged(int w, int h) { // Make sure the camera aspect ratio gets adapted cameraZoom(0.0f); }

Implement orientation call-back method

Override sizeChanged() from Canvas base class Change camera to update aspect ratio

// Show status zone LCDUIUtil.setObjectTrait(this, "nokia.ui.canvas.status_zone", Boolean.TRUE);

Show status zone in constructor

CARRACE 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);


CarRace Start

SOLUTION: CARRACE 3D


CarRace Solution

/** Acceleration sensor connection. */ private SensorConnection accSensor;

Register member in RaceCanvas

// 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()); } } }

Init sensors after loadBackground() in RaceCanvas.init()

SOLUTION: CARRACE 3D


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(); } }

CarRace Solution

Process sensor data and apply to the car

Call processSensors() in RaceCanvas.run() after processKeys() // Process sensor values processSensors();

Want to learn more?

www.developer.nokia.com

Andreas Jakl [@mopius]

Technology Wizard, Nokia


THANK YOU!

Example Apps

Download all code examples and the slides!

bit.ly/series40touch

http://www.developer.nokia.com/

http://bit.ly/series40touch

introduction to nokia asha touch ui

Technology

nokia introduction

andreas jakl

touch uifor series

java series

nokia web tools

icon visible

porting library nokia

new apis