LFW基础控件红皮书

LFW基础控件红皮书

UAP中心编著

UAP开发红皮书系列

目录

第一章Lfw控件简介.......................................................3

1.1LFW控件体系结构.....................................................................3

第二章LFW控件及UI布局.................................................4

2.1LFW控件...........................................................................6

2.1.1表单控件（Form控件）...........................................................6

2.1.2表格控彳牛（Grid控彳牛）............................................................12

2.1.3磁件（Tree控件）.............................................................20

2.1.4树表控件.......................................................................27

2.1.5按钮控彳牛（Button）........................................................................29

2.1.6标签控件（Label控件）..........................................................31

2.1.7图表控件（Chart控件）..........................................................32

2.1.8文本控件（TextComp）....................................................................35

2.1.9自定义控件.....................................................................49

2.1.10菜单...........................................................................5（）

2.1.11弹出菜单......................................................................54

2.1.12Image控件.....................................................................59

2.1.13LinkComp链接控件.............................................................61

2.1.14WebPart控件...................................................................62

2.1.15列表控件（ListView控件）.........................................................64

2.2UI布局............................................................................66

2.2.1概念...........................................................................66

2.2.2布局使用关键原则...............................................................66

2.2.3布局编辑器介绍.................................................................66

2.2.4容器通用属性...................................................................68

2.2.5UIGridLayout（网格容器）........................................................69

2.2.6UIFlowhLayout（横向容器）......................................................71

2.2.7UIFlowvLayout（纵向容器）...............................................................72

2.2.8UITabComp（页签容器）.........................................................72

2.2.9UlPanel（标题面板）.............................................................73

2.2.10UlSplitter（分隔容器）...........................................................74

2.2.11UlShutter（百叶窗容器）.........................................................75

2.2.12UICardLayout（卡片容器）...............................................................76

2.2.13UIBorder（边框）...............................................................77

2.2.14UlCanvas（背景容器）...........................................................79

2.2.15UIAbsoluteLayout（绝对容器）....................................................86

2.3事件..............................................................................88

第三章控件扩展...........................................................91

3.1控件的扩展方法....................................................................91

3.1.1.控件机制简介....................................................................91

3.1.2.91

3.1.3.控件目录说明....................................................................93

第一章Lfw控件简介

本章内容概要:

•LFW控件体系结构介绍

1.1LFW控件体系结构

LFW控件体系是基于mvc模式的一套UI控件体系，提供了web系统中常用的基本控件，如：grid表

格，form表单，tree控件等。另外LFW控件体系是一套可扩展的控件体系，用户可以在这体系之上开发自

己的控件。

第二章LFW控件及UI布局

本章内容概要:

•LFW控件详细介绍

•UI布局详细介绍

2.1LFW控件

2.1.1表单控件（Form控件）

＞类型

令流式布局：根据页面大小自动调整每行表单项数量。

令固定布局：每行表单项数量固定。

◊固定提示布局：每行表单项数量固定，每个表单项后面可显示提示信息。

令自由表单：可通过ui设计器自由拖拽表单中的元素到页面布局中。

令只读布局：与固定布局类似，不能编辑，表单元素上没有编辑控件。

＞样例

用户编码ff用户名ff

用户昵称员工号

性别男一所用语言简体中文▼

邮箱电话

手机启用日期2011-04-15同

失效日期回所属部门Q

所属蛆织Q身份认证方式静态密码▼

密码安全级别编码普通级▼

＞创建

新建表单：在片段的久。m9|”节点上点击右键，从弹出菜单中选择"新建表单"。输入表单名称点击“OK"。

打开表单编辑页面。

Blfnjwsn冶■.▼口目、

.业务蛆件工具箱

表中洛染器

:绑定数蹇集

每行自度22

0关联右键菜单是否是nniLi!否

是否相染金

关联耗工且箱

数篇谓

-＞关联行宽120

量小标答宽80

演奏类型流式布局

E基本

IDform」

标题

弹出菜单

是否可编$贵是

是否可见是

定数据集：在工具箱中选中"绑定数据集"，拖到编辑区上。

国t务组件工具箱T

绑定数据集

m关联右解菜单

从弹出窗口中选中数据集，点击“确定”。

确定取消

邑关联关系工具箱

T关联

数据关联成功，可以看到属性编辑区中增加了数据集中的列。可直接修改表单属性和表单项属性。

在工具箱中选择"关联右键菜单"，拖入编辑区，可增加表单的右键菜单。

