1 JavaServer Faces Copyright © Lund & Bendsen A/S Navigation, events & listeners.

Præsentationer af emnet: "1 JavaServer Faces Copyright © Lund & Bendsen A/S Navigation, events & listeners."— Præsentationens transcript:

1 1 JavaServer Faces Copyright © Lund & Bendsen A/S Navigation, events & listeners

2 2 JavaServer Faces Copyright © Lund & Bendsen A/S •Events & Listeners •Action og ActionListener •ValueChangeListener •Eventmodellen i JSF •Navigation Navigation, events & listeners

3 3 JavaServer Faces Copyright © Lund & Bendsen A/S Observer •Meget hyppigt anvendt design pattern •Kært barn har mange navne: –Observer og observable –Publisher og subscriber –Event generator og event listener •Varianter kan medsende informationer: –Event-kilde (hvem ”gav lyd fra sig”?) –Event-objekt (ekstra info om hændelsen)

4 4 JavaServer Faces Copyright © Lund & Bendsen A/S Problemet (1/2) •Når vi laver en genbrugelig klasse, der tilbyder metoder, som man kan kalde på den, er der ingen problemer. •Pointen er, at klasser, der bruger den genbrugelige klasse, laves senere end den genbrugte klasse, og derfor kendes dens public interface (metodesignaturer). Vi kender signaturen på de metoder, som vi ønsker at kalde, da klassen med metoderne allerede er lavet Laves først (fx Javas programbibliotek) Laves sidst (fx vores kode)

5 5 JavaServer Faces Copyright © Lund & Bendsen A/S Problemet (2/2) •Når vi laver en genbrugelig klasse, der tilbyder at kalde metoder på klasser, som vi senere laver, er der problemer. •Fx en knap, der vil kalde en metode på et andet objekt, for at signalere, at brugeren trykkede på knappen. •Problemet er, at klassen, der genbruges (knappen), skal kunne kalde en metode på en klasse, som endnu ikke findes (så hvordan ved vi hvad metodens signatur er?) Laves først Laves sidst ? ?

6 6 JavaServer Faces Copyright © Lund & Bendsen A/S Løsning: Observer Sammen med den genbrugelige klasse defineres et interface, som ”lyttere”, der ønsker at modtage kald, skal implementere. Når knappen klikkes kalder knap- pen onClick( ) på alle de listeners der har registreret sig hos den (listeners gemmes fx i en liste).

7 7 JavaServer Faces Copyright © Lund & Bendsen A/S JSF Event model •En af de helt store styrker ved JSF er, at det introducerer en event-orienteret programmeringsmodel for web-applikationer. –Hvis en knap klikkes kan en lytter notificeres. –Hvis en input felts værdi ændres kan en lytter notificeres. •Generelt set affyres FacesEvents når en UI- komponents tilstand er ændret. •UI-komponenter som affyrer events kan opdeles i –Command-komponenter (knapper og links) –Input-komponenter (som holder en værdi)

8 8 JavaServer Faces Copyright © Lund & Bendsen A/S JSF Event model Der findes 3 typer events i JSF: •FacesEvents – affyres af komponenter når brugeren interagerer med dem: –ActionEvents – affyres af Command-komponenter. –ValueChangedEvents – affyres af input-komponenter. •SystemEvents – affyres af JSF i forbindelse med specifikke situationer: –ComponentSystemEvents – affyres af komponenter –Andre (”globale”) events affyres uden relation til enkelte komponenter. •PhaseEvents – affyres før og efter hver fase i livscyklus. –PhaseEvents er allerede behandlet i kapitlet om JSFs Lifecycle. Vi kigger derfor ikke yderligere på dem her.

9 9 JavaServer Faces Copyright © Lund & Bendsen A/S Event håndtering foregår server side (1/2) •Standard JSF event håndtering foregår server side. •Klikkes en knap (med registreret listener) eksempelvis, så sendes et request til serveren og først i løbet JSF lifecycle håndteres en ActionEvent. •En request-reply life cycle er altså nødvendig for at håndtere en event.

