Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

Java Server Faces (JSF) en introduksjon Frode Eika Sandnes.

Liknende presentasjoner


Presentasjon om: "Java Server Faces (JSF) en introduksjon Frode Eika Sandnes."— Utskrift av presentasjonen:

1 Java Server Faces (JSF) en introduksjon Frode Eika Sandnes

2 Ressurser Denne powerpoint presentasjonen Tilhørende eksempler Anbefalt bok: –”Core JavaServerFaces”, David Geary, Cay, Horstmann, Prentice Hall, 2004.

3 Problemet med servlets og JSP Hva hvis man går fra en JSP side til en annen? Den andre JSP-siden må da håndtere parametere som sendes med? JSP oppmuntrer til separering av design og logikk, men ikke noe mer JSP og servlets oppmuntrer kun delvis til MVC arkitektur

4 Hva er MVC MVC er en måte å strukturere og dele opp en applikasjon på. Hver del skal være uavhengig av de andre delene. Model –Representerer dataene –Kan være en database View –Representerer brukergrensesnittet (de vi ser) –Kan være JSP side Controller –Representerer logikken (det som skal gjøres) –Kan være en servlet En fornuftig oppdeling som stammer fra Smalltalk på 1970-tallet.

5 MVC arkitetktur controller model view forespørsel svar

6 MVC og rammeverk Man kan lett lage sitt eget MVC rammeverk hvor man bruker servlets som kontrollere –Ikke-standardisert, vanskeligere å vedlikeholde –Tidkrevende, manglende funksjonalitet STRUTS –Populært rammerverk –Kraftig og fleksibelt –Vanskelig å lære –Litt ”gammelt” JSF –Nytt, og ikke så populært som STRUTS enda –Et SUN initiativ – offisielt en standard –Kraftig, men ikke så fleksibelt som STRUTS –Lett å lære og komme i gang. –Mulighet for god verktøystøtte (tegn, pek, klikk og kjør) Andre –Det finnes en god del andre rammeverk

7 Hva er JSF Et MVC rammeverk Et maskinuavhengig GUI-rammeverk –Kan brukes til mer enn HTML (WML) –Kan brukes til andre protokoller enn HTTP (telnet) En palett med HTML GUI komponenter En standardisert og konsistent måte å realisere MVC applikasjoner på.

8 Hva kan vi gjøre med JSF Styre kontrollen og applikasjonsflyt i en sentral konfigurasjonsfil (faces-config.xml) Managed beans: forenklet flytting av parametere fra skjemaer til bønner Sjekking og validering av felter i skjemaer Koble hendelser på HTML skjemaer til javakode Lage nye GUI kontroller

9 Hvor finner jeg JSF –http://java.sun.com/j2ee/javaserverfaces/downl oad.html –Kan kjøre eksemplene jeg har lagt ut (legge war-filene I webapps og starte de via manageren)

10 Hva trengs? For lage en JSF applikasjon trenger du: –9 jar filer som inneholder selve rammeverket Disse kan ligge i enten WEB-INF/lib, eller i common/lib hvis du ønsker å de globalt tilgjengelig (spare plass). –Lage en faces-config.xml fil i WEB-INF. –Fjerne tilgang til jsp-filene i web.xml (security constraints). –Lage selve applikasjonen JSP-sidene (faces) Javakoden (bønner og action controllere)

11 Gode råd i startfasen Det er mange filer og mye å forholde seg til. Ta et skritt av gangen. Få en ting til å virke, gå deretter videre med neste ting osv. Feilmeldingene kan være rare og fraværende. Gjør derfor noen kontrollerte feil og se hvordan systemet oppfører seg og hvilke feilmeldinger du får. Dette vil hjelpe deg å kjenne igjen liknende feil i andre situasjoner

12 En første applikasjon ”Hallo verden” i JSF (01-hei-norge)

13 Hallo verden Legg merke til stien

14 Hallo verden applikasjonen WEB-INF/lib inneholder 9 jar-filer –commons-beanutils.jar –commons-collections.jar –commons-digester.jar –commons-logger.jar –demo-components.jar –jsf-api.jar –jsf-impl.jar –jstl.jar –standard.jar

15 index.jsp Startfilen som gjør at applikasjonen ”starter riktig” fra manageren

16 Trynet: startside.jsp Det er dette vi ser i nettleseren Hei Norge!!! Det ser ut til at JSF fungerer...

17 faces-config.xml Det er ikke noe å konfigurere i denne enkle applikasjonen, men vi må ha med konfigurasjonsfilen (ligger i WEB-INF) <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

