EAS820 Web开发培训3_进阶篇

①绝密信息严禁泄露

P1

版权所有©1993-2012金蝶软件（中国）有限公司

①绝密信息严禁泄露

$C:\Users\yibo_wang\Desktop\素材\閲戣澏PPT姣嶇増瑙嗚鍏冪礌\灏忔柟鐮栦晶瑙嗗浘\PPT C-orange.png$

$K:\201203盛世确认可用输出\PPT\素材\玻璃砖素材\PPT C Lego.png$

$K:\201203盛世确认可用输出\PPT\素材\金蝶PPT母版视觉元素\五彩云\五彩雲.png$

BOS WEB平台系统部

范来华 2016.5

EAS820 Web开发培训 ---进阶篇

①绝密信息严禁泄露

P2

培训目标

WEB页面的布局设计

前台代码设计

后台代码设计

WEB框架主要事件和功能介绍

调试方式介绍

提纲

目录

①绝密信息严禁泄露

P3

培训目标六大增长动力：财务共享推广策略

•了解Eventbus的概念

•掌握如何实现前台JS逻辑

•掌握如何实现WEB服务层逻辑

掌握单据的业务逻辑实现

掌握页面基本布局

•按钮

•通用查询与查询表格

•Form控件与分录表格

•Js调试方法

•Java调试方法

掌握调试方法

①绝密信息严禁泄露

P4

WEB页面的布局设计--标准编辑页面

①绝密信息严禁泄露

P5

eventbus的概念

事件处理总线

目标：利用可插拔的插件机制，实现系统可扩展性及松耦合

在JS层和WebServer层分别实现并提供插入机制

①绝密信息严禁泄露

P6

前台代码设计

①绝密信息严禁泄露

P7

后台代码设计

①绝密信息严禁泄露

P8

前后台代码的调用逻辑

①绝密信息严禁泄露

P9

前后台代码的调用逻辑

•注意Action及ActionEvent后缀

•事件中后台功能扩展java代码如何返回数据给前台

•modelMap.put(“model”)

•modelMap.put(“initData”)

①绝密信息严禁泄露

P10

如何主动触发一个事件或功能

•fireEvent的运用

•打开新窗口与关闭新窗口(addNewWindow, closeCurrentWindow)

①绝密信息严禁泄露

P11

Web页面打开时总体执行流程

url

url

前端初始化事件执行

前端初始化事件执行

拦截器

拦截器

Web端框架

License

用户监控

行为采集

性能监控

主业务组织处理

Web端初始化事件执行

Web端初始化事件执行

功能权限

App端处理逻辑

App端处理逻辑

日志

数据权限

Client/Browse

Web Server

App

JSP页面

HTML页面

加载

HTML页面

业务逻辑插入

业务逻辑插入

业务逻辑编写

①绝密信息严禁泄露

P12

编辑类型页面打开时业务可插入事件执行时序图

Client/Browse

Web Server

url

创建新数据

modelCreateEvent

新增？

Y

N

初始化数据

initDataEvent

页面初始化 pageOnLoadEvent

页面初始化

pageOnLoadEvent

end

数据加载

fieldLoadEvent

调用后台取数据

modelLoadEvent

-嵌套事件

仅能after方式插入业务逻辑

可以override/after方式插入业务逻辑

页面渲染

pageOnRenderEvent

初始化数据

initDataEvent

设置关联实体取数属性

modelFieldSelecterEvent

①绝密信息严禁泄露

P13

编辑类型页面打开时业务可插入事件应用说明

创建新数据

modelCreateEvent

调用后台取数据

modelLoadEvent

初始化数据

initDataEventAction

页面渲染

pageOnRenderEvent

初始化数据

initDataEvent

数据加载

fieldLoadEvent

Web Server

Browse/js

1.新建单据时设置各字段默认值

2.建议采用after方式插入，框架中已自动设置主业务组织、编码规则等默认值

1.编辑查看单据时框架取单据的详细信息

2.建议采用after方式插入，业务可插入数据模型的特殊处理

1.业务可在这里调用后台取一些运行期需要使用的设置参数，可传递到前端

2.仅能采用after方式插入

1.pageOnLoadEvent只能以after方式插入业务处理

2.不适合放在上述事件中的web端处理，可在这里进行

1.仅能以before方式插入逻辑

2.如根据后台参数设置动态修改控件属性

1.仅能以after方式插入逻辑

2.一般处理一些全局性的参数

1.仅能以before/after方式插入逻辑

2.框架将返回的数据模型显示在页面控件中

3.一般在这里根据字段值设置控件使能，如显示及编辑

设置关联实体取数属性

modelFieldSelecterEvent

1.关联实体默认只取Id、编码、名称，如果要取其他属性，需要在这里设置

2.建议采用after方式插入

1.pageOnLoadEvent只能以after方式插入业务处理

2.不适合放在上述事件中的，可在这里处理

页面初始化

pageOnLoadEvent

页面初始化

pageOnLoadEvent

①绝密信息严禁泄露

P14

编辑页面提交时业务可插入事件执行时序图

