①绝密信息 严禁泄露 版权所有 ©1993-2012 金蝶软件（中国）有限公司 ①绝密信息 严禁泄露 BOS WEB 平台系 统部 2014.11 BOS 新 Web 平台培训 _ 组件.

Presentation on theme: "①绝密信息 严禁泄露 版权所有 ©1993-2012 金蝶软件（中国）有限公司 ①绝密信息 严禁泄露 BOS WEB 平台系 统部 2014.11 BOS 新 Web 平台培训 _ 组件."— Presentation transcript:

1 ①绝密信息 严禁泄露 版权所有 ©1993-2012 金蝶软件（中国）有限公司 ①绝密信息 严禁泄露 BOS WEB 平台系 统部 2014.11 BOS 新 Web 平台培训 _ 组件

2 ①绝密信息 严禁泄露 P2 了解 Web 动态框架组件和使用组件的基本方法 了解 Web 动态框架样式和如何进行二次开发 目的

3 ①绝密信息 严禁泄露 P3 特色 – 基于 Jquery&JQueryui 进行封装 – 统一风格的 UI 展现 – 支持流体布局，随窗口大小变化，无横向滚动条 – 全面的 Form 组件，友好的校验及信息提示 – 用户体验的提升 – 多浏览器的支持 – 支持全键盘录入操作 – 多主题与多皮肤 –CSS3 的相关应用 – 动态层取代弹出窗口 – 强大的表格展示和可编辑表格 – 国际化 组件特点

4 ①绝密信息 严禁泄露 P4 概括 – 提供了 38 个主要组件 & 组件帮助系统 – 每个组件由 JS 和 CSS 组成 – 主要包括： UI 组件 – 文本框，下拉框，日期， F7 ，数字框，文本域，多语言框， Radio 、 RadioGroup ， Checkbox ，隐藏域，文件上传、标签组件、按钮、菜单、 菜单项、菜单按钮、显示表格、可编辑表格、树、窗口、提示组件、进 度条、浮动提示等 容器组件 – 标签容器、章节、面板、数据展示、信息块、页签，工具栏等 布局组件 – 列布局 功能组件 – 自动完成、校验组件、阻塞、提示等 组件整体介绍

5 ①绝密信息 严禁泄露 P5 概括 – 基于 Jquery – 对 Jquery UI Widget 进行了进一步优化 – 统一的调用方法 – 支持自定义的扩展继承 – 支持无 DOM 完全动态创建 – 支持已经存在 DOM 的情况下动态初始化 – 支持多种初始化方式，比如加载时立即初始化，点击时初始化， 使用时初始化等。 – 支持按照模块进行加载 – 支持统一的注册机制，注册后可对组件进行统一管理 – 支持统一的键盘控制 – 支持在 Edit 和 View 之间随意切换 – 支持在运行期动态打包组件 – 统一的 CSS 控制 组件技术介绍

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

7 ①绝密信息 严禁泄露 P7 常用属性说明 –id ：唯一标示符，不能重复 –name: 名称， form 组件中绑定到对应的 model 属性 –value ：初始值，可接受 el 表达式 –tagClass ：样式类，对应 HTML 标签的 class ，需要写到 css 文件中 –style ：样式，对应标准 HTML 标签上的 style –width ：宽度 –heigh ：高度 –readonly ：只读 –disabled ：禁用 –maxlength: 输入的最大字符数 –tabindex ： tab 顺序 –hidden: 隐藏 组件的使用方法

8 ①绝密信息 严禁泄露 P8 常用方法说明 –option ：获取组件的属性或者更改组件属性 –getValue: 获取组件的值，一般用在 form 组件中 –setValue ：设置组件的值，一般用在 form 组件中 –disable ：禁用组件 –enable ：启动用组件 常用事件说明 –onchange ：值改变事件，参数包括改变前和改变后值 –onkeydown: 在文本框上按下键盘上的键时触发 –onkeyup: 在文本框上释放按键时触发 组件的使用方法

9 ①绝密信息 严禁泄露 P9 帮助系统 组件库帮助 组件 API 说明 组件样例 FAQ CSS 参考 开发指南 框架 API 用户手册 地址 http://waf2.kingdee.com:6888/waf2help/index.dohttp://waf2.kingdee.com:6888/waf2help/index.do ( 外网 ) http://192.168.37.211:8080/waf2help/index.dohttp://192.168.37.211:8080/waf2help/index.do ( 内网 ) 组件整体介绍

10 ①绝密信息 严禁泄露 P10 CSS 框架介绍（ Less ） Core –Reset.less 中重置了基本标准元素的相关属性，使其达到各个 浏览器下的一致性 –mixins.less 中定义了各种混入函数 –form.less 中定义了 form 控件统一的定义，包括边框，焦点状态 等。 –Variables.less 中定义了各种变量. Pages/standard/skin/easbase –eas_base_variable.less ：定义了与当前皮肤相关的变量。 –Button.less ：定义了按钮的各种样式 –Ctrls_easbase_override: 这里定义的样式会覆盖各个控件中定 义的样式。 –Font_icons.less: 这里定义了图标字体。 Pages/standard/skin/eas – 这里的目录结构和 easbase 类似，定义的是 eas 皮肤相关的内 容。