10 10 JavaServer Faces Copyright © Lund & Bendsen A/S Event håndtering foregår server side (2/2) FacesServlet Håndtering af ValueChangedEvents og ActionEvents JSF post request JSF response Restore View Apply Request Values Apply Request Values Process Events Process Validation response complete Process Events response complete Render Response Invoke Application Process Events Update Model Values response complete Process Events response complete Faces request Faces response Non- faces request

11 11 JavaServer Faces Copyright © Lund & Bendsen A/S •Events & Listeners •Action og ActionListener •ValueChangeListener •Eventmodellen i JSF •Navigation Navigation, events & listeners

12 12 JavaServer Faces Copyright © Lund & Bendsen A/S Actions og ActionListeners •Vi starter med at se på de 2 hyppigst brugte måder at håndtere events på i JSF. •Actions er metoder, der bindes til UIComponent- komponenter og kaldes, når komponenten ’aktiveres’. En Action kan føre til, at brugeren sendes til en ny side. •ActionListeners er ligeledes metoder, der bindes til UIComponents. En ActionListener fungerer på samme måde som en Action, men fører ikke til sideskift. Set fra brugerens synspunkt fører en actionlistener til, at der ’sker noget’ på siden. •Actions og ActionListeners kan kun bruges fra Command-kompontenter på JSF views (men alle UIComponents har Action-funktionalitet)

13 13 JavaServer Faces Copyright © Lund & Bendsen A/S Actions •En Action er en metode med følgende signatur: public String () •Returværdien bruges af navigationssystemet – mere om det senere. •En Action skal befinde sig i en managed bean eller backing bean for at kunne refereres fra en UIComponent. public String nextPageAction() { System.out.println("NextPageAction invoked!"); return "success"; } public String nextPageAction() { System.out.println("NextPageAction invoked!"); return "success"; } <h:commandButton action="#{demo.nextPageAction}" value="Næste side >>>" /> <h:commandButton action="#{demo.nextPageAction}" value="Næste side >>>" /> bean-klassen som metoden står i er bundet under navnet ’demo’

14 14 JavaServer Faces Copyright © Lund & Bendsen A/S Actions •Action-metoder vil typisk invokere forretningslogik (fx via en Business Delegate) og organisere de data, som næste skærmbillede afhænger af. •Action-metoder bør IKKE selv implementere forretningslogikken, da den så er bundet til JSF-frameworket.

15 15 JavaServer Faces Copyright © Lund & Bendsen A/S ActionListeners •En ActionListener er en metode, der har signaturen: public void (ActionEvent e) •En ActionListener kan befinde sig i en managed bean og refereres så fra en UICommand. <h:commandButton id="cmd1" actionListener="#{demo.generateData}" value="Lav navn"/> <h:commandButton id="cmd1" actionListener="#{demo.generateData}" value="Lav navn"/> public void generateData(ActionEvent ae) { String id = ae.getComponent().getId(); System.out.println("generateData invoked from " + id);... } public void generateData(ActionEvent ae) { String id = ae.getComponent().getId(); System.out.println("generateData invoked from " + id);... } klassen som metoden står i er bundet under navnet ’demo’

16 16 JavaServer Faces Copyright © Lund & Bendsen A/S ActionEvent •Udfra den ActionEvent-instans, som en ActionListener modtager som parameter, kan den få oplysninger om: –hvilken komponent, der fyrede eventet (getComponent()) –hvilken fase eventet skal afleveres (behandles) i (getPhaseId())

17 17 JavaServer Faces Copyright © Lund & Bendsen A/S Hvornår affyres ActionEvents Restore View Apply Request Values Apply Request Values Process Events Process Validation response complete Process Events response complete Render Response Invoke Application Process Events Update Model Values response complete Process Events response complete Faces request Faces response Non-faces request ActionEvent immediate=true ActionEvent

18 18 JavaServer Faces Copyright © Lund & Bendsen A/S Actions og ActionListeners kombineret •En knap eller et link kan sagtens have registreret både en (eller flere) action listener(s) og have en action-attribut på samme tid. Action listenernes metoder vil da blive afviklet før action’en. <h:commandLink value="welcome" actionListener="#{form.useLinkValue}” action="#{form.followLink}"> <h:commandLink value="welcome" actionListener="#{form.useLinkValue}” action="#{form.followLink}">

