Web-Technologien im praktischen Einsatz Erstellung einer Bildsuchmaschine mit Apache Wicket Andreas...

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


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“


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


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


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


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


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


Langfristige Wartbarkeit

„Trennung von Anwendung und Darstellung“ ist nicht so wichtig?

„Trennung von Anwendung und Darstellung kann jedes Web Framework?“

Sicher?

WS 2009/10


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


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


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


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


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


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


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


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


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


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


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


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



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



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


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


Struktur

Startseite Login

Registrierung

Bildsuche

Bildergebnis

Anzeige Layoutbild

Upload Bilder

Datenhaltung

Bilddateien Bildbeschreibung(Keywords, Bildnamen)

Userdaten

WS 2009/10


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


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


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


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


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


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


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


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


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


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


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


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) Ùsername` VARCHAR(45) `Password` VARCHAR(45), Èmail` VARCHAR(100) INDEX: UNIQUE ÙniqueUsername`(Ùsername`))

WS 2009/10


Persistence (2)

Tabelle : images ìmageid` INTEGER ìmagename` VARCHAR(45) `keywords` VARCHAR(255) PRIMARY KEY(ìmageid`) INDEX `keywordindex`(`keywords`) <-

Volltextindex

Tabelle keywordindex `keyword` VARCHAR(50) DEFAULT '', UNIQUE uniquekeyword(`keyword`)

WS 2009/10


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


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


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


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


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


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


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


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


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


Context eines Users

SearchSessionHält Zustände eines Users SessionId (Identifikation des Users über http) Locale: bevorzugte Sprache des Users Authorisierungsinformationen

WS 2009/10


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


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


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


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


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


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


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


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


Startseite der Demo Anwendung

Internationalisierung

Komponente: DisplayRandomImage

Komponente: SmallLoginPanel

WS 2009/10


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


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


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


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


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


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


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


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


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


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


Logout

Logout Beendet Session des Users

this.getSession().invalidate(); Entfernt alle Zustände der Usersession Login beendet

WS 2009/10


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


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


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


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

Web-Technologien im praktischen Einsatz Erstellung einer Bildsuchmaschine mit Apache Wicket Andreas...

Documents

Transcript of Web-Technologien im praktischen Einsatz Erstellung einer Bildsuchmaschine mit Apache Wicket Andreas...