设计可组建的j2me UI(一) 核心部件

设计可组装的j2me UI(一) 核心部件
   最近发现很多朋友在设计j2me程序的时候，在有些关键的UI设计都放弃j2me提供的高级UI。而自己通过继承Canvas，而实现自己想要的效果。游戏的菜单设计一般都是这样。设计自己的UI是比较困难的，因为自己要控制屏幕的各个元素跟各个元素的低级事件。我想这些不是问题。主要还是很少有教程手把手的教你。小第我经过一个项目，而起这个项目的UI全部是自己实现。所以在这方面算是有点点经验。所以拿出来给大家分享下。
    我的设计思想是这样的。
    1。手机CPU，内存等资源都有限。手机屏幕各个厂商各不相同。
    2。手机基本不用考虑，窗口移动，拖动，缩放，重叠，窗口至顶等问题。
    3。手机窗口事件不用考虑，拖动，移动，缩放，鼠标等时间。因此问题就相对简单了。
    4：我们只需要实现，UI的显示跟文字，图片的排版显示，已经文字的滚动显示等。

    下面将是一些片段代码，希望。
    首先设计两个核心的类。
    1。Part －－ 窗口显示部件。主要是一些可以组装的组件例如（TextField，TextBox）等
     

public abstract class Part {	protected final int X = 0;	protected final int Y = 1;	protected final int WIDTH = 2;	protected final int HEIGHT = 3;	/**	 * 位置的显示位置（相对手机屏幕的位置）	 */	protected int view[] = new int[4];	/**	 * 背景色	 */	protected int bgColor = 0x000000;	/**	 * 字体颜色	 */	protected int fontColor = 0xFFFFFF;	protected int selectIndex;	protected Canvas container;		protected String label;	  	/** 每个Item都有自己的焦点 **/	protected boolean hasFocus;	protected PartChangeListener partChangeListener;		public Part(int x, int y, int widht, int height) {		view[X] = x;		view[Y] = y;		view[WIDTH] = widht;		view[HEIGHT] = height;	}	public void setStyle(int bgColor, int fontColor) {		this.bgColor = bgColor;		this.fontColor = fontColor;	}	/**	 * 默认字体	 */	protected Font font = Font.getDefaultFont();	/**	 * 资料实现绘制方法	 * 	 * @param g	 */	public abstract void paint(Graphics g);	/**	 * 事件	 * 	 * @param keyCode	 */	public abstract void onClick(int keyCode);	public int getSelectIndex() {	 		return selectIndex;	}	public void setSelectIndex(int selectIndex) {		this.selectIndex = selectIndex;	}	/**	 * 改变部件的位置	 */	public void changePosition(int x, int y, int width, int height){		view[X] = x;		view[Y] = y;		view[WIDTH] = width;		view[HEIGHT] = height;		}	public void setContainer(Canvas container) {		this.container = container;	}		/**	 * 聚焦，主要用户当前使用的Part。	 * @param hasFocus	 */	public void setHasFocus(boolean hasFocus){		this.hasFocus = hasFocus;		 	}		public void setPartChangeListener(PartChangeListener partChangeListener) {		this.partChangeListener = partChangeListener;	}	public int[] getView() {		return view;	}

    上面的类不足以显示，主要是通过下面的类，通过addPart方法添加进去。

public abstract class Panel extends Canvas {	private static Log log = Log.getLog("Panel");	final int X = 0;	final int Y = 1;	final int WIDTH = 2;	final int HEIGHT = 3;	/** 显示主要部分.比如菜单的Icon,List的数据的位置 */	int[] viewContent = new int[4];	Image icon;	Part part;		SoftButton softButton;		Part timer;		public Panel(){		init();	}	public Panel(Image icon) {		init();		this.icon = icon;				 		//此方法是让所以的Panel都添加一个TimerPart		//以后重构的时候应该???虑要不要这么做		//this.setTimer(null);	}	private void init() {		setFullScreenMode(true);	 		initViewContent();		this.softButton = new SoftButton();	}	public void addCommand(Command cmd) {		if (cmd == null)			return;		softButton.addCommand(cmd);	}		public Part getPart() {		return part;	}	public void append(Part part){		this.part = part;	}	public void setPartChangeListener(PartChangeListener partChangeListener) {		this.part.setPartChangeListener(partChangeListener);	}	public void removeCommand(int type) {		softButton.removeCommand(type);	}	public void setSoftButtonListener(CommandListener cmdListener) {		if (softButton != null)			softButton.setCommandListener(cmdListener);	}	public void setSoftButtonStyle(int bgColor, int fontColor){		this.softButton.setStyle(bgColor, fontColor);	}	public abstract void paint(Graphics g);	protected abstract void keyPressed(int keyCode);	/**	 * 长按事件	 */	protected void keyRepeated(int keyCode) {		keyPressed(keyCode);	} 	 	private void initViewContent() {		viewContent[X] = 0;		viewContent[Y] = 45;		viewContent[WIDTH] = Platform.WIDTH;		viewContent[HEIGHT] = Platform.HEIGHT;	}	public SoftButton getSoftButton() {		return softButton;	}	public void setSoftButton(SoftButton softButton) {		this.softButton = softButton;	}	    /**     * 增加时间显示     */	public void setTimer(Part timer){		this.timer = timer;	}		void paintTimerImpl(Graphics g){		if(timer != null)			timer.paint(g);	}		public void repaintTimer(){		if(timer != null){			int [] view = timer.getView();			repaint(view[X],view[Y],view[WIDTH], view[HEIGHT] );		}				}}

以上就是UI的核心，以后我将会逐渐介绍其他的组件跟相关的事件接口。读者也可以自己实现一些有意思的界面然后测试下，我相信效果会更好