Unit II - Chapter 4 - How to work with Low Level Graphics?

Low level graphics are needed when the programmer wants to have a very fine control on the contents of the screen. This may be in case of games or custom user screens like the grid.

 

The canvas is a very important class for game and multimedia application developers. Also this class is of a great use to those whose needs are not fulfilled by the high level user interface APIs. Some of the possible practical scenarios where this class is used instead of the high level user interface APIs are:

  • Gaming
  • Customized input screens
  • Multimedia presentations
  • Local language inputs
  • Customized output screens

The paint method which is an abstract method should be implemented for the customized drawing operations.

Example

public void paint(Graphics g)

{

g.drawLine(10,10,100,100) ;

}

The canvas class gives the ability to the application developer to have a fine grained control over the user interface inputs. The developer has the ability to control the reaction of the application to the user inputs through the use of the following methods:

Keys

·         protected void keyPressed (int keyCode)

·         protected void keyReleased (int keyCode)

·         protected void keyRepeated (int keyCode)

Pointer

·         protected void pointerDragged (int x, int y)

·         protected void pointerPressed (int x, int y)

·         protected void pointerReleased (int x, int y)

Every key for which events are reported to Mobile Information Device Profile applications is assigned a key code and the key code values are different for each hardware key unless two keys are obvious synonyms for each other. The following are the keys defined by the MIDP 1.0 platform:

·         public static final int KEY_NUM0

·         public static final int KEY_NUM1

·         public static final int KEY_NUM2

·         public static final int KEY_NUM3

·         public static final int KEY_NUM4

·         public static final int KEY_NUM5

·         public static final int KEY_NUM6

·         public static final int KEY_NUM7

·         public static final int KEY_NUM8

·         public static final int KEY_NUM9

·         public static final int KEY_STAR

·         public static final int KEY_POUND

The above mentioned keys correspond with the standard ITU-T standard telephone key pad. There may also be many other keys which are not necessary to be there in all the phones. Thus the use of the above mentioned standard keys in the applications is advocated.

It is recommended out of practical experience that for portability applications that need arrow key events and gaming-related events should also use game actions alongside the key codes and key names. The following game actions are defined in this platform:

·         public static final int UP

·         public static final int DOWN

·         public static final int LEFT

·         public static final int RIGHT

·         public static final int FIRE

·         public static final int GAME_A

·         public static final int GAME_B

·         public static final int GAME_C

·         public static final int GAME_D 

The public int getGameAction (int keyCode) method is used to get the game actions from the key codes

Example

public void keyPressed( int keyCode )
{
        int gameAction ;
        gameAction = getGameAction( keyCode ) ;
        
         if(gameAction == Canvas.FIRE)
         {
               // Code
          }
}

Note: This class should be implemented and used. Also remember to call the repaint method whenever you want to refresh the contents.

Graphics

If canvas is the slate than the Graphics class is the pen. Looking at the constraints posed to the programming model, this class contains some excellent methods for drawing on a 2 Dimensional surface.

This class supports simple pixel replacement and does not support raster operations. It supports a 24-bit color model, with:

  • 8 bits – Red
  • 8 bits – Green
  • 8 bits – Blue 

As the mobile phone environment is a very constrained one, in terms of resources, therefore no device supports 24 bit colors. Therefore the color requested by the application if unavailable, will be suitably replaced by an appropriate color available on the device. Though this is a good feature, care should be taken to test this on the actual devices involved as the end results can vary significantly from device to device. Normally color devices have 4096 or 65536 colors these days.

This class is a part of the Low Level API and thus its results are not very portable. Yet you as a programmer could achieve a high level of portability through the use of:

  • ‘SKJ UI Portability Technique’

Some of the major drawing and other operations supported by this class are:

  • Clipping
  • Arc Drawing
    • Plain
    • Filled 
  • Character Drawing
  • String Drawing
  • Image Drawing
  • Line Drawing
  • Rectangle Drawing
    • Plain
    • Filled
    • Round
    • Round Filled
  • Coloring
  • Translation
  • Host of other operations

