Nokia Series 40 Full Touch Training - Dec 08 2012

  • Published on
    20-Jul-2016

  • View
    9

  • Download
    5

DESCRIPTION

Nokia Series 40 Full Touch Training - Dec 08 2012

Transcript

<ul><li><p>Nokia Series 40 Full Touch Training08 Dec 2012, Ho Chi Minhphong.cao@nokia.com</p></li><li><p>2</p></li><li><p>Series 40Platform NewFeatures</p></li><li><p>Device Family</p><p> SDK 2.0 SDK 1.1</p><p> Touch-and-type Non-touch</p><p> S40 6th Edition FP1 S40 6th Edition S40 5th Edition Fp1 ...</p></li><li><p>Series 40Platform: Newand EnhancedFeatures</p><p> Keyboard check Back button Category bar Status bar Header bar Forms and text input PopupList</p></li><li><p>Series 40Platform: Newand EnhancedFeatures</p><p> Full screen and commandsmenu</p><p> Badge API Theming Pinch gesture Multi-touch Fixed and dynamic</p><p>orientation</p></li><li><p>Series 40Platform: Newand EnhancedFeatures</p><p> Font STYLE_LIGHT VideoDecode control Maps new features Locale listener Using new sensors Additional systemproperties</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)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)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, CapacitiveTouch</p><p>Maximum User Storage: 20 MB</p><p>(Additional 2GB memory card included)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)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 PhonesFilter by Series 40 Edition orJava Runtime version (new phones)</p><p>developer.nokia.com/Devices</p></li><li><p>Series 40 &amp; Java RuntimeJava Runtime Series 40 Version Phones2.0.0 Series 40 Asha 305, 306, 311, 308, 3091.1.0 Series 40 Asha 200, 201, 302, 3031.0.0 Series 40 Asha 202, 203, C2-00, C2-02, C2-03, C2-05, C2-06,</p><p>X2-02, X2-05N/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 248MSA</p><p>185JTWI</p><p>75File</p><p>82BT</p><p>135Media</p><p>172WebRPC</p><p>172WebXML</p><p>177SATSAAPDU</p><p>177SATSACRYPT</p><p>179Location</p><p>1843D</p><p>205Messaging</p><p>211Content</p><p>226SVG</p><p>234Audio3D</p><p>234Camera</p><p>234Music</p><p>256Senso</p><p>rNokiaUI</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>S406th,FP1</p><p>- - 1.1b -</p><p>S406th</p><p> - - 1.1 -</p><p>S406thLite</p><p>- - - - - - - -</p><p>S405thFP1</p><p> - 1.1 - 1.0 - 1.0 - -</p><p>S405thFP1 L</p><p>- - - - - - - - - - - - -</p><p>S405th</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> http://www.developer.nokia.com/Devices/Remote_device_access/</p></li><li><p>UI Style&amp;Screen Elements</p></li><li><p>Full Touch 2 or 5 point multi-touch Resistive or capacitive 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> Backbutton</p></li><li><p>Back Button Automatically added to</p><p>lower right corner for thehighest priorityCommand.BACKorCommand.EXIT</p><p> Any additional BACKor EXITcommands of lower priorityare on the drop down menu</p></li><li><p>Action Button Automatically added to top</p><p>left corner for the highestpriorityCommand.OK</p><p> Use IconCommand tospecify the icon Otherwise it is</p></li><li><p>Get and setup the tools:1. Check your system requirements.2. Download JDK 6 Update 27 and install it.3. Download the NetBeans IDEs all package and install it.4. Download the Nokia SDK 2.0 for Java and install it.5. Download Nokia Suite and install it.6. Activate the Java ME option in NetBeans using Plugins on</p><p>theToolsmenu.7. Add your SDK to NetBeans list of Java platforms, using Java</p><p>Platforms on the Toolsmenu.</p><p>Java - Getting started with NetBeans IDE</p></li><li><p>Java - Getting started with NetBeans IDE</p><p>https://www.developer.nokia.com/Develop/Java/Getting_started/NetBeans/</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);// 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 Use only to change views,</p><p>not to perform actions Actions can be icons, but do</p><p>not belong in a CategoryBar 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 Visible w/o CategoryBar</p><p> CommandListener</p><p> CategoryBar Back included by default</p><p> ElementListener.BACK</p><p> always visible if usingCategoryBar: no back cmdneeded</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>Actionbutton 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;public JavaFTMidlet() {</p><p>frmMain = new Form("Main");cmdOk = new IconCommand("Ok", Command.OK, 1, IconCommand.ICON_OK);frmMain.addCommand(cmdOk);</p><p>}public void startApp() {</p><p>frmMain.setCommandListener(this);Display.getDisplay(this).setCurrent(frmMain);</p><p>}public void commandAction(Command c, Displayable d) {</p><p>if (c == cmdOk) { /* Ok Command */ }}</p><p>}</p><p>Command mappedto action button 1</p><p>Very few predefinedicons 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;public JavaFTMidlet() {</p><p>try { // Load icon imagesImage 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) { }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>}public void notifyElementSelected(CategoryBar cb, int i) {</p><p>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 selectedby default</p><p>Using same icon forhighlighted state</p><p>ElementListener forCategoryBar</p><p>Example: JavaTouch</p></li><li><p>Demo- Standard CategoryBar- CustomCategoryBar</p></li><li><p>PopupListPopupList list1 = new PopupList();PopupList list2 = new PopupList();list2.setItemText("Sublist");PopupListItem item1 = new PopupListItem("Text");PopupListItem item2 = new PopupListItem("Text", image1);PopupListItem item3 = new PopupListItem("Text2");PopupListItem item4 = new PopupListItem("Text3", image1);list1.appendItem(item1);list1.appendItem(item2);list1.appendItem(list2);list2.appendItem(item3);list2.appendItem(item4);list1.setVisible(true);</p><p>Example: Menu</p></li><li><p>Method Summaryvoid appendItem(PopupListItem item)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.void removeItem(PopupListItem item)This will remove the item from the popuplist.void removeItemAt(int index)This will remove the item specified by the index from the popuplist.void setItemText(java.lang.String text)Deprecated.will be removed soon, use the setText instead ofvoid setListener(PopupListListener listener)This method sets the PopupListListener for this list.void setListYPos(int yPos)Sets the y coordinate where the contextual menu should be shown.void setTailStyle(int style)This sets the tail style for the contextual menu.void setText(java.lang.String text)This method sets the PopupList item text.void setVisible(boolean visible)This sets the list visible or hidden.int size()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 Alternate: system property to</p><p>get orientation Receive changes as registered</p><p>OrientationListener Use a JADparameter to lock to</p><p>either portrait or landscape</p></li><li><p>com.nokia.mid.ui.orientation.Orientation</p></li><li><p>Interface com.nokia.mid.ui.orientation.OrientationListener</p><p> Use in yourCanvas,GameCanvas orCustomItem Change object height, width or layout for pleasing effects</p></li><li><p>Orientation By default, your app is locked portrait only To enable landscape/portrait orientation changes</p><p>1. Add attribute:Nokia-MIDlet-App-Orientation: manual</p><p>2. Register yourself as an OrientationListenerpublic class JavaFTMidlet extends MIDlet implements OrientationListener {</p><p>public void startApp() {Orientation.addOrientationListener(this);</p><p>}</p></li><li><p>Orientation Example: JavaTouch</p><p>portraitlandscape</p><p>ormanual</p><p>portraitlandscape</p><p>ormanual</p></li><li><p>Orientation Adapt content orientation to phone / display</p><p> setAppOrientation() calls sizeChanged()on the currentDisplayable</p><p> This allows you to intercept the changesbefore 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>ProceduralGraphics Translucent drawing Any size text fonts New font: Light</p></li><li><p>Nokia ScalableFonts</p><p>Font font =DirectUtils.getFont(face,style, customHeight); On some less expensive</p><p>phones, this will failgracefully to a standard Fontsize</p><p> Very handy for makingsubtly styled user interfaces</p></li><li><p>Light Font</p><p> UseDirectUtils.getFont()withDirectUtils.STYLE_LIGHT</p><p> You may also add anycombiation of Font.STYLE_BOLD Font.STYLE_ITALIC Font.STYLE_UNDERLINE</p><p> This may also degradegracefully to a different fontdepending on the phone</p></li><li><p>Demo- Scalable Font- Alpha blending</p></li><li><p>Input: Text andTouch Input</p></li><li><p>TextEditorVirtual Keyboard, Physical Keyboard</p><p>Multi-touchGestures</p></li><li><p>Checkingkeyboardtype</p><p> String keyboard =Sytem.getProperty(com.nokia.keyboard.type); None PhoneKeypad LimitedKeyboard4x10 LimitedKeyboard3x11 HalfKeyboard Custom Unknown</p><p>COMMON WITHCURRENT S40 PHONES</p></li><li><p>Standard MIDP does not support textinput onCanvas. So you cancreate yourown, or change the view to a full screen</p><p>TextBoxwhich is not a good userexperience.</p></li><li><p>TextEditor Custom Nokia class Text input on top ofCanvas Define exactlywhere on the</p><p>screen, all colors andtranslucency</p><p> Pricise control, no chrome.Adapt it to your applicationslook and feel.</p><p> TextEditorListener allows youto monitor user changes live</p><p>TransparentRectangle?</p></li><li><p>AlphaRect</p><p>void fillAlphaRect(Graphics g, int color, int x, int y, int w, int h){</p><p>int[] rgb = new int[w * h];</p><p>for (int i = 0; i &lt; w * h; i++){</p><p>rgb[i] = color;}</p><p>g.drawRGB(rgb, 0, w, x, y, w, h, true);}</p></li><li><p>TextEditorproperties</p><p> View properties Position Size Visibility Focus state</p><p> Color properties Background color with alpha channel Background highlight color with alphachannel Foreground color with alpha channel Foreground highlight color with alphachannel</p></li><li><p>TextEditorproperties</p><p> Text properties Caret position Editor constraints Text font Text selection Text content Maximal length of text Multiline</p><p> Other properties Initial input modes Text editor listener Receiving pointerevents</p></li><li><p>TextEditorListenerevents</p></li><li><p>TextEditor Text entry on aCanvas (custom UI)</p><p> MIDP: only fullscreenTextBox(bad UX)</p><p> Create own editor (not easy!)</p><p> NokiaTextEditorclass</p><p> Since Java Runtime 1.0.0</p><p> Define position, look &amp; feel</p><p> Full VKB support</p><p> Input modes: similar toTextField(email, numeric, pwd, etc.)</p><p> Landscape &amp; portrait</p><p> Listener available to check input, control caret movement, etc.</p><p>86 2012 Nokia Java ME Touch v1.0.1 April 4, 2012 Andreas Jakl</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 Keyb...</p></li></ul>