J2ME Low Level UI 1 - PowerPoint PPT Presentation

1 / 36

About This Presentation

Title:

J2ME Low Level UI 1

Description:

Creates a new, mutable image for off-screen drawing. ... int height) creates a new mutable image of the given size. Mutable images can be modified by calling ... – PowerPoint PPT presentation

Number of Views:126

Avg rating:3.0/5.0

Slides: 37

Provided by: Sta782

Category:

more less

Transcript and Presenter's Notes

Title: J2ME Low Level UI 1

1
J2ME Low Level UI 1
2
Introduction

In contrast to the high-level GUI, the low-level
API allows full control of the MIDlet display at
pixel level.
The lcdui package contains a special kind of
screen called Canvas.

3
Canvas class

The Canvas provides a paint() method similar to
the paint() method in J2SE AWT components.
Provides developers with methods to
Handle game actions, key events, etc.
Obtain device capabilities and keyboard mapping
The only parameter of the paint() method is a
Graphics object.

import javax.microedition.lcdui. public class
SampleCanvas extends Canvas public void
paint(Graphics g) // Draw stuff using
g.
4
Canvas class

You CANNOT call the paint() method of Canvas.
Instead, you should call the repaint() method of
Canvas.
The system is notified that a repaint is
necessary, and it will call the paint() method.
The call of the paint() method is not performed
immediately it may be delayed until the control
flow returns from the current event handling
method.
The system may also collect several repaint
requests before paint() is actually called.

5
Basic Drawing

The Graphics object provides all the methods
required for actually drawing the content of the
screen, such as
drawLine() for drawing lines,
fillRect() for drawing a filled rectangular area
or
drawstring() for drawing text strings.
You cannot display high-level and low-level
components on the screen simultaneously.

6
Simple Example

Let's look at a simple drawing example first
import javax.microedition.midlet.
import javax.microedition.lcdui.
class DrawingDemoCanvas extends Canvas
public void paint (Graphics g)
g.setColor(0xffffff)
g.fillRect (0, 0, getWidth (), getHeight ())
g.setColor(0x0)
g.drawLine (0, 0, 100, 200)
g.setColor(255, 0, 0)
g.fillRect (20, 30, 30, 20)

7
Simple Example

public class SimpleDrawingDemo extends MIDlet
public void startApp ()
Display.getDisplay (this).setCurrent (
new DrawingDemoCanvas () )
public void pauseApp ()
public void destroyApp (boolean b)

You need two classes for the low level UI
programs one for the MIDlet and another one for
the Canvas.
8
Coordinate Space

All drawing on a Canvas takes place in a
coordinate space based on the pixels of the
device.
By default, the origin of this coordinate space
is located in the upper-left corner of the
Canvas.
X coordinates increase in the right-hand
direction, while Y coordinates increase in the
downward direction.

9
Simple Drawing Methods

Graphics contains a collection of methods that
draw and fill simple shapes.
Refer to API Doc for full details.
The draw methods include
drawLine(int x1, int y1, int x2, int y2)
Draws a line between the coordinates (x1,y1) and
(x2,y2) using the current color and stroke style.
drawRect(int x, int y, int width, int height)
Draws the outline of the specified rectangle
using the current color and stroke style.
drawRoundRect(int x, int y, int width, int
height, int arcWidth, int arcHeight)
Draws the outline of the specified rounded corner
rectangle using the current color and stroke
style.

10
Simple Drawing Methods

drawString(String str, int x, int y, int anchor)
Draws the specified String using the current font
and color.
drawArc(int x, int y, int width, int height, int
startAngle, int arcAngle)
Draws the outline of a circular or elliptical arc
covering the specified rectangle, using the
current color and stroke style.
drawImage(Image img, int x, int y, int anchor)
Draws the specified image by using the anchor
point.

11
Simple Drawing Methods

The fill methods include
fillArc(int x, int y, int width, int height, int
startAngle, int arcAngle)
Fills a circular or elliptical arc covering the
specified rectangle.
fillRect(int x, int y, int width, int height)
Fills the specified rectangle with the current
color.
fillRoundRect(int x, int y, int width, int
height, int arcWidth, int arcHeight)
Fills the specified rounded corner rectangle with
the current color.
fillTriangle(int x1, int y1, int x2, int y2, int
x3, int y3)
Fills the specified triangle will the current
color.

