Forschungszentrum Informatik

Präsentation zum Thema: "Forschungszentrum Informatik"—  Präsentation transkript:

1 Forschungszentrum Informatik
Universität Karlsruhe (TH) Information Process Engineering Web-Technologien im praktischen Einsatz Erstellung einer Bildsuchmaschine mit Apache Wicket Andreas Walter WS 2009/2010 Informationsintegration & Web-Portale

2 SVN Tutorial Tutorial Folien und Sourcen zum Download Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

3 Motivation: EU Projekt IMAGINATION
Anforderungen Anwendung soll in JAVA entwickelt werden Anwendung soll vollständig webbasiert sein und AJAX verwenden, um desktop-charakter zu erzeugen Anwendung muss verteilt entwickelt werden, erfordert Versionskontrolle (auch von verwendeten Bibliotheken) Integrationskontrolle von Teilentwicklungen Webrahmenwerk, da Wechsel der Entwickler möglich muss leicht erlernbar sein Quelltext muss leicht lesbar sein Einfache Änderung des Seitenlayouts Anwendung durchläuft mehrere Zyklen (vom Prototyp an) Seitenlayout durch Partner für Design Informationsintegration & Web-Portale WS 2009/10

4 Gliederung Web-Technologien im praktischen Einsatz
Infrastruktur aufbauen Framework wählen Wicket Tutorial Erstellung einer Bildsuchmaschine mit Wicket Features von Wicket Wicket im Vergleich zu anderen Frameworks Wicket Schritt für Schritt zur Erstellung einer Bildsuchmaschine Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

5 Infrastruktur aufbauen
JUnit: automatisches Testen der Programmfunktionen Maven: Build Kontrolle „continous integration server“ Informationsintegration & Web-Portale

6 JUnit JUNIT: http://www.junit.org/
Zweck: Ermöglicht die Definition von Testfällen, um die Richtigkeit von Quelltexten zu überprüfen Beispiel Methode public int getResult() muss „1“ zurückgeben Test in Junit: assertEquals(getResult(),1) Falls int !=1 bricht der Test mit Fehlermeldung ab JUnit ermöglicht die Integrationskontrolle von Anwendungsteilen In IMAGINATION: Test von verteilt entwickelten Anwendungsteilen Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

7 Maven: Build Kontrolle (1)
Maven Homepage: Maven ermöglicht Definition von Modulen einer umfangreichen Anwendung Definition der Abhängigkeiten, z.B. JAR Files (Lucene, MySQL JDBC Treiber) und der für Anwendung benötigten Versionsnummern Automatische Durchführung von Kompilierung, JUnit-Tests, Deployment Direktes Starten von Webanwendungen in Servlet-Container Integration der Anwendung in Eclipse Ermöglicht einheiltliche Programmstrukturen Src/main/java: Verzeichnis für JAVA Packages Src/test/java: Verzeichnis für JUnit Tests Target/classes: Verzeichnis für JAVA classes Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

8 Maven: Build Kontrolle (2)
Wichtige Build Targets von maven (jeweils darüberliegende targets werden automatisch durchgeführt) mvn compile: Kompiliert die Anwendung mvn test: Durchführung der JUnit Tests mvn install: Generierung von JAR Files mvn deploy: Aufladen der JAR Files auf einen Server mvn jetty:run : Starten von Jetty Servlet Container mvn eclipse:eclipse: Erstellung von Eclipse Projekts Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

9 continous integration server(1)
Zweck Sorgen für automatische Erstellung von builds einer verteilt erstellten Anwendung Ablauf Quellcodes werden in SVN Repository eingestellt Projekte basieren auf Maven Projekte enthalten JUnit Tests Continous integration server prüft regelmässig SVN Repository auf Änderungen Bei Änderungen wird automatisch ein Build durchgeführt Benachrichtigung der Entwickler bei Fehlern Ermöglicht in Zusammenarbeit mit maven die automatische Integrationskontrolle von Teilentwicklungen und die Versionierung der Software Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

10 continous integration server(2)
Beispiel: Hudson - Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

11 Auswahl des richtigen Frameworks
Wartbarkeit Lesbarkeit Model View Controler vs. Eventbasierten Frameworks Informationsintegration & Web-Portale

12 Langfristige Wartbarkeit
„Trennung von Anwendung und Darstellung“ ist nicht so wichtig? „Trennung von Anwendung und Darstellung kann jedes Web Framework?“ Sicher? Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

13 Wartbarkeit in JSP 1.0 <%
<html> <head> <title>A JSP example</title> </head> <body> <%  String[] valueArray = {"This", "is", "a", „string", „array", "example"};   int i;   for (i = 0; i < valueArray.length; i++)  { %>       <%= valueArray[i] %>  <%    } %>     </body> </html> <%> <%> ?? Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

14 Wartbarkeit in JSP 1.1, 1.2 etwas schöner mit JSF Tags
<BODY> <f:view> <h:dataTable value=„#{articleListBean.articles}“> <h:column> <h:outputText value=„Article“/> <ho:outputText value=„article.name“/> </h:column> </h:dataTable> </BODY> Kann das die Designabteilung auch? Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

15 Ideale Wartbarkeit Pures HTML – ein Framework muss das unterstützen
<head> <title>Login Form mit Facelets<title> </head> <body> Login: <form id='myForm' jsfc='h:form'> <input type='text' id='myInput' jsfc='h:inputText' value='# {SimpleBean.name}' /> <input type='submit' value='Abschicken' id='myBtn' jsfc='h:commandButton' /> </form> </body> </html> Das kann die Designabteilung  Rahmenwerk: JSF mit Erweiterung Facelets Und der Entwickler muss nur Marken einfügen, hier ‚jsfc‘ als Referenz zu JSF-Komponenten Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

16 Einfache Änderungen des Seitenlayouts
Möglich, wenn HTML und Anwendungscode strikt getrennt sind Was viele Rahmenwerke versprechen, aber nicht immer halten Aus Praxis: ideal ist, ein Rahmenwerk erzwingt die Trennung, sonst wird die Trennung (meist aus zeitgründen, Bequemlichkeit, …) nicht eingehalten Ein Rahmenwerk die Formatierung von Komponenten mit CSS ermöglicht Trennung ist wichtig Nicht jedes Framework erfüllt diese Anforderung Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

17 Lesbarkeit (1) Was macht dieses nette kleine Skript: $result = "$1\n" while m { < \s* A \s+ HREF \s* = \s* "([[^"\ ]*)" \s* > } gsix; In Perl zur Extraktion von Links in HTML Texten <A HREF=„ => Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

