JSF (JavaServer Faces) Erstellen einer Webseite

Transkript

1 Universität Bayreuth Lehrstuhl für Angewandte Informatik IV Datenbanken und Informationssysteme Prof. Dr.-Ing. Jablonski JSF (JavaServer Faces) Erstellen einer Webseite Dipl. Inf. Manuel Götz Dipl. Inf. Michael Igler Lehrstuhl für Angewandte Informatik IV Lehrstuhl für Mathematik und ihre Didaktik Didaktik der Informatik Universität Bayreuth Universität Bayreuth Fakultät für Mathematik, Physik und Informatik Fakultät für Mathematik, Physik und Informatik D Bayreuth D Bayreuth

2 Was ist JSF? JSF ist ein sehr mächtiges Framework zum Aufbau von Webanwendungen Präsentation Logik Navigation Erstellte JSF-Anwendungen laufen auf einem Server und können dort von einem Browser aus erreicht werden Wir verwenden als Server Tomcat Tomcat selbst ist eine Java-Anwendung Rechner Browser Browser Browser Tomcat JSF- Anwendung JSF- Anwendung Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 2

3 Struktur einer JSF-Anwendung Eine Anwendung besteht aus Webseiten (Präsentation) Logik (JavaBeans) Eine JavaBean ist eine normale Java-Klasse, deren Name auf "Bean" endet Konfigurationsfile faces-config.xml (Navigation) JSF-Anwendung Browser Login.jsf Welcome.jsf LoginBean.java Faces-config.xml Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 3

4 Vorbereitungen - 1 Was braucht man zum Erstellen einer JSF-Anwendung? Java (ab Version 1.4) Eclipse 3.3 WTP JSF Libraries 1.2 JSTL Libraries Die Libraries müssen auf der lokalen Festplatte gespeichert werden z.b. von: _0708/libs.zip Tomcat 6.0 Der Web Server, auf dem die JSF-Anwendung laufen soll Neuste Version jeweils verfügbar unter Wichtig: Den Tomcat als Anwendung und nicht als Service installieren das zip-file benutzen und einfach entpacken Sonst macht das Zusammenspiel mit Eclipse Probleme Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 4

5 Vorbereitungen - 2 Den Web Page Editor als Default Editor einstellen Er bietet die grafische Oberfläche zur Modellierung der Webseiten Window >> Preferences "File Associations" auswählen Dateityp auswählen Editor auswählen Default setzen Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 5

6 Einbinden und Registrieren der JSF-Libraries - 1 Einmalig (in jeder Eclipse-Installation) müssen die JSF-Libraries festgelegt werden Diese libs enthalten die JSF-Tags (=Befehle) und ihre Übersetzung nach HTML HTML (= Hypertext Markup Language) kann von jedem Browser interpretiert werden >> Window >> Preferences 4. "New " anklicken 1. "Web and XML" öffnen 2. "Java Server Faces Tools" öffnen 3. "Libraries wählen" wählen Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 6

7 Einbinden und Registrieren der JSF-Libraries - 2 Angeben der JSF-Libraries jsf-impl.jar und jsf-api.jar 1. Namen der Library eingeben 2. "Add " drücken, JARs im Dateisystem suchen und Hinzufügen 3. Haken setzen 4. "Finish" drücken Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 7

8 Einbinden und Registrieren der JSF-Libraries - 3 Einbinden der JSTL Library 1. Namen der Library eingeben 2. "Add " drücken, JAR im Dateisystem suchen und Hinzufügen 4. "Finish" drücken Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 8

9 Anlegen eines Web Projects in Eclipse - 1 Anlegen eines neuen Dynamic Web Project : File >> New >> Project "Web" öffnen "Dynamic Web Project" klicken Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 9

10 Anlegen eines Web Projects in Eclipse Projektnamen eingeben 3. "JavaServer Faces v1.2 Project" wählen 2. Server auswählen (beim ersten Mal "New" drücken, siehe nächste Folie) Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 10

11 Server einrichten Zuerst muss der Typ des Servers angegeben werden 1. "Apache Tomcat v6.0" wählen 3. "Browse" drücken 4. Den Ordner wählen, in dem Tomcat liegt (oberhalb von "bin") 2. "Next" drücken Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 11

12 Anlegen eines Web Projects in Eclipse - 3 Einstellungen kontrollieren und "Next" drücken Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 12

13 Anlegen eines Web Projects in Eclipse - 4 Angeben der JSF-Libraries 1. Die angelegten JSF- Libraries wählen 2. JSTL wählen 3. Hinzufügen 4. "Finish" drücken Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 13

14 Anlegen einer Webseite - 1 Eine Webseite wird als JSP angelegt 1. Rechts-Klick auf das Dynamic Web Project 2. Auswahl von "New" 3. Auswahl von "JSP" Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 14

