Структурирование приложения JSF 2 для чистого AJAX - PullRequest
Новая
       4

Структурирование приложения JSF 2 для чистого AJAX

4 голосов
/ 25 февраля 2012

Я достаточно хорошо знаком с тем, как использовать AJAX в JSF 2. Однако JSF 2 разработан с учетом традиционной навигации по страницам, а AJAX выбрасывается для предотвращения полной перезагрузки одной и той же страницы.

То, что я пытаюсь выяснить, - это хороший способ создать чистое веб-приложение AJAX с JSF 2. То есть веб-приложение, которое требует только одной начальной полной загрузки страницы за пользовательский сеанс.

Теперь, если у меня будет достаточно времени, я уверен, что смогу понять это для себя, но боюсь, что решение может быть неловким, и я могу нарисовать себя в углу.

Одна идея состоит в том, чтобы создать составные компоненты вместо страниц, а затем иметь одну страницу, которая включает в себя экземпляр каждого составного компонента со значением атрибута rendered, вычисленным путем сравнения уникального имени страницы с переменной области сеанса, содержащей текущий имя страницы. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:page="http://java.sun.com/composite/components/pages">
<h:head>
    <title>MyApp | #{pageBean.title}</title>
</h:head>
<h:body>
    <!-- Header, sidebars, etc. go here -->

    <!-- Pages -->
    <page:home id="home" rendered="#{pageBean.name == 'home'}"/>
    <page:search id="search" rendered="#{pageBean.name == 'search'}"/>
    <page:profile id="profile" rendered="#{pageBean.name = 'profile'}"/>
    <!-- etc... -->
</h:body>

Это только часть картины. Страница должна быть добавлена ​​в закладки, что потребует хэш-взрыва и обработчика изменения хеша javascript. Фактически, навигация по страницам, вероятно, будет осуществляться путем установки привязки в javascript, позволяющей обработчику изменения хеша позаботиться обо всем остальном.

Идеи

1 Ответ

0 голосов
/ 18 марта 2013

Я пытался сделать это, используя макет и шаблоны, которые загружаются динамически.У меня есть один макет страницы, и некоторые из них загружаются в зависимости от меню.Посмотрите, как это выглядит: 

<h:body>

        <p:layout fullPage="true">

            <p:layoutUnit position="north" size="80" resizable="true" closable="true" collapsible="true">
                <h:form id="form3">  
                    <ui:include src="./templates/template.xhtml" />  
                </h:form> 
            </p:layoutUnit>

            <p:layoutUnit position="south" size="100" closable="true" collapsible="true">
                Footer
            </p:layoutUnit>

            <p:layoutUnit position="west" header="Opciones" size="175">
                <h:form id="form1">
                    <p:panelMenu style="width:200px">   
                        <p:submenu label="Clientes" >
                            <p:menuitem value="Adicionar" update=":form2" actionListener="#{templateMB.templateAddCliente}" />
                            <p:menuitem value="Modificar" update=":form2" actionListener="#{templateMB.templateConfigCliente}" />
                            <p:menuitem value="Listado" update=":form2" actionListener="#{templateMB.templateListadoCliente}" />
                        </p:submenu> 
                        <p:submenu label="Contratos">  
                            <p:menuitem value="Adicionar" update=":form2" actionListener="#{templateMB.templateAddContrato}" />
                        </p:submenu>  
                        <p:separator/>  
                        <p:submenu label="Suplementos" >  
                            <p:menuitem value="Adicionar" icon="ui-icon-signal"/>  
                        </p:submenu>  
                    </p:panelMenu>
                </h:form>
            </p:layoutUnit>

            <p:layoutUnit position="center" id="centerlayout">
                <h:form id="form2">  
                    <ui:include src="#{templateMB.centerTemplate}" />  
                </h:form> 
                </p:layoutUnit>

        </p:layout>

    </h:body>

Фасоль: 

    public String templateAddCliente() {
    try {
        this.centerTemplate = "./templates/addCliente.xhtml";
         return null;

    } catch (Exception e) {
        JsfUtil.addErrorMessage("Ha ocurrido un error: " + e.getMessage());
        return null;
    }
}

  public String templateConfigCliente() {
    try {
        this.centerTemplate = "./templates/configCliente.xhtml";
         return null;

    } catch (Exception e) {
        JsfUtil.addErrorMessage("Ha ocurrido un error: " + e.getMessage());
        return null;
    }
}
  public String templateHome() {
    try {
        this.centerTemplate = "./templates/hometemplate.xhtml";
         return null;

    } catch (Exception e) {
        JsfUtil.addErrorMessage("Ha ocurrido un error: " + e.getMessage());
        return null;
    }
}

  public String templateListadoCliente() {
    try {
        this.centerTemplate = "./templates/listadoCliente.xhtml";
         return null;

    } catch (Exception e) {
        JsfUtil.addErrorMessage("Ha ocurrido un error: " + e.getMessage());
        return null;
    }
}

  public String templateAddContrato() {
    try {
        this.centerTemplate = "./templates/addContratos.xhtml";
         return null;

    } catch (Exception e) {
        JsfUtil.addErrorMessage("Ha ocurrido un error: " + e.getMessage());
        return null;
    }
}
...