jsf - hacer - fichas del cuadro de dialogo

Crear tabla y cuadro de diálogo de detalles maestros, cómo reutilizar el mismo cuadro de diálogo para crear y editar

Question

Estoy intentando crear un diálogo que sirva tanto para crear objetos como para actualizarlos. Entonces, si hago clic en el botón ''nuevo'', se me presentará un cuadro de diálogo que contiene campos vacíos para completar o si hago clic en un botón de edición para una entrada, los datos de esa entrada se presentarán en el cuadro de diálogo para actualizar.

Siguiendo el ejemplo en el escaparate de primefaces para la versión 5.2, puedo presentar los datos en un formato de salida de texto de solo lectura, sin embargo, cuando lo cambio a inputText, el campo permanece vacío. El siguiente código es un ejemplo de lo que tengo:

<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>

El método hasSelected () evalúa si el invitado seleccionado es nulo o no, devolviendo verdadero si no es nulo. El SelectedGuest debe establecerse cuando se hace clic en el CommandButton para que un objeto esté disponible para su recuperación por el cuadro de diálogo, sin embargo, con los trazadores en el get / set para selectedGuest, no veo el setter llamado con el fragmento anterior. Si inputText el inputText , a pesar de que hasSelected sigue devolviendo false y, por lo tanto, el ''Nuevo invitado'' encabeza el cuadro de diálogo, el outputText se llena con un valor.

Encontré esta gran publicación hablando sobre el orden de ejecución con respecto a la acción, el oyente de acción, etc., pero no creo que este sea mi problema: las diferencias entre action y actionListener .

Entonces, la última pregunta es ¿por qué se llamará a mi setter con el botón de comando cuando solo tengo un texto de salida, pero con un texto de entrada, nunca lo veo llamado en el registro?

Aprecio el tiempo y la ayuda que cualquiera puede brindar.

Answer 1

Incluso si solucionamos su problema, esta construcción

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

nunca va a funcionar Necesita hacer referencia a una propiedad de modelo, no a una cadena vacía.

Será mejor que reutilice el formulario de edición y deje que el botón crear cree una entidad vacía. Esto simplificaría mucho en el lado de la vista. Sería más fácil si la entidad tiene una propiedad @Id que solo está presente cuando persiste en la base de datos.

Aquí hay un ejemplo inicial:

<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>

Con este bean @ViewScoped :

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

Ver también:

• Creación de páginas de detalles maestros para entidades, cómo vincularlas y qué ámbito de bean elegir
• Mantenga abierto p: cuadro de diálogo cuando se produce un error de validación después de enviar