微前端架构如何改变企业的开发模式与效率提升
902
2022-11-19
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小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~