1 Facelets Copyright © Lund & Bendsen A/S Introduktion til Facelets

2 Facelets Copyright © Lund & Bendsen A/S Facelets •Hvad er Facelets? •Installation af Facelets •Facelets komponenter •Templating

3 Facelets Copyright © Lund & Bendsen A/S Hvad er Facelets? •Facelets er en alternativ JSF ViewHandler og leverer derved sin egen håndtering af JSF-faserne Render Response og Restore View. •Facelets er uafhængig af JSP's parse-compile- service livscyklus, hvilket roder bod på en lang række uhensigtsmæssigheder ifbm. JSF's livscyklus. •Facelets blev efterhånden en de facto standard og er nu inkluderet i JSF 2.x som primær view- teknologi.

4 Facelets Copyright © Lund & Bendsen A/S Hvorfor Facelets i stedet for JSP •Fordi JSP har nogle fundamentale problemer ift. JSF! •Fordi Facelets… –er lettere at læse –er lettere at udvikle –lettere at debugge –performer bedre –Er uafhængig af JSP og derfor skal man ikke vente på at en ny version af JSP (fx 2.1) bliver implementeret for at kunne bruge en ny version af JSF (fx 2.1)

5 Facelets Copyright © Lund & Bendsen A/S Problemer med JSP ift. JSF •JSP-sider og JSF-komponenter har meget forskellige livscykler – det giver tit utilsigtede resultater. •De følgende eksempler er taget fra en udmærket artikel om emnet:

6 Facelets Copyright © Lund & Bendsen A/S Problem: skabelse og rendering •Når JSF-komponenter bruges på en JSP-side sker skabelse af JSF-komponenttræet og rendering parallelt. Første gang denne side vises er komponent-træet tomt. OutputLabel-komponenten kan derfor ikke finde den komponent, for- attributten refererer til og derfor renderes den ikke! Anden gang siden køres, vil OutputLabel-komponenten blive renderet, da komponenten med id=name nu findes. Første gang denne side vises er komponent-træet tomt. OutputLabel-komponenten kan derfor ikke finde den komponent, for- attributten refererer til og derfor renderes den ikke! Anden gang siden køres, vil OutputLabel-komponenten blive renderet, da komponenten med id=name nu findes.

7 Facelets Copyright © Lund & Bendsen A/S Problem: Renderingsrækkefølge What about usability? What about usability? What about…. Some more text Some more text Some more text Some text Some more text Some text •Det kræver et dybt kendskab til både JSP og JSF at forstå resultatet af visse konstruktioner:

8 Facelets Copyright © Lund & Bendsen A/S Problem: JSF og andre tagslibs •Umiddelbart virker det naturligt, at man kan benytte JSF-tags sammen med andre taglibs, fx JSTL. •Dén går desværre ikke da JSF-spec’en eksplicit forbyder at man indlejrer JSF-komponenter i non-JSF- komponenter der itererer over deres body. Årsagen er – kort fortalt – at det giver rod med JSF- komponenternes Id’er, da disse ikke kan sættes dynamisk, fx via EL.

9 Facelets Copyright © Lund & Bendsen A/S Hvad er Facelets? •Open Source projekt, som findes på •Features-listen fra projekthjemmesiden giver et udmærket overblik over Facelets (omend den er lidt outdated): –Works with JSF 1.1 and JSF 1.2, including Sun's RI and Apache MyFaces. –Zero Tag development time for UIComponents –Fast Templating/Decorators for Components and Pages –The ability to specify UIComponent trees in separate files (UICompositions) –Line/Tag/Attribute precise Error Reporting –Specify Tags in Separate Files, even packaged with Jars –Full EL support, including Functions –Compile-time EL Validation –XML configuration files aren't necessary, but are available –Reserves the 'jsfc' attribute which acts the same as Tapestry's jwcid (Example: ) –Plugable Decorators to really make designer's job easy (Example: transform to at compile time) –Does *not* required any special RenderKits –Facelets isn't dependent on a Web Container

10 Facelets Copyright © Lund & Bendsen A/S Facelets •Hvad er Facelets? •Installation af Facelets •Facelets komponenter •Templating

11 Facelets Copyright © Lund & Bendsen A/S Krav til Facelets (1/2) •Inkludér jsf-facelets.jar filen på classpath •Registrer Facelets i faces-config.xml: •Gem dine nye sider med et passende suffix frem for.jsp - typisk.xhtml com.sun.facelets.FaceletViewHandler com.sun.facelets.FaceletViewHandler faces-config.xml Ikke nødvendigt fra JSF 2.0

12 Facelets Copyright © Lund & Bendsen A/S Krav til Facelets (2/2) •Registrer dit valgte side-suffix i web.xml: •Benyt XML notation til dine JSF/Facelets sider: javax.faces.DEFAULT_SUFFIX.xhtml javax.faces.DEFAULT_SUFFIX.xhtml web.xml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:h=" xmlns:f=" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:h=" xmlns:f=" welcome.xhtml Heller ikke nødvendigt I JSF 2.x