These operations are of a great use in gaming and multimedia display.

                                                           

DrawString Method                                                                              

DrawRoundRect Method

1.     Drawing graphics on the Canvas

 

Example Code: Canvas & Graphics

 

/*************************/
/* CanvasMIDlet.java                               */
/*************************/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
import java.io.IOException ;
 
/**
 * @author SKJ
 * @version 1.0.0
 */
 
public class CanvasMIDlet extends MIDlet implements CommandListener
{
    private Display display ;
    private CanvasDemo cDemo ;
    private List list ;
    private Alert alert ;
    private int setInt ;
    private Image image ;
    private Command back ;
    public CanvasMIDlet()
    {
        this.cDemo = new CanvasDemo( this ) ;
        this.createImage() ;
        this.initAlert() ;
        this.initList() ;
        this.setInt = 0 ;
    }
 
    public void startApp() 
    {
        this.display = Display.getDisplay( this ) ;
        this.display.setCurrent( this.list ) ;
    }
    
    public void pauseApp(){
    }
    
    public void destroyApp(boolean unconditional) {
    }
    
    private void createImage()
    {
        try
        {
            this.image = Image.createImage( "/res/starII.png" ) ;
        }
 
        catch( IOException ioe)
        {
               System.out.println (" Error") ;
        }
    }
    private void initCommand()
    {
        this.back = new Command( "Back",Command.BACK,2 ) ;
    }
    
    private void initAlert()
    {
        this.alert = new Alert( "Alert","Wait...Setting",this.image,AlertType.INFO ) ;
    }
    private void initList()
    {
        this.list = new List( "Graphics List", List.IMPLICIT ) ; 
        this.list.append( "00." + " " + "Arc",null ) ;
        this.list.append( "01." + " " + "Rectangular",null ) ;
        this.list.append( "02." + " " + "RoundRect",null ) ;
        this.list.append( "03." + " " + "Line",null ) ;
        this.list.append( "04." + " " + "FillArc",null ) ;
        this.list.append( "05." + " " + "FillRect",null ) ;
        this.list.append( "06." + " " + "FillRoundRect",null ) ;
        this.list.append( "07." + " " + "Image",null ) ;
        this.list.append( "08." + " " + "DrawString",null ) ;
        this.list.append( "09." + " " + "DrawChar",null ) ;
        this.list.append( "10." + " " + "DrawCharArray",null ) ;
        this.list.append( "11." + " " + "DrawSubString",null ) ;
        this.list.setCommandListener( this ) ;
    }
    public void commandAction( Command comm, Displayable disp )
    {
        if ( disp == this.list )
        {
            if( comm  == List.SELECT_COMMAND )
            {
                if( this.list.getSelectedIndex() == 0 )
                {
                   this.setInt = 0 ;
                   this.display.setCurrent( new CanvasDemo( this )) ;
                }
                else if( this.list.getSelectedIndex() == 1 )
                {
                    this.setInt = 1 ;
                    this.display.setCurrent( new CanvasDemo( this )) ;
                }
                else if( this.list.getSelectedIndex() == 2 )
                {
                    this.setInt = 2 ;
                    this.display.setCurrent(new CanvasDemo( this )) ;
                }
                else if( this.list.getSelectedIndex() == 3 )
                {
                    this.setInt = 3 ;
                    this.display.setCurrent(new CanvasDemo( this )) ;
                }                
                else if( this.list.getSelectedIndex() == 4 )
                {
                    this.setInt = 4 ;
                    this.display.setCurrent( new CanvasDemo( this )) ;
                }
                else if( this.list.getSelectedIndex() == 5 )
                {
                    this.setInt = 5 ;
                    this.display.setCurrent( new CanvasDemo( this )) ;
                }
                else if( this.list.getSelectedIndex() == 6 )
                {
                    this.setInt = 6 ;
                    this.display.setCurrent( new CanvasDemo( this )) ;
                }
                else if( this.list.getSelectedIndex() == 7 )
                {
                    this.setInt = 7 ;
                    this.display.setCurrent( new CanvasDemo( this )) ;
                }
                else if( this.list.getSelectedIndex() == 8 )
                {
                    this.setInt = 8 ;
                    this.display.setCurrent( new CanvasDemo( this )) ;
                }
                else if( this.list.getSelectedIndex() == 9 )
                {
                    this.setInt = 9 ;
                    this.display.setCurrent( new CanvasDemo( this )) ;
                }
                else if( this.list.getSelectedIndex() == 10 )
                {
                    this.setInt = 10 ;
                    this.display.setCurrent( new CanvasDemo( this )) ;
                }
                else if( this.list.getSelectedIndex() == 11 )
                {
                   this.setInt = 11 ;
                   this.display.setCurrent( new CanvasDemo( this )) ;
                }                
            }
            this.cDemo.repaint() ;
        }
    }
    
