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

Hello World应用

依照惯例，还是helloWorld

打开集成开发环境

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

添加Hello World模块

1. 创建目录

点击左侧文件列表中的【模块】节点，点击顶部工作条【添加目录】按钮或者直接右键【模块】来添加目录，在现实的对话框目录中创建新的目录。

2. 添加文件

点击左侧文件列表项中的[demo]节点，点击顶部工具条[添加文件]按钮或者直接右键【demo】节点创建新的模块文件

3. 添加window控件

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

4. 布局设计

点击对象视图中【window1】控件，点击顶部工具条【布局设计器】按钮或者直接右键（如果弹出确认对话框选择【确认】按钮），打开布局设计器，以编辑window1的布局

5. 布局设计器添加控件

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

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

6. click事件设置

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

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

7.运行Hello World模块

点击顶部工具条上的【保存当前模块并运行】按钮，运行hello-world模块，运行的结果如下图

也可以在主页面中点击【demo】菜单，并点击【hello-world】模块来运行该模块。

表格

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

1.新建文件GRID

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

2.添加viewport

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

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

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

这里有一个操作小技巧，首先点击父类控件module,然后按住ctrl双击viewport就可以成为module的子控件。

3. 添加表格

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

• column的dataIndex可以设置关联的字段名称，
• text可以设置列标题，
• width可以设置列宽度
• renderer属性可以通过JS自定义单元格HTML输出。
• 设置editable属性为true,可以设置表格为可编辑，可编辑表格必须为对应的column设置editor属性，如果没有设置editor属性那么该列仍然不可编辑。
• 获取表格中选择的记录可以使用grid.getSelection()方法，
• 设置表格中选择的记录可以使用grid.setSelection()方法
• 获取表格的值可以使用Wb.getData()方法
• 当提交表格的值时，默认提交选择的记录，入宫要提交表格所有行的值，可以设置submitSelect属性为false



• 我在应用中使用array作为columns，然后添加array的子空间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控件的方法如下：

1. 在模块文件中添加dataprovider控件
2. 设置dataprovider控件的jndi属性，如果需要访问的数据库为默认数据库此项可以为空。
4. 设置dataprovider控件的sql属性为需要执行的SQL语句，通常为select语句或则和访问存储过程。

当模块文件被执行时，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属性，在模块文件被调用时该方法将被执行。