Scmad Chapter06


Published on

SCMAD Certification Guide - Chapter 06 Canvas and Custom Items
This material is created only for studying purposes.

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Scmad Chapter06

    1. 1. By Marcel Caraciolo Chapter 06– MIDP: User Interface SCMAD Certification 45mm 61mm
    2. 2. Agenda <ul><li>Low level User interface </li></ul><ul><li>Canvas </li></ul><ul><li>Graphics </li></ul><ul><li>CustomItem </li></ul>
    3. 3. MIDP : High User Interface - CustomItem <ul><li>Allow using Canvas features inside a form </li></ul><ul><li>A custom item will handle user input and render </li></ul><ul><li>outputs </li></ul><ul><li>Like any other item, it’s composed of label + </li></ul><ul><li>component. The label is rendered by the device, </li></ul><ul><li>while the application will render the component </li></ul><ul><li>As in Canvas, the device calls paint() method to </li></ul><ul><li>render the outputs </li></ul><ul><li>Use Preferred size and Minimum Size </li></ul><ul><li>“ Item navigation” may temporarily be delegated to </li></ul><ul><li>the component </li></ul>
    4. 4. CustomItem: Abstract methods <ul><li>paint(graphics,width,height): </li></ul><ul><ul><li>Same behavior from Canvas.paint </li></ul></ul><ul><ul><li>Component size (width,height) is a parameter </li></ul></ul><ul><li>getMinContentWidth, getMinContentHeight: </li></ul><ul><ul><li>Must return the minimum component size </li></ul></ul><ul><li>getPrefContentWidth(height),getPrefContentHeight(width) </li></ul><ul><ul><li>Us eful to calculate the best size for the component. When the </li></ul></ul><ul><ul><li>width is calculated, the height is passed as parameter and vice- </li></ul></ul><ul><ul><li>versa (-1 will be sent if it’s not yet defined). </li></ul></ul>
    5. 5. CustomItem: Super class methods <ul><li>repaint,repaint(x,y,w,h), getGameAction: </li></ul><ul><ul><li>Similar to Canvas methods </li></ul></ul><ul><li>getInteractionModes: </li></ul><ul><ul><li>Returns an integer with a bitmask indicating the supported </li></ul></ul><ul><ul><li>interaction modes: </li></ul></ul><ul><ul><ul><li>TRANSVERSE_HORIZONTAL, TRANSVERSE_VERTICAL : if the “navigation” inside the item is allowed. </li></ul></ul></ul><ul><ul><ul><li>KEY_PRESS,KEY_RELEASE,KEY_REPEAT : Keyboard events </li></ul></ul></ul><ul><ul><ul><li>POINTER_PRESS,POINTER_RELEASE,POINTER_DRAG: Touchscreen events </li></ul></ul></ul><ul><li>invalidate: </li></ul><ul><ul><li>Requests a component re-initialization (size is re-calculated, and </li></ul></ul><ul><ul><li>the component is redrawn.) </li></ul></ul><ul><li>Inherits notifyStateChanged() method from Item, which is used to trigger events on ItemStateListener. </li></ul>
    6. 6. CustomItem: Callback methods <ul><li>sizeChanged(w,h): The size calculated by minContent and prefContent may not be allowed by the platform. If this is the case, this method will be called. It’s also called when the component size is changed. </li></ul><ul><li>showNotify , hideNotify: Notifies when an item is shown or hidden </li></ul>
    7. 7. CustomItem: Callback methods <ul><li>Transverse(dir,viewportWidth,viewportHeight,visRect_inout[]): </li></ul><ul><ul><li>Notifies that a navigation event happened on an item </li></ul></ul><ul><ul><li>Parameters: </li></ul></ul><ul><ul><ul><li>dir : Canvas.UP, DOWN, LEFT, RIGHT or NONE (None: User </li></ul></ul></ul><ul><li>clicked with a touchscreen) </li></ul><ul><ul><ul><li>viewportWidth, viewportHeight: Size of the visible area </li></ul></ul></ul><ul><ul><li>visRect inout: In/Out parameter. Array of int[4] with [x, y,w, h], </li></ul></ul><ul><li>where x, y is the distance from the origin, and w, h are the size of the rectangle. State may be kept on the component (and used at paint method). It may be easier to ignore this </li></ul><ul><li>parameter </li></ul><ul><ul><li>Returns true when the navigation happened internally, and false when the focus shall be lost </li></ul></ul>
    8. 8. CustomItem: Callback methods <ul><li>traverseOut(): Indicates that the focus was lost </li></ul><ul><li>keyPressed(keyCode), keyReleased(keyCode), </li></ul><ul><li>keyRepeated(keyCode): Notify keyboard events </li></ul><ul><li>pointerPressed(x, y), pointerReleased(x, y), </li></ul><ul><li>pointerDragged(x, y): Notify touchscreen events </li></ul>
    9. 9. Low User Interface: Diagram
    10. 10. Low Low User Interface <ul><li>Based on Canvas, not on Screen </li></ul><ul><li>You draw on a “canvas”, High Level widgets are not used </li></ul><ul><li>Portability depends on how do you code your application. </li></ul><ul><li>You need to consider device features like screen sizes and </li></ul><ul><li>input devices </li></ul><ul><li>Based on Canvas and GameCanvas: </li></ul><ul><ul><li>Canvas: Useful for showing charts and for applications where all the events are triggered by user input (e.g. card games) </li></ul></ul><ul><ul><li>GameCanvas: Graphics for real time games, where the events occur according to the running time </li></ul></ul>
    11. 11. Can Canvas <ul><li>Screen” itself, where the images will be generated </li></ul><ul><li>Abstract class, application shall extend it. It must </li></ul><ul><li>implement the paint(graphics) method, which is called </li></ul><ul><li>when the screen is rendered </li></ul><ul><li>May also implement logic to handle user input </li></ul><ul><li>Drawing itself is done through a graphics object passed as parameter to the paint method </li></ul>
    12. 12. Can Canvas: The Life-Cycle
    13. 13. Can Canvas.paint(graphics) <ul><li>Called by the system to paint a screen before it’s shown </li></ul><ul><li>Shall paint all the points on the screen, since the platform will not do this automatically </li></ul><ul><li>This graphics instance shall NEVER be used outside the scope of this method </li></ul>
    14. 14. Can Canvas: SuperClass methods <ul><li>isDoubleBuffered: If double buffering is supported </li></ul><ul><li>hasPointerEvents: If a touchscreen is available (e.g. PDA’s) </li></ul><ul><li>hasPointerMotionEvents: If the touchscreen allows drag </li></ul><ul><li>and-drop </li></ul><ul><li>hasRepeatEvents: If holding a key has the same effect as </li></ul><ul><li>pressing several times </li></ul><ul><li>setFullScreenMode(boolean): Shows a canvas on full screen </li></ul>
    15. 15. Can Canvas: SuperClass methods <ul><li>repaint() and repaint(x, y, width, height): Requests the screen to be painted again (paint() will be called). The parameters define the size of the screen that shall be re-painted. When these parameters are informed, the graphics passed to paint method has a clip-region greater or equal to the informed area. This data can be used to optimization </li></ul><ul><li>serviceRepaints(): Blocks until all calls to “paint” that are queued return. May cause deadlocks </li></ul>
    16. 16. Can Canvas: Callback methods <ul><li>keyPressed(keyCode): Key was pressed </li></ul><ul><li>keyRepeated(keyCode): Key is being hold </li></ul><ul><li>keyReleased(keyCode): Key is no longer pressed </li></ul><ul><li>pointerPressed(x, y): Pointer was pressed at x, y </li></ul><ul><li>pointerReleased(x, y): Pointer is no longer pressed at x, y </li></ul><ul><li>pointerDragged(x, y): Pointer is being dragged through x, y </li></ul><ul><li>showNotify(): Canvas is going to be shown </li></ul><ul><li>hideNotify(): Canvas is no longer being shown </li></ul><ul><li>sizeChanged(): Canvas was resized </li></ul>
    17. 17. Can Canvas: Key Events <ul><li>keyPressed, keyRepeated and keyReleased methods receive </li></ul><ul><li>keyCode parameter, to inform which key was pressed. </li></ul><ul><li>Cellphone keys available are: </li></ul><ul><ul><li>KEY NUM0 - KEY NUM9 (0 - 9) </li></ul></ul><ul><ul><li>KEY STAR (*) </li></ul></ul><ul><ul><li>KEY POUND (#) </li></ul></ul><ul><li>Game keys are also available. Their value is found by </li></ul><ul><li>getGameAction(keyCode). Available game keys are: </li></ul><ul><ul><li>UP, DOWN, LEFT, RIGHT </li></ul></ul><ul><ul><li>FIRE, GAME A, GAME B, GAME C, GAME D </li></ul></ul>
    18. 18. Can Canvas: Key Events <ul><li>A single Game Key can be linked to several keys (e.g. UP may be mapped both to “2 key” and to “up key”) </li></ul><ul><li>Other keys may be available. To enforce portability, you should only use default keys </li></ul><ul><li>A textual description can be found by </li></ul><ul><li>getKeyName(keyCode) </li></ul>
    19. 19. Can Graphics <ul><li>Useful for rendering images (text, images, geometric shapes) on screen </li></ul><ul><li>Color model: 24 bits (8 bits for each color). When the </li></ul><ul><li>device does not support a requested color, it will use a </li></ul><ul><li>similar one (even for gray scales) </li></ul><ul><li>Coordinate system with origin (0, 0) on the upper left </li></ul><ul><li>corner. X grows to the right and Y grows down. This </li></ul><ul><li>coordinate system may be translated </li></ul><ul><li>Every Graphics is rectangular and all pixels are square </li></ul>
    20. 20. Can Graphics: methods <ul><li>drawString(str , x, y, anchor): </li></ul><ul><ul><li>Draws a string on the specified position </li></ul></ul><ul><ul><li>Anchor defines a reference point from which a message is placed. </li></ul></ul><ul><ul><li>Horizontal positioning is made with ( LEFT, HCENTER, RIGHT ) and </li></ul></ul><ul><ul><li>vertical with (TOP, BASELINE, BOTTOM ) </li></ul></ul><ul><li>drawLine(x1, y1, x2, y2): </li></ul><ul><ul><li>Draws a line from (x1, y1) to (x2, y2). If (x1, y1)==(x2, y2), a pixel </li></ul></ul><ul><ul><li>is drawn </li></ul></ul><ul><li>fillTriangle(x1, y1, x2, y2, x3, y3): </li></ul><ul><ul><li>Fills a triangle </li></ul></ul>
    21. 21. Can Graphics: Anchors
    22. 22. Can Graphics: methods <ul><li>setColor(r,g,b), setColor(rgb), setGrayScale(value): </li></ul><ul><ul><li>Set color via r,g,b (8 bits for each component) with a single integer (0x00RRGGBB) or set a gray scale (8 bits) </li></ul></ul><ul><li>setStrokeStyle(style): </li></ul><ul><ul><li>Lines, arcs, and rectangles may be drawn with a solid or a dotted </li></ul></ul><ul><ul><li>lines ( SOLID or DOTTED). Spacing between points is implementation-specific and not-customizable. </li></ul></ul><ul><li>drawRectangle/fillRectangle(x,y,width,height): </li></ul><ul><ul><li>Draws or fills a rectangle </li></ul></ul>
    23. 23. Can Graphics: methods <ul><li>drawArc/fillArc(x,y,h,startAngle,arcAngle): </li></ul><ul><ul><li>Draws or fills arcs and circles. Angles are specified in degrees. </li></ul></ul><ul><li>drawRoundRect/fillRoundRect(x,y,w,h,arcW,arcH): </li></ul><ul><ul><li>Draws or fills rectangles with round edges </li></ul></ul><ul><li>setFont(font): </li></ul><ul><ul><li>Sets the font to be used with Strings </li></ul></ul><ul><li>drawImage(img,x,y,anchor): </li></ul><ul><ul><li>Draws a image in a specified position </li></ul></ul><ul><ul><li>The image may use transparency (devices must support at least two transparecy levels i.e. full opaque or full transparent) </li></ul></ul><ul><ul><li>Like String, it uses anchors for positioning. VCENTER is used instead of BASELINE. </li></ul></ul>
    24. 24. Can Graphics: methods <ul><li>translate(x,y): </li></ul><ul><ul><li>Translates the reference point (origin). To return to the original reference, you may call g.translate(ax – g.getTranslateX() , ay – g.getTranslateY()) </li></ul></ul><ul><li>setClip(x,y,width,height): </li></ul><ul><ul><li>Sets a clip area to limit painting (like “framing” the image). Paints outsides of this area are ignored. </li></ul></ul><ul><li>drawRGB(data[],offset,scanlength,x,y,w,h,procAlpha): </li></ul><ul><ul><li>Renders an integer array with format: 0xAARRGGBB, where AA stands for transparency. Offset: first index on the array. Scanlength: number of elements that define a “line”. </li></ul></ul>
    25. 25. Can Graphics: Overview
    26. 26. Example Codes <ul><li>Some examples and MIDlets samples are available for reference and studying at this link: </li></ul><ul><ul><li> </li></ul></ul><ul><li>The source codes include: </li></ul><ul><ul><li>CustomItemMIDlet </li></ul></ul><ul><ul><li>GraphicMIDlet </li></ul></ul><ul><ul><li>KeyInputMIDlet </li></ul></ul><ul><ul><li>LowLevelMIDlet </li></ul></ul>
    27. 27. Future Work <ul><li>Next Chapter: </li></ul><ul><ul><li>MIDP – Util </li></ul></ul><ul><ul><ul><li>Timers </li></ul></ul></ul><ul><ul><ul><li>User Interface API Classes </li></ul></ul></ul><ul><ul><ul><li>MIDP Classes </li></ul></ul></ul><ul><ul><li>Introduction to MIDP - GameUI </li></ul></ul>
    28. 28. References <ul><li>ALVES F. Eduardo. SCMAD Study Guide, </li></ul><ul><li>27/04/2008. </li></ul><ul><li>JAKL Andreas, Java Platform, Micro Edition Part </li></ul><ul><li>01 slides, 12/2007. </li></ul><ul><li>Sun Certification Mobile Application Developer </li></ul><ul><li>Website: []. </li></ul>