金蝶EAS V8.2 Web开发培训3_进阶篇
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
新增？
Y
创建新数据 modelCreateEvent
N
页面渲染 pageOnRenderEvent 调用后台取数据 modelLoadEvent
初始化数据 initDataEvent
页面初始化 pageOnLoadEvent
设置关联实体取数属性 modelFieldSelecterEvent
初始化数据 initDataEvent
– 控制台输出值打印
– 查看或更改代码调试过程的值
①绝密信息严禁泄露
P22
调试技巧---（IE调试）
IE调试
• JS断点设置
– 断点条件，在断点位置的右键菜单中选择“条件”可以设置触发断点的条件，即写一个 表达式，表达式为true时触发断点。
• 调试技巧
– 开始调试：按F12； – 选择浏览器的版本：选择浏览器模式和文档模式；
设置关联实体取数属性 modelFieldSelecterEvent
调用后台取数据 modelLoadEvent 初始化数据 initDataEventAction
数据加载 fieldLoadEvent
页面初始化 pageOnLoadEvent
页面初始化 pageOnLoadEvent
1.pageOnLoadEvent只能以 after方式插入业务处理 2.不适合放在上述事件中的， 可在这里处理
P2
培训目标六大增长动力：财务共享推广策略
掌握页面基本 布局 掌握单据的业 务逻辑实现
• • 按钮 通用查询与查询表格
•
• • •
Form控件与分录表格
了解Eventbus的概念 掌握如何实现前台JS逻辑 掌握如何实现WEB服务层逻辑
掌握调试方法
• •
Js调试方法 Java调试方法
①绝密信息严禁泄露
Browse/js
页面渲染 pageOnRenderEvent 初始化数据 initDataEvent 1.仅能以before方式插入逻辑 2.如根据后台参数设置动态 修改控件属性 1.仅能以after方式插入逻辑 2.一般处理一些全局性的参 数 1.仅能以before/after方式插 入逻辑 2.框架将返回的数据模型显 示在页面控件中 3.一般在这里根据字段值设 置控件使能，如显示及编辑
①绝密信息严禁泄露
P20
调试技巧---（Chrome调试）
常用调试面板
• Source Panel
– 查看当前站点的CSS、JS文件
– 加断点调试JS代码：单步、跳出跳入循环、调用堆栈、查看变量值
①绝密信息严禁泄露
P21
调试技巧---（Chrome调试）
常用调试面板
• Console Panel
EAS820 Web开发培训
---进阶篇
BOS WEB平台系统部 范来华 2016.5
版权所有©1993-2012金蝶软件（中国）有限公司
①绝密信息严禁泄露
P1 ①绝密信息严禁泄露
目录
培训目标 WEB页面的布局设计 前台代码设计
提纲
后台代码设计 WEB框架主要事件和功能介绍 调试方式介绍
①绝密信息严禁泄露
①绝密信息严禁泄露
P8
前后台代码的调用逻辑
• •
注意Action及ActionEvent后缀 事件中后台功能扩展java代码如何返回数据给前台 • • modelMap.put(“model”) modelMap.put(“initData”)
①绝密信息严禁泄露
P9
如何主动触发一个事件或功能
• •
达式，表达式为true时触发断点。
•
调试技巧
– 开始调试：鼠标右键审查元素或F12；
– 按钮功能：
• • • 调出控制台； 切换开发环境是全屏还是嵌入； 清空当前显示；
•
•
将压缩的JS文件格式化；
定位页面元素；
①绝密信息严禁泄露
P18
调试技巧---（Chrome调试）
常用调试面板
• Elements Panel
N
编辑状态打开页面 *见页面打开时序图
取数据事件 modelOnLoadEvent
Y
初始化pageOnLoadEvent *详细见前面
end
①绝密信息严禁泄露
P14
编辑类型页面提交时业务可插入事件应用说明
Browse/js
数据更新 fieldOnStoreEvent 1.能以before/after方式插入逻辑 2.框架从控件中取出最新值更新 页面数据模型
•
•
部署到服务器后，需重启服务器才可生效
在制作WEB补丁时，相关jar包，可选中该文件，安装补丁时就可自动部 署
①绝密信息严禁泄露
P16
调试基础介绍
JS加载模式
• 产品模式
– 默认以产品模式运行每个界面，产品模式运行时，每个界面的JS都会被打包并且混淆，并将多个JS压
缩到一个链接中。
• Debug模式
– 查看当前选中元素的嵌套路径
– 查看或编辑当前选中元素的样式 – 查看选中元素的盒模型
– 监听事件
①绝密信息严禁泄露
P19
调试技巧---（Chrome调试）
常用调试面板
• Network Panel
– 查看站点在一个动作时都加载了哪些文件
– 查看文件有没有正确加载、加载方式、状态、类型、大小、所用时间 – 点击查看该文件的具体情况
P3
WEB页面的布局设计--标准编辑页面
①绝密信息严禁泄露
P4
eventbus的概念
事件处理总线
目标：利用可插拔的插件机制，实现系统可扩展性及松耦合
在JS层和WebServer层分别实现并提供插入机制
①绝密信息严禁泄露
P5
前台代码设计
①绝密信息严禁泄露
P6
后台代码设计
①绝密信息严禁泄露
P7
前后台代码的调用逻辑
常用调试面板
• 脚本面板
– 查看当前站点的CSS、JS文件
– 加断点调试JS代码：单步、跳出跳入循环、调用堆栈、查看变量值
①绝密信息严禁泄露
P25
调试技巧---（IE调试）
常用调试面板
• 网络面板
– 点击开始捕捉，可以查看站点在一个动作时都加载了哪些文件
– 查看文件有没有正确加载、加载方式、状态、类型、大小、所用时间 – 点击转到详细视图，查看该文件的具体情况
①绝密信息严禁泄露
P13
编辑页面提交时业务可插入事件执行时序图
Client/Browse
按提交eldOnStoreEvent
提交功能 submitActionEvent
提交功能 submitActionEvent
仅数据刷新？
getOnlyModelLoad()
– Debug模式时，JS的加载是单个加载的，如果想调试某个页面，可以在URL中加上&debug=true这 样所有页面都以DEBUG模式加载JS。
页面运行模式
• 静态化
– 静态化运行时，页面的HTML直接从服务器上加载，前台进行界面初始化，要想某个页面非静态化运 行，可以在url中增加参数&renderModel=client。
• 非静态化
– 非静态化运行时，界面的HTML根据元数据从前台渲染出来。
①绝密信息严禁泄露 P17
调试技巧---（Chrome调试）
Chrome调试
• JS断点设置
– 断点类型分三种：默认遇到异常不中断；遇到所有异常都会中断；仅在出现未捕获的异常时才中断。
– 断点条件，在断点位置的右键菜单中选择“Eidt Breakpoint…”可以设置触发断点的条件，即写一个表
fireEvent的运用 打开新窗口与关闭新窗口(addNewWindow, closeCurrentWindow)
①绝密信息严禁泄露
P10
Web页面打开时总体执行流程
Client/Browse
url
License
主业务组 织处理 用户监控 行为采集 性能监控
Web Server
App
数据权限 日志
①绝密信息严禁泄露
P34
调试技巧---（常用JS调试入口）
常用JS调试入口
• 控件的初始化方法
– 表格初始化方法initGrid
①绝密信息严禁泄露
P35
常用JS调试入口
• 初始化页面
– initalizeAction
①绝密信息严禁泄露
P32
调试技巧---（常用JS调试入口）
常用JS调试入口
• 界面渲染事件
– _pageOnRenderEventHandler
①绝密信息严禁泄露
P33
调试技巧---（常用JS调试入口）
常用JS调试入口
• 构建组件
– _buildComponent
①绝密信息严禁泄露
P26
调试技巧---（Fiddler）
Fiddler临时更改服务器静态资源
• 功能
– Fiddler临时更改服务器静态资源，包括JS或CSS文件。
• 使用步骤
1. 打开Fiddler，清空浏览器缓存，刷新页面；
①绝密信息严禁泄露
P27
调试技巧---（Fiddler）
• 使用步骤
Fiddler临时更改服务器静态资源
2. 在Fiddler的左侧找到指定的文件，在右侧AutoResponder面版中点击按钮Add Rule，将
左侧的文件添加到右侧中；
①绝密信息严禁泄露
P28
调试技巧---（Fiddler）
Fiddler临时更改服务器静态资源
• 使用步骤
3. 在Fiddler的右侧选中刚添加的文件，在右侧的底部Rule Editor第二个下拉框中选中find a
Web Server
提交后台功能 submitActionEvent 1.框架中调用App的提交处理 2.建议采用before/after方式插入， 特别是扩展修改时 1.从后台数据库取最新数据 2.详见前面页面打开时序图的描述
提交功能 submitActionEvent
1.建议以before/after方式插入业 务处理，特别是扩展修改时 2.不适合放在其他事件中的，可 在这里处理 【注意】当getOnlyModelLoad=F 时，不会执行after方式插入逻辑
– 按钮功能：
• • 切换开发环境是全屏还是嵌入； 将压缩的JS文件格式化；
•
定位页面元素；
①绝密信息严禁泄露 P23
调试技巧---（IE调试）
常用调试面板
• HTML 面板
– 查看当前选中元素的嵌套路径
– 查看或编辑当前选中元素的样式 – 查看选中元素的布局
①绝密信息严禁泄露
P24
调试技巧---（IE调试）
requests passthrough；
6. 点击右下角的save,刷新页面即可
①绝密信息严禁泄露
P30
调试技巧---（常用JS调试入口）
（注：以下介绍以Chrome调试为例）
常用JS调试入口
• 初始化事件
– initalizeEvent
①绝密信息严禁泄露
P31
调试技巧---（常用JS调试入口）
数据加载 fieldLoadEvent
end
仅能after方式插 入业务逻辑
-嵌套事件
可以override/after方式插 入业务逻辑
①绝密信息严禁泄露 P12
编辑类型页面打开时业务可插入事件应用说明
Web Server
创建新数据 modelCreateEvent 1.新建单据时设置各字段默认值 2.建议采用after方式插入，框架中已自动 设置主业务组织、编码规则等默认值 1.关联实体默认只取Id、编码、名称，如 果要取其他属性，需要在这里设置 2.建议采用after方式插入 1.编辑查看单据时框架取单据的详细信息 2.建议采用after方式插入，业务可插入数 据模型的特殊处理 1.业务可在这里调用后台取一些运行期需 要使用的设置参数，可传递到前端 2.仅能采用after方式插入 1.pageOnLoadEvent只能以after方式插入 业务处理 2.不适合放在上述事件中的web端处理， 可在这里进行
调用后台取数据 modelLoadEvent
编辑状态打开页面 *见页面打开时序图
直接以url请求后台，以编辑状态 重新打开当前页面
初始化pageOnLoadEvent *详细见前面
触发页面pageOnLoad事件，重 新渲染加载数据
P15
①绝密信息严禁泄露
后台代码设计--WEB Server层代码部署
拦截器 HTML页面 加载 Web端框架 Web端初始 化事件执行 App端处理逻 辑
业务逻 辑插入
前端初始化事 件执行
功能权限
JSP页面
业务逻 辑插入
业务逻 辑编写
HTML页面
①绝密信息严禁泄露
P11
编辑类型页面打开时业务可插入事件执行时序图
Client/Browse
url
Web Server
页面初始化 pageOnLoadEvent
file…指定本地的文件；
①绝密信息严禁泄露
P29
调试技巧---（Fiddler）
Fiddler临时更改服务器静态资源
• 使用步骤
4. 如此反复添加一个或多个文件；
5. 在Fiddler右侧AutoResponder面版中，选中复选框Enable automatic responses 和 Unmatched
Y
创建新数据 modelCreateEvent
N
页面渲染 pageOnRenderEvent 调用后台取数据 modelLoadEvent
初始化数据 initDataEvent
页面初始化 pageOnLoadEvent
设置关联实体取数属性 modelFieldSelecterEvent
初始化数据 initDataEvent
– 控制台输出值打印
– 查看或更改代码调试过程的值
①绝密信息严禁泄露
P22
调试技巧---（IE调试）
IE调试
• JS断点设置
– 断点条件，在断点位置的右键菜单中选择“条件”可以设置触发断点的条件，即写一个 表达式，表达式为true时触发断点。
• 调试技巧
– 开始调试：按F12； – 选择浏览器的版本：选择浏览器模式和文档模式；
设置关联实体取数属性 modelFieldSelecterEvent
调用后台取数据 modelLoadEvent 初始化数据 initDataEventAction
数据加载 fieldLoadEvent
页面初始化 pageOnLoadEvent
页面初始化 pageOnLoadEvent
1.pageOnLoadEvent只能以 after方式插入业务处理 2.不适合放在上述事件中的， 可在这里处理
P2
培训目标六大增长动力：财务共享推广策略
掌握页面基本 布局 掌握单据的业 务逻辑实现
• • 按钮 通用查询与查询表格
•
• • •
Form控件与分录表格
了解Eventbus的概念 掌握如何实现前台JS逻辑 掌握如何实现WEB服务层逻辑
掌握调试方法
• •
Js调试方法 Java调试方法
①绝密信息严禁泄露
Browse/js
页面渲染 pageOnRenderEvent 初始化数据 initDataEvent 1.仅能以before方式插入逻辑 2.如根据后台参数设置动态 修改控件属性 1.仅能以after方式插入逻辑 2.一般处理一些全局性的参 数 1.仅能以before/after方式插 入逻辑 2.框架将返回的数据模型显 示在页面控件中 3.一般在这里根据字段值设 置控件使能，如显示及编辑
①绝密信息严禁泄露
P20
调试技巧---（Chrome调试）
常用调试面板
• Source Panel
– 查看当前站点的CSS、JS文件
– 加断点调试JS代码：单步、跳出跳入循环、调用堆栈、查看变量值
①绝密信息严禁泄露
P21
调试技巧---（Chrome调试）
常用调试面板
• Console Panel
EAS820 Web开发培训
---进阶篇
BOS WEB平台系统部 范来华 2016.5
版权所有©1993-2012金蝶软件（中国）有限公司
①绝密信息严禁泄露
P1 ①绝密信息严禁泄露
目录
培训目标 WEB页面的布局设计 前台代码设计
提纲
后台代码设计 WEB框架主要事件和功能介绍 调试方式介绍
①绝密信息严禁泄露
①绝密信息严禁泄露
P8
前后台代码的调用逻辑
• •
注意Action及ActionEvent后缀 事件中后台功能扩展java代码如何返回数据给前台 • • modelMap.put(“model”) modelMap.put(“initData”)
①绝密信息严禁泄露
P9
如何主动触发一个事件或功能
• •
达式，表达式为true时触发断点。
•
调试技巧
– 开始调试：鼠标右键审查元素或F12；
– 按钮功能：
• • • 调出控制台； 切换开发环境是全屏还是嵌入； 清空当前显示；
•
•
将压缩的JS文件格式化；
定位页面元素；
①绝密信息严禁泄露
P18
调试技巧---（Chrome调试）
常用调试面板
• Elements Panel
N
编辑状态打开页面 *见页面打开时序图
取数据事件 modelOnLoadEvent
Y
初始化pageOnLoadEvent *详细见前面
end
①绝密信息严禁泄露
P14
编辑类型页面提交时业务可插入事件应用说明
Browse/js
数据更新 fieldOnStoreEvent 1.能以before/after方式插入逻辑 2.框架从控件中取出最新值更新 页面数据模型
•
•
部署到服务器后，需重启服务器才可生效
在制作WEB补丁时，相关jar包，可选中该文件，安装补丁时就可自动部 署
①绝密信息严禁泄露
P16
调试基础介绍
JS加载模式
• 产品模式
– 默认以产品模式运行每个界面，产品模式运行时，每个界面的JS都会被打包并且混淆，并将多个JS压
缩到一个链接中。
• Debug模式
– 查看当前选中元素的嵌套路径
– 查看或编辑当前选中元素的样式 – 查看选中元素的盒模型
– 监听事件
①绝密信息严禁泄露
P19
调试技巧---（Chrome调试）
常用调试面板
• Network Panel
– 查看站点在一个动作时都加载了哪些文件
– 查看文件有没有正确加载、加载方式、状态、类型、大小、所用时间 – 点击查看该文件的具体情况
P3
WEB页面的布局设计--标准编辑页面
①绝密信息严禁泄露
P4
eventbus的概念
事件处理总线
目标：利用可插拔的插件机制，实现系统可扩展性及松耦合
在JS层和WebServer层分别实现并提供插入机制
①绝密信息严禁泄露
P5
前台代码设计
①绝密信息严禁泄露
P6
后台代码设计
①绝密信息严禁泄露
P7
前后台代码的调用逻辑
常用调试面板
• 脚本面板
– 查看当前站点的CSS、JS文件
– 加断点调试JS代码：单步、跳出跳入循环、调用堆栈、查看变量值
①绝密信息严禁泄露
P25
调试技巧---（IE调试）
常用调试面板
• 网络面板
– 点击开始捕捉，可以查看站点在一个动作时都加载了哪些文件
– 查看文件有没有正确加载、加载方式、状态、类型、大小、所用时间 – 点击转到详细视图，查看该文件的具体情况
①绝密信息严禁泄露
P13
编辑页面提交时业务可插入事件执行时序图
Client/Browse
按提交eldOnStoreEvent
提交功能 submitActionEvent
提交功能 submitActionEvent
仅数据刷新？
getOnlyModelLoad()
– Debug模式时，JS的加载是单个加载的，如果想调试某个页面，可以在URL中加上&debug=true这 样所有页面都以DEBUG模式加载JS。
页面运行模式
• 静态化
– 静态化运行时，页面的HTML直接从服务器上加载，前台进行界面初始化，要想某个页面非静态化运 行，可以在url中增加参数&renderModel=client。
• 非静态化
– 非静态化运行时，界面的HTML根据元数据从前台渲染出来。
①绝密信息严禁泄露 P17
调试技巧---（Chrome调试）
Chrome调试
• JS断点设置
– 断点类型分三种：默认遇到异常不中断；遇到所有异常都会中断；仅在出现未捕获的异常时才中断。
– 断点条件，在断点位置的右键菜单中选择“Eidt Breakpoint…”可以设置触发断点的条件，即写一个表
fireEvent的运用 打开新窗口与关闭新窗口(addNewWindow, closeCurrentWindow)
①绝密信息严禁泄露
P10
Web页面打开时总体执行流程
Client/Browse
url
License
主业务组 织处理 用户监控 行为采集 性能监控
Web Server
App
数据权限 日志
①绝密信息严禁泄露
P34
调试技巧---（常用JS调试入口）
常用JS调试入口
• 控件的初始化方法
– 表格初始化方法initGrid
①绝密信息严禁泄露
P35
常用JS调试入口
• 初始化页面
– initalizeAction
①绝密信息严禁泄露
P32
调试技巧---（常用JS调试入口）
常用JS调试入口
• 界面渲染事件
– _pageOnRenderEventHandler
①绝密信息严禁泄露
P33
调试技巧---（常用JS调试入口）
常用JS调试入口
• 构建组件
– _buildComponent
①绝密信息严禁泄露
P26
调试技巧---（Fiddler）
Fiddler临时更改服务器静态资源
• 功能
– Fiddler临时更改服务器静态资源，包括JS或CSS文件。
• 使用步骤
1. 打开Fiddler，清空浏览器缓存，刷新页面；
①绝密信息严禁泄露
P27
调试技巧---（Fiddler）
• 使用步骤
Fiddler临时更改服务器静态资源
2. 在Fiddler的左侧找到指定的文件，在右侧AutoResponder面版中点击按钮Add Rule，将
左侧的文件添加到右侧中；
①绝密信息严禁泄露
P28
调试技巧---（Fiddler）
Fiddler临时更改服务器静态资源
• 使用步骤
3. 在Fiddler的右侧选中刚添加的文件，在右侧的底部Rule Editor第二个下拉框中选中find a
Web Server
提交后台功能 submitActionEvent 1.框架中调用App的提交处理 2.建议采用before/after方式插入， 特别是扩展修改时 1.从后台数据库取最新数据 2.详见前面页面打开时序图的描述
提交功能 submitActionEvent
1.建议以before/after方式插入业 务处理，特别是扩展修改时 2.不适合放在其他事件中的，可 在这里处理 【注意】当getOnlyModelLoad=F 时，不会执行after方式插入逻辑
– 按钮功能：
• • 切换开发环境是全屏还是嵌入； 将压缩的JS文件格式化；
•
定位页面元素；
①绝密信息严禁泄露 P23
调试技巧---（IE调试）
常用调试面板
• HTML 面板
– 查看当前选中元素的嵌套路径
– 查看或编辑当前选中元素的样式 – 查看选中元素的布局
①绝密信息严禁泄露
P24
调试技巧---（IE调试）
requests passthrough；
6. 点击右下角的save,刷新页面即可
①绝密信息严禁泄露
P30
调试技巧---（常用JS调试入口）
（注：以下介绍以Chrome调试为例）
常用JS调试入口
• 初始化事件
– initalizeEvent
①绝密信息严禁泄露
P31
调试技巧---（常用JS调试入口）
数据加载 fieldLoadEvent
end
仅能after方式插 入业务逻辑
-嵌套事件
可以override/after方式插 入业务逻辑
①绝密信息严禁泄露 P12
编辑类型页面打开时业务可插入事件应用说明
Web Server
创建新数据 modelCreateEvent 1.新建单据时设置各字段默认值 2.建议采用after方式插入，框架中已自动 设置主业务组织、编码规则等默认值 1.关联实体默认只取Id、编码、名称，如 果要取其他属性，需要在这里设置 2.建议采用after方式插入 1.编辑查看单据时框架取单据的详细信息 2.建议采用after方式插入，业务可插入数 据模型的特殊处理 1.业务可在这里调用后台取一些运行期需 要使用的设置参数，可传递到前端 2.仅能采用after方式插入 1.pageOnLoadEvent只能以after方式插入 业务处理 2.不适合放在上述事件中的web端处理， 可在这里进行
调用后台取数据 modelLoadEvent
编辑状态打开页面 *见页面打开时序图
直接以url请求后台，以编辑状态 重新打开当前页面
初始化pageOnLoadEvent *详细见前面
触发页面pageOnLoad事件，重 新渲染加载数据
P15
①绝密信息严禁泄露
后台代码设计--WEB Server层代码部署
拦截器 HTML页面 加载 Web端框架 Web端初始 化事件执行 App端处理逻 辑
业务逻 辑插入
前端初始化事 件执行
功能权限
JSP页面
业务逻 辑插入
业务逻 辑编写
HTML页面
①绝密信息严禁泄露
P11
编辑类型页面打开时业务可插入事件执行时序图
Client/Browse
url
Web Server
页面初始化 pageOnLoadEvent
file…指定本地的文件；
①绝密信息严禁泄露
P29
调试技巧---（Fiddler）
Fiddler临时更改服务器静态资源
• 使用步骤
4. 如此反复添加一个或多个文件；
5. 在Fiddler右侧AutoResponder面版中，选中复选框Enable automatic responses 和 Unmatched