Cómo ajax-actualización dinámica de incluir contenido menú de navegación? (JSF SPA)

Estoy aprendiendo JSF 2, gracias a este sitio he aprendido mucho en tan corto tiempo.

Mi pregunta es acerca de cómo implementar un diseño común a todos mis JSF 2 páginas y sólo la parte de contenido de la actualización de la página no toda la página cada vez que hago clic en un enlace, el menú de un panel diferente. Yo estoy usando la Facelets enfoque hace lo que quiere, excepto que cada vez que hago clic en un enlace de un panel (por ejemplo, los elementos de menú del panel de la izquierda) que toda la página se actualiza. Lo que estoy buscando es una manera de actualizar sólo la parte de contenido de mi página. Para ilustrar este de abajo es mi destino pagelayout.

Cómo ajax-actualización dinámica de incluir contenido menú de navegación? (JSF SPA)
No publicar mi código porque no estoy seguro de si Facelets puede hacer esto . Hay otro método más adecuado para mi requisito de Facelets?

OriginalEl autor royjavelosa | 2011-08-18

3 Kommentare

  1. 58

    Un enfoque sencillo sería el siguiente:

    <h:panelGroup id="header" layout="block">
        <h1>Header</h1>
    </h:panelGroup>
    <h:panelGroup id="menu" layout="block">
        <h:form>
            <f:ajax render=":content">
                <ul>
                    <li><h:commandLink value="include1" action="#{bean.setPage('include1')}" /></li>            
                    <li><h:commandLink value="include2" action="#{bean.setPage('include2')}" /></li>            
                    <li><h:commandLink value="include3" action="#{bean.setPage('include3')}" /></li>            
                </ul>
            </f:ajax>
        </h:form>
    </h:panelGroup>
    <h:panelGroup id="content" layout="block">
        <ui:include src="/WEB-INF/includes/#{bean.page}.xhtml" />
    </h:panelGroup>

    Con este bean:

    @ManagedBean
    @ViewScoped
    public class Bean implements Serializable {
    
         private String page;
    
         @PostConstruct
         public void init() {
             page = "include1"; // Default include.
         }
    
         //+getter+setter.
     }

    En este ejemplo, el real incluyen plantillas son include1.xhtml, include2.xhtml y include3.xhtml en /WEB-INF/includes carpeta (la carpeta y la ubicación es totalmente gratuito para su elección; los archivos se acaba de colocar en /WEB-INF para evitar el acceso directo por adivinar la dirección URL en la barra de direcciones del navegador).

    Este enfoque funciona en todos los MyFaces versiones, pero requiere un mínimo de Mojarra 2.3.0. En caso de que usted está utilizando una Mojarra versión anterior a 2.3.0, entonces todo esto falla cuando el <ui:include> página contiene a su vez un <h:form>. Cualquier devolución se producirá porque está totalmente ausente el estado de vista. Se pueden resolver por medio de la actualización mínimamente Mojarra 2.3.0 o con una secuencia de comandos se encuentran en esta respuesta h:commandButton/h:commandLink no funciona en el primer clic, sólo funciona en segundo clic, o si usted ya está usando JSF utilidad de la biblioteca OmniFaces, en uso de sus FixViewState script. O, si ya estás utilizando PrimeFaces y exclusivamente, puede utilizar <p:xxx> ajax, luego ya de forma transparente tomado en cuenta.

    También, asegúrese de que usted está utilizando mínimamente Mojarra 2.1.18 como las versiones anteriores, se producirá un error mantener a la vista el ámbito de frijol vivos, causando el mal incluir a ser utilizado durante la devolución de datos. Si no puedes actualizar, entonces usted necesita para volver a caer a la siguiente (relativamente torpe) enfoque de condicionalmente representación de la vista, en lugar de condicionalmente la construcción de la vista:

    ...
    <h:panelGroup id="content" layout="block">
        <ui:fragment rendered="#{bean.page eq 'include1'}">
            <ui:include src="include1.xhtml" />
        </ui:fragment>
        <ui:fragment rendered="#{bean.page eq 'include2'}">
            <ui:include src="include2.xhtml" />
        </ui:fragment>
        <ui:fragment rendered="#{bean.page eq 'include3'}">
            <ui:include src="include3.xhtml" />
        </ui:fragment>
    </h:panelGroup>

    La desventaja es que la vista sería relativamente grande y que todos los asociados managed beans pueden ser innecesariamente inicializado, aun cuando ellos no sean utilizados como por la representación de la condición.

    Como a la colocación de los elementos, que sólo es cuestión de aplicar el derecho de CSS. Que está más allá del alcance de JSF 🙂 Al menos, <h:panelGroup layout="block"> hace un <div>, por lo que debe ser lo suficientemente bueno.

    Por último, pero no menos importante, este SPA (Single Page Application) enfoque no es SEO friendly. Todas las páginas no son indexables por los agentes ni marcable por los usuarios finales, usted puede necesitar a tocar el violín alrededor con HTML5 historia en el cliente y proporcionar un servidor de reserva. Por otra parte, en el caso de las páginas con las formas, la misma vista ámbito de frijol ejemplo podría ser reutilizados a través de todas las páginas, lo que resulta en poco intuitivo ámbito comportamiento cuando navega a una página visitada anteriormente. Te sugiero ir con plantillas enfoque en su lugar como se indica en la 2ª parte de esta respuesta: Cómo incluir otro en XHTML XHTML usando JSF 2.0 Facelets? Ver también ¿Cómo navegar en JSF? Cómo hacer que la URL de reflejar la página actual (y no del anterior).

    EXACTAMENTE LO QUE ESTABA BUSCANDO!!! Además de la implementación limpio y fácil de entender. Por suerte para mí la aplicación voy a utilizar esto es más de una Empresa LAN aplicación también a mis usuarios no requieren ser SEO friendly, searchbotable (si searchbotable es nunca una palabra) 🙂 y marcable por eso es como ajuste a la medida para mi requisito. Muchas gracias.
    Gran respuesta! Gracias
    Hola,gracias por la fantástica respuesta BalusC. Tengo un envío de formulario en esta plantilla como include1 y quiero ir a include2 por un botón de comando, pero es necesario hacer clic dos veces.Es allí una manera de corregir eso?
    showcase.omnifaces.org/scripts/FixViewState
    ¿Cómo puedo utilizar fixviewstate.js para primeface4(<p:commandButton)? Gracias.

    OriginalEl autor BalusC

  2. 2

    Si sólo desea actualizar una parte de la página, sólo hay 2 maneras de ir (por la web en general, no sólo JSF). Usted tiene que utilizar marcos o Ajax. JSF 2 soporta ajax de forma nativa, de salida de la f:ajax etiqueta de actualización de 1 solo componente sin necesidad de recargar la página entera.

    Como he experimentado como hasta el momento, esto no funciona muy bien con incluir el contenido que contiene un formulario.
    cierto…podría tener que jugar también con envoltura de la sección entera en un formulario vs incluyendo el formulario en la sección ajaxified
    Yo estaba más en referencia a el uso de <ui:include src="#{bean.dynamicinclude}" /> sintaxis. Por alguna razón el src se resuelve de manera diferente durante la restauración de la vista de una devolución de lo que era durante el procesamiento de la respuesta que a su vez hace que el formulario no se encuentra y por lo tanto nada se ha procesado. Pero que también podría ser simplemente una Mojarra error. No estoy seguro. Sin embargo.
    Curiosamente, traté de MyFaces 2.1.1 y simplemente no mostrar el archivo deseado incluyen dinámica durante el procesamiento de la respuesta ya.
    Para hacer el trabajo de interfaz de usuario:se incluyen src=»…» como con facelets 1.1.x tiene que establecer web config param org.apache.myfaces.REFRESH_TRANSIENT_BUILD_ON_PSS a la verdad. Consulte MYFACES-3271 para obtener más detalles.

    OriginalEl autor GBa

  3. 0

    Netbeans proporciona un asistente para crear la propuesta de diseño con el mínimo esfuerzo utilizando JSF. Así, la mejor manera de empezar es tomar un vistazo a Facelets Asistente De Plantilla y mirar el código fuente generado.

    Cómo sobre el ajax de carga/actualización de parte? Hace Netbeans también generar esa parte? Yo no lo creo.
    Sí,tienes razón.Netbeans no generar esa parte. Pero tiene un buen asistente para definir el diseño. El ajax parte, obviamente, tiene que ser hecho manualmente.Hay muchas maneras de hacerlo, desde el uso de «prestados» de los bienes a uso de la interfaz de usuario:se incluyen src=»…». Si tiene varios formularios en una página y que necesita para mantener «sincronizado» el estado puede utilizar este hack en myfaces: <script type=»text/javascript»> ventana.myfaces = ventana.myfaces || {}; myfaces.config = myfaces.config || {}; myfaces.config.no_portlet_env = true; </script> VerMYFACES-3159

    OriginalEl autor lu4242

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea