• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Session11 J2ME MID-Low Level User Interface(LLUI)-graphics

Session11 J2ME MID-Low Level User Interface(LLUI)-graphics



Session11 J2ME MID-Low Level User Interface(LLUI)-graphics

Session11 J2ME MID-Low Level User Interface(LLUI)-graphics



Total Views
Views on SlideShare
Embed Views



3 Embeds 14

http://microtechinfo.blogspot.com 10
http://www.docshut.com 3
http://www.blogger.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Session11 J2ME MID-Low Level User Interface(LLUI)-graphics Session11 J2ME MID-Low Level User Interface(LLUI)-graphics Presentation Transcript

    • Outline-session 11 (20-April-2009)
      • >>Low level User Interface
      • >> Graphics
      • -Introduction
      • -Obtaining a Graphics Object
        • - Setting Colors
        • -Getting Colors
        • -Using Grayscale
        • -Stroke Style
        • -Drawing Lines
        • -Drawing Arcs
        • -Drawing Rectangles
        • -Drawing Text
        • -Fonts
        • -Anchor point
        • -Drawing Images
        • -Clipping Regions
    • Introduction
      • >>Graphics object is the instrument for drawing on to a Canvas.
      • >>over 30 methods ,there is an abundance of operation from drawing of shapes and text to specifying fonts and Colors.
    • Obtaining Graphics Object
      • >>There are two way to acquire the Graphics Object.
      • 1.First way is inside paint method – Graphics class as a parameter.
      • >> public void paint(Graphics g)
      • {
      • }
      • 2.Second way using Mutable Image.
      • Mutable Image:
      • >> These images are created by requesting block of memory.
      • >>we have to specify the height and width of the image
      • // Create mutable image and get graphics object for image
      • Image tmpImg = Image.createImage(80, 20);
      • Graphics g = tmpImg.getGraphics();
    • Graphics Object
      • >>fundamental difference between the lifetime of a Graphics objects acquired inside paint() versus a Graphics object acquired through an Image.
      • 1. Through paint() method The Graphics reference is valid only inside paint(). Once
      • leaving (even if you save a reference to the variable), the object cannot be used to draw ontothe Canvas.
      • 2. Through an image The Graphics reference is valid as long as the Image and the variable that references the Graphics object are in scope. For example, depending on where the following declaration is made, image and g may be available for the lifetime of the MIDlet.
      • Colors Introduction:
      • >> 24 bits are allocated for color support; 8 bits to each of the colors: red, green, and blue
      • >>If a device does not support all possible colors in the range, it will map color requests to the closest possible match available.
      • >>This includes mapping a color request to an appropriate shade of gray for non-color
      • devices..
    • Setting Colors:
      • >>Colours API in Graphics class:
    • Setting Colors:
      • >> When setting the color, we have two choices:
      • -- combine the three color components into one integer
      • --value or specify each color as a separate integer
      • >> When combining colors, blue occupies the lower eight bits, followed by green, ending with red
      • >> // Assume 'g' is a valid Graphics object
      • int red = 0,
      • green = 126,
      • blue = 255;
      • >>g.setColor((red << 16) | (green << 8) | blue);
      • >>g.setColor(red, green, blue);
    • Getting Colors:
      • >> To get the current color configuration the options are the reverse of setting the colors
      • >> For separate color values use getRedComponent(), getGreenComponent() and getBlueComponent()
      • >> Masking off the appropriate color
        • int colors, red, green, blue;
        • colors = g.getColor();
        • // Return the highest 8 bits
        • red = colors & 0xFF0000
        • // Return middle eight bits
        • green = colors & 0xFF00;
        • // Return lowest 8 bits
        • blue = colors & 0xFF
    • Using Gray Scale
      • >> setGrayScale(int) allows selection of a shade of gray in the range of 0 to 255. As with a color device, if the value is outside the supported range, an appropriate match will be selected
    • Stroke Style
      • >> When drawing lines, arcs and rectangles we can choose between a solid or dashed stroke style.
      • >> Implementation
      • g.setStrokeStyle(Graphics.DOTTED);
      • or
      • g.setStrokeStyle(Graphics.SOLID);
      • >> Once the stroke style is set, every line, arc and rectangle drawn with the associated Graphics that will use that stroke style.
      • Important notes:
      • >> A dotted line is drawn by skipping pixels in drawing path
      • >> Which pixels are skipped is determined by the implementation
      • >> End points (of lines and arcs) and corners (of rectangles) are not guaranteed to be drawn
    • Drawing Line
      • >> Each line has a starting point, (x1 y1) and ending (x2 y2) point.
      • >> Regardless of the stroke style, the thickness of a line is always one pixel wide
      • >> The starting location of the line and the current location of the mouse were specified as the parameters to drawLine().
      • // Draw with black pen
      • g.setColor(0, 0, 0);
      • // Draw line
      • g.drawLine(startx, starty, currentx, currenty);
      • >> example doodle.java
    • Drawing Arcs
      • >> There are two methods to draw arcs: one to create an &quot;outline&quot; of an arc and the second to fill an arc.
      • >> The startAngle is the location to start the arc, where 0 is found at 3o'clock. Positive values go counter-clockwise startAngle of 90 the arc would begin at 12 o'clock.
      • >> The arcAngle is how many degrees to rotate from the startAngle
      • >> A startAngle of 0 and arcAngle of 180 would begin at 3 o'clock and rotate counter-clockwise to 9 o'clock
      • >> AstartAngle of 90 with an arcAngle of 180 would begin at 12 o'clock and rotate counterclockwise to 6 o'clock.
      • >> Sample : Arc.java
    • Drawing Rectangles
      • >>Rectangles can have either square or rounded corners and can be drawn as an outline or filled.
      • >>The parameters for a non-rounded rectangle should be unmistakable.
      • >>Specify the starting x and y location as well as the width and height.
      • >> When creating a rectangle with rounded corners we also specify the horizontal diameter (arcWidth) and the vertical diameter (arcHeight) of the arc drawn at each corner.
    • Drawing Text
      • >>we draw text we must take into consideration the font style currently assigned to the Graphics context
      • >> Fonts
      • --Font support within MIDP has been slimmed down significantly compared with J2SE
      • --A new Font is requested through the static method Font.getFont().
      • Font font = Font.getFont(Font.FACE_SYSTEM,Font.STYLE_PLAIN,Font.SIZE_MEDIUM);
      • --The idea behind using a static method is in an effort to conserve resources, specifically, limiting garbage collection.
      • --When requesting a Font keep in mind that the implementation may not be able to accommodate your request.
    • Fonts
      • >> There are three attributes associated with a Font: the face, style and size
      • >> Unlike the face and size, you can combine style attributes using a logical OR (|) operator
      • Font font = Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD | Font.STYLE_ITALIC,Font.SIZE_MEDIUM);
    • Fonts
      • >> There are seven methods for querying a fonts attributes
      • >> One method worth mentioning is getStyle(), which returns an integer that may be any combination of the style attributes
      • Font font = Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD | Font.STYLE_ITALIC | Font.STYLE_UNDERLINED,Font.SIZE_MEDIUM);
      • int style = font.getStyle();
      • The variable style will have the value 7. Here's why.
    • Fonts Metrics
      • >> Metrics describe information regarding various measurements of a Font.
      • >> The ascent is the distance from the baseline to the top of the majority of characters
      • >> The descent is the distance from the baseline down to the bottom of the majority of characters
      • >> Leading is the gap between the descent of one line and the ascent of the next
      • >>The font height is defined as the, which makes up the distance between baselines. ascent + leading + descent
      • >>The advance is the total &quot;distance&quot; occupied by a character or string of characters.
      • >>The advance is more than just the width of the individual characters, it also takes into consideration the gap between characters
    • Fonts Metrics Method
      • >> getHeight() returns the font height
      • >> getBaselinePosition() returns the ascent, the distance from the baseline to the top of the tallest character.
    • Anchor Point
      • >>To provide for additional flexibility and make it easier to align text,the concept of an anchor point was introduced
      • >>Anchor points are defined in pairs, just like x and y coordinates.
      • >>The x (horizontal) values are LEFT, HCENTER and RIGHT
      • >>The y (vertical) values are TOP, BASELINE and BOTTOM
      • >>Picture these pairs as points around an imaginary box, known as the bounding box,
    • Anchor Point
      • >>Anchor Point
      • g.drawString(&quot;core j2me&quot;, 0, 0 ,Graphics.TOP | Graphics.LEFT);
      • g.drawString(&quot;core j2me&quot;, 0, 0 ,Graphics.TOP | Graphics.HCENTER);
    • Drawing Text
      • >> drawing text is nothing more than deciding which method to call
      • >> We can opt to draw a single character, an array (or subset of an array) of characters, a String or subset of a String
      • >> Sample: Text
    • Drawing Image
      • >>Drawing of images is not unlike drawing a line or text
      • >> drawImage(Image, int x, int y, int anchor)
      • >> we need to lay the groundwork before calling drawImage().
      • Immutable Image
      • 1. Allocate the image
      • Image im = Image.createImage(“/imageTest.png”);
      • 2. Display the image
      • protected void paint(Graphics g)
      • {..g.drawImage(im, 10, 10, Graphics.LEFT | Graphics.TOP);...}
      • Mutable Image
      • 1. Allocate the image
      • Image im = Image.createImage(80, 20);
      • 2. Create the image content (using arcs, rectangles, lines and text)
      • // Get Graphics object to draw onto image Graphics graphics = im.getGraphics();
      • // Draw a filled rectangle graphics.fillRoundRect(0, 0, 50, 50, 20, 20);
      • 3. Display the image
      • protected void paint(Graphics g){…g.drawImage(im, 10, 10, Graphics.LEFT | Graphics.TOP);…}
    • Drawing Image
      • >> ImmutableImage.java
      • >>MutableImage.java
    • Clipping Regions
      • >> A clipping region can be used to limit what is painted on the display
      • >> One important benefit is a reduction in the time to refresh the display
      • >> sample Clip.java