    public int getInt()
    {
        return this.setInt ;
    }
    
    public List getMainList()
    {
        return this.list ;
    }
    
    public void setDisplayable( Displayable disp )
    {
        this.display.setCurrent( disp ) ;
    }
}

 

 
/*************************/
/*             CanvasDemo.java                   */
/*************************/
 
import javax.microedition.lcdui.* ;
import java.io.IOException ;
       
/**
 * @author SKJ
 * @version 1.0.0
 */
 
public class CanvasDemo extends Canvas implements CommandListener
{
    private int maxX ;
    private int maxY ;
    private Command back ;
    private CanvasMIDlet parent ;
    private List list ;
    private Image image ;
    private char[] ch ;
    
    public CanvasDemo(CanvasMIDlet p)
    {
        super() ;
        this.maxX = super.getWidth() ;
        this.maxY = super.getHeight() ;
        this.parent = p ;
        this.initCommand() ;
        this.setList() ;
        this.createImage() ;
        this.initCharArray() ;
    }
    
    public void commandAction( Command com, Displayable disp )
    {
        repaint() ;
        if ( disp == this )
        {
            if ( com == this.back )
            {
                this.parent.setDisplayable( this.list ) ;
                this.repaint() ; 
            }
        }
    }
    
    private void initCharArray()
    {
        this.ch = new char[12] ;
        this.ch[0] = 's' ;
        this.ch[1] = 'k' ;
        this.ch[2] = 'j' ;
        this.ch[3] = 'w' ;
        this.ch[4] = 'o' ;
        this.ch[5] = 'r' ;
        this.ch[6] = 'l' ;
        this.ch[7] = 'd' ;
        this.ch[8] = '.' ;
        this.ch[9] = 'c' ;
        this.ch[10] = 'o' ;
        this.ch[11] = 'm' ;
    }
    
    private void createImage() 
    {
        try
        {
            this.image = javax.microedition.lcdui.Image.createImage( 
                    "/res/starI.png") ;
        }
 
        catch( IOException ioe )
        {
               System.out.println (" Error") ;       
        }
    }
    
    private void setList()
    {
        this.list = this.parent.getMainList() ;
    }
    
    private void initCommand()
    {
        this.back = new Command( "Back",Command.BACK,2 ) ;
        this.addCommand( this.back ) ;
        this.setCommandListener( this ) ;
    }
 
