1 / 35

UI Components I

UI Components I. 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. Taglibs: Core og HTML.

keelty
Télécharger la présentation

UI Components I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related