Dresden · Frankfurt/Main · Leipzig · München · Hamburg · Görlitz · Berlin Einführung in die Java-Webentwicklung Part II: J...
Einführung in die Java-Webentwicklung JSF – Überblick JEE-Webkomponenten – Java Server Faces <ul><li>strikte Trennung zw. ...
Einführung in die Java-Webentwicklung JSF – Einbindung in JEE-Webapplikation JEE-Webkomponenten – Java Server Faces <ul><l...
Einführung in die Java-Webentwicklung JSF – Konfiguration JEE-Webkomponenten – Java Server Faces <ul><li>WEB-INF/ web.xml ...
Einführung in die Java-Webentwicklung <ul><li>< h:form   id = &quot;article_details_${status.index}&quot; > </li></ul><ul>...
Einführung in die Java-Webentwicklung <ul><li>Grouping Element Tags: </li></ul><ul><ul><li># h:dataTable  creates a  table...
Einführung in die Java-Webentwicklung <ul><li>Input Element Tags: </li></ul><ul><ul><li># h:form  creates a form </li></ul...
Einführung in die Java-Webentwicklung <ul><li>JSF Core Tags: </li></ul><ul><ul><li># f:view  tag is used to create top lev...
Einführung in die Java-Webentwicklung <ul><li>Template Definition (irgendeine xhtml/jsf/jsp-Datei unter <template_path>.xh...
Einführung in die Java-Webentwicklung JSF – ManagedBean  – Deklaration JEE-Webkomponenten – Java Server Faces <ul><li>Vari...
Einführung in die Java-Webentwicklung JSF – ManagedBean  – Dependency Injection JEE-Webkomponenten – Java Server Faces <ul...
Einführung in die Java-Webentwicklung <ul><li>In den  JSF -Tags   (achtet bitte auf die Schreibweise: #{…} anstatt ${…} be...
Einführung in die Java-Webentwicklung <ul><li>Variante 1: Anbindung an ManagedBean-Methoden </li></ul><ul><li>< h:commandB...
Einführung in die Java-Webentwicklung <ul><li>Variante 2: Anbindung eines ActionListener‘s: </li></ul><ul><ul><li>< h:comm...
Einführung in die Java-Webentwicklung <ul><li>Bundle-Einbindung (innerhalb einer Ansichtbeschreibung): </li></ul><ul><li><...
Einführung in die Java-Webentwicklung JSF –  Composites - Überblick JEE-Webkomponenten – Java Server Faces <ul><li>Alterna...
Einführung in die Java-Webentwicklung In einer xhtml-Datei, z.Bsp. edit-form.xhtml: < html   xmlns = &quot;http://www.w3.o...
Einführung in die Java-Webentwicklung <ul><li>< html   xmlns = &quot;http://www.w3.org/1999/xhtml&quot;  …   > </li></ul><...
Einführung in die Java-Webentwicklung <ul><li>Per Convention: </li></ul><ul><ul><li>-  die Composite-Definition muss im „ ...
<ul><li>Vollständiges Anwendungsbeispiel: </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; … </li></...
Einführung in die Java-Webentwicklung JSF – Navigation (1) JEE-Webkomponenten – Java Server Faces <ul><li>Aktionselemente:...
Einführung in die Java-Webentwicklung JSF – Navigation (2) JEE-Webkomponenten – Java Server Faces <ul><li>Navigationsregel...
Einführung in die Java-Webentwicklung <ul><li>„ Magic “-Verzeichnis:   <web-root>/resources .  Wird benutzt um Ressourcen ...
Einführung in die Java-Webentwicklung JSF – Übungsbeispiele  <ul><li>JSF Skeleton-Projekt einrichten und lauffähig bekomme...
Einführung in die Java-Webentwicklung <ul><li>JavaServer Faces HTML Tags Reference </li></ul><ul><ul><li>http://www.exadel...
Einführung in die Java-Webentwicklung <ul><li>JSF-Komponenten-Bibliotheken </li></ul><ul><li>RichFaces </li></ul><ul><ul><...
Einführung in die Java-Webentwicklung Der Kontakt Schnell und Direkt <ul><li>Dresden </li></ul><ul><li>Fritz-Foerster-Plat...
Upcoming SlideShare
Loading in …5
×

Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Faces - JSF (in german)

3,100 views
2,856 views

Published on

Einführung in den Technologienstack der Java Enterprise Edition (JEE) zum Bauen von komplexen Webapplikationen.

In der Prsäntation wurden die folgenden Technologien betrachtet: reilnes HTTP-Format, Servlets, JSP's (Java Server Pages) und letzendlich JSF (2.0, Java Server Faces).

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
3,100
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Faces - JSF (in german)

  1. 1. Dresden · Frankfurt/Main · Leipzig · München · Hamburg · Görlitz · Berlin Einführung in die Java-Webentwicklung Part II: JEE-Webkomponenten – (3/3) – Java Server Faces
  2. 2. Einführung in die Java-Webentwicklung JSF – Überblick JEE-Webkomponenten – Java Server Faces <ul><li>strikte Trennung zw. Darstellung und Verhalten </li></ul><ul><li>besteht aus (Ausschnitt aus dem JEE-Tutorial): </li></ul><ul><ul><li>An API for </li></ul></ul><ul><ul><ul><li>representing UI components and managing their state </li></ul></ul></ul><ul><ul><ul><li>handling events, server-side validation, and data conversion </li></ul></ul></ul><ul><ul><ul><li>defining page navigation </li></ul></ul></ul><ul><ul><ul><li>supporting internationalization and accessibility </li></ul></ul></ul><ul><ul><ul><li>providing extensibility for all these features </li></ul></ul></ul><ul><ul><li>Two (3+?) JavaServer Pages (JSP) custom tag libraries for expressing UI components within a JSP page and for wiring components to server-side objects </li></ul></ul>
  3. 3. Einführung in die Java-Webentwicklung JSF – Einbindung in JEE-Webapplikation JEE-Webkomponenten – Java Server Faces <ul><li>in die (X) HTML -Seiten </li></ul><ul><ul><li>< html xmlns = &quot;http://www.w3.org/1999/xhtml&quot; </li></ul></ul><ul><ul><ul><li>xmlns:h = &quot;http://java.sun.com/jsf/html&quot; </li></ul></ul></ul><ul><ul><ul><li>xmlns:f = &quot;http://java.sun.com/jsf/core&quot; </li></ul></ul></ul><ul><ul><ul><li>xmlns:ui = &quot;http://java.sun.com/jsf/facelets&quot; > </li></ul></ul></ul><ul><li>in die JSP -Seiten </li></ul><ul><ul><li><%@ taglib prefix = &quot;h&quot; uri = &quot;http://java.sun.com/jsf/html&quot; %> </li></ul></ul><ul><ul><li><%@ taglib prefix = „f„ uri = &quot;http://java.sun.com/jsf/core&quot; %> </li></ul></ul><ul><ul><li><%@ taglib prefix = „ui&quot; uri = &quot;http://java.sun.com/jsf/facelets&quot; %> </li></ul></ul><ul><li>Diese standardisierte Namespace‘s werden von dem Web-Container erkannt und die </li></ul><ul><li>entsprechenden Tags werden „ausgeführt“. </li></ul>
  4. 4. Einführung in die Java-Webentwicklung JSF – Konfiguration JEE-Webkomponenten – Java Server Faces <ul><li>WEB-INF/ web.xml </li></ul><ul><ul><li>< servlet > </li></ul></ul><ul><ul><ul><li>< servlet-name > Faces Servlet </ servlet-name > </li></ul></ul></ul><ul><ul><ul><li>< servlet-class > javax.faces.webapp.FacesServlet </ servlet-class > </li></ul></ul></ul><ul><ul><ul><li>< load-on-startup > 1 </ load-on-startup > </li></ul></ul></ul><ul><ul><li></ servlet > </li></ul></ul><ul><ul><li>< servlet-mapping > </li></ul></ul><ul><ul><ul><li>< servlet-name > Faces Servlet </ servlet-name > </li></ul></ul></ul><ul><ul><ul><li>< url-pattern > /faces/* </ url-pattern > </li></ul></ul></ul><ul><ul><li></ servlet-mapping > </li></ul></ul><ul><li>WEB-INF/ faces-config.xml (optional) </li></ul><ul><li>< faces-config version = &quot;2.0&quot; </li></ul><ul><ul><li>xmlns = &quot;http://java.sun.com/xml/ns/javaee&quot; </li></ul></ul><ul><ul><li>xmlns:xsi = &quot;http://www.w3.org/2001/XMLSchema-instance&quot; </li></ul></ul><ul><ul><li>xsi:schemaLocation = &quot;http://java.sun.com/xml/ns/javaee </li></ul></ul><ul><ul><li>http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd&quot; >… </li></ul></ul>
  5. 5. Einführung in die Java-Webentwicklung <ul><li>< h:form id = &quot;article_details_${status.index}&quot; > </li></ul><ul><ul><li>Bezeichnung: </li></ul></ul><ul><ul><li>< h:inputText id = &quot;article_name&quot; </li></ul></ul><ul><ul><li>label = &quot;Bezeichnung&quot; value = &quot;…&quot; > </ h:inputText > < br /> </li></ul></ul><ul><ul><li>Größe: </li></ul></ul><ul><ul><li>< h:inputText id = &quot;article_size&quot; </li></ul></ul><ul><ul><li>label = &quot;Größe&quot; value = &quot;…&quot; > </ h:inputText > < br /> </li></ul></ul><ul><ul><li>Preis: </li></ul></ul><ul><ul><li>< h:inputText id = &quot;article_price&quot; </li></ul></ul><ul><ul><li>label = &quot;Preis&quot; value = &quot;…&quot; > </ h:inputText > < br /> </li></ul></ul><ul><ul><li>Wird Meterweise verkauft: </li></ul></ul><ul><ul><li>< h:selectBooleanCheckbox id = &quot;article_meterWarer&quot; </li></ul></ul><ul><ul><li>label = &quot;Preis&quot; value = &quot;…&quot; > </ h:selectBooleanCheckbox > < br /> </li></ul></ul><ul><ul><li>< h:commandButton id = &quot;submit&quot; action = &quot;save&quot; value = &quot;Save&quot; /> </li></ul></ul><ul><li></ h:form > </li></ul>JSF – Repräsentation – Anwendungsbeispiel JEE-Webkomponenten – Java Server Faces
  6. 6. Einführung in die Java-Webentwicklung <ul><li>Grouping Element Tags: </li></ul><ul><ul><li># h:dataTable creates a table control </li></ul></ul><ul><ul><li># h:column creates column in a dataTable </li></ul></ul><ul><ul><li># h:panelGrid creates html table with specified number of columns </li></ul></ul><ul><ul><li># h:panelGroup used to group other components where … </li></ul></ul><ul><li>Output Element Tags: </li></ul><ul><ul><li># h:graphicImage displays an image </li></ul></ul><ul><ul><li># h:message displays the most recent message for a component </li></ul></ul><ul><ul><li># h:messages displays all messages </li></ul></ul><ul><ul><li># h:outputFormat creates outputText, but formats compound messages </li></ul></ul><ul><ul><li># h:outputLabel creates label </li></ul></ul><ul><ul><li># h:outputLink creates anchor </li></ul></ul><ul><ul><li># h:outputText creates single line text output </li></ul></ul>JSF – Repräsentation – Quick Reference (1) JEE-Webkomponenten – Java Server Faces
  7. 7. Einführung in die Java-Webentwicklung <ul><li>Input Element Tags: </li></ul><ul><ul><li># h:form creates a form </li></ul></ul><ul><ul><li># h:inputHidden creates hidden field </li></ul></ul><ul><ul><li># h:inputSecret creates input control for password </li></ul></ul><ul><ul><li># h:inputText creates text input control (single line) </li></ul></ul><ul><ul><li># h:inputTextarea creates text input control (multiline) </li></ul></ul><ul><ul><li># h:selectBooleanCheckbox creates checkbox </li></ul></ul><ul><ul><li># h:selectManyCheckbox creates set of checkboxes </li></ul></ul><ul><ul><li># h:selectOneRadio creates set of radio buttons </li></ul></ul><ul><ul><li># h:selectManyListbox creates multiselect listbox </li></ul></ul><ul><ul><li># h:selectOneListbox creates single select listbox </li></ul></ul><ul><ul><li># h:selectManyMenu creates multiselect menu </li></ul></ul><ul><ul><li># h:selectOneMenu creates single select menu </li></ul></ul><ul><ul><li># h:commandButton creates button </li></ul></ul><ul><ul><li># h:commandLink creates link that acts like a pushbutton </li></ul></ul>JSF – Repräsentation – Quick Reference (2) JEE-Webkomponenten – Java Server Faces
  8. 8. Einführung in die Java-Webentwicklung <ul><li>JSF Core Tags: </li></ul><ul><ul><li># f:view tag is used to create top level view </li></ul></ul><ul><ul><li># f:subview tag is used to create subview of a view. </li></ul></ul><ul><ul><li># f:validator tag is used to add a validator to a component. </li></ul></ul><ul><ul><li># f:converter tag is used to add an arbitrary converter to a component. </li></ul></ul><ul><ul><li># f:actionListener tag is used to add an action listener to a </li></ul></ul><ul><ul><li>component. </li></ul></ul><ul><ul><li># f:valueChangeListener tag is used to add a valuechange listener to a </li></ul></ul><ul><ul><li>component </li></ul></ul>JSF – Repräsentation – Quick Reference (3) JEE-Webkomponenten – Java Server Faces
  9. 9. Einführung in die Java-Webentwicklung <ul><li>Template Definition (irgendeine xhtml/jsf/jsp-Datei unter <template_path>.xhtml): </li></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li>< h:head id = &quot;head&quot; > </li></ul></ul><ul><ul><li>< title >< ui:insert name = &quot;title&quot; > Page Title </ ui:insert ></ title > </li></ul></ul><ul><ul><li></ h:head > </li></ul></ul><ul><ul><li>< h:body id = &quot;body&quot; > … </li></ul></ul><ul><li>Anwendung (in einer weiteren xhtml/jsp-Datei): </li></ul><ul><li>1: parametrisiert: </li></ul><ul><ul><li>< ui:composition template = „<template_path>.xhtml&quot; > </li></ul></ul><ul><ul><li>< ui:define name = &quot;title&quot; > Articles </ ui:define > </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li></ ui:composition > </li></ul></ul><ul><li>2: „as is“: </li></ul><ul><ul><li>< ui:include src = &quot;<template_path>.xhtml&quot; / > </li></ul></ul>JSF – Repräsentation – Templates JEE-Webkomponenten – Java Server Faces
  10. 10. Einführung in die Java-Webentwicklung JSF – ManagedBean – Deklaration JEE-Webkomponenten – Java Server Faces <ul><li>Variante 1: Annotation* </li></ul><ul><ul><li>package de.saxsys.jsf2market.bean; </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li>@ManagedBean </li></ul></ul><ul><ul><li>@SessionScoped </li></ul></ul><ul><ul><li>public class ArticleService { </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Variante 2: faces-config.xml </li></ul><ul><ul><li>< managed-bean > </li></ul></ul><ul><ul><ul><li>< managed-bean-name > articleService </ managed-bean-name > </li></ul></ul></ul><ul><ul><ul><li>< managed-bean-class > </li></ul></ul></ul><ul><ul><ul><li>de.saxsys.jsf2market.bean.ArticleService </ managed-bean-class > </li></ul></ul></ul><ul><ul><ul><li>< managed-bean-scope > session </ managed-bean-scope > </li></ul></ul></ul><ul><ul><li></ managed-bean > </li></ul></ul><ul><li>* Standardname eines ManagedBean‘s wird aus ihrer Klassenname durch Kleinschreiben seiner Anfangsbuchstabe gebildet. </li></ul><ul><li>Weitere Annotationen: </li></ul><ul><ul><li>@ManagedBean, @ManagedProperty </li></ul></ul><ul><ul><li>@ApplicationScoped </li></ul></ul><ul><ul><li>@SessionScoped </li></ul></ul><ul><ul><li>@RequestScoped </li></ul></ul><ul><ul><li>@ViewScoped </li></ul></ul><ul><ul><li>@NoneScoped </li></ul></ul><ul><ul><li>@CustomScoped </li></ul></ul>
  11. 11. Einführung in die Java-Webentwicklung JSF – ManagedBean – Dependency Injection JEE-Webkomponenten – Java Server Faces <ul><li>Managed Bean Deklaration: </li></ul><ul><ul><li>@ManagedBean (name = &quot;articleService&quot; ) </li></ul></ul><ul><ul><li>public class ArticleService { </li></ul></ul><ul><ul><li>public Article[] getArticles() {…} </li></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>Dependency Injection: </li></ul><ul><ul><li>public class ArticleViewBean { </li></ul></ul><ul><ul><ul><li>@ManagedProperty (value = &quot;#{articleService}&quot; ) </li></ul></ul></ul><ul><ul><ul><li>private ArticleService articleService ; </li></ul></ul></ul><ul><ul><ul><li>public String save() {…} </li></ul></ul></ul><ul><ul><ul><li>public String cancel() {…} </li></ul></ul></ul><ul><ul><li>} </li></ul></ul>
  12. 12. Einführung in die Java-Webentwicklung <ul><li>In den JSF -Tags (achtet bitte auf die Schreibweise: #{…} anstatt ${…} bei Basis-EL): </li></ul><ul><ul><li>< h:dataTable </li></ul></ul><ul><ul><ul><li>id = &quot;articleTable&quot; </li></ul></ul></ul><ul><ul><ul><li>value = &quot; #{articleService.articles} &quot; </li></ul></ul></ul><ul><ul><ul><li>var = &quot;article&quot; > </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><li></ h:dataTable> </li></ul></ul><ul><li>Und gemischt auch in JSP -Tags (dank dem Unified EL): </li></ul><ul><ul><li>< c:forEach items = &quot; #{articleService.articles} &quot; </li></ul></ul><ul><ul><li>var = &quot;article&quot; varStatus = &quot;status&quot; > </li></ul></ul><ul><ul><ul><li>< h:form id = &quot;article_details_${status.index}&quot; > </li></ul></ul></ul><ul><ul><ul><ul><li>< h:inputText id = &quot;article_name&quot; label = &quot;Bezeichnung&quot; value = &quot; #{article.name} &quot; > </ h:inputText > </li></ul></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><li></ c:forEach> </li></ul></ul>JSF –ManagedBean – Anbindung an Repräsentation JEE-Webkomponenten – Java Server Faces
  13. 13. Einführung in die Java-Webentwicklung <ul><li>Variante 1: Anbindung an ManagedBean-Methoden </li></ul><ul><li>< h:commandButton id = &quot;saveButton&quot; value = &quot;Save&quot; </li></ul><ul><li>action = &quot; #{articleViewBean.save} &quot; /> </li></ul><ul><li>Dazugehörige ManagedBean-Definition/Deklaration: </li></ul><ul><ul><li>@ManagedBean </li></ul></ul><ul><ul><li>public class ArticleViewBean { </li></ul></ul><ul><ul><ul><li>public String save () {…} </li></ul></ul></ul><ul><ul><ul><li>public String cancel() {…} </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>… </li></ul>JSF – Events Handling – Actions (1) JEE-Webkomponenten – Java Server Faces
  14. 14. Einführung in die Java-Webentwicklung <ul><li>Variante 2: Anbindung eines ActionListener‘s: </li></ul><ul><ul><li>< h:commandButton id = &quot;saveButton&quot; value = &quot;Save&quot; > </li></ul></ul><ul><ul><ul><li>< f:actionListener </li></ul></ul></ul><ul><ul><ul><ul><li>type = &quot;de.saxsys.<…>.article.ArticleActionListener&quot; /> </li></ul></ul></ul></ul><ul><ul><li></ h:commandButton> </li></ul></ul><ul><li>Dazugehörige ActionListener-Definition: </li></ul><ul><ul><li>import javax.faces.event.AbortProcessingException; </li></ul></ul><ul><ul><li>import javax.faces.event.ActionEvent; </li></ul></ul><ul><ul><li>import javax.faces.event.ActionListener; </li></ul></ul><ul><ul><li>public class ArticleActionListener implements ActionListener { </li></ul></ul><ul><ul><ul><li>public void processAction (ActionEvent event) </li></ul></ul></ul><ul><ul><ul><li>throws AbortProcessingException {…} </li></ul></ul></ul><ul><ul><li>} </li></ul></ul>JSF – Events Handling – Actions (2) JEE-Webkomponenten – Java Server Faces
  15. 15. Einführung in die Java-Webentwicklung <ul><li>Bundle-Einbindung (innerhalb einer Ansichtbeschreibung): </li></ul><ul><li>< f:loadBundle basename = &quot;messages&quot; var = &quot;msgs&quot; /> </li></ul><ul><li>Bundle Anwendung: </li></ul><ul><ul><li>#{msgs.article_label_name} </li></ul></ul><ul><li>oder </li></ul><ul><li>< h:outputText value = &quot; #{msgs.article_label_name} &quot; /> : </li></ul><ul><li>NOTICE: im zweiten Fall wird die Ausgabe &quot;escaped&quot;. Dies kann bewusst ausgenutzt werden. Bei Ausgabe der Nutzereingaben muss die zweite Variante aus Sicherheitsgründen bevorzugt werden. (?) </li></ul>JSF – Internationalization JEE-Webkomponenten – Java Server Faces
  16. 16. Einführung in die Java-Webentwicklung JSF – Composites - Überblick JEE-Webkomponenten – Java Server Faces <ul><li>Alternative zu den JSP-Tags </li></ul><ul><li>Erfordern keine Konfiguration (haben aber bestimmte Conventions) </li></ul><ul><li>Sind Teil des Facelets -Frameworks und erfordern keinen WebContainer (?) </li></ul><ul><li>… </li></ul>
  17. 17. Einführung in die Java-Webentwicklung In einer xhtml-Datei, z.Bsp. edit-form.xhtml: < html xmlns = &quot;http://www.w3.org/1999/xhtml&quot; … xmlns:composite = &quot;http://java.sun.com/jsf/composite&quot; > <composite: interface > <!– (1) expose composite attributes --> <composite: attribute name = &quot;article&quot; required = &quot;true&quot; /> <!– (2) expose composite method attributes --> < composite: attribute name = &quot;persistButtonAction&quot; method-signature = &quot;java.lang.String action()&quot; /> <!– (3) expose composite sub-components for events handling --> <composite: actionSource name = &quot;persistButton&quot; targets = &quot;articleDetailsEditForm:persistButton&quot; /> </composite: interface > … JSF – Composites - Deklaration JEE-Webkomponenten – Java Server Faces
  18. 18. Einführung in die Java-Webentwicklung <ul><li>< html xmlns = &quot;http://www.w3.org/1999/xhtml&quot; … > </li></ul><ul><li>< composite:interface >…</ composite:interface > </li></ul><ul><li>< composite: implementation > </li></ul><ul><ul><li>< h:form id = &quot;articleDetailsEditForm&quot; prependId = &quot;false&quot; > </li></ul></ul><ul><ul><ul><li>#{msgs.article_label_name}: </li></ul></ul></ul><ul><ul><ul><li>< h:inputText id = &quot;article_name&quot; l abel = &quot;#{msgs.article_label_name}&quot; value = &quot; #{cc.attrs.article.name} &quot; / > </li></ul></ul></ul><ul><ul><ul><li>< h:commandButton id = &quot;persistButton&quot; value = &quot;#{msgs.common_button_save}&quot; </li></ul></ul></ul><ul><ul><ul><li>action = &quot; #{cc.attrs.persistButtonAction} &quot; /> </li></ul></ul></ul><ul><ul><li></ h:form > </li></ul></ul><ul><li></ composite: implementation > </li></ul><ul><li></ html > </li></ul>JSF – Composites - Implementierung JEE-Webkomponenten – Java Server Faces
  19. 19. Einführung in die Java-Webentwicklung <ul><li>Per Convention: </li></ul><ul><ul><li>- die Composite-Definition muss im „ Magic “-Verzeichnis <web-root>/resources (oder in seiner Unterverzeichnissen) abgelegt werden. </li></ul></ul><ul><ul><li>- der relative Verzeichnis-Pfad zum Verzeichnis mit der Composite-Datei wird für die Definition des Namensraums als folgt benutzt: </li></ul></ul><ul><ul><ul><li>xmlns:<ns-alias> =&quot;http://java.sun.com/jsf/composite/ <rel-path> &quot;> </li></ul></ul></ul><ul><ul><li>- der Name der Komposite-Datei (ohne Endung) wird als Name entsprechendes Tags benutzt </li></ul></ul><ul><li>Z.Bsp. der Composite <web-root>/resources/ article / edit-form .xhtml kann in beliebigen JSF-Dateien als folgt benutzt werden: </li></ul><ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; … </li></ul></ul><ul><ul><li>xmlns:article =&quot;http://java.sun.com/jsf/composite/ article &quot;> </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><ul><li>< article:edit-form … > </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><ul><li>< /article:edit-form > </li></ul></ul></ul>JSF – Composites – Einbindung und Anwendung (1) JEE-Webkomponenten – Java Server Faces
  20. 20. <ul><li>Vollständiges Anwendungsbeispiel: </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; … </li></ul><ul><li>xmlns:article=&quot;http://java.sun.com/jsf/composite/components/article&quot;> </li></ul><ul><ul><li>< article:edit-form </li></ul></ul><ul><ul><ul><li>article = &quot;#{articlesViewBean.selectedArticle}&quot; </li></ul></ul></ul><ul><ul><ul><li>persistButtonAction = &quot;#{articleViewBean.persist}&quot; > </li></ul></ul></ul><ul><ul><ul><li>< f:actionListener for = &quot;persistButton&quot; </li></ul></ul></ul><ul><ul><ul><li>type = &quot;de.saxsys.<…>.article.ArticleActionListener&quot; /> </li></ul></ul></ul><ul><ul><li>< /article:edit-form > </li></ul></ul>Einführung in die Java-Webentwicklung JSF – Composites – Einbindung und Anwendung (2) JEE-Webkomponenten – Java Server Faces (1) initialisiert der Attributwert des Composite‘s: (2) initialisiert die Methodenreferenz des Composite‘s: (3) registriert einen ActionListener bei der Sub-Komponente des Composite‘s:
  21. 21. Einführung in die Java-Webentwicklung JSF – Navigation (1) JEE-Webkomponenten – Java Server Faces <ul><li>Aktionselemente: </li></ul><ul><li>< h:link outcome = &quot; article-details &quot; > Artikeldetails </ h:link > </li></ul><ul><ul><li>< h:commandButton id = &quot;...&quot; … </li></ul></ul><ul><ul><li>action = &quot; #{articleViewBean.persist} &quot; /> </li></ul></ul><ul><li>Deklaration der Navigationsregel: </li></ul><ul><li>faces-config.xml </li></ul><ul><ul><li>< navigation-rule > </li></ul></ul><ul><ul><ul><li>< navigation-case > </li></ul></ul></ul><ul><ul><ul><ul><li>< from-outcome > article-details </ from-outcome > </li></ul></ul></ul></ul><ul><ul><ul><ul><li>< to-view-id > /article/article-details-view.xhtml </ to-view-id > </li></ul></ul></ul></ul><ul><ul><ul><li></ navigation-case > </li></ul></ul></ul><ul><ul><li></ navigation-rule > </li></ul></ul><ul><li>Falls keinen NavigationsCase ermittelt werden konnte, wird‘s versucht zu der View <outcome>.xhtml zu navigieren, sonst bleibt man bei dem ursprünglichen View. </li></ul><outcome>–String wird von der Action- Methode zurückgegeben
  22. 22. Einführung in die Java-Webentwicklung JSF – Navigation (2) JEE-Webkomponenten – Java Server Faces <ul><li>Navigationsregel kann mit der Start-View-Eingabe verschärft werden: </li></ul><ul><ul><li>< navigation-rule > </li></ul></ul><ul><ul><ul><li>< from-view-id > /article/articles-list-view.xhtml < /from-view-id > </li></ul></ul></ul><ul><ul><ul><li>< navigation-case > </li></ul></ul></ul><ul><ul><ul><ul><li>< from-outcome > article-details </ from-outcome > </li></ul></ul></ul></ul><ul><ul><ul><ul><li>< to-view-id > /article/article-details-view.xhtml </ to-view-id > </li></ul></ul></ul></ul><ul><ul><ul><li></ navigation-case > </li></ul></ul></ul><ul><ul><li></ navigation-rule > </li></ul></ul><ul><li>Außerdem kann ein NavigationCase bedingt sein: </li></ul><ul><ul><li>< navigation-rule > </li></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><ul><li>< navigation-case > </li></ul></ul></ul><ul><ul><ul><ul><li>… </li></ul></ul></ul></ul><ul><ul><ul><ul><li>< if > #{not empty articlesViewBean.selectedArticle} < /if > </li></ul></ul></ul></ul><ul><ul><ul><li></ navigation-case > </li></ul></ul></ul><ul><ul><li></ navigation-rule > </li></ul></ul>unified EL-condition
  23. 23. Einführung in die Java-Webentwicklung <ul><li>„ Magic “-Verzeichnis: <web-root>/resources . Wird benutzt um Ressourcen einzubinden: </li></ul><ul><li>Bilder: </li></ul><ul><ul><li>< h:graphicImage library = &quot;images&quot; name = &quot;saxsys-logo.png&quot; /> </li></ul></ul><ul><ul><li>< h:graphicImage value = &quot;#{resource['images:saxsys-logo.png']}&quot; /> </li></ul></ul><ul><li>CSS-Dateien: </li></ul><ul><ul><li>< h:outputStyleSheet library = &quot;js&quot; name = &quot;index.js&quot; /> </li></ul></ul><ul><li>Javascript-Dateien: </li></ul><ul><ul><li>< h:outputScript library = &quot;css&quot; name = &quot;styles.css&quot; /> </li></ul></ul><ul><li>Vorausgesetzt entsprechende Ressourcen sind folgendermaßen abgelegt: </li></ul><ul><ul><li><web-root>/resources/ <library> / <name> </li></ul></ul><ul><li>Und als EL-Ausdrücke: </li></ul><ul><ul><li>< h:graphicImage value = &quot;#{resource['images:saxsys-logo.png']}&quot; /> </li></ul></ul>JSF – Resources JEE-Webkomponenten – Java Server Faces
  24. 24. Einführung in die Java-Webentwicklung JSF – Übungsbeispiele <ul><li>JSF Skeleton-Projekt einrichten und lauffähig bekommen </li></ul><ul><li>Implementiere folgendes Domain-Model und 2 Datenservices </li></ul><ul><li>es genügt, wenn die Datenservices die Dummy-Daten zurückliefern würden. </li></ul><ul><li>Implementiere eine JSF-Seite, die die Artikelliste tabellarisch darstellt. </li></ul><ul><li>Implementiere eine JSF-Seite, die ein Form zum Editieren der Artikeldetails darstellt. </li></ul><ul><li>Vereinige beide innerhalb des gemeinsamen Layout-Containers, z.Bsp. so: </li></ul><ul><li>Binde Artikelliste und Artikeldetails zusammen, so dass beim Auswählen </li></ul><ul><li>eines Artikels aus der Liste seine Details in dem Editierbereich angezeigt werden. </li></ul>JEE-Webkomponenten – Java Server Faces Liste Details
  25. 25. Einführung in die Java-Webentwicklung <ul><li>JavaServer Faces HTML Tags Reference </li></ul><ul><ul><li>http://www.exadel.com/tutorial/jsf/jsftags-guide.html </li></ul></ul><ul><li>Java EE 5 Tutorial - JavaServer Faces Technology (Chapter 10) </li></ul><ul><ul><li>http://java.sun.com/javaee/5/docs/tutorial/doc/bnaph.html </li></ul></ul><ul><li>Facelets - JavaServer Faces View Definition Framework (Referenz) </li></ul><ul><ul><li>https://facelets.dev.java.net/nonav/docs/dev/docbook.html </li></ul></ul>JEE-Webkomponenten – Java Server Faces Weiterführende Informationen und Referenzen (1)
  26. 26. Einführung in die Java-Webentwicklung <ul><li>JSF-Komponenten-Bibliotheken </li></ul><ul><li>RichFaces </li></ul><ul><ul><li>Homepage: http://www.jboss.org/richfaces </li></ul></ul><ul><ul><li>Live Demo: http://livedemo.exadel.com/richfaces-demo/welcome.jsf </li></ul></ul><ul><li>IceFaces </li></ul><ul><ul><li>Homepage: http://www.icefaces.org </li></ul></ul><ul><ul><li>Live Demo: http://www.icefaces.org/main/demos </li></ul></ul><ul><li>PrimeFaces </li></ul><ul><ul><li>Homepage: http://www.primefaces.org </li></ul></ul><ul><ul><li>Live Demo: http://www.primefaces.org:8080/prime-showcase/ui/home.jsf </li></ul></ul>JEE-Webkomponenten – Java Server Faces Weiterführende Informationen und Referenzen (2)
  27. 27. Einführung in die Java-Webentwicklung Der Kontakt Schnell und Direkt <ul><li>Dresden </li></ul><ul><li>Fritz-Foerster-Platz 2, 01069 Dresden </li></ul><ul><li>Telefon: +49 (0)351 497 01-500 </li></ul><ul><li>Telefax: +49 (0)351 497 01-589 </li></ul><ul><li>Frankfurt </li></ul><ul><li>Niedenau 51, 60325 Frankfurt a.M. </li></ul><ul><li>Telefon: +49 (0)69 133 89-580 </li></ul><ul><li>Telefax: +49 (0)69 133 89-589 </li></ul><ul><li>Leipzig </li></ul><ul><li>Zimmerstraße 1, 04109 Leipzig </li></ul><ul><li>Telefon: +49 (0)341 217 85-0 </li></ul><ul><li>Telefax: +49 (0)341 217 85-29 </li></ul><ul><li>München </li></ul><ul><li>Kistlerhofstraße 75, 81379 München </li></ul><ul><li>Telefon: +49 (0)89 88 98 165-62 </li></ul><ul><li>Telefax: +49 (0)89 88 98 165-89 </li></ul><ul><li>Hamburg </li></ul><ul><li>Jungfernstieg 44 , 20354 Hamburg </li></ul><ul><li>Telefon: +49 (0)40 180 37 77-69 </li></ul><ul><li>Telefax: +49 (0)40 180 37 77-68 </li></ul><ul><li>Görlitz </li></ul><ul><li>Berliner Straße 63, 02826 Görlitz </li></ul><ul><li>Telefon: +49(0)3581 76 723-0 </li></ul><ul><li>Telefax: +49(0)3581 76 723-29 </li></ul><ul><li>Berlin </li></ul><ul><li>Allee der Kosmonauten 33G, </li></ul><ul><li>12681 Berlin </li></ul><ul><li>Telefon: +49 (0)30 46 99 73-51 </li></ul><ul><li>Telefax: +49 (0)30 46 99 73-59 </li></ul>

×