19 19 JavaServer Faces Copyright © Lund & Bendsen A/S •Events & Listeners •Action og ActionListener •ValueChangeListener •Eventmodellen i JSF •Navigation Navigation, events & listeners

20 20 JavaServer Faces Copyright © Lund & Bendsen A/S ValueChangeEvents •De komponenter, hvis tilstand kan ændres af brugeren (dvs. dem der implementerer EditableValueHolder) kan fyre events, når deres tilstand ændres. •På disse komponenter kan man registrere listeners (ValueChangeListeners), som modtager ValueChangeEvents. <h:inputText id="id_city" valueChangeListener="#{demo.toUpper}"/> <h:inputText id="id_city" valueChangeListener="#{demo.toUpper}"/> public void toUpper(ValueChangeEvent event) { String value = (String) event.getNewValue(); UIInput source = (UIInput) event.getComponent(); source.setValue(value.toUpperCase()); } public void toUpper(ValueChangeEvent event) { String value = (String) event.getNewValue(); UIInput source = (UIInput) event.getComponent(); source.setValue(value.toUpperCase()); } klassen som metoden står i er bundet under navnet ’demo’

21 21 JavaServer Faces Copyright © Lund & Bendsen A/S Fyring af ValueChangeEvents •For Web Applikationer er det vigtigt at forstå, at ValueChangeEvents først fyres når en form er blevet submitted. •Dette sker fx når brugeren trykker på UICommand knapper. Det sker IKKE når brugeren forlader det felt, som lytteren sidder på. •Der er mao. ikke tale om Ajax-lignende opførsel.

22 22 JavaServer Faces Copyright © Lund & Bendsen A/S Hvornår affyres ValueChangeEvents Restore View Apply Request Values Apply Request Values Process Events Process Validation response complete Process Events response complete Render Response Invoke Application Process Events Update Model Values response complete Process Events response complete Faces request Faces response Non-faces request ValueChangeEvent Immediate=true ValueChangeEvent

23 23 JavaServer Faces Copyright © Lund & Bendsen A/S ValueChangedEvents •ValueChangedEvent-klassen indeholder bl.a.: –den NYE værdi for komponenten (getNewValue()) –den GAMLE/FORRIGE værdi for komponenten (getOldValue()) –samt alt fra FacesEvent.

24 24 JavaServer Faces Copyright © Lund & Bendsen A/S Eksempel Læg mærke til: •nextPage.jsp har en ValueChangeListener konfigureret på inputText feltet for bynavnet. •Læg mærke til at hele formen submittes til serveren ved at give onblur attributten på inputText feltet værdien submit(). JSF-Ex-Navigation- Actions

25 25 JavaServer Faces Copyright © Lund & Bendsen A/S SystemEvents •Man kan lytte på en lang række specifikke hændelser, som f.eks. når en komponent tilføjes til viewet eller før viewet bliver renderet, via de såkaldte SystemEvents. •Denne funktionalitet kom til i JSF 2.0. •Nogle af disse er tilknyttet komponenter – andre mere generelle hændelser i JSF- processen.

26 26 JavaServer Faces Copyright © Lund & Bendsen A/S Registrering af events •Med tagget kan man registrere lyttere på en anden komponent. •Tilsvarende kan man kalde Application.subscribeToEvent(...) for at registrere globale lyttere. Nogle mulige værdier: postAddToView, preRenderComponent, preValidate, postValidate

27 27 JavaServer Faces Copyright © Lund & Bendsen A/S...... View metadata •Via tagget kan man knytte event listeners til selve viewet. •View parametre ( )gør det muligt at stille parameter-krav til URL'en, eks. for at gøre den bookmarkable og/eller understøtte brug af browserens frem og tilbage knapper person.xhtml ex. http://myhost/myapp/person.jsf?person_id=42

28 28 JavaServer Faces Copyright © Lund & Bendsen A/S •Events & Listeners •Action og ActionListener •ValueChangeListener •Eventmodellen i JSF •Navigation Navigation, events & listeners

