In che modo ajax-refresh dinamico includere il contenuto dal menu di navigazione? (SPA JSF)

Sto imparando JSF 2 grazie a questo sito che ho imparato molto in così poco tempo.

La mia domanda riguarda come implementare un layout comune a tutte le mie pagine JSF 2 e fare in modo che solo la parte del contenuto della pagina aggiorni l’intera pagina ogni volta che faccio clic su un link / menu da un pannello diverso. Sto usando l’approccio Facelets, fa quello che voglio tranne che ogni volta che clicco su un link da un pannello (es. Elementi del menu dal pannello di sinistra) l’intera pagina viene aggiornata. Quello che sto cercando è un modo per aggiornare solo la parte dei contenuti della mia pagina. Per illustrare questo di seguito è il mio pagelayout di destinazione.

inserisci la descrizione dell'immagine qui Non ho pubblicato il mio codice perché non sono sicuro che Facelets possa farlo. Ci sono altri approcci più adatti alle mie esigenze oltre a Facelets?

Un approccio diretto sarebbe la seguente visione:

 

Header

Con questo fagiolo:

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

In questo esempio, i modelli di inclusione effettivi sono include1.xhtml , include2.xhtml e include3.xhtml in /WEB-INF/includes cartella (la cartella e il percorso sono completamente gratuiti per la tua scelta, i file sono appena inseriti in /WEB-INF in per impedire l’accesso diretto indovinando l’URL nella barra degli indirizzi del browser).

Questo approccio funziona in tutte le versioni di MyFaces, ma richiede un minimo di Mojarra 2.3.0. Nel caso tu stia utilizzando una versione di Mojarra precedente alla 2.3.0, allora tutto fallisce quando la pagina contiene a sua volta un . Qualsiasi postback fallirà perché manca totalmente lo stato di visualizzazione. Puoi risolvere questo problema aggiornando a Mojarra 2.3.0 o con uno script trovato in questa risposta h: commandButton / h: commandLink non funziona al primo clic, funziona solo al secondo clic o se stai già utilizzando la libreria di utilità JSF OmniFaces , usa il suo script FixViewState . Oppure, se stai già utilizzando PrimeFaces e usi esclusivamente ajax, allora è già preso in considerazione in modo trasparente.

Inoltre, assicurati di utilizzare minimamente Mojarra 2.1.18 poiché le versioni precedenti falliscono nel mantenere vivo il bean con scope vista, causando l’inclusione dell’utilizzo errato durante il postback. Se non è ansible eseguire l’aggiornamento, è necessario ricorrere al seguente approccio (relativamente goffo) per il rendering condizionato della vista anziché per la visualizzazione condizionale della vista:

 ...            

Lo svantaggio è che la vista diventerebbe relativamente grande e che tutti i bean gestiti associati potrebbero essere inizializzati inutilmente anche se non sarebbero usati come da condizioni di rendering.

Per quanto riguarda il posizionamento degli elementi, è solo questione di applicare il giusto CSS. Questo va oltre lo scopo di JSF 🙂 Almeno, rende un

, quindi dovrebbe essere abbastanza buono.

Ultimo ma non meno importante, questo approccio SPA (Single Page Application) non è SEO friendly. Tutte le pagine non sono indicizzabili dai searchbots, né sono bookmarkable da parte degli utenti finali, potrebbe essere necessario giocare con la cronologia HTML5 nel client e fornire un fallback sul lato server. Inoltre, in caso di pagine con moduli, la stessa istanza di bean con ambito vista potrebbe essere riutilizzata su tutte le pagine, con conseguente comportamento di scoping non intuitivo quando si torna a una pagina visitata in precedenza. Suggerirei di seguire un approccio basato sui modelli, come delineato nella seconda parte di questa risposta: Come includere un altro XHTML in XHTML usando Facelets JSF 2.0? Vedi anche Come navigare in JSF? Come rendere l’URL riflette la pagina corrente (e non quella precedente) .

Se vuoi solo aggiornare parte della pagina, ci sono solo 2 modi per andare (per il web in generale, non solo per JSF). Devi usare frame o Ajax. JSF 2 supporta ajax in modo nativo, controlla il tag f: ajax per aggiornare solo 1 componente senza ricaricare l’intera pagina.

Netbeans fornisce una procedura guidata che crea il layout proposto con il minimo sforzo utilizzando JSF. Quindi, il modo migliore per iniziare è dare un’occhiata alla Creazione guidata Modelli di Facelets e guardare la sorgente generata.