18 Lesbarkeit (2) Was bedeutet das: listen = (1..5).to_a.map {|i| "#{i} tes Element"} In grails für for (int i=1;i<=5;i++){   liste[i] = i +‚ .tes Element'; } Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

19 Lesbarkeit vor Effizienz!
Speziell bei wechselnden Teilnehmer Knappe Skripttexte schwer lesbar und nachvollziehbar Zeitaufwendig, sich in knappe Skripte anderer einzuarbeiten Skriptsprachen, können zu unlesbaren Quelltexten „verleiten“ Bei vielen Beteiligten: besser JAVA statt Skripte Daher auch in IMAGINATION Entscheidung für JAVA basierendes Framework Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

20 Model View Controller vs. Event basiertem Framework (1)
Ablauf eines http-request / response mit MVC http request kommt an, Framework ruft Controller auf Controller sucht (meist auf Konfigurationsdateien basierend) passende Action aus Request Parameter werden in ein Action Bean geschrieben und validiert, http Request, Action Bean und Response werden an Action Klasse weitergegeben Action Class setzt Anwendungslogik um Action Class ruft Controller auf, um View zu generieren Controller ruft View auf (z.B. JSP Seite), um Ausgabe zu generieren Rückgabe der Response Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

21 Model View Controller vs. Event basiertem Framework (2)
Eventbasiert: http-request / response Framework erhält http-Request, ermittelt verantwortliche Seiten und Komponenten Request wird in Event übersetzt (z.B. onSubmit.). Jede Komponente hat eigenen Eventhandler (vgl. swing). Jede von Event betroffene Komponente führt Event aus (Anwendungslogik) und rendert sich selbst. Framework gibt response zurück Möglichkeiten mit eventbasiertem Frameworks Abstraktion von request / response Prinzip von http => objektorientierte Erstellung von wiederverwendbarek Komponenten möglich Eventbasiertes Prinzip ermöglicht direkte Integration von AJAX für Events der Komponenten, weniger Konfiguration und meistens weniger Quelltext (im Vergleich von Wicket zu MVC basierenden Frameworks wie Struts , JSF) Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

22 Auswahl des Web-Frameworks Beispiel: ImageNotion
ImageNotion enthält viele Events, die einzelne Komponenten aktualisieren, z.B. Layoutbilder anzeigen Annotation von Bildern und Bildteilen Ontologieerstellung => Ideal ist ein eventbasiertes Rahmenwerk Strikte Trennung von Anwendung und Darstellung nötig Umfangreicher AJAX – Support nötig => Auswahl Web Framework: Wicket 1.3 Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

23 Features Vergleich mit anderen Frameworks
Apache Wicket Features Vergleich mit anderen Frameworks Informationsintegration & Web-Portale

24 Wicket 1.4 URL: http://wicket.apache.org/ Aktuelle Version: 1.4
Offizielles Apache Projekt seit Juli 2007 Wiki: Dokumentation und Beispiele Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

25 Features von Wicket (1) Entwicklung der Anwendung mit JAVA
Alleinige Verwendung von JAVA und HTML Kein erlernen von Konzepten / Sprachen oder Funktionen nötig Keine XML Konfigurationen nötig (ausser web.xml für Servlet Container) weniger Fehlerquellen und weniger Entwicklungsaufwand Eventbasiertes Komponentenmodell basierend auf JAVA-Objekten Eventhandler für Komponenten wie in SWING Ermöglicht Erstellung von wieder verwendbaren Komponenten Einfache und direkte Integration von AJAX möglich Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

26 Features von Wicket (2) Strikte Trennung von Darstellung und Anwendung
Sämtliche Darstellung basiert auf XHTML Strikte Trennung von Anwendungsentwicklung mit JAVA Objekten und Seitendesign mit HTML Integration von Komponenten mit HTML Tags (<wicket:id=“..“ .. >) Abstraktion von Basistechnologie http Seitenversionierung, ermöglicht unter anderem „Back Button Support“ für Formulare (vermeidet wiederholtes Senden und unerwünschte Seiteneffekte von POST requests) Automatisches Sessionhandling: Typesafe Session - keine manuelle Sessionverwaltung nötig Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

27 Features von Wicket (3) Internationalisierung Support
einfache Integration von mehreren Sprachen basierend auf i18n Standard Support sehr guter Support durch die Mailingliste, kurze Reaktionszeiten auf Anfragen Open Source Quelltextanalyse ermöglicht Suche nach Bugs in Framework oder Deaktivierung von nicht benötigten Funktionen Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

28 Wicket im Vergleich mit anderen Frameworks
Wicket ermöglicht die komplette Programmierung der Anwendung in JAVA, ohne Verwendung weiterer Konfigurationsfiles (JSF, Struts) oder domainspezifischen Sprachen , ist somit auch einfacher erlernbar. Umfangreicher AJAX Support bereits im Framework integriert, keine Erweiterungen hierfür notwendig (z.B. Ajax in JSF Standard nicht möglich, nur mit Erweiterungen wie z.B. Ajax4JSF Saubere Trennung von Anwendung und Darstellung. Struts verwendet JSP Seiten, in JSF entsprechende Trennung nur durch Einsatz von Faceletts (SEAM) möglich Sehr agiles Entwicklerteam, das (ungewohnt) direkt auf Anforderungen der Nutzer des Frameworks reagiert und Wünsche umsetzt. Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

29 Aufbau einer Bildsuchmaschine
Wicket Tutorial Aufbau einer Bildsuchmaschine Informationsintegration & Web-Portale

30 Struktur Login Bildsuche Startseite Bildergebnis Registrierung
Anzeige Layoutbild Upload Bilder Datenhaltung Bilddateien Bildbeschreibung (Keywords, Bildnamen) Userdaten Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

31 Download und Installation
Download und Installation von Maven MySql Server installieren, neue Datenbank und User, z.B. Datenbank „wickettutorial“, User/Pass: wicket Tutorials unter SVN Adresse (z.B. mit Tourtoise SVN) Benutzer: tutorial , Passwort: wicket Konsole starten, in SVN Verzeichnis in Unterordner workspace wechseln Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

32 Maven (1) Profiles.xml editieren
Dient zur Anpassung der Konfiguration an eigenes System Ermöglicht Betrieb des gleichen Maven Projects auf unteschiedlichen Systemen, z.B. lokal, Continous integration server, etc Hier Zugangsdaten mysql Eigene Verzeichnisdaten <properties> <jdbc.uri>jdbc:mysql://localhost:3306/wickettutorial</jdbc.uri> <jdbc.username>wicket</jdbc.username> <jdbc.password>wicket</jdbc.password> <setup.imageArchiveDirectory>#directory#/workspace/searchimpl/src/main/webapp/site/img/archive</setup.imageArchiveDirectory> <setup.imageURL> <setup.thumbnailSize>150</setup.thumbnailSize> <setup.layoutSize>450</setup.layoutSize> </properties> Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

33 Maven (2) Pom.xml Datei in Verzeichnis „Workspace“
Definiert die Abhängigkeiten des Projekts, z.B. Wicket in soll verwendet werden <properties> <wicket.version>1.3.5</wicket.version> … <dependency> <groupId>org.apache.wicket</groupId> <artifactId>wicket</artifactId> <version>${wicket.version}</version> </dependency> Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

34 Maven (3) Pom.xml in „searchimpl“ Initialisierung von Maven
<packaging>war</packaging> Output soll „War“ File sein, zur Integration in beliebigem Servlet-Container Initialisierung von Maven Mit Konsole auf „workspace“ Verzeichnis wechseln „mvn test“ (lädt alle benötigten JAR Files, dauert etwas) Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

35 Integration in Eclipse Version 3.2 oder 3.3
Eingabe „mvn eclipse:eclipse“ Eclipse starten Workspace importieren: File -> Import -> General -> Existing Project into Workspace : Auf Verzeichnis „workspace“ des Tutorials wechseln Ok Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

36 Eclipse (2): M2 Repo Variable setzen
Eclipse benötigt Information zu Repository von Maven Ort: Verzeichnis von Maven/repo Konfiguration in Eclipse Window->Preferences->JAVA-> Build Path->Classpath Variables : Add new Name: M2_REPO Directory: Repo von Maven Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

37 Testen der Konfiguration und Datenbankinstallation
Project enthält JUnit Test, dass Konfiguration testet und bei Erfolg alle benötigten Tabellen und Daten installiert Starten Run -> JUNIT -> New Run a single test in „searchimpl“ Test class: „CreateAndPersistanceTest“ „Apply“; „Run“ Bei Fehlern zurück zu Maven(1) Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

38 Persistence und ORM mit Spring
Wicket Tutorial Persistence und ORM mit Spring Informationsintegration & Web-Portale

39 Beans erstellen Ort: info.awalter.tutorial.beans
Beans: Model der Anwendung, Datenintegration ApplicationSetup String imageArchiveDirectory; int thumbnailSize; int layoutSize; int imagesPerPage; String imageURL; Enthält Setup Informationen für die Anwendung Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

40 ImageData: Bildinformationen
ImageData Enthält Informationen zu den anzuzeigenden Bildern: int imageid; String imagename; String keywords; String outputType; // thumb: small image | layout: big size Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

41 Beans : IndexWord und SearchRequest
IndexWord Dient zum Speichern von Index-Wörtern Ermöglicht Autocomplete bei Suchanfragen String indexword; SearchRequest Nimmt eine Suchanfrage vom Frontend entgegen String searchword; Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

42 Bean: User User Speichert die Informationen eines Users Hier: nur username, password, private int userId; private String sessionId; private String username; private String password; private String ; Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

43 Persistence: Tabellen in Datenbank erstellen
User und Bilddaten müssen langfristig gespeichert Hier: Mapping der Objekte auf relationales DBMS mysql Tabelle : Registeredusers UserId` INTEGER `SessionID` VARCHAR(100) `Username` VARCHAR(45) `Password` VARCHAR(45), ` ` VARCHAR(100) INDEX: UNIQUE `UniqueUsername`(`Username`)) Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

44 Persistence (2) Tabelle : images Tabelle keywordindex
`imageid` INTEGER `imagename` VARCHAR(45) `keywords` VARCHAR(255) PRIMARY KEY(`imageid`) INDEX `keywordindex`(`keywords`) <- Volltextindex Tabelle keywordindex `keyword` VARCHAR(50) DEFAULT '', UNIQUE uniquekeyword(`keyword`) Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

45 Spring: Object Relational Mapping (ORM)
Spring Framework: Inversion of control: Anwendung kennt nur die Interfaces, Spring initiert die benötigten Implementierungen Ermöglicht Abstraktion von DBMS (durch untersch. Implementierungen) Direkter Aufruf der entsprechenden Objekte aus Anwendung möglich (injection) Initiierung von Objekten (z.B. ApplicationSetup) Integriertes ORM Vorgehen Interface erstellen Implementierung Setup Spring: applicationContext.xml Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

46 Methoden für User: UserManagerDao
Ort: info.awalter.tutorial.persistence.user Interface UserManagerDao public List getUsers(); public User getUserByUsernamePassword(String username, String password); public boolean changePassword(int UserId, String password); public User updateUserData(User user); public User getUserByCookieId(String cookieId); public User getUserByUserId(int userid); public boolean setUserSessionId(int userid, String cookieId); public User createUser(User user); public boolean deleteUser(User user); public boolean isUsernameInList(String username); Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

47 UserManagerDao: Spring setup
applicationContext.xml <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close"> <property name="driverClassName"><value>org.gjt.mm.mysql.Driver</value></property> <property name="url"><value>${jdbc.uri}</value></property> <property name="username"><value>${jdbc.username}</value></property> <property name="password"><value>${jdbc.password}</value></property> <property name="initialSize"><value>10</value></property> <property name="maxActive"><value>10</value></property> <property name="maxIdle"><value>20000</value></property> </bean> <bean id="persistenceuser" class="info.awalter.tutorial.persistence.user.UserManagerDaoJdbc"> <property name="dataSource"><ref local="dataSource"/></property> Name des Beans in Anwendung Zu verwendende Implementierung Zu verwendende Datenquelle Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

48 Methoden für ImageData
Ort: info.awalter.tutorial.persistence.images Interface ImageManagerDao public List getAllImages(); public List searchImages(String keywords); public ImageData insertImage(ImageData i); public boolean updateImage(ImageData i); public boolean deleteImage(ImageData i); public byte[] loadImageFile(ImageData i, String outputType ); public boolean saveImageFile(ImageData i,InputStream input); public boolean deleteImageFile(ImageData i); public List getAllIndexKeywords(); public List getAllIndexKeywordsStartingWith(String start); public boolean insertIndexKeyword(String keyword); Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

49 Persistence: Zusammenfassung
Beans erstellen: Model in der Webanwendung Datenbank erstellen Framework für ORM verwenden Hier: Spring Alternativ: Hybernate (speziell wenn Transaktionen benötigt werden) Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

50 Wicket Tutorial Anwendung erstellen
Informationsintegration & Web-Portale

51 Erstellen einer Wicket Anwendung
Ort: info.awalter.tutorial.application SearchApplication: In Wicket: Setup der ganzen Anwendung direkt in JAVA (statt in XML Konfigurationsdateien, z.B. JSF) Authorisierung SearchAuthorizationStrategy storeAuthStrategy = new SearchAuthorizationStrategy(); Ort der HTML-Dateien Standard: im gleichen Verzeichnis wie JAVA File Anpassung: alternativer Ort resourceSettings.addResourceFolder( "site/html" ); Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

52 Anwendung (2) SearchApplication (Fortsetzung)
Seiten auf feste Verzeichnisse mounten this.mountBookmarkablePage("/login", Login.class); Home Page der Anwendung festlegen public Class getHomePage() { return Home.class; } Spring Injection initialisieren addComponentInstantiationListener(new SpringComponentInjector(this)); Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

53 Anwendung in Servlet Container initialisieren
Initialisierungen mit web.xml (Standard in Servlet Container) Ort: src/main/webapp/WEB-INF/web.xml Setup von Spring und Context Listener <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> Wicket Anwendung initialisieren <init-param> <param-name>applicationClassName</param-name> <param-value>info.awalter.tutorial.application.SearchApplication</param-value> </init-param> Mapping der Anwendung auf Hauptverzeichnis: localhost:8080/ <filter-mapping> <filter-name>search</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

54 Anwendung: Authorisierung
Ort: info.awalter.tutorial.application SearchAuthorizationStrategy implements IAuthorizationStrategy if (SecuredSearchPage.class.isAssignableFrom(componentClass)) … if (session.isUserLoggedIn()) { return true; // User ist authorisiert } // sonst weiterleitung auf Login login=new Login(); throw new RestartResponseAtInterceptPageException(login.getClass()); Authorisierung mit Interfaces Session hält Userinformationen: Login setzt isUserLoggedIn auf true für berechtigte User Interface, dass zugangsbeschränkte Seiten implementieren Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

55 Context eines Users SearchSession Hält Zustände eines Users
SessionId (Identifikation des Users über http) Locale: bevorzugte Sprache des Users Authorisierungsinformationen Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

56 Home Page: Die Startseite der Anwendung
Ort: org.apache.wicket.markup.html.WebPage Home extends PageTemplate Templating Ermöglicht einheitlichen Look aller Seiten Logo Top Menu Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

57 Templates Ort: src/main/webapp/site/html/info/awalter/tutorial/pages
PageTemplate.html Definiert einheitliches Layout der Seite HTML Markup zur Erweiterung der Seite: <wicket:child> Here comes the child content </wicket:child> Inhalt der erweiterten Seiten wird dort eingefügt. HTML Markup in erweiterten Seiten, z.B. in Home.html <wicket:extend> … html markup <wicket:extend> Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

58 Wicket Markups Verbindung von HTML und Anwendung
Alle Komponenten bekommen eine wicket id (String). Dieser wird in HTML Text an entsprechenden Stellen platziert. HTML Marken für Komponenten: <span wicket:id=„komponentenid“/> Links: <a wicket:id="linkToHome" class="standardlink">Über</A> Aufruf in Wicket, z.B. für Link BookmarkablePageLink linkToHome = new BookmarkablePageLink("linkToHome", Home.class); Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

59 Internationalisierung
Unterstützung bei Seiten / Templates Dateien werden mit entsprechenden Endungen des Ländercodes versehen, z.B: PageTemplate_de.html : deutsche Version PageTempate.html : Default = englische Version Unterstützung für Ausgaben in Anwendungen Propertie-Files mit Namen entsprechend der Klasse + Sprachendung, z.B. home_de.properties Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

60 Page Template Funktionen
<span wicket:id="toparea„/> Lädt Komponente „SmallLoginForm“, wenn der User unregistriert ist, sonst das Suchmenü Schreibt Seitentitel: Abstrakte Methode getPageTitle(); Konkrete Klassen schreiben ihren Seitentitel in Methode, PageTemplate füllt Labelkomponente für Seitentitel Erstellt Links auf statische Seiten Wichtigste Arten von Links in wicket: Link : mit Event „onClick“: Links die nur während einer Session gültig sind BookmarkablePageLink: Links die man auch Bookmarken kann (entspricht „mount“ Befehl in SeachApplication) AjaxLink: löst ein AjaxEvent aus, gibt eine Componente zurück an Ajax Request Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

61 Home Funktionen der Startseite Anzeige eines zufällig geladenen Bildes
Anzeige eines statischen Textes Alle statischen Seiten (also auch About, etc) werden von StaticTemplate erweitert => immer Anzeige des zufällig erzeugten Bildes Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

62 Erstellung eigener Komponenten
info.awalter.tutorial.pages.user.SmallLoginPanel Eigene Komponenten: extends Panel HTML Markup: <wicket:panel> … HTML Inhalt des Panels </wicket:panel> Komponente dann an beliebigen Stellen in Seite einbindbar. Seite Home nun darstellbar Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

63 Starten der Anwendung aus Eclipse
Merve Tomcat Plugin installieren Alternativ: mvn jetty:run Run->Merve Tomcat Plugin -> New Context Root Dir: searchimpl/src/main/webapp/ Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

64 Startseite der Demo Anwendung
Komponente: SmallLoginPanel Internationalisierung Komponente: DisplayRandomImage Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

65 Formulare in wicket Formulare nehmen User-Eingaben entgegen
Ereignis: onSubmit() Hauptkomponenten: TextField, Password, TextArea, … Daten an Formulare binden Prinzip: Jede Formularkomponente bekommt Signatur einer Bean-Variablen oder einer Variablen in Klasse Eingaben werden an diese Variable gebunden Beispiel: TextField user = new TextField("username"); Bean oder Klasse benötigt Variable „username“ und Methoden getUsername, setUSername Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

66 Formulare: Modelle in Wicket
PropertyModel: bindet eine Methode, z.B. für Labels geeignet new PropertyModel(this,"pageTitle") (aus PageTemplate) CompoundPropertyModel: bindet alle get/set Methoden einer Bean oder Klasse final User userbean=new User(); form.setModel(new CompoundPropertyModel(userbean)); Siehe z.B. in Login, Register Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

67 Validatoren für Usereingaben
Automatisches validieren von Usereingaben vor Abruf der onSubmit() Methode eines Formulares Ablauf (z.B. in info.awalter.tutorial.pages.user.Register) FeedbackPanel Componente einbinden in Seite add(new FeedbackPanel("feedback")); -> Wicket schreibt automatischFeedback in diesen Panel Validatoren an Formelemente binden (aus org.apache.wicket.validation.validator.) AddressValidator validiert Format Eingabe erforderlich: formelement. setRequired(true); Mindestlänge erforderlich: MinimumLengthValidator Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

68 Ajax Integration für Formularelemente
An Formularelemente können Events gebunden werden, die mittels Ajax abgearbeitet werden. Diese ermöglichen z.B. Autocomplete oder direkte Information der User über Fehleingaben Beispiel Reaktion auf Fehleingaben: Register user.add(new AjaxFormComponentUpdatingBehavior("onchange") { target.addCompontent(…); } Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

69 Beispiel: Registrierungsformular
Ort: info.awalter.tutorial.pages.user.Register Bean User wird als CompoundPropertyModel gebunden Formular enthält Textfelder username, und Passwortfeld password Minlength Validatoren für username / password: 4 Validator für Feld onSubmit Event: Wicket validiert Eingaben, bricht bei unkorrekten Eingaben ab und sendet Fehlerstring an FeedbackPanel onSubmit: falls alle Eingaben richtig sind wird onSubmit Methode des Formulars abgearbeitet Methode prüft, ob username bereits existiert, falls nicht wird bean an Spring bean zur Speicherung gesendet userdao.createUser(userbean); User wird in Session eingeloggt Weiterleitung auf Startseite Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

70 Login Formular Alle Seiten, die durch unberechtigte User nicht betreten werden dürfen implementieren Interface SecuredSearchPage, z.B. LayoutPage Wicket leitet bei entsprechenden unberechtigten Aufrufen den Nutzer an Login Formular weiter Login Formular hat (vgl. Register bean user als model). Nimmt username / password entgegen, wenn user vorhanden userdao.getUserByUsernamePassword wird user in Session gesetzt (Authorisiert) Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

71 UserMenuPanel: Starten von Suchanfragen
Übermittlung der Suchanfragen mit Formular Textfeld für Suchanfragen enthält Autocomplete Funktion Umsetzung Verwendung der Wicket-Komponente AutoCompleteTextField searchword = new AutoCompleteTextField("searchword") Funktion: sendet „onkeyup“ Events per Ajax Nimmt Eingabe, z.b. input = „b“ entgegen Suche entsprechender Wörter mit imagedao imagedao.getAllIndexKeywordsStartingWith(input); Rückgabe der passenden Keywords als Liste Schnell integriert, keine JAVA-Script Programmierung nötig Bei onSubmit: Aufruf der Seite SearchResultPage mit Suchanfrage Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

72 SearchResultPage: Generierung von Suchergebnisseiten
SearchResultPage Komponenten Anzeige von 8 Bildern pro Seite als Thumbnailtabelle Vor / Zurück Navigation Ruft die nächsten Seite per Ajax auf Aktualisiert nur die Thumbnailtabelle AjaxLink previousPage = new AjaxLink("previousPage"){ public void onClick(AjaxRequestTarget target) { // set currentpage +1 : setCurrentPage(getCurrentPage()-1); // remove current content from thumbnailtable thumbnailtable.removeAll(); // set table and return to ajaxrequest target.addComponent(getThumbnailTable()); }; Anzeige der Treffermenge: statisch Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

73 Generierung der Thumbnailtabelle
Ort: info.awalter.tutorial.pages.search.thumbnailtable Verwendung von RepeatableView ImageTableRow: generiert Zeilen <TABLE wicket:id="tablerow" BORDER=0 > <tr> </tr> </TABLE> ImageTableCol: generiert Spalten <wicket:panel> <td wicket:id="tablecol" width="200" valign=bottom> </td> </wicket:panel> Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

74 UploadNewImages: neue Bilder aufladen
Nutzung der Wicket Komponente MultiFileUploadField und UploadProgressBar aus Wicket Extension Bibliothek Bilder aufladen nur über normale Formulare möglich! onSubmit(): Nimmt Bilddateien entgegen image=imagedao.insertImage(image); prüft, ob Bild mit Dateinamen bereits existiert. Falls ja kommt Fehlermeldung zurück imagedao.saveImageFile(image, upload.getInputStream()); speichert die Bilddatei in Archivverzeichnis Rückgabe der Erfolgs / Fehlermeldung als RepeatableView aus Labels bestehend Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

75 Logout Logout Beendet Session des Users this.getSession().invalidate(); Entfernt alle Zustände der Usersession Login beendet Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

76 Testen von Wicket Anwendungen: wickettester
Ermöglicht Durchführung von JUnit Tests für Wicket-Seiten ohne jedesmal den Servletcontainer starten zu müssen Auch Wicket Tests mit Spring-Integration möglich Siehe hierzu: TestSearchApplication (Context muss manuell initiiert werden) Beispiel: WicketApplicationTest Ort: info.awalter.tutorial.wickettest Aufruf einer Seite: tester.startPage(home); tester.assertRenderedPage(home.getClass()); => prüft, ob Seite Home richtig erstellt werden kann Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

77 Wickettester (2) Test von Formularen Login login=new Login();
tester.startPage(login); tester.assertRenderedPage(login.getClass()); // set form values: use FormTester FormTester form = tester.newFormTester("loginForm"); form.setValue("username", "fzi"); form.setValue("password", "web"); // submit form form.submit(); Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

78 Zusammenfassung Gezeigt wurde mit dieser Demo-Anwendung
Build-Kontrolle Integration von Daten mittels Beans und Springframework Integration von Spring in Wicket Einheitliches Layout mit Templating und Internationalisierung Integration von eigenen Komponenten und Nutzung von Standardkomponenten Formulare erstellen, Datenbindung von Beans, Validierung Integration von AJAX-Funktionen Testen von Wicket-Anwendungen Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

79 Exkurs: ImageNotion In Demo Anwendung: Suche „Anna“ zeigt unterschiedliche Sachverhalte (Hund namens Anna, Frau namens Anna) Gewünscht Unterscheidung bereits bei Anfrage Ausblick Lösung durch semantische Techniken (Vorlesungen A. Schmidt) Umsetzung für Bilder: ImageNotion (demo) Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

80 Quellen Wicket Homepage: http://wicket.apache.org/
Wicket Erweiterungen Vergleich Wicket / Struts Vergleich Wicket / JSF Vergleich Wicket / Tapestry Informationsintegration & Web-Portale WS 2009/10 WS 2007/08