Introduction to Nokia Asha Touch UI

INTRODUCTION TO FULL TOUCH UI
FOR SERIES 40

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

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


PLATFORMS
API Differences: bit.ly/S40Apis

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


DP 2.0 – NEW APIS

Full touch Virtual Multipoint
UI Keyboard Touch APIs

Gestures: Sensors &
...
Pinch Orientation


NOKIA IDE FOR JAVA ME
(NetBeans is supported as well)

Integrated SDK + Toolchain JAD Editor

App Templates Device SDK Manager


USER INTERFACE


UX GUIDELINES
• Design
– Layouts
– Interaction patterns
– Icon templates
– developer.nokia.com/Design/


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 button


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 bar


Example: JavaTouch
USING: ICONCOMMAND
public 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 */ }
}
}


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!


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 needed


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

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 {
Orientation.addOrientationListener(this);
}


Example: JavaTouch
ORIENTATION
– 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 Displayable

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


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


Example: PaintApp
USING: VIRTUAL KEYBOARD
• Show keyboard
CustomKeyboardControl vkbControl = VirtualKeyboard.getCustomKeyboardControl();
vkbControl.launch(VirtualKeyboard.VKB_TYPE_ITUT, VirtualKeyboard.VKB_MODE_ALPHA_LOWER_CASE);

• Hide keyboard
vkbControl.dismiss();


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


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.


Example: CanvasTextEditor

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



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


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


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


Example: PaintApp
USING: GESTURES
• Register as gesture listener
public class MainCanvas extends Canvas implements GestureListener {
private int curPinchDistance = -1;
// 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


Example: PaintApp
USING: GESTURES
• Handling gestures
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;
}
}

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


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


Example: PaintApp
USING: 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
{
// ...
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;
} } }

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


Example: MovingBall
USING: 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-axis


LOCATION


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

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:NokiadevicesNokia_SDK
150 kB
_2_0_Javapluginsmaps
apibinMaps_API.jar
(also add Javadoc)


Example: mapExample
USING: MAPS
public class MapMidlet extends MIDlet implements GeocodeRequestListener {
private MapCanvas mapCanvas;
// 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());
}

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


Example: RpsGame
PORTING

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

51 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 available


Example: PaintApp
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
// Register for pinch gesture
gestureZone = new GestureInteractiveZone(GestureInteractiveZone.GESTURE_PINCH);
}


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


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


MONETIZATION


SERIES 40 – APP DOWNLOADS
Millions 1.400

1.200

1.000

800

600

400

200

0
April 2010 April 2011 April 2012

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
– 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 Deployment successful
(not selected in project properties)

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


REMOTE DEVICE ACCESS
• Free for Nokia Developer users
• Deploy & Test apps
– 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/


EXERCISES


Monkey3D Start
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 Solution
SOLUTION: MONKEYTOUCH
Register member in ViewerCanvas
/** Handle pinch and drag gestures. */
private GestureInteractiveZone gestureZone;

Setup gesture listener for drag & pinch
gestureZone = new GestureInteractiveZone(GestureInteractiveZone.GESTURE_DRAG | GestureInteractiveZone.GESTURE_PINCH);

Implement GestureListener in ViewerCanvas
public class ViewerCanvas extends GameCanvas implements CommandListener, Runnable, GestureListener


Monkey3D Solution
SOLUTION: 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;
}
}


Monkey3D Start
MONKEYTOUCH 3D #2
• Add automatic screen orientation
• Show status zone


Monkey3D Solution
SOLUTION: 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);


Monkey3D Solution
SOLUTION: 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);

CarRace Start
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 Solution
SOLUTION: 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());
}
}
}


CarRace Solution
SOLUTION: 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();

Example Apps

Download all code examples
and the slides!

THANK YOU!
bit.ly/series40touch

Want to learn more?
www.developer.nokia.com

Andreas Jakl [@mopius]
Technology Wizard, Nokia


Introduction to Nokia Asha Touch UI

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Introduction to Nokia Asha Touch UI

Ähnlich wie Introduction to Nokia Asha Touch UI (20)

Mehr von Microsoft Mobile Developer

Mehr von Microsoft Mobile Developer (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introduction to Nokia Asha Touch UI