Nokia Series 40 Full Touch Training - May 03 2013

  • Published on

  • View

  • Download

Embed Size (px)


Nokia series 40 full touch training programming


<ul><li><p>Nokia Series 40 Full Touch Training</p><p>03 May 2013, Da</p></li><li><p>Why Asha?</p></li><li><p>Volumes Q4 2012</p><p> 9,3 millions devices</p></li><li><p>Successful Developers</p></li><li><p>Asha TouchContests</p><p> 2012</p><p> 3 contests</p><p> Given prizes: 1 Lumia 920</p><p> 1 Lumia 820</p><p> 70 Asha Full Touch</p></li><li><p>6</p></li><li><p>Series 40 Platform New Features</p></li><li><p>Device Family</p><p> SDK 2.0</p><p> SDK 1.1 Touch-and-type</p><p> Non-touch</p><p> S40 6th Edition FP1</p><p> S40 6th Edition</p><p> S40 5th Edition Fp1</p><p> ...</p></li><li><p>Series 40 Platform: New and Enhanced </p><p>Features</p><p> Keyboard check</p><p> Back button</p><p> Category bar</p><p> Status bar</p><p> Header bar</p><p> Forms and text input</p><p> PopupList</p></li><li><p>Series 40 Platform: New and Enhanced </p><p>Features</p><p> Full screen and commandsmenu</p><p> Badge API</p><p> Theming</p><p> Pinch gesture</p><p> Multi-touch</p><p> Fixed and dynamicorientation</p></li><li><p>Series 40 Platform: New and Enhanced </p><p>Features</p><p> Font STYLE_LIGHT</p><p> VideoDecode control</p><p> Maps new features</p><p> Locale listener</p><p> Using new sensors</p><p> Additional system properties</p></li><li><p>Asha 305, 2.5G, Dual SIM, Resistive Touch</p><p>Maximum User Storage: 10 MB</p><p>(Additional 2GB memory card included)</p><p>ROM Memory: 64 MB</p><p>RAM Memory: 32 MB</p><p>Maximum Memory Card Size: 32 GB</p><p>Maximum Heap Size: 2 MB</p><p>Maximum JAR Size: 2 MB</p></li><li><p>Asha 306, 2.5G, WLAN, Resistive Touch</p><p>Maximum User Storage: 10 MB</p><p>(Additional 2GB memory card included)</p><p>ROM Memory: 64 MB</p><p>RAM Memory: 32 MB</p><p>Maximum Memory Card Size: 32 GB</p><p>Maximum Heap Size: 2 MB</p><p>Maximum JAR Size: 2 MB</p></li><li><p>Asha 311, WLAN, 3G, Capacitive Touch</p><p>Maximum User Storage: 140 MB</p><p>ROM Memory: 256 MB</p><p>RAM Memory: 128 MB</p><p>Maximum Memory Card Size: 32 GB</p><p>Maximum Heap Size: 4 MB</p><p>Maximum JAR Size: 2 MB</p></li><li><p>Asha 308, 2.5G, Dual SIM, Capacitive Touch</p><p>Maximum User Storage: 20 MB</p><p>(Additional 2GB memory card included)</p><p>ROM Memory: 128 MB</p><p>RAM Memory: 64 MB</p><p>Maximum Memory Card Size: 32 GB</p><p>Maximum Heap Size: 2 MB</p><p>Maximum JAR Size: 2 MB</p></li><li><p>Asha 309, 2.5G, WLAN, Capacitive Touch</p><p>Maximum User Storage: 20 MB</p><p>(Additional 2GB memory card included)</p><p>ROM Memory: 128 MB</p><p>RAM Memory: 64 MB</p><p>Maximum Memory Card Size: 32 GB</p><p>Maximum Heap Size: 2 MB</p><p>Maximum JAR Size: 2 MB</p></li><li><p>(Device View Video)Asha 305, Asha 311</p></li><li><p>Series 40 Phones</p><p>Filter by Series 40 Edition or Java Runtime version (new phones)</p><p></p></li><li><p>Series 40 &amp; Java RuntimeJava Runtime Series 40 Version Phones</p><p>2.0.0 Series 40 Asha 305, 306, 311, 308, 309, 307, 310</p><p>1.1.0 Series 40 Asha 200, 201, 302, 303</p><p>1.0.0 Series 40 Asha 202, 203, C2-00, C2-02, C2-03, C2-05, C2-06, X2-02, X2-05</p><p>N/A Series 40 6th Edition, FP 1 Asha 300, C3-01, X3-02</p><p>N/A Series 40 6th Edition C2-01, C3-00, X2-00, X2-01, 6303i, 7230, 6350, 6750, 3720, ...</p><p>N/A Series 40 6th Edition Lite C1-01, C1-02</p><p>N/A Series 40 5th Edition, FP1 2690, 3208, 6600i, 2730, 2700, 6208, 6600, 8800, ...</p><p>N/A Series 40 5th Edition, FP1 Lite 2220, 2720, 2320, 2330, 5000...</p><p>N/A Series 40 5th Edition 3610, 6263, 6555, 7500, 6267</p></li><li><p>CLDC MIDP 248 MSA</p><p>185 JTWI</p><p>75 File</p><p>82 BT</p><p>135 Media</p><p>172 Web RPC</p><p>172 Web XML</p><p>177 SATSAAPD</p><p>U</p><p>177 SATSACRY</p><p>PT</p><p>179 Locati</p><p>on</p><p>184 3D</p><p>205 Messaging</p><p>211 Conte</p><p>nt</p><p>226 SVG</p><p>234 Audio</p><p>3D</p><p>234 Came</p><p>ra</p><p>234 Music</p><p>256 Senso</p><p>r</p><p>Nokia UI</p><p>IAP</p><p>2.0.0 1.1 2.1 1.1 - 1.0 1.1 1.2 1.0 1.0 1.0 1.0 1.0 1.1 2.0 1.0 1.1 1.1 1.1 1.1 1.0 1.6 2.0</p><p>1.1.0 - - 1.1 1.0</p><p>1.0.0 - - 1.1b -</p><p>S40 6th,FP1</p><p>- - 1.1b -</p><p>S40 6th</p><p> - - 1.1 -</p><p>S406th Lite</p><p>- - - - - - - -</p><p>S40 5th FP1</p><p> - 1.1 - 1.0 - 1.0 - -</p><p>S40 5th </p><p>FP1 L</p><p>- - - - - - - - - - - - -</p><p>S40 5th</p><p> - 1.1 1.0 1.0 - 1.1 - 1.0 - 1.0 - -</p></li><li><p>(HelloWorld Video)</p></li><li><p>Remote Device Access Now supports Series 40</p><p> Free for Nokia Developer users</p><p> Deploy &amp; Test apps</p><p></p></li><li><p>UI Style &amp;</p><p>Screen Elements</p></li><li><p>Full Touch 2 or 5 point multi-touch</p><p> Resistive or capacitive</p><p> 240x400 screen</p></li><li><p>Full Touch UI Screen</p><p> 240 x 400 Pixels</p><p> 3:5 aspect ratio </p><p> Previous QVGA = 3:4</p><p> Affects UI of canvas-based app</p><p> New features:</p><p> Action buttons</p><p> Category bar</p><p> Back button</p></li><li><p>Back Button Automatically added to </p><p>lower right corner for the highest priority Command.BACK or Command.EXIT</p><p> Any additional BACK or EXITcommands of lower priority are on the drop down menu</p></li><li><p>Action Button</p><p> Automatically added to top left corner for the highest priority Command.OK</p><p> Use IconCommand to specify the icon</p><p> Otherwise it is </p></li><li><p>Get and setup the tools:</p><p>1. Check your system requirements.</p><p>2. Download JDK 6 Update 27 and install it.</p><p>3. Download the NetBeans IDEs all package and install it.</p><p>4. Download the Nokia SDK 2.0 for Java and install it.</p><p>5. Download Nokia Suite and install it.</p><p>6. Activate the Java ME option in NetBeans using Plugins on theTools menu.</p><p>7. Add your SDK to NetBeans list of Java platforms, using Java Platforms on the Tools menu.</p><p>Java - Getting started with NetBeans IDE</p></li><li><p>Java - Getting started with NetBeans IDE</p><p></p></li><li><p>Demo- Form elements</p></li><li><p>Exercises</p></li><li><p>Status Bar Show status zone in full screen app</p><p>public class MainCanvas extends Canvas{</p><p>public MainCanvas(){</p><p>// Activate full screen modesetFullScreenMode(true);</p><p>// Make status bar visibleLCDUIUtil.setObjectTrait(this, </p><p>"nokia.ui.canvas.status_zone", Boolean.TRUE);</p><p>}}</p><p>Example: PaintApp</p></li><li><p>Category Bar</p><p> Use only to change views, not to perform actions</p><p> Actions can be icons, but do not belong in a CategoryBar</p><p> Works on Form and Canvas</p></li><li><p>CategoryBar Typical use: view switching</p><p> One element always highlighted</p><p> Mandatory &amp; automatic back button</p><p> CategoryBar.getMaxElements() (excluding back)</p><p> Currently: 15 icons (+ back)</p><p> Portrait: 4 visible, landscape: 6 visible</p><p> Excess (&gt; 15) icons not shown</p><p> CategoryBar.getBestImageWidth / Height()</p><p> Currently: 44 x 44</p><p> Note: size is edge-to-edge. Make actual icon smaller! (e.g., 20 x 20)</p><p>44 x 44 icon20 x 20 icon</p></li><li><p>CategoryBar Back</p><p> Traditional back Command in Form</p><p> Visible w/o CategoryBar</p><p> CommandListener</p><p> CategoryBar</p><p> Back included by default</p><p> ElementListener.BACK</p><p> always visible if using CategoryBar: no back cmd needed</p><p>Back command,CategoryBar visible</p></li><li><p>IconCommand Extends LCDUI Command class</p><p> Adds: Icon</p><p> Built-in system icon</p><p> Own icon (unselected, [selected])</p><p> Icons visible</p><p> Action button 1</p><p> Category bar</p><p> Back button always has default icon, not possible to override!</p><p>Action button 1</p><p>Category bar</p></li><li><p>Using: IconCommandpublic class JavaFTMidlet extends MIDlet implements CommandListener {</p><p>private Form frmMain;private IconCommand cmdOk;</p><p>public JavaFTMidlet() {frmMain = new Form("Main");cmdOk = new IconCommand("Ok", Command.OK, 1, IconCommand.ICON_OK);frmMain.addCommand(cmdOk);</p><p>}</p><p>public void startApp() {frmMain.setCommandListener(this);Display.getDisplay(this).setCurrent(frmMain);</p><p>}</p><p>public void commandAction(Command c, Displayable d) {if (c == cmdOk) { /* Ok Command */ }</p><p>}}</p><p>Command mapped to action button 1</p><p>Very few predefined icons are available</p><p>Example: JavaTouch</p></li><li><p>Using: CategoryBarpublic class JavaFTMidlet extends MIDlet implements CommandListener, ElementListener {</p><p>private IconCommand cmdHome;private IconCommand cmdInfo;</p><p>public JavaFTMidlet() {try { // Load icon images</p><p>Image imgHome = Image.createImage("/home.png");cmdHome = new IconCommand("Home", imgHome, imgHome, Command.SCREEN, 3);//cmdHome = new IconCommand(Home", Home", Command.SCREEN, 3, IconCommand.ICON_SEND_SMS);Image imgInfo = Image.createImage("/info.png");cmdInfo = new IconCommand("Info", imgInfo, imgInfo, Command.SCREEN, 3);//cmdInfo = new IconCommand(Info", Info", Command.SCREEN, 3, IconCommand.ICON_OPTIONS);</p><p>} catch (IOException ex) { }</p><p>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</p><p>}</p><p>public void notifyElementSelected(CategoryBar cb, int i) {Alert alert = new Alert("Element");if (i == ElementListener.BACK) { // Default back element from category bar</p><p>alert.setString("Back element"); // i == -1} else {</p><p>alert.setString("Element: " + i); // Element ID: 0, 1, 2, ... starting left}display.setCurrent(alert);</p><p>}</p><p>Element 0 selected by default</p><p>Using same icon for highlighted state</p><p>ElementListener for CategoryBar</p><p>Example: JavaTouch</p></li><li><p>Demo- Standard CategoryBar- Custom CategoryBar</p></li><li><p>PopupListPopupList list1 = new PopupList();PopupList list2 = new PopupList();list2.setItemText("Sublist");</p><p>PopupListItem item1 = new PopupListItem("Text");PopupListItem item2 = new PopupListItem("Text", image1);PopupListItem item3 = new PopupListItem("Text2");PopupListItem item4 = new PopupListItem("Text3", image1);</p><p>list1.appendItem(item1);list1.appendItem(item2);list1.appendItem(list2);list2.appendItem(item3);list2.appendItem(item4);</p><p>list1.setVisible(true);</p><p>Example: Menu</p></li><li><p>Method Summary</p><p>voidappendItem(PopupListItem item) </p><p>This method will append an item to the list.</p><p>PopupListItem getItem(int index) Returns the item specified by the index from the popuplist.</p><p>void insertItem(PopupListItem item, int index) This method will insert an item to the list at the give index.</p><p>void removeItem(PopupListItem item) This will remove the item from the popuplist.</p><p>void removeItemAt(int index) This will remove the item specified by the index from the popuplist.</p><p>void setItemText(java.lang.String text) Deprecated. will be removed soon, use the setText instead of</p><p>void setListener(PopupListListener listener) This method sets the PopupListListener for this list.</p><p>voidsetListYPos(int yPos) </p><p>Sets the y coordinate where the contextual menu should be shown.</p><p>voidsetTailStyle(int style) </p><p>This sets the tail style for the contextual menu.</p><p>voidsetText(java.lang.String text) </p><p>This method sets the PopupList item text.</p><p>voidsetVisible(boolean visible) </p><p>This sets the list visible or hidden.</p><p>intsize() </p><p>This will return the size of the popuplist.</p></li><li><p>Demo- PopupList</p></li><li><p>Orientation</p><p> You can Get and set screen orientation </p><p>with the Orientation class</p><p> Alternate: system property to get orientation</p><p> Receive changes as registered OrientationListener</p><p> Use a JAD parameter to lock to either portrait or landscape</p></li><li><p></p></li><li><p>Interface</p><p> Use in your Canvas, GameCanvas or CustomItem</p><p> Change object height, width or layout for pleasing effects</p></li><li><p>Orientation By default, your app is locked portrait only</p><p> To enable landscape/portrait orientation changes</p><p>1. Add attribute: Nokia-MIDlet-App-Orientation: manual</p><p>2. Register yourself as an OrientationListener</p><p>public class JavaFTMidlet extends MIDlet implements OrientationListener {public void startApp() {</p><p>Orientation.addOrientationListener(this);}</p></li><li><p>Orientation Example: JavaTouch</p><p>portraitlandscape</p><p>ormanual</p></li><li><p>Orientation Adapt content orientation to phone / display</p><p> setAppOrientation() calls sizeChanged() on the current Displayable</p><p> This allows you to intercept the changes before they occur and filter or customize</p><p>public void displayOrientationChanged(int newDisplayOrientation) {switch (newDisplayOrientation) {</p><p>case Orientation.ORIENTATION_PORTRAIT:case Orientation.ORIENTATION_PORTRAIT_180:</p><p>Orientation.setAppOrientation(Orientation.ORIENTATION_PORTRAIT);break;</p><p>case Orientation.ORIENTATION_LANDSCAPE:case Orientation.ORIENTATION_LANDSCAPE_180:</p><p>Orientation.setAppOrientation(Orientation.ORIENTATION_LANDSCAPE);break;</p><p>}}</p><p>Example: JavaTouch</p></li><li><p>Demo- Orientation on Form- Orientation on Canvas</p></li><li><p>Procedural Graphics</p><p> Translucent drawing</p><p> Any size text fonts</p><p> New font: Light</p></li><li><p>Nokia Scalable Fonts</p><p>Font font = DirectUtils.getFont(face, style, customHeight);</p><p> On some less expensivephones, this will failgracefully to a standard Font size</p><p> Very handy for making subtly styled user interfaces</p></li><li><p>Light Font</p><p> Use DirectUtils.getFont() withDirectUtils.STYLE_LIGHT</p><p> You may also add any combiation of </p><p> Font.STYLE_BOLD</p><p> Font.STYLE_ITALIC</p><p> Font.STYLE_UNDERLINE</p><p> This may also degrade gracefully to a different font depending on the phone</p></li><li><p>Demo- Scalable Font- Alpha blending</p></li><li><p>Input: Text and Touch Input</p></li><li><p>TextEditorVirtual Keyboard, Physical Keyboard</p><p>Multi-touchGestures</p></li><li><p>TextEditor Custom Nokia class Text input on top of Canvas</p><p> Define exactly where on the screen, all colors and translucency</p><p> Precise control, no chrome. Adapt it to your applicationslook and feel.</p><p> TextEditorListener allows youto monitor user changes live</p></li><li><p>TextEditorproperties</p><p> View properties</p><p> Position</p><p> Size</p><p> Visibility</p><p> Focus state</p><p> Color properties</p><p> Background color with alpha channel</p><p> Background highlight color with alpha channel</p><p> Foreground color with alpha channel</p><p> Foreground highlight color with alpha channel</p></li><li><p>Using: Text Editor Show &amp; hide text editor in the Canvasprotected void pointerPressed(int x, int y) {</p><p>if (x &gt;= textBoxX &amp;&amp; x &lt; textBoxX + textBoxWidth &amp;&amp; y &gt;= textBoxY &amp;&amp; y &lt; textBoxY + textBoxHeight) {// Click in the box, show the text editor: no input constraints, 20 chars max lengthtextEditor = TextEditor.createTextEditor(text, 20, TextField.ANY, textBoxWidth, textBoxHeight);textEditor.setForegroundColor(0xFFFFFFFF); // Text color: whitetextEditor.setBackgroundColor(0x800092c2); // Transparent blue background (Alpha = 0x80)textEditor.setParent(this); // Canvas to draw ontextEditor.setPosition(textBoxX, textBoxY); // x/y coordinatestextEditor.setVisible(true); // By default invisibletextEditor.setFocus(true); // Deliver keys to textEditor, not to CanvastextEditor.setCaret(text.length()); // Caret at end of text</p><p>} else if (textEditor != null) {// Click outside of the box, defocus the text editortext = textEditor.getContent(); // Copy text contentstextEditor.setParent(null);textEditor = null;</p><p>}repaint();</p><p>}</p><p>Example: CanvasTextEditor</p></li><li><p>Using: Text Editor Draw text when TextEditor not active / visibleprotected void paint(Graphics g) {</p><p>if (textEditor == null) {g.setColor(0xFFFFFF);g.drawRect(textBoxX - 2, textBoxY - 2, textBoxWidth, textBoxHeight);g.drawString(text, textBoxX, textBoxY, Graphics.TOP | Graphics.LEFT);</p><p>}}</p><p>Example: CanvasTextEditor</p></li><li><p>Demo- TextEditor</p></li><li><p>Virtual Keyboard Use on-screen keyboard on Canvas</p><p> Creates keyPressed() callbacks</p><p> Get VKB height to avoid content overlap</p><p>VKB_MODE_ALPHA_LOWER_CASE</p><p>VKB_MODE_DEFAULT</p></li><li><p>Using: Virtual Keyboard Show keyboard</p><p> Hide keyboar</p><p>CustomKeyboardControl vkbControl = VirtualKeyboard.getCustomKeyboardControl();vkbControl.launch(VirtualKeyboard.VKB_TYPE_ITUT, VirtualKeyboard.VKB_MODE_ALPHA_LOWER_CASE);</p><p>vkbControl.dismiss();</p><p>Example: PaintApp</p></li><li><p>Using: Virtual Keyboardpublic class MainCanvas extends Canvas implements KeyboardVisibilityListener{</p><p>private int screenHeight;private int visibleHeight;</p><p>public MainCanvas() {setFullScreenMode(true);screenHeight = getHeight(); // Original screen height == 400visibleHeight = screenHeight; // No VKB visible -&gt; == 400VirtualKeyboard.setVisibilityListener(this);</p><p>}public void showNotify(int keyboardCategory) {</p><p>// VKB now visible -&gt; visibleHeight == 200visibleHeight = screenHeight - VirtualKeyboard.getHeight();</p><p>}public void hideNotify(int keyboardCategory) {</p><p>// VKB now hidden -&gt; visibleHeight == 400visibleHeight = screenHeight;</p><p>}}</p><p>visibleHeight == 200</p><p>visibleHeight == 400</p><p>Example: PaintApp</p></li><li><p>Demo- Virtual Keyboard</p></li><li><p>Multipoint Touch Single touch</p><p> Canvas.pointerPressed()part of MIDP</p><p> Only tr...</p></li></ul>


View more >