编写可复用模块
可复用的模块是指某个模块可以作为公共模块应用到其它模块中,开发大型项目时,构建高度可复用的模块,对质量和系统的可维护性具有重要意义.
WebBuilder具有很强的模块复用能力,构建的模块可通过多种方式被别的模块引用.引用的模块和被引用的模块可以相互访问,使之成为一个有机的整体.
通过importModules属性引用模块
在模块文件的根节点module中有importModules属性,该属性用于引用单个或者多个模块.在IDE中可以把引用的模块直接拖到该属性中,以把被引用模块的地址设置到该属性.
通过上述方法引用模块后,被引用的模块即可在主模块运行时**同步被运行**.使用该方法引用的模块通常**仅用于运行公共的后台代码或引用公共的后台办法.**
下面举例说明如何通过设置importModules属性引用模块.
定义被引用的模块sub.xml,并在module的ServerScript属性中编写代码
Wb.apply(app, {
//定义add方法,并添加到服务器端app变量中
add:function(var val1, var){
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:1
float: 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:1
float: 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如下
.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("失败");
}
});
