搜索
BlackBerry高级UI设计作者：王志刚概论..............................................................................................................................................................31基于MIDP的UI设计.............................................................................................................................41.1MIDP高级UI................................................................................................................................41.2MIDP低级UI................................................................................................................................62基于Thirdparty的UI库的设计..............................................................................................................92.1基于LWUIT的UI库的设计规范......................................................................................................93基于BlackBerry的UI库的设计.............................................................................................................114基于SVG的UI设计...............................................................................................................................114.1什么是SVG......................................................................................................................................114.2Mobile上的svg................................................................................................................................124.3RIM上的svg.....................................................................................................................................125基于BlackBerryWidget的UI设计........................................................................................................18效果，文档的介绍的内容包括如下部分:1.基于MIDP的UI2.基于3rd-party的UIlibrary的应用3.基于BlackBerryUI组件的应用4.基于SVG(JSR226)的UI设计5.基于Widget的UI设计本文的组成部分是以以一个传统移动应用的九宫格程序的UI设计和实现为范例，讨论并着重介绍了在BlackBerry平台上设计UI需要考虑和借用的技术，更好的包装BlackBerry的应用通过对UI应用的讨论，本文也涉及到了在BlackBerry应用开发中如何和第三方应用Library集成，BlackBerry上的网络应用开发等等方面的知识，文中涉及到的参考文档，都可以从RIM中国开发论坛上下载得到。在阅读和参考本篇文档时，读者应该对BlackBerry上的基本开工具和开发过程有些了解，如果想参阅这些内容，可以参阅BlackBerry中国。包的组成结构，这个包包括完整的MIDLP高级和低级UI库。1.1MIDP高级UI我们在这一节要介绍LCDUI库的具体组成类图。Screen类系属于高级图形用户界面组件，Canvas是低级图形用户界面组件，在同一时刻，只能有唯一一个Screen或者Canvas类的子类显示在屏幕上。使用高级界面，但是九宫格这样的屏幕铺放应用的实现是想不到好的办法，本身没有合适的控件可以完成这个任务。一种可能的办法是通过定制高级UI组件里面的元素，比如CustomItem,用他来绘制定宫格。本例就是使用CustomItem来实现了一个九宫格效果，效果如下图所示源代码如下所示:publicclassGridItemextendsCustomItem{privateImageimage;publicMyItem(Imageimage,Stringtitle,intwidth,intheight){this.image=image;}publicvoidpaint(Graphicsg,intw,inth){(this.image,w/2,0,Graphics.HCENTER|Graphics.TOP);g.drawString(this.title,w/2,h-g.getFont().getHeight(),Graphics.HCENTER|Graphics.TOP);}通过对Form的定制item设置背景图片，找到一个workaround的办法，放置我们的九宫格图标，剩下的就是对Form主程序的设置了Formf=newForm(CustomItem);inttempWidth=f.getWidth()/4;inttempHeight=60;for(inti=0;i9;i++){StringimgSrc=/img/+i+.png;try{Imageimg=Image.createImage(imgSrc);MyItemmi=newMyItem(img,String.valueOf(i)+item,tempWidth,tempHeight);mi.setLayout(Item.LAYOUT_CENTER);f.append(mi);}catch(IOExceptionioe){ioe.printStackTrace();}}display.setCurrent(f);1.2MIDP低级UI与高级UI相比，低级UI就自由很多，任何时候我们可以调用repaint()产生重绘事件，调用完了repaint()会立刻返回，调用paint()回调函数则是由另一个专门的线程来完成。相对于高级UI提供的丰富的组件，低级UI能够对我们从javax.microedition.lcdui.Canvas开始了解我们的低级UI，我们要用到低级UI必须要继承Canvas这个抽象类，在Canvas的核心是paint()这个方法，这个方法做是负责绘制屏幕上的画面，每当屏幕需要重新绘制时，就会产生重绘事件时，系统就会自动调用paint(),并传入一个Graphics对象。任何时候我们都可以通过调用reapaint()方法来产生重绘事件，它有两个方法，一个需要四个参数，分别用来指示起始坐标（X,Y）,长宽，另一个则不需要任何参数，代表整个画面重新绘制。我们可以通过getWidth()和getHeight()方法获得Canvas的当前范围大小。每当Canvas范围大小发生变化时，就会自动调用Canvas类的sizeChanged（）方法。绘制九宫格程序的源码:publicclassMenuCanvasextendsCanvasimplementsCommandListener{privateString[]menuName=newString[]{login,picture,wap,phone,call,goto,fuck,music,video};privateintcanvaWidth=-1,canvaHeight=-1;privateintmaxHeight=-1,imgWidth=-1,imgHeight=-1;privateintfocus=0;privateintfontHeight=-1;privateImagemenuImg[]=newImage[9];privateCommandexit;publicMenuCanvas(){exit=newCommand(Exit,Command.EXIT,1);addCommand(exit);setCommandListener(this);canvaWidth=getWidth();canvaHeight=getHeight();try{for(inti=0;imenuImg.length;i++){menuImg[i]=Image.createImage(28,28);Graphicsg=menuImg[i].getGraphics();g.translate(-28*i,0);}}catch(Exceptione){System.out.println(e.toString());}imgWidth=menuImg[0].getWidth();imgHeight=menuImg[0].getHeight();fontHeight=Font.getDefaultFont().getHeight();maxHeight=imgHeight+fontHeight;}publicvoidpaint(Graphicsg){intcolor=g.getColor();g.setColor(0xFFFFFF);g.fillRect(0,0,canvaWidth,canvaHeight);intcellWidth=canvaWidth/3;intcellHeight=canvaHeight/3;g.setColor(color);for(inti=0;imenuImg.length;i++){g.drawImage(menuImg[i],cellWidth*(i%3)+(cellWidth-imgWidth)/2,cellHeight*(i/3)+(cellHeight-maxHeight)/2,Graphics.TOP|Graphics.LEFT);intfontWidth=Font.getDefaultFont().stringWidth(menuName[i]);g.drawString(menuName