11 ①绝密信息 严禁泄露 P11 运行期 CSS 二次开发的 CSS 文件需要通过定义工具引入进来，在定义工具的资源中引入。 每个页面引入的 CSS 类型 –easbase_all.css: easbase 皮肤的 css ，根据用户选择的皮肤而定，默认是 easbase –xxxx.css: 当前业务单元业务自定义的 css 文件

12 ①绝密信息 严禁泄露 P12 二次开发 CSS 设置 在定义工具上，每个控件中有两个属性可以设置样式，分别是样式类和样式，对应 CSS 中的 class 和 style 属性。 两种自定义样式方式： – 通过样式类设置 在 CSS 文件中加入必要的 CSS 设置，一般建议使用 class ，然后导入到页面的资源列表中。 在控件的样式类中直接填入新增加的样式名称 – 通过覆盖标准产品的 CSS 结构 比如.ui-linkbutton.ui-lb-text {background:red;}, 直接覆盖将所有的按钮背景色改成红色。 – 说明：如果需要统一的设置某个控件的样式，使用第二种方式，如果需要个性化设置 某个控件的样式，使用第一种方式。

13 ①绝密信息 严禁泄露 P13 二次开发 CSS 建议 CSS 的二次开发主要指的是业务自己覆盖或者更改框架已经提供的默认的 CSS 设置，请按照 以下事项进行设置。 注意事项 – 业务自己开发的 CSS 写到当前页面的 CSS 中，请不要单独在页面 jsp 中加 style. – 请做局部性的或者某个点的设置，不要做全局性的。 – 通过 id 来进行 css 的修改 – 设置专有的命名空间，然后再设置这个命名空间下的其他组件样式 – 特别注意优先级： 1.!important 2. 行内 style 3.Id 选择器 4. 类选择器 5. 类型选择器

14 ①绝密信息 严禁泄露 Thanks terima kasih 感謝 谢谢 ありがとう ขอบคุณ 版权所有 ©1993-2012 金蝶软件（中国）有限公司 ①绝密信息 严禁泄露

15 P15 特别声明 没有金蝶软件国际软件集团有限公司的特别许可，任何人不能以任何形式或为任何目的复制或传播本文档的任何部分。本文档中 包含的信息如有更改，恕不另行通知。 由金蝶软件（中国）有限公司和其分销商所销售的某些软件产品包含有其它软件供应商版权所有的软件组件。 Microsoft® 、 WINDOWS® 、 NT® 、 EXCEL® 、 Word® 、 PowerPoint® 和 SQL Server® 是微软公司的注册商标。 IBM® 、 DB2® 、 DB2 通用数据库、 OS/2® 、 Parallel Sysplex® 、 MVS/ESA 、 AIX® 、 S/390® 、 AS/400® 、 OS/390® 、 OS/400® 、 iSeries 、 pSeries 、 xSeries 、 zSeries 、 z/OS 、 AFP 、 Intelligent Miner 、 WebSphere® 、 Netfinity® 、 Tivoli® 、 Informix 和 Informix® 动态 ServerTM 是国际商业机器公司在美国或其他公司的商标。 ORACLE® 是 ORACLE 公司的注册商标。 UNIX® 是 UNIX INTERNATIONAL CO.,LIMTED 的注册商标、 OSF/1® 和 Motif® 是 Open Group 的注册商标。 Citrix® 、 Citrix 徽标、 ICA 、 Program Neighborhood® 、 MetaFrame® 、 WinFrame® 、 VideoFrame® 、 MultiWin® 以及此处引用 的 Citrix 产品名是 Citrix Systems 公司的商标或注册商标。 HTML 是 HATEMOGLU TEKSTIL GIYIM SANAYI VE TICARET A.S. 的注册商标， DHTML 、 XML 和 XHTML 是 W3C® 、 World Wide Web 协会、计算机科学实验室的商标或注册商标， PureXML 是国际商业机器公司的注册商标。 JAVA® 是甲骨文美国有限公司的注册商标。 JAVASCRIPT® 是甲骨文美国有限公司的注册商标，由其技术开发和实施商 Netscape 许可使用。 Apusic ® 是深圳市金蝶中间件有限公司的注册商标。 本文档提到的金蝶 ® 、金蝶 KIS ® 、 K/3 ® 、金蝶 EAS ® 、友商网 ® 和其它金蝶 产品和服务以及它们各自的徽标是金蝶软件（中 国）有限公司在中国和世界其它一些国家的商标或注册商标。本文档提到的所有其它产品和服务名称是它们各自公司的商标。