WebBuilder开发笔记

淩亂°似流年 2022-09-03 02:30 128阅读 0赞

## WebBuilder开发笔记记录 ##

*  ## 基础知识 ##

### WebBuilder快捷键 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70][]

###  控件配置 ###

> 双击左侧控件箱中的控件将打开该控件，控件编辑器由General、Configs和Events 3个标签页组成，分别代表控件的常规属性、配置项属性和事件。

**General标签页：**

>  *  **autoCreate：**指定控件默认是否自动创建实例，有效值为true或false。在设计期间可以设置控件的createInstance来显式指定控件是否创建实例。
>  *  **autoNames：**JSON表达式，用于为新添加的子控件设置itemId属性。JSON中每一项的键为上级控件名，值为itemId，键名为any表明任意上级控件均适用该itemId。如配置toolbar的autoNames属性为\{"tree":"tbar","grid":"tbar"\}表明toolbar控件添加到tree或grid下时，itemId自动重名称为tbar。
>  *  **class：**控件关联的继承自com.wb.controls.Control的子类名称。
>  *  **container：**指定控件是否为容器控件，有效值为true或false。容器控件允许添加子控件。
>  *  **design：**指定控件是否可以被布局设计器设计，有效值为true或false。
>  *  **designXtype：**在布局设计器中设计时将使用该值指定的xtype替代控件的xtype值。
>  *  **directOutput：**JSON表达式，语法为\{name:string, values:array\}。当name指定的属性为values数组中的值时，直接输出name指定属性的脚本。
>  *  **handleText：**指定布局设计器底部工具条标签框内输入文本时设置控件的相关属性，语法为name=method，name为配置项名称，method为运行期设置该配置项值使用的方法。如panel可设置title=setTitle表示在标签框内输入文本时，使用panel.setTitle方法设置title属性。
>  *  **height：**在布局设计器中添加该控件时使用的默认高度。
>  *  **hintType：**用于自动完成代码时使用的类全名。
>  *  **iconCls：**控件使用的图标样式。
>  *  **media：**JSON表达式，语法为\{name:string, xtypeName:string\}，当输出子控件时，输出至名称为name对象的items属性下。如果设置xtypeName，name指定的对象将添加xtype配置项，其值为xtypeName配置项的值。
>  *  **render：**指定控件是否呈现到body，有效值为true或false。
>  *  **root：**控件是否为根控件，已经定义的根控件为module和folder。
>  *  **tag：**控件的附加信息对象。对象的lib属性指定使用哪个类库，1为ExtJS，2为Touch，3为Bootstrap。
>  *  **type：**如果控件为前端控件时指定的类全名。
>  *  **width：**在布局设计器中添加该控件时使用的默认宽度。
>  *  **xtype：**如果控件为前端控件时的“xtype”属性。

**Configs和Events标签页：**

>  *  **bind：**绑定到某一对象，对象使用字符串引用。在参数对象中可以指定controls属性，以指定绑定到哪些控件。如\{"controls":\["store"\]\}表示绑定到store。如果绑定的控件为容器，可以指定容器下首个控件类型，例如：\{"controls":\["array=toolbar"\]\}。
>  *  **color：**颜色类型，使用颜色编辑器编辑该值。
>  *  **enum：**枚举值类型。在参数对象中可以指定list属性，以指定下拉列表。如\{"list":\["center","north","south","east","west"\]\}。
>  *  **exp：**表达式类型，可以为数字或任意有效的表达式。
>  *  **expBind：**绑定到某一对象，对象使用表达式引用。expBind用法同bind类型。
>  *  **expBool：**布尔类型。
>  *  **expJson：**JSON对象类型。
>  *  **glyph：**“文字图标”类型。
>  *  **html：**html类型，使用html编辑器编辑该值。
>  *  **iconCls：**图标样式类型。
>  *  **jndi：**数据库连接jndi类型。
>  *  **js：**JavaScript脚本类型。在参数对象中可以指定params属性，以指定引用的参数列表。如\{"params":\["panel","options"\]\}。
>  *  **sql：**数据库SQL脚本类型。
>  *  **ss：**服务器端脚本类型。
>  *  **string：**字符串类型。
>  *  **text：**文本类型，可编辑多行字符串。
>  *  **url：**web url类型。
>  *  **urlList：**web url列表类型，可以编辑多个url。

**其他参数设置：**

>  *  **bold：**名称是否以粗体显示，有效值为true或false。  
>  *  **hidden：**输出到客户端脚本时是否隐藏该属性，有效值为true或false。
>  *  **media：**指定配置项或事件是否输出到media对象中，有效值为true或false。
>  *  **rename：**输出到客户端时把属性名称更改为该值。
>  *  **value：**属性的默认值。

### 菜单和工具条功能说明： ###

