UI Components I

1. UI Components I

2. UI Components I • Taglibs i JSF 1.2 • View og form komponenterne • Layout/panel komponenter • Input komponenter • Output komponenter • Command komponenter • Ofte anvendte komponent-attributter

3. Taglibs: Core og HTML • I JSF findes to centrale taglibraries (samlinger af komponenter vi kan bruge på en JSF side): • html: Som indeholder komponenter der baserer sig op på mulighederne i HTML-sider. Gives normalt prefixet "h”. • core: Som indeholder general purpose komponenter, der principielt kunne benyttes i en hvilken som helst slags brugergrænseflade. Gives normalt prefixet "f”.

4. Registrering af taglibs • I Facelets registreres taglibs som alm. namespaces: <f:viewcontentType="text/html“ xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> • I JSP registrerer man taglibs som sædvanligt: <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

5. Taglibs: Hvad med JSTL tags? • Hvis vi benytter JSP-sider som view-teknologi til JSF, så kan vi benytte de "velkendte" JSTL tags.<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> • MEN der er en fundamental forskel: • JSTL tags har en anden (meget mere basal) komponentmodel end JSF. • JSTL tags processeres derfor i en anden lifecycle end JSF og nesting imellem de to typer tags vil forsage uventede resultater (mere herom i afsnittet om Facelets). • Derfor anbefaler vi at man ikke benytter JSTL-tags i JSF, det kan være årsag til STOR forvirring.

6. OO-repræsentation af komponenter I modsætning til Servlet/JSP har JSF en egentlig objektorienteret repræsentation af komponentstrukturen på en JSF-side. En JSF-side er dybest set blot et træ af objekter. Dette træ kan skabes når en JSF-side eksekveres, dvs. at FacesServlet opbygger objekttræet udfra de tags, som findes på siden. En JSF-side kan også opbygges programmatisk, dvs. at udvikleren eksplicit lader sit program instantiere komponenter og indsætter dem i træet. Et objekttræ konstrueres udfra taglibs eller et program JSF-side Objekttræet renderes til fx HTML Java-program

7. UI Components I • Taglibs i JSF 1.2 • View og form komponenterne • Layout/panel komponenter • Input komponenter • Output komponenter • Command komponenter • Ofte anvendte komponent-attributter

8. <f:view> <f:view> • Benyttes som container for alle JSF komponenter. • <f:view> er mao. altid rootnode for alle komponenter i JSFs komponenttræ. • Uden <f:view> virker dinJSF-side ikke!

9. <h:form> • Benyttes til at markere en formular på en side. • Renderes som <form> i HTML, men har en smule anderledes semantik • Det er ikke formen selv der afgør hvilken metode ("action" i HTML) der invokeres af formen, men dens children. • Alle children af en submittet form bliver bundet til de bagvedliggende Managed Bean properties. • <h:form> • <h:inputText value="#{person.name}" /> • </h:form> :person

10. UI Components I • Taglibs i JSF 1.2 • View og form komponenterne • Layout/panel komponenter • Input komponenter • Output komponenter • Command komponenter • Ofte anvendte komponent-attributter

11. <h:panelGrid> • Benyttes til at lave "grid"-baseret layout, hvor alle children placeres i kolonner. • Ved hjælp af "columns" attributten afgøres hvor mange kolonner der skal være i grid'et. • Alle children placeres så fra venstre til højre i disse kolonner. • Antallet af rækker kommeraltså an på hvor mangechildren der er. • Benyttes ofte til layout afforms (tekst- og input-felter) <h:panelGrid columns="3"> 1 2 3 4 5

12. <h:panelGroup> • Ofte vil man gerne samle flere komponenter i én gruppe. • Eksempelvis ifbm. med <h:panelGrid> (forrige slide), hvor en plads i grid'et måske skal optages af to underliggende komponenter. • Til dette formål kan de omringes af <h:panelGroup>. <h:panelGrid columns="2"> • <h:panelGrid columns="2"> • <h:outputText value="1"> • <h:panelGroup> • <h:outputText value="2"> • <h:outputText value="3"> • </h:panelGroup> • <h:outputText value="4"> • <h:outputText value="5"> • </h:panelGrid> <h:panelGroup> 1 2 3 4 5