    protected void paint( Graphics g )
    {
        //g.drawString( String.valueOf(this.maxX) + " " + String.valueOf(this.maxY) ,20,50,Graphics.TOP | Graphics.LEFT) ;
        //g.setColor( 255,0,0 ) ;
        switch(this.parent.getInt())
        {
            case 0:
            {
                g.setColor( 255,255,255 ) ;
                g.fillRect( 0,0,getWidth(),getHeight()) ;
                g.setColor( 0,0,255 ) ;
                g.drawArc( 0,0,30,30,90,180 ) ;
                break ;
            }
            case 1:
            {
                g.setColor( 255,255,255 ) ;
                g.fillRect( 0,0,getWidth(),getHeight()) ;
                g.setColor( 0,0,255 ) ;
                g.drawRect(0,0,40,40 ) ;
                break ;
            }
            case 2:
            {
                g.setColor( 255,255,255 ) ;
                g.fillRect( 0,0,getWidth(),getHeight()) ;
                g.setColor( 0,0,255 ) ;
                g.drawRoundRect( 0,0,30,30,10,10 ) ; 
               break ;
            }
            case 3:
            {
                g.setColor( 255,255,255 ) ;
                g.fillRect( 0,0,getWidth(),getHeight()) ;
                g.setColor( 0,0,255 ) ;
                g.drawLine( 10,10,this.maxX,this.maxY ) ;
                break ;
            }
            case 4:
            {
                g.setColor( 255,255,255 ) ;
                g.fillRect( 0,0,getWidth(),getHeight()) ;
                g.setColor( 0,0,255 ) ;
                g.fillArc( 0,0,40,40,45,180 ) ;
                break ;
            }
            case 5:
            {
                g.setColor( 255,255,255 ) ;
                g.fillRect( 0,0,getWidth(),getHeight()) ;
                g.setColor( 0,0,255 ) ;
                g.fillRect( 0,0,30,30 ) ;
                break ;
            }
            case 6:
            {
                g.setColor( 255,255,255 ) ;
                g.fillRect( 0,0,getWidth(),getHeight()) ;
                g.setColor( 0,0,255 ) ;
                g.fillRoundRect( 0,0,30,30,10,10 ) ;
                break ;
            }
            case 7:
            {
                 
                g.setColor( 255,255,255 ) ;
                g.fillRect( 0,0,getWidth(),getHeight()) ;
                g.setColor( 0,0,255 ) ;
                g.drawImage( this.image,10,10,Graphics.TOP | 
                                Graphics.LEFT ) ;
                break ;
            }
            case 8:
            {
                g.setColor( 255,255,255 ) ;
                g.fillRect( 0,0,getWidth(),getHeight()) ;
                g.setColor( 0,0,255 ) ;
                g.drawString( "Drawing Example " ,10,10,Graphics.TOP | 
                                Graphics.LEFT) ;
                break ;
            }
            case 9:
            {
                g.setColor( 255,255,255 ) ;
                g.fillRect( 0,0,getWidth(),getHeight()) ;
                g.setColor( 0,0,255 ) ;
                char ch = 'a' ;
                g.drawChar( ch, 10,10, Graphics.TOP | Graphics.LEFT) ;
                
                break ;
            }
            case 10:
            {
                g.setColor( 255,255,255 ) ;
                g.fillRect( 0,0,getWidth(),getHeight()) ;
                g.setColor( 0,0,255 ) ;
                g.drawChars( ch,0,ch.length,10,10, Graphics.TOP | 
                                Graphics.LEFT) ;
                break ;
            }
            case 11:
            {
                g.setColor( 255,255,255 ) ;
                g.fillRect( 0,0,getWidth(),getHeight()) ;
                g.setColor( 0,0,255 ) ;
                String subStr = "Welcome to SKJWORLD.COM" ;
                g.drawSubstring( subStr,0,subStr.length(),10,10, 
                                Graphics.TOP | Graphics.LEFT) ;
                break ;
            }            
        }
    }
}

 

Arc

drawChar

drawCharArray

drawstring

 

drawSubString

fillArc

 

fillRect

 

drawImage

fillRoundRect

drawLine

 

drawRect

 

drawRoundRect

 

 

Emulator used for taking screen shots   :           Nokia 6650

2.     Using the key events in a Canvas

Example of Key Events

Canvas is a sub class of class Displayable. Canvas provides methods for tapping key events and Game actions. Whenever we work with any key on the key pad the following three types of methods get activated:

Ø  keyPressed

Ø  keyRepeated

Ø  keyReleased

  There are nine types of Game Action: 

Ø  UP                                (Constant Value :           1)

Ø  DOWN              (Constant Value :           6)

Ø  LEFT                            (Constant Value :           2)

Ø  RIGHT               (Constant Value :           5)

Ø  FIRE                             (Constant Value :           8)

Ø  GAME_A                      (Constant Value :           9)

