Question

我非常熟悉如何在JSF 2中使用AJAX。但是，JSF 2在设计时考虑了传统的页面到页面导航，并抛出了AJAX以防止完全重新加载同一页面。

我想弄清楚的是使用JSF 2构建纯AJAX Web应用程序的好方法。也就是说，每个用户会话只需要一个初始整页加载的Web应用程序。

现在，如果有足够的时间，我相信我可以为自己解决这个问题，但我担心解决方案可能很尴尬，我可能会把自己画成一个角落。

一个想法是创建复合组件而不是页面然后有一个页面包含每个复合组件的实例，其中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>

但这只是图片的一部分。页面必须是可收藏的，这需要hash-bangs和javascript哈希更改处理程序。实际上，页面导航可能通过在javascript中设置锚点来进行，允许哈希更改处理程序来处理其余部分。

想法？

Answer 1

我尝试使用动态加载的布局和模板来执行此操作。我有一个页面布局，其中一些是加载内容，具体取决于菜单。看看它的外观：

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

支持bean：

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

为纯AJAX构建JSF 2应用程序

1 个答案: