• Save
JSF 2 Kompositkomponenten (JAX 2012)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

JSF 2 Kompositkomponenten (JAX 2012)

  • 2,775 views
Uploaded on

Folien zum Vortrag JSF 2 Kompositkomponenten von Michael Kurz auf der JAX 2012 in Mainz. ...

Folien zum Vortrag JSF 2 Kompositkomponenten von Michael Kurz auf der JAX 2012 in Mainz.

Die dazugehörenden Beispiele sind unter https://github.com/jsflive zu finden.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,775
On Slideshare
2,771
From Embeds
4
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 4

http://www.mefeedia.com 1
http://www.docseek.net 1
http://www.slashdocs.com 1
http://www.docshut.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JSF 2-Kompositkomponenten Kompositkomponenten im Einsatz Michael Kurz | IRIAN
  • 2. Agenda• Motivation• JSF 2-Ressourcenverwaltung• ABC der Kompositkomponenten• Erweiterte Konzepte• Beispiele• Ausblick: Integration von Ajax
  • 3. MOTIVATION
  • 4. Motivation• Komponente zentraler Bestandteil von JSF• Eigene Komponente nötig/sinnvoll• Klassische Komponenten – Mächtig aber komplex (JSF-Meisterprüfung)• Neuer Ansatz: Kompositkomponenten – Komponenten ohne Java und XML – Wiederverwendung von Seitenfragmenten
  • 5. Klassische Komponenten Komponente Komponente Renderer Tag-Handler Taglib Skript Bild Stylesheet
  • 6. Kompositkomponenten• Komponenten ohne Java und XML Komponente Komposit- Skript Bild Stylesheet komponente
  • 7. JSF 2-RESSOURCEN
  • 8. Einsatz von Ressourcen• Ressourcen (Bilder, Skripte oder Stylesheets) – In JSF-Seiten über Tags – Als Abhängigkeiten in Komponenten• Ressource hat einen Namen... <h:graphicImage name="image.png"/>• ... und liegt optional in einer Bibliothek <h:graphicImage library="images" name="image.png"/> <h:outputScript library="scripts" name="script.js"/> <h:outputStylesheet library="css" name="style.css"/>
  • 9. Auflösung von Ressourcen• Auflösung von Ressourcen in JSF: 1. In /resources in der Webapplikation 2. In /META-INF/resources im Classpath• Bibliothek als Verzeichnis interpretiert / resources images image.png• Positionierung in der Seite• h:head und h:body nicht vergessen!
  • 10. ABC DERKOMPOSITKOMPONENTEN
  • 11. Einsatz einer Kompositkomponente• Kompositkomponente panelBox.xhtml / resources mygourmet panelBox.xhtml• Verwendung in einer Seite <html xmlns:h="http://java.sun.com/jsf/html" xmlns:mc="http://java.sun.com/jsf/composite/mygourmet"> <mc:panelBox title="Panel-Header"> <h:outputText value="Erster Text"/> <h:outputText value="Zweiter Text"/> </mc:panelBox> </html>
  • 12. Beispiel einer Kompositkomponente• Kompositkomponente panelBox.xhtml <html xmlns:h="http://java.sun.com/jsf/html" xmlns:cc="http://java.sun.com/jsf/composite"> <head><title>Panel box component</title></head><body> <cc:interface> <cc:attribute name="title"/> </cc:interface> <cc:implementation> <h:panelGroup layout="block"> <h:outputText value="#{cc.attrs.title}"/> <cc:insertChildren/> </h:panelGroup> </cc:implementation> </body></html>
  • 13. Resultierender Komponentenbaum• Teilbaum der Komponente panelBox.xhtml Automatisch erstellte UINamingContainer Wurzelkomponente HtmlPanelGroup HtmlOutputText HtmlOutputText HtmlOutputText Komponenten der Komponenten aus Kompositkomponente aufrufender Seite
  • 14. cc:interface• Schnittstelle der Komponente nach außen• Definition von Attributen und Facets – cc:attribute – cc:facet• Verhalten interner Komponenten – cc:valueHolder – cc:editableValueHolder – cc:actionSource
  • 15. Attribute• Attribute <cc:attribute name="label" required="true"/> <cc:attribute name="text" required=false/> <cc:attribute name="header" default="Header"/>• Attribute mit Typ oder Methoden-Signatur <cc:attribute name="max" type="java.lang.Integer"/> <cc:attribute name="cancelAction" method-signature="java.lang.String f()"/>• Spezialfall: action-Attribut <cc:attribute name="action" targets="save"/>
  • 16. Beispiel für cc:interface 1/2• Kompositkomponente simpleInput.xhtml <cc:interface> <cc:attribute name="label" default="Input"/> <cc:attribute name="action" targets="submit"/> <cc:attribute name="value" required="true"/> <cc:editableValueHolder name="input"/> <cc:actionSource name="submit"/> </cc:interface> <cc:implementation> <h:outputLabel for="in" value="#{cc.attrs.label}"/> <h:inputText id="in" value="#{cc.attrs.value}"/> <h:commandButton id="submit" value="Submit"/> </cc:implementation>
  • 17. Beispiel für cc:interface 2/2• simpleInput.xhtml im Einsatz <mc:simpleInput action="#{myBean.save}" value="#{myBean.longValue}"> <f:actionListener for="submit" binding="#{myBean.saveListener}"/> <f:validateLength for="input" minimum="10"/> <f:valueChangeListener for="input" binding="#{myBean.valueChanged}"/> </mc:simpleInput>
  • 18. cc:implementation• Implizites Objekt cc – Aktuellen Kompositkomponente – #{cc.attrs.myAttribute} – #{cc.facets.myFacet}• Kindkomponenten einfügen: – <cc:insertChildren/>• Facets aus aufrufender Seite verwenden: – <cc:insertFacet name="header"/> – <cc:renderFacet name="header"/>
  • 19. Beispiel für cc:implementation 1/2• Kompositkomponente panelBox.xhtml <cc:interface> <cc:facet name="header" required="false"/> </cc:interface> <cc:implementation> <h:panelGroup layout="block"> <c:if test="#{!empty cc.facets.header}"> <p><cc:renderFacet name="header"/></p> </c:if> <cc:insertChildren/> </h:panelGroup> </cc:implementation>
  • 20. Beispiel für cc:implementation 2/2• Komponente panelBox.xhtml mit Facets <mc:panelBox id="menu"> <f:facet name="header"> <h:outputText value="Menu"/> </f:facet> <h:panelGrid columns="1"> <h:commandLink action="page1" value="Page 1"/> <h:commandLink action="page2" value="Page 2"/> </h:panelGrid> </mc:panelBox> Menu• Mögliche Ausgabe: Page 1 Page 2
  • 21. DemonstrationKompositkomponente collapsiblePanelBeispiel: https://github.com/jsflive/collapsible01
  • 22. ERWEITERTE KONZEPTE
  • 23. Ressourcen in Kompositkomponenten• Ressourcen in Kompositkomponenten: <cc:implementation> <h:outputScript library="mygourmet" name="script.js" target="head"/> <h:outputStylesheet name="style.css" library="mygourmet"/> </cc:implementation>• Bibliothek this in JSF 2.1 <cc:implementation> <h:outputScript target="head" value="#{resource[this:script.js]}"/> </cc:implementation>
  • 24. Benutzerdefinierte Wurzelkomponente• Spezielles Verhalten in Java implementieren• Wurzelkomponente über Komponententyp <cc:interface componentType="at.irian.MyComponent"/> @FacesComponent("at.irian.MyComponent") public class MyComponent extends UINamingContainer{}• Direkter Zugriff auf Eigenschaften <h:panelGroup rendered="#{cc.visible}"> <cc:insertChildren/> </h:panelGroup>
  • 25. DemonstrationBenutzerdefinierte WurzelkomponenteKompositkomponente mit benutzerdefinierterWurzelkomponenteBeispiel: https://github.com/jsflive/collapsible02
  • 26. Die eigene Komponentenbibliothek• JAR mit Artefakten erstellen 1. Kompositkomponenten in /META-INF/resources 2. Konfiguration (.taglib.xml) in /META-INF <facelet-taglib version="2.0" ...> <namespace>http://at.irian/mygourmet</namespace> <composite-library-name>mygourmet </composite-library-name> </facelet-taglib> 3. Komponenten, Konverter, Validatoren... 4. faces-config.xml in /META-INF
  • 27. DemonstrationDie eigene KomponentenbibliothekBeispiel: https://github.com/jsflive/collapsible03
  • 28. Neugierig?• Marinschek, Kurz, Müllan: JavaServer Faces 2.0, dpunkt.Verlag• Irian JSF@Work Online-Tutorial http://jsfatwork.irian.at• JSFlive Weblog http://jsflive.wordpress.com