Ø  GAME_B                      (Constant Value :           10)

Ø  GAME_C                      (Constant Value :           11)

Ø  GAME_D                      (Constant Value :           12)

There are 12 types of standard keys. Every key event and Game action has unique code for operation. The following are the field values for standard keys:

Ø  KEY_NUM0                   (Constant Value :           48)

Ø  KEY_NUM1                   (Constant Value :           49)

Ø  KEY_NUM2                   (Constant Value :           50)

Ø  KEY_NUM3                   (Constant Value :           51)

Ø  KEY_NUM4                   (Constant Value :           52)

Ø  KEY_NUM5                   (Constant Value :           53)

Ø  KEY_NUM6                   (Constant Value :           54)

Ø  KEY_NUM7                   (Constant Value :           55)

Ø  KEY_NUM8                   (Constant Value :           56)

Ø  KEY_NUM9                   (Constant Value :           57)

Ø  KEY_POUND    (Constant Value :           35)

Ø  KEY_STAR                   (Constant Value :           42)

 

BEST PRACTICE

To make your code locale independent use the constant values for key codes and game actions instead of the field literals.

 

Example Code: Canvas & Key Events

 
/*************************/
/*             CanvasEventMIDlet.java          */
/*************************/
 
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
 
/**
 * @author SKJ
 * @version 1.0.0
 */
 
public class CanvasEventMIDlet extends MIDlet 
{
    private Display display ;
    private EventDemo eventDemo ;
    
    public CanvasEventMIDlet()
    {
        this.display = Display.getDisplay( this ) ; 
    }
    
    public void startApp() 
    {
               this.display.setCurrent( new EventDemo()) ; 
    }
    
    public void pauseApp(){
    }
    
    public void destroyApp(boolean unconditional) {
    }
        
    public void setDisplayable( Displayable disp )
    {
        this.display.setCurrent( disp ) ;
    }        
}
 

 

/*************************/
/*             CanvasEventDemo.java           */
/*************************/

 

import javax.microedition.lcdui.*;

 

/**

 * @author SKJ

 * @version 1.0.0

 */

 

public class EventDemo extends Canvas

{

    private CanvasEventMIDlet parent ;

    private int gameAction ;

    private int kCode ;

   

    public EventDemo()

    {

        super() ;

        this.parent = new CanvasEventMIDlet () ;

    }

   

    protected void paint( Graphics g )

    {

        g.setColor( 255,255,255 ) ;

        g.fillRect( 0,0,this.getWidth(),this.getHeight()) ;

        g.setColor( 255,0,0 ) ;

 

        try

        {

            g.drawString( "Please Press Any Key",0,0,Graphics.TOP | Graphics.LEFT ) ;

           

            switch( this.gameAction )

            {

                case Canvas.RIGHT : // KeyCode = 5

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  Right key",0,20,Graphics.TOP | Graphics.LEFT ) ;

                    

                    break ;

                }

                case Canvas.LEFT : // KeyCode = 2

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  Left key",0,20,Graphics.TOP | Graphics.LEFT ) ;                    

                    break ;

                }            

                case Canvas.UP : // KeyCode = 1

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  Up key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }              

