002-webBuilder的HelloWorld应用与表格应用

002-webBuilder的HelloWorld应用与表格应用

Hello World应用

依照惯例，还是helloWorld

打开集成开发环境

主界面选择【开发套件】->【集成开发环境】或者直接输入[url/ide]打开

添加Hello World模块

1. 创建目录

2. 添加文件

3. 添加window控件

编辑新打开的【helloWorld】模块，在打开的文件模块对象视图中，在module根节点下添加windows控件，方法是拖动右侧【空间箱】中的window控件至对象视图module节点或者双击window控件.并且在对象视图左侧的[配置项事件编辑器]的configs项目中设置autoShow属性为true

4. 布局设计

5. 布局设计器添加控件

在打开的布局设计器中，分别拖动右侧【控件箱】中的【label】，【text】，【button】控件到布局设计器，并且拖动这些控件位置和调整大小。如下界面：

分别在布局设计器底部的【标签】文本框中设置[label1]标签为【请输入你的姓名】，【button1】标签为【确定】。标签属性也可以在【配置事件编辑器】中设置。

6. click事件设置

返回helloworld模块的[设计]标签页，并且在对象视图中选择[button1]控件，并且在【配置项事件编辑器】底部EVENT项中编写button1控件click事件代码：

Wb.info('您好'+app.text1.getValue()+',欢迎使用WebBuilder!');

7.运行Hello World模块

表格

表格涉及的知识就得自己总结了

1.新建文件GRID

还是在【demo】项目中新建一个文件【grid】

2.添加viewport

viewport表示整个页面的显示视口，他把页面渲染到浏览器的body中，他的大小等于浏览器body的大小,如果整个页面需要占据整个浏览器body(全屏显示)，可以使用该控件作为顶层控件。

大部分需要在浏览器中显示的模块通常都会使用viewport作为顶层控件，然后在其下添加其他界面控件。

在模块文件中，非容器控件只有被添加到viewport或者容器（如panel控件）才会被显示，比如文本框控件text只有被添加到viewport或者panel才会被显示，佛祖额如果模块不在单独的窗口中运行text不会被直接显示。

3. 添加表格

grid继承自panel，数据的显示通过关联的view展现，view继承自dataview.在访问期间，访问grid.view即可获得grid的view对象。grid的view预定义了以表格行列的样式来显示数据，因此只需要设置store即可以表格方式展示store中的数据。设置表格列columns属性可以定义表格显示的列，columns由多个列column组成的数组构成。设置

4. 添加store

store和treestore封装了客户端的数据模型，可以通过设置url属性来读取后台的数据，这两个控件默认位于空间箱Data Access目录， 设置autoLoad属性为true可以使store自动加载url指向的数据，如果不设置此属性可以通过store.access()方法来加载数据。 设置fields属性可以指定数据模型，例如设置fieldA字段为日期型，那么后台fieldA返回的字符串可以按照指定格式转换为日期值。如果后台未返回fields模型，那么必须显式设置fields属性，否则未设置的字段将无法被识别和访问。 store可以为combo,grid,dataview,chart等控件提供数据源；treestore为树形结构可以为tree等控件提供数据源。 store的原理为通过Ajax请求读取后台的数据，并按照设置的数据模型转换为对应的数据结构。通过store可以方便读取数据，是前端界面控件和后台数据源之间的桥梁。 store读取的数据格式是JSON，例如下面的格式为有效数据：

{ "success": true, //成功标记 "metaData": { //元数据定义 "fields": [{ //字段定义 "name": "field1", //字段名称 "type": "string" //类型 }, { "dateFormat": "Y-m-d H:i:s.u", //字符串使用的日期格式，用于转换为日期类型 "name": "field2", "type": "date" }] }, "columns": [{ //列定义 "xtype": "rownumberer" //列类型 }, { "dataIndex": "field1", //字段名称 "text": "字段1", //标题名称 "width": 180 //宽度 }, { "dataIndex": "field2", "text": "字段2", "width": 120, "format": "Y-m-d" //日期显示的格式 }], "rows": [{ //记录值 "field1": "123", "field2": "2017-09-22 11:43:31.12" }, { "field1": "abc", "field2": "2017-09-24 20:08:35.361" }], "total": 2 //总记录数，用于计算分页}

当在store配置了fields属性，grid配置了columns属性时，以下格式亦是有效的数据并可以显示在表格中：

{ rows: [{ field1: '123', field2: '2017-09-22 11:43:31.12' }, { field1: 'abc', field2: '2017-09-24 20:08:35.361' }]}

5.新建目录文件

后台数据最好是自己新建一个目录，并且在该目录中建立后台代码

新建【grid】目录，在该目录中新建文件【select】

注意选择【在模块列表中隐藏】，因为后端的文件不需要也不能展示。

6.添加控件dataprovider

dataprovider:数据源控件，用于根据SQL生成指定类型的输出，比如用于表格的JSON数据；用于图片或者-的流数据等。

dataprovider是数据库数据输出控件，用于把数据库数据转换为指定格式的JSON脚本，图片或二进制流等数据，通过该控件可以方便地从数据库表。SQL或过程提取数据，并生成目标格式的数据。

该控件的原理是使用query获取数据，然后把query查询到的数据输出到客户端。

7. 使用dataprocider获取SQL内容输出到客户端

上面的图片就是使得store可以加载url指向的数据，也就是select的数据,这里store必须放在表格里面。否则显示不出来，并且必须是在colums上面。否则也显示不出来。

使用dataprovider控件的方法如下：

当模块文件被执行时，SQL语句即被执行并获得SQL返回的结果集。该控件会自动把结果集中的数据按指定格式转换为JSON脚本，然后直接把这些脚本输出到客户端。 在Java或ServerScript中可以使用DataProvider类或者DpControl类来运行dataprovider，在ServerScript中 还可以使用app.output和app.getData()方法运行dataprovider。在ServerScript中运行dataprovider的代码如下：

app.output('select * from table1');//直接把table1表数据转换为JSON并输出至客户端。app.output('select * from table1', { jndi: 'myJndi'//指定JNDI });var json = app.getData('select * from table1');//把table1表数据转换为JSON对象

8. 运行grid

按照上面执行sql或者执行serverScript的结果都可以得到：

9. 尝试表格事件

效果如下：

ServerScript

在WebBuilder中支持两种方法编程，一种是传统的Java,另一种是使用JavaScript语法在服务器进行编程。为了避免同客户端JavaScript的混淆，称服务器端JavaScript为ServerScript。ServerScript虽然语法为JavaScript,但是本质上是Java的方法和类库 模块文件运行Java代码可以通过设置模块文件根节点module的serverScript属性，在模块文件被调用时该方法将被执行。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。