Xpages: Übergeben eines JSON-Objekts an ein benutzerdefiniertes Steuerelement zum Erstellen eines Menüs

Question

Ich möchte ein benutzerdefiniertes Steuerelement für wiederverwendbare Menüs erstellen. Ich erstelle ein benutzerdefiniertes Steuerelement, das ein Objekt als Type akzeptiert. Rufen Sie diese configuration.

Ich möchte ein JSON-Objekt für das Menü übergeben, da dies mir Struktur mit Flexibilität gibt. Ich möchte in der Lage sein, eine Ebene von Behältern zu haben, z.B. Ich habe vielleicht eine flache Speisekarte, kann aber auch mit Untermenüs verwinkelt sein.

ich meine, mein erstes Level-Menü Objekt wird ein Container, mit einem Parameter sein, um anzuzeigen, ob es tatsächlich einen Behälter (wie „By Date“ weiter unten) oder nur eine flache Menü (wie die erste sein sollte, 4 Menüs). In der Navigatorsteuerung hat der Container eine Eigenschaft "transparent", so dass ich festlegen kann, ob es sich tatsächlich um einen Container handelt.

Meine Schwierigkeit besteht darin, den JSON zu analysieren. Ich kann eine Ebene machen (d. H. Keine Container), aber ich kann nicht mehrere Ebenen erreichen.

Ich habe meine JSON über JSLint ausgeführt, die besagt, dass es gültig war, aber vielleicht ist es nicht für das, was ich tun möchte, konstruiert.

Nachstehend finden Sie mein Steuerelement und die Xpage, die es aufruft und JSON übergibt.

[In der Xpage versuche ich einfach, verschachtelte Wiederholungen zu erstellen. Wenn ich tun kann, dass ich glaube, ich ziemlich leicht den Navigator machen.]

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

Ihre individuelle Ändern Kontrolle

<?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> 

ich die folgenden Zeilen geändert:

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

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

</xp:view> 

XPage der Wiederholungssteuerung arbeitet mit JavaScript Objekte und Arrays perfekt. Es besteht keine Notwendigkeit, es so etwas anderes zu konvertieren ...

Answer 2

Als ein einfaches Beispiel, könnten Sie in XPages Hilfe suchen möchten Anwendung auf OpenNTF. Ich habe JSON erstellt, um in ein dijit.Tree-Steuerelement zu übergehen, um eine hierarchische Menüstruktur zu erstellen. Es lohnt sich, daran zu denken, dass JSON manuell dafür erstellt wurde und bevor ich von JsonJavaObject- und JsonParser-Klassen wusste, die von IBM erstellt wurden (möglicherweise bevor sie erstellt wurden, da die Connections-Mail-Integration älter ist).