金蝶EAS V8.2 Web开发培训3_进阶篇
合集下载
金蝶s-HR V8.2产品新功能——培训管理
提纲
④内部公开 请勿外传
P4
全员参与
上级：上下级之间的了解和互助
了解学员的学习动态 推荐所经历的过的课程
上级
LMS 平台
讲师：快速的信息收集
课前预知学员对学习内容和授 课方式的倾向 课后了解学员对授课效果的反 馈
辅导员：沟通与支持
与学员沟通协助其制定 学习计划 对学员的学习总结进行 的课件
学员笔记 内/外讲师 学员评价
我的评价
通知沟通 我的积分
分享推荐
我的主页 我的文章
OJT培训
资源 系统
学员/讲师积分档案 文档资料库 培训渠道 媒体文件存储 P3
培训课程
支撑系统
权限系统
流程系统
通知系统
标签系统
搜索引擎及推荐系统④内部公开 大数据分析系统 请勿外传
云公开课内容服务 培训管理中心
其他业务系统
学员门户
学员档案 外部学员 精品课程 我的自学 系列课程 我的班级 职业通道
培训 运营 分析
培训 计划 实施
需求及行为 分析 需求调查 培训实施
计划与课程
自学时段分 布分析
报名&组织 考试系统 课程分析
课程评估 分析
变更通知 结果维护 评估系统 培训 激励 系统
④内部公开 请勿外传
P6
新增功能：下属学习管理
业务特性
• 直接上级可以查看下属的学 习情况，参与在线学习的时 长，参与考试的成绩等 直接上级还可以根据下属的 能力情况推荐相应的课程给 予下属学习
•
业务价值
•
专线上级能够清晰的了解下 属的学习情况，为下属的能 力提升给出更多的意见
④内部公开 请勿外传
金蝶s-HRV8.2产品新功能
金蝶EAS V8.2产品注册使用帮助.pdf
1.1.1 客户（用户）体验变革
创新的云端注册，通行线上线下的用户管理模式新重新定义了产品体验-购买-交付-使用 流程，打破本地 ERP 与互联网的藩篱，为通过互联网为 ERP 客户提供更多增值云服务与产 品提供更多可能。
从用户第一次体验到最终购买使用，客户（用户）能够更方便的获取金蝶服务，并与金 蝶零距离接触。
1.1 什么是注册用户？...........................................................................................................4 1.1.1 客户（用户）体验变革.................................................................................................4 1.1.2 相关概念.........................................................................................................................5
注册用户模式的推出，完成对金蝶“用户”的重新定位，为中小企业开启通向大数据、 云服务的通衢大道！
和金蝶一起，拥抱互联网！
2
KINGDEE
第 3 页 共 45 页
目录
1 总述 ..........................................................................................................................................4
金蝶EAS8.2新功能培训——总账
；
对于新的客户也可以 点击下载引入模板
④内部公开 请勿外传
P4
总账共享—基础资料—现金流量初始化增加导入功能
现金流量初始化 在EAS客户端现金流 量初始化录入界面同 样也增加了现金流量 的导入功能。
④内部公开 请勿外传
P5
凭证处理—凭证上下移动
凭证查询 在凭证界面增加前进 后退按钮，可以在凭 证实现凭证间的切换 查额和当前发生额
凭证编辑 科目余额：即时显示 科目+核算项目即时 余额 本期发生：即时显示 科目+核算项目即时
余额
本页借方合计：单独 合计当前凭证本页科 目的借方放生 本页贷方合计：相同 逻辑
④内部公开 请勿外传 P7
凭证档案管理—凭证归档
凭证归档 点击凭证归档，系统 弹出一个归档操作界 面 在此界面用户可以查 询已经扫描的记录进 行归档操作；也可以
凭证电子归档 系统支持对凭证进行 电子化档案管理； 点击凭证电子归档， 则弹出一个归档界面 ，支持对当期全部过 账凭证进行归档；
也支持设置条件后对
满足条件的凭证进行 归档。
④内部公开 请勿外传
P10
凭证档案管理—凭证电子归档
凭证归档记录查询 当归档操作完成后， 系统会针对当前操作 弹出一个归档结果查 询界面； 在结果界面显示归档 的结果。凭证电子影
现金流量项目Web化 基础资料现金流量项 目支持在Web界面上 编辑。 系统支持在Web界面 新增、删除、启用和 禁用等功能。
④内部公开 请勿外传
P3
总账共享—初始化—现金流量初始化增加导入功能
现金流量初始化 在现金流量初始化界 面增加“引入”功能 按钮： 点击引入后，系统弹 出一个数据引入界面 ，支持选择引入模板
金蝶EASV8.0_BOSWeb平台培训_组件篇-02
BOS新Web平台培训_组件
BOS WEB平台系统部 2014.11
版权所有©1993-2012金蝶软件（中国）有限公司 ①绝密信息 严禁泄露
①绝密信息 严禁泄露
目的
了解Web动态框架组件和使用组件的基本方法 了解Web动态框架样式和如何进行二次开发
①绝密信息 严禁泄露
P2
组件特点
特色
– – – – – – – – – – – – 基于Jquery&JQueryui进行封装 统一风格的UI展现 支持流体布局，随窗口大小变化，无横向滚动条 全面的Form组件，友好的校验及信息提示 用户体验的提升 多浏览器的支持 支持全键盘录入操作 多主题与多皮肤 CSS3的相关应用 动态层取代弹出窗口 强大的表格展示和可编辑表格 国际化
①绝密信息 严禁泄露
P5
组件的使用方法
界面设计
– 在定义工具上拖放，然后设置属性、事件和方法 – 在代码中动态创建组件，具体样例可以参考帮助系统
编码
– 组件属性
• 属性的设置和获取通过option方法来完成 Waf(“#id”).wafPromptBox(“option”, “displayFormat”)； • 有些属性不支持运行期的动态更改
①绝密信息 严禁泄露
P11
二次开发CSS设置
在定义工具上，每个控件中有两个属性可以设置样式，分别是样式类和样式，对应CSS中的 class和style属性。
两种自定义样式方式：
– – 通过样式类设置
• • •
通过覆盖标准产品的CSS结构
在CSS文件中加入必要的CSS设置，一般建议使用class，然后导入到页面的资源列表中。 在控件的样式类中直接填入新增加的样式名称 比如.ui-linkbutton .ui-lb-text {background:red;}, 直接覆盖将所有的按钮背景色改成红色。
BOS WEB平台系统部 2014.11
版权所有©1993-2012金蝶软件（中国）有限公司 ①绝密信息 严禁泄露
①绝密信息 严禁泄露
目的
了解Web动态框架组件和使用组件的基本方法 了解Web动态框架样式和如何进行二次开发
①绝密信息 严禁泄露
P2
组件特点
特色
– – – – – – – – – – – – 基于Jquery&JQueryui进行封装 统一风格的UI展现 支持流体布局，随窗口大小变化，无横向滚动条 全面的Form组件，友好的校验及信息提示 用户体验的提升 多浏览器的支持 支持全键盘录入操作 多主题与多皮肤 CSS3的相关应用 动态层取代弹出窗口 强大的表格展示和可编辑表格 国际化
①绝密信息 严禁泄露
P5
组件的使用方法
界面设计
– 在定义工具上拖放，然后设置属性、事件和方法 – 在代码中动态创建组件，具体样例可以参考帮助系统
编码
– 组件属性
• 属性的设置和获取通过option方法来完成 Waf(“#id”).wafPromptBox(“option”, “displayFormat”)； • 有些属性不支持运行期的动态更改
①绝密信息 严禁泄露
P11
二次开发CSS设置
在定义工具上，每个控件中有两个属性可以设置样式，分别是样式类和样式，对应CSS中的 class和style属性。
两种自定义样式方式：
– – 通过样式类设置
• • •
通过覆盖标准产品的CSS结构
在CSS文件中加入必要的CSS设置，一般建议使用class，然后导入到页面的资源列表中。 在控件的样式类中直接填入新增加的样式名称 比如.ui-linkbutton .ui-lb-text {background:red;}, 直接覆盖将所有的按钮背景色改成红色。
金蝶EASV8.0_BOSWeb平台培训_案例篇_标准产品扩展_高级篇04
①绝密信息 严禁泄露
P31
扩展开发详解—分配
页面分配
①绝密信息 严禁泄露
P32
扩展开发详解—扩展开发流程
①绝密信息 严禁泄露
P33
感謝
ขอบคุณ
ありがとう
terima kasih
Thanks 谢谢
版权所有©1993-2012金蝶软件（中国）有限公司 ①绝密信息 严禁泄露
①绝密信息 严禁泄露
①绝密信息 严禁泄露
P4
扩展开发详解-准备
元数据的修改
本实例主要针对在dep中进行元数据的修改，大致分为以 下步骤
Dep中导入业务单元
修改费用申请单主实 体
修改费用申请单主 query
①绝密信息 严禁泄露
P5
扩展开发详解-准备
dep导入业务单元
①绝密信息 严禁泄露
P6
扩展开发详解-准备
修改费用申请单主实体
扩展页面
配置页面
①绝密信息 严禁泄露
P13
扩展开发详解—开发列表页面
扩展列表页面
①绝密信息 严禁泄露
P14
扩展开发详解—开发列表页面
配置列表页面
①绝密信息 严禁泄露
P15
扩展开发详解—开发列表页面
测试
①绝密信息 严禁泄露
P16
扩展开发详解—开发编辑页面
需求
页面基本信息块中增加”所属项目”字段，F7控件，必录 页面基本信息块中增加”车辆费用”字段，复选框 页面基本信息块中增加”车辆”字段，F7控件 页面基本信息块中增加”报销区域”字段，F7控件 设置”提交”按钮的显示样式 设置”所属项目”的默认值 通过车辆费用的变化，设置”车辆”、”报销区域”的变化 “车辆”、“报销区域”实现联动
金蝶EAS V8.2系统部署方案
3.1 防火墙........................................................................................................................................................... 15 3.2 VPN 技术....................................................................................................................................................... 15 3.3 Citrix 解决方案 ............................................................................................................................................. 16 3.4 多种身份认证............................................................................................................................................... 18
1.1 金蝶 EAS ........................................................................................................................................................ 4 1.2 金蝶 BOS........................................................................................................................................................ 4
1.1 金蝶 EAS ........................................................................................................................................................ 4 1.2 金蝶 BOS........................................................................................................................................................ 4
金蝶EASV8.0_BOSWeb平台培训_总体篇03
支持的浏览器
IE 8+
推荐的浏览器
IE 11
Chrome 23+
Chrome 28+
Safari 5+
Safari 5+
响应式布局-自适应各种分辨率，推荐：1280*1024/1024*768
P9
Web安全性
1、身份安全
EAS统一身份认证 CA认证支持
2、通讯安全
数据传输加密 https支持
②机密信息 严禁泄露
P26
Web应用组件
Web组件体系
– 显示及/或处理逻辑的一 个片段
组件 描述
列表显示组件
通用查询组件 DAP组件 工作流组件 BOTP组件 打印套打组件 附件管理组件 引入引出组件 通用F7组件 各种基础F7组件
根据Query进行列表显示及操作
浮动 生成凭证/删除凭证，生成/删除管理凭证 审核、反审核、流程图 推/拉生成、联查单据、上查、下查 多附件文件的上传、存储处理 导入或导出Excel文件数据 组织/物料/客户/供应商/科目/职员/…
模块A 后台服务 模块B 后台服务 模块C 后台服务 模块D 后台服务 模块… 后台服务 模块… 后台服务 模块… 后台服务
P18
显示风格 CSS3
业务事件逻辑 JS 基础控件 JQUERY
Remote Local Remote Local
权限 License HTTP缓存处理
Remote Local
基础服务
服务注入
Remote Local
②机密信息 严禁泄露
基础服务及功能组件
统一身份认证 License
App Server
权限服务
功能权限 字段权限 BOS基础服务引擎
IE 8+
推荐的浏览器
IE 11
Chrome 23+
Chrome 28+
Safari 5+
Safari 5+
响应式布局-自适应各种分辨率，推荐：1280*1024/1024*768
P9
Web安全性
1、身份安全
EAS统一身份认证 CA认证支持
2、通讯安全
数据传输加密 https支持
②机密信息 严禁泄露
P26
Web应用组件
Web组件体系
– 显示及/或处理逻辑的一 个片段
组件 描述
列表显示组件
通用查询组件 DAP组件 工作流组件 BOTP组件 打印套打组件 附件管理组件 引入引出组件 通用F7组件 各种基础F7组件
根据Query进行列表显示及操作
浮动 生成凭证/删除凭证，生成/删除管理凭证 审核、反审核、流程图 推/拉生成、联查单据、上查、下查 多附件文件的上传、存储处理 导入或导出Excel文件数据 组织/物料/客户/供应商/科目/职员/…
模块A 后台服务 模块B 后台服务 模块C 后台服务 模块D 后台服务 模块… 后台服务 模块… 后台服务 模块… 后台服务
P18
显示风格 CSS3
业务事件逻辑 JS 基础控件 JQUERY
Remote Local Remote Local
权限 License HTTP缓存处理
Remote Local
基础服务
服务注入
Remote Local
②机密信息 严禁泄露
基础服务及功能组件
统一身份认证 License
App Server
权限服务
功能权限 字段权限 BOS基础服务引擎
金蝶EAS V8.2系统部署方案
内容约定
无
版权所有 © 金蝶软件（中国）有限公司
1
金蝶 EAS V8.2 系统部署方案
目录
1 金蝶 EAS 简介 ............................................................................................................................................. 4
3.1 防火墙........................................................................................................................................................... 15 3.2 VPN 技术....................................................................................................................................................... 15 3.3 Citrix 解决方案 ............................................................................................................................................. 16 3.4 多种身份认证............................................................................................................................................... 18
- 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
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