6业务妲件工具箱T

巨绑定数据集

三关联右犍菜单

从弹出菜单中选择菜单，点击"0K"。

右键菜单加入完成。

L＜俵单＞＞

form1

＞功能参数配置

固定布局靠右

只读布局

表单项ID是表单项ID

FormElement字段否对应数据集上

的字段名

显示值否表头显示值

多语资源否多语标识代码

多语所在模块否多语所在模块

RowSpan是所占行数默认为1

ColSpan是所占列数默认为1

宽度是表单项宽度默认为120

局度是表单项高度默认为22

是否可见是表单是否可见默认为是

是否可编辑是表单是否可编默认为是

辑

标签颜色否标签颜色

是否固定表头是是否固定表头默认为否

编辑类型是表单项的编辑

类型

输入框内提示否表单项的输入

框内提示信息

输入框外提示否表单项的输入

框后面的提示

信息

引用参照否引用参照ID如果编辑类型是参照，则此处填写该

参照ID.

引用下拉框否引用下拉数据如果编辑类型是下拉框，则此处填写

集该下拉数据集

IDIDO

引用ID否引用控件的ID如果编辑类型是SelfDef即自定义类

型，则需设置引用控件的ID.

可使用控件为：按钮、图片、标签

下拉控件数据否下拉控件数据

区高度区高度

仅显示图片是是否只显小图默认为否

片

是否换行显示是表单项是否换默认为否

行显示

描述否表单项描述信显示在表单项后面，比如计量单位。

息

是否可以为空是表单项是否可默认为否

为空

是否只读是是否只读默认为否

是否绑定下一是是否和下一个连在一起显示，默认为否

个表单项绑定

A事件

事件参数事件类型事件说明是否在服务器运提交规则

行

MouseEventonmouseout鼠标移出事件是有

onmouseover鼠标移入事件是有

ondbclick鼠标双击事件是有

onclick单击事件是有

AutoFormEventinActive禁用时事件是有

active启用时事件是有

getValue取值时事件是有

setValue设值时事件是有

FocusEventonFocus聚焦事件是有

onBlur焦点移出事件是有

2.1.2表格控件（Grid控件）

＞类型

令简单表格：一般的行列表格展示固定布局：每行表单项数量固定。

令树表：数据存在父子关系，以树的形式在表格中展示。

令表单样式的表格：表格中的每一行都以表单样式展示。

＞样例

简单表格：

编码|名称|类型|应用ID|应用地址|口是否启用|口允许个…|□启用菜…

