JSF - Charger/insérer un autre div après un appel ajax

Question

Je pense que le sujet expliquer ce que Im cherche:

template.xhtml

<div class="content"> 
    <ui:insert name="content_homepage">Box Content Here</ui:insert> 
</div> 

index.xhtml

<ui:composition template="./template.xhtml"> 
    <ui:define name="title"> 
     JSF - The Sinfonet Portal 
    </ui:define> 

    <ui:define name="login"> 
     <h:form id="form1" prependId="false"> 
      <h:outputScript name="jsf.js" library="javax.faces" target="head" /> 

      <span class="menu_span">Username</span> 
      <h:inputText value="#{login.name}" id="name" /> 

      <span class="menu_span"> 
       <h:commandButton value="Login" action="#{login.checkLogin}"> 
         <f:ajax event="action" execute="name" render="??????"/> 
       </h:commandButton>      
      </span> 
     </h:form> 
    </ui:define> 

    <ui:define name="content_homepage"> 
     <span class="content_title">Homepage</span> 
    </ui:define> 

    <ui:define name="content_logged"> 
     <span class="content_title">OK. You are logged</span> 
    </ui:define> 
</ui:composition> 

managed bean

import javax.faces.bean.ManagedBean; 
import javax.faces.bean.RequestScoped; 

@ManagedBean(name="login") 
@RequestScoped 
public class Login { 
    private String name = ""; 

    public String getName() { return name; } 
    public void setName(String newValue) { name = newValue; } 

    public boolean checkLogin() { 
     if(name.length()==0) { 
      return true; 
     } else { 
      return false; 
     } 
    } 
} 

En utilisant la définition de modèle, j'insère le content_homepage comme premier contenu. Après, quand je fais un appel d'ajax, si le nom n'est pas vide, je chargerai content_login. Est-il possible de faire cela sur JSF?

Vive

Answer 1

Vous devez séparer les concepts de Facelets (la vue/__gVirt_NP_NN_NNPS<__ technologie) et JSF templating (le cadre de composant à base MVC). Ce que vous voulez n'est pas possible avec Facelets seul puisque les étiquettes Facelets ui sont uniquement côté serveur et n'émettent rien du côté client. Vous devez introduire un composant JSF (qui génère à la fin HTML) qui peut être localisé par le JS/Ajax dans le côté client.

template.xhtml

<h:panelGroup layout="block" id="content"> 
    <ui:insert name="content_homepage">Box Content Here</ui:insert> 
</h:panelGroup> 

(la layout="block" fait un lieu de <div><span>)

Le bouton de index.html:

  <h:commandButton value="Login" action="#{login.checkLogin}"> 
       <f:ajax execute="@form" render=":content" /> 
      </h:commandButton> 

(la :content se réfère t o <h:panelGroup id="content"> qui est situé dans le niveau supérieur :)

La définition du modèle de contenu de index.html:

<ui:define name="content_homepage"> 
    <h:panelGroup rendered="#{!login.loggedIn}"> 
     User is not logged in. 
    </h:panelGroup> 
    <h:panelGroup rendered="#{login.loggedIn}"> 
     User is logged in. 
    </h:panelGroup> 
</ui:define> 

bean géré:

private String name; // Do NOT initialize with empty string! Poor practice. 

// ... 

public boolean isLoggedIn() { // Boolean getter methods should be prefixed with `is`. 
    return name != null; // Do NOT add if/else verbosity for something which already returns boolean! Poor practice. 
} 

En outre, ne pas utiliser des portées comme des étiquettes. C'est une mauvaise sémantique HTML. Utilisez <h:outputLabel> (ou HTML simplifié <label>).