web-dev-qa-db-fra.com

Comment rendre conditionnellement des éléments HTML simples comme des <div> s?

J'essaie d'implémenter un composant composite qui affiche les détails des informations d'un utilisateur en texte brut ou les affiche via des champs de texte d'entrée modifiables si les détails souhaités sont ceux de l'utilisateur actuellement connecté.

Je sais que tous les composants d'interface utilisateur peuvent être rendus via l'attribut rend mais qu'en est-il de ceux qui ne sont pas des composants d'interface utilisateur (par exemple, divs)

<div class = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    Name: #{cc.attrs.value.name}
    Details: #{cc.attrs.value.details}
</div>

<div class = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <h:form>
        ...
    </h:form>
</div>

Je sais que le div n'a pas l'attribut rendu et probablement je ne prends pas du tout la bonne approche. Je pourrais très facilement utiliser une balise JSTL mais je veux éviter cela.

htmljsf-2conditional-rendering
26
Ionut

Le bon composant JSF pour représenter un HTML <div> l'élément est le <h:panelGroup> avec l'attribut layout défini sur block. Donc, cela devrait faire:

<h:panelGroup layout="block" ... rendered="#{someCondition}">
    ...
</h:panelGroup>

Alternativement, enveloppez-le dans un <ui:fragment>:

<ui:fragment rendered="#{someCondition}">
    <div>
        ...
    </div>
</ui:fragment>

Notez que lorsque vous souhaitez mettre à jour ajax un composant rendu de manière conditionnelle, vous devez plutôt mettre à jour ajax son composant parent à la place.

Voir également:

55
BalusC

Cela a été facile depuis JSF 2.2. En utilisant des éléments d'intercommunication, tout élément HTML peut être converti en un composant JSF, qui possède l'attribut rendu.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:jsf="http://xmlns.jcp.org/jsf">
    <div class="userDetails" jsf:rendered="#{cc.attrs.value.id != sessionController.authUser.id}">
        Name: #{cc.attrs.value.name}
        Details: #{cc.attrs.value.details}
    </div>
</html>

En savoir plus sur https://jsflive.wordpress.com/2013/08/08/jsf22-html5/#elements

10
tuner

Je voudrais simplement envelopper votre code HTML avec <h:panelGroup>

<h:panelGroup rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    <div class = "userDetails">
        Name: #{cc.attrs.value.name}
        Details: #{cc.attrs.value.details}
    </div>
</h:panelGroup>

<h:panelGroup  rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <div class = "userDetails">
        <h:form>
           ...
        </h:form>
    </div>
</h:panelGroup>

Une autre option consiste à utiliser des composants de Seam (<s:div>) ou Tomahawk (<t:htmlTag>) bibliothèques si vous en avez déjà dans votre projet.

Voir: http://www.jsftoolbox.com/documentation/seam/09-TagReference/seam-div.html

<s:div styleClass = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    Name: #{cc.attrs.value.name}
    Details: #{cc.attrs.value.details}
</s:div>

<s:div styleClass = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <h:form>
        ...
    </h:form>
</s:div>

Ou: http://myfaces.Apache.org/tomahawk-project/tomahawk12/tagdoc/t_htmlTag.html

<t:htmlTag value="div" styleClass = "userDetails" rendered = "#{cc.attrs.value.id != sessionController.authUser.id}">
    Name: #{cc.attrs.value.name}
    Details: #{cc.attrs.value.details}
</t:htmlTag>

<t:htmlTag value="div" styleClass = "userDetails" rendered = "#{cc.attrs.value.id == sessionController.authUser.id}">
    <h:form>
        ...
    </h:form>
</t:htmlTag>
8
DRCB

Vous pouvez utiliser un autre composant composite. Il n'y a pas de divs ou d'autres balises supplémentaires, juste exactement celle dont vous avez besoin. Voir cet exemple:

<table>
    <tr>...</tr>
    <my:cc rendered="false">
        <tr>...</tr>
    </my:cc>
    <my:cc rendered="true">
        <tr>...</tr>
    </my:cc>
</table>

Et le composant my: cc:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:cc="http://xmlns.jcp.org/jsf/composite">

    <cc:interface>
    </cc:interface>

    <cc:implementation>
        <cc:insertChildren />
    </cc:implementation>
</html>

Produit le HTML suivant, pas de balises supplémentaires du tout, fonctionnant avec ajax.

<table><tr>...</tr><tr>...</tr></table>
0
Pavel Sedek