Client/Browse

Web Server

仅数据刷新？

getOnlyModelLoad()

Y

N

初始化pageOnLoadEvent

*详细见前面

提交功能

submitActionEvent

end

取数据事件

modelOnLoadEvent

按提交按钮

页面数据更新

fieldOnStoreEvent

提交功能

submitActionEvent

编辑状态打开页面

*见页面打开时序图

①绝密信息严禁泄露

P15

编辑类型页面提交时业务可插入事件应用说明

提交后台功能

submitActionEvent

调用后台取数据

modelLoadEvent

Web Server

1.框架中调用App的提交处理

2.建议采用before/after方式插入，特别是扩展修改时

1.从后台数据库取最新数据

2.详见前面页面打开时序图的描述

编辑状态打开页面

*见页面打开时序图

提交功能

submitActionEvent

数据更新

fieldOnStoreEvent

Browse/js

直接以url请求后台，以编辑状态重新打开当前页面

1.能以before/after方式插入逻辑

2.框架从控件中取出最新值更新页面数据模型

1.建议以before/after方式插入业务处理，特别是扩展修改时

2.不适合放在其他事件中的，可在这里处理

【注意】当getOnlyModelLoad=F时，不会执行after方式插入逻辑

初始化pageOnLoadEvent

*详细见前面

触发页面pageOnLoad事件，重新渲染加载数据

①绝密信息严禁泄露

P16

后台代码设计--WEB Server层代码部署

•部署到服务器后，需重启服务器才可生效

•在制作WEB补丁时，相关jar包，可选中该文件，安装补丁时就可自动部署

①绝密信息严禁泄露

P17

调试基础介绍

•产品模式

–默认以产品模式运行每个界面，产品模式运行时，每个界面的JS都会被打包并且混淆，并将多个JS压缩到一个链接中。

•Debug模式

–Debug模式时，JS的加载是单个加载的，如果想调试某个页面，可以在URL中加上&debug=true这样所有页面都以DEBUG模式加载JS。

•静态化

–静态化运行时，页面的HTML直接从服务器上加载，前台进行界面初始化，要想某个页面非静态化运行，可以在url中增加参数&renderModel=client。

•非静态化

–非静态化运行时，界面的HTML根据元数据从前台渲染出来。

JS加载模式

页面运行模式

①绝密信息严禁泄露

P18

调试技巧---（Chrome调试）

•JS断点设置

–断点类型分三种：默认遇到异常不中断；遇到所有异常都会中断；仅在出现未捕获的异常时才中断。

–断点条件，在断点位置的右键菜单中选择“Eidt Breakpoint…”可以设置触发断点的条件，即写一个表达式，表达式为true时触发断点。

•调试技巧

–开始调试：鼠标右键审查元素或F12；

–按钮功能：

• 调出控制台；

• 切换开发环境是全屏还是嵌入；

• 清空当前显示；

• 将压缩的JS文件格式化；

• 定位页面元素；

Chrome调试

①绝密信息严禁泄露

P19

调试技巧---（Chrome调试）

•Elements Panel

–查看当前选中元素的嵌套路径

–查看或编辑当前选中元素的样式

–查看选中元素的盒模型

–监听事件

常用调试面板

①绝密信息严禁泄露

P20

调试技巧---（Chrome调试）

•Network Panel

–查看站点在一个动作时都加载了哪些文件

–查看文件有没有正确加载、加载方式、状态、类型、大小、所用时间

–点击查看该文件的具体情况

b2.pmg.bmp

常用调试面板

①绝密信息严禁泄露

P21

调试技巧---（Chrome调试）

•Source Panel

–查看当前站点的CSS、JS文件

–加断点调试JS代码：单步、跳出跳入循环、调用堆栈、查看变量值

常用调试面板

①绝密信息严禁泄露

P22

调试技巧---（Chrome调试）

•Console Panel

–控制台输出值打印

–查看或更改代码调试过程的值

常用调试面板

①绝密信息严禁泄露

P23

调试技巧---（IE调试）

•JS断点设置

–断点条件，在断点位置的右键菜单中选择“条件”可以设置触发断点的条件，即写一个表达式，表达式为true时触发断点。

•调试技巧

–开始调试：按F12；

–选择浏览器的版本：选择浏览器模式和文档模式；

–按钮功能：

• 切换开发环境是全屏还是嵌入；

• 将压缩的JS文件格式化；

• 定位页面元素；

IE调试

①绝密信息严禁泄露

P24

调试技巧---（IE调试）

•HTML 面板

–查看当前选中元素的嵌套路径

–查看或编辑当前选中元素的样式

–查看选中元素的布局

常用调试面板

①绝密信息严禁泄露

P25

调试技巧---（IE调试）

•脚本面板

–查看当前站点的CSS、JS文件

–加断点调试JS代码：单步、跳出跳入循环、调用堆栈、查看变量值

常用调试面板

①绝密信息严禁泄露

P26

调试技巧---（IE调试）

•网络面板

–点击开始捕捉，可以查看站点在一个动作时都加载了哪些文件

