Question

我创建了一个具有Property Definition Group的自定义控件。该集团已检查“允许多个实例”。当我将控件放在xPage上时，我可以通过UI手动将2个项添加到属性并设置组的子属性，但我需要弄清楚如何通过循环遍历数组以编程方式填充组做一些计算。

Answer 1

我倾向于定义名为＆＃34; configuration＆＃34;的自定义控件属性，并将其设置为＆＃34;对象＆＃34; （您必须输入，然后从下拉列表中选择它）：

Custom Control Property: configuration

现在，您可以传递一个对象作为您的属性：

return {
  "groups" : {
    "groupA" : {
        altName : "A Group",
        members : ["me", "you", "them"]
    },
    "groupB" : {
        altName : "B Group",
        members : ["him", "her", "they"]
    }
},
  otherOption : "something else"
}

在XPages资源中查看时：

<xc:yourControl>
 <xc:this.configuration><![CDATA[#{javascript:return {
  "groups" : {
    "groupA" : {
        altName : "A Group",
        members : ["me", "you", "them"]
    },
    "groupB" : {
        altName : "B Group",
        members : ["him", "her", "they"]
    }
 },
  otherOption : "something else"
 }}]]></xc:this.configuration>

现在，为了循环这个，您可以轻松地使用绑定到＃{compositeData.configuration.groups}的xp：repeat控件，然后使用所有＆＃34; child＆＃34;绑定可以直接完成为xp：repeat：

定义的变量

<xp:repeat
  value="#{compositeData.configuration.groups}"
  indexVar="thisGroup">
  <xp:panel tagName="h1">
    <xp:text disableTheme="true" value="#{thisGroup.altName}" />
  </xp:panel>
  <xp:panel tagName="ul">
    <xp:repeat value="#{thisGroup.members}" var="thisMember">
      <xp:panel tagName="li">
        <xp:text disableTheme="true" value="#{thisMember}" />
      </xp:panel>
    </xp:repeat>
  </xp:panel>
</xp:repeat>

使用此方法，您不会限制自定义控件属性中包含的大小，范围和内容。

Answer 2

在bootstrap进度条的自定义控件中，我有一个名为BarDetail的属性组。有3个属性：样式，宽度和顺序。并打开了多个实例。

以下是关于如何访问属性的XML。我相信我也在NotesIn9 151（http://www.notesin9.com/2014/08/10/notesin9-151-bootstrap-progressbars-in-xpages/）

的视频中谈到了这一点

<xp:panel styleClass="progress">
            <xp:repeat
                id="repeat1"
                rows="30"
                var="rowData"
                indexVar="rowIdx"
                disableOutputTag="true">
                <xp:this.value><![CDATA[#{javascript:var object = compositeData.BarDetail;
var tree:java.util.TreeMap = new java.util.TreeMap();
var data:java.util.ArrayList = compositeData.BarDetail;

var total = 0;
var count = 0;


// first Loop is to build the map and get the count.
for (x in data) {
    count++;
    tree.put(x["order"].toString(), x);
//  print("Width : " + x["width"]);
//  var wCount:string = x["width"];

    total = total + Number(x["width"]);
//  print("Loop count : " + count);

}

    // We want all the colors to expand to 100%

    // Now we need to scale the percentages
    var count = 0;


    var itr:Iterator = tree.values().iterator();
    while(itr.hasNext()) {
        var tempBar = itr.next();
        tempBar["width"] = (tempBar["width"] / total) * 100
    }




return tree.values()}]]></xp:this.value>

                <xp:text
                    escape="true"
                    id="computedField1"
                    tagName="div">
                    <xp:this.styleClass><![CDATA[#{javascript:rowData["style"]}]]></xp:this.styleClass>
                    <xp:this.style><![CDATA[#{javascript:return "width: " + rowData["width"] + "%;"}]]></xp:this.style>
                </xp:text>
            </xp:repeat>

        </xp:panel>

xPages自定义控件与自定义属性组，允许多个实例

2 个答案: