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

  • 2,372 views
Uploaded 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).

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

Views

Total Views
2,372
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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