>  *  **添加控件：**在当前目录下添加新的控件。
>  *  **添加目录：**在当前目录下添加新的子目录。
>  *  **打开控件：**打开选择的控件，并在工作区中展示。
>  *  **删除控件：**删除选择的控件，如果选择的是目录，将删除目录及其包含的所有控件。
>  *  **复制控件：**复制选择的控件为新的控件。
>  *  **修改目录名称：**修改选择的目录名称。
>  *  **关闭全部：**关闭所有打开的控件标签页。
>  *  **保存当前：**保存当前编辑的控件。
>  *  **保存全部：**保存所有已经被修改的控件。
>  *  **添加条目：**在当前打开控件的当前标签页列表中添加新的条目。
>  *  **修改条目：**修改当前打开控件的当前标签页中选择条目的属性。
>  *  **删除条目：**删除当前打开控件的当前标签页中选择的条目。
>  *  **复制条目：**复制当前打开控件的Configs和Events的所有条目。
>  *  **粘贴条目：**粘贴复制的条目至当前控件的Configs和Events。
>  *  **（拖动控件）：**调用控件的位置或所属的目录。

*  ## 构建用户界面 ##

### 界面的布局方式： ###

**absolute:绝对位置布局**

> 容器内的子控件通过指定x和y属性来定位其相对容器的坐标位置。该布局可以通过IDE“布局设计器”来设计，可以可视化地设置子控件的位置和大小。
> 
> 详细信息请参考ExtJS文档：Ext.layout.container.Absolute

**accordion：折叠布局**

> 通过折叠子控件来设置布局，该布局每次仅展开一个子控件，对其它控件折叠。该布局添加的子控件通常为容器，比如panel。设置子控件的title属性为子项标题，iconCls为子项图标。
> 
> 详细信息请参考ExtJS文档：Ext.layout.container.Accordion

**anchor：描定布局**

> 子控件锚定相对于容器控件的位置和大小。如果容器大小变动，所有锚定的子控件会根据锚定规则自动设置位置和大小。
> 
> 详细信息请参考ExtJS文档：Ext.layout.container.Anchor

**auto:自动布局**

> 当容器控件不指定layout属性时默认使用的布局方式，该布局不提供特定的控件布局方式。
> 
> 详细信息请参考ExtJS文档：Ext.layout.container.Auto

**border:边界布局**

> 把容器控件划分为东、南、西、北和中间5个区域。容器控件可以添加单个或多个子控件，并对应到容器中指定的区域。子控件所在的区域由子控件的region属性指定，值可以分别为east，south，west，north和center。其中中间区域为必选项，即容器控件的子控件中必须有一个区域位于中间区域（region属性为center）。设置子控件的split属性为true，可以自动生成分割条用于调整区域大小。
> 
> 详细信息请参考ExtJS文档：Ext.layout.container.Border

**card:卡片布局**

> 把所有子控件作为卡片，每次仅显示一张卡片，其他卡片都隐藏。该类布局很适合作为向导界面，或应用于需要动态切换界面的场景。该布局添加的子控件通常为容器控件，比如container或panel等。
> 
> 详细信息请参考ExtJS文档：Ext.layout.container.Card

**center:居中布局**

> 把首个子控件水平垂直居中显示在容器中。子控件的width和height属性可以为数值或百分比。
> 
> 详细信息请参考ExtJS文档：Ext.ux.layout.Center

**column:列布局**

> 把子控件按列的方式进行布局。子控件通过设置columnWidth属性来设置列宽度，如果子控件无该属性可以在tagConfigs属性中指定。
> 
> 详细信息请参考ExtJS文档：Ext.layout.container.Column

**fit:适配布局**

> 把首个子控件布满整个容器控件。使用该布局的容器只能包含单个控件，如果包含多个控件只有首个控件被展现。
> 
> 详细信息请参考ExtJS文档：Ext.layout.container.Fit

**form:表单布局**

> 对所有子控件按表单样式进行布局。表单样式通常是每个子控件占一行，并拉伸到窗口宽度。
> 
> 详细信息请参考ExtJS文档：Ext.layout.container.Form

**table：表格布局**

> 按表格的方式对所有子控件进行布局。容器layout属性设置为“@\{type:'table',columns:3\}”表示表格占3列。设置子控件rowspan和colspan属性可以分别指定跨几行或几列。
> 
> 详细信息请参考ExtJS文档：Ext.layout.container.Table

**vbox:垂直盒子布局**

> 在容器内对所有子控件按垂直方向进行排列。设置子控件的flex属性可以按比例指定高度。
> 
> 详细信息请参考ExtJS文档：Ext.layout.container.VBox

### 其他样式 ###

> 如果容器的layout属性为空时，设置autoStyle属性为true，可以使子控件自动向左浮动对齐。另外容器还有layoutType属性用于快速设置预定义的布局样式。
> 
> 相关的示例请参考examples/basic/layout.xwl模块。

*  ## 访问数据库 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70]: /images/20220829/1143a312363545ed8e7f96333c55d166.png