JSF - загрузка / вставка другого div после вызова ajax - PullRequest
Новая
       7

JSF - загрузка / вставка другого div после вызова ajax

4 голосов
/ 23 ноября 2010

Я думаю, что тема объясняет, что я ищу:

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>

Управляемый компонент 

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

Используя определение шаблона, я вставляю content_homepage в качестве первого содержимого. После того, как я сделаю вызов ajax, если имя не пусто, я загрузлю content_login. Возможно ли это сделать на JSF?

Приветствия

1 Ответ

6 голосов
/ 23 ноября 2010

Вам необходимо разделить понятия Facelets (технология представления / создания шаблонов) и JSF (основанная на компонентах инфраструктура MVC). То, что вы хотите, невозможно с одними только Facelets, так как теги Facelets ui предназначены только для сервера и ничего не излучают на стороне клиента. Вам необходимо добавить компонент JSF (который генерирует в конце HTML), который может быть расположен JS / Ajax на стороне клиента.

template.xhtml

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

(layout="block" делает его <div> вместо <span>)

Кнопка index.html: 

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

(:content относится к <h:panelGroup id="content">, который расположен на верхнем уровне :)

Определение шаблона содержимого 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>

Управляемый компонент: 

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

Кроме того, не используйте интервалы в качестве меток. Это плохая семантика HTML. Используйте <h:outputLabel> (или обычный HTML <label>).

...