Post on 05-Apr-2015
transcript
Web-Technologien im praktischen Einsatz
Erstellung einer Bildsuchmaschine mit Apache Wicket
Andreas Walter
WS 2009/2010
UniversitätKarlsruhe (TH)
ForschungszentrumInformatik
Information Process Engineering
SVN Tutorial
Tutorial Folien und Sourcen zum Downloadhttp://www.awalter.info/wicket/
Informationsintegration & Web-Portale 2WS 2007/08WS 2009/10
Informationsintegration & Web-Portale 3WS 2009/10
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 4WS 2007/08
Gliederung
Web-Technologien im praktischen Einsatz Infrastruktur aufbauen Framework wählen
Wicket TutorialErstellung einer Bildsuchmaschine mit Wicket Features von Wicket Wicket im Vergleich zu anderen Frameworks Wicket Schritt für Schritt zur Erstellung einer
Bildsuchmaschine
WS 2009/10
Infrastruktur aufbauen
JUnit: automatisches Testen der Programmfunktionen Maven: Build Kontrolle„continous integration server“
Informationsintegration & Web-Portale 6WS 2007/08
JUnit
JUNIT: http://www.junit.org/
Zweck:Ermöglicht die Definition von Testfällen, um die Richtigkeit von Quelltexten zu überprüfen
BeispielMethode public int getResult() muss „1“ zurückgebenTest 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
WS 2009/10
Informationsintegration & Web-Portale 7WS 2007/08
Maven: Build Kontrolle (1)
Maven Homepage: http://maven.apache.org/ 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
WS 2009/10
Informationsintegration & Web-Portale 8WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 9WS 2007/08
continous integration server(1)
ZweckSorgen 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
WS 2009/10
Informationsintegration & Web-Portale 10WS 2007/08
continous integration server(2)
Beispiel: Hudson - https://hudson.dev.java.net/
WS 2009/10
Auswahl des richtigen Frameworks
Wartbarkeit Lesbarkeit Model View Controler vs. Eventbasierten Frameworks
Informationsintegration & Web-Portale 12WS 2007/08
Langfristige Wartbarkeit
„Trennung von Anwendung und Darstellung“ ist nicht so wichtig?
„Trennung von Anwendung und Darstellung kann jedes Web Framework?“
Sicher?
WS 2009/10
Informationsintegration & Web-Portale 13WS 2007/08
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>
<%> <%> ??
WS 2009/10
Informationsintegration & Web-Portale 14WS 2007/08
Wartbarkeit in JSP 1.1, 1.2etwas schöner mit JSF Tags
<BODY><f:view>
<h:dataTable value=„#{articleListBean.articles}“><h:column>
<h:outputText value=„Article“/><h:column><h:column>
<ho:outputText value=„article.name“/></h:column></h:dataTable>
<f:view></BODY> Kann das die Designabteilung
auch?
WS 2009/10
Informationsintegration & Web-Portale 15WS 2007/08
Ideale WartbarkeitPures HTML – ein Framework muss das
unterstützen
<html >
<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
WS 2009/10
Informationsintegration & Web-Portale 16WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 17WS 2007/08
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=„http://www.fzi.de“>
=> http://www.fzi.de
WS 2009/10
Informationsintegration & Web-Portale 18WS 2007/08
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'; }
WS 2009/10
Informationsintegration & Web-Portale 19WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 20WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 21WS 2007/08
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)
WS 2009/10
Informationsintegration & Web-Portale 22WS 2007/08
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
WS 2009/10
Apache Wicket
FeaturesVergleich mit anderen Frameworks
Informationsintegration & Web-Portale 24WS 2007/08
Wicket 1.4
URL: http://wicket.apache.org/ Aktuelle Version: 1.4 Offizielles Apache Projekt seit Juli 2007
Wiki: http://cwiki.apache.org/WICKET/
Dokumentation und Beispielehttp://www.wicket-library.com/
WS 2009/10
Informationsintegration & Web-Portale 25WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 26WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 27WS 2007/08
Features von Wicket (3)
Internationalisierung 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
WS 2009/10
Informationsintegration & Web-Portale 28WS 2007/08
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.
WS 2009/10
Wicket Tutorial
Aufbau einer Bildsuchmaschine
Informationsintegration & Web-Portale 30WS 2007/08
Struktur
Startseite Login
Registrierung
Bildsuche
Bildergebnis
Anzeige Layoutbild
Upload Bilder
Datenhaltung
Bilddateien Bildbeschreibung(Keywords, Bildnamen)
Userdaten
WS 2009/10
Informationsintegration & Web-Portale 31WS 2007/08
Download und Installation
1. Download und Installation von Maven2. MySql Server installieren, neue Datenbank und
User, z.B. Datenbank „wickettutorial“, User/Pass: wicket
3. Tutorials unter SVN Adresse (z.B. mit Tourtoise SVN) https://svn.awalter.info/docs/vorlesung/webportale/wicket-tutorialBenutzer: tutorial , Passwort: wicket
4. Konsole starten, in SVN Verzeichnis in Unterordner workspace wechseln
WS 2009/10
Informationsintegration & Web-Portale 32WS 2007/08
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>http://localhost:8080/image/</setup.imageURL>
<setup.thumbnailSize>150</setup.thumbnailSize><setup.layoutSize>450</setup.layoutSize>
</properties>
WS 2009/10
Informationsintegration & Web-Portale 33WS 2007/08
Maven (2)
Pom.xml Datei in Verzeichnis „Workspace“
Definiert die Abhängigkeiten des Projekts, z.B. Wicket in 1.3.5 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>
WS 2009/10
Informationsintegration & Web-Portale 34WS 2007/08
Maven (3)
Pom.xml in „searchimpl“ <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)
WS 2009/10
Informationsintegration & Web-Portale 35WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 36WS 2007/08
Eclipse (2): M2 Repo Variable setzen
Eclipse benötigt Information zu Repository von MavenOrt: Verzeichnis von Maven/repo
Konfiguration in EclipseWindow->Preferences->JAVA->Build Path->Classpath Variables : Add new
Name: M2_REPO Directory: Repo von Maven
WS 2009/10
Informationsintegration & Web-Portale 37WS 2007/08
Testen der Konfiguration und Datenbankinstallation
Project enthält JUnit Test, dass Konfiguration testet und bei Erfolg alle benötigten Tabellen und Daten installiert
StartenRun -> JUNIT -> NewRun a single test in „searchimpl“ Test class: „CreateAndPersistanceTest“„Apply“; „Run“
Bei Fehlernzurück zu Maven(1)
WS 2009/10
Wicket Tutorial
Persistence und ORM mit Spring
Informationsintegration & Web-Portale 39WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 40WS 2007/08
ImageData: Bildinformationen
ImageDataEnthält Informationen zu den anzuzeigenden Bildern: int imageid; String imagename; String keywords; String outputType; // thumb: small image | layout:
big size
WS 2009/10
Informationsintegration & Web-Portale 41WS 2007/08
Beans : IndexWord und SearchRequest
IndexWord Dient zum Speichern von Index-WörternErmöglicht Autocomplete bei Suchanfragen String indexword;
SearchRequest Nimmt eine Suchanfrage vom Frontend entgegen String searchword;
WS 2009/10
Informationsintegration & Web-Portale 42WS 2007/08
Bean: User
UserSpeichert die Informationen eines UsersHier: nur username, password, email
private int userId; private String sessionId; private String username; private String password; private String email;
WS 2009/10
Informationsintegration & Web-Portale 43WS 2007/08
Persistence: Tabellen in Datenbank erstellen
User und Bilddaten müssen langfristig gespeichertHier: Mapping der Objekte auf relationales DBMS mysql
Tabelle : Registeredusers UserId` INTEGER `SessionID` VARCHAR(100) `Username` VARCHAR(45) `Password` VARCHAR(45), `Email` VARCHAR(100) INDEX: UNIQUE `UniqueUsername`(`Username`))
WS 2009/10
Informationsintegration & Web-Portale 44WS 2007/08
Persistence (2)
Tabelle : images `imageid` INTEGER `imagename` VARCHAR(45) `keywords` VARCHAR(255) PRIMARY KEY(`imageid`) INDEX `keywordindex`(`keywords`) <-
Volltextindex
Tabelle keywordindex `keyword` VARCHAR(50) DEFAULT '', UNIQUE uniquekeyword(`keyword`)
WS 2009/10
Informationsintegration & Web-Portale 45WS 2007/08
Spring: Object Relational Mapping (ORM)
Spring Framework: http://www.springframework.org/ 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
WS 2009/10
Informationsintegration & Web-Portale 46WS 2007/08
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);
WS 2009/10
Informationsintegration & Web-Portale 47WS 2007/08
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>
</bean>
Name des Beans in Anwendung
Zu verwendende Implementierung
Zu verwendende Datenquelle
WS 2009/10
Informationsintegration & Web-Portale 48WS 2007/08
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);
WS 2009/10
Informationsintegration & Web-Portale 49WS 2007/08
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)
WS 2009/10
Wicket Tutorial
Anwendung erstellen
Informationsintegration & Web-Portale 51WS 2007/08
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" );
WS 2009/10
Informationsintegration & Web-Portale 52WS 2007/08
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));
WS 2009/10
Informationsintegration & Web-Portale 53WS 2007/08
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>
WS 2009/10
Informationsintegration & Web-Portale 54WS 2007/08
Anwendung: Authorisierung
Ort: info.awalter.tutorial.application SearchAuthorizationStrategy implements
IAuthorizationStrategyif (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
WS 2009/10
Informationsintegration & Web-Portale 55WS 2007/08
Context eines Users
SearchSessionHält Zustände eines Users SessionId (Identifikation des Users über http) Locale: bevorzugte Sprache des Users Authorisierungsinformationen
WS 2009/10
Informationsintegration & Web-Portale 56WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 57WS 2007/08
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>
WS 2009/10
Informationsintegration & Web-Portale 58WS 2007/08
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);
WS 2009/10
Informationsintegration & Web-Portale 59WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 60WS 2007/08
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ückan Ajax Request
WS 2009/10
Informationsintegration & Web-Portale 61WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 62WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 63WS 2007/08
Starten der Anwendung aus Eclipse
Merve Tomcat Plugin installierenhttp://merve.sourceforge.net/updates/eclipse-3.2/
Alternativ: mvn jetty:run Run->Merve Tomcat Plugin -> New
Context Root Dir: searchimpl/src/main/webapp/
WS 2009/10
Informationsintegration & Web-Portale 64WS 2007/08
Startseite der Demo Anwendung
Internationalisierung
Komponente: DisplayRandomImage
Komponente: SmallLoginPanel
WS 2009/10
Informationsintegration & Web-Portale 65WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 66WS 2007/08
Formulare: Modelle in Wicket
PropertyModel: bindet eine Methode, z.B. für Labels geeignetnew PropertyModel(this,"pageTitle") (aus PageTemplate)
CompoundPropertyModel: bindet alle get/set Methoden einer Bean oder Klassefinal User userbean=new User();form.setModel(new CompoundPropertyModel(userbean));Siehe z.B. in Login, Register
WS 2009/10
Informationsintegration & Web-Portale 67WS 2007/08
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)1. FeedbackPanel Componente einbinden in Seite
add(new FeedbackPanel("feedback"));-> Wicket schreibt automatischFeedback in diesen Panel
2. Validatoren an Formelemente binden(aus org.apache.wicket.validation.validator.) EmailAddressValidator validiert E-Mail Format Eingabe erforderlich: formelement. setRequired(true); Mindestlänge erforderlich: MinimumLengthValidator
WS 2009/10
Informationsintegration & Web-Portale 68WS 2007/08
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(…);}
WS 2009/10
Informationsintegration & Web-Portale 69WS 2007/08
Beispiel: Registrierungsformular
Ort: info.awalter.tutorial.pages.user.Register
1. Bean User wird als CompoundPropertyModel gebunden2. Formular enthält Textfelder username, email und
Passwortfeld password3. Minlength Validatoren für username / password: 4
Email Validator für Feld email4. onSubmit Event: Wicket validiert Eingaben, bricht bei
unkorrekten Eingaben ab und sendet Fehlerstring an FeedbackPanel
5. onSubmit: falls alle Eingaben richtig sind wird onSubmit Methode des Formulars abgearbeitet
6. Methode prüft, ob username bereits existiert, falls nicht wird bean an Spring bean zur Speicherung gesendetuserdao.createUser(userbean);
7. User wird in Session eingeloggt8. Weiterleitung auf Startseite
WS 2009/10
Informationsintegration & Web-Portale 70WS 2007/08
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 vorhandenuserdao.getUserByUsernamePasswordwird user in Session gesetzt (Authorisiert)
WS 2009/10
Informationsintegration & Web-Portale 71WS 2007/08
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
WS 2009/10
Informationsintegration & Web-Portale 72WS 2007/08
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 thumbnailtablethumbnailtable.removeAll();// set table and return to ajaxrequesttarget.addComponent(getThumbnailTable());
};
Anzeige der Treffermenge: statisch
WS 2009/10
Informationsintegration & Web-Portale 73WS 2007/08
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>
WS 2009/10
Informationsintegration & Web-Portale 74WS 2007/08
UploadNewImages: neue Bilder aufladen
UploadNewImages 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
WS 2009/10
Informationsintegration & Web-Portale 75WS 2007/08
Logout
Logout Beendet Session des Users
this.getSession().invalidate(); Entfernt alle Zustände der Usersession Login beendet
WS 2009/10
Informationsintegration & Web-Portale 76WS 2007/08
Testen von Wicket Anwendungen: wickettester
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öglichSiehe hierzu: TestSearchApplication (Context muss manuell initiiert werden)
Beispiel: WicketApplicationTestOrt: info.awalter.tutorial.wickettest
Aufruf einer Seite: tester.startPage(home); tester.assertRenderedPage(home.getClass());
=> prüft, ob Seite Home richtig erstellt werden kannWS 2009/10
Informationsintegration & Web-Portale 77WS 2007/08
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();
WS 2009/10
Informationsintegration & Web-Portale 78WS 2007/08
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
WS 2009/10
Exkurs: ImageNotion
In Demo Anwendung: Suche „Anna“ zeigt unterschiedliche Sachverhalte (Hund namens Anna, Frau namens Anna)
GewünschtUnterscheidung bereits bei Anfrage
AusblickLösung durch semantische Techniken (Vorlesungen A. Schmidt)
Umsetzung für Bilder: ImageNotion (demo)Informationsintegration & Web-Portale 79WS 2007/08WS 2009/10
Informationsintegration & Web-Portale 80WS 2007/08
Quellen
Wicket Homepage: http://wicket.apache.org/ Wicket Erweiterungen
http://www.wicket-library.com Vergleich Wicket / Struts
http://cwiki.apache.org/WICKET/struts.html Vergleich Wicket / JSF
http://ptrthomas.wordpress.com/2007/05/14/a-wicket-user-tries-jsf/
Vergleich Wicket / Tapestryhttp://agileskills2.org/blog/2007/09/my_thoughts_on_the_differences.html
WS 2009/10