JAJAH Development Blog

The drawString() method that is used to write text on the canvas dose not know how to wrap the text, hence,  when using it and writing a long text, only one line will appear and the text will be cut.

In order to have the text written correctly, there is a need to implement a text wrap.

The below function writes the given ‘txt’ on the canvas’s Graphics ‘g’, starting from ‘x’ and ‘y’ coordinates, using the given ‘font’. the area in which the text should be written is ‘width’ and the text is written by the ‘alignment’ . using the alignment you can write text from left to right or from right to left

The function returns the next y coordinate on the canvas, which is the next location for a text to be written. this is good for cases that you want to continue writing on the canvas but with a different font or color.

public int write(Graphics g, String txt, int x, int y,
                         int width, Font font,
                         int alignment ){
    m_font = font;
    m_txt = txt;
    m_length = txt.length();
    m_width = width;
    //reseting
    m_position =0;
    m_start = 0;

    int fontHight = m_font.getHeight() + 1;
    String s;
    g.setFont(m_font);
    while(hasMoreLines()){
    s = nextLine().trim();
    g.drawString(s, x, y, Graphics.TOP|alignment );
    y += fontHight;
    }
    return y;
}

below is the implementation  for the  "helper" functions

private boolean hasMoreLines(){
    return (m_position<(m_length-1));
}

private String nextLine(){
     int maxLength = m_txt.length();
     int next = next();
     if(m_start>=maxLength || next>maxLength)
          return null;
     String s =m_txt.substring(m_start, next);
     m_start = next;
     if((m_txt.length()-1>m_start )&& ((m_txt.charAt(m_start)==‘\n’) ||
        (m_txt.charAt(m_start)==‘ ‘))){
          m_position++;
          m_start++;
     }
     return s;
}

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

private int next(){
     int i=getNextWord(m_position);
     int lastBreak = -1;
     String line;
     line= m_txt.substring(m_position, i);
     int lineWidth = m_font.stringWidth(line);
     while (i
              
private int getNextWord(int startIndex){
    int space = m_txt.indexOf(‘ ‘, startIndex);
    int newLine = m_txt.indexOf(‘\n’, startIndex);
    if(space ==-1)
       space = m_length;
    if(newLine ==-1)
       newLine = m_length;
    if(space
              
.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }
              
.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }
              
.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }
            

first we create the Progress Bar object, the is is the simple part

public class Gauge {

    private int m_x, m_y, m_hight, m_width, m_Progress;

    public void set(int x, int y, int height, int width ) {

        m_x = x;

        m_y = y;

        m_height = height;

        m_width = width;

    }

    public void  setProgress(int progress){

     m_progress= progress;

    }

    public void paint(Graphics g){

        if(m_progress>=m_width)

            return;

        g.setColor(0);

        g.drawRect(m_x, m_y-1, m_width, m_height+1);

        g.setColor(GuiConstants.JAJAH_COLOR);

        g.fillRect(m_x+1, m_y, m_Progress, m_height);

        g.setColor(GuiConstants.LIST_BACK_COLOR);

        if(m_width-m_Progress>0)

            g.fillRect(m_Progress + m_x, m_y, m_width-m_Progress, m_height);

    }

now we need to use it:

in order to display the Progress Bar, we will display it using a canvas. the canvas will hold a Progress Bar as a member, and it will display it. on that canvas more info can be displayed. note that on each progress update  a repaint occurs. its sufficient to only repaint the progress bar or any updated UI.

public void run() {

        try{

            init();// init params

            m_paintSuper = true;

            repaint();

            boolean run = !connection.callAllowed();// condition for running the bar

            while(run){

                for(int i= 1;i
                  
                    m_gauge.setProgress(i);
                  
                    Thread.sleep(GAUGE_SPEED); // to make gauge slower
                  
                    repaint();
                  
                    run = !connection.callAllowed();
                  
                }
                  
            }
                  
        }
                  
        catch (Exception e) {
                  
            run();
                  
        }
                  
    }
                  
    
                  
    protected void paint(Graphics g) {
                  
          // things that need to painted only once
                  
          if(m_paintSuper){ 
                  
            super.paint(g);
                  
          }
                  
           m_paintSuper = false;
                  
        }
                  
            
                  
        m_gauge.paint(g);
                  
    }
                  
    
                  

                

now that we have the canvas ready with the Progress bar and the update of the progress we are left to display the canvas

if(m_gauge == null)

     m_gauge = new GaugeView(null);

// sets the text for the canvas or any other thing to the canvas

m_Gauge.setText(str);         

Display.getDisplay(m_midlet).setCurrent(m_gauge);

Thread t = new Thread(m_gauge);

t.start();

Screen Size

when using canvas, make sure that the sizes and location(x, y coordinates) of what you paint are relative to the screen height and width.  for better  performance, cache the height and width instead of using the canvas’s getWidth() and getHeight() functions. (note that even if you have a few canvases, the height and width returned for all canvases are the same, unless if some are fullScreen and some are not). recall that floating numbers are not supported, hence when calculating sizes, divide and multiply by even numbers. bitwise operations are recommended.

the below code illustrates how the title bar and the command bar  are relative to the screen size.  when we will install the application on devices with various screen sizes, the bars will look good and will change according to the screen size.

public void init(){

    m_height = getHeight();

    m_width = getWidth();

    m_titleFontH  = m_titleFont.getHeight();

    m_titleHeight = m_height>>3;

    if(m_titleFontH>m_titleHeight)

        m_titleHeight = m_titleFontH;

}

protected void paint(Graphics g) {

    g.setColor(GuiConstants.JAJAH_COLOR);

    g.fillRect(0,0,m_width,m_titleHeight );

    g.fillRect(0, m_height-m_titleHeight,m_width, m_titleHeight);

    //drawing color

    g.setColor(GuiConstants.COMMAND_COLOR);

    g.setFont(m_titleFont);

    g.drawString(m_Title,m_width>>1,(m_titleHeight-m_titleFontH)>>1,Graphics.TOP|Graphics.HCENTER);

}

Handset’s look and feel

different devices are made by different manufactures. each manufactures has its own look and feel. even within the same manufacturer there are differences between models. for example in Nokia devices, the "back" command will usually be the right key, the options/ok will be the left, whereas in some Motorola devices it will be the opposite.  Sony Ericsson devices  have a special key for the "back" command. Today most handsets, in addition of having 2 keys,  have a third key or a "joy stick".

when thinking about the application’s UI you need to decide if the commands ("options", "back", "ok" "call" command in JAJAH Plugin) will be the same for all device models or it will be adjusted to the specific model. I think that the application should be adjusted to the model. I think its important to let the user keep on using his device as he is regular and not forcing him to "learn" a new way. your application should know how to support the special keys that some devices have. there are some articles that recommend using the key Name (i.e. FIRE, RIGHT, LEFT etc.) and not the key code. I found that you can be surprised what you think you will get and what you actually receive. I recommend using the Key code and checking its value for each model. (usually, for models of the same manufacturer, the key codes are the same. in LG, its not..)

more about this issue to come…

Download JAJAH Mobile Plugin to see application example