Ads 468x60px

Tuesday, August 10, 2010

J2ME Low Level GUI

Sorry for the late update since I was down with flu for several days. So lets get back to Java Mobile Programming :).
As in the last post I gave some clue what are we going to learn in upcoming posts.I think last drawing example did work for everyone. In this chapter we are going to learn J2ME Low Level GUI in detail.

J2ME Low Level GUI... Hmm when you hear this heading there is something that you all may ask. Is there a J2ME High Level GUI?...The answer is simply YES. Look at the picture I've put below. This explain the whole story. 

J2ME high Level GUI + Low Level GUI
Why we need J2ME low level GUI If there is a High Level GUI? The answer is that Low Level GUI gives the developer the full control of the MIDlet display at pixel level where some applications require greater control over the user interface. But there are some limitations when comes to Low Level GUI. Examples for the J2ME Low Level API are
a game board, Graph etc.

Developer can acquire those advantages through J2ME low level GUI design
1. Higher control on what is drawn on the Display.
2. Access concrete keys and other input devices.
3. Handle primitive events such as key presses and key releases.

 The Canvas API

The Graphics and Canvas classes are used to directly access the Display and the Low level user interfcae API. Canvas class provide display surface, dimentions, and the developer has to overridden the methods of this class to paint the screen where necessary.The Graphics class provide methods to draw lines, rectangles, arcs, text and images. In my last example We have drawn lines and rectangles. The Canvas dimensions can be obtained through getWidth() and getHeight() methods so you dont have to wory about different screen sizes from different vendors.

Important Code Segment you should remember for J2ME low level gui
import javax.microedition.lcdui.*;

public class MyCanvas extends Canvas{
    public void paint(Graphics g){
    // Here you can draw things
You need two classes for a J2ME low level GUI drawing. One for the MIDlet and other for the Drawing Canvas.
SimpleDraw Example 2

 * To change this template, choose Tools | Templates
 * and open the template in the editor.

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;

 * @author Aruna Sujith
public class SimpleDraw2 extends MIDlet {

    Display myDisplay;
    Draw myDraw;

    public SimpleDraw2() {
        myDisplay = Display.getDisplay(this);
        myDraw = new Draw();

    public void startApp() {

    public void pauseApp() {

    public void destroyApp(boolean unconditional) {

class Draw extends Canvas {

    protected void paint(Graphics g) {
        g.fillRect(0, 0, getWidth(), getHeight());
        g.drawLine(0, 0, getWidth(), getHeight());
        g.drawLine(getWidth(), 0, 0, getHeight());

Important things to notice in this example are,  g.setColor(0xffffff);  will set the colour of your drawing pen. We can set the colour in 0x000000 to 0xffffff or we can set the colour parameter in (R,G,B) Red Green Blue value combinations. example g.setColor(255,0,0); will set the colour into red.
g.fillRect(0, 0, getWidth(), getHeight()); method will draw a rectangle starting from (0,0) coordinate values and the rectagle width and height will be the height of the screen.
(Try commenting the first two lines of setColor adn fillRect and see whats going to happen. Interesting ne?Yeah the canvas is by default transparent so thats why we draw a white square on top of it. ) Then set the colour into black  g.setColor(0x000000); using this method. drawLine Method will draw a line and the method parameters are drawLine(x value,y value, width size, height size);

Coordinate system in J2ME display
coordinate system
Important : Notice that (0,0) point is in the upper left corner in the display. You have to take this in mind when you draw things otherwise you'll get confuse.
Practice those examples and try to use various methods availabel in Graphics such as drawArc(), fillArc() etc ... See you next time in another exciting J2ME  lesson. 

1 comment:

  1. Thank you for the info. It sounds pretty user friendly. I guess I’ll pick one up for fun. thank u

    J2ME Developer