12
Drawing Color and Style

MIDP provides a setColor() method.
setColor(int RGB)
Sets the current color to the specified RGB
values.
setColor(int red, int green, int blue)
Sets the current color to the specified RGB
values.
the values range from 0 to 255, where 255 means
brightest and 0 means darkest.
MIDP also provides setGrayScale method to set
gray scale value.

13
Simple Drawing Example

import javax.microedition.lcdui.
import javax.microedition.midlet.
class DrawShapesCanvas extends Canvas
public void paint(Graphics g)
int w getWidth()
int h getHeight()
g.setColor(0xffffff)
g.fillRect(0, 0, w, h)
g.setColor(0x000000)
for (int x 0 x lt w x 10)
g.drawLine(0, w - x, x, 0)
for (int x 0 x lt w x 20)
g.setColor(128, 0, 255x/w)
g.fillRect(x, h-30, 20, 20)

Can you figure out how the patterns are drawn?
14
Simple Drawing Example

public class DrawShapesDemo extends MIDlet
public void startApp()
Displayable d new DrawShapesCanvas()
d.addCommand(new Command("Exit",
Command.EXIT, 0))
d.setCommandListener(new CommandListener()
public void commandAction(Command c,
Displayable s)
notifyDestroyed()
)
Display.getDisplay(this).setCurrent(d)
public void pauseApp()
public void destroyApp(boolean unconditional)

15
More Drawing

The actual size of the accessible display area
can be queried using the getWidth() and
getHeight() methods.
The drawing region can be limited to a
rectangular area by the clipRect() method.
Drawing outside the clip area will have no
effect.
The setStrokeStyle() method sets the drawing
style of lines to DOTTED or SOLID, defined in the
Graphics class.

16
Clipping Area Example

The example draws two lines, one solid overlayed
one dotted.
Only the part covered by the clipping area is
redrawn solid, although the line coordinates are
identical.

17
Clipping Area Example

import javax.microedition.lcdui.
class ClipDemoCanvas extends Canvas
public void paint (Graphics g)
g.setGrayScale (255)
g.fillRect (0, 0, getWidth (), getHeight ())
int m Math.min (getWidth (), getHeight ())
g.setGrayScale (0)
g.setStrokeStyle (Graphics.DOTTED)
g.drawLine (0, 0, m, m)
g.setClip (m / 4, m / 4, m / 2, m / 2)
g.setStrokeStyle (Graphics.SOLID)
g.drawLine (0, 0, m, m)

18
Drawing Text

The package lcdui provides the method
drawstring() to draw strings.
drawString(String str, int x, int y, int anchor)
Draws the specified String using the current font
and color.
Anchor determines the horizontal and vertical
alignment of the text.
It lets you position the text relative to any of
the four corners, the text baseline and the
horizontal center.
Constant for horizontal alignment
LEFT, RIGHT and HCENTER
Constants for vertical alignment
TOP, BOTTOM and BASELINE

19
Drawing Text

The sum or "logical or" () of a constant for
horizontal alignment and constants for vertical
alignment determines the actual alignment.
Valid combinations of the alignment constants and
the corresponding anchor points.

20
Text Position Example

public class TextCanvas extends Canvas
public void paint(Graphics g)
int w getWidth()
int h getHeight()
g.setColor(0xffffff)
g.fillRect(0, 0, w, h)
g.setColor(0x000000)
// First label the four corners.
g.drawString("corner", 0, 0,
Graphics.TOP Graphics.LEFT)
g.drawString("corner", w, 0,
Graphics.TOP Graphics.RIGHT)
g.drawString("corner", 0, h,
Graphics.BOTTOM Graphics.LEFT)
g.drawString("corner", w, h,
Graphics.BOTTOM Graphics.RIGHT)
g.drawString("Mobile Computing", w / 2, h /
2,
Graphics.BASELINE Graphics.HCENTER)

