Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Web-Technologien im praktischen Einsatz Erstellung einer Bildsuchmaschine mit Apache Wicket Andreas Walter WS 2009/2010 Universität Karlsruhe (TH) Forschungszentrum.

Ähnliche Präsentationen


Präsentation zum Thema: "Web-Technologien im praktischen Einsatz Erstellung einer Bildsuchmaschine mit Apache Wicket Andreas Walter WS 2009/2010 Universität Karlsruhe (TH) Forschungszentrum."—  Präsentation transkript:

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

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

3 Informationsintegration & Web-Portale3 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

4 Informationsintegration & Web-Portale4 WS 2007/08 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 WS 2009/10

5 Infrastruktur aufbauen ? JUnit: automatisches Testen der Programmfunktionen ? Maven: Build Kontrolle ?continous integration server

6 Informationsintegration & Web-Portale6 WS 2007/08 JUnit JUNIT: 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 WS 2009/10

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

8 Informationsintegration & Web-Portale8 WS 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

9 Informationsintegration & Web-Portale9 WS 2007/08 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 WS 2009/10

10 Informationsintegration & Web-Portale10 WS 2007/08 continous integration server(2) Beispiel: Hudson - https://hudson.dev.java.net/https://hudson.dev.java.net/ WS 2009/10

11 Auswahl des richtigen Frameworks ? Wartbarkeit ? Lesbarkeit ? Model View Controler vs. Eventbasierten Frameworks

12 Informationsintegration & Web-Portale12 WS 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

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

14 Informationsintegration & Web-Portale14 WS 2007/08 Wartbarkeit in JSP 1.1, 1.2 etwas schöner mit JSF Tags Kann das die Designabteilung auch? WS 2009/10

15 Informationsintegration & Web-Portale15 WS 2007/08 Ideale Wartbarkeit Pures HTML – ein Framework muss das unterstützen Login Form mit Facelets Login: 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

16 Informationsintegration & Web-Portale16 WS 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

17 Informationsintegration & Web-Portale17 WS 2007/08 Lesbarkeit (1) Was macht dieses nette kleine Skript: $result = "$1\n" while m { } gsix; In Perl zur Extraktion von Links in HTML Texten => WS 2009/10

18 Informationsintegration & Web-Portale18 WS 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

19 Informationsintegration & Web-Portale19 WS 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

20 Informationsintegration & Web-Portale20 WS 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

21 Informationsintegration & Web-Portale21 WS 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

22 Informationsintegration & Web-Portale22 WS 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

23 Apache Wicket ?Features ?Vergleich mit anderen Frameworks

24 Informationsintegration & Web-Portale24 WS 2007/08 Wicket 1.4 URL: Aktuelle Version: 1.4 Offizielles Apache Projekt seit Juli 2007 Wiki: Dokumentation und Beispiele WS 2009/10

25 Informationsintegration & Web-Portale25 WS 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

26 Informationsintegration & Web-Portale26 WS 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 ( ) 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

27 Informationsintegration & Web-Portale27 WS 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

28 Informationsintegration & Web-Portale28 WS 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

29 Wicket Tutorial ?Aufbau einer Bildsuchmaschine

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

31 Informationsintegration & Web-Portale31 WS 2007/08 Download und Installation 1.Download und Installation von Maven 2.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/wicke t-tutorial Benutzer: tutorial, Passwort: wicket https://svn.awalter.info/docs/vorlesung/webportale/wicke t-tutorial 4.Konsole starten, in SVN Verzeichnis in Unterordner workspace wechseln WS 2009/10

32 Informationsintegration & Web-Portale32 WS 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 jdbc:mysql://localhost:3306/wickettutorial wicket #directory#/workspace/searchimpl/src/main/webapp/site/img/ar chive WS 2009/10

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

34 Informationsintegration & Web-Portale34 WS 2007/08 Maven (3) Pom.xml in searchimpl ? war 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

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

36 Informationsintegration & Web-Portale36 WS 2007/08 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 WS 2009/10

37 Informationsintegration & Web-Portale37 WS 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 Starten Run -> JUNIT -> New Run a single test in searchimpl Test class: CreateAndPersistanceTest Apply; Run Bei Fehlern zurück zu Maven(1) WS 2009/10

38 Wicket Tutorial ?Persistence und ORM mit Spring

39 Informationsintegration & Web-Portale39 WS 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

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

41 Informationsintegration & Web-Portale41 WS 2007/08 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; WS 2009/10

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

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

