1 JavaServer Faces Copyright © Lund & Bendsen A/S UI Components II.

Præsentationer af emnet: "1 JavaServer Faces Copyright © Lund & Bendsen A/S UI Components II."— Præsentationens transcript:

1 1 JavaServer Faces Copyright © Lund & Bendsen A/S UI Components II

2 2 JavaServer Faces Copyright © Lund & Bendsen A/S Select* komponenter og SelectItem-klassen Converters DataTable komponenten og DataModel-klassen Message komponenter UI Components II

3 3 JavaServer Faces Copyright © Lund & Bendsen A/S Benyttes til at fremstille en checkbox. Svarer til i HTML. Attributten " value " refererer til en boolean property: <h:selectBooleanCheckbox value="#{person.recieveNewsletter}" id="chBox" /> <h:selectBooleanCheckbox value="#{person.recieveNewsletter}" id="chBox" />

4 4 JavaServer Faces Copyright © Lund & Bendsen A/S Denne slide dækker over: – Hver af disse har en value som er en enkelt instans. Valgmulighederne angives som SelectItem-children (mere herom senere).

5 5 JavaServer Faces Copyright © Lund & Bendsen A/S Denne slide dækker over: – Hver af disse har en value som er en liste eller et array. Valgmulighederne angives som SelectItem-children (mere herom senere).

6 6 JavaServer Faces Copyright © Lund & Bendsen A/S Om JSFs Model-klasser Pakken javax.faces.model indeholder en række klasser der benyttes som underliggende modeller for et par af de indbyggede JSF komponenter. De to væsentlige klasser er: –SelectItem –DataModel

7 7 JavaServer Faces Copyright © Lund & Bendsen A/S SelectItem-klassen (1/3) Repræsenterer noget man kan vælge fra en liste af alternativer. –Ex. hvilke bruger-grupper skal en bruger være medlem af. I nogle tilfælde kan man kun vælge ét SelectItem, i andre kan man vælge flere. Et SelectItem består af en label (en String, som brugeren præsenteres for i UI) og en value (det bagvedliggende objekt). Vi temmelig let bygge SelectItem instanser ud af vores egne model-objekter: Person p = new Person(1, “Jacob Avlund"); SelectItem s = new SelectItem(p, person.getName()); Person p = new Person(1, “Jacob Avlund"); SelectItem s = new SelectItem(p, person.getName()); value label

8 8 JavaServer Faces Copyright © Lund & Bendsen A/S SelectItem-klassen (2/3) Det er let af få SelectItems til at virke på simple typer som Strings, Integers osv. Hvis vi gerne vil benytte vores egne objekter (eks. person) skal vi dog være opmærksomme på, at det kræver en converter! Converteren skal i så fald konvertere fra og til den streng-værdi som der kommer til at stå ved hvert select item (typisk repræsenteret som en ) i HTML'en. Kasper Jesper Jonathan :Person id: 1 name: Kasper :Person id: 2 name: Jesper :Person id: 3 name: Jonathan ?

9 9 JavaServer Faces Copyright © Lund & Bendsen A/S Select* komponenter og SelectItem-klassen Converters DataTable komponenten og DataModel-klassen Message komponenter UI Components II

10 10 JavaServer Faces Copyright © Lund & Bendsen A/S Converters Når brugere sender data til en komponent af typen UIInput, sker det i form af strenge – da HTTP, som data bliver sendt over, jo er tekstbaseret. Imidlertid vil det langtfra være altid, at datatyperne i de underliggende Beans er strenge – det kan f.eks. også sagtens være integers, decimaltal eller datoer. JSF tilbyder da nogle specielle komponenter kaldet Converters. Deres opgave er at kunne konvertere brugernes indtastede værdier til den rette datatype, når den skal lægges ind i modellen – og tilbage igen. Denne konvertering foregår i fase 2 i JSF-livscyklen (Apply Request Values) (mere herom senere).

11 11 JavaServer Faces Copyright © Lund & Bendsen A/S Et eksempel på konvertering PersonBean fname: String lname: String addressLine1: String age: int City street: String zip: int :PersonBean ”Peter” ”Jensen” ”Revent...” 34 :City 1651 ”Kbh V” 1 2 3 konvertering: tekst > java-typer konvertering: java-typer > tekst managed bean

12 12 JavaServer Faces Copyright © Lund & Bendsen A/S Indbyggede converters JSF har indbyggede converters, der kan håndtere de primitive typer(int, long, boolean..) og wrapper-typerne (Long, Double, Boolean...). Det er sjældent nødvendigt at angive disse eksplicit. JSF har også en indbygget converter til datoer og tider (som begge repræsenteres med java.util.Date i Java)

