JSF：Bean 属性不断恢复到最后一个选项卡值

Posted 2023-02-22

【中文标题】JSF：Bean 属性不断恢复到最后一个选项卡值

【英文标题】：JSF: Bean property keeps reverting to last tab values

【发布时间】：2012-06-07 20:57:42

【问题描述】：

我添加了包含输入字段的新选项卡。但是，由于某种原因，我的 managedbean 只能存储添加的最新选项卡（示例选项卡 3）的值。如果我要切换到较早的选项卡（示例选项卡 2）并尝试保存值，则存储的值始终会恢复为最后一个选项卡的输入字段值。在论坛中搜索绝对没有明确的解决方案，包括 *** 和 primefaces 论坛。重申一下，这里有一个详细的演练：

TabView -> 添加新选项卡（选项卡 1） 在选项卡 1 下保存 t1、f1、c1（成功） 添加新标签（标签 2） 添加新标签（标签 3） 在选项卡 3 下保存 t3、f3、c3（成功） 选择标签 2

将 t2、f2、c2 保存在选项卡 2 下（失败）-> 结果：选项卡 2 的值保存为选项卡 3 的值（t3、f3、c3）

<ui:composition template="/template/StakeholderTemplate.xhtml">

    <ui:define name="top">
        <h2>Customer Information Data Entry</h2>
    </ui:define>

    <ui:define name="contentInsert">
        <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  
        <p:dialog modal="true" widgetVar="statusDialog" header="Status"   
                  draggable="false" closable="false" resizable="false">  
            <p:graphicImage value="/adminItem/images/ajaxloading.gif" /> 
        </p:dialog> 

        <h:form id="form">

            <p:growl showDetail="true" /> 

            <h:panelGrid columns="1">

                <p:commandButton value="Add tab" process="@this" update="tw" actionListener="#backMicroPortalMB.addTab">
                </p:commandButton>
                <p:growl id="tabsave" showDetail="true" />
                <p:tabView id="tw" style="width:100%" activeIndex="#backMicroPortalMB.activeIndex" value="#backMicroPortalMB.unstructuredTabs"  var="tab"  dynamic="true" cache="false">
                    <p:ajax event="tabChange" process=":form" listener="#backMicroPortalMB.onTabChange"/>

                    <p:tab title="#tab.tabTitle" closable="true">

                        <h:outputLabel for="tabTitle" value="Please key in tab title:" />
                        <h:inputText id="tabTitle" value="#backMicroPortalMB.tab.tabTitle"/>
                        <br/>


                        <h:outputLabel for="fieldTitle" value="Please key in field title:" />
                        <h:inputText id="fieldTitle" value="#backMicroPortalMB.opt.fieldTitle" /><br/>

                        <h:outputLabel for="contentTitle" value="Please key in content:" />
                        <p:editor id="contentTitle" value="#backMicroPortalMB.opt.content" /><br/>

                        <p:commandButton value="Save" update="@form" action="#backMicroPortalMB.saveTab" />

                    </p:tab>  
                </p:tabView>
                <p:commandButton id="panel" value="Add" action="#backMicroPortalMB.createMicroPortal"/>  
            </h:panelGrid>
        </h:form>

    </ui:define>

</ui:composition>

豆码：

@ManagedBean
@ViewScoped
public class BackMicroPortalMB 

public void addTab(ActionEvent action) 

        FacesContext ctx = FacesContext.getCurrentInstance();
        ExternalContext ectx = ctx.getExternalContext();

        String url = "A tab";

        TabView tw = (TabView) ctx.getViewRoot().findComponent("form2:tw");
        TempTab tab = new TempTab();
        tab.setTabIndex(unstructuredTabs.size());
        tab.setTabTitle("new Tab");    
        unstructuredTabs.add(tab);

    //add new Tab

public void onTabChange(TabChangeEvent event) 

        FacesContext ctx = FacesContext.getCurrentInstance();
        ExternalContext ectx = ctx.getExternalContext();

        TempTab tab = this.unstructuredTabs.get(activeIndex);

        this.tab.setTabTitle(tab.getTabTitle());
        this.opt.setFieldTitle(tab.getOptField().iterator().next().getFieldTitle());
        this.opt.setContent(tab.getOptField().iterator().next().getContent());

        // FacesMessage msg = new FacesMessage("Tab Changed", "Active Tab: " + event.getTab() + this.selectedIndex);  

        // FacesContext.getCurrentInstance().addMessage(null, msg);  
    

public void saveTab() 

        FacesContext ctx = FacesContext.getCurrentInstance();
        Long stakeholderId = (Long) ctx.getExternalContext().getSessionMap().get("stakeholderId");        
        TempTab currentTab = this.unstructuredTabs.get(activeIndex);
        currentTab.setTabTitle(this.tab.getTabTitle());
        Collection<OptionalField> optFieldList = new ArrayList<OptionalField>();        
        optFieldList.add(this.opt);
        currentTab.setOptField(optFieldList);

        FacesMessage msg = new FacesMessage(tab.getTabTitle() + " Saved!");

        ctx.addMessage(null, msg);
    //add new Tab   

我在 PrimeFaces 表单中进行了搜索，我得到的唯一有用的回复是谷歌 viewscoped 和 tabview。但是，这里的问题到底是什么？我对 PrimeFaces 和 JSF 非常陌生，非常感谢您的建议。

PrimeFaces 3.3 JSF 2.1 Glassfish 3.1.2

【参考方案1】：

您正在使用动态选项卡视图，其中包含一组选项卡作为值，并将每个选项卡的所有输入值绑定到一个且相同的 bean 属性。在处理来自所有选项卡的输入期间，每个选项卡的输入值将按顺序相互覆盖，直到到达最后一个选项卡，因此 bean 仅以最后一个选项卡的值结束。

您需要将特定于选项卡的属性绑定到特定于选项卡本身的模型对象，而不是绑定到所有选项卡之间共享的托管 bean 属性。在您的情况下，它是 #tab 对象。所以你的<p:tab> 内容最终应该是

<h:outputLabel for="tabTitle" value="Please key in tab title:" />
<h:inputText id="tabTitle" value="#tab.tabTitle"/>

<h:outputLabel for="fieldTitle" value="Please key in field title:" />
<h:inputText id="fieldTitle" value="#tab.fieldTitle" /><br/>

<h:outputLabel for="contentTitle" value="Please key in content:" />
<p:editor id="contentTitle" value="#tab.content" /><br/>

【讨论】：

亲爱的 BalusC，非常感谢您的解释和解决方案！只是好奇，我知道这是一个离题的讨论，但是您使用什么资源来了解这个？