Question

我想制作一个可重复使用的菜单自定义控件。我正在构建一个自定义控件，它将对象作为其类型。拨打此configuration。

我想为菜单传递一个JSON对象，因为这给了我灵活的结构。我希望能够有一个级别的容器，例如我可能有一个平面菜单，但也可能有子菜单，如此。

我认为我的第一级菜单对象将是一个容器，带有一个参数来指示它是否应该实际上是一个容器（如＆＃34; By Date＆＃34;下面）或只是一个平面菜单（如前4个）菜单）。在导航器控件中，容器有一个属性＆＃34;透明＆＃34;所以我可以设置，如果它实际上不是一个容器。

我的难点在于解析JSON。我可以做一个级别（即没有容器），但我不能达到多个级别。

我已经通过JSLint运行了我的JSON，它说它有效，但也许它不是为我想做的而构建的。

下面请找到我的控件和调用它的Xpage并传递JSON。

[在Xpage中我只是试图构建嵌套重复。如果我能做到这一点，我想我可以很容易地制作导航器。]

CC

<xc:ccMenu
    xp:key="facetMenu">
    <xc:this.configuration><![CDATA[#{javascript:return 

[
{
   "cntNme":   "Top Menu 1",
   "cntType":  "1",
   "cntMnu":   
               {
               "mnuNme":

                    [
                        { "id": "1001", "type": "Regular" },
                        { "id": "1002", "type": "Chocolate" },
                        { "id": "1003", "type": "Blueberry" },
                        { "id": "1004", "type": "Devil's Food" }
                    ]

               }

},

{
   "cntNme":   "Top Menu 2",
   "cntType":  "1",
   "cntMnu":

               {
               "mnuNme":

                        [
                        { "id": "1001", "type": "Regular" },
                        { "id": "1002", "type": "Chocolate" },
                        { "id": "1003", "type": "Blueberry" },
                        { "id": "1004", "type": "Devil's Food" }
                    ]


               }

},

{
   "cntNme":   "Top Menu 3",
   "cntType":  "1",
   "cntMnu":

               {
               "mnuNme":

                                        [
                        { "id": "1001", "type": "Regular" },
                        { "id": "1002", "type": "Chocolate" },
                        { "id": "1003", "type": "Blueberry" },
                        { "id": "1004", "type": "Devil's Food" }
                    ]
              }

}
]

}]]></xc:this.configuration>
</xc:ccMenu>

XPAGE

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <!--https://stackoverflow.com/questions/26168228/xpages-custom-control-with-custom-property-group-that-allows-multiple-instances-->
        <xp:panel
            tagName="h4">
            <xp:repeat
                id="repeat1"
                rows="30"
                disableOutputTag="true"
                value="#{compositeData.configuration}"
                var="var"
                indexVar="idx">
                <br></br>
                <xp:text
                    id="computedField1"
                    value="#{var.cntNme}"
                    disableTheme="true">
                </xp:text>
                <xp:panel
                    tagName="ul">
                    <xp:repeat
                        id="repeat2"
                        rows="30"
                        disableOutputTag="true"
                        value="#{var.cntNme}"
                        var="var2"
                        indexVar="idx">
                        <br></br>
                        <xp:text
                            id="computedField3"
                            disableTheme="true"
                            value="#{javascript:var2.cntMnu}">
                        </xp:text>
                        <br></br>
                    </xp:repeat>
                </xp:panel>
            </xp:repeat>
        </xp:panel>
<xp:view>

Answer 1

将自定义控件更改为

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:panel
        tagName="h4">
        <xp:repeat
            id="repeat1"
            rows="30"
            disableOutputTag="true"
            value="#{compositeData.configuration}"
            var="var"
            indexVar="idx">
            <br></br>
            <xp:text
                id="computedField1"
                value="#{var.cntNme}"
                disableTheme="true">
            </xp:text>
            <xp:panel
                tagName="ul">
                <xp:repeat
                    id="repeat2"
                    rows="30"
                    disableOutputTag="true"
                    value="#{var.cntMnu.mnuNme}"
                    var="var2"
                    indexVar="idx">
                    <xp:text
                        id="computedField3"
                        disableTheme="true"
                        value="#{javascript:var2.type}">
                    </xp:text>
                    <br></br>
                </xp:repeat>
            </xp:panel>
        </xp:repeat>
    </xp:panel>
</xp:view>

我改变了以下几行：

                    value="#{var.cntMnu.mnuNme}"

                        value="#{javascript:var2.type}">

</xp:view>

XPage的重复控制与JavaScript的对象和数组完美配合。没有必要将它转换为其他东西......

Answer 2

作为一个更基本的示例，您可能希望查看OpenNTF上的XPages帮助应用程序。我创建了JSON以传递到dijit.Tree控件以创建分层菜单结构。值得注意的是JSON是为此手动创建的，之前我知道IBM创建的JsonJavaObject和JsonParser类（可能在它们创建之前，因为这是在Connections邮件集成之前）。

Xpages：将JSON对象传递给自定义控件以构建菜单

2 个答案: