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

Weitere ähnliche Inhalte

Andere mochten auch

Kata - Java - Tests - JUnit 4
Kata - Java - Tests - JUnit 4Kata - Java - Tests - JUnit 4
Kata - Java - Tests - JUnit 4
kaftanenko
 
Poster
PosterPoster
Poster
Jie Mei
 
Wie verändert sich Testen mit Continuous Delivery?
Wie verändert sich Testen mit Continuous Delivery?Wie verändert sich Testen mit Continuous Delivery?
Wie verändert sich Testen mit Continuous Delivery?
Dr. Alexander Schwartz
 
Docker - Automatisches Deployment für Linux-Instanzen
Docker - Automatisches Deployment für Linux-Instanzen Docker - Automatisches Deployment für Linux-Instanzen
Docker - Automatisches Deployment für Linux-Instanzen
B1 Systems GmbH
 
Java Design Pattern
Java Design PatternJava Design Pattern
Java Design Pattern
Jorin
 
Ethik im Internet
Ethik im InternetEthik im Internet
Ethik im Internet
Jorin
 

Andere mochten auch (6)

Kata - Java - Tests - JUnit 4
Kata - Java - Tests - JUnit 4Kata - Java - Tests - JUnit 4
Kata - Java - Tests - JUnit 4
 
Poster
PosterPoster
Poster
 
Wie verändert sich Testen mit Continuous Delivery?
Wie verändert sich Testen mit Continuous Delivery?Wie verändert sich Testen mit Continuous Delivery?
Wie verändert sich Testen mit Continuous Delivery?
 
Docker - Automatisches Deployment für Linux-Instanzen
Docker - Automatisches Deployment für Linux-Instanzen Docker - Automatisches Deployment für Linux-Instanzen
Docker - Automatisches Deployment für Linux-Instanzen
 
Java Design Pattern
Java Design PatternJava Design Pattern
Java Design Pattern
 
Ethik im Internet
Ethik im InternetEthik im Internet
Ethik im Internet
 

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

Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Einsteiger Workshop
Einsteiger WorkshopEinsteiger Workshop
Einsteiger Workshop
FunThomas424242
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
Markus Leutwyler
 
Entwickeln mit Wordpress
Entwickeln mit WordpressEntwickeln mit Wordpress
Entwickeln mit Wordpress
Blogwerk AG
 
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan ScheidtAutomatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
OPITZ CONSULTING Deutschland
 
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
Aberla
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
Martin Leyrer
 
ARIA
ARIAARIA
Top 10 Internet Trends 2003
Top 10 Internet Trends 2003Top 10 Internet Trends 2003
Top 10 Internet Trends 2003
Jürg Stuker
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Martin Leyrer
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
 
react-de.pdf
react-de.pdfreact-de.pdf
react-de.pdf
ssuser65180a
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
Hendrik Lösch
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Sven Haiges
 
Jax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and FlashJax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and Flash
persillie
 
Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8
gedoplan
 
Automatischer Build mit Maven
Automatischer Build mit MavenAutomatischer Build mit Maven
Automatischer Build mit Maven
Stefan Scheidt
 
Leichtgewichtige Architekturen mit Spring, JPA, Maven und Groovy
Leichtgewichtige Architekturen mit Spring, JPA, Maven und GroovyLeichtgewichtige Architekturen mit Spring, JPA, Maven und Groovy
Leichtgewichtige Architekturen mit Spring, JPA, Maven und Groovy
Thorsten Kamann
 
Java management extensions (jmx)
Java management extensions (jmx)Java management extensions (jmx)
Java management extensions (jmx)
Tarun Telang
 
Forms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and OperationsForms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and Operations
Torsten Kleiber
 

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

Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 
Einsteiger Workshop
Einsteiger WorkshopEinsteiger Workshop
Einsteiger Workshop
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
 
Entwickeln mit Wordpress
Entwickeln mit WordpressEntwickeln mit Wordpress
Entwickeln mit Wordpress
 
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan ScheidtAutomatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
 
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
ESEconf2011 - Bosch Andy: "JavaServer Faces im Portal - Statusbestimmung"
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
 
ARIA
ARIAARIA
ARIA
 
Top 10 Internet Trends 2003
Top 10 Internet Trends 2003Top 10 Internet Trends 2003
Top 10 Internet Trends 2003
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
react-de.pdf
react-de.pdfreact-de.pdf
react-de.pdf
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
 
Jax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and FlashJax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and Flash
 
Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8
 
Automatischer Build mit Maven
Automatischer Build mit MavenAutomatischer Build mit Maven
Automatischer Build mit Maven
 
Leichtgewichtige Architekturen mit Spring, JPA, Maven und Groovy
Leichtgewichtige Architekturen mit Spring, JPA, Maven und GroovyLeichtgewichtige Architekturen mit Spring, JPA, Maven und Groovy
Leichtgewichtige Architekturen mit Spring, JPA, Maven und Groovy
 
Java management extensions (jmx)
Java management extensions (jmx)Java management extensions (jmx)
Java management extensions (jmx)
 
Forms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and OperationsForms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and Operations
 

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

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