15 Anlegen einer Webseite - 2 Eine Seite muss einen Namen und einen Platz in der Web-Anwendung haben 1. Auswahl von "LoginPage >> WebContent >> WEB-INF 2. Name der Seite eingeben Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 15

16 Bearbeiten einer Webseite Im Editor sind verschiedene Fenster geöffnet Verschiedene Möglichkeiten, um die Seite zu bearbeiten 1. Projekte 3. Leiste mit verfügbaren Elementen 2. Grafischer Aufbau der Seite 4. Erzeugter / editierbarer Code 5. Rechtsklick Show Properties Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 16

17 Hinzufügen eines Buttons Benutzen der Palette Drag & Drop von Elementen aus der Palette Positionieren des CommandButton auf der login.jsp - Seite Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 17

18 Hinzufügen eines Buttons Benutzen der Palette Drag & Drop von Elementen aus der Plattete und positionieren auf der login.jsp Seite Name des Buttons bei Value eingeben und Action eingeben (#{LoginBean.loginAction}) Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 18

19 Hinzufügen von Textfeldern Drag & Drop des Panel Grid aus der Palette auf die Seite Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 19

20 Ändern von Namen Durch Doppelklick auf das item1 erscheinen die Properties. Dort kann man den Name abändern Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 20

21 Hinzufügen von Textfeldern Drag & Drop des Text Input aus der Palette auf die Seite Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 21

22 Textfeldern mit Java-Objekt verlinken Was wir im Textfeld von Login und Passwort eingeben, soll in einem Java-Objekt weiterverarbeitet werden Dazu müssen wir eine Klasse erzeugen, die die Daten aufnimmt und weiter bearbeitet 1) Doppelklick auf faces-config 2) Jetzt öffnet sich ein neues Register 3) Dort das Register ManagedBean auswählen 4) Dann auf Add klicken Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 22

23 Neues Java Bean erstellen 1) Create a new Java class anklicken 2) Auf Next klicken 1) Bei Package einen sinnvollen Package-Namen eingeben, z.b. de.uni_bayreuth.infschool 2) Unter Name LoginBean eingeben 3) Auf Finish klicken Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 23

24 Neues Java Bean benutzen Nun haben wir unter Java Resources eine neue Java Klasse LoginBean Durch Doppelklick gelangen wir wieder zum Inhalt der Klasse Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 24

25 Attribute und Methoden hinzufügen Wir fügen nun Attribute und Methoden zur Klasse hinzu : Variablen EingabeName und EingabePasswort vom Typ String (Zeichenkette). Hier wird zwischengespeichert, was wir im Browser später eingeben Die korrekten Zugangsdaten : Login = mike Passwort = kaugummi Vergleichsfunktion die überprüft, ob das eingegebene Passwort korrekt ist Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 25

26 Zielseite anlegen Was wir noch brauchen, ist eine Zielseite die nach erfolgreichem Login angezeigt wird Wir legen deshalb eine neue Seite welcome.jsp an (siehe Folie 14/15) und geben hier etwas Text ein Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 26

27 Eingaben weitergeben Die gemachten Eingaben auf der Login-Seite sollen nun ans Java-Bean weitergegeben werden Wenn wir auf den Button drücken, dann soll die loginaction() Methode in der Java-Bean aufgerufen werden Dazu müssen wir wieder die login.jsp editieren Mit value= {#LoginBean.} übergeben wir die Eingaben von Login und Passwort an das Java-Bean Mit value= {#LoginBean.loginAction()} rufen wir die Methode loginaction() in der JavaBean auf, wenn der Button gedrückt wird Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 27

28 Seiten verknüpfen Wir wollen nun von der login.jsp auf die welcome.jsp kommen, falls die richtigen Benutzerdaten eingegeben wurden Dazu müssen wir die Seiten miteinander verbinden Dies machen wir in der faces-config.xml im Register Navigation Rule Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 28

29 Seiten verknüpfen Mittels Drag & Drop holen wir die login.jsp und welcome.jsp aus dem Projekt in die Navigation Rule Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 29

30 Seiten verknüpfen Nun verbinden wir noch die beiden Seiten miteinander durch einen Link aus der Palette Dazu klicken wir auf Link in der Palette Danach auf login und ziehen den Pfeil auf welcome Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 30

31 Seiten verknüpfen Als nächstes müssen wir noch die Bedingung angeben für den Fall, dass die richtigen Benutzerdaten eingegeben wurden Hierzu wählen wir aus der Palette Select Und klicken auf den Pfeil doppelt Hier tragen wir dann LoginErfolgreich ein, d.h. wenn die Methode loginaction() ein LoginErfolgreich zurückgibt, dann gehen wir zur welcome.jsp Seite Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 31

32 Webseite im Tomcat starten Im Project Explorer mit rechter Maustaste auf die login.jsp Seite Dann Run As und Run on Server Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 32

33 Webseite im Tomcat starten Next klicken Finish klicken Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 33

34 Webseite im Tomcat starten Lehrstuhl für Angewandte Informatik IV Didaktik der Informatik 34