                case Canvas.DOWN : // KeyCode = 6

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  Down key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }              

                case Canvas.FIRE : // KeyCode = 8

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  Fire key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }

            }

     

            switch( this.kCode ) 

            {

                case Canvas.KEY_NUM0 : // KeyCode = 48

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  oth key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }                  

                case Canvas.KEY_NUM1 : // KeyCode = 49

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  1st key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }              

                case Canvas.KEY_NUM2 : // KeyCode = 50

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  2nd key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }              

                case Canvas.KEY_NUM3 : // KeyCode = 51

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  3rd key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }              

                case Canvas.KEY_NUM4 : // KeyCode = 52

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  4th key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }             

                case Canvas.KEY_NUM5 : // KeyCode = 53

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  5th key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }              

                case Canvas.KEY_NUM6 : // KeyCode = 54

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  6th key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }

                case Canvas.KEY_NUM7 : // KeyCode = 55

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  7th key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }                               

                case Canvas.KEY_NUM8 : // KeyCode = 56

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  8th key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }

                case Canvas.KEY_NUM9 : // KeyCode = 57

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  9th key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }

                case Canvas.KEY_POUND : // KeyCode = 35

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  # key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }

                case Canvas.KEY_STAR : // KeyCode = 42

                {

                    g.setColor(255,0,0) ;

                    g.drawString( "  * key",0,40,Graphics.TOP | Graphics.LEFT ) ;

                    break ;

                }

            }

        }

        catch( Exception e )

        {

            System.out.println("Error") ;

        }

               

    }   

    

    public void keyPressed( int keyCode )

    {

        this.gameAction = getGameAction( keyCode ) ;

        this.kCode = keyCode ;

       

        this.repaint() ;

    }

   

    public void keyRepeated( int keyCode )

    {

    

    }       

}

Screen Shot at Start

 

Emulator used for taking screen shots   :           Motorola_i85s

Working with fonts

The MIDP 1.0 platform has tried to enhance the presentation power available with the applications with the help of the Font class. The Font class enables an application to work with different fonts available with the system. The fonts cannot be created by applications it self. The application can only query for fonts based on font attributes and the system tries to provide a font that matches the requested attributes as closely as possible.

 

The following are the attributes of fonts and fields associated with them:

  • Style
    • public static final int STYLE_BOLD
    • public static final int STYLE_ITALIC
    • public static final int STYLE_PLAIN
    • public static final int STYLE_UNDERLINED

 

  • Size
    • public static final int SIZE_LARGE
    • public static final int SIZE_MEDIUM
    • public static final int SIZE_SMALL

 

  • Face
    • public static final int FACE_MONOSPACE
    • public static final int FACE_PROPORTIONAL
    • public static final int FACE_SYSTEM

 

 

                                                                         

Font Size – Large                                                                                             Font Size – Medium

Font Style – Underline                                                                          Font Style – Plain

Font Face – System                                                                              Font Face – System     

Example Code: Canvas & Fonts

/*************************/
/*             FontMIDlet.java                       */
/*************************/
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
/**
 * @author SKJ
 * @version 1.0.0
 */
 
public class FontMIDlet extends javax.microedition.midlet.MIDlet 
{
    private Display display ;
    private FontCanvas fCanvas ; 
 
    public void startApp() 
    {
        this.fCanvas = new FontCanvas( this ) ;
        this.display = Display.getDisplay( this ) ;
        this.display.setCurrent( this.fCanvas ) ;
    }
 
    public void pauseApp(){
    }
    
    public void destroyApp(boolean unconditional) {
    }
    
    public void setDisplayable( Displayable disp )
    {
        this.display.setCurrent( disp ) ;
    }    
}
/*************************/
/*             FontCanvas.java                     */
/*************************/
import javax.microedition.lcdui.*;
 
/*
 * @author SKJ
 * @version 1.0.0
 */
public class FontCanvas extends Canvas implements CommandListener 
{
    private FontMIDlet parent ;
    private Font font ;
    
    // Declaring the Command
    private Command face ;
    private Command style ;
    private Command size ;
    private Command back ;
    // Declaring the list
    private List faceList ;
    private List styleList ;
    private List sizeList ;
    
    private int faceInt ;
    private int styleInt ;
    private int sizeInt ;
    
    private int displayInt ;
    
    public FontCanvas( FontMIDlet parent ) 
    {
        super() ;
        this.parent = parent ;
        
        this.initBackCommand() ;
 
        // Initilizing the Command
        this.initFaceCommand() ;
        this.initFaceList() ;
        
        
        this.initStyleCommand() ;
        this.initStyleList() ;
        
        this.initSizeCommand() ;
        this.initSizeList() ;
        
        this.initFont() ;
        this.faceInt = Font.FACE_MONOSPACE ;
        this.styleInt = Font.STYLE_PLAIN ;
        this.sizeInt = Font.SIZE_LARGE ;
        
        this.displayInt = 0 ;        
    }
    