13. <f:loadBundle> • Benyttes til at eksternalisere tekst-beskeder til brugeren (message bundles). • Attributten "var" benyttes til at binde enny variabel på JSF-siden, som kanbenyttes til at referere beskeder i.properties-filer, der matcher filnavnet givet i "basename" attributten. • Tekstbeskeder kan være oversat til flere sprog. Det kræver dog at mankonfigurere localesi faces-config.xml: <f:loadBundle var="messages" basename="dk.lundogbendsen.bundle.Messages" /> • <application> • <locale-config> • <default-locale>en</default-locale> • <supported-locale>en</supported-locale> • <supported-locale>da_DK</supported-locale> • </locale-config> • </application>

14. Eksempel Læg mærke til: • Åben JSF-siden layout.xhtml/.jsp. • Brugen af <h:panelGrid> og <h:panelGroup>. • Brugen af <f:loadBundle> og tilhørende message bundles. JSF-Ex-UIComponents-ShowCase

15. UI Components I • Taglibs i JSF 1.2 • View og form komponenterne • Layout/panel komponenter • Input komponenter • Output komponenter • Command komponenter • Ofte anvendte komponent-attributter

16. <h:inputText> • Den mest almindeligeinput-komponent - Benyttes til én-linie tekst. • Svarer til <input type="text"> i HTML. • Værdien af feltet bindes til en property på en managed bean vha. "value"-attributten: • Andre interessante attributter: readonly, disabled, maxlength, required, size <h:inputText value="#{person.name}" />

17. <h:inputTextarea> • Fungerer som <h:inputText>,(forrige slide) men rendereren fler-liniers tekstkasse. • Svarer til <textarea> i HTML. • Samme attributter som <h:inputText>, pånær: • rows, som angiver antallet af linier i kassen • columns, som angiver antallet af tekst-karakterer pr. linie.

18. <h:inputSecret> • Benyttes til tekst-input hvorteksten er hemmelig (typisk passwords). • Svarer til <input type="password"> i HTML. • Samme attributter som <h:inputText>, pånær: • redisplay, som angiver om feltets værdi skal være renderet, hvis der allerede er en værdi i den bagvedliggende managed bean. (Default false, da dette kan være et sikkerhedsproblem)

19. <h:inputHidden> • Benyttes til input i formen, som er gemt for brugeren. • Svarer til <input type="hidden"> i HTML. • Benyttes typisk til propagering af tilstand imellem requests. • Eksempelvis et database-id: <h:inputHidden id="person_id" value="#{person.id}" />

20. Eksempel Læg mærke til: • Åben JSF-siden input.xhtml/.jsp. • Brugen af input-komponenterne beskrevet i disse slides. JSF-Ex-UIComponents-ShowCase

21. UI Components I • Taglibs i JSF 1.2 • View og form komponenterne • Layout/panel komponenter • Input komponenter • Output komponenter • Command komponenter • Ofte anvendte komponent-attributter

22. <h:outputText> • Benyttes til at skrive tekst ud på JSF-siden. • Kan benyttes både til konstant tekst (eks. som beskrivelser til felter i en form) eller dynamisk tekst baseret på EL: • En meget relevant attribut er "escape" som angiver om XML-tags i tekst-værdien skal escapes eller ej (default true, da unescapet tekst ellers kan være et sikkerhedsproblem). <h:outputText value="#{person.name}" />

23. <h:outputLink> • Benyttes til at generere et link. • Mulighed for at neste <f:param> elementer, som specificerer URL parametre. • <h:outputLink value="http://www.google.com/search"> • <f:param name="q" value="#{person.name}" /> • <f:param name="num" value="20" /> • <h:outputText value="Google me" /> • </h:outputLink> • <a href="http://www.google.com/search?q=John Doe&num=20"> • Google me • </a>

24. <h:outputLabel> • Benyttes til at generere en label for et andet element. • Renderes som et <label> element i HTML. • Benyt "for" attributten til at referere et andet elements id. • <h:selectBooleanCheckbox • value="#{person.recieveNewsletter}" id="chBox" /> • <h:outputLabel value="recieve our newsletter?" for="chBox" /> (<h:selectBooleanCheckbox> forklares lidt senere)

