WebBuilder开发手册编程频道|福州电脑网

2023年11月28日发(作者：)

WebBuilder开发手册

WebBuilder

开发手册

WebBuilder开发手册

1. 关于WebBuilder ...................................................................................................................... 5

1.1. WebBuilder的构成 ...................................................................................................... 5

1.2. WebBuilder运行的原理............................................................................................... 5

2. 系统的安装、部署和管理 ....................................................................................................... 6

2.1. WebBuilder的安装 ...................................................................................................... 6

2.1.1. WebBuilder服务器的安装 ............................................................................... 6

2.1.2. WebBuilder集成开发环境的安装 ................................................................... 6

2.2. WebBuilder与集他系统的相互集成 ........................................................................... 7

2.2.1. 把其他系统集成到WebBuilder ....................................................................... 7

2.2.2. 把WebBuilder集成到别的系统 ...................................................................... 7

2.3. 调试环境的构建 ........................................................................................................... 7

2.4. 系统部署和权限设置 ................................................................................................... 7

2.5. 系统的管理 ................................................................................................................... 8

2.6. 应用系统的发布 ........................................................................................................... 8

2.7. 运行环境 ....................................................................................................................... 9

3. 集成开发环境的使用 ............................................................................................................... 9

3.1. 编辑器的使用 ............................................................................................................. 10

3.2. 表单设计器的使用 ..................................................................................................... 10

4. WebBuilder开发基础 ............................................................................................................ 11

4.1. 开发我的第一个Hello World程序 ........................................................................... 11

4.2. 系统的目录结构 ......................................................................................................... 12

4.3. WebBuilder中的参数机制......................................................................................... 12

4.4. 系统的配置 ................................................................................................................. 13

4.5. 运行时变量 ................................................................................................................. 14

4.6. xwl文件的body描述 ................................................................................................ 14

4.7. 多域运行及初始帐户 ................................................................................................. 15

4.8. 系统数据库表说明 ..................................................................................................... 15

4.8.1. 用户表WB_USER ......................................................................................... 15

4.8.2. 计划任务表WB_TASK ................................................................................. 15

4.8.3. 日志信息表WB_LOG ................................................................................... 16

4.8.4. 键值对照表WB_KEY ................................................................................... 16

4.8.5. 文本表WB_TEXT ......................................................................................... 16

4.8.6. 桌面保存信息表WB_PORTALET ................................................................ 16

5. 页面的布局和容器组件 ......................................................................................................... 17

5.1. 容器组件 ..................................................................................................................... 17

5.1.1. viewPort显示容器 ......................................................................................... 17

5.1.2. panel面板 ....................................................................................................... 17

5.1.3. extWindow窗口 ............................................................................................. 17

5.1.4. extForm表单 .................................................................................................. 18

5.1.5. tab页 ............................................................................................................... 18

5.1.6. fieldSet字段集 ............................................................................................... 18

5.2. border边界布局 ......................................................................................................... 19

5.3. fit适配布局 ................................................................................................................ 20

WebBuilder开发手册

5.4. absolute绝对位置布局 .............................................................................................. 20

5.5. accordion折叠布局 .................................................................................................... 20

6. 数据库的访问 ......................................................................................................................... 21

6.1. 查询组件 ..................................................................................................................... 21

6.1.1. 返回结果集 ..................................................................................................... 21

6.1.2. 参数的使用 ..................................................................................................... 21

6.1.3. 事务 ................................................................................................................. 22

6.1.4. 跨数据库开发 ................................................................................................. 22

6.1.5. 示例 ................................................................................................................. 23

6.2. 数据更新组件 ............................................................................................................. 23

6.2.1. 数据来源 ......................................................................................................... 23

6.2.2. SQL语句的批运行 ........................................................................................ 24

6.3. 数据生成器组件 ......................................................................................................... 24

6.3.1. 生成json格式的数据 .................................................................................... 24

6.3.2. 生成图片数据 ................................................................................................. 25

6.3.3. 生成二进制流 ................................................................................................. 25

7. 组件的使用 ............................................................................................................................. 25

7.1. 目录 ............................................................................................................................. 25

7.2. 标签 ............................................................................................................................. 26

7.3. 编辑框、数字框和按钮 ............................................................................................. 26

7.4. 菜单及工具条 ............................................................................................................. 26

7.4.1. 菜单制作 ......................................................................................................... 26

7.4.2. 制作面板嵌入式菜单 ..................................................................................... 27

7.4.3. 制作常规菜单 ................................................................................................. 27

7.4.4. 制作内置工具条菜单 ..................................................................................... 27

7.5. 日期和时间 ................................................................................................................. 27

7.6. 单选框和复选框 ......................................................................................................... 28

7.7. ajax和store组件 ....................................................................................................... 28

7.7.1. ajax组件 ......................................................................................................... 28

7.7.2. store组件 ........................................................................................................ 29

7.8. 下拉框 ......................................................................................................................... 29

7.8.1. 通过预置的下拉项使用 ................................................................................. 29

7.8.2. 通过关联store的方式异步引用下拉项 ....................................................... 29

7.8.3. 通过关联query的方式同步引用下拉项 ...................................................... 29

7.8.4. 类似于google的异步搜索提示下拉项 ........................................................ 29

7.9. 树组件 ......................................................................................................................... 30

7.9.1. 同步树 ............................................................................................................. 30

7.9.2. 异步树 ............................................................................................................. 30

7.10. 表格 ......................................................................................................................... 31

7.10.1. 同步表格 ......................................................................................................... 31

7.10.2. 异步表格 ......................................................................................................... 31

7.10.3. 表格列的定义 ................................................................................................. 31

7.10.4. 可编辑表格 ..................................................................................................... 31

7.11. 组合组件 ..................................................................................................................... 32

WebBuilder开发手册

7.11.1. DualList双重列表 .......................................................................................... 32

7.11.2. TreeList树列表 .............................................................................................. 32

7.11.3. ComboTree下拉树 ......................................................................................... 32

7.12. 图表 ......................................................................................................................... 32

7.12.1. Chart图表容器 ............................................................................................... 32

7.12.2. ChartContent图表内容 .................................................................................. 33

7.13. 辅助组件 ................................................................................................................. 33

7.13.1. mail电子邮件 ................................................................................................. 34

7.13.2. action动作组件 .............................................................................................. 34

7.13.3. excepter异常触发器 ...................................................................................... 34

7.13.4. validator验证器 .............................................................................................. 34

7.13.5. defaultValue默认值 ........................................................................................ 34

7.13.6. keyMap按键映射 ........................................................................................... 34

7.14. actionFile文件组件 ................................................................................................ 35

7.15. html组件的使用 .................................................................................................... 35

7.15.1. 直接添加 ......................................................................................................... 35

7.15.2. 通过面板的content属性添加 ....................................................................... 35

8. 后台Java与前台JavaScript的使用 ..................................................................................... 36

8.1. 调用后台Java类方法 ................................................................................................ 36

8.1.1. Request使用 ................................................................................................... 36

8.1.2. Response使用 ................................................................................................ 36

8.1.3. method组件的属性 ........................................................................................ 37

8.1.4. 示例 ................................................................................................................. 37

8.2. 编写JavaScript和HTML脚本 ................................................................................. 37

8.2.1. 使用脚本组件 ................................................................................................. 37

8.2.2. body的script属性 ......................................................................................... 38

8.2.3. 脚本的直接输出 ............................................................................................. 38

8.2.4. 系统提供的实用JavaScript函数 .................................................................. 38

WebBuilder开发手册

1. 关于WebBuilder

WebBuilder是一款跨平台、数据库和浏览器的Web可视化应用开发和部署平台。使用

WebBuilder可开发ERP、OA、CRM、HR、MIS以及电信、银行、政府、企业等各行业的

行业应用系统，帮助信息化管理系统的快速构建。

WebBuilder帮助提高应用系统的开发效率，并降低成本。完善的基础架构，具有应用

系统必须的完整功能，使系统的开发仅需致力于业务的开发。

应用开发：提供可视化的WebBuilder集成开发环境，帮助应用系统的快速开发，支持

使用Eclipse等开发工具的开发和调试，可以在您原有使用的技术框架上混合使用。

应用部署：使用基于Web的资源管理器进行应用的部署，支持Java，.Net，PHP等大

部分Web应用的部署。

自定义的应用描述语言：基于XML的Web应用描述语言，屏蔽不同平台、数据库和浏

览器之间的差异。

完整的组件框架：提供应用开发所需的经过封装的前后台组件、开发框架以及应用模块，

集成封装了大量Ext、Dhtml、FusionCharts、标准HTML和JS组件以及包括数据访问、流

程引擎、计划任务、系统调度等框架在内的Java后台组件。

使用WebBuilder可快速开发出功能强大的各种企业级应用系统，也可以基于应用系统

平台做深度的二次开发。

关于WebBuilder的更多信息请访问：

WebBuilder开发交流论坛请访问：

/main?action=webbuilder/application/bbs/

1.1. WebBuilder的构成

WebBuilder由基于JEE的WebBuilder服务器和基于桌面应用的集成开发环境构成。

WebBuilder服务器是运行应用系统的引擎；WebBuilder集成开发环境是开发应用系统的工

具，用于生成应用xwl文件。

最新版本的WebBuilder服务器和集成开发环境请到如下网址下载：

/main?action=webbuilder/application/about/

1.2. WebBuilder运行的原理

WebBuilder使用集成开发环境生成应用描述文件xwl，使用服务器来解析运行xwl文件。

xwl文件是基于xml的描述应用逻辑的文件，类似于jsp文件。

通过使用集成开发环境可视化地设计应用的前后台组件、属性、方法和事件，来构建整

个应用的大部份功能和框架，可以通过编写前台html/JavaScript脚本和后台java代码来扩充

业务功能的开发。

xwl文件内的组件是有先后顺序的，服务器解析xwl文件时，会根据组件的先后顺序来

执行。比如xwl文件内包含query组件和grid组件，其中grid组件引用了query组件，那么

WebBuilder开发手册

query组件必须在grid组件之前定义，可通过编辑器拖动组件来调整同一层次上组件的先后

顺序。

2. 系统的安装、部署和管理

2.1. WebBuilder的安装

2.1.1. WebBuilder服务器的安装

➢ 安装和配置目标系统的Java运行环境、Web应用服务器和数据库系统；

➢ 解压缩，并复制META-INF、WEB-INF和WebBuilder三个目录至

应用服务器的应用目录，如Tomcat6/webapps/wb；

➢ 编辑META-INF/配置数据库连接信息，如MySql可配置wb_mysql项，Sql

Server可配置wb_mssql项，Oracle可配置wb_oracle项。在配置数据库连接信息之前，

请确保指定名称的数据库已经创建，如配置目标数据库为wb，则名称为wb的数据库

必须已经创建；

➢ 复制指定的数据库驱动jar包至应用服务器lib目录，如Tomcat6/lib。MySql复制软件

包中的attachment/(适用5.1，其他版本请自行从网上下载)，Sql Server复制

软件包中的attachment/(适用2008，其他版本请自行从网上下载)，Oracle复

制软件包中的attachment/(适用9i，其他版本请自行从网上下载)；

➢ 打开webbuilder/system/，修改main/var/jndi项为实际使用的jndi，如

[java:comp/env/jdbc/wb_oracle]，修改main/var/dbType项为实际使用的数据库类型，如

MySql、MsSql(MsSql表示Sql Server)、Oracle等；

➢ 配置完以上所有信息后，打开数据库安装和配置程序，配置程序URL地址为：

[ip]:8080/[wb]/main?action=webbuilder/application/portal/，[ip]为ip地址；

[wb]为应用目录名称，如安装在ROOT目录，则取消此项；如果端口为80可取消[:8080]，

点击[重新安装]按钮，即可完成所有的安装；提示：如果安装过程中发生错误，请确认

META-INF/和webbuilder/system/配置是否正确，如有必要可重启

应用服务器再进行安装；

➢ 登录系统Portal的地址：[ip]:8080/[wb]，首次登录系统管理员用户为：用户名称

system，密码system；登录后请阅读首次使用的帮助信息：[帮助中心]->[帮助说明]->[使

用系统]->[开始使用系统]。

2.1.2. WebBuilder集成开发环境的安装

➢ 解压缩至指定目录，并运行；根据提示进行下一步操作，

直至安装完成；

➢ 双击桌面WebBuilder图标打开IDE，点击【工具】->【选项】菜单，打开【常规】选

项卡配置Web相关信息，在【本地目录】中配置WebBuilder服务器的应用根目录，如：

【D: ApacheTomcat6webappswebbuilder】或【D:ProjectwebbuilderWebContent】；在

WebBuilder开发手册

【服务器URL】中配置运行xwl的WebBuilder服务器URL地址，如：

【localhost:8080/webbuilder/main】；【Web路径变量】如无特殊情况，请勿配置此

项，设置为空即可。

2.2. WebBuilder与集他系统的相互集成

WebBuilder具有比较灵活的扩展性和伸缩性，能方便地集成其他系统或集成到其他系

统。

2.2.1. 把其他系统集成到WebBuilder

把其他系统的相关文件，如JSP、PHP、HTML等文件部署到WebBuilder的

webbuilder/application目录，即可把别的系统无缝地集成到WebBuilder。如其他系统带jar

包，复制这些jar包至lib目录。

2.2.2. 把WebBuilder集成到别的系统

复制包中的WEB-INF/lib/文件及其他公共jar文件

至目标系统lib目录，复制webbuilder目录至目标系统应用目录；融合WEB-INF/

中的配置信息至目标系统，以及融合META-INF/中的配置信息至目标系

统即可。此方法同样适用于部署使用开发工具的调试工程项目。

2.3. 调试环境的构建

基于WebBuilder的调试环境可通过如下方法构建，具体的构建方式请参考开发论坛中

的相关视频。

➢ 在指定开发工具如Eclipse中新建web动态项目；

➢ 把安装包中的webbuilder目录复制到项目的应用目录；

➢ 把安装包中的META-INF/ 中的jndi配置信息融合到项目的

中；

➢ 把安装包中的WEB-INF/lib下的jar文件复制到项目的lib目录中，把

WEB-INF/的配置信息融合到项目的中即可。

2.4. 系统部署和权限设置

开发完成的xwl、jsp、html等文件，可以部署在webbuilder/application目录。系统会自

动根据配置，把所组织的模块展现到portal中，并控制指定模块的访问权限。

使用【系统管理】->【资源管理器】可以部署用户开发的应用系统。在【资源管理器】

中可以设置应用的指定目录或文件在portal中的显示样式以及角色权限等属性。

系统默认带了一些应用模块功能，如果不需要这些模块，可以在资源管理器中设置隐藏

或直接删除。建议保留【管理工具】和【系统管理】两大模块。

WebBuilder开发手册

资源管理器中模块的设置

在【资源管理器中】配置应用模块的属性时，先选择需要配置的目录或文件，然后点击

属性进行设置。当需要移去指定的目录或文件时，可选择【在列表中隐藏】选项或直接删除

目录或文件。当需要对目录或文件排序时，可选择属性下拉菜单【排序】。在排序对话框中，

可拖动选择的模块来设置排序。

当配置指定目录或文件的角色属性时，设置的目录或文件将只允许选择的角色的用户访

问。设置目录的权限具有继承性，父目录设置的角色权限将自动赋予所有子目录和文件。

角色名称为“管理员”的角色必须保留，其他角色可自行配置或更名。管理员及管理员

所属的角色不允许通过【用户管理】来设置角色，管理员用户操作该模块除外。

2.5. 系统的管理

系统默认提供了应用系统的一些管理功能，这些功能包括管理工具及系统管理功能。

管理工具包括：登录用户管理、部门组织、角色管理和模块管理，管理工具的功能适用

于所有域。

系统管理包括：资源管理器、数据库浏览器、系统日志、系统设置、系统任务等功能。

系统管理功能只有系统域用户的管理员才有权限访问。

在【资源管理器】中可组织开发的应用模块的架构及权限。通过【管理工具】->【模块

管理】也可设置权限。两者的区别在于前者是组织所有域原始默认的应用架构和权限，后者

是在当前域对默认设置的补充。新开发的模块必须先在【资源管理器】中进行设置。

2.6. 应用系统的发布

使用WebBuilder开发的应用是一个标准的JEE Web应用。应用的发布可直接把开发的

应用目录下的所有子目录和文件复制到目标系统应用目录，也可以打成WAR包的格式部署

到目标系统。

如果需要WebBuilder安装用户定义的数据库表，请按照如下步骤操作：

➢ 配置webbuilder/data/init目录下的指定数据库类型脚本文件，比如oracle类型编辑名称

为的脚本文件；mysql类型编辑名称为的脚本文件；sql server类型

WebBuilder开发手册

编辑名称为的脚本文件。

➢ 如果需要导入静态表数据，把文件名称为表名且扩展名为dat的utf-8格式的文本文件

或扩展名为xls的Excel文件复制至webbuilder/data/init；

➢ 复制安装包中的如下3个文件至webbuilder/application/portal目录。

webbuilder/application/portal/

webbuilder/application/portal/、

webbuilder/application/portal/

该3个文件用于首次系统的安装，安装完成之后系统会自动删除这3个文件，以禁止未

授权的访问。

➢ 压缩应用目录下的所有子目录和文件为zip格式的文件，即可制成应用包。该应用包可

通过webbuilder【系统管理】->【系统安装升级】模块安装或升级。

2.7. 运行环境

操作系统：Windows，Linux，Unix，Apple；

JEE环境：JDK 6.0以上；

Web服务器：Tomcat，Resin，WebLogic，WebSphere，BES等大部份服务器；

浏览器：IE，Firefox，Safari，Opera，Chrome等；

数据库：Oracle，MySql，DB2，MS SQL，Sybase，Teradata，JavaDB，PostgreSQL等；

内存：最小32MB，推荐大于64MB；

存储空间：程序占用空间小于100MB，数据库空间根据数据规模大小而定。

3. 集成开发环境的使用

WebBuilder集成开发环境是开发WebBuilder应用模块xwl文件的工具，由工具及菜单

区、功能面板区和设计及开发区构成。系统采用动态可扩展的插件技术来配置系统，可通过