    private void initBackCommand() 
    {
        this.back = new Command( "Back",Command.BACK,2 ) ;
        this.addCommand( this.back ) ;
        this.setCommandListener( this ) ;
    }
    
    private void initFaceCommand() 
    {
        this.face = new Command( "Face",Command.ITEM,1 ) ;
        this.addCommand( this.face ) ;
        this.setCommandListener( this ) ;
    }
    
    private void initStyleCommand() 
    {
        this.style = new Command( "Style",Command.ITEM,2 ) ;
        this.addCommand( this.style ) ;
        this.setCommandListener( this ) ;
    }
    
    private void initSizeCommand() 
    {
        this.size = new Command( "Size",Command.ITEM,1 ) ;
        this.addCommand( this.size ) ;
        this.setCommandListener( this ) ;
    }
    
    private void initFont() 
    {
        this.font = Font.getFont( this.faceInt, this.styleInt, 
        this.sizeInt ) ;
    }
    
    protected void paint( Graphics g ) 
    {
        g.setColor( 255,255,255 ) ;
        g.fillRect( 0,0,getWidth(),getHeight()) ;
        g.setColor( 0,0,255 ) ;
        g.setFont(
        Font.getFont(this.faceInt,this.styleInt,this.sizeInt)) ;
        g.drawString( "EXAMPLE TEST",10,10,Graphics.TOP | Graphics.LEFT  
        ) ;
    }
    
    public void commandAction( Command comm, Displayable disp ) 
    {
        if ( disp == this ) 
        {
            if( comm == this.face ) 
            {
                this.displayInt = 1 ;
                this.parent.setDisplayable( this.faceList ) ;
            }
            
            else if( comm == this.style ) 
            {
                this.displayInt = 2 ;
                this.parent.setDisplayable( this.styleList ) ;
            }
            
            else if( comm == this.size ) 
            {
                this.displayInt = 3 ;
                this.parent.setDisplayable( this.sizeList ) ;
            }
        }
        
        if ( comm == this.back ) 
        {
            if ( this.displayInt == 1 )
            {
                this.parent.setDisplayable( this.faceList ) ;   
            }
            
            else if ( this.displayInt == 2 )
            {
                this.parent.setDisplayable( this.styleList ) ;   
            }
            
            if ( this.displayInt == 3 )
            {
                this.parent.setDisplayable( this.sizeList ) ;   
            }
        }
        
        // This is for the Face list display
        if( disp == this.faceList ) 
        {
            if ( comm == List.SELECT_COMMAND ) 
            {
                if( this.faceList.getSelectedIndex() == 0 ) 
                {
                    this.faceInt = Font.FACE_MONOSPACE ;
                    this.parent.setDisplayable( this ) ;
                }
                
                else if( this.faceList.getSelectedIndex() == 1 ) 
                {
                    this.faceInt = Font.FACE_PROPORTIONAL ;
                    this.parent.setDisplayable( this ) ;
                }
                
                else if( this.faceList.getSelectedIndex() == 2 ) 
                {
                    this.faceInt = Font.FACE_SYSTEM ;
                    this.parent.setDisplayable( this ) ;
                }
            }
        }
        
        // This if for displaying the Size list
        if ( disp == this.sizeList ) 
        {
            if( comm == List.SELECT_COMMAND ) 
            {
                if ( this.sizeList.getSelectedIndex() == 0 ) 
                {
                    this.sizeInt = Font.SIZE_LARGE ;
                    this.parent.setDisplayable( this ) ;
                }
                
                else if ( this.sizeList.getSelectedIndex() == 1 ) 
                {
                    this.sizeInt = Font.SIZE_MEDIUM ;
                    this.parent.setDisplayable( this ) ;
                }
                
                else if ( this.sizeList.getSelectedIndex() == 2 ) 
                {
                    this.sizeInt = Font.SIZE_SMALL ;
                    this.parent.setDisplayable( this ) ;
                }
            }
        }
        
        // This is for the Style list
        if ( disp == this.styleList ) 
        {
            if ( comm == List.SELECT_COMMAND ) 
            {
                if ( this.styleList.getSelectedIndex() == 0 ) 
                {
                    this.styleInt = Font.STYLE_BOLD +
                    Font.STYLE_UNDERLINED + Font.STYLE_ITALIC ;
                    this.parent.setDisplayable( this ) ;
                }
                
                else if ( this.styleList.getSelectedIndex() == 1 ) 
                {
                    this.styleInt = Font.STYLE_BOLD +Font.STYLE_ITALIC;
                    this.parent.setDisplayable( this ) ;
                }
                
                else if ( this.styleList.getSelectedIndex() == 2 ) 
                {
                    this.styleInt = Font.STYLE_BOLD ;
                    this.parent.setDisplayable( this ) ;
                }
                
                else if ( this.styleList.getSelectedIndex() == 3 ) 
                {
                    this.styleInt = Font.STYLE_ITALIC + 
                    Font.STYLE_UNDERLINED ;
                    this.parent.setDisplayable( this ) ;
                }
                
                else if ( this.styleList.getSelectedIndex() == 4 ) 
                {
                    this.styleInt = Font.STYLE_ITALIC ;
                    this.parent.setDisplayable( this ) ;
                }
                
                else if ( this.styleList.getSelectedIndex() == 5 ) 
                {
                    this.styleInt = Font.STYLE_UNDERLINED ;
                    this.parent.setDisplayable( this ) ;
                }
                
                else if ( this.styleList.getSelectedIndex() == 6 ) 
                {
                    this.styleInt = Font.STYLE_PLAIN ;
                    this.parent.setDisplayable( this ) ;
                }
                
                else if ( this.styleList.getSelectedIndex() == 7 ) 
                {
                    this.styleInt = Font.STYLE_BOLD + 
  Font.STYLE_UNDERLINED ;
                    this.parent.setDisplayable( this ) ;
                }
            }
        }
        repaint() ;
    }
    
