EAS820 Web开发培训 ---基础篇 BOS WEB平台系统部 范来华 2016.5

目录 培训目标 开发环境准备及配置 WEB平台介绍 WEB平台二次开发 WEB平台方案部署 如何获取帮助 提纲

培训目标 建立共同语言 快速实现WEB单据 建立沟通渠道 形成统一的名称指代 掌握如何定制项目开发环境 掌握WEB平台的主要功能 如何获取帮助 如何与我们交流 建立沟通渠道

开发环境准备及配置--常用开发模式 模式一： 测试环境 正式环境 模式二： 测试环境 正式环境 模式三： 测试环境 正式环境 BIM中启动服务，可直接调试； BIM中制作补丁，在测试环境安装； 测试环境没有问题，从测试环境制作补丁安装到正式环境； 优点：方便，互不影响 缺点：没有门户，无法切换用户及组织 本地BIM启动服务 测试环境 正式环境 模式二： 测试环境debugServer，BIM远程调试连接到测试环境； 测试环境没有问题，从测试环境制作补丁安装到正式环境； 优点：有门户，可切换组织 缺点：一个开发调试期间，其它开发无法使用 本地BIM远程调试 测试环境 正式环境 模式三： 本地EAS服务器debugServer，BIM远程调试连接； 本地服务器制作补丁安装到测试环境； 测试环境统一测试没有问题，部署安装到正式环境； 优点：有门户，可切换组织，互不影响 缺点：对本地计算器要求稍高，本地需申请临时license 本地BIM远程调试 本地EAS服务器 测试环境 正式环境

开发环境准备及配置--导入解决方案

开发环境准备及配置--开发模式一 启动完成后，使用chrome访问下面链接即可： http://localhost:56898/myweb/dynamicPage.do?event=initialize&method=doEvent&uipk=com.kingdee.eas.webDev.extendMainPage&waf2skin=easbase&inwafpage=false&debug=true

开发环境准备及配--开发模式二 测试服务器启动debugserver debugserver启动完成后,启动远程调试 BIM启动远程调试

开发环境准备及配置--开发模式三 本地EAS启动debugserver debugserver启动完成后,启动远程调试 BIM启动远程调试

开发环境准备及配置—访问方式

WEB平台介绍 Web平台与GUI应用框架共用EAS BOS 服务端组件，与GUI框架、移动应 用框架共同支撑起成熟而又时尚、快捷的企业应用。 EAS后台服务 GUI Web Mobil Web平台提供统一的业务开发模型，简化纯Web应用开发逻辑，形成一致的 互联网风格的应用模式，最大限度实现各种组件的重用机制，同时采用开 放的技术框架，形成了强大而灵活的Web应用系统开发及管理平台。 Web平台与GUI可并存，提供了另一种交互方式

响应式布局-自适应各种分辨率，推荐：1280*1024/1024*768 WEB平台介绍--浏览器支持 支持的浏览器 推荐的浏览器 IE 8+ IE 11 Chrome 23+ Chrome 28+ Safari 5+ Safari 5+ 响应式布局-自适应各种分辨率，推荐：1280*1024/1024*768 推荐的浏览器，为主测环境 强烈推荐Chrome。原因是性能更优秀，更稳定可靠 小于1024*768的分辨率，会出现滚动条，大于1280*1024的分辨率，显示宽度限制为1280，其他部分为空白

WEB平台介绍--特性 基于开源技术构建，支持随意组合、共享各种互联网技术 OPEN API技术、共享EAS后台服务，最大化客户和伙伴的利益 开放性 基于开源技术构建，支持随意组合、共享各种互联网技术 OPEN API技术、共享EAS后台服务，最大化客户和伙伴的利益 技术门槛低、开发效率高

WEB平台介绍--特性 动（态）静（态）相宜，兼顾性能及灵活性 可动态部署，降低运维成本 运行期实时调整即时生效，直接看到效果 动态性 动（态）静（态）相宜，兼顾性能及灵活性 可动态部署，降低运维成本 运行期实时调整即时生效，直接看到效果 调整完毕自动静态化，提升响应速度

WEB平台介绍--特性 静态资源采用模块化架构体系，按需加载，性能优越 支持使用Nginx/Apache等单独部署静态资源服务器，优化并发性能 自动处理静态文件版本，版本更新无须手动清浏览器缓存

WEB平台介绍--功能构成 页面超类 页面模板 基本信息 页面组件 业务单元 页面1 布局 属性 控件 页面响应 后台处理 业务服务 事件 页面2 页面事件

WEB平台二次开发 1、新功能开发 2、扩展开发 新业务功能开发，包括新的基础资料，新的业务单据，新的报表等 可以使用系统基础及标准产品已有业务的基础资料，也可以关联使用新增的基础资料 类同于标准产品开发 2、扩展开发 基于标准产品中已有业务进行部分修改的 开发模式 扩展开发为继承模式，当原标准产品业务包升级后会自动根据规则合并，保护已有二次开发成果 与标准产品开发有较大区别

WEB平台二次开发--新功能开发流程 BIM创建实体 WEB平台业务单元 页面配置 拖放字段以及组件 调整布局 设置控件属性 配置功能 配置事件 代码编写 编写事件响应的Handler （java） 在js文件中自动生成的空方法中添加代码 在css文件中维护调整当前页面样式 直接预览并调试测试 发布菜单

WEB平台二次开发--管理页面介绍

WEB平台二次开发--创建业务单元

WEB平台二次开发--列表页面配置

WEB平台二次开发--编辑页面配置 简单布局 页面前台事件和功能，后台事件与功能 控件属性与事件 方法管理 资源管理

