Primefaces de la boîte de dialogue 'appendTo la propriété, ce qu'il est utile?

C'est peut-être une question stupide, mais en Primefaces est <p:dialog> il y a des biens qui appelle appendTo qui est décrit dans le manuel:

Ajoute la boîte de dialogue de l'élément défini par la donnée de recherche
expression.

Je ne peux pas réaliser ce qu'il est utile?

OriginalL'auteur Anatoly | 2015-05-13

  1. 23

    De la PrimeFaces Guide De L'Utilisateur (actuellement p. 185):

    Ne placez pas de dialogue à l'intérieur des tables, des conteneurs aime divs avec le positionnement relatif ou avec nonvisible
    dépassement de capacité défini, dans de tels cas, la fonctionnalité peut être rompu. Ce n'est pas une limitation
    mais à la suite de modèle DOM. Par exemple boîte de dialogue à l'intérieur d'une mise en page de l'unité, tabview, accordéon sont un
    quelques exemples. Même s'applique à confirmDialog.

    Vous pouvez résoudre ce problème en utilisant appendTo="@(body)" et votre dialog sera joint en tant qu'enfant de la <body> nœud.

    L'un des principaux dialog option est modal et vous pourrait rapidement se retrouver avec votre boîte de dialogue derrière la superposition si vous n'êtes pas à l'aide de appendTo comme indiqué ci-dessous:

    Primefaces de la boîte de dialogue 'appendTo la propriété, ce qu'il est utile?

    Voir aussi http://forum.primefaces.org/viewtopic.php?f=3&t=16504

    Notes:

    • Avant de PrimeFaces 5.0, l'attribut de l'ensemble ont été appendToBody="true". Cela a été modifié pour la version 5.0.
    • Si votre dialog contient quelques boutons n'oubliez pas de les entourer par <h:form> (voir Bonne Construction pour Primefaces Dialogue)
    En fait vous dire que je peux placer ma <p:dialog> ailleurs, mais si il est situé à l'intérieur de certains de l'autre les composants que je devrais utiliser appendTo pour éviter les problèmes? Si je me place à l'intérieur de la forme séparée (pas imbriquée bien sûr) et c'est à côté de l'enfant à <h:body> je n'ai pas vraiment besoin. Suis-je le droit? Je vous remercie.

    OriginalL'auteur Mathieu Castets

  2. 16

    La PrimeFaces docs sont un peu clairsemée sur ce point. appendToBody /appendTo (avant 5.0) résout (ou tente de le résoudre) un problème où un PrimeFaces composant n'a pas le droit de z-Index, le sens qu'il ne se présente pas devant ou derrière d'autres éléments comme elle le devrait. Toutefois, cette fonctionnalité est problématique, car il peut causer d'autres problèmes comme p:commandbutton action ne fonctionne pas à l'intérieur de p:dialogue

    tl;dr:

    Ne pas utiliser appendTo /appendToBody. Au lieu de cela, les boîtes de dialogue (avec ConfirmDialog et OverlayPanel) doit toujours être à la racine de la hiérarchie des composants, comme un descendant direct de <h:body>. Cela permettra de les faire fonctionner de manière fiable. Dans ce cas, à l'aide de appendTo /appendToBody est inutile.

    Un bon moyen pour y parvenir est d'avoir un (ou plusieurs) pour séparer les fichiers XHTML pour ces composants ("boîtes de dialogue.xhtml"), qui est ensuite inclus dans votre fichier XHTML ou d'un modèle (par exemple à l'aide de <ui:include>). Une autre solution est d'utiliser un <ui:define> en combinaison avec un <ui:insert> si vous voulez les boîtes de dialogue pour rester dans le fichier XHTML où ils sont utilisés.

    Lire la suite pour les détails 🙂

    Le problème

    Certains composants PrimeFaces (tels que les boîtes de dialogue) doivent être affichés au-dessus des autres éléments.

    Par exemple:

    Si vous utilisez <p:dialog ...modal="true">, et de faire de la boîte de dialogue apparaît, vous obtenez une boîte de dialogue dans le premier plan, apparaissant au-dessus du reste de la page, avec le reste de la page couverts par une couche transparente.
    Vous pouvez le voir par exemple dans le PF Vitrine pour les boîtes de dialogue (bouton "Modal").

    Derrière les coulisses, c'est à dire dans le DOM, deux choses se produisent:

    • une nouvelle <div> (la "superposition modale") est créée à la fin de la <body>. Cette div obtient les styles CSS: z-index: 1000; position: absolute; opacity: .30;. Cela rend transparente et couvrant l'ensemble de la page, pour obtenir le "modal".
    • l'existant (mais invisible) div de la boîte de dialogue lui-même est rendu visible, et obtient le style z-index: 1001; position:fixed;. Remarque le z-index est un plus grand que la superposition modale, donc la boîte de dialogue s'affiche au-dessus de la superposition.

    Cependant, cela ne fonctionne pas toujours. La raison pour cela est un aspect de la CSS appelé le l'empilement de contexte. Les détails sont un peu complexe, mais, fondamentalement, il est dit que le z-index d'un élément de la page est uniquement par rapport à d'autres éléments à l'intérieur du même élément parent. En particulier, un élément peut apparaître derrière un autre élément, même si elle a un z-index supérieur, si l'élément avec le grand z-index est contenue dans un élément avec une baisse de z-index.

    Court (safe) version: Pour être certains que les z-index fonctionne comme prévu, tous les éléments concernés doivent être frères et sœurs dans les DOM.

    Maintenant, dans cette situation particulière, la superposition modale doit être au sommet de la hiérarchie DOM (c'est à dire à l'intérieur de <body>), sinon il ne peut pas fiable apparaissent au-dessus du reste de la page. Cependant, la div de la boîte de dialogue lui-même est quelque part plus loin dans les DOM (correspondant à la position de la <p:dialog> dans la balise source XHTML). Maintenant nous avons un problème.

    Dans la pratique, cela signifie que la superposition peut apparaître au-dessus de la boîte de dialogue, obscurcissant ainsi et en la bloquant. De même, si le dialogue n'est pas modale, il peut apparaître derrière d'autres éléments dans la page.

    Insidieuse chose à propos de ce problème, c'est qu'il dépend de la structure du reste de la page (plus précisément, si le reste de la page utilise des CSS, qui crée un nouveau contexte d'empilement). Donc <p:dialog> peuvent apparaître à travailler d'abord, puis tout à coup affiche pas correctement après un changement d'ailleurs.

    Comment "appendTo' aide

    Comme expliqué ci-dessus, le problème se produit parce que le rendu au format HTML pour les composants PrimeFaces est quelque part, profondément vers le bas dans les DOM, alors qu'il aurait besoin d'être un enfant direct de <body> pour le z-index fonctionne correctement.

    Quand appendToBody /appendTo est utilisé, PrimeFaces va inclure du Javascript dans la page affichée, qui se contente de déplace le nœud DOM de la PrimeFaces composant à la fin de <body> (à l'aide de JQuery appendTo fonction). De cette façon, le composant est à la bonne place dans le DOM, et z-index fonctionne.

    Le problème avec l'aide de 'appendTo'

    Tandis que le DOM de la réorganisation effectuée par appendTo résout le problème avec le CSS et le z-index, il introduit un autre problème (potentiel):

    Le côté client DOM ne correspond plus à la page côté serveur de l'état entretenu par JSF (appelé le vue).

    Maintenant, une des caractéristiques centrales de la JSF, c'est qu'il s'attend à ce que le HTML côté client/DOM structure pour correspondre à la le serveur-vue latérale - après tout, la JSF a construit le HTML à partir de ce point de vue. Si cette règle est violée (généralement en manipulant le DOM côté client), vous avez toutes sortes de problèmes bizarres, comme le JSF en ignorant les champs de formulaire ou de valeurs à transmettre, ou à l'écrasement de la partie de vos modifications sur AJAX mises à jour.

    Dans ce cas, les problèmes causés par le déplacement de l'arbre DOM de la PrimeFaces composante comprennent:

    • Si le PrimeFaces composant fait partie d'une <h:form>, il ne fonctionnera pas correctement (parce qu'il ne sera pas à l'intérieur de la <form> tag côté client en raison de l'émouvante).

      C'est en fait mentionné dans la PrimeFaces docs, avec la solution: au Lieu de placer le composant dans un formulaire, mettre un formulaire à l'intérieur de les composants, puis la forme se déplace avec le composant.
    • Si la zone où JSF à l'origine a rendu l'PrimeFaces composant est mis à jour en utilisant JSF, AJAX fonctionnalité, JSF va enlever de la zone de mise à jour du DOM, puis calcul de la composante de nouveau, comme il ne sait pas qu'il a été déplacé ailleurs.

      Dans les anciennes versions de PrimeFaces, de ce fait, les composants apparaissent dans les DOM à deux reprises (avec le même id), qui a causé des problèmes à plus tard soumet. Cela a été fixée pour PrimeFaces 4.0 ( Question 5636: Dialogue appendToBody & dynamique n'est pas supprimer l'ancien élément du dom ), mais re-produite en 5.0 (question n ° 367).

    Cela montre que ce genre de manipulation du DOM "derrière JSF est de retour" est plutôt risquée et doit être évitée - donc mon conseil de ne pas utiliser appendTo /appendToBody.

    Excellente analyse détaillée. Les Compliments. J'ai plutôt pas d'accord cependant avec votre proposition de solution (ou de l'améliorer, si il a été conçu comme l'une des solutions possibles). J'aimerais créer un <ui:insert name="dialog"/> avant la fermeture </body> dans le modèle et utiliser un <ui:define name="dialog>… </ui:define> dans laquelle j'avais définir les boîtes de dialogue de la page. De cette façon, vous gardez la boîte de dialogue avec la page
    Oui, c'est aussi une bonne solution. C'est pourquoi j'ai écrit "Une bonne façon de...". Je voulais juste donner un exemple simple, qui fonctionne même pour un projet qui n'utilise pas de modèles. Si vous utilisez des modèles, vous savez probablement de quoi faire :-).

    OriginalL'auteur sleske