    private void initFaceList() 
    {
        this.faceList = new List( "FontFaceList",List.IMPLICIT ) ;
        this.faceList.append( "01." + " " + "Font-Monospace",null ) ;
        this.faceList.append( "02." + " " + "Font-Propertional",null ); 
        this.faceList.append( "03." + " " + "Font-System",null ) ;
        this.faceList.setCommandListener( this ) ;
    }
    
    private void initStyleList() 
    {
        this.styleList = new List( "FontStyleList",List.IMPLICIT ) ;
        this.styleList.append( "01." + " " + "Font-B+I+U",null ) ;
        this.styleList.append( "02." + " " + "Font-B+I",null ) ;
        this.styleList.append( "03." + " " + "Font-Bold",null ) ;
        this.styleList.append( "04." + " " + "Font-I+U",null ) ;
        this.styleList.append( "05." + " " + "Font-Italic",null ) ;
        this.styleList.append( "06." + " " + "Font-Underline",null ) ;
        this.styleList.append( "07." + " " + "Font-Plain",null ) ;
        this.styleList.append( "08." + " " + "Font-B+U",null ) ;
        this.styleList.setCommandListener( this ) ;
    }
    
    private void initSizeList() 
    {
        this.sizeList = new List( "FontSizeList",List.IMPLICIT ) ;
        this.sizeList.append( "01." + " " + "Font-Large",null ) ;
        this.sizeList.append( "02." + " " + "Font-Medium",null ) ;
        this.sizeList.append( "03." + " " + "Font-Small",null ) ;
        this.sizeList.setCommandListener( this ) ;
    }
}

 

Bold type of font

Bold-Italic type of font

Bold-Italic-Underline type of font

 

Bold-Underline type of font

Italic type of font

Italic-Underline type of font

 

Plain type of font

 

Underline type of font

 

Large type of font

 

Medium type of font

 

Small type of font

 

Monospace type of font

Proportional type of font

 

System type of font

 

Emulator used for taking screen shots   :           Nokia 6650


Emulator used for taking screen shots   :           Nokia Series 40


Comments