自定义控件Openui5

时间:2016-03-24 06:07:50

标签: sapui5

    sap.ui.core.Element.extend("custom.barNlineChartControl", { metadata : {
            properties : {
                "Job" : {type : "string", group : "Misc", defaultValue : null},
                "Threshold" : {type : "int", group : "Misc", defaultValue : null},
            }
        }});

sap.ui.core.Control.extend("control.barNlinechart", { 
        /* the control API */
        metadata : {
            aggregations : {
                "items" : { type: "custom.barNlineChartControl", multiple : true, singularName : "item"}
            },
            events: {
                "select" : {},
                "selectEnd": {}             
            }           
        },

    //D3 Code below:
    onAfterRendering: function() {
            var that = this;
            /* get the Items aggregation of the control and put the data into an array */
            var aItems = this.getItems();

            var data = [];
            for (var i=0;i<aItems.length;i++){
                var oEntry = {};
                for (var j in aItems[i].mProperties) {
                    oEntry[j]=aItems[i].mProperties[j];
                }                   
                data.push(oEntry);
            }
            alert(JSON.stringify(data));

观点与范围控制

   multiBarLineGraph = new control.barNlinechart({
    layoutData: new sap.ui.layout.GridData({span: "L12 M12 S12"}),
   items: {
            path : "/genericData", 
            template : new custom.barNlineChartControl({Job:"{Job}",Threshold:"{Threshold}"}),
            }   
    }),

    var multiBarData = {
                    "genericData":[
                                  {
                                          "Job": "Doctor",
                                          "Threshold": 45,
                                          "Hospital1": 30,
                                          "Hospital2": 100,
                                          "Hospital3": 90,
                                        },
                                        {
                                          "Job": "Teacher",
                                          "Threshold": 65,
                                         "School1": 60,
                                          "School2": 75,
                                        },
                                      ]};

当d3代码中的警报执行时,我得到Job&amp;阈值但JSON数组中的其他数据丢失,这很明显,因为此处设置的属性仅接受作业和阈值。由于JSON是动态的,因此如何编写自定义控件,以便无论数据的动态程度如何,我都可以随时传递完整的数据进行控制。

1 个答案:

答案 0 :(得分:2)

您可以为您的商品使用type:“any”,并且根本不使用元素custom.barNlineChartControl:

编辑:作为聚合控制聚合对象的生命周期,在这种情况下您必须使用属性。

sap.ui.core.Control.extend("control.barNlinechart", { 
    /* the control API */
    metadata : {
        properties : {
            "items" : { type: "any" }
        },
        events: {
            "select" : {},
            "selectEnd": {}             
        }           
    },

然后在你看来:

multiBarLineGraph = new control.barNlinechart({
  layoutData: new sap.ui.layout.GridData({span: "L12 M12 S12"}),
  items: { path : "/genericData" }   
}),

this.getItems()将返回已设置/绑定的任何数组。