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

posted on 2006-12-30 09:24 路是爬出来的阅读(288) 评论(0) 编辑收藏

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理

路是爬出来的

导航

统计

常用链接

留言簿(1)

随笔档案

文章档案

搜索

最新评论

阅读排行榜

评论排行榜

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