WEB平台二次开发—扩展开发 可在页面新增字段，并自动同步实体对应的主查询方案Query；亦可使用dep新增字段并修改查询方案 导入业务单元 新建页面 扩展页面 页面配置 新增字段，拖放字段以及组件 调整布局 设置控件属性 配置功能 配置事件 代码编写 编写事件响应的Handler （Rhino） 在js文件中发布的空方法中添加代码 在css文件中维护调整当前页面样式 直接预览并调试测试 可在页面新增字段，并自动同步实体对应的主查询方案Query；亦可使用dep新增字段并修改查询方案 方案启用

WEB平台二次开发--管理页面介绍

WEB平台方案部署 App server方案部署 WEB平台方案部署 制作 安装 卸载

app server部署内容

WEB平台方案部署--补丁制作 强制以WEB开头 相关jar包：通过增加和删除按钮可选择需打包jar文件，如页面定义的handler打成的jar包； 相关文件：通过增加和删除按钮可选择需打包的js和css等前台资源文件； 提示 这里选择的相关文件必须是前台资源文件； 在页面配置工具-资源文件设置中已经引用的js\css等文件系统会自动处理，无需在这里导入；在前面未引用的并在程序编码中直接使用的静态资源文件，如图片或部分js等，必须在此导入，否则运行时会出错；

WEB平台方案部署--安装补丁 1. 将已打包好的WEBPurOrder001.zip文件复制到eas服务器的eas\Server\admin\patch\patchlist目录下； 2. 打开BOS管理平台，点击【补丁管理】-【显示局部补丁】，选择WEBPurOrder001.zip ，点击【安装】，按照提示完成安装补丁；

WEB平台方案部署--验证补丁 启动服务，进入【扩展开发平台】，如下图，说明补丁安装成功（注：补丁页面使用的实体和查询必须在系统中已经存在）

WEB平台方案部署--部署后工作 1、扩展方案的启用原则：制作补丁时为启用状态，安装后也是启用状态；建议非启用状态制作补丁； 2、【分配】信息不包含在补丁中，安装完补丁需进行分配组织；

WEB平台方案部署--部署后工作 3、【发布菜单】信息不包含在补丁中，安装补丁后需发布菜单；

WEB平台方案部署--补丁卸载 注：由于目前系统尚未支持补丁卸载自动回退，因此在卸载补丁时需要以下操作 1.文件回退

WEB平台方案部署--补丁卸载 2.数据库回退(需谨慎操作)

缓存清理 1. Apusic缓存清理，安装WEB框架补丁后，先清空apusic缓存，然后再重启EAS服务 2. 静态化元数据清理，一般是在直接更改数据库或页面显示不正常时： 清理方式：ctrl+alt+shift+p

自我提升：WAFII帮助系统及培训课程 交流沟通：RMP提单，邮件，论坛及QQ 如何获取帮助 WAFII帮助系统链接： 外网链接：http://waf2.kingdee.com:6888/waf2help/index.do 北研金蝶内网链接：http://192.168.36.210:6888/waf2help/index.do 研发内网链接：http://192.168.11213:8080/waf2help/index.do 交流沟通：RMP提单，邮件，论坛及QQ

WAFII帮助系统 提供了38个主要组件，每个组件由JS和CSS组成，详细如下表 组件类型 包含项 UI组件 文本框，下拉框，日期，F7，数字框，文本域，多语言框，Radio 、 RadioGroup，Checkbox，隐藏域，文件上传、标签组件、按钮、菜单、菜单项、菜单按钮、显示表格、可编辑表格、树、窗口、提示组件、进度条、浮动提示等 容器组件 标签容器、章节、面板、数据展示、信息块、页签，工具栏等 布局组件 列布局 功能组件 自动完成、校验组件、阻塞、提示等

WAFII帮助系统--组件的使用方法 界面设计 编码 在定义工具上拖放，然后设置属性、事件和方法 在代码中动态创建组件，具体样例可以参考帮助系统 组件属性 属性的设置和获取通过option方法来完成 Waf(“#id”).wafPromptBox(“option”, “displayFormat”)； 有些属性不支持运行期的动态更改 组件方法 调用格式统一为： waf(“#id”).xxxx(“methodName”,paramters…..) Xxxx为组件对应的JS对象名，比如 Waf(“#id”).wafPromptBox(“open”)； 事件 事件的获取和设置通过option方法来完成 Waf(“#id”).wafPromptBox(“option”, “onchange”,function(){}) 界面设计 编码

WAFII帮助系统--组件的使用方法 1.常用属性说明 常见属性 说明 id 唯一标示符，不能重复 name 名称，form组件中绑定到对应的model属性 value 初始值，可接受el表达式 tagClass 样式类，对应HTML标签的class，需要写到css文件中 style 样式，对应标准HTML标签上的style width 宽度 height 高度 readonly 只读 disabled 禁用 maxlength 输入最大字符数 tabindex Tab顺序 hidden 隐藏

WAFII帮助系统--组件的使用方法 2.常用方法说明 3.常用事件说明 常用方法 说明 option 获取组件的属性或者更改组件属性 getValue 获取组件的值，一般用在form组件中 setValue 设置组件的值，一般用在form组件中 disable 禁用组件 enable 启动用组件 3.常用事件说明 常用事件 说明 onchange 值改变事件，参数包括改变前和改变后值 onkeydown 在文本框上按下键盘上的键时触发 onkeyup

与我们的沟通方式--RMP提单

邮箱： laihua_fan@kingdee.com 与我们的沟通方式--邮件 邮箱： laihua_fan@kingdee.com

与我们的沟通方式--论坛 能一次把问题描述清楚地问题，可以发到论坛提问

与我们的沟通方式—QQ群 QQ群： 255621573 如果对问题本身不是特别清楚，可在群里发问，方便实时互动