44 Informationsintegration & Web-Portale44 WS 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

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

46 Informationsintegration & Web-Portale46 WS 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

47 Informationsintegration & Web-Portale47 WS 2007/08 UserManagerDao: Spring setup applicationContext.xml org.gjt.mm.mysql.Driver ${jdbc.uri} ${jdbc.username} ${jdbc.password} Name des Beans in Anwendung Zu verwendende Implementierung Zu verwendende Datenquelle WS 2009/10

48 Informationsintegration & Web-Portale48 WS 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

49 Informationsintegration & Web-Portale49 WS 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

50 Wicket Tutorial ?Anwendung erstellen

51 Informationsintegration & Web-Portale51 WS 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

52 Informationsintegration & Web-Portale52 WS 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

53 Informationsintegration & Web-Portale53 WS 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 org.springframework.web.context.ContextLoaderListener Wicket Anwendung initialisieren applicationClassName info.awalter.tutorial.application.SearchApplication Mapping der Anwendung auf Hauptverzeichnis: localhost:8080/ search /* WS 2009/10

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

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

56 Informationsintegration & Web-Portale56 WS 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

57 Informationsintegration & Web-Portale57 WS 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: Here comes the child content Inhalt der erweiterten Seiten wird dort eingefügt. ?HTML Markup in erweiterten Seiten, z.B. in Home.html … html markup WS 2009/10

58 Informationsintegration & Web-Portale58 WS 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: Links: Über ?Aufruf in Wicket, z.B. für Link BookmarkablePageLink linkToHome = new BookmarkablePageLink("linkToHome", Home.class); WS 2009/10

59 Informationsintegration & Web-Portale59 WS 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

60 Informationsintegration & Web-Portale60 WS 2007/08 Page Template Funktionen ? 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 WS 2009/10

61 Informationsintegration & Web-Portale61 WS 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

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

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

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

65 Informationsintegration & Web-Portale65 WS 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

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

67 Informationsintegration & Web-Portale67 WS 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.) AddressValidator validiert Format Eingabe erforderlich: formelement. setRequired(true); Mindestlänge erforderlich: MinimumLengthValidator WS 2009/10

68 Informationsintegration & Web-Portale68 WS 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

69 Informationsintegration & Web-Portale69 WS 2007/08 Beispiel: Registrierungsformular Ort: info.awalter.tutorial.pages.user.Register 1.Bean User wird als CompoundPropertyModel gebunden 2.Formular enthält Textfelder username, und Passwortfeld password 3.Minlength Validatoren für username / password: 4 Validator für Feld 4.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 gesendet userdao.createUser(userbean); 7.User wird in Session eingeloggt 8.Weiterleitung auf Startseite WS 2009/10

70 Informationsintegration & Web-Portale70 WS 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 vorhanden userdao.getUserByUsernamePassword wird user in Session gesetzt (Authorisiert) WS 2009/10

71 Informationsintegration & Web-Portale71 WS 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

72 Informationsintegration & Web-Portale72 WS 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 thumbnailtable thumbnailtable.removeAll(); // set table and return to ajaxrequest target.addComponent(getThumbnailTable()); }; ?Anzeige der Treffermenge: statisch WS 2009/10

73 Informationsintegration & Web-Portale73 WS 2007/08 Generierung der Thumbnailtabelle Ort: info.awalter.tutorial.pages.search.thumbnailtable Verwendung von RepeatableView ?ImageTableRow: generiert Zeilen ?ImageTableCol: generiert Spalten WS 2009/10

74 Informationsintegration & Web-Portale74 WS 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

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

76 Informationsintegration & Web-Portale76 WS 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ö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 WS 2009/10

77 Informationsintegration & Web-Portale77 WS 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

78 Informationsintegration & Web-Portale78 WS 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

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

80 Informationsintegration & Web-Portale80 WS 2007/08 Quellen Wicket Homepage: Wicket Erweiterungen Vergleich Wicket / Struts Vergleich Wicket / JSF user-tries-jsf/ user-tries-jsf/ Vergleich Wicket / Tapestry differences.html differences.html WS 2009/10


Herunterladen ppt "Web-Technologien im praktischen Einsatz Erstellung einer Bildsuchmaschine mit Apache Wicket Andreas Walter WS 2009/2010 Universität Karlsruhe (TH) Forschungszentrum."

Ähnliche Präsentationen


Google-Anzeigen