Innamorati dei tag RichFaces 3 loadScript e loadStyle? Vi state chiedendo come mai non sono più presenti in RichFaces 4? Non avete idea di quello che sto dicendo? Allora se siete curiosi continuate a leggere!
C’era una volta…
JSF2 ha inglobato il meglio dello stato dell’arte dei framework che ruotavano attorno alla versione precedente, come per esempio Facelets o il supporto nativo ad Ajax simile a quello del progetto Ajax4JSF, da tempo integrato in RichFaces. Stesso discorso vale anche per i tag citati poco fa, molto utili soprattutto quando si creano dei componenti personalizzati tramite Facelets che hanno bisogno di caricare degli script o dei fogli di stile necessari al loro funzionamento. a4j:loadScript e a4j:loadStyle infatti garantiscono che queste risorse vengano caricate una sola volta nella pagina ed inseriti automaticamente nella head.
Chiu’ risorse pi’ tutti!
Nel suo processo di “fagocitazione” del mondo circostante, JSF2 ha razionalizzato l’esperienza pregressa, riproponendo, tra le altre cose, questi due tag con il nome di h:outputScript e h:outputStylesheet, inserendoli in un contesto strutturato di gestione delle risorse. Cosa significa? In pratica, in una applicazione JSF2, ogni risorsa web, come css, javascript o immagini, per sfruttare il nuovo sistema di gestione, dovrebbe stare in un cartella chiamata resources posta sotto una di queste cartelle:
- /WebContent nei progetti Web (WAR);
- /META-INF in tutti gli atri (JAR).
“Resources in Action”
Come insegna la serie di manuali “In Action”, è meglio vedere subito come funzionano le cose e poi discuterci sopra. Facciamo quindi un esempio: “traduciamo” in JSF2 la pagina di demo del bellissimo Nivo Slider che, per funzionare, ha bisogno dei suoi script, stili e immagini.
Organizziamo quindi le risorse scaricate come si aspetta JSF:
In pratica basta riportare sotto la cartella resources la tipica struttura che uno farebbe normalmente direttamente sotto /WebContent.
Di seguito il codice della pagina “tradotta”:
Le parti evidenziate ci mostrano come referenziare le risorse. La chiave di tutto sta negli attributi name e library dei tag:
- name: è il nome della risorsa;
- library: è il percorso sotto la cartella resources.
I tag h:graphicImage, h:outputScript e h:outputStylesheet operano con questa logica. Il tag h:head è stato evidenziato anche se vuoto: è molto importante perché senza di questo h:outputStylesheet per esempio non funzionerebbe quindi occhio a non dimenticarlo! Di default infatti tutti gli stili vengono inseriti nell’head della pagina “compilata” sul client anche se sono dichiarati più volte nella stessa pagina. La stessa logica vale anche per h:outputScript, con la differenza che è possibile indicare il target, ovvero dove vogliamo che gli script vengano inseriti nella pagina HTML. Nell’esempio precedente verranno inseriti nella head. Il caricamento degli stili poteva essere messo direttamente dentro il tag h:head, ma così è più evidente la differenza tra la pagina scritta e quella generata sul client. Inoltre l’importazione di jquery.js viene risolta correttamente perché RichFaces 4 è presente nel classpath.
Da notare infine l’espressione
#{resource['images:nemo.jpg']}
che segue il pattern
library:name
In questo modo otteniamo l’url della risorsa da usare dove preferiamo, anche se risiede in un JAR. Se proviamo a visualizzare questa pagina dal browser ci accorgiamo però che manca qualcosa, ovvero le immagini caricate dai css di NivoSlider non vengono trovate.
Diamo allora una sbirciata a come vengono generati gli url sul client: apriamo il source della pagina dal browser e scopriamo per esempio che l’indirizzo della risorsa images:nemo.jpg sul client diventa/MyApp/javax.faces.resource/nemo.jpg.jsf?ln=images
Mmmm ok quindi facile da ricreare. E’ formato da:
- /MyApp: il context path dell’applicazione;
- /javax.faces.resource: sembra una sorta di servlet che mappa tutte le risorse;
- /nemo.jpg.jsf: il nome dell’immagine, a cui è stata aggiunta l’estensione jsf (non a caso la Faces Servlet nel web.xml è mappata sull’url *.jsf. Al variare del mapping varierà anche questa condizione);
- ?ln=images: il nome della libreria.
A questo punto possiamo intervenire nei file CSS (eh si quest’ultima operazione è un po’ sporca, ma ne vale la pena ;)) e modificare manualmente il percorso dei file richiesti in modo opportuno. Per esempio, dentro style.css
url(images/dev7logo.png)
diventa
url(dev7logo.png.jsf?ln=images)
Refreshiamo la pagina ed ecco Nivo Slider nel suo splendore, pronto a diventare un tag facelets con poche modifiche!
Conclusioni
I tag HTML link e script possono essere sempre usati in una pagina JSF, senza dover per forza ricorrere al nuovo sistema di gestione delle risorse. Diventa obbligatorio però quando abbiamo la necessità di usare h:outputScript e h:outputStylesheet perché magari stiamo creando dei componenti Facelets riusabili, oppure quando le nostre risorse stanno in un jar e non sono direttamente accessibili da web: in questo caso basta creare una cartella resources sotto META-INF del jar e non avremo più bisogno di un Facelets Resource Resolver per accedere ai jar come si faceva con JSF 1.x.
Pingback: ()