Agenda. Einleitung. Einbinden von JSF AJAX Beispiele Komponenten Entwicklung PrimeFaces Praktikum. Was ist JSF Aufbau und Techniken HTML vs.

Größe: px

Ab Seite anzeigen:

Download "Agenda. Einleitung. Einbinden von JSF AJAX Beispiele Komponenten Entwicklung PrimeFaces Praktikum. Was ist JSF Aufbau und Techniken HTML vs."

Rudolph Waltz
vor 8 Jahren
Abrufe

1 JavaServer Faces E-Commerce (WS 2011/12) Fachhochschule Münster FB02 Elektrotechnik und Informatik Referenten: Matthias Wellmeyer, Sven Wermers, Malte Wesker

2 Agenda Einleitung Was ist JSF Aufbau und Techniken HTML vs. XHTML Einbinden von JSF AJAX Beispiele Komponenten Entwicklung PrimeFaces Praktikum

3 Was ist JSF? JavaServer Faces Framework zur Entwicklung von grafischen Oberflächen in Web-Anwendungen Initial release 2004 JSF expert group Sun, Borland, IBM, Macromedia, Oracle...

4 Aufbau und Techniken von JSF? Rollenkonzept Webdesigner Applikationsentwickler Komponentenentwickler Klare Aufgabentrennung Präsentationsschicht Geschäftslogik Datenhaltung

5 Aufbau und Techniken von JSF? Verknüpfung von View und Controller via JSF Expression Language #{Klasse.Ziel} Bean-Management Beans Speicherung Benutzer- und/oder Anwendungsdaten Verwaltung übernimmt JSF Globale Bereitstellung Managed Beans (lazy loading) Gültigkeitsbereiche über zentrale Konfigurationsdatei konfigurierbar

Ziel} Bean-Management Beans Speicherung Benutzer- und/oder Anwendungsdaten

6 Aufbau und Techniken von JSF? JSF durchläuft fest definierten Lebenszyklus pro Aufruf Quelle:

7 HTML vs. XHTML HTML XHTML <head> <title>beispiel</title> <body> <h1>beispielseite</h1> <p>ein Absatz <ol> <li>listelement 1 <li>listelement 2 </ol> <p><img src=bild.gif alt="bildmotiv"> </body> <html xmlns=" xml:lang="de"> <head> <title>beispiel</title> </head> <body> <h1>beispielseite</h1> <p>ein Absatz</p> <ol> <li>listelement</li> <li>listelement</li> </ol> <p> <img src="bild.gif" alt="bildmotiv" /> </p> </body> </html>

1 <li>listelement 2 </ol> <p><img src=bild.gif alt="bildmotiv"> </body> <html xmlns="http://www.w3.

8 Einbinden JSF Maven Dependencies Java Server Faces API jsf-api Java Server Faces Implementation jsf-impl JavaServer Pages Standard Tag Library jstl Servlet API servlet-api

9 Einbinden JSF web.xml <web app> [...] <servlet> <servlet name>facesservlet</servlet name> <servlet class>javax.faces.webapp.facesservlet</servlet class> <load on startup>1</load on startup> </servlet> <servlet mapping> <servlet name>facesservlet</servlet name> <url pattern>*.xhtml</url pattern> </servlet mapping> <listener> <listener class>com.sun.faces.config.configurelistener</listener class> </listener> </web app>

facesservlet</servlet class> <load on startup>1</load on startup> </servlet> <servlet mapping> <servlet

10 Einbinden PrimeFaces Maven Dependencies Primefaces web.xml <web app> [...] <servlet> <servlet-name>resource Servlet</servlet-name> <servlet-class>org.primefaces.resource.resourceservlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>resource Servlet</servlet-name> <url-pattern>/primefaces_resource/*</url-pattern> </servlet-mapping> </web app>

11 Einbinden JSF und PrimeFaces In den xhtml- Seiten <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" xmlns:ui=" xmlns:f=" xmlns:h=" xmlns:p=" > <h:head> [...] </h:head> <body> <h2> <h:outputtext value="#{dummybean.helloworld}"/> </h2> </body> </html>

sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.

12 AJAX Asynchronous JavaScript and XML HTML (oder XHTML) Document Object Model JavaScript XMLHttpRequest-Objekt

13 AJAX Ohne AJAX Webbrowser Benutzeroberfläche HTTP- Request HTML Seite Server

14 AJAX Mit AJAX Webbrowser Benutzeroberfläche JavaScript Aufruf DOM Operation AJAX-Engine HTTP- Request XML oder JSON Server

15 AJAX AJAX Engine zu Fuß httpobject = (window.xmlhttprequest)?new XMLHttpRequest():new ActiveXObject("MICROSOFT.XMLHTTP"); if(httpobject){ httpobject.open("post","ajax.php",true); var encoded_content_id = encodeuricomponent(content_id); var param = "param1=paramvalue1&param2=paramvalue2" ; httpobject.setrequestheader("content-type","application/x-www-form-urlencoded"); httpobject.setrequestheader("contentlength",param.length); httpobject.setrequestheader("connection","close"); httpobject.onreadystatechange = function(){ if(httpobject.readystate == 4 && httpobject.status == 200){ var txtnodes = httpobject.responsexml.documentelement.getelementsbytagname("pagescript")[0].childnodes; var str = ""; for (var i=0; i <txtnodes.length; i++){ str += txtnodes[i].data; } alert(str); } } httpobject.send(param);

setrequestheader("content-type","application/x-www-form-urlencoded"); httpobject.setrequestheader("contentlength",param.length); httpobject.setrequestheader("connection","close"); httpobject.

16 Beispiele JSF Beispiele JSF

17 Komponentenentwicklung in JSF Es gibt zwei Arten von Komponenten Kompositkomponenten normale Komponenten Kompositkomponente Sehr einfach Erstellen einer.xhtml Datei und in den Ressourcenpfad ablegen Namensraum aus Präfix gefolgt vom Bibliotheknamen Tag erhält den Namen von der Deklaration

18 Komponentenentwicklung in JSF Aufbau der.xhtml Datei Die mit cc:interface und cc:implementation umfassten Bereiche erforderlich cc:interface Definiert die Schnittstelle nach aussen und umfasst alle Merkmale die für den Benutzer relevant sind Verschiedene Tags möglich (cc:attribute, cc:valueholder,...) cc:implementation Enthält die implementierung, JSF-Tags, HTML-Elemente,... Es ist möglich auf die Attribute, Facets,... der Kompositkomponente zuzugreifen (cc.attrs.attributname, ) Verschiedene Tags möglich (cc:insertchildren, cc:renderfacet,...)

aussen und umfasst alle Merkmale die für den Benutzer relevant sind Verschiedene Tags möglich (cc:attribute, cc:valueholder,.

19 Komponentenentwicklung in JSF Komplexer zu erstellen als eine Kompositkomponente 7 Schritte nötig Komponentenfamilie, Komponententyp und Renderertyp definieren Komponente von bekannten ableiten (UIOutput, UICommand, ) oder vom Scratch entwickeln? Eigener Renderer? Komponentenklasse schreiben Herzstück der Komponentenarchitektur Rendererklasse schreiben Zuständig für die vernünftige Aufbereitung der Daten. Daten aus dem Request bekommen und in den Response schreiben Wird von abstrakten Klasse javax.faces.render.render abgeleitet und besitzt 7 Methoden (encodebegin(), decode(),... ) Rendern von Ressourcen (Bilder, Skripte, ) geschieht über Annotations Komponentenklasse und Rendererklasse registrieren Werden per Annotations registriert

Komponentenklasse schreiben Herzstück der Komponentenarchitektur Rendererklasse schreiben Zuständig für die vernünftige Aufbereitung der Daten.

20 Komponentenentwicklung in JSF Tag-Definition schreiben und in Bibliothek aufnehmen Existiert bereits eine passende Tag-Bibliothek muss lediglich der Tag-Name, Komponententyp und Rendertyp angegeben werden Existiert keine muss zu erst eine Tag-Bibliothek erstellt werden (geschieht über Facelets) Tag-Handler-Klasse schreiben Muss nur in speziellen Fällen erstellt werden, z.b. wenn hinter dem Tag keine Komponente kommt (z.b. c:if) Bibliothek in die Seite einbinden In.xhtml Datei einfügen Es ist auch möglich beide Komponententypen zu kombinieren Auch anderen Möglichkeiten vorhanden (Renderer austauschen, Komponentenklasse austauschen) Zahlreiche Beispiel, wo diese Technik benutzt wird um eine Komponentenbibliothek zu erstellen z.b. PrimeFaces, MyFaces, RichFaces,...

b. c:if) Bibliothek in die Seite einbinden In.

21 PrimeFaces OpenSource Komponentenbibliotheken Sehr leicht einzubinden Kann in 2 unterschiedlichen Kategorien unterteilt werden Webbrowser Mobile-Endgeräte Enthält weitere Tags und Funktionen (AutoComplete, ) Größten Teils jquery und YUI (JS-Library von Yahoo) verantwortlich

22 Beispiele PrimeFaces Beispiele PrimeFaces

23 Praktikum Gegebenes Projekt anpassen (Datenbank u.ä.) Bsp. Such- bzw. Anzeigeoptionen mit JSF erweitern (AutoComplete, AJAX-Funktionen,...) Projekt verschönern (Evtl. eigene Komponente entwickeln)

Ähnliche Dokumente

JSP und Servlet Programmierung

JSP und Servlet Programmierung Seminarunterlage Version: 5.02 Copyright Version 5.02 vom 1. März 2013 Dieses Dokument wird durch die veröffentlicht. Copyright. Alle Rechte vorbehalten. Alle Produkt- und Dienstleistungs-Bezeichnungen