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

最新推荐文章于 2025-04-27 09:05:17 发布

天又热了

最新推荐文章于 2025-04-27 09:05:17 发布

阅读量917

点赞数

分类专栏： webBuilder 文章标签： webbuilder

本文链接：https://blog.youkuaiyun.com/weixin_43404791/article/details/122817546

版权

webBuilder 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在WebBuilder中实现模块的复用，包括通过importModules属性、xwl控件和API方法引用模块。实例展示了如何引用子模块进行服务器端和客户端操作，以及在界面布局中的应用，如左侧列表、右侧指南和中心内容区的构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

编写可复用模块

可复用的模块是指某个模块可以作为公共模块应用到其它模块中,开发大型项目时,构建高度可复用的模块,对质量和系统的可维护性具有重要意义.
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: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如下

  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("失败");

    }
  });