设计可组装的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的核心，以后我将会逐渐介绍其他的组件跟相关的事件接口。读者也可以自己实现一些有意思的界面然后测试下，我相信效果会更好

评论

2 楼 为你而来 2006-11-15  

多谢啦，正在查看呵，好好研究一下，我对这方面比较着

1 楼 tuti 2006-11-14  

那要看所针对的机型,允许装载多大体积的程序,多了1个类要多占不少体积.