Hipay系统自助终端页面开发流程和规范06版.docx
- 文档编号：12476186
- 上传时间：2023-04-19
- 格式：DOCX
- 页数：31
- 大小：229.15KB
Hipay系统自助终端页面开发流程和规范06版.docx
《Hipay系统自助终端页面开发流程和规范06版.docx》由会员分享，可在线阅读，更多相关《Hipay系统自助终端页面开发流程和规范06版.docx（31页珍藏版）》请在冰豆网上搜索。
Hipay系统自助终端页面开发流程和规范06版
终端页面开发流程和规范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如何定制一个模板。
screen
Screen标签对应的是前端请求的页面，页面的名称name属性是必须的。
section
Screen下有一个唯一的section，
section下包含condition，actions，widgets和fail-widgets标签。
condition
如果condition存在，并且condition是true则页面显示widgets内容，否则显示fail-widgets。
如果condition不存在，则fail-widgets标签也就没有必要。
以下是对attrName非空的判断：
and是对多个条件进行与操作or或操作xor异或not非
<条件1>
<条件2>
其他的标签请查看图（8）所示的文件中内容。
actions
actions是加载页面之前的动作。
常用的动作是：
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中，作为全局变量是用，只需要这样一行代码：
这行代码会加载所有各种语言的配置文件，然后根据用户的locale，读取当时当地的语言配置。
还有一点需要注意，如果uiLabelMap在TMSBaseUiLabels_zh_CN.properties中找不到键值，它会去TMSBaseUiLabels_zh.properties查找，如果没找到，则继续查找TMSBaseUiLabels.properties，如果仍然没有值则返回键本身，如果有则返回文件中定义的值；
widgets
Widgets是对页面的加载和布局。
常用的加载页面的方法包括
1：
platform-specific
//TMSBase/webapp/TMSBase/includes/header.ftl"/> component: //TMSBase/webapp/TMSBase/includes/header.ftl为要加载的文件路径和名称。 即TMSBase这个板块下webapp文件夹的子文件夹TMSBase下的子文件夹includes下的header.ftl文件。 2： include-screen //TMSBase/widget/bcd.xml"/> 这行代码的意思是加载一个页面，这个页面是在TMSBase这个板块下的widget文件夹下的bcd.xml文件里定义的abc页面。 abc是screen的name的值。 3： decorator 另外，模板常用到这行代码 意思是页面的body部分是空的，其他页面使用以下代码使用这个模板， 则其他页面的内容出现在body部分。 4： container Widget中可以加载容器 以下代码是合法的： 5： widget中的section …… widgets中可以放置多个section 6： 其他 加载一个图片可以使用 页面上显示一行文字可用 其他的标签请查看图（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模板头部导航栏加载样式表定制页面超时脚本 footer.ftl模板底部留个按钮 hidebottom.ftl加载终端插件，是页面底部框架固定不动的部分，对于不同的终端，申明和条用插件的方式可能不同，此时需要编写多个厂家的底部框架页面。 jiami.ftl工行自助终端用到的加密插件页面。 order下的 checkoutoptions.ftl该页面显示正在支付中，请用户等候，该页面向后台传递了用户的支付方式，货物的运送方式，联系方式等等重要信息，不可或缺。 ordercomplete.ftl该页面是支付完成页面，显示支付结果，成功则用户可以选择打印凭条。 另外还用到了order板块的webapp下ordermgr的字文件夹entry的catalog的部分文件，如图（11） 图（11） calldetailIE.ftl是天一终端的IE浏览器在进行银行卡打电话业务时显示的页面。 calldetailNE.ftl是芙蓉终端mozzila浏览器银行卡打电话页面 category.ftl是显示产品分类的页面其指向categorydetail categorydetail.ftl是产品分类的详细信息页面其指向productsummary.ftl productsummary.ftl是某一个分类下所有产品的简要介绍页面，在终端上就是显示在屏幕右边的四个按钮上的内容。 product.ftl是产品页面其指向productdetail.ftl页面 productdetail.ftl页面是根据对产品的配置的详情页面来展示产品。 比如银行卡打电话这个产品就是配置成了calldetail.ftl,如果没有配置则默认显示productdetail.ftl页面 2.2.2： 常用的页面标签 以下例子中可以见到常用到了页面标签。
${uiLabelMap.chooseLanguage}
<#--
${uiLabelMap.firstPagedownInformation}
-->
<#iflanguagesList?
has_content>
<#listlanguagesListaslanguage>
<#iflanguage?
has_content>
<#assignindex=4-languagesList?
size+language_index+1>
<#assignstyleValue="productcontent"+index>
if_exists]}"name="${index*2}"onclick="window.location='<@giantstoneUrl>${language.requestUri? if_exists}';"/>
2.2.2.1注释<#---->
<#---->注释的内容不能出现--字样
<#--
${uiLabelMap.firstPagedownInformation}
#全自动电容电感测试仪.docx
