WAFⅡ开发培训课程系列之控件库介绍.ppt

BOSWEB平台系统部2012 10 WAFII控件介绍 了解WAFII控件整体和使用控件的基本方法了解WAFII样式框架和如何进行二次开发 目的 特色基于Jquery进行封装统一风格的UI展现支持流体布局 随窗口大小变化 无横向滚动条全面的Form控件 友好的校验及信息提示用户体验的提升多浏览器的支持支持全键盘录入操作多主题与多皮肤CSS3的相关应用动态层取代弹出窗口强大的表格展示和可编辑表格国际化 控件特点 概括提供了35个主要控件 控件帮助系统每个控件由JS TAG和CSS组成主要包括 UI控件文本框 下拉框 日期 F7 数字框 文本域 多语言框 Radio RadioGroup Checkbox 隐藏域 文件上传 标签控件 按钮 菜单 菜单项 菜单按钮 显示表格 可编辑表格 树 窗口 提示控件 进度条 浮动提示容器控件侧边栏 标签容器 大纲控件 Panel控件 栏目控件 Tab 工具栏布局控件列布局功能控件自动完成 校验控件 阻塞 WAFII控件整体介绍 概括基于Jquery继承自JqueryUIWidget具有jqueryuiwidget一样的调用方法支持自定义的扩展继承统一的CSS控制 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 WAFII控件的使用方法 常用属性说明id 唯一标示符 不能重复name 名称 form控件中绑定到对应的model属性value 初始值 可接受el表达式tagClass 样式类 对应HTML标签的class 需要写到css文件中style 样式 对应标准HTML标签上的stylewidth 宽度heigh 高度readonly 只读disabled 禁用maxlength 输入的最大字符数tabindex tab顺序hidden 隐藏 WAFII控件的使用方法 常用方法说明option 获取控件的属性或者更改控件属性getValue 获取控件的值 一般用在form控件中setValue 设置控件的值 一般用在form控件中disable 禁用控件enable 启动用控件常用事件说明onchange 值改变事件 参数包括改变前和改变后值onkeydown 在文本框上按下键盘上的键时触发onkeyup 在文本框上释放按键时触发 WAFII控件的使用方法 帮助系统控件库帮助控件API说明控件样例FAQCSS参考开发指南框架API用户手册地址 WAFII控件整体介绍 WAF 帮助系统 WAF 帮助系统 WAF 表格控件 WAF F7控件 WAF 树控件 WAF Form控件演示 WAF 窗口与提示控件演示 WAF 菜单与工具栏演示 WAF 标签容器和校验控件演示 WAF 列布局演示 WAF 页签 栏目 进度条 上传演示 WAF CSS框架介绍 CoreReset css中重置了基本标准元素的相关属性 使其达到各个浏览器下的一致性Content css中设置了总体的字体 背景色 链接 普通表格的css等Iehack css为ie的补丁文件 设置了基本元素相关的hack 比如激活hasLayout属性 PagesSkin 这个目录存放了当前主题下的皮肤切换 目前提供了eas705和eas703的皮肤 主要是页面 组件 控件等的颜色 背景图片等的处理 Template 这个目录根据不同的页面类型设置了不同的css文件 比如列表界面 查看界面 编辑界面等 这些界面在模板中被引用 Form css 定义了form中常见元素的样式 比如各个控件的默认宽度 高度等Page css 设置了各个页面的顶级结构Jqueryui jqueryui目录中放置了jqueryui相关的各个控件的css 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 当前业务单元继承或复制的模板对应页面的cssxxxxList css 当前业务单元当前页面的css 比如这个为列表界面的css CSS的二次开发 CSS的二次开发主要指的是业务自己覆盖或者更改框架已经提供的默认的CSS设置 请按照以下事项进行设置 注意事项业务自己开的CSS写到当前页面的CSS中 请不要单独在页面jsp中加style 请做局部性的或者某个点的设置 不要做全局性的 通过id来进行css的修改设置专有的命名空间 然后再设置这个命名空间下的其他控件样式特别注意优先级 important行内styleId选择器类选择器类型选择器 特别声明 没有金蝶软件国际软件集团有限公司的特别许可 任何人不能以任何形式或为任何目的复制或传播本文档的任何部分 本文档中包含的信息如有更改 恕不另行通知 由金蝶软件 中国 有限公司和其分销商所销售的某些软件产品包含有其它软件供应商版权所有的软件组件 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 是甲骨文美国有限公司