13 Facelets Copyright © Lund & Bendsen A/S Facelets •Hvad er Facelets? •Installation af Facelets •Facelets komponenter •Templating

14 Facelets Copyright © Lund & Bendsen A/S Om Facelets komponenter •Foruden at være en JSF ViewHandler, er Facelets også en samling af general purpose JSF komponenter. •Registreres med namespace som oftest med prefix ui. •Komponenterne kan groft kategoriseres som: –Convenience components –Templating components •Først skal vi se på convenience components, næste kapitel handler om templating components.

15 Facelets Copyright © Lund & Bendsen A/S Re-implementeret JSTL •Facelets inkluderer en JSF-porteret version af JSTL standard-tagsne. •Dette betyder at man kan benytte gamle tags, eksempelvis. •Bemærk dog at JSTL tags ofte har programmatisk semantik hvor JSF som hovedregel er deklarativt orienteret. Derfor kan blandingen af de to godt forstyrre meningen.

16 Facelets Copyright © Lund & Bendsen A/S •Gør det muligt at iterere over en samling (Iterable) •Giver enkelt- elementerne i iterationen et navn vha. attributten "var". •Bemærk også, at Facelets tillader at man udskriver en EL-variabel direkte (" #{person.navn} " uden ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:ui=" xmlns:h=" xmlns:f=" #{person.name} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:ui=" xmlns:h=" xmlns:f=" #{person.name}

17 Facelets Copyright © Lund & Bendsen A/S •Placerer en skjult debugging-konsol på siden. •Konsollen indeholder komponent-træets variable og kan aktiveres med en shortcut. •I eksemplet aktiveres konsollen med Ctrl+Shift+D. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:ui=" xmlns:h=" xmlns:f=" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:ui=" xmlns:h=" xmlns:f="

18 Facelets Copyright © Lund & Bendsen A/S •Kan på en let måde fjerne en del af en side uden at skulle udkommentere en masse XML. •Har fordelen frem for udkommentering, at vi stadig kan auto-formattere XML dokumentet m.v. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:ui=" xmlns:h=" xmlns:f=" This paragraph will not be included in the rendering <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xmlns:ui=" xmlns:h=" xmlns:f=" This paragraph will not be included in the rendering

19 Facelets Copyright © Lund & Bendsen A/S Facelets •Hvad er Facelets? •Installation af Facelets •Facelets komponenter •Templating

20 Facelets Copyright © Lund & Bendsen A/S Hvad er templating? •Template betyder skabelon, og det er lige præcis skabelon-udnyttelse, som templating handler om. •Ofte vil vi gerne genbruge menuer, headers, footers osv. på et website. •Ofte kunne vi måske også med held genbruge små side-fragmenter. •Ofte ville vi gerne kunne dekorere nogle komponenter med standardiserede ekstra-dele, som også skal kunne genbruges.

21 Facelets Copyright © Lund & Bendsen A/S Facelets templating overblik GET /welcome.jsf welcome.xhtml templ.xhtml <ui:composition template="templ.xhtml"> <ui:include src="dims.xhtml"> dims.xhtml

22 Facelets Copyright © Lund & Bendsen A/S Templating komponenter Facelets tagForklaring Definerer en side eller en del af en side. Har template-attributten, som kan henvise til en slags "parent composition". Komponent der skal benyttes i templates til at markere, at en del af skabelonen kan overskrives her. Komponent der skal benyttes i den template-benyttende side for at overskrive en del af skabelonen, der er markeret med Inkluderer en anden side ( ) i den aktuelle side. Kan bruges til at sende parametre med over til en inkluderet side. Konverterer mao. et EL-udtryk fra den specifikke side til et EL- udtryk i den genbrugbare side. Fungerer som, men kan også optræde i andre kontekst, så man eks. kan lave en template med en HTML- ramme, som man ønsker at dekorere andre ting med.

23 Facelets Copyright © Lund & Bendsen A/S Et eksempel på en Facelets side <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <ui:composition xmlns=" xmlns:s=" xmlns:ui=" xmlns:f=" xmlns:h=" template="layout/template.xhtml"> Body page This is a body page! Output from EL: #{person.name} Repeating over a collection: #{person.name}, #{person.address}, #{person.birthYear} <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <ui:composition xmlns=" xmlns:s=" xmlns:ui=" xmlns:f=" xmlns:h=" template="layout/template.xhtml"> Body page This is a body page! Output from EL: #{person.name} Repeating over a collection: #{person.name}, #{person.address}, #{person.birthYear} Bruger Facelets template-mekanisme Repeat er en generisk måde at iterere over en samling på Definerer en region med navnet ”body” som indsættes i template EL-udtræk skrives direkte Tredieparts-tags, (eksemplificeret med Seam) kan bruges umiddelbart

24 Facelets Copyright © Lund & Bendsen A/S Eksempel Læg mærke til: •Template.xhtml, som fungerer som skabelon- side. •Welcome.xhtml, der benytter sig af skabelonen. Facelets-Ex-Templating

25 Facelets Copyright © Lund & Bendsen A/S 4) Side-skabelon Øvelse