编写可复用模块

可复用的模块是指某个模块可以作为公共模块应用到其它模块中,开发大型项目时,构建高度可复用的模块,对质量和系统的可维护性具有重要意义.
WebBuilder具有很强的模块复用能力,构建的模块可通过多种方式被别的模块引用.引用的模块和被引用的模块可以相互访问,使之成为一个有机的整体.

通过importModules属性引用模块

 在模块文件的根节点module中有importModules属性,该属性用于引用单个或者多个模块.在IDE中可以把引用的模块直接拖到该属性中,以把被引用模块的地址设置到该属性.通过上述方法引用模块后,被引用的模块即可在主模块运行时**同步被运行**.使用该方法引用的模块通常**仅用于运行公共的后台代码或引用公共的后台办法.**

下面举例说明如何通过设置importModules属性引用模块.
定义被引用的模块sub.xml,并在module的ServerScript属性中编写代码

Wb.apply(app, {//定义add方法,并添加到服务器端app变量中add:function(var val1, var val2){return val1+val2;}
});

定义主模块main.xwl,并把sub.swl文件拖到module的Modules属性中.
在main.xwl模块module的ServerScript属性中即可引用sub.xwl中定义的add方法:

var val = app.add(3, 5);//app.add方法在sub.xwl中定义
app.info(Wb.encode(val));//输出到浏览器控制台

效果如下

通过xwl控件引用模块

xwl控件位于控件箱[Server]目录下.相比通过使用importModules属性引用模块,使用xwl控件引用模块更灵活,具体优点主要表现在:
- 可以控制被引用模块和其他服务器控件执行的先后顺序,只有当解析到xwl控件对应的模块时才被执行.
- 除了访问服务端app,也可以访问客户端app,通过类似app.xwl1方法(xwl1是xwl控件itemId)即可访问到被引用模块客户端app对象.
- ** 可以把被引用模块作为子控件,添加到主模块的容器控件或其他控件(我就是用的这一种)**
下面举例说明如何通过xwl控件引用模块:
定义被引用的模块sub.xwl, 并添加到panel1控件,然后再module的initialize属性编写代码:

Wb.apply(app, {//定义setTitle方法,并添加到客户端app变量中setTitle:function(title){app.panel1.setTitle(title);}
});

定义主模块main.xwl,在main.xwl模块中添加viewport1控件,设置layout属性为fit.在viewport1下添加xwl控件,并在viewport1控件的afterrender事件中编写代码:
app.xwl1.setTitle(‘my panel’);//调用sub.xwl模块定义在app内的setTitle()方法
//通过app.xwl1.panel1.setTitle(‘my panel’);也可以设置标题
使用xwl控件同样能完成服务器端公共方法的引用,具体可以参照上述[通过importModules属性引用模块]的方法说明.
效果如下：

通过API方法引用模块

通过代码的方法也可以引用或运行模块。

在前台引用模块

在客户端JavaScript中可以使用Web.run或者Wb.open方法运行模块，并获取模块的appScope对象。例如如下的JS代码：

