托管动态演示者小部件的选项卡容器答案

【问题标题】：Tab container hosting dynamic presenter widgets托管动态演示者小部件的选项卡容器
【发布时间】：2012-05-12 16:45:39
【问题描述】：

我想显示一个选项卡容器，其中每个选项卡都承载一个 PresenterWidget。

标签是动态的 - 它们可以打开和关闭。此外，当前选定的选项卡应该以某种方式在 URL，以便可以共享或添加书签。

我看到 GWTP 有 TabContainerPresenter，但它是用于托管一个每个选项卡上的 Presenter，而不是 PresenterWidget。你也不能添加选项卡是动态的，与位置的关系（当然）是静态的。

我还看到几个关于这个问题的讨论说如果标签托管 PresenterWidget，不需要特殊实现，所以我们可以使用任何标签容器。例如 GWT 选项卡布局面板。

但我不明白我的 PresenterWidget（托管在选项卡）生命周期将在选项卡选择时调用，或者我应该怎么做让生命周期工作（onReveal，onReset ...）？

我想我必须构建自己的标签容器来管理可见内容通过插槽？

还有其他想法吗？

本

【问题讨论】：

标签： gwt tabs gwt-platform

【解决方案1】：

Ben，TabContainerPresenter 仅适用于每个选项卡是一个地方的情况。至于您的问题，您只需要在每个选项卡中设置相同的演示者小部件。如果您将演示者小部件注入多个选项卡中，您可能希望演示者小部件不是单例。这是在主演示器的插槽中设置演示器小部件的示例：

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

然后在视图上，在我的示例 permit 和 erp 上是 TabLayoutPanel 中的选项卡：

@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);
        }
    }

然后在您的 TabLayoutPanel 上添加一个 beforeSelection 处理程序，它可能看起来像这样：

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
        }
    });

希望这会有所帮助。

【讨论】：

谢谢！您能否展示一个用于托管 erp 并允许演示者的 UiBinder 示例？如果它们是标签，为什么每个都有不同的面板？它们应该托管在显示所选选项卡的同一面板上..

【解决方案2】：

如果任何选定的选项卡应该在 URL 中保持不变，那么它就是一个 Place，因此应该由 Presenter 表示，而不是由 PresenterWidget 表示。

【讨论】：

你是对的 - 但我有未知数量的同一演示者的实例 - 在多个选项卡中打开。所以它一定是PresenterWidget。至于 URL 持久性 - 我认为让父演示者（包含选项卡容器并有位置的演示者）实现 perpareFromRequest()，检查一些 tabId 参数，然后切换到相关选项卡。所以我仍然不明白如何在一些常规小部件（如 TabContainerPresenter JavaDoc 中所写）中托管 PresenterWidget，如 TabLayoutPanel 并且仍然支持演示者生命周期..

【解决方案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>

【讨论】：