YHCIP渐进--界面开发.ppt

YHCIP渐进-界面开发,开发中心：李嘉,前言,在界面开发这块，YHCIP框架提供了一套基于struts-layout的标签库(taglib)，比起用纯JSP来开发界面，大大的简化了界面开发的复杂度，减少了代码量，大家只要熟悉的掌握标签库的用法就可以了,一般来说运用YHCIP框架进行界面开发,很少出现HTML和scriptlet,会有少量javascript,但是主要是以调用框架提供的方法为主,因此学习曲线比较低,YHCIP提供的界面控件,在标签库TagLib中提供了文本框、富文本框、单选框、复选框、下拉列表框、口令输入框、分组框、Tree、日期输入、码表选择、分页、类似Datawindow的表格输入、布局及风格组件、错误显示组件等众多组件。基本上能够满足界面开发的需要。并且通过YHCIP框架的封装和改进，这些组件具有易设置、易使用的特点。,界面的展示,界面开发过程中会遇到的几种界面风格： 自由风格 列表风格 对话框风格 标签风格 下面是目前系统里面一些界面的展示,标签介绍- layout:html,最基本的标签layout:html 概念 Html标签代表一个页面 功能 显示表单元素和输入控件 显示错误信息 显示其他HTML元素 实例 ,标签介绍- layout:form,概述 对html的form标签的封装；用来接收和显示用户输入和结果信息。它可以包含让用户输入文本和选择项目的其他标签，例如文本、按钮、复选框(checkboxe)，单选按钮(radio button)和选择列表等 主要属性 Action 必需的属性，否则会抛异常；指定该form所使用的 struts-config.xml配置文件中元素里的一个子元素的访问路径，也就是指定该form所使用的action，它的值同struts-config.xml中的 action元素的path属性 Focus 指定焦点该form所包含的一个元素上。使用focus属性时你需要给它指定元素的名称 key 该form标题的键值,标签介绍- layout:form,reqCode 表示这个页面后调用的指定action的方法，例如init初始化方法 styleClass 该页面使用的用于控制显示风格的CSS类名 实例 ,标签介绍- App:yinhaipanel,概述 app:yinhaipanel这个标签就是我们在pb里面常用的groupbox 实例 ,标签介绍- Layout:grid,概述 表格标签。所有嵌套在此标签内的标签将按照一定的格式，水平或垂直的排列 主要属性 borderSpacing 边界的间隔宽度，缺省为0 cols 每行排列的标签数，缺省为2 height 每个嵌套标签的高度 styleClass 使用的用于控制显示风格的CSS类名 width 宽度, 通常设置为100%,标签介绍- Layout:grid,实例 cols是这个标签的很重要的一个属性，它决定了表单被划分成几列，我们一般采用3列的情况比较多,可以根据实际情况而定。,标签介绍- Layout:text,概述 输入框标签，单行编辑框 主要属性 accesskey 定义了访问这个标签的热键，如果 accesskey=”N”表示该标签的热键是“Alt+N” colNum 标签所占的列数，用来控制标签的长度 isRequired 表示该标签是否是必输项，页面将在输入框后显示星号来标示 Tooltip 该标签的标题名字，鼠标移动到TEXT上时，弹出提示,标签介绍- Layout:text,maxlength 该标签输入框最大允许输入的长度 property 页面传递时该标签值的标识 key 标题的键值，key值是存在数据库中 styleClass 使用的用于控制显示风格的CSS类名 mode 该标签的显示和编辑模式。 mode属性有三个参数：mode=”x,y,z”，其中x表示在创建时的显示模式；y表示在编辑时的显示模式；z表示在查看时的显示模式 显示模式分为：E可编辑；I：可查看；N：不显示；H：隐藏。 通常可编辑设置为mode=”E,E,I”（表示该标签在创建和编辑时可以编辑，在查看时不能编辑）；不可编辑设置为mode=”I,I,I”（表示在创建、编辑、查看是都是不可编辑的）,标签介绍- Layout:text,onchange 输入当该标签值发生改变时所要调用的Javascript方法名，该方法在jsp中定义，如果调用多个方法则用;隔开 onclick 输入当鼠标单击该标签时所要调用的Javascript方法名，该方法在jsp中定义，如果调用多个方法则用;隔开 ondblclick 输入当鼠标双击该标签时所要调用的Javascript方法名，该方法在jsp中定义，如果调用多个方法则用;隔开 isUseQueryButton 表示是否支持和显示快速查询小按钮。true表示显示；false表示不显示 onButtonClick 点击快速查询小按钮所调用的JavaScript方法名 Value 初始值,标签介绍- Layout:text,实例 Layout:text这个标签是用的最多的一个标签，提供非常多的属性，可以完成很多功能，在上段代码中， styleTh表示编辑框标题所占这行的百分比， styleTd表示编辑框所占这行的百分比，如果grid的宽度设置为100的话，cols3，那么styleTh styleTd在20-30左右就比较合适,标签介绍- Layout:selectInput,继承于text组件, 所以大多属性同text 新增加的属性是 showMode 只分别为“1,2,3“,表示显示代码值,显示中文描述和两样都显示这三种显示风格. collection=“AAC005” 指定view中的列表字段 dataProperty=“codeValue” labelProperty=“codeDESC“ 这两个属性是必须和规定的 实例 ,标签介绍- Layout:DigitInput,概述 专门输入数字的标签,保留原有的layout:text属性 增加属性 param1 = “12”; / 整数位数 param2 = “0”; / 小数位数 param3 = “999999999999”; / 最大值 param4 = “0”; / 最小值 param5 = “”; / 以指定自己的一个业务函数处理函数，当这个函数返回true，将不再做其他检查 param6 = “false“; / 可选择“true“表示不允许粘贴,标签介绍- Layout:DigitInput,实例 ,标签介绍- Layout:DateInput,概述 专门输入日期的标签,保留原有的layout:text属性 特别属性 maxlength 年月日时分秒毫秒 maxlength=“23“ 年月日时分秒 maxlength=“19“ 单纯的年月日 maxlength=“10“,标签介绍- Layout:DateInput,单纯的年月日 年月日时分秒毫秒 年月日时分秒 ,标签介绍- Layout:DateInput,概述 专门输入邮件地址的标签 实例 ,标签介绍- Layout:IdentificationInput,概述 专门输入身份证的标签 主要属性 birthdayField 指定身份证号码填写后自动完成生日的字段名称,包含dto() sexField 指定身份证号码填写后自动完成性别的字段名称,包含descdto() 实例 ,标签介绍- Layout:EmailInput,概述 专门输入邮件地址的标签 实例 ,标签介绍- Layout:EmailInput,概述 专门输入期号的标签 实例 ,标签介绍- Layout:collection,概述 集合标签，用于数据集合的展示 主要属性 autoFillPage 是否显示格子的边线，true表示显示；false表示不显示 id 唯一标识这个页的标志，通过这个标志框架会去做一些操作 indexId 定义一个代表当前被遍历元素序号的变量 name 集合的名称，与action里面的结果集名称必须一致,标签介绍- Layout:collection,onClick 输入当单击该集合时所要调用的Javascript方法名，该方法在jsp中定义，如果调用多个方法则用;隔开 styleClass 使用的用于控制显示风格的CSS类名 width 宽度 实例 ,标签介绍- Layout:collectionItem,概述 列标签,必须嵌套在Layout:collection里面 主要属性 title 该列标题的键值，key值是存在数据库中 property 表示标签显示的该集合中使用的javaBean的属性名 displayCodeValue 用于代码值的中文显示，如：性别，该值则输入AAC004,标签介绍- Layout:collectionItem,标签介绍- layout:formActions,概述 嵌套在layout:form标签中使用。为产生save/reset/cancel 按钮、image或confirm/cancel按钮而生成的容器.一般与layout:button配合使用 实例 ,标签介