Xpages: Передача объекта JSON в пользовательский элемент управления для построения меню

Question

Я хочу создать пользовательский элемент меню многоразового использования. Я создаю настраиваемый элемент управления, который принимает объект как свой тип. Вызов этого configuration.

Я хочу передать объект JSON для меню, так как это дает мне структуру с гибкостью. Я хочу иметь один уровень контейнеров, например. У меня может быть плоское меню, но также может быть извилистым с подменю, например.

Я полагаю, что мой объект меню первого уровня будет контейнером, с параметром, чтобы указать, должен ли он на самом деле быть контейнером (например, «По дате» ниже) или просто плоское меню (как первые 4 меню). В управлении навигатором контейнер имеет свойство «прозрачно», поэтому я могу установить его, если он на самом деле не будет контейнером.

Моя трудность заключается в анализе JSON. Я могу сделать один уровень (т. Е. Нет контейнеров), но я не могу получить несколько уровней.

Я запустил свой JSON через JSLint, который сказал, что он действителен, но, возможно, он не построен для того, что я хочу делать.

Ниже вы найдете мой контроль и 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

В более простом примере, вы можете захотеть взглянуть на XPages Помощь Приложение на OpenNTF. Я создал JSON, чтобы перейти в элемент управления dijit.Tree, чтобы создать иерархическую структуру меню. Стоит иметь в виду, что JSON был создан вручную для этого и был до того, как я узнал о классах JsonJavaObject и JsonParser, созданных IBM (возможно, до того, как они были созданы, так как эта предварительная интеграция электронной почты).