21
Font

Graphics class provides setFont() and getFont()
to change the appearance of the text drawn.
Font getFont()
Gets the current font.
void setFont(Font font)
Sets the font for all subsequent text rendering.
Use Font.getFont() to create a new font.
MIDP provides support for three different fonts
in three different sizes and with the three
different attributes. (How many combinations are
there?)

22
Font

A Font object is created by calling
Font.getFont().
Font getFont(int face, int style, int size)
Obtains an object representing a font having the
specified face, style, and size.
The style constants can be combinedfor example,
STYLE_ITALICS STYLE_BOLD will result in a bold
italics font style.

23
Font Demo Example

class FontDemoCanvas extends Canvas
static final int styles Font.STYLE_PLAIN,
Font.STYLE_BOLD,
Font.STYLE_ITALIC
static final int sizes Font.SIZE_SMALL,
Font.SIZE_MEDIUM,
Font.SIZE_LARGE
static final int faces Font.FACE_SYSTEM,
Font.FACE_MONOSPACE,
Font.FACE_PROPORTIONAL
public void paint (Graphics g)
Font font null
int y 0
g.setGrayScale (255)
g.fillRect (0, 0, getWidth (), getHeight ())
g.setColor (0x0000ff )

24
Font Demo Example

for (int size 0 size lt sizes.length
size)
for (int face 0 face lt faces.length
face)
int x 0
for (int style 0 style lt
styles.length style)
font Font.getFont
(faces face, styles style,
sizes size)
g.setFont (font)
g.setColor (0x0000ff )
g.drawString
("Test", x1, y1, Graphics.TOP
Graphics.LEFT)
g.setColor (0 )
g.drawRect(x, y, font.stringWidth
("Test")1,
font.getHeight () 1)
x font.stringWidth ("Test")1
y font.getHeight () 1

25
Font

To organize the text properly, the Font class
also provides additional information about the
font, such as its width and height in pixels,
baseline position, ascent and descent, and so on.

26
Images

The only file format that is mandatory for MIDP
is the Portable Network Graphics (PNG) file
format.
drawImage(Image img, int x, int y, int anchor)
Draws the specified image by using the anchor
point.

27
Images

An image can be loaded from the JAR file using
the static method Image.create
static Image createImage(String name)
Creates an immutable image from decoded image
data obtained from the named resource.
static Image createImage(int width, int height)
Creates a new, mutable image for off-screen
drawing.
static Image createImage(byte imageData, int
imageOffset, int imageLength)
Creates an immutable image which is decoded from
the data stored in the specified byte array at
the specified offset and length.
static Image createImage(InputStream stream)
Creates an immutable image from decoded image
data obtained from an InputStream.

28
Images

The static method Image.create (int width, int
height) creates a new mutable image of the given
size.
Mutable images can be modified by calling
getGraphics ().
The Graphics object returned can be used for
modifying the image with all the methods provided
by the Graphics class.

29
Image Demo Example

class ImageDemoCanvas extends Canvas
Image image
public ImageDemoCanvas ()
try
image Image.createImage ("/print.png")
catch (Exception e)
e.printStackTrace()
public void paint (Graphics g)
g.setGrayScale (255)
g.fillRect (0, 0, getWidth (), getHeight ())
g.drawImage (image, 0, 0, Graphics.TOP
Graphics.LEFT)
g.drawImage (image, getWidth () / 2,
getHeight () / 2,
Graphics.HCENTER Graphics.VCENTER)
g.drawImage (image, getWidth (), getHeight
(),
Graphics.BOTTOM Graphics.RIGHT)

30
Special Effect

MIDP2.0 supports the following special effect
Transparency
Full-screen mode
Vibration
Flashing backlight

This lecture
Next lecture
31
Special Effect - Transparency

J2ME supports transparency
PNG images already have alpha values (degree of
transparency) included.
It is also possible to create a transparent image
from an array of pixel data
Image createRGBImage(int rgb, int width, int
height, boolean processAlpha)
Creates an immutable image from a sequence
of ARGB values, specified as 0xAARRGGBB.