Introduction to Nokia Asha Touch UI
-
Upload
microsoft-mobile-developer -
Category
Technology
-
view
131 -
download
3
description
Transcript of 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
2 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
3 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
4 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
DP 2.0 – NEW APIS
5 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
Full touch UI
Virtual Keyboard
Multipoint Touch APIs
Gestures: Pinch
Sensors & Orientation
...
NOKIA IDE FOR JAVA ME
6 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
Device SDK Manager
Integrated SDK + Toolchain
App Templates
JAD Editor
(NetBeans is supported as well)
7 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
USER INTERFACE
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
FULL TOUCH UI
• Screen
– 240 x 400 px
– 3:5 aspect ratio
– Previous QVGA = 3:4
• New
– Action buttons
– Category bar
– Back button
9 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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!
10 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
Action button 1
Category bar
11 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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!
12 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
13 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
Back command, CategoryBar invisible
Back command, CategoryBar visible
14 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
15 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
16 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
17 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
18 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
• 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
19 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
20 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
VKB_MODE_ALPHA_LOWER_CASE
VKB_MODE_DEFAULT
VKB_MODE_NUMERIC
USING: VIRTUAL KEYBOARD
• Show keyboard
• Hide keyboard
21 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
CustomKeyboardControl vkbControl = VirtualKeyboard.getCustomKeyboardControl(); vkbControl.launch(VirtualKeyboard.VKB_TYPE_ITUT, VirtualKeyboard.VKB_MODE_ALPHA_LOWER_CASE);
vkbControl.dismiss();
Example: PaintApp
USING: VIRTUAL KEYBOARD
22 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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.
23 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
USING: TEXT EDITOR
• Create text editor with Canvas as parent
24 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
// 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
25 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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(); }
Example: CanvasTextEditor
USING: TEXT EDITOR
• Draw text when TextEditor not active / visible
26 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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); } }
Example: CanvasTextEditor
27 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
28 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
29 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
USING: GESTURES
• Register as gesture listener
– 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
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!
31 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
32 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
33 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
34 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
35 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
36 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
37 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
FINDING SENSORS
38 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
39 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
USING: SENSORS
• Establish sensor connection
• Check data in game loop
40 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
// 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
41 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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 *
42 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
//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
43 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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)
44 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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); } }
45 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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()); }
46 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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.
47 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
48 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
49 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
PORTING
51 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
52 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
EXAMPLE: PINCH GESTURE
• Gesture API
– Available in Touch & Type
– Full Touch adds Pinch gesture
– Query support at runtime
53 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
// 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
54 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
55 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
// 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
56 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
MONETIZATION
SERIES 40 – APP DOWNLOADS
57 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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/
58 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
IN APP ADVERTISING
• 3rd party APIs
• Recommended
– inneractive: www.inner-active.com/Nokia
Java ME + Qt + WP
– vserv.mobi: vserv.mobi/
Java ME + WP
59 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
60 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
61 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
TIPS
• App not deployed?
– Make sure Nokia Suite has connection to phone
– Check if deployment method set in project
properties!
63 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
64 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
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 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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)
68 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
Monkey3D Start
SOLUTION: MONKEYTOUCH
69 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
/** 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
70 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
71 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
Monkey3D Start
SOLUTION: MONKEYTOUCH2
72 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
73 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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);
74 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
CarRace Start
SOLUTION: CARRACE 3D
75 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
76 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
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
77 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
THANK YOU!
Example Apps
Download all code examples and the slides!
bit.ly/series40touch