基于模板的BREW应用可视化界面设计.docVIP

基于模板的BREW应用可视化界面设计　1 引言 　　随着时代的发展,手机用户群体越来越大,人们对手机应用软件的需求也随之增大。2008年我国电信行业重组、以及3G牌照的发放,标志这3G时代的到来。手机应用程序的开发面临着更为巨大的市场。快速变化的市场要求开发人员能够快速开发出丰富多彩的应用程序。以往BREW应用程序的开发仍然处于手工编写的状态。当开发人员开发应用的界面部分时,需要在编辑环境中将代码写好,经过编译链接后在模拟器中执行以观察界面实际效果,如若不满意,需要再回来修改源代码,如此反复,效率非常低下。 　　可视化的开发环境在目前已经较为普遍,但在BREW应用开发中还属空白。本文提出一个可视化用户界面设计及基于模板的代码自动生成的方法。在可视化的图形用户界面设计环境中,开发人员可以为自己的应用程序设定一个图形手机屏幕进行界面设计。我们将BREW中主要界面接口进行封装,以界面元素控件的形式提供给用户。用户可以通过鼠标拖拽将各种图形界面元素控件添加到手机屏幕的相应位置,通过调整达到理想的效果,同时在该环境中对个控件的相关属性进行设置,完成“所见即所得”的界面设计。 　　在完成可视化的、所见即所得的界面设计后,系统根据用户设计的结果生成一个XML文件。该XML文件记录的用户所设计界面的各种参数。接下来根据XML文件及BREW应用程序模板文件自动生成BREW应用框架代码。用户即开发人员可以在生成的代码上进行进一步的完善,得到最优的代码。 　　 　　2 系统总体设计 　　本系统包括一个可视化的用户界面设计工具和一个代码自动生成引擎。如图1所示。 　　　　 　　BREW应用的代码有其自身特点,其代码的自动生成是由代码自动生成引擎根据BREW应用程序框架模板文件和用于描述界面信息的XML文件进行的。其中BREW应用程序框架模板文件是事先根据BREW应用代码的特点设计而成的XML文件;用户通过使用一个可视化的用户界面设计工具对用户界面进行设计,该工具包括各种界面控件,用户通过鼠标拖拽对界面布局进行设计并对空间属性进行设置。该图形设计工具最终生成一个XML文件,该文件描述了用户界面的各种信息。 　　代码自动生成引擎根据XML文件的信息在BREW应用程序框架模板文件中搜索相应的标签,并根据界面控件的属性在模板文件中添加相应代码,从而生成BREW程序。 　　 　　3 BREW应用的可视化界面设计及代码自动生成 　　3.1 图形界面控件的封装及可视化设计环境 　　目前BREW应用的用户界面设计仍然是手工编写代码的方式,编程人员需要多次运行修改才能达到满意的效果,效率十分低。 　　本文开发一个包含有界面设计环境及多种图形界面控件的可视化界面设计工具。利用该工具,开发人员可以为自己的应用程序创建一个图形手机屏幕,并可以通过鼠标拖拽将各种图形界面元素添加到手机屏幕的相应位置,进行“所见即所得”的界面设计。 　　该工具实现的关键是将BREW中相关接口进行抽象并封装为图形界面元素控件。例如将BREW中的IImage接口封装为图片控件,将ITextCtl控件封装为文本框控件等等。当用户将该控件拖拽到屏幕区域并进行调整时,需要记录下该控件对应接口的各种表象属性参数,如x、y坐标,宽、高等。此外,对于控件对应接口的其他属性需要用户进行设置。 　　本系统中的可视化界面设计工具可以使人们从从繁琐的界面设计编码工作中解脱出来,从而将主要精力放在应用程序业务逻辑的设计与实现上,从而提高了开发效率。 　　3.2 用户界面XML文件 　　可视化界面设计工具根据用户的设计要生成一个XML文件,该文件记录了程序界面的各种设计信息,是自动代码生成中数据来源之一,代码自动生成引擎根据该文件及程序模板生成最终代码。在这里,用户界面信息是以XML文件的格式保存用户在向导中输入的信息。之所以采用XML文件的格式保存用户输入的信息,是由XML文件的特点决定的。XML是被设计用来存储数据、携带数据和交换数据,并且XML可以从多种类型的数据存储方式中分离数据。 　　XML数据定义文件中的标签名为待替换的参数,也是模板文件中的特殊的标签,标签值为用户输入的信息,用于代替模板中的待替换的参数。 　　在本文中,用户界面XML中定义了每一种界面元素的名称、类型、所属窗口、尺寸、坐标等等信息。例如: 　　  　　上例中定义了一个名为mainform的主界面窗口和一个名为pic1的图片控件。主界面窗口大小为128*160,颜色深度为16位。图片对应的文件时pic/test1.jpg,该图片的大小为50*70,位于主界面窗口上(20,10)的位置。图片其中的标签名,如FormName, ImageName, FormCX, FormCY, FormColorD