Web-Technologien im Überblick
Upcoming SlideShare
Loading in...5
×
 

Web-Technologien im Überblick

on

  • 2,145 views

 

Statistics

Views

Total Views
2,145
Views on SlideShare
2,137
Embed Views
8

Actions

Likes
0
Downloads
10
Comments
0

1 Embed 8

http://www.slideshare.net 8

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Informationsintegration & Web-Portale
  • Informationsintegration & Web-Portale
  • Informationsintegration & Web-Portale
  • Informationsintegration & Web-Portale
  • Informationsintegration & Web-Portale
  • Informationsintegration & Web-Portale
  • Informationsintegration & Web-Portale

Web-Technologien im Überblick Web-Technologien im Überblick Presentation Transcript

  • Web-Technologien im praktischen Einsatz Erstellung einer Bildsuchmaschine mit Apache Wicket Andreas Walter WS 2009/2010 Information Process Engineering Universität Karlsruhe (TH) Forschungszentrum Informatik
  • SVN Tutorial
    • Tutorial Folien und Sourcen zum Download http://www.awalter.info/wicket/
    Informationsintegration & Web-Portale WS 2007/08 WS 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 WS 2009/10 View slide
  • 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 2007/08 WS 2009/10 View slide
  • 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
    • 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 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • 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 2007/08 WS 2009/10
  • continous integration server(2)
    • Beispiel: Hudson - https://hudson.dev.java.net/
    Informationsintegration & Web-Portale WS 2007/08 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?
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • Wartbarkeit in JSP 1.0
    • <html>
    • <head>
    • <title>A JSP example</title>
    • </head>
    • <body>
    • <%
    •   String[] valueArray = {&quot;This&quot;, &quot;is&quot;, &quot;a&quot;, „string&quot;, „array&quot;, &quot;example&quot;};   int i;   for (i = 0; i < valueArray.length; i++) 
    • {
    • %>       <%= valueArray[i] %> 
    • <%    }
    • %>      
    • </body>
    • </html>
    • <%> <%> ??
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • 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“/>
    • <h:column>
    • <h:column>
    • <ho:outputText value=„article.name“/>
    • </h:column>
    • </h:dataTable>
    • <f:view>
    • </BODY> Kann das die Designabteilung auch?
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • Ideale Wartbarkeit Pures 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
    Informationsintegration & Web-Portale WS 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • Lesbarkeit (1)
    • Was macht dieses nette kleine Skript:
    Informationsintegration & Web-Portale WS 2007/08 $result = &quot;$1 &quot; while m { < s* A s+ HREF s* = s* &quot;([[^&quot; ]*)&quot; 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| &quot;#{i} tes Element&quot;}
    Informationsintegration & Web-Portale WS 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 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)
    Informationsintegration & Web-Portale WS 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • Apache Wicket
      • Features
      • Vergleich 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 Beispiele http://www.wicket-library.com/
    Informationsintegration & Web-Portale WS 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • 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 2007/08 WS 2009/10
  • 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
    Informationsintegration & Web-Portale WS 2007/08 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.
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • Wicket Tutorial
      • Aufbau einer Bildsuchmaschine
  • Struktur Informationsintegration & Web-Portale WS 2007/08 Startseite Login Registrierung Bildsuche Bildergebnis Anzeige Layoutbild Upload Bilder Datenhaltung Bilddateien Bildbeschreibung (Keywords, Bildnamen) Userdaten WS 2009/10
  • 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) https://svn.awalter.info/docs/vorlesung/webportale/wicket-tutorial Benutzer: tutorial , Passwort: wicket
    • Konsole starten, in SVN Verzeichnis in Unterordner workspace wechseln
    Informationsintegration & Web-Portale WS 2007/08 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>
    Informationsintegration & Web-Portale WS 2007/08 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>
    Informationsintegration & Web-Portale WS 2007/08 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)
    Informationsintegration & Web-Portale WS 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • 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 2007/08 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
    • 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 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • 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 2007/08 WS 2009/10
  • 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 2007/08 WS 2009/10
  • Bean: User
    • User Speichert die Informationen eines Users Hier: nur username, password, email
      • private int userId;
      • private String sessionId;
      • private String username;
      • private String password;
      • private String email;
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • 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),
      • `Email` VARCHAR(100)
      • INDEX: UNIQUE `UniqueUsername`(`Username`))
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • 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`)
    Informationsintegration & Web-Portale WS 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 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);
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • UserManagerDao: Spring setup
    • applicationContext.xml
    • <bean id=&quot;dataSource&quot; class=&quot;org.apache.commons.dbcp.BasicDataSource&quot; destroy-method=&quot;close&quot;>
    • <property name=&quot;driverClassName&quot;><value>org.gjt.mm.mysql.Driver</value></property>
    • <property name=&quot;url&quot;><value>${jdbc.uri}</value></property>
    • <property name=&quot;username&quot;><value>${jdbc.username}</value></property>
    • <property name=&quot;password&quot;><value>${jdbc.password}</value></property>
    • <property name=&quot;initialSize&quot;><value>10</value></property>
    • <property name=&quot;maxActive&quot;><value>10</value></property>
    • <property name=&quot;maxIdle&quot;><value>20000</value></property>
    • </bean>
    • <bean id=&quot; persistenceuser &quot; class=&quot; info.awalter.tutorial.persistence.user.UserManagerDaoJdbc &quot;>
    • <property name=&quot; dataSource &quot;><ref local=&quot;dataSource&quot;/></property>
    • </bean>
    Informationsintegration & Web-Portale WS 2007/08 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);
    Informationsintegration & Web-Portale WS 2007/08 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)
    Informationsintegration & Web-Portale WS 2007/08 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( &quot;site/html&quot; );
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • Anwendung (2)
    • SearchApplication (Fortsetzung)
      • Seiten auf feste Verzeichnisse mounten
        • this.mountBookmarkablePage(&quot;/login&quot;, Login. class );
      • Home Page der Anwendung festlegen
          • public Class getHomePage() {
          • return Home. class ;
          • }
      • Spring Injection initialisieren
        • addComponentInstantiationListener( new SpringComponentInjector( this ));
    Informationsintegration & Web-Portale WS 2007/08 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>
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • 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
    Informationsintegration & Web-Portale WS 2007/08 Interface, dass zugangsbeschränkte Seiten implementieren WS 2009/10
  • 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 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 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>
    Informationsintegration & Web-Portale WS 2007/08 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=&quot;linkToHome&quot; class=&quot;standardlink&quot;>Über</A>
      • Aufruf in Wicket, z.B. für Link
        • BookmarkablePageLink linkToHome = new BookmarkablePageLink(&quot;linkToHome&quot;, Home. class );
    Informationsintegration & Web-Portale WS 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • Page Template
    • Funktionen
      • <span wicket:id=&quot;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 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • Starten der Anwendung aus Eclipse
    • Merve Tomcat Plugin installieren http://merve.sourceforge.net/updates/eclipse-3.2/
    • Alternativ: mvn jetty:run
    • Run->Merve Tomcat Plugin -> New Context Root Dir: searchimpl/src/main/webapp/
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • Startseite der Demo Anwendung Informationsintegration & Web-Portale WS 2007/08 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(&quot;username&quot;); Bean oder Klasse benötigt Variable „username“ und Methoden getUsername, setUSername
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • Formulare: Modelle in Wicket
    • PropertyModel : bindet eine Methode, z.B. für Labels geeignet new PropertyModel( this ,&quot;pageTitle&quot;) (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 2007/08 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)
    • FeedbackPanel Componente einbinden in Seite add( new FeedbackPanel(&quot;feedback&quot;)); -> Wicket schreibt automatischFeedback in diesen Panel
    • Validatoren an Formelemente binden (aus org.apache.wicket.validation.validator.)
      • EmailAddressValidator validiert E-Mail Format
      • Eingabe erforderlich: formelement. setRequired( true );
      • Mindestlänge erforderlich: MinimumLengthValidator
    Informationsintegration & Web-Portale WS 2007/08 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(&quot; onchange &quot;) { target.addCompontent(…); }
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • Beispiel: Registrierungsformular
    • Ort: info.awalter.tutorial.pages.user.Register
    • Bean User wird als CompoundPropertyModel gebunden
    • Formular enthält Textfelder username, email und Passwortfeld password
    • Minlength Validatoren für username / password: 4 Email Validator für Feld email
    • 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 2007/08 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 vorhanden userdao.getUserByUsernamePassword wird user in Session gesetzt (Authorisiert)
    Informationsintegration & Web-Portale WS 2007/08 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(&quot;searchword&quot;) 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 2007/08 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(&quot;previousPage&quot;){
          • 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 2007/08 WS 2009/10
  • Generierung der Thumbnailtabelle
    • Ort: info.awalter.tutorial.pages.search. thumbnailtable
    • Verwendung von RepeatableView
      • ImageTableRow: generiert Zeilen
        • <TABLE wicket:id=&quot;tablerow&quot; BORDER=0 >
        • <tr>
        • </tr>
        • </TABLE>
      • ImageTableCol: generiert Spalten
        • <wicket:panel>
        • <td wicket:id=&quot;tablecol&quot; width=&quot;200&quot; valign=bottom>
        • </td>
        • </wicket:panel>
    Informationsintegration & Web-Portale WS 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • Logout
    • Logout
      • Beendet Session des Users this .getSession().invalidate();
        • Entfernt alle Zustände der Usersession
        • Login beendet
    Informationsintegration & Web-Portale WS 2007/08 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ö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 2007/08 WS 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(&quot;loginForm&quot;);
    • form.setValue(&quot;username&quot;, &quot;fzi&quot;);
    • form.setValue(&quot;password&quot;, &quot;web&quot;);
    • // submit form
    • form.submit();
    Informationsintegration & Web-Portale WS 2007/08 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
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10
  • 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 2007/08 WS 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 / Tapestry http://agileskills2.org/blog/2007/09/my_thoughts_on_the_differences.html
    Informationsintegration & Web-Portale WS 2007/08 WS 2009/10