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

Question

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

我想为菜单传递一个 JSON 对象，因为这使我的结构具有灵活性。我希望能够拥有一层容器，例如我可能有一个平面菜单，但也可能有一个曲折的子菜单，就像这样。

我想我的第一级菜单对象将是一个容器，带有一个参数来指示它实际上应该是一个容器（如下面的 "By Date"）还是只是一个平面菜单（如前 4 个菜单） .在导航器控件中，容器有一个属性 "transparent"，所以如果它实际上不是容器，我可以设置它。

我的困难在于解析 JSON。我可以做一个级别（即没有容器）但我不能获得多个级别。

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

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

[在 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">
    <!--
        <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

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

Answer 2

将您的自定义控件更改为

<?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 的对象和数组完美配合。没有必要转换它所以其他东西...

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

Xpages: Passing a JSON Object to a custom control to build a menu

json

custom-component

xpages