Wie ajax-refresh dynamische Inhalte einschließen, die durch Navigations-Menü? (JSF SPA)

Ein einfacher Ansatz wäre die folgende Ansicht:

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

Mit dieser bean:

@ManagedBean
@ViewScoped
public class Bean implements Serializable {

     private String page;

     @PostConstruct
     public void init() {
         page = "include1"; // Default include.
     }

     //+getter+setter.
 }

In diesem Beispiel, die tatsächlichen sind Vorlagen sind include1.xhtml, include2.xhtml und include3.xhtml im /WEB-INF/includes Ordner (Ordner und Speicherort ist völlig frei, nach Ihrer Wahl; die Dateien werden nur in /WEB-INF um verhindern den direkten Zugriff durch erraten der URL in der browser-Adressleiste).

Dieser Ansatz funktioniert in alle MyFaces-Versionen, sondern erfordert ein minimum von Mojarra 2.3.0. Falls Sie mit einem Mojarra ältere version als 2.3.0, dann ist dies alles schlägt fehl, wenn die <ui:include> Seite wiederum enthält eine <h:form>. Jedes postback wird scheitern, denn es fehlt völlig die Sicht Zustand. Sie können dies lösen, indem Sie ein Upgrade auf minimal Mojarra 2.3.0 oder mit einem script, finden Sie in dieser Antwort h:commandButton/h:commandLink funktioniert nicht auf ersten Klick funktioniert nur auf den zweiten Klick, oder wenn Sie bereits mit JSF-utility-Bibliothek OmniFaces, verwenden Sie das entsprechende FixViewState Skript. Oder, wenn Sie bereits mit PrimeFaces und verwenden ausschließlich <p:xxx> ajax, dann ist es schon transparent berücksichtigt.

Stellen Sie außerdem sicher, dass Sie über minimal-Mojarra 2.1.18 Vorhandensein von älteren Versionen wird nicht in zu halten der Blick scoped bean lebendig, sodass die falsche include verwendet wird, während postback. Wenn Sie nicht aktualisieren, dann müssten Sie zurückgreifen, um die unter (relativ ungeschickt) Ansatz bedingt rendering stattdessen die Ansicht der Gebäude bedingt die Ansicht:

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

Der Nachteil ist, dass die anzeigen werden würde, die relativ groß sind und dass alle zugehörigen managed beans möglicherweise unnötig initialisiert, selbst wenn, Sie würden nicht verwendet werden, wie pro die gerenderten Zustand.

Als um die Positionierung der Elemente, das ist nur eine Frage der Anwendung der richtigen CSS. Dass über den Rahmen der JSF 🙂 zumindest <h:panelGroup layout="block"> macht eine <div>, so dass sollte gut genug sein.

Nicht zuletzt, SPA (Single Page Application) - Ansatz ist nicht SEO-freundlich. Alle Seiten sind nicht indizierbar durch such-Roboter noch bookmarkable von Endkunden, können Sie brauchen, zu hantieren mit HTML5-history im client und bieten eine server-side-fallback. Außerdem wird im Falle von Seiten mit Formularen, der gleiche Blick scoped bean-Instanz würde wiederverwendet werden, auf allen Seiten, was in der unintuitive scoping Verhalten, wenn Sie navigieren zurück zu einer zuvor besuchten Seite. Ich würde vorschlagen, Sie gehen mit Template-Ansatz statt, wie beschrieben im 2. Teil dieser Antwort: Wie andere XHTML XHTML mit JSF 2.0 Facelets? Siehe auch Wie die Navigation in JSF? Wie man die URL entsprechend der aktuellen Seite (und nicht die Vorherige).

InformationsquelleAutor BalusC

Netbeans enthält einen Assistenten, der die Erstellung des vorgeschlagenen Layouts mit minimalem Aufwand durch JSF. Also, der beste Weg zu beginnen ist, werfen Sie einen Blick auf Facelets-Template-Assistenten und Blick auf die erzeugte Quelle.

InformationsquelleAutor lu4242