Web应用开发的利器 – WebBuilder 6.5正式版本发布 

        2012年9月，WebBuilder 6.5 正式版本终于发布。新版本的 WebBuilder 使用了多项最新的技术，使开发 Web 应用的开发更快捷和简单。 

        WebBuilder是一款跨平台、数据库和浏览器的可视化Web应用开发平台。WebBuilder使用了多项最新的技术，使Web应用的开发更快捷和简单。 

        作为一款高效的Web开发工具，WebBuilder的特色是: 

        .基于浏览器的集成开发环境. 

        .丰富的组件库和框架. 

        .开发应用简单快速. 

        .高效率和高稳定性. 

        .跨平台、数据库和浏览器. 

        .服务器端的脚本支持. 

        .智能的数据库访问机制. 

        使用WebBuilder可开发ERP、OA、CRM、HR、MIS以及电信、银行、政府、企业等各行业的行业应用系统，帮助信息化管理系统的快速构建。完善的基础架构，具有应用系统必须的完整功能，使系统的开发仅需致力于业务的开发。使用WebBuilder可快速开发出功能强大的各种企业级应用系统，也可以基于应用系统平台做深度的二次开发。 

        您可以到 在线使用或下载到本地使用，软件开源基于GPL协议授权。 

        WebBuilder 教程 

        WebBuilder提供了方便快捷的组件，便于直接使用，只需要通过设定组件属性即可完成

        设置，不需进行代码编写。同时对于窗体提供可视化设计。 

        主要组件包括: 

        1 常用组件 

        图表容器 默认值 

        图表内容 2 辅助组件 

        下拉树木 验证器 

        树列表 异常触发器 

        动作 双重列表 

        3 标准组件 

        从左到右边:文件，内置框架，DIV块，表单，脚本，标签，编辑框，按钮，图像，列表，

        flash,链接，定时器 

        对以上组件在详解中如有没有描述的 ，请参考Extjs API中组件信息。 

        第一章 Body文档体 

        Body 文档体是对整个应用常规信息的封装，用于描述整个应用的基本属性。 

        第二章 ViewPort显示容器 

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

        组件的使用: 

        该组件仅作为容器使用，通常情况下需要全屏显示的应用，可使用该组件作为顶层容器。 可通过设置该组件layout属性来设置页面的各种布局。 

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

        第三章 Panel面板 面板是最常用的容器，用于构建面向应用的用户界面; 

        组件的使用: 

        面板的作用非常广泛:可作为组件的容器;可以作为布局容器使用;可以作为装饰或功能性

        地使用，比如在tbar添加工具条等。 

        第四章 面板布局 

        4.1 布局概述 

        Panel 的另外主要用途是利用其layout属性进行完美布局。 

        所谓布局就是指容器组件中子元素的分布、排列组合方式。所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。 

        Panel组件包含一个layout 及layoutConfig 配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息，如果没有指定容器组件的layout 则默认会使用ContainerLayout 作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig 配置，有的则不需要layoutConfig 配置。 

        viewport 是一个容器组件，我们使用viewport 指定 在viewport创建了两个面板Panel，

        该面板使用Column 布局。该面板的子元素是两个面板，这两个面板都包含了一个与列布局相关的配置参数属性Width，他们的值都是50%，也就是每一个面板占一半的宽度。执行上面的程序生成如下图所示的结果: 

        一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、 FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的 时候，不能给这些容器组件再指定另外的布局。 

        常用的布局有border、column、fit、form、card、tabel等布局，下面我们分别对这几种布局作简单的介绍。 

        4.2 Border 区域布局 

        Border 布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。 

        4.2 Column列布局 

        Column 列布局由Ext.layout.ColumnLayout 类定义，名称为column。列布局把整个容器 组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用width 来指定子元素所占的列宽度，可以使用百分比的形式指定列宽度，或者使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。  

        设定各组件的属性:  

        4.3 Fit布局 

        Fit布局由Ext.layout.fitLayout 类定义，名称为fit。fit布局把整个容器 组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用width 来指定子元素所占的列宽度，可以使用百分比的形式指定列宽度，或者使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。  

        4.4 Form布局 

        Form 布局由类Ext.layout.FormLayout 定义，名称为form，是一种专门用于管理表单中 输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。   

        4.5 Accordion布局 

        Accordion 布局由类Ext.layout.Accordion 定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。  

        4.6 Table布局及其它布局 

        Table 布局由类Ext.layout.TableLayout 定义，名称为table，该布局负责把容器中的子元素按照类似普通html 标签.  

        上面创建了一个父容器组件，指定使用Table 布局，layoutConfig 使用columns 指定父容器分成3 列，子元素中使用rowspan 或colspan 来指定子元素所横跨的单元格数。

        这些布局主要作为其它布局的基类使用，一般情况下我们不会在应用中直接使用。另外，我们也可以继承10 种布局类的一种，来实现自定义的布局。 

        第五章 Window窗口 可以移动和交互的界面显示容器。 

        组件的使用: 

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

        如果要自动显示窗口，设置autoShow属性为true;如果设置为非对话框，设置dialog为false; 窗口为对话框时，可编写onOk事件来表示点击确定按钮执行的事件。 可以在窗口的onHide事件使用extResetAllControlsValue("window")来重置窗口内组件的值。 

        第六章 对话框窗口 

        由于传统使用alert、confirm 等方法产生的对话框非常古板，不好看。因此，ExtJS 提供了一套非常漂亮的对话框，可以使用这些对话框代替传统的alert、confirm 等，实现华丽的应用程序界面。 

        Ext 的对话框都封装在Ext.MessageBox 类，该类还有一个简写形式即Ext.Msg，可以直 接通过Ext.MessageBox 或Ext.Msg 来直接调用相应的对话框方法来显示Ext 对话框. 

        以下各对话框的方法的示例可以在 button的onClick事件中运行。 

        6.1 alert方法  

        6.2 confirm方法  

        6.3 prompt 方法  

        6.4 show方法 

        Ext.MessageBox.show()方法 功能很强大，采用config配置形式，比前面的方法使用更方便。 参数很多，在此列举最常用的配置参数: 

        1.animEl:对话框弹出和关闭时的动画效果，比如设置为“id1”，则从id1处弹出并产生动画，收缩则相反; 

        2.buttons:弹出框按钮的设置，主要有以下几种:  

        6.5 进度条的使用 

        Ext.MessageBox.show()中的进度条的使用 

        首先必须知道例外两个方法 Ext.MessageBox.hide() 和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数，看名字就知道意思)， 

        注意value为0-1之间的数，表示进度条的进度. 

        第一种:(通过进度的大小控制进度，满进度为1)  

        第二种:(通过固定时间控制进度加载)  

        1.interval:进度的频率 

        2.duration:执行进度的持续时间，超过这个时间后，interval失效，不再产生进度效果，但进度狂也不会消失。 

        3.fn:duration的时间到后执行的函数  

        第七章 ExtForm表单 

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

        组件的使用: 

        通常情况下在WebBuilder内对于数据的提交可使用Ajax组件，因此使用表单组件提交数据不常用。例外情况是提交带有上传文件的数据必须采用ExtForm表单组件。 上传文件时，需要在表单组件下添加text编辑框组件，并设置text组件的inputType属性为file;设置Ajax组件form属性为ExtForm组件名称，设置isUpload为true，设置Ajax指向的后台处理模块body的ExceptionType属性为mark;然后调用Ajax控件同名的函数，如ajax()来提交表单内所有的数据。 

        属性和事件: 无个性属性和事件 ，不做描述。相关属性查看其它组件。  

        第八章 Tab页 

        分页显示内容的容器。 

        组件的使用: 

        通过在Tab页组件下添加panel面板组件，来实现Tab控件的各页，每个panel即为每个页。必须设置panel组件的caption属性来设置各页的标题。  

        1 增加tab组件，并在tab下 

        2 设定panel 的属性 caption :测试页面  

        2 动态增加页面  

        1 增加tab组件， 其他设置 如实例1， 2 增加extButton组件  

        第九章 Tree树 

        用于以条目分层的树状结构形式显示数据。 

        组件的使用: 

        根据树数据源的不同，树的使用可分为同步和异步两种: 

        1、同步树: 

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

        2、异步树: 

        通过设置remoteUrl指定远程树的地址以获取树数据;指定remoteParams以提交参数，提交参数还可以通过编写onBeforeLoad事件， 

        远程树数据源的生成方式可使用代码动态构建或使用同步树的方式生成。同步树方式的生成可以通过新建模块，并设置body的createBody属性为false，添加同步树即可生成异步树所需的数据源。  

        设置tree 组件 width属性:200 运行结果如左图 

        第十章 Menu菜单工具条和MenuItem菜单工具条项 一:Menu菜单工具条 

        集菜单和工具条的容器。封装了菜单及工具条的组件，用于条目的选择，是菜单项、工具按钮及其它组件的容器;菜单工具条内也可内置编辑框、组合框和按钮等。 

        组件的使用: 

        Menu组件的应用比较广泛，通常有如下4种常见的用法: 

        1、嵌入至panel组件，作为菜单使用: 

        设置panel的tbar或bbar属性为menu即可; 

        2、嵌入panel组件的标题栏，作为内置工具条: 

        设置menu的innerTool属性为true，menu组件内menuItem的buttonType属性为指定按钮类型，panel的tools属性为menu即可; 

        3、直接使用; 

        设置autoShow属性为true即可; 

        4、混合使用: 

        menu内可添置任何组件，比如在menu组件内添加text组件和按钮作地址栏等，参照示例webbuilder/application/system/explorer.xwl内addressBar组件。 

        在menu内添加图片，请先添加panel组件，然后再在panel组件内添加image图片组件。  

        二:MenuItem菜单工具条项 

        用于条目的选择，是菜单工具条组件的子项。 

        组件的使用: 

        可在Menu菜单工具条组件容器下添加该组件来实现菜单项或工具按钮，子菜单的添加不受层级限制，可任意添加多级子菜单。 

        MenuItem即可作为子菜单也可作为工具条按钮，如果MenuItem组件内又包含MenuItem组件那么作为子菜单使用，否则作为工具条按钮使用。 

        第十一章 日期时间组件 

        日期时间组件 主要包括:Date日期和Time时间 。 

        一: Date日期 

        提供快速的日期选择。 

        组件的使用: 

        日期组件仅提供日期的选择，如果需要选择日期和时间，可以设置timeControl以绑定时间组件，成为日期时间组件。绑定时间组件后，仅通过Ajax组件out属性指定的提交对象将自动包含日期和时间。  

        二: Time时间 

        快速的时间选择  

        第十二章 数据操作组件 

        数据操作组件主要是针对数据库操作集成的多个组件,主要包括: 

        query查询、store数据集 DbUpdater数据更新 、DataProvider数据生成器、Grid表格、ColumnModel列容器、Column表格列 

        一:Query查询 

        访问数据库的组件，提供通过sql语句对数据库表、视图、存储过程和函数等的访问能力。 

        组件的使用: 

        1、设置sql属性为sql语句; 

        2、设置jndi属性为数据库连接jndi，如果为空则默认取自sys.jndi; 

        3、如果sql语为update类语句，比如insert，则设置type属性为update; 

        属性: 

        sql:指定需要执行的sql语句，该sql可以是标准sql，存储过程或函数调用等; 

        在sql语句中既可以使用变量也可以使用jdbc参数。变量是指以{@name@}引用的名为name的值，参数是指以{?name?}引用的名为name的值;name指向的值存在于request对象的parameter或attribute中。 

        jndi:指定数据源jndi，默认采用main.xml中jndi指定的数据源; 

        type:sql的类别，可为query,update,call;query表示查询(select等);update表示更新(delete,insert,update等);call表示存储过程和函数等; 

        fastMode:数据源生成是否采用快速模式。快速模式数据源只能访问一次，默认为true，如果需要多次访问设置为false; 

        loadData:是否自动获取query第一行各字段的值，可通过query.fieldName来读取值，默认为false;比如设置某个属性为{#query.TITLE#}; 

        transaction:指定采用事务处理的方法，以保护数据的完整性，可为none,start,commit，分别表示不操作事务，起动事务，提交事务。默认为commit;如果设置为提交事务，那么之前的代码或组件必须已经启动事务; 

        isolation:指定事务隔离的级别。 

        dbType:当main.xml中配置的dbType等于此值时，该Query才运行。 

        SQL参数: 

        sql参数分为输入参数和输出参数。 

        输入参数: 

        输入参数的格式为:{?name?}或{?type.name?} 

        系统能根据对象的类型自动指定输入类型，也可以在变量名前加类型的方式显式地强制指定类型以转换不同类型的数据，比如{?integer.textEdit?}表示把前台传来的textEdit控件的值转换成整数，类似地还有: 

        VARCHAR:表示字符串; 

        INTEGER:表示整数; 

        SMALLINT:表示短整数; 

        BIGINT:表示长整数; 

        FLOAT:表示浮点数; 

        DOUBLE:表示双精度浮点数; 

        TIMESTAMP:表示日期时间类型的时间戳; 

        DATE:表示日期; 

        TIME:表示时间; 

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

        输出参数: 

        输出参数的格式为:{?@type.name?}或{?@type.subType.name?}，其中subType为子类型，

        比如长度等。 

        输出参数一般使用在存储过程或函数的调用中。 

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

        用名称或编号来指定类型。   

        具体的类型和编号对应如下(可参考jdbc):  

        二:Store数据集 

        用于为组件提供数据源，Store提供了对json、xml和数组数据的访问能力。 

        组件的使用: 

        1、设置url属性为生成数据源的有效url地址，url指向的数据源可以是json、xml或数组; 

        数据源不能包含多余的html或其它标记字符。可通过设置指向数据源模块body的createBody属性为false来实现。 

        2、如果数据源未包含元数据信息，请设置fields属性，以定义数据源的元数据信息; 3、如需提交数据至后台，可设置baseParams属性; 

        4、可通过代码的方式动态装入数据集:  

        三:DbUpdater数据更新 

        对数据库数据进行更新的组件。DbUpdater组件提供了对一批数据进行处理的能力，能方便地对数据执行插入、删除或更新操作。 

        四:DataProvider数据生成器 

        从数据库中提取数据并生成指定格式的数据。可为一些组件，比如grid、combo、image等提供数据源。  

        dbType:当main.xml中配置的dbType等于此值时，该DataProvider才运行。 

        五:Grid表格 

        以表格的形式显示数据。表达具有丰富的呈现能力，可以自定义各列的输出以及任意的html输出。表格中对列的定义需要使用列容器组件。 

        组件的使用: 

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

        1、同步表格: 

        通过设置data或query属性指定表格的数据源，设置columnsModel属性指定表格的列定义，设置pageSize指定每页的记录数; 

        2、异步表格: 

        通过设置store属性指定表格的数据源，设置columnsModel属性指定表格的列定义，设置pageSize指定每页的记录数;  

        可编辑的表格: 

        通过设置canEdit属性为true并设置columnModel的column的editor属性，即可生成可编辑的表格，具体步骤如下: 

        1、添加所有列编辑关联必须的编辑控件，比如text，comboBox等，并设置这些组件的autoShow属性为false; 

        2、添加columnModel组件，并在columnModel组件下添加column组件，设置column相关属性及editor属性(上述添加的编辑控件，此项必填); 

        3、添加grid组件，设置canEdit为true，设置columnModel为上述添加的columnModel组件; 

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

        值的提交: 

        当采用Ajax组件通过设置out属性提交该组件的值时，根据submitMode属性的不同，提交到服务器的值也不同，submitMode的各种模式下的值提交说明如下: 

        select:表示json表达式描述的所有选择的行的值; 

        modified:表示json表达式描述的所有添加、删除或修改的行的值，此属性仅适用于可编辑的表格; 

        all:表示json表达式描述的所有行的值; 

        六:ColumnModel列容器、Column表格列 

        一:ColumnModel列容器 

        定义表格的列的容器。列容器可放置column表格列。 

        组件的使用: 

        列容器仅应用于表格的columnsModel属性，必须添加column表格列以定义各列的信息。   

        二:Column表格列 

        定义表格中的列。 

        组件的使用: 

        设置fieldName为关联的字段名，设置caption为显示的标题。如果需要映射，比如1显示为男，2显示为女等，可设置mapKey为SEX，自定义的映射信息请在数据库表WB_KEY中配置。 

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

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