①绝密信息严禁泄露
P1
版权所有©1993-2012金蝶软件（中国）有限公司
①绝密信息严禁泄露
BOS WEB平台系统部
范来华 2016.2
EAS800 Web开发培训 ---进阶篇
①绝密信息严禁泄露
P2
培训目标
WEB页面的布局设计
前台代码设计
后台代码设计
调试方式介绍
提纲
目录
①绝密信息严禁泄露
P3
培训目标六大增长动力：财务共享推广策略
•了解Eventbus的概念
•掌握如何实现前台JS逻辑
•掌握如何实现WEB服务层逻辑
掌握单据的业务逻辑实现
掌握页面基本布局
•按钮
•通用查询与查询表格
•Form控件与分录表格
•Js调试方法
•Java调试方法
掌握调试方法
①绝密信息严禁泄露
P4
WEB页面的布局设计--标准列表页面
①绝密信息严禁泄露
P5
WEB页面的布局设计--按钮配置
•功能绑定与click事件，只能二选一，两个都存在时，click事件失效特点：功能绑定方式方便后续扩展点的插入；click事件方式简单明了
①绝密信息严禁泄露
P6
WEB页面的布局设计--通用查询配置
①绝密信息严禁泄露
P7
WEB页面的布局设计--查询表格配置
①绝密信息严禁泄露
P8
WEB页面的布局设计--标准编辑页面
①绝密信息严禁泄露
P9
WEB页面的布局设计--Form表单配置
①绝密信息严禁泄露
P10
WEB页面的布局设计--分录表格配置
值为【是】时出现该图标
①绝密信息严禁泄露
P11
eventbus的概念
事件处理总线
目标：利用可插拔的插件机制，实现系统可扩展性及松耦合
在JS层和WebServer层分别实现并提供插入机制
①绝密信息严禁泄露
P12
前台代码设计--新功能开发代码定义
①绝密信息严禁泄露
P13
前台代码设计—扩展开发代码定义
•扩展页面无法新增前台功能，供按钮绑定，因此按钮只能执行click事件
①绝密信息严禁泄露
P14
前台代码设计--加入业务逻辑
页面的事件和功能：Action、Event和Handler的概念
新增页面定义生成在public区域
事件：_self.subscribeEvent("pageOnLoadEvent",_public.pageOnLoadAfter,"after");
功能：_self.subscribeEvent("submitActionEvent",_public.submitBefore,"before");
扩展页面手动在JS增加，写在//@endPrivate前面的区域
事件：_self.subscribeEvent("pageOnLoadEvent",_private.xxxx,"after");
功能：_self.subscribeEvent("submitActionEvent",_private.xxxx,"before");
①绝密信息严禁泄露
P15
后台代码设计--新功能开发代码定义
①绝密信息严禁泄露
P16
后台代码设计—扩展开发代码定义
①绝密信息严禁泄露
P17
前后台代码的调用逻辑
①绝密信息严禁泄露
P18
前后台代码的调用逻辑
•注意Action及ActionEvent后缀
•事件中后台功能扩展java代码如何返回数据给前台
•modelMap.put(“model”)
•modelMap.put(“initData”)
①绝密信息严禁泄露
P19
如何主动触发一个事件或功能
•fireEvent的运用
•打开新窗口与关闭新窗口(addNewWindow, closeCurrentWindow)
①绝密信息严禁泄露
P20
后台代码设计--WEB Server层代码部署
•部署到服务器后，需重启服务器才可生效
•在制作WEB补丁时，相关jar包，可选中该文件，安装补丁时就可自动部署
①绝密信息严禁泄露
P21
页面配置—组件配置
BOTP/DAP/工作流/引入引出/附件管理
①绝密信息严禁泄露
P22
页面配置—资源配置
①绝密信息严禁泄露
P23
调试基础介绍
•产品模式
–默认以产品模式运行每个界面，产品模式运行时，每个界面的JS都会被打包并且混淆，并将多个JS压缩到一个链接中。
•Debug模式
–Debug模式时，JS的加载是单个加载的，如果想调试某个页面，可以在URL中加上&debug=true这样所有页面都以DEBUG模式加载JS。
•静态化
–静态化运行时，页面的HTML直接从服务器上加载，前台进行界面初始化，要想某个页面非静态化运行，可以在url中增加参数&renderModel=client。
•非静态化
–非静态化运行时，界面的HTML根据元数据从前台渲染出来。
JS加载模式
页面运行模式
①绝密信息严禁泄露
P24
调试技巧---（Chrome调试）
•JS断点设置
–断点类型分三种：默认遇到异常不中断；遇到所有异常都会中断；仅在出现未捕获的异常时才中断。
–断点条件，在断点位置的右键菜单中选择“Eidt Breakpoint…”可以设置触发断点的条件，即写一个表达式，表达式为true时触发断点。
•调试技巧
–开始调试：鼠标右键审查元素或F12；
–按钮功能：
• 调出控制台；
• 切换开发环境是全屏还是嵌入；
• 清空当前显示；
• 将压缩的JS文件格式化；
• 定位页面元素；
Chrome调试
①绝密信息严禁泄露
P25
调试技巧---（Chrome调试）
•Elements Panel
–查看当前选中元素的嵌套路径
–查看或编辑当前选中元素的样式
–查看选中元素的盒模型
–监听事件
常用调试面板
①绝密信息严禁泄露
P26
调试技巧---（Chrome调试）
•Network Panel
–查看站点在一个动作时都加载了哪些文件
–查看文件有没有正确加载、加载方式、状态、类型、大小、所用时间
–点击查看该文件的具体情况
常用调试面板
①绝密信息严禁泄露
P27
调试技巧---（Chrome调试）
•Source Panel
–查看当前站点的CSS、JS文件
–加断点调试JS代码：单步、跳出跳入循环、调用堆栈、查看变量值
常用调试面板
①绝密信息严禁泄露
P28
调试技巧---（Chrome调试）
•Console Panel
–控制台输出值打印
–查看或更改代码调试过程的值
常用调试面板
①绝密信息严禁泄露
P29
调试技巧---（IE调试）
•JS断点设置
–断点条件，在断点位置的右键菜单中选择“条件”可以设置触发断点的条件，即写一个表达式，表达式为true时触发断点。
•调试技巧
–开始调试：按F12；
–选择浏览器的版本：选择浏览器模式和文档模式；
–按钮功能：
• 切换开发环境是全屏还是嵌入；
• 将压缩的JS文件格式化；
• 定位页面元素；
IE调试
①绝密信息严禁泄露
P30
调试技巧---（IE调试）
•HTML 面板
–查看当前选中元素的嵌套路径
–查看或编辑当前选中元素的样式
–查看选中元素的布局
常用调试面板
①绝密信息严禁泄露
P31
调试技巧---（IE调试）
•脚本面板
–查看当前站点的CSS、JS文件
–加断点调试JS代码：单步、跳出跳入循环、调用堆栈、查看变量值
常用调试面板
①绝密信息严禁泄露
P32
调试技巧---（IE调试）
•网络面板
–点击开始捕捉，可以查看站点在一个动作时都加载了哪些文件
–查看文件有没有正确加载、加载方式、状态、类型、大小、所用时间
–点击转到详细视图，查看该文件的具体情况
常用调试面板
①绝密信息严禁泄露
P33
调试技巧---（Fiddler）
•功能
–Fiddler临时更改服务器静态资源，包括JS或CSS文件。
•使用步骤
1.打开Fiddler，清空浏览器缓存，刷新页面；
Fiddler临时更改服务器静态资源
①绝密信息严禁泄露
P34
调试技巧---（Fiddler）
•使用步骤
2. 在Fiddler的左侧找到指定的文件，在右侧AutoResponder面版中点击按钮Add Rule，将左侧的文件添加到右侧中；
Fiddler临时更改服务器静态资源
①绝密信息严禁泄露
P35
调试技巧---（Fiddler）
•使用步骤
3. 在Fiddler的右侧选中刚添加的文件，在右侧的底部Rule Editor第二个下拉框中选中find afile…指定本地的文件；
Fiddler临时更改服务器静态资源
①绝密信息严禁泄露
P36
调试技巧---（Fiddler）
•使用步骤
4. 如此反复添加一个或多个文件；
5. 在Fiddler右侧AutoResponder面版中，选中复选框Enable automatic responses 和 Unmatchedrequests passthrough；
6. 点击右下角的save,刷新页面即可
Fiddler临时更改服务器静态资源
①绝密信息严禁泄露
P37
调试技巧---（常用JS调试入口）
（注：以下介绍以Chrome调试为例）
•初始化事件
–initalizeEvent
常用JS调试入口
①绝密信息严禁泄露
P38
调试技巧---（常用JS调试入口）
•初始化页面
–initalizeAction
常用JS调试入口
①绝密信息严禁泄露
P39
调试技巧---（常用JS调试入口）
•界面渲染事件
–_pageOnRenderEventHandler
常用JS调试入口
①绝密信息严禁泄露
P40
调试技巧---（常用JS调试入口）
•构建组件
–_buildComponent
常用JS调试入口
①绝密信息严禁泄露
P41
调试技巧---（常用JS调试入口）
•控件的初始化方法
–表格初始化方法initGrid
常用JS调试入口
①绝密信息严禁泄露
P42
调试技巧---（常用JS调试入口）
•控件的初始化方法
–按钮初始化方法initLinkButton
常用JS调试入口
①绝密信息严禁泄露
P43
调试技巧---（常用JS调试入口）
•事件监听
–鼠标事件
常用JS调试入口
①绝密信息严禁泄露
P44
调试技巧---（常用JS调试入口）
•事件监听
–键盘事件
常用JS调试入口
①绝密信息严禁泄露
P45
调试技巧---（常用JS调试入口）
•断点
–条件断点
常用JS调试入口
①绝密信息严禁泄露
P46
调试技巧---（常用JS调试入口）
•断点
–选择断点类型
• 遇到所有异常都会中断
• 仅在出现未捕获的异常时才中断
常用JS调试入口
①绝密信息严禁泄露
P47
调试技巧---（常用JS调试入口）
•使用 try...catch 语句将错误打到控制台
常用JS调试入口
①绝密信息严禁泄露
P48
该案例以车辆控件与报销区域控件不能实现联动这个问题来做演示
具体步骤如下：
调试技巧---（简单调试案例演示）
①绝密信息严禁泄露
P49
1.出现问题
调试技巧---（简单调试案例演示）
①绝密信息严禁泄露
P50
2.Chrome调试过程
调试技巧---（简单调试案例演示）
通过F12打开调试环境
通过F12打开调试环境
①绝密信息严禁泄露
P51
3.测试
调试技巧---（简单调试案例演示）
①绝密信息严禁泄露
P52
调试方法介绍—java调试
BIM远程调试+EAS服务器DebugServer
BIM启用服务可直接本机调试
①绝密信息严禁泄露
P53
Thanks
terimakasih
感謝
谢谢
ありがとう
ขอบคุณ
版权所有©1993-2012金蝶软件（中国）有限公司
①绝密信息严禁泄露
①绝密信息严禁泄露
P54
特别声明
没有金蝶软件国际软件集团有限公司的特别许可，任何人不能以任何形式或为任何目的复制或传播本文档的任何部分。本文档中包含的信息如有更改，恕不另行通知。
由金蝶软件（中国）有限公司和其分销商所销售的某些软件产品包含有其它软件供应商版权所有的软件组件。
Microsoft®、WINDOWS®、NT®、EXCEL®、Word®、PowerPoint®和SQLServer®是微软公司的注册商标。
IBM®、DB2®、DB2通用数据库、OS/2®、ParallelSysplex®、MVS/ESA、AIX®、S/390®、AS/400®、OS/390®、
OS/400®、iSeries、pSeries、xSeries、zSeries、z/OS、AFP、IntelligentMiner、WebSphere®、Netfinity®、
Tivoli®、Informix和Informix®动态ServerTM是国际商业机器公司在美国或其他公司的商标。
ORACLE®是ORACLE公司的注册商标。
UNIX®是UNIXINTERNATIONALCO.,LIMTED的注册商标、OSF/1®和Motif®是OpenGroup的注册商标。
Citrix®、Citrix徽标、ICA、ProgramNeighborhood®、MetaFrame®、WinFrame®、VideoFrame®、MultiWin®以及此处引用的Citrix产品名是CitrixSystems公司的商标或注册商标。
HTML是HATEMOGLUTEKSTILGIYIMSANAYIVETICARETA.S.的注册商标，DHTML、XML和XHTML是W3C®、WorldWideWeb协会、计算机科学实验室的商标或注册商标，PureXML是国际商业机器公司的注册商标。
JAVA®是甲骨文美国有限公司的注册商标。
JAVASCRIPT®是甲骨文美国有限公司的注册商标，由其技术开发和实施商Netscape许可使用。
Apusic®是深圳市金蝶中间件有限公司的注册商标。
本文档提到的金蝶®、金蝶KIS®、K/3®、金蝶EAS®、友商网®和其它金蝶产品和服务以及它们各自的徽标是金蝶软件（中国）有限公司在中国和世界其它一些国家的商标或注册商标。本文档提到的所有其它产品和服务名称是它们各自公司的商标。