1 / 24

WAFII 控件介绍

WAFII 控件介绍. BOS WEB 平台系统部 2012.10. 目的. 了解 WAFII 控件整体和使用控件的基本方法 了解 WAFII 样式框架和如何进行二次开发. 控件特点. 特色 基于 J query 进行封装 统一风格的 UI 展现 支持流体布局，随窗口大小变化，无横向滚动条 全面的 Form 控件 ，友好的校验及信息提示 用户体验的提升 多浏览器的支持 支持全键盘录入操作 多主题与多皮肤 CSS 3 的相关应用 动态层取代弹出窗口 强大的表格展示和可编辑表格 国际化 ……. WAFII 控件整体介绍. 概括

lecea
Download Presentation

WAFII 控件介绍

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WAFII控件介绍 BOS WEB平台系统部 2012.10

  2. 目的 • 了解WAFII控件整体和使用控件的基本方法 • 了解WAFII样式框架和如何进行二次开发

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

  4. WAFII控件整体介绍 • 概括 • 提供了35个主要控件& 控件帮助系统 • 每个控件由JS、TAG和CSS组成 • 主要包括： • UI控件 • 文本框，下拉框，日期，F7，数字框，文本域，多语言框，Radio 、 RadioGroup，Checkbox，隐藏域，文件上传、标签控件、按钮、菜单、菜单项、菜单按钮、显示表格、可编辑表格、树、窗口、提示控件、进度条、浮动提示 • 容器控件 • 侧边栏、标签容器、大纲控件、Panel控件、栏目控件、Tab，工具栏 • 布局控件 • 列布局 • 功能控件 • 自动完成、校验控件、阻塞

  5. WAFII控件技术 • 概括 • 基于Jquery • 继承自Jquery UI Widget • 具有jqueryui widget一样的调用方法 • 支持自定义的扩展继承 • 统一的CSS控制

  6. WAFII控件的使用方法 • 界面设计 • 在BIM工具上拖放，然后设置属性、事件和方法 • 编码 • 控件属性 • 属性的设置和获取通过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. WAFII控件的使用方法 • 常用属性说明 • id：唯一标示符，不能重复 • name: 名称，form控件中绑定到对应的model属性 • value：初始值，可接受el表达式 • tagClass：样式类，对应HTML标签的class，需要写到css文件中 • style：样式，对应标准HTML标签上的style • width：宽度 • heigh：高度 • readonly：只读 • disabled：禁用 • maxlength:输入的最大字符数 • tabindex：tab顺序 • hidden:隐藏

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

  9. WAFII控件整体介绍 • 帮助系统 • 控件库帮助 • 控件API说明 • 控件样例 • FAQ • CSS参考 • 开发指南 • 框架API • 用户手册 • 地址 • http://dev.kingdee.com/waf2help/index.do(外网) • http://192.168.37.211:8080/waf2help/index.do(内网)

  10. WAFⅡ帮助系统

  11. WAFⅡ帮助系统

  12. WAFⅡ表格控件

  13. WAFⅡ F7控件

  14. WAFⅡ树控件

  15. WAFⅡ Form控件演示

  16. WAFⅡ窗口与提示控件演示

  17. WAFⅡ菜单与工具栏演示

  18. WAFⅡ标签容器和校验控件演示

  19. WAFⅡ列布局演示

  20. WAFⅡ页签、栏目、进度条、上传演示

  21. WAFⅡ CSS框架介绍 • Core • Reset.css中重置了基本标准元素的相关属性，使其达到各个浏览器下的一致性 • Content.css中设置了总体的字体，背景色，链接, 普通表格的css等 • Iehack.css为ie的补丁文件，设置了基本元素相关的hack，比如激活hasLayout属性. • Pages • Skin：这个目录存放了当前主题下的皮肤切换。目前提供了eas705和eas703的皮肤，主要是页面，组件，控件等的颜色、背景图片等的处理。 • Template：这个目录根据不同的页面类型设置了不同的css文件，比如列表界面，查看界面，编辑界面等。这些界面在模板中被引用。 • Form.css: 定义了form中常见元素的样式，比如各个控件的默认宽度，高度等 • Page.css: 设置了各个页面的顶级结构 • Jqueryui: jqueryui目录中放置了jqueryui相关的各个控件的css

  22. CSS与模板、业务单元 Styles目录下只提供了基本的CSS设置，具体到每个模板中的每个页面，还需要根据各个页面的相关布局等进行另外设置。每个主题方案都默认提供了五个基本的页面模板，分别为listpage.css, editpage.css, viewpage.css, nullpage.css, treelistpage.css。各个模板会根据不同的页面选择设置不同的页面类型。 • 每个页面引入的CSS类型 • Standard_all.css : 标准主题的css，每个页面都有且固定 • eas_all.css: eas皮肤的css，根据用户选择的皮肤而定 • generationBillList.css: 当前业务单元继承或复制的模板对应页面的css • xxxxList.css: 当前业务单元当前页面的css，比如这个为列表界面的css

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

More Related