Nokia Java ME Touch 2.0 - vodacom.co.za€¦ · Series 40 offers you two great development technologies: • Java and web apps. • Choosing either gives you access to the world's

Thuthuka Mhlongo [@ThuthukaMhlongo](2-2-car)Ecosystem Tech Support\Developer Evangelist, Nokia

1 © 2012 Nokia Introduction to Series 40 Full Touch v2.0.1

INTRO TO JAVA ME DEVELOPMENT FORSERIES 40 FULL TOUCH

Series 40 offers you two great development technologies: • Java and web apps.

• Choosing either gives you access to the world's most widely used mobile platform, with hundreds of millions of phones in use every day.

• The latest full touch Series 40 phones bring a smartphone-like experience to the mass market, complementing the range of Series 40 phones that deliver many mobile consumers their first internet experience.


WHY DEVELOP FOR SERIES 40?

CONTENTS• Introduction

– Platforms & Versions• New features for developers

– UI– LWUIT– Text Input– Touch Input– Sensors– Location & Maps– Remote Device Access

• 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.0DP 1.1DP 1.06th Ed., FP16th Ed.6th Ed., Lite5th Ed., FP1

API Differences: bit.ly/S40Apis

PLATFORMS


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

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 buttonCategory 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*import com.nokia.mid.ui.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: CATEGORYBARpublic 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 arrayCategoryBar 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 orientationto 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

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


TEXT INPUT

VIRTUAL KEYBOARD

• Using on-screen keyboard on

Canvas

–Creates keyPressed()

callbacks

–Get VKB height to avoid

content overlap


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 == 400visibleHeight = screenHeight; // No VKB visible -> == 400VirtualKeyboard.setVisibilityListener(this);

}public void showNotify(int keyboardCategory) {

// VKB now visible -> visibleHeight == 200visibleHeight = screenHeight - VirtualKeyboard.getHeight();

}public void hideNotify(int keyboardCategory) {

// VKB now hidden -> visibleHeight == 400visibleHeight = screenHeight;

}}

visibleHeight == 200

visibleHeight == 400

Example: PaintApp

TEXTEDITOR• Text entry on a Canvas (custom UI)

– MIDP: only fullscreen TextBox– Creating own editor – is 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, cursor movement, etc.



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

• 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 listenerGestureRegistrationManager.setListener(this, this);// Register for pinch events in the whole canvas areagestureZone = 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 detectedcurPinchDistance = gestureEvent.getPinchDistanceCurrent(); break;

case GestureInteractiveZone.GESTURE_RECOGNITION_START: /* ... */ break;case GestureInteractiveZone.GESTURE_RECOGNITION_END: /* ... */ break;

}}

Example: PaintApp

USING: MULTIPOINT TOUCH

• Number of touch points

–Limited accuracy of simultaneous touch points on a resistive

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

• Register: touch point listener


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

== 2 on Nokia 3065 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 IDint state = MultipointTouch.getState(pointerId); // Get the touch point state// Get the touch point x and y coordinatesint x = MultipointTouch.getX(pointerId); int y = MultipointTouch.getY(pointerId);

// Handle the UI update based on the touch point state, ID and coordinatesswitch(state) {

case MultipointTouch.POINTER_PRESSED: // A new finger was pressed against the screendrawTouch(pointerId, x, y); break;

case MultipointTouch.POINTER_DRAGGED: // A pressed finger was dragged over the screendrawTouch(pointerId, x, y); break;

case MultipointTouch.POINTER_RELEASED: // A pressed finger was lifted from the screenbreak;

} } }

Example: PaintApp


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


ApplicationSensorManage

rSensorInfo 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 undefinedSensorInfo[] sensorInfos = SensorManager.findSensors("acceleration", null);// Find an acceleration sensor that returns double valuesfor (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 axisData[] data = accSensor.getData(1);speedX = -data[0].getDoubleValues()[0]; // data[0] => x-axisspeedY = 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-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();

* 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


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 tokenApplicationContext.getInstance().setAppID("xxx");ApplicationContext.getInstance().setToken("xxx");

// Create new Nokia Maps canvasDisplay display = Display.getDisplay(this);mapCanvas = new MapCanvas(display) {

public void onMapUpdateError(...) {}public void onMapContentComplete() {}

};// Show map on the screendisplay.setCurrent(mapCanvas);

}}


USING: MAPSExample: mapExample

// Geocode an addressGeocodeRequest geocodeRequest = SearchFactory.getInstance().createGeocodeRequest();geocodeRequest.geocode("Vienna, Austria", null, this);

// ... center map on the latitude and longitudepublic void onRequestComplete(GeocodeRequest request, com.nokia.maps.common.Location[] locations) {

mapCanvas.getMapDisplay().setCenter(locations[0].getDisplayPosition());}


REMOTE DEVICE ACCESS



RDA• Remote Device Access (RDA) is a service that allows developers to test their

mobile applications and services remotely on various Nokia devices based on Series 40, Symbian and MeeGo OS.

• Main features of the service is remotely controlling the device• Installing and running applications, transferring files, and analysing log files in

real-time• This is a internet-based solution and the basic requirements for using the service

are a Nokia Developer website user account• The service is offer free of charge to All Nokia Developer Members


RDA



• Free for Nokia Developer users

• Deploy & Test apps

–www.developer.nokia.com/Devices/

Remote_device_access/



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


Non

-tou

ch

Touc

h an

d ty

pe

Example: RpsGame

Ful

l to

uch

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

EXAMPLE: PINCH GESTURE

• Gesture API

–Available in Touch & Type

–Full Touch adds Pinch gesture

–Query support at runtime


// Pinch gestureif (GestureInteractiveZone.isSupported(GestureInteractiveZone.GESTURE_PINCH)) {

// Gesture is supported - register class as listenerGestureRegistrationManager.setListener(this, this);// Register for pinch gesturegestureZone = 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 functionalitymultiManager = 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 supporttry {

// Check if class is availableClass.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

Mill

ion

s

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/


IN APP ADVERTISING

• 3rd party APIs

• Recommended

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

Java ME + Qt + WP

–vserv.mobi: vserv.mobi/

Java ME + WP



RESOURCES & TIPS

TIPS & SDK RELEASE NOTES

• Emulator – Recommended– <= JDK 6 Update 27 (newest JDK 7 should be fine, too)– Only 32 bit JRE!

• NetBeans 7.1 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

SDK CODE EXAMPLES

• Online– bit.ly/JavaMeExamples– Included in Help– Emulator → Help → MIDlet

Samples• Maps

– C:\Nokia\devices\Nokia_SDK_2_0_Java\plugins


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/


Want to learn more?

www.developer.nokia.com

Thuthuka (2-2-ka) Mhlongo[@ThuthukaMhlongo]

Ecosystem Tech Support\ Dev Evangelist, Nokia

63 © © 2012 Nokia Introduction to Series 40 Full Touch v2.0.1

THANK YOU!

Example Apps

Download all code examples bit.ly/series40touch

Documents

Nokia Java ME Touch 2.0 - vodacom.co.za€¦ · Series 40 offers you two great development technologies: • Java and web apps. • Choosing either gives you access to the world's