金蝶BOS开发工程师基础认证培训Web框架.ppt

金蝶BOS Web框架,金蝶软件（中国）有限公司,目录,总体架构JSFFaceletsExtAOMWAFWeb开发调试,总体架构,金蝶开发平台基于aom开发，aom的底层技术为JSF，表现层采用ext和Facelets,JSF是什么,JavaServer Faces(JSF,或者“Faces”)是一个构建Java Web 应用的UI 框架；它基于Java社区流程(JCP)开发，并且成为J2EE 的一个组成部分。Faces 的一个主要目标是为Java Web 应用开发领域带来RAD 风格的应用开发，就像Microsoft Visual Basic 和Borland Delphi 一样。JSF 提供一系列标准部件(按钮、超链接、复选框等等)，一个创建定制组件的模型，以及在服务器端处理客户端产生事件的方式，并且有良好的工具支持。你可以同步UI组件和相关对象的值，而不必编辑太多令人生厌的代码。所有的JSF 应用都构建于Servlet API 之上，使用HTTP 进行通信，并且使用JSP.之类的显示技术,JSF与Struts区别,JSF包含什么,JSF生命周期,JSF生命周期,构建复原组件树视图（RestoreViewPhase）JSF 组件树用来构建和维护页的状态和事件。对于每个会话，将会构建一次树，并且当用户返回到该页时复用该树。在此阶段的末尾，当前请求的 FacesContext 实例的根属性反映由先前的“Faces 响应”生成的视图的已保存配置（如果有的话）。,JSF生命周期,应用请求值 请求处理生命周期这一阶段的目的是使当前请求中包括的信息更新各组件的当前值（如参数、标题和 cookie）更新到相应组件树中的每个组件。从这里我们可以看到，从客户端发过来的请求是么种意义上的纯文本信息，而UI组件对应的是java实体，这里必然就存在了数据格式转换的问题。所以，在整个生命周期中，这个地方就成了数据转换发生的特定阶段（如：数据、日期显示格式）。,JSF生命周期,处理验证 为保证上一个阶段的数据正确，特定抽取了这个阶段作为数据校验。在这里作为创建此请求的视图的一部分，可以为每个组件注册零个或多个验证器实例。另外，组件类自身也可以在它们的 validate()方法中实现验证逻辑。在此阶段的末尾，会完成所有配置的验证。,JSF生命周期,更新模型值 如果到达了请求处理生命周期的这一阶段，就意味着入局请求根据所执行的验证在语法和语义上都是有效的，且组件树中每一组件的本地值都已被更新，这一阶段主要通过调用组建树的每个UI组件的processUpdates（）方法，递归更新每个组件树对应的应用程序的模型数据,JSF生命周期,调用应用程序 如之前构建复原视图时所述，如果当前请求的视图是根据先前请求保存的状态信息重新构造的，则 JSF实现就能够确保通过在此 Web 应用程序的“应用程序”对象上调用 getActionListener。,JSF生命周期,呈现响应此阶段同时完成两项任务：使响应呈示给客户机，以及使响应的状态得到保存以供后续请求处理之用。在一个阶段中同时处理这两项任务的原因是在 JSP 应用程序中呈示响应的行为会导致在呈示页面时构建视图。因此，要在视图的状态被呈示给客户机之后才能保存该状态。,为什么要选用JSF,对于RAD 工具的四个层次，JavaServer Faces 定义了其中3 个：一个基础组件架构，一个标准的UI 部件集，以及一个应用基础架构。JSF 的组件架构定义了一个通用的方式来建立UI 部件 JavaServer Faces 有一个特定的目标：使web 开发更快更容易。它允许开发人员以组件，事件，Backing Bean 以及它们之间的交互来进行思考，而不是基于请求，响应和标记。换句话说，它掩盖了Web 开发的大量的复杂性，使开发人员能够集中于他们最擅长的事情：开发应用系统。,典型例子,Hello，world,Facelets,Facelets 非常适合 JSF，专为 JSF 设计的视图技术Facelets是用来建立JSF应用程序时的一个可供选择的表现层技术。Facelets提供了一个强有 力的模板化系统，让你使用HTML样式的模板来定义JSF的表现层，减少了组件整合进表现层时候冗余的代码，而不需要一个web容器,Facelets,Facelets 有以下吸引人的特性：模板化（像 Tiles）复合组件 定制的逻辑标记 表达式语言 对设计师友好的页面开发 创建组件库,用 Facelets 进行模板化（定义模版）,创建 layout.xhtml 页面。定义 Facelet 的命名空间，导入对 Facelets 的使用。用 ui:insert 标记定义页面的逻辑区域。用纯文本和 ui:include 标记定义合理的默认值,用 Facelets 进行模板化（使用模版）,当页面调用布局模板时，需要指定模板的位置使用 ui:composition 标记。为了把参数传递给模板，要使用 ui:define 标记，它是 ui:composition 标记的子元素,复合组件,不要重复自己 Facelets 把它的精华放在复合组件上,复合组件的创建,创建 Facelets 标记库。在 web.xml 中声明标记库。用命名空间导入标记文件,ExtJs,ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写 的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应 用中 ExtJS 由一系列的类库组成，一旦页面成功加载了ExtJS 库后，我们就可以在页面中通过javascript 调用ExtJS 的类及控件来实现需要的功能,EXTJS,ExtJS 的类库由以下几部分组成底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。其它控件都是建立在这些底层api 的基础上，底层api 位于源代码目录的core 子目录中，包括DomHelper.js、Element.js 等文件,Extjs,控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中,ExtJs,实用工具Utils：Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能,ExtJs 组件,Ext 组件是由Component 类定义，每一种组件都有一个指定的xtype 属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。组件体系,ExtJs组件使用,组件可以直接通过new 关键子来创建，比如控件一个窗口，使用new Ext.Window()，创建一个表格则使用new Ext.GridPanel()组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件,ExtJs组件,每一个组件除了继承基类中的配置属性以外，还会根据需要增加自己的配置属性，另外子类中有的时候还会把父类的一些配置属性的含义及用途重新定义。学习及使用ExtJS，其中最关键的是掌握ExtJS 中的各个组件的配置属性及具体的含义 http:/deploy/dev/docs/,AOM,AOM：Apusic OperaMask，金蝶中间件公司的Web开发框架AOM完整实现了JSF1.2规范，同时，对JSF1.2规范做了大量扩充，主要有AJAX支持、IoVC编程模型,AOM架构图,AOM对Web组件的扩展,标准的JSF提供了与HTML元素一一对应的Web组件，标准的JSF Web组件基本上不能满足业务开发要求 AOM在此基础上提供了一套基于Ext JS的Rich Components，根据Ext JS所提供的客户端组件模型，提供了相应的服务器端组件模型、事件和组件渲染器，服务器端组件模型可以被复用，与具体的组件表现形式无关。而组件的渲染器可以自行以替换的方式进行扩展,AOM对Web组件的扩展,组件使用方式通过指定控件属性jsvar,可以用extjs api在页面访问http:/=/,AOM约定优于配置,目前主流的一些框架如（Struts和spring）通过很多配置实现对象的依赖注入AOM中通过约定优于配置的规则，实现对象的注入,AOM-数据校验,简单校验Annotation：Required客户端校验 自定义校验完整上下文校验,AOM-JSF生命周期拦截,默认提供BeforePhase、AfterPhase的标注式拦截其他生命周期可扩展,AOM MBean编程模型,AOM对标准JSF的ManagedBean进行了扩展：声明式定义ManagedBean AOM提供了ManagedBean、ManagedProperty等一系列标签，可以使用这些标签来以声明方式定义ManagedBean 通过Inject注入其他ManagedBean,AOM IOVC,IoVC“Inversion of View-Control”，即“视图控制反转”传统的JSF编程模式传统方式的JSF设计中，UI所展现出来的数据通常位于ManagedBean中，UI上需要与用户交互的行为（Action）也定义在ManagedBean中，在UI中通过EL表达式，将每个组件与ManagedBean中所持有的数据绑定起来。如：这是以视图为控制导向的一种设计模式，视图必须知道其所要绑定的ManagedBean及其属性和行为，这在一定程度上限制了UI的重用。,AOM IOVC,IoVC定义了一系列的标注用于将Model与View上的元素对应，开发者通过在Model上声明这种对应关系，可以将视图上的元素与Model中的属性和方法对应起来 在IoVC编程模式下，组件只需简单的声明id属性即可与Model进行关联,WAF,WAF-web application frameworkWAF作用 Web开发平台的核心职能类似GUI框架，是EAS Web产品开发的基础平台，跟GUI应用框架共用EAS Web服务端组件，协同BOS框架和业务模型(BIM)实现模型驱动架构(MDA)。它提供统一的业务开发模型，简化开发逻辑，形成一致的开发模式，最大限度实现代码的重用机制,WAF,WAF有什么1.web应用框架体系 为业务单据提供复用体系 2.UI通用处理 如RPC交互、数据绑定、异常处理、通用查询等 3.业务服务调用 如权限控制、BOTP、工作流等 4.某些控件 如F7,枚举框，多语言控件，LabelContainer等,web应用框架体系,序时簿,Waf 序时簿,列表界面（List Winlet）ManagedBean从ListBean继承，请实现如下方法：getQueryPK()要求返回查询当前列表数据结果的Query PK getEditBeanName()要求返回列表对象对应的编辑界面的ManagedBean的名称 getEditUrl()要求返回列表对象对应的编辑界面的Url getBizInterface()类似编辑界面的同样接口实现。该业务接口的获取可以通过注入方式实现,WAF,IBOSBizCtrl 标签 本注释型负责对BOS IBizCtrl（IBOSObject以及Function EJB接口对象）进行统一的注入控制,以及屏蔽与BOS服务端交互的复杂性 例如：IBOSBizCtrlprivate IPurReq service;,Waf 序时簿模版,templates/list-templates.xhtml 定义了列表界面的布局模板，业务单据的列表界面视图从此模板继承，并提供相应的模板内容实现 具体使用可以参照Facelets章节,Waf 序时簿组件,WEB-INF/components/billList-toolbar.xhtml 封装了单据列表界面工具条部分的内容，提供了标准的操作按钮以及统一的Action绑定，相关业务使用此组件时只需设置组件的beanName属性即可 例子：,Waf 序时簿组件,WEB-INF/components/baseList-toolbar.xhtml 封装了基础资料列表界面工具条部分的内容，提供了标准的操作按钮以及统一的Action绑定，相关业务使用此组件时只需设置组件的beanName属性即可 例子：,Waf 序时簿组件,WEB-INF/components/inner-window.xhtml 封装了列表界面跟其他页面进行Ajax交互的载体，支持UIWindow的弹出框（适用于通用过滤等），也支持其他通过javascript脚本弹出的对话框或新窗口（例如编辑界面或BOTP转换界面等）例子：,Waf 编辑界面类图,Waf 编辑界面,编辑界面（Edit Winlet）ManagedBean从EditBean继承，请实现如下几个方法：createNewModel：新增业务对象getBizInterface：业务操作接口,该业务接口的获取可以通过注入方式实现,注入方式和ListBean类似可选实现：getSelectors 获取所选单据VO属性，子类可覆盖实现 Updatemodel 单据若含有分录，更新分录model,Waf 编辑界面模版,templates/edit-templates.xhtml 定义了编辑界面的布局模板，业务单据的编辑界面视图从此模板继承，并提供相应的模板内容实现,Waf 编辑界面组件,WEB-INF/components/billEdit-actions.xhtml 封装了编辑界面下方按钮部分的内容，提供了标准的操作按钮以及统一的Action绑定，相关业务使用此组件时只需设置组件的beanName属性即可 例子:,Waf 编辑界面组件,WEB-INF/components/billEntry-actions.xhtml封装了分录的基本操作以及统一的Action绑定，相关业务使用此组件时只需设置组件的beanName属性即可例子：,Waf 编辑界面组件,WEB-INF/components/billEdit-toolbar.xhtml 封装了单据与其他单据相关常用功能的操作及Action绑定，例如上一个单据、下一个单据、单据转换等，相关业务使用此组件时只需设置组件的beanName属性即可,Waf 编辑界面组件,WEB-INF/components/billEdit-actions.xhtml 封装了编辑界面下方按钮部分的内容，提供了标准的操作按钮以及统一的Action绑定，相关业务使用此组件时只需设置组件的beanName属性即可 例子:,Waf UI通用处理-数据绑定,JSF体系本身提供了完善的数据绑定功能，不需要类似GUI的loadFields及storeFields等自己处理。对于一些特定类型的属性绑定，框架提供常用的Converter处理，包括IObjectValueConverter、BOSUUidConverter、DataTimeConverter等。支持EL表达式；可以绑定简单数据类型（string,int,float等）；可以通过数据类型转换器绑定复杂数据类型（任意数据类型）；支持表格、F7的数据绑定；,Waf UI通用处理-多语言处理,服务端多语言处理Web框架基类BaseBean提供了getResoureText(String key)方法，从文件名等于类名的多语言文件中获取多语言文本；提供了getText(String bundle,String key)方式更加灵活的获取多语言信息。客户端JSF视图标签多语言处理通过EL表达式获取多语言信息：#messages资源键客户端javascript脚本多语言处理对于jsp视图，通过扩展jsp的TagSupport，实现把服务端资源文件动态生成客户端javascript多语言脚本数组，然后在js脚本中通过操作此数据来获取相应的多语言信息；对于facelet视图，需要通过扩展TagHandler来实现jsp一样的标签功能，对于视图部分使用上对开发者是一致的。用法：在JSF视图中申明，然后就可以在javascript中使用resource“key”即可获取对应的多语言字符。,Waf UI通用处理-应用上下文,Waf UI通用处理-异常处理,HTTP错误异常包括用户访问的url不存在、会话失效、访问拒绝等，框架统一拦截，导航到统一的友好页面系统异常包括数据库取数出错、代码运行空指针等，框架统一拦截，如果是ajax请求，弹出错误提示框；如果非ajax请求，导航到统一页面用户异常主要是便于开发人员把自己认为的异常逻辑或者在应用中出现的问题展现出来，框架统一拦截处理，异常处理方式跟上面“系统异常”处理一样,Waf UI通用处理-通用过滤,通用过滤默认过滤只需要在XXXListBean实现getQueryPK()即可自定义过滤页面提供一个继承的ManagedBean，假如为MyUserQueryBean，同时还有相应的Facelets视图，myUserQuery.xhtml；在序时簿ManagedBean里，覆盖getUserQueryView()方法，返回上面的Facelets视图路径，例如：Override protected String getUserQueryView()return/mydemo/myUserQuery.xhtml;,Waf业务服务调用,单据套打框架已经提供默认实现，用户只需要定义套打模板即可通过导出PDF方式实现网络互斥数据互斥避免同时编辑同一张单据日志框架默认已经提供，业务开发无需编码色彩方案目前支持蓝、绿、红、橙四种色彩方案，默认蓝色支持扩展（增加相应的色彩方案目录结构）,Waf业务服务调用权限,权限控制页面访问权限页面按钮权限,Waf业务服务调用编码规则,应用编码规则服务定义相关编码规则，然后再Web单据里直接根据规则自动生成编码,Waf业务服务调用工作流,单据的提交及工作流审批,Waf业务服务调用工作流,Waf业务服务调用Botp,配置BOTP规则,Waf业务服务调用Botp,在费用申请单通过关联生成操作完成费用报销单的生成,Waf控件,F7 容器控件 复合控件 枚举控件 多语言控件,Waf控件-F7,主要属性：queryInfo：定义queryviewUrl属性定义打开自定义url,不写将使用通用f7界面。diaplayFormat:$name$F7默认显示效果editFormat:$number$F7编辑时效果commitFormat:$number$popWidth:打开窗口宽popHeight:打开窗口高muti:是否为多选模式store：绑定后台默认的数据集合，用于回填编辑table页面cu:是否cu过滤orgType：对应的组织类型filterInfo：缺省的过滤条件permItemName：缺省绑定的权限项,Waf控件-F7,F7修改后如果需要触发服务端事件，可以通过ajaxaction，直接绑定datachanged属性的el表达式 F7修改后如果需要触发客户端事件 可自行添加javascript脚本实现：Ext.onReady(function()F7.on(datachanged,function(old,new)/old的objectvalue/new的objectvalue););,Waf控件-F7,F7提供多选支持，可绑定list 和 数组。目前通过过滤界面添加了对于多选的支持，如果需要支持多选，f7添加属性muti=”true”如：,Waf控件-F7,开发自定义的f7界面，需要自己开发对应的页面和后台bean。自定义的f7的后台Bean需要实现IKDPromptBean接口，也可以从AbstractKDPromptBean这个类集成实现。具体实例可以参考通用f7的处理，实现类参考KDCommonPromptBean，界面部分实现可以参考通用f7的界面处理。数据返回：需要返回符合f7标准的json对象数组（在服务端可以调用：ObjectValueUtil.buildJSonArray(objectvalues)返回标准的json）,Waf控件,其他waf控件请参考BOS开发指南_控件web,Web调试,工具还是工具！人与动物最大的区别在于是否使用工具好的程序员和差的程序员最大的区别也在于是否使用调试工具,Web调试工具,IE下Microsoft Script Debugger Companion.JS httpWatchIE developer toolbarIe8自带调试工具FireFoxFireBug,Web调试工具,Microsoft Script Debugger 下载地址：details.aspx?displaylang=zh-cn&FamilyID=E606E71F-BA7F-471E-A57D-F2216D81EC3D,Web调试工具,Companion.JS 官方地址：,Web调试工具,httpWatch可以从我本机获取:192.168.33.63IE7.0SetupHttpWatchHttpWatch,Web调试工具,IE developer toolbar192.168.33.63IE7.0SetupIEDevToolBarSetup.msi,Web调试工具,FireBug最好的web调试工具，前几种工具的集合可以从firefox官方网站获取,总结,介绍了金蝶BOS Web开发平台的底层技术框架，分别对jsf,ext,facelets,aom,waf进行了介绍和使用。对web开发工具的使用请参照对应开发工具的培训。,Question？,谢谢！,