29 29 JavaServer Faces Copyright © Lund & Bendsen A/S Overblik over Event-systemet i JSF > PhaseEvent ActionEventValueChangeEvent > FacesEvent UIComponent > FacesListener > java.util.EventListener > PhaseListener > ActionListener > ValueChange- Listener UICommand > EditableValueHolder * * * java.util.EventObject > SystemEventListener SystemEvent ComponentSystemEvent > ComponentSystem- EventListener Nyt i JSF 2.x

30 30 JavaServer Faces Copyright © Lund & Bendsen A/S Eventmodellen i komponenter (1/2) •Klassen UIComponent definerer en række metoder som relaterer sig til brug af events/listeners. •Med metoderne addFacesListener(FacesListener) og removeFacesListener(FacesListener) kan man hhv. tilføje og fjerne objekter som lyttere på komponenten. Objekterne som registreres skal implementere et subinterface af interfacet FacesListener. •Med metoden getFacesListeners() kan man få fat i et array med de allerede registrerede FacesListener- objekter.

31 31 JavaServer Faces Copyright © Lund & Bendsen A/S Eventmodellen i komponenter (2/2) •Når en komponent ønsker at gøre en registreret FacesListener opmærksom på noget, kan den lave et nyt objekt af typen FacesEvent med den fornødne information. Et kald på komponentens metode broadcast() med den nye event som parameter vil da propagere eventen ud til alle lytterne. •Events vil som regel ikke blive sendt ud til lytterne før efter en fase er slut. JSF vil derfor, i stedet for umiddelbart at kalde broadcast(), kalde metoden queueEvent() med eventen som parameter, hvilket sætter den i en intern kø. Efter den aktuelle fase er afsluttet vil JSF da kalde broadcast på eventene i køen efter tur.

32 32 JavaServer Faces Copyright © Lund & Bendsen A/S UIComponents Events Events, Application, Components og Contexts > PhaseListener > PhaseEvent > ActionListener ActionEvent > FacesListener > ValueChangeListener ValueChangeEvent > FacesEvent DefaultActionListener UIComponent Specialiserede UIKlasser * UIViewRoot FacesContext FacesMessage * ExternalContext 1 Application ValueExpression MethodExpression Backing Beans > 1 1 Context Application

33 33 JavaServer Faces Copyright © Lund & Bendsen A/S •Events & Listeners •Action og ActionListener •ValueChangeListener •Eventmodellen i JSF •Navigation Navigation, events & listeners

34 34 JavaServer Faces Copyright © Lund & Bendsen A/S Navigation i JSF •Navigation i almindelige webapplikation er ofte af en ret statisk natur. Som regel er der ”hard-coded” ind i det enkelte link eller den enkelte knap hvilken side brugeren kommer til, når han trykker på det/den. •Idet JSF søger at implementere MVC i videst muligt omfang – og dermed separere view og controller, altså selve siden og hvordan man kommer derhen – foregår navigation i JSF som udgangspunkt via konfigurationsfilerne som f.eks. faces-config.xml.

35 35 JavaServer Faces Copyright © Lund & Bendsen A/S Navigation outcomes •JSF definerer hvilket view der skal generere et nyt response til klienten vha. såkaldte outcomes. •Et outcome er blot en string som definerer en eller anden form for værdi, f.eks. ”success”, ”failure” eller ”login”. Denne string bliver senere kædet sammen med en konkret ressource vha. såkaldte navigation rules.

36 36 JavaServer Faces Copyright © Lund & Bendsen A/S Navigation actions •Komponenter af typen UICommand vil typisk sættes op til at afvikle actions (implementeret som ActionExpressions) når de bliver aktiveret (f.eks. når en bruger trykker på en knap). •Dette kan gøres på komponenten med metoden setActionExpression() – men vil langt oftere blive foretaget på komponenttagget med attributten action. •En action kan være navnet på et outcome – men kan også være navnet på en metode, som skal kaldes når der bliver trykket på knappen. Denne metode skal returnere en string, der repræsenterer et outcome.

