2016-06-29 2 views
1

재사용 가능한 메뉴 사용자 정의 컨트롤을 만들고 싶습니다. 개체를 해당 형식으로 사용하는 사용자 지정 컨트롤을 작성하고 있습니다. 이 전화 번호는 configuration입니다.Xpages : JSON 객체를 사용자 정의 컨트롤에 전달하여 메뉴 만들기

메뉴에 JSON 객체를 전달하고 싶습니다. 유연성있는 구조를 제공합니다. 한 수준의 컨테이너를 보유하고 싶습니다. 나는 평면 ​​메뉴를 가지고 있을지도 모르지만 그렇게해서 부 메뉴로 왜곡 될 수 있습니다.

enter image description here

는 내가 처음처럼 (실제로 (아래의 "날짜까지"와 같은) 컨테이너해야하는 경우 표시하거나 평평한 메뉴로 매개 변수와 함께, 내 첫 번째 수준 메뉴 객체가 컨테이너 될 것입니다 파악 4 메뉴). 네비게이터 컨트롤에서 컨테이너는 실제로 "컨테이너"가 아닌 경우이를 설정할 수 있도록 "투명"속성을 가지고 있습니다.

문제가 JSON을 구문 분석하고 있습니다. 한 단계 (예 : 컨테이너 없음)를 수행 할 수 있지만 여러 단계를 가져올 수 없습니다.

JSLint를 통해 내 JSON을 실행했지만 유효하다고 말했지만, 내가하고 싶은 일을 위해 생성되지 않은 것일 수 있습니다.

아래 내 컨트롤과이를 호출하고 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"> 
    <!--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> 
+0

먼저 JsonObject로 변환해야 할 수도 있습니다. https : //www.ibm.com/support/knowledgecenter/en/SSEUEX_2.0.3/com.ibm JSONObject.html –

+0

반복 제어를 사용해야합니까? 목적이 단순한 표시라면 나는 다른 것을 해결할 것입니다 (결과는 중첩 된 목록입니다). http://jsfiddle.net/XE6Nw/ –

답변

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의 반복 컨트롤은 자바 스크립트의 객체 및 배열과 함께 완벽하게 작동합니다. 다른 것으로 변환 할 필요가 없습니다 ...

0

더 기본적인 예를 들어, 당신은 XPages 도움말을보고 할 수 있습니다 OpenNTF에서의 응용. JSON을 생성하여 dijit.Tree 컨트롤에 전달하여 계층 적 메뉴 구조를 만들었습니다. JSON은 수동으로 만들어졌으며 IBM에서 만든 JsonJavaObject 및 JsonParser 클래스에 대해 알기도 전에 가치가있었습니다 (연결 메일 통합 이전에 만들어 졌기 전에 가능할 수도 있음).