Your SlideShare is downloading. ×
Einführung in die Java-Webentwicklung - Part II - [3 of 3] - Java Server Faces - JSF  (in german)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,501
views

Published on

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

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
2,501
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

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. 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

×