Mais conteúdo relacionado Semelhante a Introduction to Nokia Asha Touch UI (20) Mais de Microsoft Mobile Developer (20) Introduction to Nokia Asha Touch UI1. 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
2. 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. 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
3 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
5. DP 2.0 – NEW APIS
Full touch Virtual Multipoint
UI Keyboard Touch APIs
Gestures: Sensors &
...
Pinch Orientation
5 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
6. 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
7. USER INTERFACE
7 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
8. 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
9. 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
9 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
10. 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
10 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
11. 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 */ }
}
}
11 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
12. 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
13. 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
13 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
14. 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);
}
14 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
15. 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);
}
15 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
16. 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
16 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
17. 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);
}
}
17 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
18. 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
18 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
19. TEXT INPUT
19 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
20. 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
21. 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();
21 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
22. 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;
}
}
22 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
23. 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
24. 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
24 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
25. Example: CanvasTextEditor
USING: TEXT EDITOR
• Show & hide text editor in the Canvas
protected void pointerPressed(int x, int y) {
if (x >= textBoxX && x < textBoxX + textBoxWidth && y >= textBoxY && y < textBoxY + textBoxHeight) {
// Click in the box, show the text editor: no input constraints, 20 chars max length
textEditor = TextEditor.createTextEditor(text, 20, TextField.ANY, textBoxWidth, textBoxHeight);
textEditor.setForegroundColor(0xFFFFFFFF); // Text color: white
textEditor.setBackgroundColor(0x800092c2); // Transparent blue background (Alpha = 0x80)
textEditor.setParent(this); // Canvas to draw on
textEditor.setPosition(textBoxX, textBoxY); // x/y coordinates
textEditor.setVisible(true); // By default invisible
textEditor.setFocus(true); // Deliver keys to textEditor, not to Canvas
textEditor.setCaret(text.length()); // Caret at end of text
} else if (textEditor != null) {
// Click outside of the box, defocus the text editor
text = textEditor.getContent(); // Copy text contents
textEditor.setParent(null);
textEditor = null;
}
repaint();
}
25 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
26. Example: CanvasTextEditor
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);
}
}
26 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
27. TOUCH INPUT
27 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
28. 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
28 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
29. 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
30. Example: PaintApp
USING: 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
31. 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!
31 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
32. 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
33. 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
{
public MainCanvas() {
// ...
mpt.addMultipointTouchListener(this);
}
33 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
34. 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;
} } }
34 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
35. 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. SENSORS
36 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
37. 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
38. FINDING SENSORS
Application SensorManager SensorInfo Connector
findSensors(quantity,
contextType)
return SensorInfo[]
getUrl()
return URL
Connector.open(URL)
return SensorConnection
38 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
39. 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
40. 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
40 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
41. LOCATION
41 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
42. 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();
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
43. 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
44. 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
45. Example: mapExample
USING: 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
46. MIXED STUFF
46 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
47. 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. COMPATIBILITY
48 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
49. 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
50. 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
51. 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
52. 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
53. 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
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
54. 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
55. 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) { }
55 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
56. MONETIZATION
56 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
57. SERIES 40 – APP DOWNLOADS
Millions 1.400
1.200
1.000
800
600
400
200
0
April 2010 April 2011 April 2012
Mobile Phones
57 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
58. 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
59. 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. RESOURCES & TIPS
60 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
61. 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
62. 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
63. 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
64. 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
65. 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
66. 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. EXERCISES
67 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
68. 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)
68 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
69. Monkey3D Solution
SOLUTION: 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, GestureListener
69 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
70. 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;
}
}
70 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
71. Monkey3D Start
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
72. 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);
72 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
73. 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);
73 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
74. 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);
74 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
75. 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());
}
}
}
75 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
76. 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();
76 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl
77. 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
77 © 2012 Nokia Introduction to Full Touch UI for Series 40 v2.0.3 August 29, 2012 Andreas Jakl