18 Vi må sikre direkte tilgang (web.xml) JSP-filen er ikke noen vanlig JSP fil, men må kjøres igjennom rammeverket. Derfor må vi fjerne tilgangen til filen <?xml version='1.0' … greier fjernet…. ….greier fjernet Hindre direkte tilgang til svarsider. JSF-svar-sider /startside.jsp ingen roller, ikke direkte tilgang Legg merke til / -tegnet. Det betyr rot i Applikasjonskontekst.

19 Eksempel 2: applikasjonsflyt (02-koble-ring)

20 Eksempel 2 Applikasjonsflyt Vi går fra en side til en annen Legg merke til at adressestien er den samme før og etter

21 Startside applikasjonsflyt Vi har en index.jsp, og 9 jar-filer som i forrige eksempel startside.jsp

22 Applikasjonsflyt i faces-config.xml <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> /startsiden.jsp neste /side1.jsp

23 Aktivere JSF i web.xml <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> com.sun.faces.validateXml true Faces Servlet javax.faces.webapp.FacesServlet Faces Servlet *.faces

24 Sperre for direkte tilgang til JSP- sidene i web.xml Hindre direkte tilgang til svarsider. JSF-svar-sider /startside.jsp /side1.jsp ingen roller, ikke direkte tilgang

25 Et par facts f:view deklarerer et view – dvs en side h:form deklarerer et skjema og tilsvarer hml-form. h:commandButton tilsvarer Action parameteren til commandButton spesifiserer neste mål. En vanlig streng indikerer statisk navigering (i dette tilfelle ”neste”. Action parameteren kan også referere til en java metode på et java objekt (mer om det senere).

26 Eksempel 3: endre flyten i applikasjonen (03-koble-ring)

27 Endre applikasjonsflyt Vi ønsker for eksempel å endre hvor man havner når man har trykket på knappen. Vi trenger ikke endre kode eller jsp-sider. Det holder å endre navigasjonsregelen i konfigurasjonsfilen faces-config.xml. neste /side1.jsp neste /side2.jsp

28 Eksempel 4: skjule jsp-filer under WEB-INF (04-koble-ring)

29 Problemstilling Man kan lett glemme å sperre for direkte tilgang i JSP-katalogen. Svakhet i JSF-rammeverket Hvis man glemmer å sperre for direkte tilgang er det mulig at applikasjonen er sårbar da uønsket informasjon kan lekke via feilmeldinger.

30 Alternativ løsning Plassere side2 under WEB-INF, for eksempel WEB-INF/jsp Man har ikke direkte HTTP-tilgang til filer under WEB-INF. Man slipper å legge inn oppføring i web.xml for side2. Kan ikke gjøres for sider med direkte faces kall. neste /side2.jsp neste /WEB-INF/jsp/side2.jsp

31 Eksempel 5: Navigering med hyperlenker (05-hyperlenke)

32 Prinsipielt ingen forskjell på knapper og hyperlenker i JSP

33 Markering av hyperlenker Startside

34 Det resterende er nesten som før De andre aspektene ved applikasjonen er de samme som før. Vi må også ha to navigasjonsregler i faces.config.xml. /startsiden.jsp side1 /WEB-INF/jsp/side1.jsp side2 /WEB-INF/jsp/side2.jsp

35 Automatisk generering av HTML og Javascript (rendering)

36 Rendering av en knapp Startside Startside <form id="_id0" method="post" action="/02-koble-ring/startsiden.faces" enctype="application/x-www-form-urlencoded">

37 Rendering av hyperlenken (javascript kodegenerering) Startside Startside <form id="_id0" method="post" action="/05-hyperlenke/startsiden.faces" enctype="application/x-www-form-urlencoded"> <a href="#" onclick="document.forms['_id0']['_id0:_idcl'].value='_id0:_id1'; document.forms['_id0'].submit(); return false;">Gå til side 1 <a href="#" onclick="document.forms['_id0']['_id0:_idcl'].value='_id0:_id2'; document.forms['_id0'].submit(); return false;">Gå til side 2 <input type="hidden" name="_id0:_idcl" />

38 Eksempel 6: mer navigering (06-navigering)

39 mer navigering – fra side til side

40 Navigeringsregler i faces-config.xml /side1.jsp neste /side2.jsp forrige /side3.jsp /side2.jsp neste /side3.jsp forrige /side1.jsp /side3.jsp neste /side1.jsp forrige /side2.jsp

41 Eksempel 7: snu navigeringen (07-navigering-snu)

42 Vi snur rekkefølgen…

43 …kun ved å endre faces-config.xml /side1.jsp neste /side3.jsp forrige /side2.jsp /side2.jsp neste /side1.jsp forrige /side3.jsp /side3.jsp neste /side2.jsp forrige /side1.jsp

44 Eksempel 8: generelle navigeringsregler (08-navigering-tar-alle)

45 Vi kan gå direkte mellom alle sider (meny)

46 Unngå mange regler Hvis vi ikke tar med from-view-id feltet blir regelen generell og gjelder for alle sider. side1 /side1.jsp side2 /side2.jsp side3 /side3.jsp

47 Eksempel 9: redirect (09-navigering-redirect)

48 Legg merke til adressestiene…

49 Dette oppnås med en ”redirect” side1 /side1.jsp side2 /side2.jsp side3 /side3.jsp

50 Eksempel 10: håndtering av parametere (10-annengrad-parameter)

51 Applikasjonsflyt

52 annengrad.jsp Skriv inn koeffisientene for annengradslikningen. X 2 + X+ =0

53 Den genererte koden Skriv inn koeffisientene for annengradslikningen. <form id="_id0" method="post" action="/10-annengrad-parameter/annengrad.faces" enctype="application/x-www-form-urlencoded"> X 2 + X+ =0 <a href="#" onclick="document.forms['_id0']['_id0:_idcl'].value='_id0:_id4'; document.forms['_id0'].submit(); return false;">Løs likningen

54 rot.jsp Annengradskilkningen er: X 2 + X+ =0

55 Javabønne Kommunikasjonen skjer via en javabønne med egenskapene a, b og c (get- og set metoder) Samme bønne som brukt i tidligere JSP eksempel. Den kompilerte klassen legges i WEB- INF/classes. package likning; import java.io.*; public class annengrad2 implements Serializable { private double a, b, c, d; public double getA() { return a; } public void setA(double a) { this.a = a; oppdater_diskriminant(); } public double getB() { return b; } ….osv….

56 Vi må deklarere javabønna og kontrollflyt i faces-config.xml <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> annengrad likning.annengrad2 session /annengrad.jsp svar /WEB-INF/jsp/rot.jsp

57 Legg merke til… Ikke fylle inn verdier… Fylle inn feil type… Rammeverket sjekker gyldigheten av input og lar deg ikke komme videre. Hvis du kommer tilbake til samme side i samme session vil verdiene være de samme da de hentes fra bønna.

58 Et par facts h:form markøren returnerer alltid data tilbake til seg selv (ACTION med samme sti som selve siden med skjemaet) h:form sender alltid data med POST-metoden h:inputText tilsvarer h:inputText brukes til å assosiere tekstfelt med bønneattributter. h:outputText skriver ut verdien til den spesifiserte attributten til ei bønne

59 Komponenter i html-biblioteket inputText –Vi har allerede sett denne inputSecret –Tilsvarer inputTextArea –Tilsvarer med row and cols attributter selectBooleanCheckbox –Tilsvarer selectOneMenu, selectManyMenu –Combo box selectOneRadio –Radioknapp commandButton –Med image attributt tilsvarer commandLink, ouputText –Som i tidligere eksempler …en del flere (se boka)

60 Vanlige attributter name attributt genereres automatisk value attributt kobler felt opp mot bønne id attributt kobler felt opp mot feilmelding onclick, ondblclick (case-sensitivt) javascript handler styleClass CSS stil required er true hvis feltet må fylles ut

61 comboBoxer <f:selectItem itemValue="..." itemLabel="..."/> <f:selectItem itemValue="..." itemLabel="..."/> <f:selectItem itemValue="..." itemLabel="..."/>

62 Eksempel 11: Validering av input (11-annengrad-valider)

63 Validering I web-applikasjoner er det vanlig at vi –Sjekker at input er korrekte –Viser frem skjemaet igjen hvis det ikke er korrekt utfylt –Viser eventuelle feilmeldinger som kan hjelpe brukeren Validering er et irriterende og tidkrevende moment ved vanlige Servlet og JSP applikasjoner. JSF løser dette elegant

64 Validere input Vi legger inn –En verdi som er for stor –En verdi som er for liten –En verdi av feil type Rammeverket lar deg ikke gå videre Rammeverket kan automatisk skrive ut feilmeling

65 Validering spesifiseres ved markup <h:inputText value="#{annengrad.a}" id="A"> <f:validateDoubleRange minimum="-10.0" maximum="10.0" /> <h:inputText value="#{annengrad.b}" id="B"> <f:validateDoubleRange minimum="-10.0" maximum="10.0" /> <h:inputText value="#{annengrad.c}" id="C"> <f:validateDoubleRange minimum="-10.0" maximum="10.0" />

66 Vi må også spesifisere hvor vi ønsker feilmeldingene …

67 Valideringstyper Manuell –Validering kodet i bønnas set-metoder –Returner NULL for å vise skjema på nytt –Lage egne feilmeldinger –Mye jobb Implisitt –Bruk spesifikk datatype; int, float etc –Skjemaet blir vist på nytt dersom det er et konverteringsproblem –Bruke h:message eller h:messages til å vise feilene –Veldig lite jobb Eksplisitt –Bruk f:convertNumber, f:convertDateTime, f:validateLength, f:validateDoubleRange, f:validateLongRange –Skjemaet blir vist på nytt dersom det er et konverteringsproblem –Bruke h:message eller h:messages til å vise feilene –Lite jobb Egendefinert –Utvide valideringen i JSF

68 Hvordan bruke validatorene validateLength, validateLongRange –minimum, maximum convertNumber –currencyCode –currencySymbol –groupingUsed –integerOnly –Locale –maxFractionDigits –minFractionDigits –maxIntegerDigits –minIntegerDigits –pattern –yype convertDateTime –locale –dateStyle, timeStyle –type –patterm –timeZone

69 Eksempel 12: koble til javakode for prosessering av svarene ACTION (12-annengrad-action)

70 applikasjonsflyt

71 Må spesifisere en ACTION i skjemaet (refererer til en metode i bønna) …. <h:commandLink value="Løs likningen" action="#{annengrad.registrer}"/>

72 Java metoden ”registrer”… En action er en vanlig klasse Behøver ikke å arve eller inkludere JSF/JSP spesifikk kode En action er en vanlig metode uten parameter som returnerer en streng Denne strengen brukes til å definere hvor kontrollflyten går Kobles sammen med regelne i faces-config.xml Vi kan derfor oppnå dynamisk navigering i en applikasjon package likning; import java.io.*; public class annengrad3 implements Serializable { private double a, b, c, d; … public String registrer() { if (a == 0.0) { return "linear"; } else if (isKompleks()) { return "kompleks"; } else { return "reell"; }

73 faces-config.xml annengrad likning.annengrad3 session /annengrad.jsp reell /WEB-INF/jsp/reell.jsp kompleks /WEB-INF/jsp/kompleks.jsp linear /WEB-INF/jsp/linear.jsp

74 Resultatene hentes ut med getter metoder i bønna (x0 og x1) Annengradskilkningen er: X 2 + X+ =0 Reell løsning x 0 = x 1 =

75 Hva skjer? Skjemaet bygges og av HTML interaksjonskomponenter Skjemaet sendes tilbake til seg selv En instans av bønna skapes som representerer dataene i skjemaet ACTION metoden til bønna kalles ACTION metoden returnerer status Status brukes sammen med reglene i faces- config.xml til å gå til riktig sted

76 Eksempel 13: tabeller og lister (13-annengrad-table)

77 applikasjonsflyt

78 Resultatsiden med tabell Annengradskilkningen er: X 2 + X+ =0 Funksjonsverdiene er <h:dataTable value="#{annengrad.verdier}" var="verdi" border="1">

79 Den korresponderende javakoden Vi har get- og set- verdier for start, slutt og steg ”verdier” attributten til bønna returnerer en Vector med objekter som skal listes i tabellen Get-metoden getVerdier returnerer denne Vectoren For hver verdi skapes en bønne med de ønskede verdiene satt (en instans av faktisk samme klasse) package likning; public class annengrad4 { private double a, b, c, d; private double start, slutt, steg; private double xverdi, yverdi; … public Vector getVerdier() { Vector res = new Vector(); for (double x = start; x < slutt; x++) { res.add(new annengrad4(x,a*x*x+b*x+c)); } return res; }

80 Vi kan bruke samme klassen som verdi-bønne Vi må deklarere en offentlig konstruktør for at bønna skal være gyldig Vi deklarerer også en initialiseringskonstruktør som lar oss fylle bønna Deretter har vi get- og set-verdier for xverdi og yverdi som brukes for å representere hver verdi som skal listes i tabellen. Vi kunne også ha brukt en egen klasse for verdi- bønna. public annengrad4() { } public annengrad4(double xverdi,double yverdi) { setXverdi(xverdi); setYverdi(yverdi); } public double getXverdi() { return xverdi; } public void setXverdi(double xverdi) { this.xverdi = xverdi; } public double getYverdi() { return yverdi; } public void setYverdi(double yverdi) { this.yverdi = yverdi; }

81 Eksempel 14: plassere annen tekst sammen med tabelloppføringer (14-annengrad-table)

82 Man må bruke en verbatim markør <h:dataTable value="#{annengrad.verdier}" var="verdi" border="1"> x = f(x) =

83 Eksempel 15: tabellhode (15-annengrad-table-heading)

84 Må bruke en facet tag… <h:dataTable value="#{annengrad.verdier}" var="verdi" border="1"> x-verdi x = f(x)-verdi f(x) = Kan også lage en bunn -tekst ved å bruke ”footer” i stedet for ”header”.

85 Eksempel 16: tabellstil (16-annengrad-stil)

86 … <link rel="stylesheet" href="stil.css" type="text/css"> … <h:dataTable value="#{annengrad.verdier}" var="verdi" border="1" headerClass="hode" rowClasses="en,to"> ….hode { color: black; background-color: red; }.en { color: black; background-color: blue; }.to { color: black; background-color: yellow; }

87 Eksempel 17: Separere ut tekst med properties filer (17-annengrad-bundle)

88 Separere ut tekst med properties filer Properties filene ligger i WEB- INF classes tittel=Skriv inn koeffisientene for annengradslikningen. start=Start slutt=Slutt steg=Steg lenke=List verdiene tittelsvar=Annengradskilkningen er verdier=Funksjonsverdiene er utrykk.properties …

89 Eksempel 18: Konfigurere egne feilmeldinger (18-annengrad-table-error)

90 Vi ønsker å få bruke egne feilmeldinger

91 … feil … javax.faces.component.UIInput.CONVERSION=Greide ikke å konvertere javax.faces.component.UIInput.REQUIRED=Felt må fylles ut javax.faces.component.UISelectOne.INVALID=Verdien er ugyldig javax.faces.component.UISelectMany.INVALID=Verdien er ugyldig javax.faces.validator.NOT_IN_RANGE=Verdien er utenfor gyldig intervall javax.faces.validator.DoubleRangeValidator.MAXIMUM=Verdien er for stor javax.faces.validator.DoubleRangeValidator.MINIMUM=Verdien er for liten javax.faces.validator.DoubleRangeValidator.TYPE=verdien er ikke av korrekt type, forventet flyttall javax.faces.validator.LengthValidator.MAXIMUM=Verdien er for stor javax.faces.validator.LengthValidator.MINIMUM=Verdien er for liten javax.faces.validator.LongRangeValidator.MAXIMUM=Verdien er for stor javax.faces.validator.LongRangeValidator.MINIMUM=Verdien er for liten javax.faces.validator.LongRangeValidator.TYPE=Verdien er av feil type, forventet long feil.properties faces-config.xml

92 Eksempel 19: Bruke onchange til å oppdatere brukergrensesnittet (19-annengrad-lytter)

93 Siden oppdaterer seg etter hvert som dataene fylles inn Løsningene oppdaterer seg når brukeren legger inn koeffisientene Annet eksempel, automatisk fylle inn poststed etter at postnummer er fylt inn.

94 onchange (onclick) på textInput kontrollen x 0 = x 1 = <h:inputText value="#{annengrad.a}" id="A" onchange="submit()" > <f:validateDoubleRange minimum="-10.0" maximum="10.0" /> X+ …. bønna oppdateres lokalt før svaret sendes til siden igjen (selv om svaret må innom tjeneren)

95 Flyt av informasjon klient App logikk Java bønne Tjeneren skjema-submit, komponent-submit Skjema -submit svar her fylles bønna her genereres responsen her rendres siden

96 En feilsøkingskatalog – typiske feilmeldinger

97 Noen få …. Du kaller en ubeskyttet jsf side som en jsp side –HTTP status 500: Java excepetion: Cannot find FacesContext Side mangler –HTTP status 404: The requested resource (/list2.jsp) is not available. Det mangler en regel for en action i faces-config.xml –Alle verdier ser riktige ut og man kommer ikke videre Klassefil er ikke der den skal være eller ikke i riktig format –HTTP status 500: Java exception: Can't instantiate class: ’XX'.. YYY Husk at en enkelte bønner trenger default konstruktor

98 Test ut forskjellige ting som mangler og er feil Få tak i en side som ikke er beskyttet Få tak i en side som er beskyttet Manglende target i faces-config. Manglende kode etc

99 Avanserte temaer som ikke er dekket valueListener – modifisere brukergrensesnitt basert på hendelser Andre brukergrensesnittkomponenter tilgjengelige i bibliotek Implementering av egne brukergrensesnitt komponenter Implementering av egne validatorer.

100 Livet blir ikke det samme med JSF Lykke til!!!


Laste ned ppt "Java Server Faces (JSF) en introduksjon Frode Eika Sandnes."

Liknende presentasjoner


Annonser fra Google