37 37 JavaServer Faces Copyright © Lund & Bendsen A/S Navigation rules •JSF-konfigurationsfilerne indeholder såkaldte navigation rules. En navigation rule repræsenterer navigationsinformationer for en enkelt side (et enkelt view) – hvor links og knapper fra denne fører hen. •En navigation rule repræsenteres med elementet og har ofte et subelement ved navn. • definerer hvilket view denne navigation rule skal forholde sig til. Hvis elementets værdi er en asterisk ( * ) eller elementet helt mangler, gælder den pågældende navigation rule for samtlige views. •En navigation rule indeholder en eller flere navigation cases. I disse bliver outcomes kædet sammen med de ressourcer (typisk jsp- sider) de fører til vha. elementerne og.

38 38 JavaServer Faces Copyright © Lund & Bendsen A/S Eksempler på navigation rules /index.jsp login /welcome.jsp signup /newuser.jsp /index.jsp login /welcome.jsp signup /newuser.jsp #{quiz.answerAction} again /again.jsp #{quiz.startOverAction} again /index.jsp #{quiz.answerAction} again /again.jsp #{quiz.startOverAction} again /index.jsp Samme outcome, men fra forskellige actions Eksempel på forskellige navigation cases fra samme view

39 39 JavaServer Faces Copyright © Lund & Bendsen A/S Navigationsregler & præcedens (1/3) •outcome = null •100% match on from-view-id •match with wild card •from-view-id •Rule with out •from-view-id •No •Match on •from-action and from-outcome •Match on •from-outcome and no from- action exists •Match on •from-action and no from-outcome •exists •Case without •from-action and from-outcome •exists •yes •No •Render new page •yes •No Navigationsforløbet har to faser: • Dernæst findes den matchende • Først findes den matchende

40 40 JavaServer Faces Copyright © Lund & Bendsen A/S Navigationsregler & præcedens (2/3) outcome = null 100% match på from-view-id Wild carch match på from-view-id En regel uden from-view-id No •Match on •from-action and from-outcome •Match on •from-outcome and no from- action exists •Match on •from-action and no from-outcome •exists •Case without •from-action and from-outcome •exists •yes •No •Render new page •yes •No • Dernæst findes den matchende Yes Rendér samme view No

41 41 JavaServer Faces Copyright © Lund & Bendsen A/S No Navigationsregler & præcedens (3/3) outcome = null 100% match på from-view-id Wild card match på from-view-id En regel uden from-view-id No Yes Rendér samme view Match på from-action og from-outcome Match på from-outcome, from-action udeladt Match på from-action, from-outcome udeladt Case uden og Yes No Yes No Rendér samme view Rendér (nyt) view

42 42 JavaServer Faces Copyright © Lund & Bendsen A/S Statisk navigation •Vi kan på command-komponenterne angive et outcome direkte. Dette outcome er det samme hver gang, da det ikke er betinget af udfaldet af en metode. Denne navigationsform kaldes derfor statisk navigation. •Statisk navigation bruges ofte i menuer <h:commandLink id="print_customers" value="#{Message.menu_print_customers}" action=”create_order" /> <h:commandLink id="print_customers" value="#{Message.menu_print_customers}" action=”create_order" /> create_order /pages/create_order.jsp create_order /pages/create_order.jsp

43 43 JavaServer Faces Copyright © Lund & Bendsen A/S Implicit navigation •Fra JSF 2.x er det blevet muligt at bruge såkaldt implicit navigation, hvor man som i ”klassiske” web-apps skriver destinationen direkte ind i linket. Derfor kan man nu undlade at lave navigation via faces-config.xml hvis man blot specificerer et view-id direkte:

44 44 JavaServer Faces Copyright © Lund & Bendsen A/S Conditional navigation En anden nyhed i JSF 2.x er, at navigation cases nu understøtter valg af view på baggrund af conditional EL expressions. #{login.auth} /welcome.xhtml #{user.loggedIn} #{login.auth} /try-again.xhtml #{not user.loggedIn} #{login.auth} /welcome.xhtml #{user.loggedIn} #{login.auth} /try-again.xhtml #{not user.loggedIn}

45 45 JavaServer Faces Copyright © Lund & Bendsen A/S • 7) Ændring af brugernavn Øvelse