13 13 JavaServer Faces Copyright © Lund & Bendsen A/S Egne Converters Ofte ønsker vi at benytte en objektmodel (givet ved managed beans) af en vis kompleksitet. Derfor har vi brug for at kunne konvertere mellem en UIInputs strengbaserede værdi og et Java-objekt. Denne konvertering håndteres af en converter, som vi selv skriver, også kaldet en Custom Converter. En Custom Converter består af følgende: –en klasse der implementerer Converter –en registrering af konverteren i faces-config.xml

14 14 JavaServer Faces Copyright © Lund & Bendsen A/S Eksempel på en Converter-klasse public class CityConverter implements Converter { public Object getAsObject (FacesContext context, UIComponent component, String displayString) { // validate format of displayString City c = new City(); int zip = Integer.parseInt(displayString.substring(0, 4)); String name = displayString.substring(4).trim(); c.setName(name); c.setZip(zip); return c; } public String getAsString (FacesContext context, UIComponent component, Object obj) { return obj.toString(); } public class CityConverter implements Converter { public Object getAsObject (FacesContext context, UIComponent component, String displayString) { // validate format of displayString City c = new City(); int zip = Integer.parseInt(displayString.substring(0, 4)); String name = displayString.substring(4).trim(); c.setName(name); c.setZip(zip); return c; } public String getAsString (FacesContext context, UIComponent component, Object obj) { return obj.toString(); } konverterer fra Object (City) til String konverterer fra String > Object (i dette tilfælde City-objekter)

15 15 JavaServer Faces Copyright © Lund & Bendsen A/S Registrering af i faces-config I faces-config angiver man hvilken klasse, der implementerer konverteren og hvilken ID-konverteren kan refereres med fra JSF- sider. Converts a City object to and from a String. CityConverter converters.CityConverter dk.lundogbendsen.jsf.converters.CityConverter Converts a City object to and from a String. CityConverter converters.CityConverter dk.lundogbendsen.jsf.converters.CityConverter

16 16 JavaServer Faces Copyright © Lund & Bendsen A/S Brug af Konverteren En Converter indlejres i en UIComponent- tag. Det er vigtigt, at komponenten er bundet til et EL-udtryk, der evaluerer til et objekt af den type, som konverteren kan håndtere.

17 17 JavaServer Faces Copyright © Lund & Bendsen A/S og converters Som nævnt tidligere er der ofte brug for converters ifbm. select-komponenterne og SelectItem -klassen. Både selectItems og converter skal registreres som children til komponenten: Binder til en Person get/setter Binder til en get-metode der returnerer et array eller en liste af SelectItem Navnet på en converter, registreret i faces-config.xml

18 18 JavaServer Faces Copyright © Lund & Bendsen A/S Eksempel Læg mærke til: Eksempler på brug af og. Eksempler på brug af SelectItem -klassen og converters. SelectMany-eksemplet inkluderer desuden et eksempel på brug af en converter til tekst-formattering af de valgte SelectItems. JSF-Ex-SelectItems- SelectOne JSF-Ex-SelectItems- SelectMany

19 19 JavaServer Faces Copyright © Lund & Bendsen A/S 5) Valg af produkt-type Øvelse

20 20 JavaServer Faces Copyright © Lund & Bendsen A/S Select* komponenter og SelectItem-klassen Converters DataTable komponenten og DataModel-klassen Message komponenter UI Components II

21 21 JavaServer Faces Copyright © Lund & Bendsen A/S DataModel-klassen (1/2) DataModel-klassen repræsenterer en række- og kolonne-baseret model. –Rækkerne er typisk baseret på et objekt. –Kolonnerne er typisk baseret på felter i objektet. DataModel understøtter "selection", så man efter et klik i modellen kan kalde getRowData() og dermed få det objekt der er repræsenteret i den valgte række. NameGender TarzanMale JaneFemale... objekter felter

22 22 JavaServer Faces Copyright © Lund & Bendsen A/S DataModel-klassen (2/2) DataModel-klassen er abstrakt og har en række konkrete subklasser som vi kan vælge imellem. Oftest benyttet er ListDataModel og ArrayDataModel, da de tager imod "rene" POJO's fra vores model. DataModel ArrayDataModel ListDataModel ResultDataModel ResultSetDataModel ScalarDataModel

23 23 JavaServer Faces Copyright © Lund & Bendsen A/S Benyttes til at fremstille en tabel, hvor der itereres over data – enten vha. en DataModel instans, en liste eller et array –Specificeret i attributten " value ". I modsætning til HTML tables, hvor man specificerer hver enkelt række, specificerer vi i blot hvad kolonnerne skal indeholde. –Iterering er mao. implicit. Navnet på det itererede objekt angives med " var " attributten.

24 24 JavaServer Faces Copyright © Lund & Bendsen A/S Definerer en kolonne i en. –(kan også benyttes i forbindelse med visse tredieparts komponenter). Indholdet af bliver indsat for hvert eneste objekt der itereres over i tabellen. Kolonnens header og footer kan specificeres vha. facets...

25 25 JavaServer Faces Copyright © Lund & Bendsen A/S Benyttes helt generelt til at specificere/udskifte dele af andre komponenter. Ofte anvendt ifbm., hvor man tit vil specificere en header og måske en footer facet. Facets benyttes også til specificering af komponent-dele i mange andre komponenter.

26 26 JavaServer Faces Copyright © Lund & Bendsen A/S Samlet eksempel Table of orderlines ProductQuantity Apples4 Oranges2...

27 27 JavaServer Faces Copyright © Lund & Bendsen A/S Eksempel Læg mærke til: Brugen af i person-list.jsp At vi benytter en DataModel i vores "personList" Managed Bean, som er session scoped. At vi benytter getRowData() til at finde den række der er klikket på. JSF-Ex-DataTable- DataModelNavigation

28 28 JavaServer Faces Copyright © Lund & Bendsen A/S Stateless navigation med Forrige eksempel vist hvordan vi kunne navigere til en række i en tabel vha. DataModel.getRowData(), men denne programmeringsmodel har et par begrænsninger: –DataModel -objektet skal placeres i session scope for at kunne tilgås på tværs af requests. Dette betyder at vi let kommer til at fylde serverens memory op med data i sessionen. –Vi kan ikke bookmarke "side nr. 2" (den side som fremvises, når vi har klikket på en række i tabellen). Vi vil mao. gerne kunne tilgå en række i tabellen på en stateless manér, hvor al tilstand indgår kun i requestet vha. en request parameter, ex.: –http://servername/appname/viewPerson?id=4 request parameter ~ ingen tilstand på server

29 29 JavaServer Faces Copyright © Lund & Bendsen A/S Mapping af request parametre Den letteste måde at håndtere request parametre i JSF 1.x er at binde en managed property til et EL-udtryk, der resolverer parametren: personId #{param.id} personId #{param.id} public class PersonFetcherBean { private int personId; public void setPersonId(int i) { this.personId = i; } //... } public class PersonFetcherBean { private int personId; public void setPersonId(int i) { this.personId = i; } //... } http://servername/appname/viewPerson?id=5

30 30 JavaServer Faces Copyright © Lund & Bendsen A/S En managed bean der "fetcher" data http://servername/appname/viewPerson? id =5 PersonFetcher - int id + Person getPerson() Database, DAO eller anden backend 2. Ved kaldet til getPerson() tager PersonFetcher fat i backend'en og benytter id til at finde det korrekte person-objekt. viewPerson.jsp 3. Vi tilgår Personen via en fetcher- klasse, i stedet for at have Personen selv som en managed bean. 1. Ved request modtagelse bindes værdien af request parameteren ” id ” til PersonFetcher.id

31 31 JavaServer Faces Copyright © Lund & Bendsen A/S Eksempel Læg mærke til: Brugen af i person-list.jsp (reference til List i stedet for DataModel). At vi benytter en parameter, "person_id", og en tilhørende hjælpeklasse, "PersonFetcher", hvilket gør det muligt at lave en mere stateless navigation (alternativet var at DataModel skulle ligge i sessionen). At vi skal vedligeholde person.id tilstanden vha. en på person-edit.jsp. JSF-Ex-DataTable- ParameterizedNavigation

32 32 JavaServer Faces Copyright © Lund & Bendsen A/S Select* komponenter og SelectItem-klassen Converters DataTable komponenten og DataModel-klassen Message komponenter UI Components II

33 33 JavaServer Faces Copyright © Lund & Bendsen A/S Om FacesMessage FacesMessage er en klasse der repræsenterer en besked fra systemet til brugeren. FacesMessages kan enten bare være til oplysning eller kan forklare valideringsfejl (mere om validering senere). FacesMessages bør instantieres senest i action-metoder – før view'et renderes! FacesMessages kan relatere til en komponent eller være global (komponent-id skal så være null). FacesMessage m = new FacesMessage(FacesMessage.SEVERITY_INFO, "short message", "details"); FacesContext.getCurrentInstance().addMessage("my_component_id", m); FacesMessage m = new FacesMessage(FacesMessage.SEVERITY_INFO, "short message", "details"); FacesContext.getCurrentInstance().addMessage("my_component_id", m);

34 34 JavaServer Faces Copyright © Lund & Bendsen A/S Komponent der benyttes til at udskrive alle FacesMessages i en liste. Renderes som en med elementer i HTML. Med attributten " globalsOnly " kan man vælge at det kun skal være de messages som ikke har et tilknyttet komponent-id.

35 35 JavaServer Faces Copyright © Lund & Bendsen A/S Komponent der benyttes til at udskrive en enkelt FacesMessage, hvis den findes. Renderes som et -element i HTML. Med attributten " for " angiver man hvilken komponent der skal ledes efter en besked til.

36 36 JavaServer Faces Copyright © Lund & Bendsen A/S 6) En liste af produkter Øvelse