Please take this article as a sort of guideline how you can design and develop your own user interface similar to your favourite mobile phone maker. This is not 100% bullet-proof solution! Bellow code was targeting Sony Ericsson's W810 so provided example will show differently on different screen resolution and size of different devices.

In my previous blog entry "Copycat" SE menu I said I was trying to re-create the user interface of W910. I'm still working on this in my spare time. I made an addition ( one of many) that I would like to share - list menu with the use of the Canvas class.

You may wonder why I did not simply use Form that has everything ready made and waiting to by used. Simple reason, I just wanted to know how complex such task can be, also this way I can arrange list components as I want them. So if I wanted an image on the end of each list option I can easily draw image after string. There is not limitation to the colour I want to use on highlighting rectangle, I may choose whatever colour I "fancy" and same applies to scroll bar to the right side of the screen.

Most of the action of this small application is happening inside MessagesMenuScreen paint() method which is called after moving up or down in list menu. Coordinates for scroll bar are determinate in MessageMenuLogic with methods moveUp() or moveDown(). This class also keep control of the boundaries of the array parameters to by displayed.

PS: If you want you can swap drew rectangle area for an image with colour schema of your choice. Just keep it the size of 220x30.

The "Menu" in bottom right corner hides Select and Back command which shows nicely on the real device.

MIDlet code

CanvasListMidlet.java

import javax.microedition.midlet.MIDlet; import javax.microedition.lcdui.*; /** * @author Peter Miklosko */ public class CanvasListMidlet extends MIDlet { public static CanvasListMidlet instance; private Canvas mCanvas; public CanvasListMidlet() { this.instance = this; } public void startApp() { if (mCanvas == null) { mCanvas = new MessagesMenuScreen(); } Display.getDisplay(this).setCurrent(mCanvas); } public void pauseApp() { } public void destroyApp(boolean unconditional) { } public static void quitApp() { instance.destroyApp(true); instance.notifyDestroyed(); instance = null; } }

MessagesMenuScreen.java

import javax.microedition.lcdui.Canvas; import javax.microedition.lcdui.Command; import javax.microedition.lcdui.CommandListener; import javax.microedition.lcdui.Displayable; import javax.microedition.lcdui.Font; import javax.microedition.lcdui.Graphics; import javax.microedition.lcdui.Image; /** * * @author Peter Miklosko */ public class MessagesMenuScreen extends Canvas implements CommandListener { private Command selectCommand; private Command backCommand; private Command emptyCommand; private int w, h; private MessageMenuLogic mml = new MessageMenuLogic(); public ImageLoader il = new ImageLoader(); private Image backImg; private int anchor = Graphics.TOP | Graphics.LEFT; private String[] mString = {"Write new", "Inbox", "Email", "Web feeds", "Draft", "Outbox", "Sent messages", "Call voicemail", "Templates", "Manage messages", "Settings"}; private int y; // Starting Y axes position to draw from private final int SCRL_BAR_X = 228; public MessagesMenuScreen() { backCommand = new Command("Back", Command.BACK, 0); addCommand(backCommand); selectCommand = new Command("Select", Command.SCREEN, 2); addCommand(selectCommand); emptyCommand = new Command("", Command.SCREEN, 1); addCommand(emptyCommand); setCommandListener(this); backImg = il.loadImage("se_logo2.jpg"); } public void paint(Graphics g) { w = getWidth(); h = getHeight(); //Background image g.drawImage(backImg, 0, 0, anchor); //String name of selected option Font f = Font.getFont(Font.FACE_PROPORTIONAL, Font.STYLE_BOLD, Font.SIZE_LARGE); g.setFont(f); g.setColor(0x3849ff); //Colour of Text String drwStr = "Messages"; int strW = f.stringWidth(drwStr); int strH = f.getHeight(); g.drawString(drwStr, (w - strW) / 2, 27 - strH, anchor); //Understrike - to divide space between page title and scrolling options g.setColor(0x000000); g.setStrokeStyle(Graphics.SOLID); g.drawLine(0, 29, w, 29); g.drawLine(0, 30, w, 30); //Scroll bar g.setColor(0xd3d3d3); g.fillRect(SCRL_BAR_X, 35, 8, 220); g.setColor(0x97a5fd); g.fillRect(SCRL_BAR_X, mml.getScrlBar(), 8, 120); g.setColor(0x000000); y = 35; for (int i = mml.getStartArr(); i < mml.getEndArr(); i++) { if (mml.getCurrentSel() == i) { g.setColor(0xd2d8fe); g.fillRoundRect(3, (y - 2), 220, 30, 10, 10); g.setColor(0x000000); g.drawRoundRect(3, (y - 2), 220, 30, 10, 10); } g.drawString(mString[i], 20, y, anchor); y += 32; } } public void commandAction(Command c, Displayable d) { if (c == backCommand) { System.out.println("Back action here but I will close application"); CanvasListMidlet.quitApp(); } else if (c == selectCommand) { System.out.println("Select pressed"); } } protected void keyPressed(int keyCode) { String str = getKeyName(keyCode); if (str.equals("Up") || str.equals("UP")) { mml.boundaryParam(-1); repaint(); } if (str.equals("Down") || str.equals("DOWN")) { mml.boundaryParam(1); repaint(); } } }

MessageMenuLogic.java

/** * * @author Peter Miklosko */ public class MessageMenuLogic { private int startArr = 0; private int endArr = 7; private int currentSel = 0; private int scrlBar = 35; public void setStartArr(int i) { startArr = i; } public int getStartArr() { return startArr; } public void setEndArr(int i) { endArr = i; } public int getEndArr() { return endArr; } public void setCurrentSel(int i) { currentSel = i; } public int getCurrentSel() { return currentSel; } private void setScrlBar(int i) { scrlBar = i; } public int getScrlBar() { return scrlBar; } public void boundaryParam(int i) { switch (i) { case 1: moveDown(); break; case -1: moveUp(); break; default: break; } } private void moveUp() { if (getCurrentSel() - 1 == getStartArr() && getStartArr() > 0) { setStartArr(getStartArr() - 1); setEndArr(getStartArr() + 7); setCurrentSel(getCurrentSel() - 1); setScrlBar(getScrlBar() - 25); } else if (getCurrentSel() == getStartArr() && getStartArr() == 0) { setStartArr(4); setEndArr(getStartArr() + 7); setCurrentSel(getEndArr() - 1); setScrlBar(135); } else { setCurrentSel(getCurrentSel() - 1); } } private void moveDown() { if (getCurrentSel() + 2 == getEndArr() && getEndArr() < 11) { setStartArr(getStartArr() + 1); setEndArr(getStartArr() + 7); setCurrentSel(getCurrentSel() + 1); setScrlBar(getScrlBar() + 25); } else if (getCurrentSel() + 1 == getEndArr() && getEndArr() == 11) { setStartArr(0); setEndArr(getStartArr() + 7); setCurrentSel(getStartArr()); setScrlBar(35); } else { setCurrentSel(getCurrentSel() + 1); } } }

ImageLoader.java

import java.io.IOException; import javax.microedition.lcdui.Image; /** * * @author Peter Miklosko */ public class ImageLoader { public Image loadImage(String str) { Image img = null; try { img = Image.createImage("/res/" + str); } catch (IOException ioe) { System.out.println("Couldn't load image"); System.out.println(ioe); } return img; } }

Compressed source folder
CanvasList_src.rar

Add a comment

Posted by Peter Miklosko on 25 September 2008 00:40:36 BST# Attachment