1 / 95

WAFⅡ 开发培训课程系列 —WAFⅡ 运行期框架体系介绍

WAFⅡ 开发培训课程系列 —WAFⅡ 运行期框架体系介绍. BOS Web 平台系统部. 课程目录. WAFⅡ 技术框架介绍 WAFⅡ 技术框架概览 WAFⅡ 逻辑分层及扩展模型 WAFⅡ 运行期全生命周期介绍 WAFⅡ 视图层介绍 (VIEW) 视图层概要介绍 页面视图层 (JSP,JSTL) 视图逻辑层 (JS Class) 超类体系介绍 常用方法介绍 WAFⅡ 前端逻辑层介绍 (WEB CONTROLLER) 前端逻辑层概要介绍 超类体系介绍 常用方法介绍. 课程目录. WAFⅡ 应用框架介绍 WAFⅡ 通用应用模板介绍

sarila
Download Presentation

WAFⅡ 开发培训课程系列 —WAFⅡ 运行期框架体系介绍

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WAFⅡ开发培训课程系列—WAFⅡ运行期框架体系介绍WAFⅡ开发培训课程系列—WAFⅡ运行期框架体系介绍 BOS Web平台系统部

  2. 课程目录 • WAFⅡ 技术框架介绍 • WAFⅡ 技术框架概览 • WAFⅡ 逻辑分层及扩展模型 • WAFⅡ 运行期全生命周期介绍 • WAFⅡ 视图层介绍 (VIEW) • 视图层概要介绍 • 页面视图层(JSP,JSTL) • 视图逻辑层(JS Class) • 超类体系介绍 • 常用方法介绍 • WAFⅡ 前端逻辑层介绍 (WEB CONTROLLER) • 前端逻辑层概要介绍 • 超类体系介绍 • 常用方法介绍

  3. 课程目录 • WAFⅡ 应用框架介绍 • WAFⅡ 通用应用模板介绍 • WAFⅡ 通用应用组件介绍 • 基于WAFⅡ 应用模板开发应用 • 基于WAFⅡ开发自定义模板 • 基于WAFⅡ 开发自定义组件

  4. WAFⅡ 课程导向 • WAFⅡ 技术框架介绍 • 培训内容： 本章将对WAFⅡ的技术框架，运行期生命周期，以及对各逻辑分层的作用及超类体系作全面阐述． • 期望目标： • 基于WAFⅡ开发业务应用的设计师，开发工程师能对WAFⅡ技术框架有全面的了解，可对业务应用系统的整体设计． • 开发人员能对熟练掌握WAFⅡ常用的工具方法的使用． • 开发人员能对开发过程中碰到的问题作出快速诊断．

  5. WAFⅡ 课程导向 WAFⅡ 技术框架概览

  6. WAFⅡ技术框架总览 Application Server Client/Browser Web Server 界面展现 JSP2.0 Json 通用业务 Service 模块A 后台服务 IOC Remote Local JSON Convert Request mapping BOTP 模块B 后台服务 Remote Local 显示风格 CSS2 HTTP Service Dispatcher 业务Controller 工作流 模块C 后台服务 Remote local 业务Controller Interceptor 事件逻辑 JS 附件管理 模块D 后台服务 Remote Local 权限 基础控件JQUERY 编码规则 模块… 后台服务 Remote Local 日志 License 模块… 后台服务 导入/导出服务 Remote Local 基础服务 HTTP缓存处理 模块… 后台服务 ……….基础服务 Remote Local 服务注入 －业务可能修改的部分

  7. WAFⅡ技术框架使用的第三方技术 • 视图层 • 页面采用标准的JSP2.0作为展现技术. • JS逻辑层部分使用JQUERY. • 控件使用JQUERY. • 前端逻辑层 • 前端逻辑层使用SpringMVC 3.1

  8. WAFⅡ 课程导向 WAFⅡ 逻辑分层及扩展模型

  9. WAFⅡ 逻辑分层及扩展模型 WAFⅡ 逻辑分层 视图层 JSON 前端逻辑层 Binary Rpc/SOAP 后端逻辑层

  10. WAFⅡ 逻辑分层及扩展模型 WAFⅡ 扩展模型

  11. WAFⅡ 课程导向 WAFⅡ 组件组合式开发模型

  12. WAFⅡ 的组件组合式开发模型 • 组件化及模板共享体系 • 灵活的组件及模板两级共享机制 • 可复用的功能或业务逻辑可抽象为组件 • 通过组件的组合形成模板或最终页面，降低耦合及复杂度 • 可任意集成互联网各种共享资源及开源技术，提升应用扩展

  13. WAFⅡ 的组件组合式开发模型 组件组合式的页面功能开发 通用查询组件 报表组件 附件管理组件 页面功能 工作流组件 …..组件 BOTP组件 引入引出组件

  14. WAFⅡ 课程导向 WAFⅡ 运行期全生命周期

  15. WAFⅡ 运行期生命周期概述 视图层操作 InitializeAction (Web Controller) 初始化模型 (Web Controller) 页面初始化 渲染视图 (JSP) 导航至视图页面 (Web Controller) 绑定页面逻辑类 (Java Script) 页面初始化完成 触发前端InitializeAction (Java Script) 功能/事件请求 (xxxAction) 结果响应及处理 (JavaScript) 触发前端xxxAction (Java Script) xxxAction (Web Controller) 触发前端DestroyAction (Java Script) 释放资源DestroyAction (Web Controller) 页面关闭 页面关闭完成

  16. WAFⅡ 课程导向 WAFⅡ 视图层介绍

  17. WAFⅡ 视图层介绍 • WAFⅡ视图层主要用来与用户进行操作交互，它主要包括以下两部分： • JSP • JS逻辑类

  18. WAFⅡ 视图层介绍-JSP • WAFⅡ 的页面视图采用传统的JSP技术，开发人员只要了解JSP相关知识即 • 可，上手较容易。 • WAFⅡ 标签库的开发方面采用了JSP2.0,与传统包装标签不同在于，直接 • 在WEB-INF/tags目录下创建*.tag文件，像编写JSP一样制作自定义标签.

  19. WAFⅡ 视图层介绍-JSP <%@page contentType="text/html;charset=UTF-8" %> <%@page isELIgnored="false" %> <%-- 标签库 --%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> …… <waf:page scriptBinder="jsBinder" scriptClassPath="fare.fieaexpense.FareExpenseAccountList" model="DEBUG"> <waf:head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>${localStr.get('page.title')}</title> <!-- 引入当前页面CSS库--> <link rel="stylesheet" type="text/css" media="screen" href="<c:url value="/webviews/fiea/fieaexpense/fareExpenseAccountEdit.css"/>"/> <!--引入当前页面逻辑类--> <script src="<c:url value="/webviews/fiea/fieaexpense/fareExpenseAccountList.js"/>"></script> <script src="<c:url value="/webviews/fiea/fieaexpense/fareExpenseAccountEdit_locale.js"/>"></script> </waf:head> <waf:body> </waf:body> </waf:page> 页面设置区域,设置字符集与是否忽略EL表达式 导入要使用的标签库 声明区 正文区

  20. WAFⅡ 视图层介绍-JSP • <waf:page> • 与HTML的<html>..</html>标签功能类似,它有几处属性,样例如下: <waf:page scriptBinder="jsBinder" scriptClassPath="fare.fieaexpense.FareExpenseAccountEdit" sessionAutoDestory="true" model="DEBUG" > <waf:head> ……..</waf:head> <waf:body>………</waf:body> </waf:page> • scriptBinder,scriptClassPath属性 • 在使用WAFⅡ进行开发JSP页面时，尽量不要直接在JSP文件中直接编写javascript或vbscript等浏览器脚本.脚本统一在单独的一个JS文件中编写，由于js文件的逻辑组织方式采用面向对象，故这里需要声明当前JSP页面所绑定的脚本类名称(scriptClassPath);scriptBinder属性用来指定当前绑定的JS逻辑类实例名称。 • sessionAutoDestory 属性 • 是否在页面关闭或重定向时自动清空当前页面创建的session • model属性 • 默认情况下,WAFⅡ引入的框架脚本为waf-framework-min.js与waf-ctrl_min.js,是经过混淆与压缩的，不利于调试，当model=“DEBUG”时，页面将自动将框架脚本换成未混淆的*-ALL.js，有利于框架人员跟踪与调试

  21. WAFⅡ 视图层介绍-JSP • <waf:head> • 与HTML的<head>..</head>标签功能类似, 样例如下: • <waf:page scriptBinder="jsBinder" scriptClassPath="fare.fieaexpense.FareExpenseAccountEdit" ……….> • <waf:head> • <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> • <title>${localStr.get('page.title')}</title> • <!--引入当前页面逻辑类--> • <script src="<c:url value="/webviews/fiea/fieaexpense/fareExpenseAccountEdit.js"/>"></script> • <script src="<c:url value="/webviews/fiea/fieaexpense/fareExpenseAccountEdit_locale.js"/>"></script> • <!-- 引入当前页面CSS库--> • <link rel="stylesheet" type="text/css" media="screen" href="<c:url value="/webviews/fiea/fieaexpense/fareExpenseAccountEdit.css"/>"/> • </waf:head> • …………. • </waf:page> • 在head标签体内，主要用来作窗口名称，JS脚本/CSS文件的引入，与html中<head>标签类似.该标签内部还将引入框 架脚本waf-framework.js与waf-ctrl.js，前者主要包含框架JS超类与工具类，而后者主要包含控件脚本。 除此之外，<waf:head>标签还将实例化当前页面所绑定的JS类，具体可参照<waf:page>标签的scriptBinder与scriptClassPath属性。

  22. WAFⅡ 视图层介绍-JSP • <waf:body> • 与HTML的<body>..</body>标签功能类似, 样例如下: <waf:page scriptBinder="jsBinder" scriptClassPath="fare.fieaexpense.FareExpenseAccountEdit" ……….> <waf:head> …………</waf:head> <waf:body> <wafctrl:panel tagClass="workarea" layout="column"> <wafctrl:column> <wafctrl:toolbar id="btnUpPage"> <wafctrl:linkbutton id="btnShowList" caption="${localStr.get('btnShowList.caption')}" actionBinding="${actionManager.get('showList')}"/> </wafctrl:toolbar> <wafctrl:form id="form" modelAttribute="model" validateOptions="{suspend:false,errorContainer: $('#msgarea1')}"> </waf:body> </waf:page> • 在<waf:body>标签体内，主要包含了JSP的正文，所有嵌套子标签主要由控件构成，具体可参照原样例代码与控件帮助文档

  23. WAFⅡ 视图层介绍-JS逻辑 • WAFⅡ 不建议直接在JSP中编写JS逻辑，原因如下: • 不便于对JS进行统一管控. • 每次打开页面时都将重新下载JS脚本，页面组件下载量大，导致响应速度慢. • 不便于分层管理。 • 代码结构将模糊不堪。 • 无法充分地利用HTTP缓存.

  24. WAFⅡ 视图层介绍-JS逻辑 • WAFⅡ 采用面向对象的方式对JS进行管理，编程方式与java类一一对应.如下面样 • 例: • waf.defineClass("fare.fieaexpense.FareExpenseAccountEdit",waf.template.bill.GeneralBillEdit,{ • initalizeDOM:function(){……}, • initalizeEvent:function(){……}, • initalizeAction:function(){ • fare.fieaexpense.FareExpenseAccountEdit.superClass.initalizeAction.call(this); • }, • /* 审核 */ • auditAction:function(){ • waf.msgBox.showConfirm({ • autoBtnClose:false, • summaryMsg:"您将审核该单据，点击'确认'继续!", • buttonType:"ok-cancel", • buttonCallBack:[ • function(dialog){ • waf.doSubmit( • { • action:'audit', • success:function(data){ • document.location.reload(); • } • } • ); • }, • function(){ • waf.msgBox.close(dialog); • } • ] • }); • });

  25. WAFⅡ 视图层介绍-JS逻辑 • waf.defineClass(subClassName,superClass,prototype) • waf.defineClass("fare.fieaexpense.FareExpenseAccountEdit",waf.template.bill.GeneralBillEdit,{ • initalizeDOM:function(){………}, • initalizeEvent:function(){………}, • initalizeAction:function(){ • fare.fieaexpense.FareExpenseAccountEdit.superClass.initalizeAction.call(this); • }, • destoryAction:function(){……….} • }); • 该函数主要用来定义JS类使用。 • subClassName参数 • 为当前声明的类路径，包括包名与类名称； • superClass参数 • 为所要继承的超类路径; • Prototype参数 • 为subClassName类声明的成员属性及成员函数. • initalizeDOM函数 • 主要用来声明DOM变量或JS变量使用，如Jquery中的选择器变量声明，在获取某一个 • Jquery变量时，不用每次都执行选择器来获取，可提升js执行性能.

  26. WAFⅡ 视图层介绍-JS逻辑 • waf.defineClass(subClassName,superClass,prototype) • waf.defineClass("fare.fieaexpense.FareExpenseAccountEdit",waf.template.bill.GeneralBillEdit,{ • initalizeDOM:function(){………}, • initalizeEvent:function(){………}, • initalizeAction:function(){ • fare.fieaexpense.FareExpenseAccountEdit.superClass.initalizeAction.call(this); • }, • destoryAction:function(){……….} • }); • 该函数主要用来定义JS类使用。 • initalizeEvent函数 • 主要用来对控件的事件进行绑定，如某控件的valueChange事件注册声明等. • initalizeAction函数 • 当initalizeDOM与initalizeEvent执行完毕后，框架将自动触发initalizeAction方法的调用，可在该函 • 数内部进行业务化的初始化操作，例如当DOM执行完后对控件默认值的赋值. • destoryAction函数 • 当页面关闭或重定向跳转之前，将自动触发该方法的调用，用来进行回收操作，返回true则表明正常 • 关闭，返回false则表明不关闭. 注：初始化执行顺序为: initalizeDOM()->initalizeEvent()->initalizeAction()

  27. WAFⅡ 视图层介绍-常用JS工具类 • WAFⅡ 的前端最核心变量名称为waf,它扩展自Jquery: • var waf=$; • WAFⅡ不建议用户直接使用$进行代码编写，可使用waf.XXXXX(…,…)方式 • 进行调用,有利于框架的长远发展与治理. • WAFⅡ 中waf除了调用jquery内置的所有工具集合外，还扩展了部分功能，如下: • waf.registerNamespace(namespace) • 描述：注册命名空间,并返回。 • waf.inherit(subClass, superClass) • 描述： WAFⅡ继承的实现 • waf. defineClass (subClassName,superClass,prototype) • 描述： WAFⅡ的JS类继承. • waf. createObject (classPath) • 描述： 实例化类变量

  28. WAFⅡ 视图层介绍-常用JS工具类 • WAFⅡ中waf除了调用jquery内置的所有工具集合外，还扩展了部分功能，如下: • waf. getUrlParams(url) • 描述：将URL参数转换为数组并返回. • waf. getConversationID() • 描述：获取当前页面的ConversationID。 • waf. redirect(url) • 描述： 页面导航。 • waf. loadJSLibrary(url) • 描述： 动态装载JS库. • waf. acseptBefore(target,method, advice) • 描述：WAFⅡ的AOP实现，在方法之前执行. • waf. acseptAfter(target,method,advice) • 描述：WAFⅡ的AOP实现，在方法之后执行. • waf. acseptRound(target,method,advice) • 描述：WAFⅡ的AOP实现，覆盖方法体.

  29. WAFⅡ 视图层介绍-常用JS工具类 • WAFⅡ中waf除了调用jquery内置的所有工具集合外，还扩展了部分功能，如下: • waf. doPost(option) • 描述：执行Post方式请求，示例如下: • waf.doPost( • { • action:‘delete', //请求Controller层的delete服务处理 • data: {id:<selid>}, //post方式提升的数据对象(JSON) • success:function(data){ • waf("#grid").dataGrid("reloadGrid"); • } • }); • waf. doGet(option) • 描述：执行Get方式请求，示例如下: • waf.doPost( • { • action:‘delete', • param: ‘id=’+ waf.encodeURIComponent(selectedIds.toString()), /* 对特殊参数转换URL编码 */ • success:function(data){ • waf("#grid").dataGrid("reloadGrid"); • } • });

  30. WAFⅡ 视图层介绍-常用JS工具类 • WAFⅡ中waf除了调用jquery内置的所有工具集合外，还扩展了部分功能，如下: • waf. doSubmit(option) • 描述：执行表单的提升操作(异步)，示例如下: • waf.doSubmit( • { • form: ‘editForm’, //form名称 • action:‘save’, //请求Controller层的save服务处理 • success:function(data){ • waf("#grid").dataGrid("reloadGrid"); • } • }); • waf. encodeURI(url) • 描述:对URL进行字符编码 • waf.encodeURIComponent(component) • 描述:对URL的各个组件进行字符编码,大多为大字符型参数或特殊字符进行编码. • waf.toJSONObject(jsonStr) • 描述:将字符串jsonStr转换为JSON对象 • waf. toJSONString(jsonObj) • 描述:将json对象转换为字符串描述

  31. WAFⅡ 视图层介绍-常用JS工具类 • WAFⅡ 中waf除了调用jquery内置的所有工具集合外，还扩展了部分功能，如下: • waf.getContextPath() • 描述:返回当前页面根路径 如:http://{domain}:{port}/{当前应用实例名称}

  32. WAFⅡ 课程导向 WAFⅡ 前端逻辑层介绍

  33. WAFⅡ 前端逻辑层介绍 • WAFⅡ Controller层主要职责如下: • 接收前端提交的ajax请求(get/post); • 接收前端提交的表单请求(submit); • 页面导航; • 与后台ControllerBean层进行服务交互;

  34. WAFⅡ 前端逻辑层介绍 • WAFⅡ Controller层样例代码:

  35. WAFⅡ 前端逻辑层介绍 • 每个Controller类均有一个接口类与实现类组成,接口类中包含所有该类提供Action的声明. • @Controller • 声明为Controller的标记,主要用来使springMVC找到该类为Controller. • @RequestMapping • 声明该Controller的URL访问路径. 当请求该URL.do的时候,则会定位至该类. • XXXXAction(request,response,modelMap) throws…… • 声明Controller层服务,服务后缀必须以Action结尾,前缀为业务操作,如 • saveAction(保存),deleteAction(删除),auditAction(审核)等. • Request参数: HttpServletRequest参数. • Response参数:HttpServletResponse参数. • ModelMap参数:数据模型序列.用在导航前的参数赋值. • 数据对象(CoreBaseInfo)参数:只有在submit方式的提交才会有相应的数据 • 对象,它的值由前端表单提交时,框架自动转换后赋给.

  36. WAFⅡ 前端逻辑层介绍 • Controller层的Action与视图层JS类中的Action关系 • JS类中的Action一般与Controller层的Action一一对应,例如: • JS类中对应的保存方法为saveAction:function(){} ,相对于Controller层 • 中也会对应: • public StringsaveAction(HttpServletRequest request,HttpServletResponse • Response,ModelMap modelMap) throws WafException • ,WafBizException • {…..} • JS类中的saveAction用来发出请求 (get/post/submit方式); • Controller层中的saveAction用来处理请求,并返回结果.

  37. WAFⅡ 前端逻辑层介绍 • 我们开发业务单元时一般有以下几种类型: • 序时薄界面 • 序时薄界面的最高超类为ListController. • 编辑界面 • 编辑界面的最高超类为EditController. • 查看界面 • 查看界面的最高超 类为ViewController • 空(未知) • 该类型的最高超类为WebPageController,ListController,EditController • 以及ViewController均是WebPageController的衍生子类. 下图描述了 • 框架的超类关系:

  38. WAFⅡ的超类体系

  39. WAFⅡ 前端逻辑层介绍 • JSONUtils.convertObjectToJson(Object object) • 描述:转换JAVA对象为JSON串,返回转换后的JSON字符串. • JSONUtils.convertJsonToObject(String jsonStr) • 描述:转换JSON字符串为对象,返回的对象类型为Map. • JSONUtils.convertJsonToObject(String jsonStr,Class clz) • 描述:转换JSON字符串为对象,返回的对象类型为clz型. • JSONUtils.writeJson(Object object) • 描述:直接输出JSON至前端浏览器. • JSONUtils.SUCCESS(Object object) • 描述:以成功方式输出object至前端浏览器,输出前框架会自动将object转换为JSON对象. • JSONUtils.ERROR(String message, Exception exception) • 描述:以错误方式输出异常信息,框架会捕获此异常,并弹出错误提示框.

  40. WAFⅡ 课程导向 • WAFⅡ 应用框架介绍 • 培训内容： 本章将对WAFⅡ的通用模板体系,及通用组件体系逐一进行描述. • 期望目标： • 开发人员熟练掌握WAFⅡ的所有通用模板体系,并在实际开发中运用. • 开发人员熟练掌握WAFⅡ的所有通用组件体系,并在实际开发中运用. • 开发人员可开发自定义模板. • 开发人员可开发自定义组件.

  41. WAFⅡ 课程导向 WAFⅡ通用应用模板介绍

  42. 基于模板的应用开发-标准基础资料 • WAFⅡ标准基础资料模板（generalDataBase），提供了基础资料维护最基本的增删改查功能，满足普通基础资料业务的开发要求。 • 列表页面: • 业务功能：新增、修改、查看、删除、刷新。 • 快捷查询组件。 • 可扩展功能，需要使用时，在工具栏增加button，然后关联此功能即可。 • 数据引入 • 数据引出 • 编辑页面: • 业务功能：保存、保存并新增、退出。

  43. 基于模板的应用开发-标准基础资料

  44. 基于模板的应用开发-多级基础资料 • WAFⅡ多级基础资料模板（treeDataBase），采用左树右表结构，包含了多层次基础资料维护的增删改查功能。 • 列表页面: • 业务功能：新增、修改、查看、删除、刷新。 • 树组件：全部展开、全部收起、定位、刷新、包含所有下级数据。 • 快捷查询组件。 • 可扩展功能，需要使用时，在工具栏增加button，然后关联此功能即可。 • 数据引入 • 数据引出 • 编辑页面: • 业务功能：保存、保存并新增、退出。

  45. 基于模板的应用开发-多级基础资料

  46. 基于模板的应用开发-分组基础资料 • WAFⅡ分组基础资料模板（groupDataBase），采用左树右表结构，左侧树维护组别信息，右侧表格维护组内数据详细信息，包含了基本的增删改查功能。 • 列表页面: • 业务功能：新增、修改、查看、删除、刷新。 • 树组件：新增、修改、查看、删除、定位、刷新、包含所有下级数据。 • 快捷查询组件。 • 可扩展功能，需要使用时，在工具栏增加button，然后关联此功能即可。 • 数据引入 • 数据引出 • 分组编辑页面、编辑页面: • 业务功能：保存、保存并新增、退出。

  47. 基于模板的应用开发-分组基础资料

  48. 基于模板的应用开发-批量基础资料 • WAFⅡ批量基础资料模板（generalDataBaseBatch），旨在解决基础资料的维护效率问题，可类似于Excel一样一次批量录入多条基础资料，并批量提交保存。 • 列表页面: • 业务功能：新增、删除、批量保存、刷新。 • 快捷查询组件。 • 可扩展功能，需要使用时，在工具栏增加button，然后关联此功能即可。 • 数据引入 • 数据引出

  49. 基于模板的应用开发-批量基础资料

More Related