xml文件的配置来改变集成开发环境的功能。

WebBuilder开发手册

3.1. 编辑器的使用

编辑器是设计xwl文件的工具，通过配置属性和事件来描述应用功能。编辑器的左侧视

图为组件树，以树状结构的形式来展现xwl文件内的所有组件。右侧的属性和事件编辑器显

示当前选择的组件的属性和事件。

xwl文件编辑器

在左侧组件树中，可复制、剪切和粘贴所选择的组件，也可在同一层级的组件之间相互

拖动。

点击组件库中的组件，能在当前选择的组件下创建新的指定组件，如需创建同一层级的

组件，可通过按CTRL键+点击需添加的组件来实现。

xwl文件的编辑可通过【文件】->【打开】菜单选择指定的文件来打开，或直接双击左

侧的文件列表来实现。

3.2. 表单设计器的使用

表单设计器是设计容器组件内的组件绝对坐标位置的工具。当容器的布局为绝对位置布

局时，表单设计器设计的组件位置才有效。

当容器未显式指定layout布局属性时，启用表单设计器将自动设置该容器的layout属性

为absolute。表单设计器仅适用于指定的容器为absolute布局，否则设计的布局将无效。

WebBuilder开发手册

表单设计器

表单设计器的打开，可通过选择指定的容器组件，点击工具条上的表单设计器或点击右

键选择表单设计器来实现。

提示：在使用表单设计器设计时，界面元素之间可适当间隔，避免过于紧凑。这样的设

计，一方面保持了界面的美观，另外也屏蔽了不同浏览器之间的细微差异。

4. WebBuilder开发基础

4.1. 开发我的第一个Hello World程序

打开WebBuilder集成开发环境，点击新建按钮，新建一个xwl文件。点击组件箱中的

【常用】->【窗口】组件，并设置窗口组件的属性：

caption：Hellow World，autoShow：true

点击保存按钮，保存该xwl文件至webbuilder/application/mytest/，点击运行按

钮，运行该xwl文件。

WebBuilder开发手册

4.2. 系统的目录结构

WebBuilder目录是一个标准的JEE Web应用目录，其结构如下：

META-INF目录：配置元数据信息的目录，主要包含文件，可用于配置数据库

jndi连接信息。

webbuilder目录：webbuilder应用的主目录。

➢ application：部署xwl应用文件的目录，系统会自动把部署在该目录下的目录和文

件显示在portal中。

➢ controls：组件库目录，包括ext组件、fc组件、dhtml组件等。

➢ css：样式表目录，在文件中定义了一些常用的样式，包括字体、图标

和链接的样式等。如需扩充样式，比如添加图标等，可编辑该文件。

➢ data：应用的数据目录，存放数据库表的初始化数据和sql脚本等。

➢ download：存放供下载的文件目录。

➢ image：存放图像文件的目录。

➢ script：存放脚本文件的目录，在文件中定义了一些常用的javaScript函数，

可在该文件中添加新的javaScript函数。

➢ system：存放系统运行所需的xwl文件以及配置设置文件。在文件中定

义了系统运行的参数及变量，可在此文件中添加用户自定义的变量。

WEB-INF目录：存放web相关的文件，主要包含lib文件和class文件。用户开发的jar包

可放置在lib子目录。

4.3. WebBuilder中的参数机制

WebBuilder中的参数分为两种，包括外部参数和内部参数。

外部参数：外部参数存储于HttpServletRequest对象的Parameters中，可通过

HttpServletRequest的getParameter方法获取。

内部参数：内部参数存储于HttpServletRequest对象的Attributes中，内部参数可通过

HttpServletRequest的getAttribute方法获取。

在WebBuilder的xwl文件的任何位置，包括任何属性和事件中，可通过两种方式方便

地引用参数，这两种方式分别为无条件替换引用和jdbc sql参数引用：

无条件替换引用：该方式使用大括号加井号的方式来引用参数，系统会自动无条件替换

WebBuilder开发手册

