搜索
终端页面开发流程和规范0.6版文件状态：[√]草稿[]正式发布[]正在修改文件标识：当前版本：0.6撰稿人：李水生完成日期：发布时间：编号：2005年12月23日版本历史版本/状态作者参与者起止日期备注草稿Hipay系统自助终端页面开发流程和规范一：Hipay页面开发1目录结构：1.1：顶层目录结构图（1）所示Applications:目录里放着我们创建的应用板块。Framework:里是Hipay系统应用，包含实体和服务板块Base:里放着启动，容器和配置和组件加载等公共类。Data:是Hipay内建的数据库。Logs:是系统日志文件夹。Hipay.bat是启动文件。图（1）1.2：applications目录图（2）所示Accounting:帐务管理，支付信息，发票等。Content:内容管理，调查等。Ecommerce:电子商务应用。Order:订单管理。Party：人员组织管理Securityext:安全管理拓展Product:产品管理。Component-load.xml:板块加载配置文件。图（2）1.3：ecommerce目录图（3）所示Src:java源文件。Config:配置文件，主要是多语言的配置文件Data:系统运行时需要导入的数据文件Script:Hipay系统mini-lang文件（简单Java方法）Templates:模板页面Webapp:web服务需要用到的页面和脚本Widget:用xml描述的页面Build.xml:用ant工具编译src文件夹的源文件生成的classes文件和jar包放在build中。giantstone-component.xml:电子商务板块加载配置文件。图（3）1.4：webapp目录Webapp下有一个应用文件夹为ecommerce，其目录结构如图（4）所示:除了WEB—INF文件夹以外，其他的文件都是页面文件，页面文件都是以ftl为后缀的freemaker模板页面。图（4）1.5：WEB—INF目录如图（5）所示Actions:系统脚本文件夹，beanshell脚本controller.xml：流程控制器web.xml：网站参数设置图（5）1.6：actions目录如图（6）其文件结构和图（4）中的ftl页面结构是对应的。比如说显示购物车信息的页面showcart.ftl放在图（4）cart文件夹中，则对应的脚本showcart.bsh放在图（6）的cart文件夹中，这样做不是必需的，但是是规范的，易于维护的。图（6）1.7：widget目录Widget是把ftl页面和bsh脚本组合起来供前端显示的工具。它用xml语言和特定标签描述页面和页面，页面和脚本之间如何组合和定制。CommonScreens.xml是公共模板定制页面CartScreen.xml是购物车相关页面定制CatalogScreens.xml是产品，目录的显示的页面定制CustomerScreens.xml是有关调查，寻价和客户方面的页面定制ContentScreens.xml是跟内容管理相关的页面定制OrderScreens.xml是跟订单和支付相关的页面定制EcommerceSetup.bsh是公共模板加载的脚本图（7）其他板块的目录结构和ecommerce是相似的。2开发内容2.1：对widget组合页面要熟练掌握。WebWidget是轻量级的Web应用程序，为使用者提供一键式的服务。它通常被设计为具有特定的功能，如提供天气、股票、拍卖等的信息。它与网页一样，使用标准的Web技术开发，如XHTML，CSS，javascript等。从这方面看，Widget是脱离浏览器UI运行的网页。beanshell脚本准备数据，freemaker页面显示数据，而widget工具正是组合脚本和页面的，它规定了哪个脚本为哪个页面组织数据，即起到绑定脚本和页面的作用，同时也可以定义某些变量供页面使用，当然有些页面可以没有脚本，简单的来说，widget就是用户请求页面，它把变量，标签和freemaker模板语言组合生成HTML页面，当用户请求时就发送给用户浏览器。Widget用到的标签在framework/widget/dtd里的xsd文件里，如图（8）图（8）在eclipse开发环境下，有代码预示的功能，如图（9）图（9）图（10）图（10）的!--的内容是注释，从图中的注释清楚地介绍的用widget如何定制一个模板。screenScreen标签对应的是前端请求的页面，页面的名称name属性是必须的。sectionScreen下有一个唯一的section，section下包含condition，actions，widgets和fail-widgets标签。condition如果condition存在，并且condition是true则页面显示widgets内容，否则显示fail-widgets。如果condition不存在，则fail-widgets标签也就没有必要。以下是对attrName非空的判断：conditionnotif-emptyfield-name=attrName//not/conditionif-has-permissionpermission=ORDER_VIEW/是检查当前用户是否拥有对order的VIEW（查看）的权限if-comparevalue=常量field-name=变量operator=操作/是把变量跟某个常量进行比较，操作包括lessgreaterequalsless-equalsgreater-equalsnot-equalscontains,分别表示，小于大于等于小于等于大于等于不等包含。if-compare-fieldfield-name=变量1operator=to-field-name=变量2type=String/是把两个变量进行比较,type类型值可以为FloatDoubleIntegerLongBooleanStringPlainStringDateTimeTimestamp和Object，如果没有type默认为String。and是对多个条件进行与操作or或操作xor异或not非and条件1条件2/andor条件1条件2/or其他的标签请查看图（8）所示的文件中内容。actionsactions是加载页面之前的动作。常用的动作是：set:set定义一个变量并赋值field的值就是变量名value是变量值；script:script加载一个beanshell脚本文件，location是脚本的位置，位置以”component://xyz/”开头，意思是在xyz这个板块下，xyz是在Hipay的安装目录下的applications和framework下的第一层子目录文件夹，如图（2）得文件夹都可以作为这里的xyz。property-map:property-map加载一个属性文件，resource的值是文件的名称，文件后缀为properties,可省略不写，对于多语言，比如要加载简体中文配置文件TMSBaseUiLabels_zh_CN.properties和美国英语配置文件TMSBaseUiLabels_en_US.properties，并把配置文件的键值对放在一个Map即uiLabelMap中，作为全局变量是用，只需要这样一行代码：property-mapresource=TMSBaseUiLabelsmap-name=uiLabelMapglobal=true/这行代码会加载所有各种语言的配置文件，然后根据用户的locale，读取当时当地的语言配置。还有一点需要注意，如果uiLabelMap在TMSBaseUiLabels_zh_CN.properties中找不到键值，它会去TMSBaseUiLabels_zh.properties查找，如果没找到，则继续查找TMSBaseUiLabels.properties，如果仍然没有值则返回键本身，如果有则返回文件中定义的值；widgetsWidgets是对页面的加载和布局。常用的加载页面的方法包括1：platform-specificplatform-specifichtmlhtml-templatelocation=component://TMSBase/webapp/TMSBase/includes/header.ftl//html/platform-specificcomponent://TMSBase/webapp/TMSBase/includes/header.ftl为要加载的文件路径和名称。即TMSBase这个板块下webapp文件夹的子文件夹TMSBase下的子文件夹includes下的header.ftl文件。2：include-screeninclude-screenname=abclocation=component://TMSBase/widget/bcd.xml/这行代码的意思是加载一个页面，这个页面是在TMSBase这个板块下的widget文件夹下的bcd.xml文件里定义的abc页面。abc是screen的name的值。3：decorator另外，模板常用到这行代码decorator-section-includename=body/，意思是页面的body部分是空的，其他页面使用以下代码使用这个模板，decorator-screenname=main-decoratormain-decorator是模板的名称（screen的name的值）则其他页面的内容出现在body部分。4：containerWidget中可以加载容器containerstyle=样式表容器里面可以加载其他页面，这类似于HTML中的DIV层。以下代码是合法的：containerstyle=include-screenname=/include-screenplatform-specifichtmlhtml-templatelocation=//html/platform-specificdecorator-section-includename=body//containerinclude-screenname=/include-screen和include-screenname=/效果是等同的，其他类似。5：widget中的sectionwidgetssection……/section/widgetswidgets中可以放置多个section6：其他加载一个图片可以使用imagesrc=/image页面上显示一行文字可用labeltext=/label其他的标签请查看图（8）所示的文件中内容。fail-widgets等同于widget标签，是条件不满足时给用户显示的页面。2.2：对freemaker模板语言的熟练掌握2.2.1：各页面功能及存放位置页面文件后缀为ftl，存放在图（4）所示的目录中，即webapp下的应用文件夹中图（4）自助终端目前用到的页面中有图（4）中的部分页面：main.ftl是主页面，用户返回时会到此页面，该页面左边显示分类，右边显示推广产品。mainframe.ftl框架页面分三个部分框架上面部分占99.98%是用户操作的业务页面，框架中间占0.01%，是用来加载终端插件，框架下部是用来加载加密插件和进行加密验证的。mainup.ftl是语言选择页面。login.ftl是用户刷卡登陆页面。cart下的showcart.ftl页面(购物车页面)catalog下的sidedeepcategory.ftl(终端屏幕的左边目录翻页页面)customer下的survey.ftl（调查页面即用户的密码，号码输入页面）error下的error.ftl（错误页面）includes下的：header.ftl模板头部