Introduction to Nokia Asha Touch UI

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 + WP59 © 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 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

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! 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

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

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

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

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

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

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

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

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

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

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

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

Introduction to Nokia Asha Touch UI

by Nokia Developer on Jun 27, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 4

Statistics

Introduction to Nokia Asha Touch UI Presentation Transcript

http://anthonyalvarez.us	3
http://www.linkedin.com	1