名称所指的参数。如设置panel的caption属性为：【条件设置 – {#para#}】，系统首先会在内

部参数中查找名称为para的参数，如未找到，则在外部参数中查找名称为para的参数，如

仍未找到则返回空，如找到名称para所指的参数值为“abc“，则替换{#para#}为abc，最终

结果为【条件设置 – abc】。

jdbc sql参数引用：该方式使用大括号加问号的方式来引用参数，该引用方式仅适用于

sql语句。如设置query的sql语句为：【select * from table where field={?para?}】，系统首先

会在内部参数中查找名称为para的参数，如未找到，则在外部参数中查找名称为para的参

数，如仍未找到则返回空，如找到名称para所指的参数值为“abc“，则把{?para?}转换为

sql参数并设置值为abc。

如果para为非字符串类型的参数，可通过在参数名称前加前缀的方式来转换参数的类

型，常用的类型有：

整数：{??}，表示转换为整数；

双精度浮点数：{??} ，表示转换为双精度浮点数；

日期时间：{??} ，表示转换为日期时间；

文本：{??}，表示转换为文本流；

二进制：{??}，表示转换为二进制。

更多信息请参考数据库访问组件中sql的使用。

4.4. 系统的配置

WebBuilder服务器运行的重要参数配置保存在webbuilder/system/文件中。系

统运行时会自动把这些变量存储为内部参数，存储方法是变量名称前加前缀“sys.”。如title

变量的值为“abc”，则内部参数“{##}”为“abc”。注意引用时在变量名称前加“sys.”。

系统预定义的一些变量说明如下：

➢ title：表示应用的标题；

➢ version：应用的当前版本号；

➢ portal：系统默认的入口模块URL地址；

➢ needLogin：指定系统默认是否需要登录，各个模块可以单独设定是否登录；

➢ needRole：指定系统是否需要按角色验证当前用户对各个模块是否具有访问权限；

➢ recordSession：是否记录所有用户的在线状态；

➢ exceptionType：指定系统默认的异常类型，各个模块可以单独设定异常类型，设置为

system表明使用系统的异常提示；

➢ logType：指定系统默认记录日志的类型，各个模块可以单独设定，设置为none表明不

记录日志；

➢ startTask：是否在应用启动时自动启动计划任务，使用此设置可在集群模式下停止自动

运行冗余的计划任务；

➢ loginVerify：登录时是否需要输入验证码；

➢ runMode：系统运行模式，可为open，normal和debug，分别表示开放，标准和调试模

式；

➢ sessionTimeout：用户需要重新登录的不活动时长，单位为秒；

➢ ajaxTimeout：默认进行ajax操作时的等待时长，单位为毫秒，大数据量操作的时间溢

出系统将自动进行判断；

➢ jndi：默认采用的jndi；

➢ dbType：系统默认使用的数据库类型，如Oracle, MySql, MsSql, DB2, Sybase, Teradata,

WebBuilder开发手册

JavaDB, PostgreSQL或其它指定的类型等；

➢ fieldSeparator：指定导入或导出的文本文件，字段之间的分隔符，如“Tab”、“,”、“ ”、

“-”等；

➢ longDateFormat：导出文件时，包含时间的日期输出格式，如yyyy-MM-dd HH:mm:ss；

➢ shortDateFormat：导出文件时，不包含时间或时间部分为零的日期输出格式，如

yyyy-MM-dd；

➢ webFile：指定需要解析为web文件的文件扩展名列表，否则将视为下载对象；

➢ pagedRecords：指表格中分页显示数据时，允许分页的的最多记录数；

➢ bufferSize：处理upload文件时，默认的缓存大小，单位为字节；

➢ charset：字符使用的编码，默认为根据操作系统。注：系统内部均采用utf-8编码，字

符编码仅作用于系统外部，比如导出至文本文件时的字符编码。

➢ fileCharset：输出文件名使用的编码，默认为根据操作系统。

➢ dbCharset：数据库系统采用的编码，默认为根据操作系统。

用户可在中配置自定义的变量，在引用时通过加前缀“sys.”即可访问。比如

定义了变量myJndi，值为“java:comp/env/jdbc/myjndi”，在query的jndi属性中设置为

{##}即可引用。

4.5. 运行时变量

系统运行时的变量是系统运行期间自动生成的变量，通过读取这些变量的值，能方便系

统的开发。这些运行时的变量存储在系统的内部变量当中。

运行时变量包括以下一些常用的变量：

：web应用的根目录地址；

：当前请求的客户端ip地址；

：当前请求的日期和时间，包括时间部分；

e：当前请求的日期，未包括时间部分；

：当前请求用户的用户名称；

：当前请求用户的角色；

：当前请求用户的域名称；

me：当前请求用户的姓名；

：当前请求用户的编号；

cess：当前请求用户的上次登录时间；

th：当前用户的私有文件空间根目录；

e：当前系统的运行模式。

4.6. xwl文件的body描述

每个xwl文件都具有一个默认的根节点body，body是对xwl文件的整体信息的描述。

当xwl文件作为前台页面文件时body可以对页面的文档体进行描述，比如引用指定的

js文件、css文件，创建页面的框架html脚本，声明全局的js变量和函数等。

另外，也可设置body其他一些属性来设置xwl的行为，比如是否需要登录，是否需要

记录日志，初始化时执行的方法，发生异常时执行的方法等。

系统默认xwl文件的body是自动创建的，当指定的xwl文件不需要生成body时，可以

WebBuilder开发手册

设置createBody属性为false。此种情况往往用于xwl文件返回json、xml、图片或纯文本的

内容。比如xwl需要返回json：{para1:123,para2:’abc’}，系统默认是创建body的，返回的

内容可能包含html的body信息，为了返回纯json脚本，必须设置createBody属性为false。

如果xwl文件为页面文件，可在headerScript属性中定义全局的函数和变量，在

extLastScript属性中定义页面加载完成之后执行的JavaScript脚本。

4.7. 多域运行及初始帐户

域是指独立运行的空间，webbuilder支持多域运行。在同一系统中，不同的域可以设置

不同的权限体系、角色设置和组织架构等。多域为不同空间的用户群在同一系统内的独立运

行创造了条件，比如可以为多个不同的单位用户群在同一系统中运行。

系统默认创建了3个域，包括系统域system、测试域test和设置域webbuilder。系统域

所在的管理员具有最多的权限，用户开发的应用系统可在system域内进行组织。webbuilder

域中的一些设置将影响所有域用户的一些默认设置，比如可以通过webbuilder用户登录来修

改默认的portal界面。

系统域内包括用户system，默认密码为system。webbuilder域内包括用户webbuilder，

默认密码为webbuilder。test域内包括用户test，默认密码为空，以及其他多个用户。

系统默认禁止除system域以外的域用户的运行，如需允许所有域用户的运行可设置【系

统管理】->【运行模式】为开放模式。

4.8. 系统数据库表说明

WebBuilder自带了一些系统运行所需的数据库表，这些表用于存放用户信息、日志信

息、系统任务等重要信息。这些表的结构说明如下：

4.8.1. 用户表WB_USER

存放用户的相关信息。该表包括如下一些重要字段：

USERNAME：用户名称，用于登录的用户名称；

PASSWORD：登录密码，密码经过加密处理；

ROLENAME：设置的角色信息，包含一个或多个角色；

SCOPE：指定用户属于哪个域；

CODE：编号信息。

4.8.2. 计划任务表WB_TASK

系统提供计划任务功能，可通过【系统管理】->【系统任务】来添加和管理计划任务。

该表字段信息描述如下：

TASK_NAME：计划任务名称；

INTERVAL_TYPE：周期类型；

INTERVAL_EXPRESS：周期表达式；

START_DATE：起始时间；

WebBuilder开发手册

END_DATE：结果时间；

CLASS_NAME：运行的任务类名称；

STATUS：任务状态；

DESCRIPTION：任务描述信息。

4.8.3. 日志信息表WB_LOG

LOG_DATE：日志信息记录日期；

USERNAME：当前登录用户名称信息；

IP：当前登录用户IP地址；

MSG：日志信息；

LOG_TYPE：日志类型。

日志信息用于存放自动记录的系统运行日志。该表字段信息描述如下：

4.8.4. 键值对照表WB_KEY

键值对照表用于配置键值的对照信息，该对照信息可用于某些组件的键值字动转换。比

如配置1-男，2-女的性别信息，可直接用于下拉框、列转义或统计分析转义。

该表字段信息描述如下：

KEY_TYPE：键值对的类型名称；

KEY_ID：编号信息；

KEY_TEXT：编号对应的值信息

4.8.5. 文本表WB_TEXT

文本表用于存储指定域特定类别的文本信息，系统把一些以特定文本组织的数据存储于

该表中。比如部署组织结构文本、角色组织结构文本、系统的公告文本等均存储于该表中。

该表字段信息描述如下：

SCOPE：域名称；

KEY_NAME：存储文本的名称标识；

KEY_VALUE：存储文本的内容。

4.8.6. 桌面保存信息表WB_PORTALET

系统的Portal桌面提供基于用户的个性化设置和保存功能。用户的桌面信息保存在该表

中。

该表字段信息描述如下：

USERNAME：用户名称；

TITLE：标题；

HEIGHT：高度；

FILENAME：模块文件名称；

ICON_CLS：样式；

WebBuilder开发手册

PX：X坐标信息；

PY ：Y坐标信息；

COLLAPSED：是否收缩。

5. 页面的布局和容器组件

页面的布局是指整个页面框架的划分和设计，良好的布局不仅能美化页面，还能使页面

自适应客户端的不同分辨率。可使用页面容器组件来实现对页面的布局。常用的页面容器组

件包括viewPort（显示容器）、panel（面板）、extWindow（窗口）、extForm（表单）、tab（Tab

页）、fieldSet（字段集）。

页面的布局通过设置容器的layout属性来指定容器内组件的布局。

5.1. 容器组件

容器组件不仅能放置和容纳其他页面组件，还能实现布局、美化和方便管理的效果。

5.1.1. viewPort显示容器

基于浏览器对象的显示容器，显示区域为整个浏览器客户区。ViewPort组件是对Ext

中的Viewport组件的封装。

该组件不能嵌套使用，如需嵌套布局，请使用panel组件。

5.1.2. panel面板

面板是最常用的容器，用于构建面向应用的用户界面。面板的作用非常广泛：可作为组

件的容器；可以作为布局容器使用；可以作为装饰或功能性地使用，比如在tbar添加工具

条等。

panel组件包含tbar顶部条、body面板体和bbar底部条3部分。在tbar和bbar中可关

联菜单工具条组件。

可以设置panel的title属性来指定标题，frame属性来指定是否生成背景色，border属

性来指定是否生成边框，collapsible来指定是否可收缩。

5.1.3. extWindow窗口

窗口继承自panel面板组件，提供可拖动的交互式界面。

可通过设置窗口的dialog属性来指定窗口是否为对话框模式，默认窗口为对话框模式。

窗口为对话框时，可编写onOk事件来表示点击确定按钮执行的事件。

窗口即可以用作对话框，也可以用作显示的容器。通常窗口以模式对话框使用，系统默

认的窗口样式为隐藏的模式对话框。

如果要自动显示窗口，设置autoShow属性为true；如果设置为非对话框，设置dialog

WebBuilder开发手册

为false；

窗口为对话框时，可编写onOk事件来表示点击确定按钮执行的事件。

onShow事件为窗口显示时的事件，可在该事件中初始化窗口或设置焦点等。

可以在窗口的onHide事件使用extResetAllControlsValue("window")来重置窗口内组件的

值。

5.1.4. extForm表单

带有默认form布局及文件提交功能的面板容器。

通常情况下在WebBuilder内对于数据的提交可使用Ajax组件，因此使用表单组件提交

数据不常用。例外情况是提交带有上传文件的数据必须采用extForm表单组件。

上传文件时，需要在表单组件下添加text编辑框组件，并设置text组件的inputType属

性为file；设置Ajax组件form属性为extForm组件名称，设置isUpload为true，设置Ajax

指向的后台处理模块body的exceptionType属性为mark；然后调用Ajax控件同名的函数，

如ajax()来提交表单内所有的数据。

5.1.5. tab页

分页显示内容的容器。

通过在tab页组件下添加panel面板组件，来实现Tab控件的各页，每个panel即为每个

页。必须设置panel组件的caption属性来设置各页的标题。

tab页的设计

5.1.6. fieldSet字段集

归纳组件的容器，可用于把业务功能相近的一组组件放在一个容器中。容器会生成边框

及控制伸缩的按钮。

字段集效果图

WebBuilder开发手册

5.2. border边界布局

边界面局是一种将页面划分为若干个区的布局方式，一个页面可划分为东、南、西、北

和中5个区域。其中，中间区域是必须包含的，其他区域可根据需要选择划分。

边界布局效果图

除中间区外，其他各个区可设置默认的宽度或高度，中间区是自动适配的。同时可设置

除中间区之外的其他区容器组件的split属性为true，来生成指定区域可拖拉的分割条。

每个被划分的区可以单独设置包含border边界布局在内的任意布局，从而实现布局的

嵌套设计。

示例：

➢ 新建xwl文件，添加viewPort显示容器组件；

➢ 在viewPort组件下添加3个panel面板组件，设置name属性分别为northPanel，

westPanel和centerPanel；设置caption属性分别为北、西和中；设置region属性分

别为north、west和center；设置frame属性都为true；设置northPanel和westPanel

的split属性为true，collapsible属性为true；

➢ 点击保存按钮，保存至webbuilder/application/myTest/，然后点击运行按

钮。

示例设计图

WebBuilder开发手册

5.3. fit适配布局

适配布局指定子组件布满整个容器，通常此布局下的子组件仅有一个。可通过设置容器

的layout属性为fit，指定首个子组件布满容器。

示例：

➢ 新建xwl文件，添加viewPort显示容器组件，设置layout属性为fit；

➢ 在viewPort组件下添加panel面板组件，设置panel的caption属性分“fit布局”，

设置frame属性为true；

➢ 点击保存按钮，保存至webbuilder/application/myTest/，然后点击运行按钮。

5.4. absolute绝对位置布局

该布局指定容器的子组件通过坐标来定位，并可指定各个子组件的宽度和高度。当设置

容器的layout属性为absolute时，可通过表单设计器来调整子组件的位置和大小。

示例：

➢ 新建xwl文件，添加panel面板组件；

➢ 点击panel右键，选择表单设计器（如未设置layout属性，系统将自动设置layout

为absolute）；

➢ 通过表单设计器，调整panel至合适大小，并添加标签和编辑框至表单设计器（点

击要添加的组件再在表单设计器的任意位置点击即可添加）；

➢ 点击保存按钮，保存至webbuilder/application/myTest/，然后点击运行按

钮。

5.5. accordion折叠布局

折叠布局类似于outlook中的功能条面板，通过点击来展开其中的一个面板，并折叠其

他面板。

accordion布局

示例：

➢ 打开前例的文件；

➢ 选择westPanel，设置layout属性为accordion，在westPanel下添加3个面板组件，

WebBuilder开发手册

分别设置标题为面板1、面板2和面板3；

➢ 点击保存按钮，保存至webbuilder/application/myTest/，然后点击运行

按钮。

6. 数据库的访问

在webbuilder中封装了3个数据库访问组件来提供对数据库的快速访问。

6.1. 查询组件

提供通过sql语句对数据库表、视图、存储过程和函数等的访问能力。查询仅执行sql

语句，本身不返回任何结果，但可把查询组件绑定到前端组件来显示数据。

通过设置sql属性，来指定查询执行的sql语句；设置jndi属性来指定数据库连接jndi，

如果为空则默认取自变量。如果sql语为update类语句，比如insert、update和delete

语句，须设置type属性为update，如果sql语句执行存储过程和函数设置type属性为execute。

6.1.1. 返回结果集

执行查询时如果返回结果集，比如执行select语句，系统会自动生成一个名称为name

属性的ResultSet对象，并放在内部参数中（request的attribute属性中）。

当查询返回结果集时，默认使用单向游标，即查询结果只能使用一次；当一个查询需要

多次使用，比如绑定到多个组件时，需设置fastMode为false。

可设置loadData属性为true，指定自动获取query第一行各字段的值，并存储在内部参

数中。可通过【查询名称.字段名称】来访问各个字段的值，例如通过{#d#}来获

取query组件第一行myField的值。

6.1.2. 参数的使用

在sql语句中分为两种参数：一类是输入参数，一类是输出参数。输入参数可引用内部

参数或外部参数。

输入参数

输入参数的格式为：{?name?}或{??}

系统能根据对象的类型自动指定输入类型，也可以在变量名前加类型的方式显式地强制

指定类型以转换不同类型的数据，比如{?it?}表示把前台传来的textEdit控件的

值转换成整数，类似地还有：

VARCHAR：表示字符串；

INTEGER：表示整数；

SMALLINT：表示短整数；

BIGINT：表示长整数；

FLOAT：表示浮点数；

DOUBLE：表示双精度浮点数；

WebBuilder开发手册

TIMESTAMP：表示日期时间类型的时间戳；

DATE：表示日期；

TIME：表示时间；

CHARSTREAM：表示字符串流；超过一定长度的varchar类型，比如text等；

BLOB：表示二进制对象。

输出参数

输出参数往往用于有参数返回时的sql调用，比如访问存储过程或函数。

输出参数的格式为：{?@?}或{?@?}，其中subType为子类

型，比如长度等。

输入参数的格式如：{?@1?}，{?@2?}（2表示长度为2），

{?@-Binary?}（或{?@Binary?}等效）

输出参数的类型必须显式地指定，输出类型参数的设置等同于jdbc输出参数的设置。

可使用名称或编号来指定类型。输出参数获得的结果将存储在内部参数中，可通过request

的getAttribute方法获得。

具体的类型和编号对应如下（可参考jdbc）：

CHAR=1,VARCHAR=12,LONGVARCHAR=-1,NUMERIC=2,DECIMAL=3,INTEGER=4,

SMALLINT=5,BIGINT=-5,TINYINT=-6,FLOAT=6,REAL=7,DOUBLE=8,BIT=-7,DATE=91,TI

ME=92,TIMESTAMP=93,BINARY=-2,VARBINARY=-3,LONGVARBINARY=-4,NULL=0,OT

HER=1111,JAVA_OBJECT=2000,DISTINCT=2001,STRUCT=2002,ARRAY=2003,BLOB=2004

,CLOB=2005,REF=2006,DATALINK=70,BOOLEAN=16,ROWID=-8,NCHAR=-15,NVARCHA

R=-9,LONGNVARCHAR=-16,NCLOB=2011,SQLXML=2009

其他未在上述列表中的类型（比如oracle的resultSet类型返回），请直接用id号表示，

比如{?@-SetPara?}

6.1.3. 事务

可设置transaction属性来指定采用事务处理的方法，以保护数据的完整性，可为

none,start,commit，分别表示不操作事务，起动事务，提交事务。如果设置为提交事务，那

么之前的代码或组件必须已经启动事务。可设置isolation属性来指定事务隔离的级别。所有

的数据访问组件都可以设置事务。

当启动一个事务时，无须显式指定事务的提交，系统会自动根据状态来处理事务。当系

统发生异常时事务将被回滚，否则事务将被自动提交。

6.1.4. 跨数据库开发

当应用需要跨数据库开发时，webbuilder提供了一种快捷的方式。每个数据库访问组件

均提供属性dbType，当参数中的值等同于该属性值时，该组件才会运行。当编

写的sql语句对不同类型数据库具有不同的适用性时，可通过添加多个组件，并指定dbType

类型来解决。

比如可创建3个名称同为myQuery的query，并指定其dbType属性为oracle、mysql、

mssql，并编写不同的sql语句。当该query绑定到表格时，仅有数据库类型匹配的查询才被

执行和绑定。

当通过代码编写跨数据库的应用时，可通过读取参数（可使用

WebBuilder开发手册

ribute(“”)来读取），并根据该属性使用不同的sql语句处理即可。

6.1.5. 示例

举例1：插入一条包含integer,varchar和timestamp的记录：

sql：insert into {#tableName#} values({?number?},{?text?},{?eld?})

其中tableName、number,text和datefield为参数名称，tableName采用字符串替换的方式更

换表名，number、text和datefield采用jdbc参数的访问，datefield采用了显式转换的方式（加

前缀timestamp.）。

通过执行以上查询后将在数据库中插入一条记录；

举列2：调用存储过程输入参数并获得返回值，存储过程中第1个和第3个参数为输出，第

2个为输入，text为常量：

sql: {call {?@-?}:=myFunc({?paraOut?})}

type: execute

其中type指定类型为execute模式，参数列表中，第1个为输出参数paraIn（带符号@，-10

表示结果集），第2个参数为输入参数。

通过执行以上查询后，将执行名称为myFunc的函数，并把返回结果集ResultSet对象存储

到request的attribute名为paraIn的变量中。

6.2. 数据更新组件

数据更新组件提供insert、update和delete语句的批量执行能力，能方便地对数据执行

插入、更新或删除操作。

6.2.1. 数据来源

数据更新组件的数据来源可通过data和file属性来指定。

数据源来自data

data属性是用json数组定义的一组数据，例如：

[{a:1,b:'abc'}, {a:3,b:'de',b__old:'fg',__update:1}]

json数组中的每个json对象对应一条sql语句，sql语句使用insert、update或delete由

标记“__update”、“__delete”和“__insert”指定，缺省表示执行insert。

data数据源可直接来自于某些组件（如表格）或通过代码生成。当data数据源来自于

表格时，可直接设置data属性为{#gridName#}（表示引用名称为gridName的参数）。

举例：

1、设置data属性为[{a:1,b:'abc'},{a:3,b:'de',b__old:'fg',__update:1}]

上述json表达式表示：

第一行数据插入到数据库，a参数值为1，b参数值为'abc'；

第二行数据更新至数据库，a参数值为1，b参数值为'de'，b参数原值为'fg'(通过双下划

线加old标识即__old)，__update:1表示该行执行更新操作；

2、指定insertSql，updateSql或deleteSql属性中的至少一个，比如insert into table values

WebBuilder开发手册

({?integer.a?},{?b?})；

数据源来自file

file属性是使用参数（request的attribute对象）中的inputStream对象提供数据源。当file

数据源来自上传文件组件时，可直接设置file属性为文件组件名称即可。

6.2.2. SQL语句的批运行

sql语句的运行分为两种方式，一类是根据data或file指定的数据源批量运行insertSql、

updateSql和deleteSql属性所指的sql语句；另一类是由sqls属性指定的多条sql语句，多条

sql使用引用引用并以逗号分隔。

当通过第一类的方式运行sql语句时，sql语句的批运行由属性sequence指定。系统默

认按insert、update和delete分批运行。如需严格按照data或file中指定的记录顺序运行sql

语句，请设置sequence属性为true。

6.3. 数据生成器组件

数据生成器组件用于通过sql语句来生成格式化数据、图片或二进制对象。格式化数据

包括json、xml和数组，该组件生成的数据可直接用于前台组件。使用该组件必须设置body

的createBody为false，以避免创建多余的文档信息。

6.3.1. 生成json格式的数据

设置sql属性为需要执行的sql语句，sql语句的执行结果将直接生成json格式。当前台

组件采用分页时，可指定totalSql属性，该属性通过sql语句的方式查询总的记录数。如果

未指定该属性，系统将采用游标的方法统计总的记录数。

当未指定totalSql属性且返回的结果集记录数过大时，记录总数的统计将是一件耗时的

工作。系统通过阈值的设置来解决海量记录数的统计，阈值由参数ecords指定。

当返回的记录大于此值时系统将停止统计并返回ecords指定的值。

dateAsString属性指定是否把日期型字段转换为字符型，默认为true；如果需要按实际

的日期类型转换，必须设置为false；metaData属性指定生成的json格式数据中包含的元数

据信息，比如字段的名称和类型等，可通过设置为“-”由系统自动生成。colDefine属性指

定生成的json格式数据中包含的列定义信息（适用于表格等对象），可通过设置为“-”由系

统自动生成。

当sql语句指定为调用函数或存储过程时，请设置executeMode属性为true，并指定返

回的参数名称为return。

在dataProvider中可引用参数xpress，该表达式通过获取前台组件传递的排序

信息动态生成排序字段的sql表达式。如果引用该属性且当sql中包含重名的字段时，须通

过sortFields来区分。比如：

sql：select a.f1,a.f2,b.f3,b.f4 from t1 a ,t2 b

sortFields：a=f1,f2;b=f3,f4

当t1表和t2表均包含字段f1,f2,f3,f4，通过设置sortFields表示当对f1、f2排序时使用

a.f1和a.f2，当对f3,f4排序时使用b.f3和b.f4。

WebBuilder开发手册

举例1：调用SQL语句生成JSON数据源：

sql：select * from table where text={?text?} and datefield={?eld?})

dateAsString：false

metaData：-

其中text和datefield为参数名称（存储在request对象的parameter或attribute中），datefield

采用了显式转换的方式（加前缀timestamp.）。

通过执行以上查询后将生成指定的JSON字符串；

举列2：调用函数或存储过程生成JSON数据源：

Sql：{call {?@-?}:=proc({?number?})}

executeMode：true

dateAsString：false

metaData：-

{?@-?}为返回值，-10表示结果集类型，return表示返回的参数名。

通过执行以上查询后将生成指定的JSON字符串。

6.3.2. 生成图片数据

指定sql语句为查询图片的sql语句，如select myPic from table；设置format属性为图

片的格式：如jpeg或gif即可。

6.3.3. 生成二进制流

指定sql语句为查询二进制字段的sql语句，如select file，fileName,fileSize from table；

设置format属性为blob。

sql语句中第1个字段为文件对象字段；如果存在第2个字段，则表示为文件名；如果

存在第3个字段，则表示为文件大小。

7. 组件的使用

常规组件中的一些组件是对ExtJs组件的封装，在组件的tag属性中可根据ExtJs API

添加更多的属性或事件。详细的属性、方法和事件请参考ExtJs API手册。

7.1. 目录

目录组件的作用是为xwl文件中的组件进行分类，目录组件的名称可以为中文并允许嵌

套使用。

目录组件的使用如下图：

WebBuilder开发手册

目录的使用

7.2. 标签

标签组件的作用是显示文本，可通过设置caption属性来设置原始文本，html属性来设

置html文本。

7.3. 编辑框、数字框和按钮

在webbuilder中，编辑框封装了textEdit、textAreaEdit、passwordEdit、hiddenField和

fileUpload组件，可实现单行文本编辑、多行文本编辑、密码输入、隐藏字段赋值和文件上

传等功能。

默认组件可作为单行的文本框输入；设置inputType属性为textArea可作为多行文本的

输入；设置inputType属性为hidden可作为隐藏字段使用，隐藏字段一般用于赋值并提交使

用；设置inputType属性为file，可作为文件上传组件使用。

数字框组件仅允许输入数字，可设置allowDecimals和decimalPrecision来控制是否允许

输入小数和小数的精度。

按钮用于触发点击事件，可设置onClick事件来编写当点击时执行的JavaScript代码。

caption属性为按钮的标签，iconCls为按钮带的图标样式。

7.4. 菜单及工具条

封装了菜单及工具条的组件，用于条目的选择，是菜单项、工具按钮及其它组件的容器；

菜单工具条内也可内置编辑框、组合框和标签等。

7.4.1. 菜单制作

菜单的创建必须先添加菜单容器组件，然后在菜单容器组件下可以添加菜单选择项，编

辑框、组合框或标签等。

菜单容器下的子菜单项可以多级添加，即在菜单项下可添加不限层次的菜单项。

子菜单项的属性

WebBuilder开发手册

caption：菜单项的标题，[-]表示显示分隔线等同于menuType=separator，[--]表示空条使

菜单项右对齐等同于menuType=fill；

menuType：菜单类型，menuType类型作为组件的菜单类型，separater作为分隔符使用，

fill表示填满中间的空白区，menuButton表示下拉按钮菜单，date表示日期选择菜单，subDate

表示新建日期子菜单选择菜单，color表示颜色选择菜单，subColor表示新建颜色选择子菜

单；

icon：图标文件，通常使用iconCls属性替代；如果使用此属性，需指定iconCls为bmenu；

iconCls：图标的样式类名，iconCls预置了大量的图标，可选择或自定义一种图标类型；

自定义图标类型可通过配置webbuilder/css/实现；

enableToggle：是否允许切换，可在事件onToggle中响应；

group：指定组名，把一组单选的菜单项归为一组；

buttonType：按钮图标类别，仅应用于容器类型innerTool为true，buttonType仅当菜单

容器的innerTool属性为true时设置有效，表示内置标题栏按钮的类型；

7.4.2. 制作面板嵌入式菜单

系统默认创建的菜单是隐藏的，可通过关联容器类组件如panel的tbar或bbar属性来生

成嵌入式菜单。

面板嵌入式菜单是推荐的一种菜单方式，建议使用此类方式生成菜单。

7.4.3. 制作常规菜单

设置菜单容器的autoShow属性为true，即可把菜单作为普通的组件使用，可添加至任

意容器组件下面使用。

7.4.4. 制作内置工具条菜单

内置工具条菜单是指面板类容器标题中内置的工具条。内置工具条菜单的创建方式如

下：

➢ 设置菜单容器的innerTool属性为true；

➢ 设置菜单项的buttonType属性为指定的预置按钮的类型；

➢ 设置菜单项的hint属性为提示文本；

➢ 编写菜单项的onClick事件。

7.5. 日期和时间

日期和时间组件提供了日期和时间的快速选择。日期组件仅提供日期的选择，如果需要

选择时间部分，可以设置日期组件的timeControl属性以绑定时间组件，成为日期时间组件。

组件的getValue()方法，获得日期对象，如果需要获得字符串，可通过

ue().format('Y-m-d')来获得。绑定timeControl的日期组件可通过函数

GetDateTime(dateControl)来获取日期和时间值。

WebBuilder开发手册

7.6. 单选框和复选框

单选框是一组单选按钮的集合，单选框可通过绑定数据源来自动生成。数据源可来自

query组件或指定data属性来。

当数据源来自query时，query的第1个字段为单选框选择项的标签，如存在第2个字

段则为单选框选择项的值，如存在第3个字段则指定选择项是否被选中。

当数据源来自data时，选项条目数据格式为string1,value1,1;string2,value2,0；每个选项

之间用分号分隔；选项属性之间用逗号分隔，第1个属性为标签，第2个属性为值，第3

个属性指定是否选中选择项，后两个属性可选。

通过指定columns属性来指定单选框的列数。

复选框是一组多选按钮的集合，生成方式同单选框。可设置复选框的boxLabel和

inputValue值来生成单个复选框。

7.7. ajax和store组件

7.7.1. ajax组件

ajax组件是对服务器数据异步发送和请求操作的封装。ajax组件的请求地址由url属性

指定，提交的参数由params属性指定。

在WebBuilder中封装了参数的输出和输入操作，参数的输出由属性out指定，参数的

输入由属性in指定。

ajax组件可通过JavaScript代码name()调用，name为ajax组件的名称。

参数输出

当需要对指定的组件提交值时，可通过设置out属性来实现。out属性为需要提交的组

件名称，多个组件之间以逗号分隔。如果out指定的组件为容器，那么该之容器下的所有子

组件的值也将被提交。提交组件的值的类型可由该组件的submitMode属性指定。out属性

和params属性只能使用其中的一项。

参数输入

当ajax请求返回json格式的数据时，可设置in属性来快速赋值。比如返回json数据为：

｛a:’abc’,b:123｝，那么设置in属性为window(包含a和b组件)，将设置a和b组件的值分

别为abc和123。

通过Ajax组件上传文件

Ajax组件既能提交常规数据，也能提交文件的上传。提交文件的上传是通过模拟form

的upload方式实现的，因此需要做一些相关的处理。

➢ 提交的file组件（text编辑框组件inputType=file）必须位于extForm表单组件内；

➢ 设置Ajax组件form属性为extForm组件的名称，isUpload属性设置为true；

➢ 必须设置Ajax组件url属性指向模块body的exceptionType属性为mark；设置此

属性以正常响应onSuccess和onFailure事件；

事件

onSuccess：请求成功之后的事件，可用参数response,options，分别表示响应对象和选

项，比如alert(seText)；

onFailure ：请求失败之后的事件，可用参数response,options，分别表示响应对象和选

WebBuilder开发手册

项，比如alert(seText)；

当responseText返回json格式的字符串时，可以使用方法生成json对象。

7.7.2. store组件

store组件是对ajax组件的二次封装，用于对ajax请求返回特定格式的文本生成数据集。

该数据集可应用于表格和下拉框等组件，为这些组件提供异步的数据源。

store参数由baseParams属性指定，相对于({params:{}})方法的params，前者

参数是静态持久有效，后者参数仅限本次调用有效。WebBuilder提供extGetAllControlsValue

函数来获取指定组件的参数，比如rams=extGetAllControlsValue('window');方法将

把window及其子组件的值赋给store的baseParams对象。

7.8. 下拉框

通过下拉方式进行编辑和选择的组件。下拉框值的获取可通过使用ue()方

法，显示值的获取可通过读取获得。

7.8.1. 通过预置的下拉项使用

设置mapKey属性为指定的键名，比如设置为SEX，即可出现性别下拉项。自定义预置

项的配置信息在数据库表WB_KEY中。

7.8.2. 通过关联store的方式异步引用下拉项

设置store属性为下拉数据源，设置displayField属性为显示字段，valueField属性为值

字段。

7.8.3. 通过关联query的方式同步引用下拉项

设置query属性为下拉数据源，设置displayField属性为显示字段，valueField属性为值

字段。

7.8.4. 类似于google的异步搜索提示下拉项

设置store属性为下拉数据源，设置displayField属性为显示字段，valueField属性为值

字段，设置mode=remote，pageSize=10，typeAhead=false，minChars=0，loadingText=-，在

tag属性中指定queryDelay:200；在store指向的url模块中添加dataProvider组件生成数据源，

dataProvider中可引用参数query；异步搜索的例子可参考用户管理模块中的姓名和员工号码

搜索。

WebBuilder开发手册

7.9. 树组件

用于以条目分层的树状结构形式显示数据。根据树数据源的不同，树的使用可分为同步

和异步两种：

7.9.1. 同步树

通过设置data属性或query属性指定树条目的数据源。

data属性是json表达式，比如[{id:'name',text:'parent',children:[{text:'child',leaf:true}]}]；

可以通过后台java代码动态生成此属性，比如设置为{#myJson#}。

query属性是查询对象，如果设置此属性，树的数据源将根据query的内容自动生成。

query生成树的方式取决于sourceType属性的设置，sourceType默认为multiple。

sourceType为空或multiple，表示fieldCount属性指定的query前fieldCount个字段构成

树，后续字段分别为属性；fieldCount为2时query查询生成的树如下图：

sourceType为simple，表示query中第一个字段是以/分隔的地址来构成树，后续字段分

别为属性；query查询生成的树如下图：

可以生成名称为iconCls的字段如field as "iconCls"来生成图标，生成名称为checked的

字段如field as "checked"来生成带复选框的树。

7.9.2. 异步树

通过设置remoteUrl指定远程树的地址以获取树数据；指定remoteParams以提交参数，

提交参数还可以通过编写onBeforeLoad事件，如：

if (m) m = m;

远程树数据源的生成方式可使用代码动态构建或使用同步树的方式生成。同步树方式的

生成可以通过新建模块，并设置body的createBody属性为false，添加同步树即可生成异步

树所需的数据源。

WebBuilder开发手册

7.10. 表格

以表格的形式显示数据。表达具有丰富的呈现能力，可以自定义各列的输出以及任意的

html输出。根据表格中数据的来源不同，表格的使用分为同步和异步两种。

表格是否分页由属性pageSize指定，pageSize表示每页显示几条记录；设置downloadAll

属性为true，将允许导出所有数据至文本文件或Excel文件。

7.10.1. 同步表格

表格的数据来自于query查询。可以直接把query绑定到表格，来显示query中的数据。

7.10.2. 异步表格

异步表格通过关联store来指定数据源。可以通过以下代码加态加载表格数据：

rams=extGetAllControlsValue('extWindow');

({params:{start:0,limit:30}});

7.10.3. 表格列的定义

表格列的定义使用列容器组件，并在列容器下面添加多个列。

设置列的fieldName为关联的字段名，设置caption为显示的标题。如果需要映射，比

如1显示为男，2显示为女等，可设置mapKey为SEX，自定义的映射信息请在数据库表

WB_KEY中配置。如果列关联的数据为日期类型，可设置type为datetime进行快速格式化。

数字的格式化输出可设置format属性或在render中使用FormatNumber函数格式化。

如果表格可编辑，那么需要设置editor属性为相应的编辑组件，比如text,comboBox等，

编辑组件必须设置autoShow为false；

如果需要显示自定义的html输出，比如指定输出的颜色等，可在renderer中定义自定

义输出函数。

7.10.4. 可编辑表格

通过设置canEdit属性为true并设置columnModel的column的editor属性，即可生成可

编辑的表格，具体步骤如下：

➢ 添加所有列关联的编辑控件，比如text，comboBox等，并设置这些组件的autoShow属

性为false；

➢ 添加columnModel组件，并在columnModel组件下添加column组件，设置column相

关属性及editor属性；

➢ 添加grid组件，设置canEdit为true，设置columnModel为上述添加的columnModel组

件；

➢ 如果需要提交所有增删改的值，设置submitMode为modified即可；

WebBuilder开发手册

7.11. 组合组件

系统提供了一些组合组件，这些组合组件均由常规组件构成。

7.11.1. DualList双重列表

用于在两个列表之间选择条目的组件。

组件的使用

通过设置query属性来指定列表数据源，查询结果中的第一个字段为文本，如有第二个

字段则作为值。DualList中的值也可通过JavaScript代码动态加载。

7.11.2. TreeList树列表

用于以树状形式结合列表框选择条目的组合组件。

组件的使用

通过设置query属性来指定树和列表的数据源；如果hasValue属性为true，那么最后两

个字段构成列表，除此之外的字段构成树；如果hasValue属性为false，那么最后一个字段

构成列表，除此之外的字段构成树。构成列表的方式请参考DualList双重列表，构成树的方

式请参考Tree树。

7.11.3. ComboTree下拉树

可通过下拉方式进行选择的树。是Combo和Tree组件的组合。

7.12. 图表

图表组件是对fusioncharts组件的封装，由图表容器和图表内容构成。图表容器是显示

图表内容的组件，图表内容用于生成xml格式图表数据提供给图表容器。图表容器可直接

添加在ext容器组件下面。

7.12.1. Chart图表容器

是图表内容的容器，显示图表的组件。

图表的生成可分为同步和异步两种方式。

➢ 同步生成图表

设置type属性为指定的图表类型，chartContent属性为图表内容；

➢ 异步生成图表

设置type属性为指定的图表类型，设置autoShow属性为false，通过ajax组件获取远程

图表内容数据，在ajax组件onSuccess事件中添加aXML(seText);

();显示图表。

WebBuilder开发手册

7.12.2. ChartContent图表内容

是Chart图表容器组件的图表内容描述。图表内容是以xml语言描述的图表显示的方式

和数据。

图表的生成既可以通过Query组件直接从数据库中提取数据生成，也可由后台程序通过

代码动态生成。

通过代码生成的图表内容xml可直接设置tagXML属性，比如设置为{#myChartXML#}；

tagXML可以指定所有图表内容数据，也可以作为query生成图表后的内容补充。

通过query生成图表，有如下三种方式：

➢ 直接通过query生成单一的图表：

query的第1个字段为X轴，第二个字段为Y轴；如果多于2个字段其余字段则生成为

属性，这种情况必须设置simpleSet属性为true；

➢ 通过query生成多个图例的图表：

首先必须设置图表容器的type属性为多图例的图表容器，图表类别中以MS开头的图

表类型，比如MSColumn2D；

其次设置simpleSet为false（query多余2个字段自动设置为false），itemFieldCount属

性，表示query中各字段的对各图例的分配，以逗号分隔；比如select ROLENAME as "label",

1 as "value1", 2 as "value2" from wb_user生成的数据源，若设置itemFieldCount为1,1,1，那

么表示共生成3个片段，各个片段各占有1个字段；

再次设置itemProperty属性，表示各个片段的属性，比如设置为

{},{seriesName='test1'},{seriesName='test2'}，通过上述设置生成的xml如下：

图表内容xml片断

➢ 通过多个query生成多个图例的图表：

设置query属性为多个query，query之间用逗号分隔；每个query各生成一个片段的xml。

7.13. 辅助组件

WebBuilder提供了一些辅助组件，这些组件有助于系统的快速开发。

WebBuilder开发手册

7.13.1. mail电子邮件

用于发送电子邮件的组件。该组件可以配合前台ajax组件使用，ajax组件的url可以设

置为包含该mail电子邮件组件的xwl文件来发送电子邮件。

7.13.2. action动作组件

动作组件是预定义的行为，可绑定到按钮、菜单、工具按钮等组件上。动作可设置标题、

图表、提示、执行的JavaScript脚本信息。

7.13.3. excepter异常触发器

异常触发器用于生成服务器端的异常，相当于使用java代码throw new Exception。满足

一定的条件的异常才被触发。

异常触发条件由nameList、condition和valueList指定。nameList表示参数名称列表，

这些参数可以是外部参数（request的parameters）或内部参数（request的attributes）。condition

是比较符，默认为notExists不存在参数时触发；valueList为比较符的右值，适用于condition

为“=”、“>”、“<”、“<>”、“>=”、“<=”时的右值指定。message属性指定显示的异常消息

内容。

7.13.4. validator验证器

用于验证客户端组件的值是否非法。validator可直接应用于客户端组件比如编辑框的

vtype属性，效果等同于在编辑框的validator属性中编写JavaScript验证脚本。

7.13.5. defaultValue默认值

默认值是当指定名称的参数不存在时，生成默认的内部参数。参数的名称由key属性指

定，值由value属性指定。allowBlank指定参数是否允许为空，如果参数存在且值为空时，

系统依据此属性决定是否设置默认值。如果initialize设置为true，无论参数存在与否，都将

设置为默认值。

7.13.6. keyMap按键映射

用于在特定范围内按指定的键触发运行JavaScript脚本。key属性指定所按的键，是否

同时按CTRL、ALT和SHIFT键由属性ctrl、alt和shift指定。scope属性指定按键触发的范

围，比如设置为panel，那么在panel内的按键都将触发。运行的JavaScript脚本在onKeyPress

事件中设置。

WebBuilder开发手册

7.14. actionFile文件组件

使用【标准】->【文件】组件能快速调用指定的文件。这些被调用的文件可以是xwl

文件、jsp文件、html文件等。调用的文件名称由fileName属性指定。

使用该组件有如下一些应用：

➢ 引用公共库

可以把一些公共常用的组件进行封装放在xwl文件中（xwl文件body的createBody属

性设置为false）。这些公共组件可以是query、extWindow、method等。比如可以把常用

的extWindow或query放在单独的xwl文件中作为公共库，使用的时候只要使用文件组

件进行引用即可。

➢ 访问受保护的文件

通过文件组件可以访问受保护的文件，比如访问WEB-INF目录下的jsp文件等。

7.15. html组件的使用

标准的html组件可以很方便地添加在ext容器组件下面。可以通过2种方式实现在ext

容器下添加html组件：

7.15.1. 直接添加

在ext容器下直接添加html组件，使用此类方式只能添加一个html子组件。如需添加

多个html组件，需要通过添加panel组件来适配。

html组件添加到ext容器组件内

7.15.2. 通过面板的content属性添加

面板的content属性允许把div对象嵌入在面板内。可以通过把需要添加的html组件或

html代码放到div内，再把div关联到面板的content属性来实现。

WebBuilder开发手册

通过设置panel的content来添加html

8. 后台Java与前台JavaScript的使用

8.1. 调用后台Java类方法

在WebBuilder中可通过method方法组件来实现对java类方法的调用。

通过Method组件调用方法的原型如下：

public void myMethod(HttpServletRequest request, HttpServletResponse response) throws

Exception {

}

request和response分别为请求和响应对象。

8.1.1. Request使用

可以通过ameter或ribute获取参数，通过ribute设置

参数；比如：

ameter("controlName")

ribute("")

(ResultSet) ribute(queryName);将获得模块内query组件的ResultSet对象；

可通过ribute("myQuery", resultSet);动态生成Query对象；

比如在方法内设置ribute("sql","select * from table")，然后在设计器中可以引用

sql中，比如设置query的sql属性为{#sql#}；

8.1.2. Response使用

访问response，以直接设置输出的内容，比如：

();

putStream().write(data);

WebBuilder开发手册

8.1.3. method组件的属性

methodName：调用Java方法的名称，方法需引用参数HttpServletRequest和

HttpServletResponse，如od。

8.1.4. 示例

通过后台java代码读取变量javaVar，并赋值给前台javaScript变量jsVar。设置body的

methodName属性为；编写Java类MyClass：

public void setVar(HttpServletRequest request, HttpServletResponse response){

String javaVar = "abc";

ribute("var", javaVar);

}

设置body的extHeaderScript为：var jsVar='{#var#}';即通过代码把java变量的值赋值给前台

javaScript变量。

8.2. 编写JavaScript和HTML脚本

页面JavaScript的编写可通过脚本组件和body的script系例属性的设置来实现。脚本用

于运行期间对组件进行访问。组件对象可通过(name)来获得，当初始化完成整个

页面后，系统将创建组件对象变量，ext组件可通过名称直接访问组件。html组件对象可通

过方法Get(‘name’)来访问。

8.2.1.使用脚本组件

脚本组件用于添加JavaScript脚本，组件内的脚本分为6个片段，分为header、footer、

extFirst、extLast、extHeader和extFooter，通过设置各个属性可灵活输出至模块的各个部分。

以panel组件下添加extScript组件为例，说明示意图如下：

WebBuilder开发手册

脚本引用示意图

ExtScript组件既可以编写脚本自定义组件的输出，也可以编写自定义函数。通常可以编写

body的headerScript,footerScript,extFirstScript,extLastScript属性以替代该组件的部分功能。

如果需要通过后台Java代码动态生成组件，可以采用如下的方法：

1、设置body的method属性为Java方法，并输出组件客户端脚本至变量，比如

ribute("myJs","myScript")；

2、设置ExtScript组件的extHeader属性为{#myJs#}即可实现上述功能。

脚本组件的属性

header：系统将直接输出脚本至javaScript脚本头；

footer：系统将直接输出脚本至javaScript脚本尾；

extHeader：系统将直接输出该脚本至当前块头ext脚本中；

extFooter：系统将直接输出该脚本至当前块尾ext脚本中；

extFirst：系统将直接输出该脚本至ext起始脚本中；

extLast：系统将直接输出该脚本至ext末尾脚本中；

的script属性

在body节点中定义了headerScript、footerScript、extHeaderScript、extFooterScript、

extFirstScript和extLastScript属性，可以在这些属性中编写JavaScript脚本。body的script

属性定义同脚本组件属性的定义区别在于前者更上一层是根脚本的定义。

8.2.3.脚本的直接输出

使用【标准】->【脚本】组件，可以输出任意的文本信息至客户端，这些信息可以是

html、javaScript、xml、json或其他文本等。

常用属性：

header：片断页眉脚本，系统将直接输出该脚本至客户端；

footer：片断页脚脚本，系统将直接输出该脚本至客户端；

header和footer的区别在于header先于子组件的输出，footer晚于子组件的输出。

8.2.4.系统提供的实用JavaScript函数

WebBuilder提供一些实用的JavaScript函数，这些函数定义在webbuilder/script/

文件中。部分函数功能描述如下：

➢ Get(id)

通过dom的id获得dom对象。

➢ FormatNumber(num, pattern)

用于格式化数字，num为需要格式化的数字，pattern为样式。

➢ IsEmpty(val)

判断变量val是否为空、null或未定义。

➢ extGetAllControlsValue(controlList)

根据controlList指定的组件列表名称及各组件的submitMode属性，生成json对象的值对象。

WebBuilder开发手册

controlList指定的多个组件名称使用逗号分隔。使用该方法后将返回controlList列表中的所

有组件及其子组件的值。

➢ extSetAllControlsValue(controlList, jsonText, isReset)

把jsonText中定义的值设置到controlList指定的对象中。jsonText中的名称是组件的名称，

值为组件的值。isReset表示是否重置组件中的值。

➢ extResetAllControlsValue(controlList)

重置controlList指定的所有组件及其子组件的值。

➢ extVerifyAllControls(controlList)

验证controlList指定的所有组件及其子组件的值是否合法，如果合法返回true，否则返回

false。

➢ extGetRadioItemsIndex(control)

获取control所指的radio对象选择条目的索引值。

➢ extSetRadioItemsIndex(control, index)

根据index选中radio对象的指定条目。

➢ extShowError(message, handler)

显示错误信息。handler是点击确定按钮后的回调函数。

➢ extShowExcept (message, handler)

显示异常信息，异常信息由seText返回。handler是点击确定按钮后的回调函

数。

➢ extShowMessage (message, handler)

显示提示信息。handler是点击确定按钮后的回调函数。

➢ extShowInfo (message, handler)

显示消息，无信息图标。handler是点击确定按钮后的回调函数。

➢ extShowWarning (message, handler)

显示警告信息。handler是点击确定按钮后的回调函数。

➢ extConfirm(message, handler)

显示确认提示信息。handler是点击确定按钮后的回调函数。

➢ extInsertFromControl(grid, controlList, index)

把controlList指定的所有组件及子组件的值插入到grid中。index为插入的位置，null为添

加到表格末尾，-1为当前表格记录位置。

➢ extUpdateFromControl(grid, controlList)

把controlList指定的所有组件及子组件的值更新到grid当前选择的记录中。

------------------------------------------------------------------------------------------------------------

详细信息请参考WebBuilder集成开发环境的帮助文档

ExtJs的开发请参考ExtJs API开发手册

更多信息请访问：

WebBuilder开发手册

发布评论取消回复

最近发表

相关推荐

标签列表

WebBuilder开发手册

发布评论 取消回复

最近发表

相关推荐

标签列表

发布评论取消回复