2013-07-01 2 views
1

내 이슈 트래킹 응용 프로그램에는 여러 범주 (클라이언트, 할당 됨, 모듈/유형, 우선 순위, 상태, 빌드 등)가 있습니다. 할당 된 두 열 (EG : 클라이언트 및 할당 됨, 클라이언트 및 모듈, 할당 됨 및 우선 순위, 우선권 및 클라이언트 등)이 여러 개 있습니다.모바일 앱 페이지에서 어떤 모바일 앱 페이지를 호출했는지, 무엇을 선택했는지 확인할 수 있습니까?

XPages Mobile 컨트롤을 사용하여 모바일 페이지를 구현하고 있습니다. 그래서 모바일 홈 페이지에서의 뷰 선택은 적절한 제 1 카테고리를 선택하기위한 페이지로 나아가고, 제 2 카테고리를 선택하기위한 페이지로 이동한다. 알아 내지 못한 것은, 일단 제 1 카테고리의 선택이다 카테고리 값이 완료되고, 두 번째 범주 선택 페이지가 여기에 값이 이전에 선택한 무엇인지, 열려 지금까지 내 샘플 페이지입니다 :

<xe:singlePageApp 
    id="singlePageApp1" 
    selectedPageName="mhome"> 
    <xe:appPage 
     id="appPage1" 
     pageName="mhome"> 
     <xe:djxmHeading 
      id="djxmHeading1" 
      label="Home"> 
     </xe:djxmHeading> 
     <xe:djxmRoundRectList 
      id="djxmRoundRectList1"> 
      <xe:djxmLineItem 
       id="djxmLineItem1" 
       label="Issues by Client By Assigned To" 
       moveTo="selectClient1"> 
      </xe:djxmLineItem> 
      <xe:djxmLineItem 
       id="djxmLineItem2" 
       label="Issues by Client By Module" 
       moveTo="selectClient2"> 
      </xe:djxmLineItem> 
     </xe:djxmRoundRectList> 
    </xe:appPage> 
    <xe:appPage 
     id="appPage2" 
     pageName="selectClient1" 
     resetContent="true"> 
     <xe:djxmHeading 
      id="djxmHeading2" 
      label="Select Client" 
      moveTo="mhome" 
      back="back"> 
     </xe:djxmHeading> 
     <xp:panel> 
      <xp:this.data> 
       <xp:dominoView 
        var="view1" 
        viewName="ByClientAssignedTo"> 
       </xp:dominoView> 
      </xp:this.data> 
      <xe:djxmRoundRectList 
       id="djxmRoundRectList2"> 
       <xp:repeat 
        id="repeat1" 
        rows="30" 
        value="#{javascript:view1.getColumnValues(0);}" 
        var="client" 
        indexVar="clidx"> 
        <xe:djxmLineItem 
         id="djxmLineItem3" 
         label="#{javascript:client}" 
         moveTo="selectAssignedTo1"> 
        </xe:djxmLineItem> 
       </xp:repeat> 
      </xe:djxmRoundRectList> 
     </xp:panel> 
    </xe:appPage> 
    <xe:appPage 
     id="appPage3" 
     pageName="selectClient2" 
     resetContent="true"> 
     <xe:djxmHeading 
      id="djxmHeading3" 
      label="Select Client (2)" 
      moveTo="mhome" 
      back="back"> 
     </xe:djxmHeading> 
     <xp:panel> 
      <xp:this.data> 
       <xp:dominoView 
        var="view1" 
        viewName="ByClientAssignedTo"> 
       </xp:dominoView> 
      </xp:this.data> 
      <xe:djxmRoundRectList 
       id="djxmRoundRectList3"> 
       <xp:repeat 
        id="repeat2" 
        rows="30" 
        value="#{javascript:view1.getColumnValues(0)}" 
        var="client" 
        indexVar="clidx"> 
        <xe:djxmLineItem 
         id="djxmLineItem4" 
         label="#{javascript:client}" 
         moveTo="selectType1"> 
        </xe:djxmLineItem> 
       </xp:repeat> 
      </xe:djxmRoundRectList> 
     </xp:panel> 
    </xe:appPage> 
    <xe:appPage 
     id="appPage4" 
     pageName="selectAssignedTo1" 
     resetContent="true"> 
     <xe:djxmHeading 
      id="djxmHeading4" 
      back="back" 
      label="Select Assigned To" 
      moveTo="selectClient1"> 
     </xe:djxmHeading> 
     <xp:text 
      escape="true" 
      id="computedField1"> 
      <xp:this.value><![CDATA[#{javascript:"What was selected on the previous page?"}]]></xp:this.value> 
     </xp:text> 
    </xe:appPage> 
</xe:singlePageApp> 

어떤 도움을 그는 잘 될 것 lpful! :-)

Newbs

답변

2

기술 1 : Xpages 내 그것은에 대한 문서가 없습니다 불구하고
가 djxmLineItem 이벤트 (내가 발견 한 것을) onclick 이벤트 이벤트를 지원 . dojox.mobile ListItem에서 dojo의 일부로 문서화됩니다.

필요한 경우 다른 컨트롤에 대한 onClick 이벤트를 만들고 xe : djxmLineItem 태그 아래에 코드를 복사합니다. 지연 평가 (#)를 사용하여 indexVar에 액세스하여 반복 내부의 어떤 ListItem을 클릭했는지 식별 할 수 있습니다.

이벤트 핸들러를 추가 할 때의 주요 단점은 내용을 렌더링하게하려면 대상 페이지 내부의 내용을 부분적으로 새로 고침해야한다는 것입니다. 이는 새로 고침 대상을 사용할 수 있도록 페이지 내용을 미리로드해야 함을 의미합니다. 이것은 모바일 컨트롤의 현재 구현에서 버그 일 가능성이 높지만 PAIN! 일 수 있습니다.

기술 2 :
위의 부작용없이 페이지와 선택한 항목을 추적합니다. 이벤트 처리기를 추가하지 마십시오. 대신 항목의 "id"가 moveTo 속성의 매개 변수로 추가되는 방식으로 목록 항목을 만듭니다.

예 :

<xe:djxmRoundRectList id="menuList"> 
    <xp:repeat value="#{compositeData.view.listItems}" 
    var="listItem" indexVar="menuIndex" id="listRepeat" rows="999"> 
    <xe:djxmLineItem id="listItem" 
     label="#{listItem.label}" moveTo="#{compositeData.view.moveTo}&amp;id=#{listItem.id}&amp;clear=true" 
     rightText="#{listItem.rightText}"> 
    </xe:djxmLineItem> 
    </xp:repeat> 
</xe:djxmRoundRectList> 

다음 코드는 모든 해 AppPage의 전환 이벤트를 이벤트 리스너를 추가 페이지의 하단에 추가 될 수있다.

<xp:scriptBlock id="scriptBlock1"> 
    <xp:this.value> 
     <![CDATA[XSP.addOnLoad(function(){ 
      dijit.registry.byClass("extlib.dijit.mobile.View").forEach(function(widget, index, hash){ 
      dojo.connect(widget, "onBeforeTransitionOut", function(moveTo, dir, transition, context, method){ 
      var deferred = adminService.setMoveTarget(moveTo); 
     }); 
     }); 
    }); 
    ]]> 
    </xp:this.value> 
</xp:scriptBlock> 

이벤트 핸들러는 jsonRpcService를 호출하여 (페이지 전환이 발생하기 전에) bean에 세부 사항을 전달합니다. AdminSession 콩에서

<xe:jsonRpcService id="jsonRpcService1" serviceName="adminService" 
    state="true"> 
    <xe:this.methods> 
    <xe:remoteMethod name="setMoveTarget" 
     script="AdminSession.setMoveTarget(moveTo);return true;"> 
     <xe:this.arguments> 
     <xe:remoteMethodArg name="moveTo"></xe:remoteMethodArg> 
     </xe:this.arguments> 
     </xe:remoteMethod>  
    </xe:this.methods> 
</xe:jsonRpcService> 

setMoveTarget() 메소드는 선택한 항목을 식별뿐만 아니라 페이지 전환을 추적하기 위해 매개 변수를 구문 분석 할 수 있어야한다.

참고 : clear = true를 추가하는 것은 페이지로 이동하는 경우에만 페이지의 내용을 재설정하고 다시 같은 페이지로 이동할 때를 재설정하는 것이 아닙니다.

+0

ps : 샘플 코드에 대한 크레딧은 함께 작업중인 프로젝트를 개발 한 Nathan Freeman과 관련이 있습니다. –

+0

나는 기술 # 1이 아주 잘 작동하고있어, 고마워. 약간의 해결책 코드로 업데이트하겠습니다. – Newbs

1

다음은이주의 사항과 함께 작동하는 수정 된 접근법에 대한 코드입니다.

  1. 뷰는 첫 번째 열에 만 범주화되어 있지만 필요하지는 않습니다. 이 페이지는 "컬럼 값으로 필터링"을 사용하여 선택된 문서를 표시합니다. 이는 뷰에서 분류를 제거하지 않으면 subcatAppPage에 대한 반복 제어가 여러 값을 찾지 못하기 때문입니다.

  2. 표시 할 뷰를 정의하기 위해 페이지에서 dataContext 컨트롤을 사용했습니다. 모바일 컨트롤을

    <xp:this.dataContexts> 
        <xp:dataContext 
        var="viewListItems"> 
        <xp:this.value><![CDATA[#{javascript: 
         try { 
         var returnVal = []; 
         returnVal.push({name:"Issues by Assigned To By Client", alias:"ByAssignedToClient", cats:["AssignedTo","Client"]}); 
         returnVal.push({name:"Issues by Assigned To By Module", alias:"ByAssignedToType", cats:["AssignedTo","Type"]}); 
         returnVal.push({name:"Issues by Client By Assigned To", alias:"ByClientAssignedTo", cats:["Client","AssignedTo"]}); 
         returnVal.push({name:"Issues by Client By Module", alias:"ByClientType", cats:["Client","Type"]}); 
         return returnVal; 
         } catch(e) { 
         _dump(e); 
         } 
        }]]></xp:this.value> 
        </xp:dataContext> 
    </xp:this.dataContexts> 
    

을 지금 여기에 있습니다 : : 그것은 더 복잡성을 필요로하지만 지금은 작동

코딩
<xe:singlePageApp 
     id="singlePageApp1" 
     selectedPageName="mhome"> 
     <xe:appPage 
      id="homeAppPage1" 
      pageName="mhome"> 
      <xe:djxmHeading 
       id="djxmHeading1" 
       label="Home"> 
      </xe:djxmHeading> 
      <xe:djxmRoundRectList id="djxmRoundRectList1"> 
       <xp:repeat 
        id="repeat3" 
        rows="10" 
        var="listItem" 
        indexVar="liidx" 
        value="#{viewListItems}"> 
        <xe:djxmLineItem 
         id="djxmLineItem5" 
         moveTo="selectCat" 
         label="#{javascript:listItem.name;}"> 
         <xp:eventHandler 
          event="onClick" 
          submit="true" 
          refreshId="selectCatPagePanel" 
          refreshMode="partial"> 
          <xp:this.action> 
           <xp:actionGroup> 
            <xp:executeScript script="#{javascript:sessionScope.m_selectedView = listItem;}"></xp:executeScript> 
           </xp:actionGroup> 
          </xp:this.action> 
         </xp:eventHandler> 
        </xe:djxmLineItem> 
       </xp:repeat> 
      </xe:djxmRoundRectList> 
     </xe:appPage> 
     <xe:appPage 
      id="categoryAppPage2" 
      pageName="selectCat" 
      resetContent="true" 
      preload="true"> 
      <xp:panel id="selectCatPagePanel"> 
       <xp:this.data> 
        <xp:dominoView var="view1"> 
         <xp:this.viewName><![CDATA[#{javascript: 
try{ 
    var ssview = sessionScope.m_selectedView; 
    if(ssview == null) return "ByClientAssignedTo"; 
    return ssview.alias; 
} catch(e) { 
    return "ByClientAssignedTo"; 
}}]]></xp:this.viewName> 
        </xp:dominoView> 
       </xp:this.data> 
       <xe:djxmHeading 
        id="djxmHeading2" 
        moveTo="mhome" 
        back="back"> 
        <xe:this.label><![CDATA[#{javascript: 
var ssview = sessionScope.m_selectedView; 
if(ssview == null) return "Select something"; 
return "Select " + ssview.cats[0]; 
}]]></xe:this.label> 
       </xe:djxmHeading> 
       <xp:text 
        escape="true" 
        id="computedField3"> 
        <xp:this.value><![CDATA[#{javascript: 
var ssview = sessionScope.m_selectedView; 
if(ssview == null) return "View is nothing" 
return "View is: " + ssview.name; 
}]]></xp:this.value> 
       </xp:text> 
       <xe:djxmRoundRectList id="djxmRoundRectList2"> 
        <xp:repeat 
         id="repeat1" 
         rows="30" 
         value="#{javascript:view1.getColumnValues(0);}" 
         var="catvalue" 
         indexVar="catidx"> 
         <xe:djxmLineItem 
          id="djxmLineItem3" 
          label="#{javascript:catvalue}" 
          moveTo="selectSubcat"> 
          <xp:eventHandler 
           event="onClick" 
           submit="true" 
           refreshId="selectSubCatPagePanel" 
           refreshMode="partial"> 
           <xp:this.action><![CDATA[#{javascript: 
var ssview = sessionScope.m_selectedView; 
ssview.selectedCat = catvalue 
sessionScope.m_selectedView = ssview; 
}]]></xp:this.action> 
          </xp:eventHandler> 
         </xe:djxmLineItem> 
        </xp:repeat> 
       </xe:djxmRoundRectList> 
      </xp:panel> 
     </xe:appPage> 
     <xe:appPage 
      id="subcatAppPage3" 
      pageName="selectSubcat" 
      preload="true" 
      resetContent="true"> 
      <xp:panel id="selectSubCatPagePanel"> 

       <xe:djxmHeading 
        id="djxmHeading3" 
        moveTo="selectCat" 
        back="back"> 
        <xe:this.label><![CDATA[#{javascript: 
var ssview = sessionScope.m_selectedView; 
if(ssview == null) return "Select something"; 
return "Select " + ssview.cats[1];}]]></xe:this.label> 
       </xe:djxmHeading> 
       <xp:text 
        escape="false" 
        id="computedField1"> 
        <xp:this.value><![CDATA[#{javascript: 
var ssview = sessionScope.m_selectedView; 
if(ssview == null) return "blah blah"; 
"View is: " + ssview.name + 
"<br/>" + ssview.cats[0] + ": " + ssview.selectedCat; 
}]]></xp:this.value> 
       </xp:text> 
       <xe:djxmRoundRectList id="djxmRoundRectList3"> 
        <xp:repeat 
         id="repeat2" 
         rows="10" 
         var="subcatValue" 
         indexVar="catidx"> 
         <xp:this.value><![CDATA[#{javascript://var vals = @Unique(view2.getColumnValues(1)); 
//vals.sort(); 
var vals = []; 
try{ 
    var ssview = sessionScope.m_selectedView; 
    if(ssview==null) return vals; 
    vals = @DbLookup("", ssview.alias, ssview.selectedCat, 2); 
    return @Unique(vals); 
} catch(e) { 
    return vals; 
} 
return vals;}]]></xp:this.value> 
         <xe:djxmLineItem 
          id="djxmLineItem1" 
          label="#{javascript:subcatValue}" 
          moveTo="showView"> 
          <xp:eventHandler 
           event="onClick" 
           submit="true" 
           refreshId="showViewPagePanel" 
           refreshMode="partial"> 
           <xp:this.action><![CDATA[#{javascript: 
var ssview = sessionScope.m_selectedView; 
if(ssview == null) return; 
ssview.selectedSubcat = subcatValue 
sessionScope.m_selectedView = ssview; 
}]]></xp:this.action> 
          </xp:eventHandler> 
         </xe:djxmLineItem> 
        </xp:repeat> 
       </xe:djxmRoundRectList> 
      </xp:panel> 
     </xe:appPage> 
     <xe:appPage 
      id="viewAppPage4" 
      pageName="showView" 
      preload="true" 
      resetContent="true"> 
      <xp:panel id="showViewPagePanel"> 
       <xe:djxmHeading 
        id="djxmHeading4" 
        moveTo="selectSubcat" 
        back="back"> 
        <xe:this.label><![CDATA[#{javascript: 
var ssview = sessionScope.m_selectedView; 
if(ssview == null) return "asdaasd"; 
ssview.name;}]]></xe:this.label> 
       </xe:djxmHeading> 
       <xp:text 
        escape="false" 
        id="computedField2"> 
        <xp:this.value><![CDATA[#{javascript: 
var ssview = sessionScope.m_selectedView; 
if(ssview == null) return "blah blah"; 
"View is: " + ssview.name + 
"<br/>" + ssview.cats[0] + ": " + ssview.selectedCat + 
"<br/>" + ssview.cats[1] + ": " + ssview.selectedSubcat; 
}]]></xp:this.value> 
       </xp:text> 
       <xe:dataView 
        id="dataView1" 
        columnTitles="true"> 
        <xe:this.data> 
         <xp:dominoView var="view4"> 
          <xp:this.viewName><![CDATA[#{javascript: 
try{ 
    var ssview = sessionScope.m_selectedView; 
    if(ssview == null) return "ByClientAssignedTo"; 
    return ssview.alias; 
} catch(e) { 
    return "ByClientAssignedTo"; 
}}]]></xp:this.viewName> 
          <xp:this.keys><![CDATA[#{javascript:try{ 
    var ssview = sessionScope.m_selectedView; 
    if(ssview == null) return ["xxx","yyy"]; 
    if(!ssview.selectedCat) return ["xxx"]; 
    if(!ssview.selectedSubcat) return [ssview.selectedCat] 
    return [ssview.selectedCat, ssview.selectedSubcat]; 
    //return ssview.selectedCat; 
} catch(e) { 
    return ["xxx","yyy"]; 
}}]]></xp:this.keys> 
         </xp:dominoView> 
        </xe:this.data> 
        <xe:this.summaryColumn> 
         <xe:viewSummaryColumn 
          columnName="Subject" 
          columnTitle="Subject" 
          contentType="text"> 
         </xe:viewSummaryColumn> 
        </xe:this.summaryColumn> 
       </xe:dataView> 
      </xp:panel> 
     </xe:appPage> 
    </xe:singlePageApp> 

해피!

Newbs