JSF 2-Kompositkomponenten  Kompositkomponenten im Einsatz       Michael Kurz | IRIAN
Agenda•   Motivation•   JSF 2-Ressourcenverwaltung•   ABC der Kompositkomponenten•   Erweiterte Konzepte•   Beispiele•   A...
MOTIVATION
Motivation• Komponente zentraler Bestandteil von JSF• Eigene Komponente nötig/sinnvoll• Klassische Komponenten  – Mächtig ...
Klassische Komponenten    Komponente     Komponente   Renderer   Tag-Handler   Taglib       Skript       Bild     Stylesheet
Kompositkomponenten• Komponenten ohne Java und XML    Komponente      Komposit-   Skript   Bild   Stylesheet     komponente
JSF 2-RESSOURCEN
Einsatz von Ressourcen• Ressourcen (Bilder, Skripte oder Stylesheets)   – In JSF-Seiten über Tags   – Als Abhängigkeiten i...
Auflösung von Ressourcen• Auflösung von Ressourcen in JSF:   1. In /resources in der Webapplikation   2. In /META-INF/reso...
ABC DERKOMPOSITKOMPONENTEN
Einsatz einer Kompositkomponente• Kompositkomponente panelBox.xhtml       /           resources              mygourmet    ...
Beispiel einer Kompositkomponente• Kompositkomponente panelBox.xhtml <html xmlns:h="http://java.sun.com/jsf/html"     xmln...
Resultierender Komponentenbaum• Teilbaum der Komponente panelBox.xhtml                                          Automatisc...
cc:interface• Schnittstelle der Komponente nach außen• Definition von Attributen und Facets  – cc:attribute  – cc:facet• V...
Attribute• Attribute  <cc:attribute name="label" required="true"/>  <cc:attribute name="text" required=false/>  <cc:attrib...
Beispiel für cc:interface 1/2• Kompositkomponente simpleInput.xhtml <cc:interface>   <cc:attribute name="label" default="I...
Beispiel für cc:interface 2/2• simpleInput.xhtml im Einsatz <mc:simpleInput action="#{myBean.save}"     value="#{myBean.lo...
cc:implementation• Implizites Objekt cc  – Aktuellen Kompositkomponente  – #{cc.attrs.myAttribute}  – #{cc.facets.myFacet}...
Beispiel für cc:implementation 1/2• Kompositkomponente panelBox.xhtml <cc:interface>   <cc:facet name="header" required="f...
Beispiel für cc:implementation 2/2• Komponente panelBox.xhtml mit Facets <mc:panelBox id="menu">   <f:facet name="header">...
DemonstrationKompositkomponente collapsiblePanelBeispiel: https://github.com/jsflive/collapsible01
ERWEITERTE KONZEPTE
Ressourcen in Kompositkomponenten• Ressourcen in Kompositkomponenten:  <cc:implementation>    <h:outputScript library="myg...
Benutzerdefinierte Wurzelkomponente• Spezielles Verhalten in Java implementieren• Wurzelkomponente über Komponententyp  <c...
DemonstrationBenutzerdefinierte WurzelkomponenteKompositkomponente mit benutzerdefinierterWurzelkomponenteBeispiel: https:...
Die eigene Komponentenbibliothek• JAR mit Artefakten erstellen  1. Kompositkomponenten in /META-INF/resources  2. Konfigur...
DemonstrationDie eigene KomponentenbibliothekBeispiel: https://github.com/jsflive/collapsible03
Neugierig?• Marinschek, Kurz, Müllan:  JavaServer Faces 2.0, dpunkt.Verlag• Irian JSF@Work Online-Tutorial  http://jsfatwo...
Upcoming SlideShare
Loading in...5
×

JSF 2 Kompositkomponenten (JAX 2012)

2,392

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,392
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "JSF 2 Kompositkomponenten (JAX 2012)"

  1. 1. JSF 2-Kompositkomponenten Kompositkomponenten im Einsatz Michael Kurz | IRIAN
  2. 2. Agenda• Motivation• JSF 2-Ressourcenverwaltung• ABC der Kompositkomponenten• Erweiterte Konzepte• Beispiele• Ausblick: Integration von Ajax
  3. 3. MOTIVATION
  4. 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. 5. Klassische Komponenten Komponente Komponente Renderer Tag-Handler Taglib Skript Bild Stylesheet
  6. 6. Kompositkomponenten• Komponenten ohne Java und XML Komponente Komposit- Skript Bild Stylesheet komponente
  7. 7. JSF 2-RESSOURCEN
  8. 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. 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. 10. ABC DERKOMPOSITKOMPONENTEN
  11. 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. 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. 13. Resultierender Komponentenbaum• Teilbaum der Komponente panelBox.xhtml Automatisch erstellte UINamingContainer Wurzelkomponente HtmlPanelGroup HtmlOutputText HtmlOutputText HtmlOutputText Komponenten der Komponenten aus Kompositkomponente aufrufender Seite
  14. 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. 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. 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. 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. 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. 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. 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. 21. DemonstrationKompositkomponente collapsiblePanelBeispiel: https://github.com/jsflive/collapsible01
  22. 22. ERWEITERTE KONZEPTE
  23. 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. 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. 25. DemonstrationBenutzerdefinierte WurzelkomponenteKompositkomponente mit benutzerdefinierterWurzelkomponenteBeispiel: https://github.com/jsflive/collapsible02
  26. 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. 27. DemonstrationDie eigene KomponentenbibliothekBeispiel: https://github.com/jsflive/collapsible03
  28. 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

×