创建主 - 细节表和对话框，如何重复使用相同的对话框进行创建和编辑 [英] Creating master-detail table and dialog, how to reuse same dialog for create and edit

问题描述

我正在尝试创建一个对话框，用于创建对象和更新对象。所以如果我碰巧点击新按钮，我将会出现一个对话框，其中包含要填写的空字段，或者如果我点击一个条目的编辑按钮，该条目的数据将显示在更新的对话框中。

I am attempting to create a dialog that will serve the purpose of both creating objects and updating them. So if I happen to click the 'new' button I will be presented a dialog containing empty fields to be filled or if I click on an edit button for an entry, that entry's data will presented in the dialog for update.

按照5.2版本的原型展示示例，我可以以只读的outputText形式呈现数据，但是当我将其更改为inputText时，该字段保持为空。以下代码是我所拥有的示例：

Following the example in the primefaces showcase for version 5.2, I can present the data in a read only outputText form, however when I change it to an inputText, the field remains empty. The following code is an example of what I have:

<h:form id="form">    
  <p:dataGrid id="guestList" var="guest" value="${guestList.guests}" columns="3" paginator="true" rows="20">
    <f:facet name="header">
      Guest List
    </f:facet>

    <p:panel>
      <h:outputText value="${guest.name}" />
      <br />
      <h:outputText value="${guest.street}" />
      <br />
      <h:outputText rendered="#{guest.street2.length() gt 0}"
        value="${guest.street2}" />
      <h:panelGroup rendered="#{guest.street2.length() gt 0}">
        <br />
      </h:panelGroup>
      <h:outputText value="${guest.city}, " />
      <h:outputText value="${guest.state} " />
      <h:outputText value="${guest.zipCode}" />
      <p:commandButton update="@form:newGuestDetail" oncomplete="PF('newGuestDialog').show()" icon="ui-icon-edit" styleClass="ui-btn-inline">
        <h:outputText styleClass="ui-icon ui-icon-edit" style="margin:0 auto;" />
        <f:setPropertyActionListener value="#{guest}" target="#{guestList.selectedGuest}" />
      </p:commandButton>
    </p:panel>
  </p:dataGrid>

  <p:dialog header="#{guestList.hasSelected() ? 'Edit Guest' : 'New Guest'}" widgetVar="newGuestDialog" modal="true" showEffect="fade" hideEffect="fade">
    <p:outputPanel id="newGuestDetail">
      <h:outputText value="'#{guestList.selectedGuest.name}'"/>
      <p:inputText id="guestName" value="#{guestList.hasSelected() ? '' : guestList.selectedGuest.name}" pt:placeholder="Name"/>
      <p:commandButton value="#{guestList.selectedGuest == null ? 'Create Guest' : 'Update Guest'}"/>
    </p:outputPanel>
  </p:dialog>
</h:form>

hasSelected（）方法评估所选客人是否为空，如果不为空则返回true。当clickButton被点击以便一个对象可以被对话框检索时，应该设置selectedGuest，然而，在对于selectedGuest的get / set中进行跟踪，我看不到使用上面的代码片段调用的setter。如果我删除 inputText ，那么即使 hasSelected 仍然返回false，因此新访客标题对话框， outputText 填充一个值。

The hasSelected() method evaluates whether the selected guest is null or not, returning true if not null. The selectedGuest should be set when the commandButton is clicked so that an object is available for retrieval by the dialog, however, with tracers in the get/set for selectedGuest, I am not seeing the setter called with the above snippet. If I remove the inputText, then even though the hasSelected is still returning false, and thus the 'New Guest' is heading the dialog, the outputText is filled with a value.

我发现这个伟大的帖子谈论了执行行动，行动监听器等，但不要这么认为我的问题：动作和actionListener之间的区别。

I found this great post talking about the order of execution with respect to the action, action listener, etc., but don't think this quite my issue: Differences between action and actionListener.

所以最终的问题是为什么当我只有一个outputText时，我的setter会被命令按钮调用，但是一个inputText，我从来没有看到它在日志中调用？

So the ultimate question is why will my setter get called with the command button when I only have an outputText, but with an inputText, I never see it called in the log?

我感谢任何人可以提供的时间和帮助。

I appreciate the time and help anyone can provide.

推荐答案

即使我们解决您的问题，这个构造

Even if we fix your problem, this construct

<p:inputText value="#{guestList.hasSelected() ? '' : guestList.selectedGuest.name}">

不会去工作。它需要引用一个model属性，而不是一个空字符串。

is not ever going to work. It needs to reference a model property, not an empty string.

最好只需重新使用编辑表单，让创建按钮预先建立一个空白实体。这将在视图侧面简化很多。如果实体有一个 @Id 属性，它只会在数据库中持久存在时才会更容易。

You'd best just reuse the edit form and let the create button precreate an empty entity. This would simplify a lot in the view side. It'd be more easy if the entity has an @Id property which is only present when it's persisted in the database.

这是一个开球示例：

<h:form id="entitiesForm">
    <p:dataTable id="entitiesTable" value="#{bean.entities}" var="entity">
        <p:column>#{entity.foo}</p:column>
        <p:column>#{entity.bar}</p:column>
        <p:column>
            <p:commandButton id="edit" value="Edit" 
                process="@this" action="#{bean.edit(entity)}"
                update=":entityDialog" oncomplete="PF('entityDialog').show()" />
            <p:commandButton id="delete" value="Delete" 
                process="@this" action="#{bean.delete(entity)}"
                update=":entitiesForm:entitiesTable" />
        </p:column>
    </p:dataTable>
    <p:commandButton id="add" value="Add" 
        process="@this" action="#{bean.add}" 
        update=":entityDialog" oncomplete="PF('entityDialog').show()" />
</h:form>

<p:dialog id="entityDialog" widgetVar="entityDialog" 
    header="#{empty bean.entity.id ? 'New' : 'Edit'} entity">
    <h:form id="entityForm">
        <p:inputText id="foo" value="#{bean.entity.foo}" />
        <p:inputText id="bar" value="#{bean.entity.bar}" />
        <p:commandButton id="save" value="#{empty bean.entity.id ? 'Create' : 'Update'} entity" 
            process="@form" action="#{bean.save}"
            update=":entitiesForm:entitiesTable" oncomplete="PF('entityDialog').hide()" />
    </h:form>
</p:dialog>

使用这个 @ViewScoped bean： p>

With this @ViewScoped bean:

private List<Entity> entities; // +getter
private Entity entity; // +getter

@EJB
private EntityService entityService;

@PostConstruct
public void load() {
    entities = entityService.list();
    entity = null;
}

public void add() {
    entity = new Entity();
}

public void edit(Entity entity) {
    this.entity = entity;
}

public void save() {
    entityService.save(entity); // if (id==null) em.persist() else em.merge()
    load();
}

public void delete(Entity entity) {
    entityService.delete(entity); // em.remove(em.find(type, id))
    load();
}

另请参见：

• 为实体创建主详细页面，如何链接它们以及要选择的bean范围


• 在提交验证错误之后保持p：对话框



See also:

• Creating master-detail pages for entities, how to link them and which bean scope to choose
• Keep p:dialog up when a validation error occurs after submit

这篇关于创建主 - 细节表和对话框，如何重复使用相同的对话框进行创建和编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！