A500004移动协作任务业务类型taskAppapp/taskApp□[i

E3220101任务制定业务类型task^)papp/taskApp0[i

E3220104我的任务北务类型myTaskAppapp/mylaskApp00[2

树表：

组编码1组名称|所属组织|来源

y111111港华集团

yguanghua_users01港华集团用户组01港华集团次：

vguanghua_users02港华集团用户组02港华集团NC

"vganghua0201港华集团用户组0201港华集团

7guanghua_users03港华集团用户组03港华集团NC

表单样式的表格：

用户名称11111用户编码1111切日期12013-02-21_身份张三_

所属组织|用友案团所屋集团用友集团包感人»陈团^理月:创建时间2C13-02-211251―

最后修改时间

用户名称12222221用尸编码122222221切日期12013-02-21身份李四

所属组织|用友集团所星集团用友集团砥里人yony。课团管理E：［创建时间i2013-02-2112.5^

最后修改时间12013-02-2112.5?Q

用户名称|窠团用户1用尸编蚂user1生效日期2013-01-22身份:张三_

所属组织|用友集团所属集团用友集团包犍入ygy。课团管理E.创建时间i2C13-012211：）：；7

最后修改时间12013-02-0416:511;

用户名称|集团用户2用尸编码user2生效日期12013-01-22身份王m_

所属组织|用友集团所屋集团用友集团自健人|yonyo集团管理万：|创建时间j2013-01-2211讦,

最后修改时间12013-02-2510.

用尸名称菊团用户3用尸编码user3生效日期2013-01-22身份杨六郎

所属组织|用友集团所屈集团用友集团自俄人|yw-」迷团管理E创建时间pC-lj-01<j11二「

最后修改时间12013-02-05lO.OJj1

转到匚］页共11条用页显示5条

<首页。23末页>

A创建

新建表格：在片段的“Control”节点上点击右键，从弹出菜单中选择"新建表格二输入表格名称，点击“0K”。

£新建表格

输入表格名称

Igridjl-

0K

打开表格编辑器。

6*表格编辑器疝'E3Properties区

1>

区业务组件工具箱PropertyIVi

H高级

绑定数据集CellEditor

表头单行高度

GridLevel

单行高度

码关联右键菜单分页工具条是否在

给定的顺序分组

e关联关系工具箱每页数目

否

->关联数据集是否多选

是

—>关联Level是否可编辑是

是否显不表头否

是否显示合计行否

否

是否显示数字列

数据集

行渲染

B基本

ID夕

标题币

弹出菜单

是否可编辑

是否可见B

绑定数据集：在工具箱中选中"绑定数据集”，拖到编辑区上。

公业务组件工具箱8

绑定数据集

m关联右键菜单

从弹出窗口中选中数据集，点击“0K"。

®引用数据集凶

£关联关系工具箱0

.关联数据集

数据关联成功，可以看到属性编辑区中增加了数据集中的列。可直接修改表格属性和列属性。

在工具箱中选择"关联右键菜单"，拖入编辑区，可增加表格的右键菜单。

■业务组件工具箱飞

巨绑定数据集

w关联右键菜单

从弹出菜单中选择菜单，点击"0K"。

右键菜单加入完成。

＞功能参数配置

控件属性名称是否必须属性作用备注

表格GridID是右键菜单ID

标题否表格标题

弹出菜单否弹出菜单ID

顶层距是距离外层顶端大小默认为0

左边距是距离外层左端大小默认为0

高度是表格高度默认为100%

宽度是表格宽度默认为100%

是否可编辑是表格是否可编辑默认为是

是否可见是表格是否可见默认为是

位置否表格^■类型relative或absolute

默认为relative

自定义主题否表格css类

是否表单展现否以表单样式展现

表头单行高度否表头单行的高度

单行高度否表格行高度

分页工具条是是分页工具条位置默认为否

否在顶端

给定的顺序分否分组列以","分隔的列名，按顺序分组。

组

行渲染类型否表格每一行渲染完可自定义渲染类型方法是在include.js

后，调用此类型渲中编写渲染类型对象，改对象名称写在

染器。此处。

每页条目否每页显示数量

是否多选是是否为多选表格默认为否

是否简易分页否分页栏是否为简易默认为否

显示栏形式

是否显示表头是是否显示表头默认为是

是否显示合计是是否显示合计行默认为否

行

是否显示列控是是否显示列控制菜默认为是

制菜单单

是否显示数字是是否显示数字列默认为否

列

数据集是绑定数据集ID

整体是否可以是整体是否可以排序默认为是

排序

表格列ID是表格列ID

GridColumn字段否对应数据集上的字

段名

显示值否表头显示值

多语资源否多语标识代码

多语所在模块否多语所在模块

宽度是列宽度默认为120

是否可见是列是否可见默认为是

是否可编辑是列是否可编辑默认为是

列背景色否列的背景颜色

内容位置是内容对齐方式left、center、right

内容颜色否内容颜色

是否固定表头是是否固定表头默认为否

编辑类型是表格列的编辑类型

渲染类型是表格列的渲染类型可自定义渲染类型方法是在include.js

中编写渲染类型对象，改对象名称写在

此处。

引用参照否引用参照ID如果编辑类型是参照，则此处填写该参

照ID。

引用下拉框否引用下拉数据集ID如果编辑类型是下拉框，则此处填写该

下拉数据集ID。

只显示图片是是否只显示图片默认为否

是否合计列是该列是否是合计列默认为否

是否自动扩展是该列是否自动扩展默认为否

是否排序是该列是否可排序默认为是

所属组否该列所属的组ID

是否可以为空是该列是否可为空默认为否

＞表控件的事件

事件参数事件类型事件说明是否在服务器运行提交规则

MouseEventonmouseout鼠标移出事件是有

onmouseover鼠标移入事件是有

ondbclick鼠标双击事件是有

onclick单击事件是有

GridEventonDataOuterDivContextM右键菜单显示事件是有

enu

onLastCellEnter启用时事件是有

GridRowEventbeforeRowSelected行选中之前事件是有

onRowDbClick行双击事件是有

onRowSelected行选中事件是有

GridCellEventonCellClick单元格单击事件是有

cellEidt单元格编辑事件是有

afterEdit单元格编辑后事件是