25. <f:verbatim> • Benyttes til at "wrappe" HTML-elementer i en JSF Output-komponent. • Da HTML-tags ikke behandles som komponenter i JSFs komponenttræ var det i JSF 1.1 nogle gange nødvendigt med denne wrapper, ex: • Man bør ikkeindlejre andreJSF-komponenterinden i en<f:verbatim>. • <h:panelGrid columns="3"> • <h:outputText value="1"> • <f:verbatim> • <div>Pure HTML content goes here</div> • </f:verbatim> • <h:outputText value="3"> • </h:panelGrid>

26. <h:graphicImage> • Benyttes til at vise et billede. • Svarer til <img> i HTML. • Den primære fordel ved dette tag ifht. <img> er, at man kan angive en fil-sti som "value"-attribut, som er absolut inden for webapplikationen (dvs. uafhængig af sidens placering).

27. Eksempel Læg mærke til: • Åben JSF-siden output.xhtml/.jsp. • Brugen af output-komponenterne beskrevet i disse slides. JSF-Ex-UIComponents-ShowCase

28. UI Components I • Taglibs i JSF 1.2 • View og form komponenterne • Layout/panel komponenter • Input komponenter • Output komponenter • Command komponenter • Ofte anvendte komponent-attributter

29. <h:commandButton> • Benyttes til at lave en knap, som kan • Invokere en metode ("action") på serveren. • Nulstille ("reset") en forms indtastede værdier. • En <h:form> kan indeholde flere knapper – dermed kan den benyttes til flere formål, hvilket er temmeligt bøvlet i almindelig HTML. • <h:form id="articleForm"> • <!-- form content omitted --> • <h:commandButton value="Publish" action="#{article.publish}" /> • <h:commandButton value="Save as draft" action="#{article.saveAsDraft}" /> • <h:commandButton value="Reset form" type="reset" /> • </h:form>

30. <h:commandLink> • Fungerer på samme måde som<h:commandButton>, men rendereret tekst-link i stedet for en knap. • <h:commandLink> kan herudover også indeholde <f:param> elementer, hvis man ønsker at en binding kun skal ske hvis man trykker på det konkrete link. • <h:commandLink value="Edit person" action="#{navigationBean.goToPersonEdit}"> • <f:param name="person_id" value="#{person.id}" /> • </h:commandLink>

31. <h:link> og <h:button> • 2 nye komponenter i JSF 2.x til at understøtte navigation til bookmarkable, HTTP GET, urls. • Alternativer til POST-baserede <h:commandLink> og <h:commandButton>. • Vi kan også automatisk overføre parametre fra den kaldende side til den nyes url. • <h:link outcome="success"> • <f:param name="person_id" value="#{user.person.id}" /> • </h:link> person_id parametren vil nu blive sendt til viewet med outcome=success, hvis det findes i querystring på den kaldende side. <h:link outcome="success" includeViewParams="true" />

32. UI Components I • Taglibs i JSF 1.2 • View og form komponenterne • Layout/panel komponenter • Input komponenter • Output komponenter • Command komponenter • Ofte anvendte komponent-attributter

33. Styling med style og styleClass • JSF lægger op til at man benytter CSS til at gøre sit website lækkert. • De fleste komponenter (dvs. alle de "synlige") indeholder attributterne style og styleClass. • style svarer til style-attributten i HTML – dvs. direkte indlejring af CSS. • styleClass svarer til class-attributten i HTML – dvs. specificering af en CSS class, så styling kan genbruges. • De to kan også kombineres: <h:inputText styleClass="my_input_class" style="text-align: right;" />

34. rendered="true" • Med attributten rendered,som findes på næsten allekomponenter i JSF, kandu med en boolean-værdi afgøre om enkomponent skal renderes eller ej. • Hvis rendered="false", vil komponenten slet ikke indgå i den producerede HTML (det kan mao. godt benyttes til "vigtige ting"). • <h:panelGroup rendered="#{user.loggedIn}"> • <!-- Only for logged in users --> • <h:panelGroup rendered="#{user.admin}"> • <!-- Only for admin users --> • </h:panelGroup> • </h:panelGroup>

35. 2) Et skærmbillede til indtastning af produkter Øvelse