–查看文件有没有正确加载、加载方式、状态、类型、大小、所用时间

–点击转到详细视图，查看该文件的具体情况

常用调试面板

①绝密信息严禁泄露

P27

调试技巧---（Fiddler）

•功能

–Fiddler临时更改服务器静态资源，包括JS或CSS文件。

•使用步骤

1.打开Fiddler，清空浏览器缓存，刷新页面；

Fiddler临时更改服务器静态资源

①绝密信息严禁泄露

P28

调试技巧---（Fiddler）

•使用步骤

2. 在Fiddler的左侧找到指定的文件，在右侧AutoResponder面版中点击按钮Add Rule，将左侧的文件添加到右侧中；

Fiddler临时更改服务器静态资源

①绝密信息严禁泄露

P29

调试技巧---（Fiddler）

•使用步骤

3. 在Fiddler的右侧选中刚添加的文件，在右侧的底部Rule Editor第二个下拉框中选中find afile…指定本地的文件；

Fiddler临时更改服务器静态资源

①绝密信息严禁泄露

P30

调试技巧---（Fiddler）

•使用步骤

4. 如此反复添加一个或多个文件；

5. 在Fiddler右侧AutoResponder面版中，选中复选框Enable automatic responses 和 Unmatchedrequests passthrough；

6. 点击右下角的save,刷新页面即可

Fiddler临时更改服务器静态资源

①绝密信息严禁泄露

P31

调试技巧---（常用JS调试入口）

（注：以下介绍以Chrome调试为例）

•初始化事件

–initalizeEvent

常用JS调试入口

①绝密信息严禁泄露

P32

调试技巧---（常用JS调试入口）

•初始化页面

–initalizeAction

常用JS调试入口

①绝密信息严禁泄露

P33

调试技巧---（常用JS调试入口）

•界面渲染事件

–_pageOnRenderEventHandler

常用JS调试入口

①绝密信息严禁泄露

P34

调试技巧---（常用JS调试入口）

•构建组件

–_buildComponent

常用JS调试入口

①绝密信息严禁泄露

P35

调试技巧---（常用JS调试入口）

•控件的初始化方法

–表格初始化方法initGrid

常用JS调试入口

①绝密信息严禁泄露

P36

调试技巧---（常用JS调试入口）

•控件的初始化方法

–按钮初始化方法initLinkButton

常用JS调试入口

①绝密信息严禁泄露

P37

调试技巧---（常用JS调试入口）

•事件监听

–鼠标事件

常用JS调试入口

①绝密信息严禁泄露

P38

调试技巧---（常用JS调试入口）

•事件监听

–键盘事件

常用JS调试入口

①绝密信息严禁泄露

P39

调试技巧---（常用JS调试入口）

•断点

–条件断点

常用JS调试入口

①绝密信息严禁泄露

P40

调试技巧---（常用JS调试入口）

•断点

–选择断点类型

• 遇到所有异常都会中断

• 仅在出现未捕获的异常时才中断

常用JS调试入口

①绝密信息严禁泄露

P41

调试技巧---（常用JS调试入口）

•使用 try...catch 语句将错误打到控制台

常用JS调试入口

①绝密信息严禁泄露

P42

该案例以车辆控件与报销区域控件不能实现联动这个问题来做演示

具体步骤如下：

调试技巧---（简单调试案例演示）

出现问题 Chrome浏览器调试测试

①绝密信息严禁泄露

P43

1.出现问题

调试技巧---（简单调试案例演示）

①绝密信息严禁泄露

P44

2.Chrome调试过程

调试技巧---（简单调试案例演示）

通过F12打开调试环境

通过F12打开调试环境

①绝密信息严禁泄露

P45

3.测试

调试技巧---（简单调试案例演示）

①绝密信息严禁泄露

P46

调试方法介绍—java调试

BIM远程调试+EAS服务器DebugServer

BIM启用服务可直接本机调试

①绝密信息严禁泄露

P47

Thanks

terimakasih

感謝

谢谢

ありがとう

ขอบคุณ

版权所有©1993-2012金蝶软件（中国）有限公司

①绝密信息严禁泄露

$C:\Users\yibo_wang\Desktop\素材\閲戣澏PPT姣嶇増瑙嗚鍏冪礌\灏忔柟鐮栦晶瑙嗗浘\PPT C-orange.png$

$K:\201203盛世确认可用输出\PPT\素材\玻璃砖素材\PPT C Lego.png$

①绝密信息严禁泄露

P48

特别声明

没有金蝶软件国际软件集团有限公司的特别许可，任何人不能以任何形式或为任何目的复制或传播本文档的任何部分。本文档中包含的信息如有更改，恕不另行通知。

由金蝶软件（中国）有限公司和其分销商所销售的某些软件产品包含有其它软件供应商版权所有的软件组件。

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®、友商网®和其它金蝶产品和服务以及它们各自的徽标是金蝶软件（中国）有限公司在中国和世界其它一些国家的商标或注册商标。本文档提到的所有其它产品和服务名称是它们各自公司的商标。