JSF - Laden/ein anderes div nach einem Ajax-Aufruf einfügen

Question

ich das Thema denken erklären, was Im suchend:

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

Unter Verwendung der Schablonendefinition füge ich den content_homepage als ersten Inhalt ein. Nach, wenn ich einen Ajax-Anruf, wenn der Name nicht leer ist, werde ich laden content_login. Ist es möglich, dies auf JSF zu tun?

Prost

Answer 1

Sie müssen die Konzepte der Facelets (die Ansicht/Templat-Technologie) und JSF (die Komponente basierte MVC-Framework) trennen. Was Sie wollen, ist nicht mit allein Facelets möglich, da die Facelets ui Tags ausschließlich Server-Seite sind und nichts an Client-Seite ausgibt. Sie müssen eine JSF-Komponente einfügen (die am Ende HTML erzeugt), die von der JS/Ajax auf der Client-Seite gefunden werden kann.

template.xhtml

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

(die layout="block" macht es ein <div> anstelle von <span>)

Der Knopf des index.html:

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

(die :content bezieht t o <h:panelGroup id="content"> die im oberen : Ebene befindet)

Der Inhalt Template-Definition von 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> 

Managed Bean:

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

Weiterhin keine Spannweiten als Etiketten verwenden. Das ist eine schlechte HTML-Semantik. Verwenden Sie <h:outputLabel> (oder einfaches HTML <label>).