功能简介

通过简单的拖拉设计组件方便的搭建企业门户、二级门户以及需要展示内容的页面。

表单设计

各面板介绍，组件面板、内容区块、dom树、样式，事件等。
各种设计组件的使用。
表单导出、表单导入，dom复制黏贴等

部件设计

部件相当于一个子页面，部件中元素的和页面中元素用法一致。您可以在门户有页面中插入部件或者部件内的元素。

创建部件

新建部件

选择容器元素创建

从页面/部件中，选择容器元素（Div），创建部件，容器内的元素是作为新部件的元素保存。

部件的使用

插入部件

可以在页面中插入部件，如果当前页面在设计PC端，那么插入的是部件的PC模式内容；如果当前页面在设计Mobile端，那么插入的是部件的Mobile模式内容。

计算部件
如果使用计算部件，可以通过条件计算来插入部件。如：

if( this.page.get("type").getData() == "yes" ){
    return "部件1"; //需返回部件名称或部件ID
}else{
    return "部件2";
}

参数
可以在页面的部件属性中传参数给部件。可以通过固定值或者是脚本传参。
参数脚本

return {  //如果使用脚本，需要返回参数对象
    "par1" : "参数值1",
    "par2" : "参数值2"
}

在部件中可以通过· this.page.getWidgetPrameters(); 来获取页面传入的参数
比如上面的参数脚本

var par = this.page.getWidgetPrameters();
//获取的par是
//{
//    "par1" : "参数值1",
//    "par2" : "参数值2"
//}

插入部件元素

可以在页面中插入部件的元素。如果当前页面在设计PC端，那么插入的是部件的PC模式内容；如果当前页面在设计Mobile端，那么插入的是部件的Mobile模式内容。

获取部件内的元素

可以在页面中重复插入同一个部件，可以通过 this.page.getWidgetModule( widget, moduleName );可以来获取制定部件的元素。比如：

设计了一个部件，包含一个设计元素subject。
在主页面里两次嵌入1步骤创建的部件，一个标识是widget_1, widget_2。

var module = this.page.getWidgetModule( "widget_1", "subject"); 
//部件widget_1的subject组件 
var data2 = this.page.getWidgetModule( "widget_2", "subject").getData(); 
//部件widget_2的subject组件的值

脚本开发

表单引入脚本include

this.include("initScript") //脚本配置的名称、别名或id
//如果需要引用其他应用的脚本配置，将options设置为JsonObject
this.include({
    type : "portal", //应用类型。可以为 portal  process  cms。如果没有该选项或者值为空字符串，则表示应用脚本和被应用的脚本配置类型相同；比如在门户的A应用脚本中引用门户B应用的脚本配置，则type可以省略。
    application : "首页", // 门户、流程、CMS的名称、别名、id。 默认为当前应用
    name : "initScript" // 脚本配置的名称、别名或id
})

脚本方法定义 this.define("xxx",function(){}.bind(this))

//定义一个方法
this.define("getUserName", function(){
return ( layout.desktop.session.user || layout.user ).name
}.bind(this))

脚本系统服务调用接口地址：
dev.o2oa.net:20030/x_program_c…
this.action("xxx服务根")或者MWF.Actions.get("xxxx服务根")；
例如：引入了cms的文档服务方法，删除，修改，取消发布等方法。

var action = new this.Action("x_cms_assemble_control", {
"del":{"uri": "/jaxrs/document/{id}", "method": "DELETE"},
"change":{"uri": "/jaxrs/document/category/change", "method": "PUT"},
"cancel":{"uri": "/jaxrs/document/publish/{id}/cancel", "method": "PUT"}
  }
);

定义方法调用服务

this.define("change",function(data,callback){
    action.invoke({"name": "change","data":data,"parameter": {},"async": true,
"success": function(json){
if(callback)callback(json);
}.bind(this)});
}.bind(this)

或者也可以直接调用系统内置的方法例如

MWF.Actions.get("x_cms_assemble_control").getDocument(id,function(json){
//code
}.bind(this))

getDocument是系统中已经定义的方法，具体可以查看服务调用文件o2_core/o2/xAction/service目录下的服务文件
4. 操作嵌入视图数据
5. 服务调用实现翻页

var action = new this.Action("x_cms_assemble_control", {
"del":{"uri": "/jaxrs/document/{id}", "method": "DELETE"},
"change":{"uri": "/jaxrs/document/category/change", "method": "PUT"},
"cancel":{"uri": "/jaxrs/document/publish/{id}/cancel", "method": "PUT"},
// 获取未读消息
"info":{"uri": "/jaxrs/viewrecord/unread", "method": "PUT"},
// 获取文档
"list":{"uri": "/jaxrs/document/filter/list/{id}/next/{count}", "method": "PUT"},
"publish":{"uri": "/jaxrs/document/publish/content", "method": "PUT"},
});
this.data.add("curid","(0)");
this.data.add("pageCount","10");
this.define("loadList",function(id,count,data,callback){
    action.invoke({"name": "list","parameter":{"id":id,"count":count},"data":data,"async": true, "success": function(json){if(callback)callback(json);}.bind(this)});
}.bind(this));
this.define("showList",function(json){
//alert(JSON.stringify(json));
var content = this.form.get("content").node;
    json.data.each(function(data){
new Element("div",{text:data.title}).inject(content);
}.bind(this))
}.bind(this))
6、引入外部js框架，例如jquery
 o2.load("/o2_lib/jquery/jquery.min.js",function(){
var jq = jQuery.noConflict(true);
//alert(jq("#aaa").find("input").val())
jq(document).ready(function(){
//window.setTimeout(function(){ 
var tab = jq("table");
var tr = tab.find("tr");
                tr.mouseover(function(){
jq(this).css("background-color","#ff0")
});
                tr.mouseout(function(){
jq(this).css("background-color","")
})
//},2000);
})
}.bind(this))

数据源使用

数据源，子数据源，数据文本的关系
数据源创建(结合平台服务)。
子数据源、数据文本
数据源嵌套
数据源相关事件,例如 loadData()等。
翻页功能，样例。

门户样例

模板导入

导入图片资源

2. 导入html，css文件

4. 导入后效果

其他

门户页面跳转，参数传递
this.page.toPage("页面名称", {"keyword": “value”});
获取： var par = this.page.parameters; //par的内容：{"type": "my type"}
使用系统内置组件模板

MWF.xDesktop.requireApp("Template", "MTooltips", null, false);

var tt = new Class({
    Extends: MTooltips,
    _getHtml : function(){
        var html =
            "<table width='100%' bordr='0' cellpadding='7' cellspacing='0' style='margin:13px 13px 13px 13px;'>" +
            "<tr><td width='70'>title:</td>" +
            "    <td style=''>test</td></tr>" +
            "<tr><td >time:</td>" +
            "    <td style=''>2019-08-21</td></tr>" +
            "</table>";
        return html;
    },
   
});

var pc = new tt(this.form.getApp().content,this.target.node,this.form.app,{},{
    axis : "x"
});
pc.create();

O2OA教程-业务开发与设计-门户管理与应用包装