Wb.run({url: 'm?xwl=my-module',success:function(scope){app.window1.add(scope._myPanel);//把my-module模块的myPanel对象添加到当前魔魁啊的window对象中}
});

Wb.run方法好像已经没有了，我现在就是报错
TypeError: Wb.run is not a function

在后台引用模块

在Java中可以使用WbUtil.run方法，在ServerScript中还可以使用app.execute方法。例如以下ServerScript代码：

//在模块中运行另一个模块，主模块和子模块将共享requst和response
app.execute('m?xwl=examples/basic/coding/modules1');
//使用虚拟的response作为参数运行模块，并获得模块运行所得的闭包部分脚本
var script=app.execute('m?xwl=examples/basic/coding/modules1',{foo:'bar',//设置参数，在module1中可通过app.get获取参数abc:123
}, true//true表示获取运行模块后返回客户端闭包部分脚本
//在独立的上下文以及虚拟的request/response上运行模块文件
Wb.execute('m?xwl=examples/basic/coding/modules1');
);

在Java中使用WbUtil.run方法可以运行或引用xwl文件。

实战

预期效果

最终效果

我只做上面部分

过程

界面布局参考实例模块，基础模块中的联合模块使用border,分west,center,east
静态页面绘制直接采用CSS+HTML
数据库数据获取采用Wb.request
脚本采用JavaScript

结构

viewport

panel1

也就是html代码

<!DOCTYPE html>
<html> <head><meta charset="utf-8" /><title>业务种类</title><style>.left-list-container{      flex:1float: left;/*float规定框是否应该浮动，left设置定位元素左外边距边界与其包含块左外边界之间的偏移*/
/*         padding-left:200px; */}.left-list-title{margin-bottom: 20px;/*定义元素外边距使用margin属性，可以专门设置某一方向属性，比如margin-bottom:设置元素的下外边距*/}.left-list-header{font-size: 25px;/*字体大小*/color: rgb(16,120,173); /*定义内边距使用padding属性，内边距就是元素包含的内容和元素边框内边沿之间的距离*/padding-left: 8px;/*边框border:任何元素都可以定义边框，并且能够很好地显示出来。边框在网页布局中就是用来分割模块的。*/border-left: 5px solid rgb(16,120,173);}.left-list-footer{font-size: 14px;color: rgb(255,203,0);padding-left: 8px;/*padding是内边距，设置内边距这样我们就有空间可以设置border边框了， soild一个实体边框*/border-left: 5px solid rgb(255,203,0);}.left-list-content{flex: 1;/*让所有弹性盒子对象的子元素都有相同的长度，且忽略他们内部的内容*/width: 200px;/*元素区域宽度*/background-color: rgb(247,247,247);/*背景色*/padding: 0 5px;border: 1px solid rgb(247,247,247);/*定义边框，只要和背景色一样就看不出来*/}.left-list-item{display: flex;/*利用display属性控制盒子的类型，flex:多行多列布局方式*/align-items: center;/*元素位于容器的中心，这个没啥用*/font-size: 16px;/*字体大小*/line-height: 20px;/*line-height行高，用来设置行间的距离*/padding: 10px 0;/*上下填充是10px,左右填充是0， 行间距和padding的上下填充感觉重复*/border-bottom: 1px solid rgb(247,247,247);/*定义底部边框，只要背景色一样就看不出来*/}.left-list-item:nth-last-child(1){/*nth-last-child是从最后一个元素开始计算选择特定元素*/border-bottom: 0px solid rgb(247,247,247);}.left-list-icon{/*设置图标大小*/height: 20 px;width: 20 px;}.left-list-content {flex: 1;border: 0px solid rgb(237,237,237);}</style></head><body><div class="left-list-container"><div class="left-list-title"><div class="left-list-header">业务种类</div><div class="left-list-footer">Business Type</div></div><ul class="left-list-content"><li class="left-list-item"><img src="wb/images/left.jpg" class="left-list-icon"><span class="left-list-content">出入境体检</span></li><li class="left-list-item"><img src="wb/images/left.jpg" class="left-list-icon"><span class="left-list-content">预防接种</span></li><li class="left-list-item"><img src="wb/images/left.jpg" class="left-list-icon"><span class="left-list-content">指定签证体检</span></li><li class="left-list-item"><img src="wb/images/left.jpg" class="left-list-icon"><span class="left-list-content">社会健康体检</span></li><li class="left-list-item"><img src="wb/images/left.jpg" class="left-list-icon"><span class="left-list-content">其他服务</span></li></ul></div></body>
</html>

panel3

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.top-list-container {flex:1float: right;
/*         padding-right:300px; */}.top-list-title {margin-bottom: 20px;}.top-list-header {font-size: 25px;color: rgb(25,108,144);padding-left: 8px;border-left: 5px solid rgb(25,108,144);}.top-list-footer {font-size: 14px;color: rgb(252,204,21);padding-left: 8px;border-left: 5px solid rgb(252,204,21);}.top-list-content {flex:1;width: 200px;background-color: rgb(246,247,247);padding: 0 5px;border: 1px solid rgb(237,237,237);}.top-list-item {display: flex;align-items: center;font-size: 16px;line-height: 20px;padding: 10px 0;border-bottom: 1px solid rgb(237,237,237);}.top-list-item:nth-last-child(1) {border-bottom: 0px solid rgb(237,237,237);}.top-list-icon {height: 20px;width: 20px;}.top-list-content {flex: 1;border: 0px solid rgb(237,237,237);}</style></head><body><div class="top-list-container"><div class="top-list-title"><div class="top-list-header">业务指南</div><div class="top-list-footer">Business Guide</div></div><ul class="top-list-content"><li class="top-list-item"><img src="wb/images/体检流程.jpg" class="top-list-icon"><span class="top-list-content">体检流程</span></li><li class="top-list-item"><img src="wb/images/体检注意事项.jpg" class="top-list-icon"><span class="top-list-content">体检注意事项</span></li><li class="top-list-item"><img src="wb/images/体检结果领取须知.jpg" class="top-list-icon"><span class="top-list-content">体检结果领取须知</span></li><li class="top-list-item"><img src="wb/images/收费标准.jpg" class="top-list-icon"><span class="top-list-content">收费标准</span></li><li class="top-list-item"><img src="wb/images/办公时间.jpg" class="top-list-icon"><span class="top-list-content">办公时间</span></li><li class="top-list-item"><img src="wb/images/预防接种须知.jpg" class="top-list-icon"><span class="top-list-content">预防接种须知</span></li></ul></div></body>
</html>

panel2

采用xwl引用模式，因此需要将JS在afterrender中编写

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><style>.center-list-container{float:center;padding:10px;}.center-list-title{margin-bottom:20px;}.center-list-header{font-size:20px;color: rgb(170,177,196);padding-bottom:8px;border-bottom:5px solid rgb(16,120,173);float:left;width:20%;height:50px;}.center-list-footer{font-size:20px;color: rgb(170,177,196);padding-bottom:20px;border-bottom:5px solid rgb(170,177,196);float:left;width:80%;height:50px;}.center-list-item-1{display:flex;align-items:center;font-size:16px;line-height:20px;padding:10px 0;border-bottom: 1px solid rgb(237,237,237);float:left;font-size:16px;
/*         padding-left:100px */}.center-list-item-2{display:flex;align-items:center;font-size:16px;line-height:20px;padding:10px 0;border-bottom: 1px solid rgb(237,237,237);float:left;font-size:16px;padding-left:700px}.center-list-content{}</style></head><body><div class="center-list-container"><div class="center-list-title"><div class="center-list-header">业务指南</div><div class="center-list-footer"></div><p><p><p><p><div class="center-list-content" id="tableList"> <table class="table"><tbody></tbody></table></div></div></div></body>
</html>

afterrender如下

  Wb.request({url: 'm?xwl=demo/combine-module/basic_select',//成功后的回调函数success: function(resp) {console.log("success");var obj = Wb.decode(resp.responseText);var data = obj.rows;var html = '';var tbody = document.getElementsByTagName('tbody')[0];for (var i = 0; i < data.length; i++) {var tr = document.createElement('ul');var tdTitle = document.createElement('li');var tdAuthor = document.createElement('li');var tdTitleType = document.createAttribute("class");var tdAuthorType = document.createAttribute("class");var trType = document.createAttribute("class");var img = document.createElement("img");var imgType = document.createAttribute("src");var news = data[i];var title = news.title;var author = news.author;var spanTitle = document.createElement('span');spanTitle.innerHTML=title;var spanAuthor = document.createElement('span');spanAuthor.innerHTML=author;img.src="wb/images/new符号.png";
//         img.attributes.setNamedItem(imgType);tr.nodeValue="center-list-content";tr.attributes.setNamedItem(trType);tdTitleType.nodeValue = "center-list-item-1";tdAuthorType.nodeValue = "center-list-item-2";tdTitle.attributes.setNamedItem(tdTitleType);tdAuthor.attributes.setNamedItem(tdAuthorType);tdTitle.appendChild(spanTitle);tdTitle.appendChild(img);tdAuthor.appendChild(spanAuthor);var cellpadding = document.createAttribute("cellpadding");cellpadding.nodeValue="50px";//td.attributes.setNamedItem(cellpadding);// tdTitle.innerHTML=title;tr.appendChild(tdTitle);//tdAuthor.innerHTML=author;tr.appendChild(tdAuthor);tbody.appendChild(tr);}},error: function(res) {console.log("失败");}});

010-WebBuilder-编写可复用模块+阶段实战效果与代码相关推荐

React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块...
尊重版权,未经授权不得转载本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...
html如何复用其它页面,编写可以复用的 HTML 模板
Web 组件简介编写可以复用的 HTML 模板(本文)从 0 开始创建自定义元素使用 Shadow DOM 封装样式和结构Web 组件的高阶工具 Web 组件规范中最不被认可但是最强大的功能之一是 ...
python django web典型模块开发实战_带你读《Python Django Web典型模块开发实战》之一：从新浪微博聊起多端应用-阿里云开发者社区...
Python Django Web典型模块开发实战点击查看第二章点击查看第三章寇雪松编著第1章从新浪微博聊起多端应用当人们听到"新浪",脑海里第一个浮现的关联词是& ...
把自己编写的python模块添加到PYTHONPATH上
Python环境变量PYTHONPATH设置和easy_install简单使用 (2011-03-24 13:57:46) 转载▼ 标签: 杂谈分类: Python 1.把自己编写的python模块 ...
异步爬虫模块aiohttp实战之infoq
点击上方蓝字关注异步爬虫模块aiohttp实战之infoq 之前写过很多的关于异步的文章,介绍了asyncio的使用,大多的只是通过简单的例子说明了asyncio的使用,但是没有拿出具体的使用例子, ...
nginx: 编写简单handler模块
1.ubuntu安装nginx服务 (1)安装依赖库: 安装gcc g++的依赖库 apt-get install build-essential apt-get install libtool安装p ...
pads 添加复用模块技巧、
先选择相同的元器件,建立一个复用模块 ,保存到指定的文件夹.后面设计电路直接用下图方法调用就可以很快完成电路设计
PADS的layout单个元器件删除时提示“复用元素无法修改，首先打散复用模块”
问题描述:在原理图中选中一个模块时,在layout下删除此模块时有单个电阻封装无法删除,提示"复用元素无法修改,首先打散复用模块". 经过实际操作,在ECO模式下,在没有加复用模块 ...
Altium Vault 2.5.9.45043 1CD统一元器件库及复用模块管理
Altium Vault 2.5.9.45043 1CD统一元器件库及复用模块管理 Altium的Vault可以存放标准化的统一元器件库,也可存放特定功能的原理图模块,并且都具备版本及生命周期管理的 ...

010-WebBuilder-编写可复用模块+阶段实战效果与代码