Le applicazioni web sviluppate con jsf normalmente non vanno molto d’accordo con i motori di ricerca: i parametri passati in post e il fatto che gli url spesso non sono “parlanti” sicuramente non aiutano in questo senso. Per fortuna c’è PrettyFaces, una libreria di ottima realizzazione che ci aiuta nell’importante compito di creare un sito ottimizzato per i motori di ricerca.

Esempio con jsf

Vediamo come utilizzare questa libreria con un esempio concreto composto da due pagine, una con una lista di categorie e una con il dettaglio di una singola categoria. Vediamo una implementazione semplice semplice usando jsf, la pagina con la lista è questa:

Anche il dettaglio è molto semplice:

        


        Categoria #{dettaglioCategoria.categoria}: #{dettaglioCategoria.dettaglio} 

L’unica cosa da sottolineare è il collegamento fra le due pagine, quando l’utente clicca sul commandLink parte un actionListener (grazie al tag f:setPropertyActionListener) e una action sul server che carica il dettaglio. Per abilitare la navigazione creiamo anche una navigation rule nel file faces-config.xml:

        /categorie.xhtml
        
                goDettaglio
                /dettaglioCategoria.xhtml
        

Seo con jsf, una tragedia…

Vediamo all’opera la nostra web app (sì, insomma queste due pagine :)). Per accedere alla lista dobbiamo puntare il nostro browser alla pagina categorie.jsf:

Cliccando su un link si accede al dettaglio ma l’url purtroppo non cambia!

Questo è un problema grosso vedendo le cose dal punto di vista seo, inoltre rende inutili i bookmark del browser. Per far cambiare l’url basta aggiungere il tag redirect alla navigation rule:

        /categorie.xhtml
        
                goDettaglio
                /dettaglioCategoria.xhtml
                
        

Aggiungendo questo tag viene effettuato il redirect e quindi l’url diventa quello della pagina di dettaglio, ma le cose non migliorano di molto in quanto il parametro è passato in post; per questo tutte le categorie hanno lo stesso url e rimane impossibile creare un bookmark.

Aggiungiamo PrettyFaces

Per aggiungere PrettyFaces al nostro progetto jsf dobbiamo ovviamente scaricare il jar dal sito ufficiale. Una volta scaricato il jar deve essere aggiunto nel classpath runtime, per esempio copiamo questo file nella directory WEB-INF/lib del nostro progetto.

A questo punto dobbiamo aggiungere un filtro nel web.xml in modo che le chiamate alla web app siano intercettate da PrettyFaces:

        Pretty Filter
        com.ocpsoft.pretty.PrettyFilter



        Pretty Filter
        /*
        FORWARD
        REQUEST
        ERROR

Per configurare PrettyFaces creiamo un file chiamato pretty-config.xml nella directory WEB-INF. Nel nostro caso questo file conterrà il seguente codice:

        
                
                
        

        
                
                
                #{dettaglioCategoria.load}
        

Il primo tag url-mapping definisce l’url della pagina con la lista, grazie a questa configurazione possiamo accedere a tale pagina senza specificare .jsf in fondo all’url:

Per adesso è cambiato poco, il cambiamento grosso c’è nella pagina di dettaglio. Infatti nel secondo url-mapping definiamo che nell’url del dettaglio sarà presente il nome della categoria e che questo nome sarà settato automaticamente nel campo dettaglioCategoria.categoria. Tutto questo è definito all’interno del tag pattern in cui possiamo usare una expression jsf. Nel tag action definiamo anche la action jsf da eseguire prima del caricamento della pagina. In pratica abbiamo definito qui le stesse cose che nell’esempio senza PrettyFaces dovevano essere definite direttamente nei commandLink.

Vediamo adesso come modificare la pagina della lista delle categorie per sfruttare PrettyFaces. Usiamo un h:link (disponibile a partire da jsf2) al posto di un h:commandButton per passare i parametri in get invece che in post. Se state usando jsf 1.1 o 1.2 potete usare il tag h:outputLink o anche pretty:link definito nella taglib di PrettyFaces. L’attributo outcome indica l’id del tag url-mapping:

Il risultato finale è quello che ci aspettiamo, cliccando su un link l’url della pagina di dettaglio contiene il nome della categoria cliccata:

Conclusioni

L’url della pagina di dettaglio che abbiamo appena visto è facilmente leggibile, può essere aggiunto in un bookmark e può essere indicizzato facilmente dai motori di ricerca! Il fatto che l’url possa essere dinamico e possa contenere keyword dipendenti dal contenuto aiuta molto l’indicizzazione. Per un sito che deve sfruttare a pieno Google e gli altri motori di ricerca per aumentare le visite usare url come questo è fondamentale.

La navigazione di PrettyFaces è facile da usare, ma molto potente, può essere usata anche come alternativa alla navigazione standard di jsf. Inoltre introduce una indirezione in più, nelle varie pagine mettiamo un riferimento a un id e non alla pagina di destinazione. Ciò ci consente di cambiare gli url cambiando semplicemente un file di configurazione e senza dover rinominare le varie pagine.

Si chiude qui questa breve panoramica di PrettyFaces: abbiamo visto solo le feature principali, ma se siete interessati potete consultate la documentazione ufficiale per maggiori dettagli.