Blond Mobile


Archive for the ‘J2ME Porting’ Category

J2ME Porting: UI Issues

Tuesday, January 1st, 2008

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.

requesting_jajah_call_cost
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

Jajah is the VoIP player that brought you web-activated telephony.