Comment afficher les détails de la ligne courante de p: datable dans un dialogue p: et mettre à jour après enregistrer

j'ai une application JSF 2 qui a deux pages, une pour lister les étudiants et une pour montrer les détails d'un étudiant donné. La page de liste a un lien vers la page de détails dans chaque ligne de la table des étudiants, qui ouvre un nouvel onglet dans le navigateur pour montrer ces détails, une fois cliqué.

maintenant les exigences ont changé pour ne plus afficher les détails dans un nouvel onglet, mais dans un dialogue modal dans la page de listing.

mon idée est d'intégrer simplement la page des détails contenu dans le Dialogue modal pour que la page de listing ne soit pas trop grande et difficile à maintenir. Ici, mes doutes. Après quelques recherches j'ai changé le lien dans chaque ligne de la liste au bouton Suivant: 

<p:commandButton value="Details" type="button"
                 onclick="PF('dialog-details').show()">
</p:commandButton>

Le dialogue est déclaré comme suit: 

<p:dialog widgetVar="dialog-details" header="Details" modal="true" width="95%">
    <ui:include src="student_details.xhtml">
        <ui:param name="id" value="#{student.id}"/>
    </ui:include>
</p:dialog>

enfin, la page de détails a été changée pour être quelque chose comme ceci: 

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">

    <f:metadata>
        <f:viewParam name="id" value="#{studentBean.id}" />
    </f:metadata>

    <h1 class="title ui-widget-header ui-corner-all">Details of #{studentBean.bean.name} / #{studentBean.bean.number}</h1>
</ui:composition>

quand je clique sur le bouton, le dialogue apparaît vraiment et le le contenu est la page de détails. Je vois le contenu suivant dans le dialogue: 

Details of  /

pas d'erreurs du tout, mais les données qui devraient être affichées, ne l'est pas. Un point de rupture a été défini dans StudentBean.setId() (cette méthode charge une propriété appelée bean avec l'instance Student correspondant à l'id passé) mais il n'est jamais frappé.

après un certain temps de réflexion, j'ai compris pourquoi cela ne fonctionne pas. Le paramètre passé à la page des détails est student.id , mais student est le nom utilisé comme var dans le <p:datatable/> qui montrent tous les étudiants, de sorte que student n'est pas valide dans <p:dialog/> qui est en dehors du <p:datatable/> .

donc, ce dont j'ai besoin c'est d'un moyen de montrer le dialogue en utilisant l'id de l'étudiant correspondant dans une rangée donnée. Idéalement, je voudrais un appel ajax ici, de sorte que les détails ne serait chargé que lorsque neded.

des idées?

8
demandé sur BalusC 2015-01-30 15:43:32

1 réponses

le bouton doit être un bouton ajax qui définit l'entité actuellement itérée dans la fève, puis met à jour le contenu de la boîte de dialogue, et enfin l'affiche. Le dialogue doit simplement faire référence à cette entité dans le bean et mettre à jour la liste et la table sur save.

voici un exemple de coup d'envoi: 

<h:form id="master">
    <p:dataTable value="#{bean.entities}" var="entity">
        <p:column>#{entity.property1}</p:column>
        <p:column>#{entity.property2}</p:column>
        <p:column>#{entity.property3}</p:column>
        ...
        <p:column>
            <p:commandButton value="View" action="#{bean.setEntity(entity)}" 
                update=":detail" oncomplete="PF('detail').show()" />
        </p:column>
    </p:dataTable>
</h:form>

<p:dialog id="detail" widgetVar="detail">
    <h:form>
        <p:inputText value="#{bean.entity.property1}" />
        <p:inputText value="#{bean.entity.property2}" />
        <p:inputText value="#{bean.entity.property3}" />
        ...
        <p:button value="Close" onclick="PF('detail').hide(); return false" />
        <p:commandButton value="Save" action="#{bean.save}" 
            update=":master" oncomplete="PF('detail').hide()" />
    </h:form>
</p:dialog>

avec ceci à l'intérieur d'un @ViewScoped bean: 

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

@EJB
private EntityService entityService;

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

public void save() {
    entityService.save(entity);
    load();
}

voir aussi:

12
répondu BalusC 2017-05-23 11:53:49