동적 발표자 위젯을 호스팅하는 탭 컨테이너

Question

각 탭에서 PresenterWidget을 호스팅하는 탭 컨테이너를 표시하려고합니다.

탭은 동적이어서 열거 나 닫을 수 있습니다. 또한 현재 선택된 탭은 URL에 지속적으로 있어야하므로 공유하거나 책갈피에 추가 할 수 있습니다.

GWTP에는 TabContainerPresenter가 있지만 각 탭에는 PresenterWidget이 아닌 Presenter를 호스팅하는 것으로 나타났습니다. 탭을 동적으로 추가 할 수 없으며 배치 관계도 (물론) 정적입니다.

또한 탭이 PresenterWidget을 호스팅하는 경우 특별한 구현이 필요하지 않으므로 탭 컨테이너를 사용할 수 있다는 내용의 여러 토론을 보았습니다. 예 : GWT TabLayoutPanel.

는하지만 이해가 안 돼요 어떻게 내 PresenterWidget (즉, 탭에서 호스팅되는) 수명주기 탭 선택에 호출됩니다, 또는 내가 작업 생명주기 (onReveal, onReset을 가지고 을 어떻게해야합니까. ..)?

가시적 인 내용을 관리하는 탭 컨테이너를 슬롯을 통해 만들어야합니다. ?

다른 아이디어? 벤

Answer 1

선택한 탭이 URL에서 지속 할 필요가있는 경우

는이 장소이며, 따라서 발표자가 아닌 PresenterWidget으로 표현되어야한다.

Answer 2

Ben, TabContainerPresenter는 각 탭이 장소 인 경우에만 적용 할 수 있습니다. 귀하의 문제에 관해서는 각 탭에서 동일한 발표자 위젯을 설정하기 만하면됩니다. 발표자 위젯을 여러 탭에 삽입하는 경우 싱글 톤이되지 않도록 할 수 있습니다.

@Override 
    public void setInSlot(Object slot, Widget content) { 
     if (content == null) return; 

     if (slot == ContractPopupWithTabPresenter.TYPE_PermitContent) { 
      permit.clear(); 
      permit.add(content); 
     } else if (slot == ContractPopupWithTabPresenter.TYPE_ErpMessageContent) { 
      erp.clear(); 
      erp.add(content); 
     } else if (slot == ContractPopupWithTabPresenter.TYPE_ContractDetailContent) { 
      contractDetail.clear(); 
      contractDetail.add(content); 
     } else { 
      super.setInSlot(slot, content); 
     } 
    } 

는 그런 다음 beforeSelection를 추가 : 내 샘플 허가 및 ERP는 TabLayoutPanel에서 탭입니다에,보기에 그런

@Override 
protected void onBind() { 
    super.onBind(); 
    setInSlot(TYPE_PermitContent, permitPresenter); 
    setInSlot(TYPE_ErpMessageContent, orgErpMessagePresenter); 
    setInSlot(TYPE_ContractDetailContent, contractDetailPresenter); 
} 

:이 주요 발표자의 슬롯에 발표자 위젯을 설정하는 샘플입니다 핸들러를 TabLayoutPanel에 다음과 같이 표시합니다.

tabPanel.addBeforeSelectionHandler(new BeforeSelectionHandler<Integer>() { 
     @Override 
     public void onBeforeSelection(BeforeSelectionEvent<Integer> event) { 
      //TODO: Set your presenter widget here with whatever argument it needs to populate itself 
     } 
    }); 

희망이 있습니다.

Answer 3

여기는 샘플 UiBinder 구현입니다. 물론 이것은 정적 구현입니다. 런타임에 탭 수가 결정되면 자체 동적 구현을해야합니다.

<g:PopupPanel styleName="{style.popupPanel}" modal="true"> 
     <g:HTMLPanel> 
      <g:HTMLPanel styleName="titleHeader" height="20px"> 
       <g:Label styleName="titleHeaderCaption" ui:field="titleLabel" /> 
       <g:Image styleName="titleImage" ui:field="titleCloseImage" url="{images.actionCancel.getURL}"/> 
      </g:HTMLPanel> 
      <g:CaptionPanel captionText="{lbl.contractDetails}" styleName="captionPanel_popup"> 
       <g:HTMLPanel ui:field="contractDetail"/> 
      </g:CaptionPanel> 
      <g:TabLayoutPanel ui:field="tabPanel" barUnit="PX" barHeight="30"> 
       <g:tab> 
        <g:header size="7"><b>Permit</b></g:header> 
        <g:HTMLPanel ui:field="permit"/> 
       </g:tab> 
       <g:tab> 
        <g:header size="7"><b>ERP</b></g:header> 
        <g:HTMLPanel ui:field="erp"/> 
       </g:tab> 
      </g:TabLayoutPanel> 
      <g:HTMLPanel styleName="{style.separator}"> 
       <hr/> 
      </g:HTMLPanel> 
      <g:HTMLPanel styleName="buttons"> 
       <g:Button text="{lbl.cancel}" styleName="button" ui:field="btnCancel"/> 
       <g:Button text="{lbl.submit}" styleName="button" ui:field="btnSubmit"/> 
      </g:HTMLPanel> 
     </g:HTMLPanel> 
    </g:PopupPanel>