Sie sind auf Seite 1von 69

Forschungszentrum Informatik Information Process Engineering

Universitt Karlsruhe (TH)

Web-Technologien im berblick Erstellung von umfangreichen, webbasierten Anwendungen

Andreas Walter, FZI WS 2009/2010

Webanwendungen: Beispiele
Statische Webseiten: z.B. Google Startseite

Informationsintegration & Web-Portale

WS 2009/10

Webanwendungen: Beispiele
Dynamische Webseiten: z.B. Portale zur Flugbuchung

Informationsintegration & Web-Portale

WS 2009/10

Webanwendungen: Beispiele
Webseiten im Stil von Desktop-Anwendungen

Informationsintegration & Web-Portale

WS 2009/10

Motivation
Ziel dieser Vorlesung: Technologien und Anforderungen zur Erstellung von kleinen und umfangreichen Webanwendungen

Client Internet

Server

Informationsintegration & Web-Portale

WS 2009/10

Inhalt
Grundlagen Desktop vs. Webanwendungen Webtechnologien fr kleinere Webanwendungen Anforderungen bei der Erstellung umfangreicher Webanwendungen Konzepte von Webrahmenwerken

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

Grundlagen Basistechnologien im Web

Worauf basieren Webanwendungen?

http: Transportprotokoll im WWW


http: HyperText Transfer Protocol (aktuell Version 1.1)
Von W3C standardisiertes Protokoll zum Abruf und Senden von Daten von / an einen Web-Server
Ursprnglich: Webseiten, Grafiken Mittlerweile: auch fr WebServices, Skype (Telefonie)
Grund: Firewalls mssen Port 80 freigeben, um Abruf von Webseiten zu ermglichen

Zustandsloses Protokoll (auf TCP/IP basierend): Jeder Abruf von Daten erfordert einen neue Verbindung (http 1.1 ermglicht keep alive nur fr z.B. Chats sinnvoll) Bereich HEADER: Fr Metainformationen (z.B. Statuscodes, Dokumenttyp, Lnge des Dokuments), Authentifizierung Bereich CONTENT: folgt dem HEADER, enthlt eigentlichen Inhalt
Informationsintegration & Web-Portale WS 2009/10 8

Adressierung mit http-Protokoll


URI: Uniform Ressource Locator Identifizierung und Adressierung von Ressourcen
<Schema>://[<Benutzer>[:<Passwort>]@] <Server>[:<Port>][/<Pfad>][?<Anfrage>][#<Fragment>]
Davon abgeleitet: Uniform Ressource Locator (URL) fr http z.B. http://www.fzi.de (bedeutet http://www.fzi.de:80/) httpRequest GET-: senden von Parametern, z.B. ber Adressfeld des Browsers:
http://www.fzi.de/page.php?id=1 Einsatz: fr Seiten, die ber ein Skript generiert werden und gebookmarkt werden sollen

httpRequest POST: senden von umfangreichen Datenmengen, Authentifizierung aus Formular heraus.
Datenbertragung im HEADER Bereich von http Keine Speicherung der bertragenen Daten mglich
Informationsintegration & Web-Portale WS 2009/10 9

Web Server
Setzt http-Protokoll um, erreichbar ber Port (z.B. 80)
Bearbeitung von Client Anfragen, bearbeitet diese und gibt wenn mglich einen Inhalt zurck, sonst http-Fehlercode

Schematischer Aufbau
HTTP Request GET/POST

Statische Ressourcen

Client

Web Server

Darstellung
HTTP Response Error oder Content

Anfrageverarbeitung

Gateway

Anwendungen
Informationsintegration & Web-Portale WS 2007/08 10

Browser
Programm zum Abruf und zur Darstellung von Inhalten aus dem Internet
z.B. Abruf von Webseiten ber das Protokoll http, zumeist auch andere Protokolle wie z.B. ftp (file transfer) integriert. W3C Konsortium definiert Standards, welche alle Webbrowser knnen soll(t)en
HTML, CSS, JavaScript, XSLT

Cache: dient zur Speicherung von hufig verwendeten Inhalten, reduziert Datentransfer mit Server Cookies: ber http knnen z.B. sessionrelevante Inhalte im Browser abgelegt werden, z.B. sessionID, Username, bevorzugte Sprache Plugins: Browser sind ber Plugins erweiterbar, z.B. Flash
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 11

Formatierungsanweisung: (X)HTML (1)


Hyper Text Markup Language Textbasierte Formatierungssprache zur Bestimmung der Darstellung von Inhalten wie Texten, Bildern und Hyperlinks zu anderen Dokumenten in einem Browser
<HTML> <HEAD> <HEAD> <BODY> <TITLE>Forschungszentrum Informatik</TITLE> <IMG SRC=logo.jpg> <A HREF=kontakt.html>Kontakt</A><BR/>

Kopf: Metadaten

Bild
</BODY> </HTML>

Body: Seiteninhalt

Link

Vgl. XML: XHTML wohlgeformt (HTML nicht)


12

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

XHTML(2)
Browser parst (X)HTML und zeigt dieses im Browser an

Weitere wichtige Elemente: Tabellen, Ebenen, Formulare

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

13

Kommunikation zwischen Browser und Webserver

Browser

Parsen von index.html Darstellung

User klickt auf Link, z.B.Kontakt

Anfrage, z.B. www.fzi.de/

Anfrage logo.jpg

Anfrage, z.B. www.fzi.de/ kontakt.html

Server
Anfrageverarbeitung Laden von index.html
Informationsintegration & Web-Portale

Anfrageverarbeitung Laden von logo.jpg


WS 2009/10 WS 2007/08 14

Widerverwendung von Darstellung: CSS


Cascading Style Sheets Legt fest, wie ein besonders ausgezeichneter Inhalt oder Bereich einer Webseite dargestellt werden soll.
Trennung von Inhalt (HTML, XML) und Darstellung CSS als eigene Ressource ladbar (z.B. stylesmobile.css)
Ermglicht unterschiedliche Ausgabe der gleichen Seite fr verschiedene Medien (Browser, PDA, Mobiltelefon, )

Beispiel:

HTML: <span class=demostyle>text mit css</span> CSS: .demostyle {color:black;background:red;font-weight: bold;}

Ausgabe:

text mit css


WS 2009/10 WS 2007/08 15

Informationsintegration & Web-Portale

Skripte in einer Webseite: Java Script


JavaScript (!= JAVA!!!) ist objektbasierte Skriptsprache, direkt in HTML integrierbar oder als Ressource integrierbar
Ermglicht die Client-seitige Ausfhrung von Skripten, durch Browser interpretiert und umgesetzt, z.B.
Eventhandling, z.B. Validierung von Formulareingaben Interaktive Mens, Drag & Drop Funktionen Aktualisierung von Seitenteilen

In Verbindung mit XML und httpRequest => AJAX (spter)

Problem: JavaScript ist schwer wartbar


Verhalten von JavaScript in Browsern nicht immer einheitlich Wiederverwendung von Bibliotheken statt Selbsterstellung von Scripten wann immer mglich!
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 16

Java Script Beispiel


Javascript in HTML Text eingebettet
<script type="text/javascript"> function checkFormValues() { if (pw1 != pw2) { alert(reenter password and pw are not equal)> return false; } } <form name=loginForm onSubmit=checkFormValues()> PW: <Input type=password name=pw1/> Reenter: <input type=password name=pw2/> <input type=submit value=login/> </form>

Skript bewirkt: berprfung von eingegebenen Passwrtern


Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 17

Zusammenfassung Grundlagen
http: Protokoll im Internet, Adressierung mit URLs WebServer: Serverseite, erweiterbar (z.B. Gateways) Browser: Clientseite, dient zur Darstellung von Inhalten XHTML: dient zur Formatierung von Webseiten Kommunikation: zustandslos, Request Response Prinzip CSS: dient zur Trennung von Inhalt und Formatierung JavaScript: ermglicht Ausfhrung von Skripten im Browser

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

18

Desktop vs. Webanwendungen

... Die Unterschiede verschwinden

Desktop vs. Webanwendungen (I)


Desktop-Anwendungen (ohne Netzwerkkommunikation)
Fat-Client / Rich-Client: Anwendungslogik, Darstellung (und ggf. Datenhaltung) in einer Software + Zustandshaltung, z.B. geffnetes Worddokument + Umfangreiche Menfunktionen. + Schnelle Reaktion auf Eingaben durch Aktualisierung von einzelnen Teilen einer Seite. + Darstellung: Programmierer knnen Standardbibliotheken verwenden (Swing (JAVA) / ) - Meist sehr umfangreiche Installation erforderlich (in Firmen hierfr Kontakt mit SysAdmin ntig) - Updates nur manuell
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 20

Desktop vs. Webanwendungen (II)


Desktop-Anwendungen (mit Netzwerkkommunikation)
Datenhaltung und (Teile der) Anwendungslogik ausgelagert, Software auf Client dient zur Darstellung + Weiterhin clientseitige Zustandshaltung (z.B. einmaliges Laden von Terminen -> Darstellung als Kalender)

Kommunikation mit Server nur zur Synchronisation

+ Client weniger umfangreich, Aktualisierung der Software bei jedem Start mglich (z.B. JAVA Web Start) - Weiterhin lokale Installationen notwendig
- Entweder Interpreter (z.B. kompatible JAVA-Version) - oder Plugins (z.B. Flash Player)

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

21

Desktop vs. Webanwendungen (III)


Browserbasierte Webanwendungen:
Webbrowser auf Clientseite wird zur Darstellung der Anwendung verwendet, Server fr die Datenhaltung und Anwendungslogik + Keine Installation von Software auf Clientseite ntig (Smtliche Betriebssysteme fr PCs beinhalten Browser) Web 1.0 Stil: Eine Webseite wird komplett aktualisiert fr jede Anfrage (statisch) - Ermglicht keine Anwendungen mit desktop-feeling Web 2.0 Stil Aktualisierung von Seitenteilen mglich (Desktop-feeling) + Ermglicht die Erstellung von umfangreichen Webanwendungen im Stile einer Desktopanwendung
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 22

Aktueller Trend
Webanwendungen werden Desktopanwendungen immer hnlicher, profitieren aber von den Vorteilen schlanker Clients.
Verwendung des Browsers zur Darstellung, keine Installation von Plugins oder eigenstndiger Software Client immer auf neuestem Stand Hauptgrnde und Techniken hierfr:
JavaScript und CSS AJAX (Details spter) Breitbandzugnge (schnelles Laden von Seitenteilen mglich)

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

23

Web-Technologien fr kleinere Webseitenprojekte

hier ist skripten noch sinnvoll

Merkmale kleiner Webseitenprojekte


Hoher Anteil an statischen (gleich bleibenden) Webseiten Merkmale der dynamischen Webseiten
Anwendungslogik ndert sich kaum bis selten Wartbarkeit ist somit keine Anforderung Gleichzeitige Teilnehmerzahl fr Nutzung von dynamischen Seiten gering - Skalierbarkeit also keine Anforderung

Vorgehen generell
Design der Webseite und statische Seiten erstellen (Grafiker) Programmierer whlt eine geeignete Skriptsprache aus und erstellt Anwendung Webspace bei Internetprovider anmelden, das Sprache untersttzt Aufladen der Dateien (Daten) und Skripte: Fertig!
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 25

Vorgehen zur Erstellung dynamischer Seiten

Anwendung: Fr eine geplante Feier sollen sich Freunde und Verwandte online anmelden, um Catering planen zu knnen 1. Mit HTML Formular erstellen, dass Datenfelder beinhaltet, z.B. Name, Kontakt, Anzahl Personen, Auswahl Mens, Vegetarisches Essen gewnscht, 2. Skript erstellen, dass diese Werte einliest 3. Anwendungslogik: prfe, ob Teilnehmer bereits registriert, falls nicht speichere Daten ab. 4. Dynamisches generieren einer Antwortseite, z.B. Danke fr Deine Registrierung oder Du bist bereits registriert, mchtest du Deine Daten ndern

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

26

Serverseitige Anwendungslogik und Datenhaltung

Serverseitige HTML-Generierung

Aufruf von HTMLgenerierender Anwendung CGI API-basiert

Einbettung HTML-generierender Skriptteile

interpretiert SSI ASP PHP

kompiliert JSP

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

27

Die Old-School Variante: CGI


Bettigung Submit-Button <FORM METHOD="POST" ACTION="http://www.fzi.de/ cgi-bin/my-form"> Aufruf des Skriptes mit Parametern Initialisierung bei jedem Aufruf Aufbau der DB Verbindung bei jedem Aufruf

client
Anfrage

HTTPServer

CGI Skript / Programm

Datenbank
Verbindungsaufbau

CGI

Antwort

SQL Anfrage Ergebnis

HTTP Server Antwortet

Skript bermittelt HTML und beendet sich

Skript generiert HTML

Skript stellt Anfrage an DB

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

28

Die Old-School Variante: CGI


Gateway an Web-Server als Erweiterung zur Integration von Skriptsprachen oder Programmen, z.B. Perl + Einzelne Aufrufe konkurrieren sich nicht, da jeder Aufruf in eigenem Prozess - Ein Prozess pro Anfrage (Ressourcenintensiv) - Keine Speicherung des Zustands (CPU intensiv) - Fr jede DB-Anfrage Verbindung aufbauen und trennen (zeitintensiv) - Keine Trennung von Prsentation und Anwendungslogik (Wartbarkeit fr grssere Projekte kaum mglich)
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 29

Optimierung durch API-basierte Anstze


Bettigung Submit-Button <FORM METHOD="POST" ACTION="http://www.fzi.de/ cgi-bin/my-form"> Aufruf des Programms, Parameterbergabe Initialisierung bei ersten Aufruf (einmalig) Verbindungsaufbau zur DB beim ersten Aufruf (einmalig)

client
Anfrage

HTTPServer
Programm

Datenbank
Verbindungsaufbau SQL Anfragen Ergebnisse

Antwort Zustand

HTML-Rckgabe HTML-Generierung

Beliebig viele SQL Anfragen

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

30

Beispiel: Java Servlet


Programm wird in den Adressraum des Servers geladen + Programm startet einmalig, nur eine Datenbankverbindungen erforderlich + Zustandshaltung mglich, z.B. durch Session-IDs + Anfragen werden in Threads statt Prozessen ausgefhrt (deutlich Ressourcenschonender) - Installation von speziellem Web-Server zur Ausfhrung von Java-Servlets ntig, z.B. Apache Tomcat (fr kleine Projekte ungeeignet) - Keine Trennung von Prsentation und Anwendungslogik Fr kleine Anwendungen zu aufwendig, fr groe ungeeignet
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 31

Server-Side Scripting
In HTML-Seiten werden zustzliche HTML-generierende Quellen integriert

HTML

HTML Scripting Scripting

Datenbank

AnwendungsLogik

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

32

Variante 1: Interpretation zur Laufzeit


Anwendung erstellen
<html> <?php ...> </html>

Laufzeit

Interpreter

Interpretierte Skriptsprachen: z.B. PHP Skript wird direkt in eine HTML-Seite geschrieben Bei Anfrage einer Seite wird Skript durch Interpreter interpretiert und HTML Text geschrieben Generiertes Dokument wird an Server zurckgegeben + einfache Art, Skripte einzubinden + Interpreter ist nur ein einzelner Prozess - CPU Last bei jedem Seitenabruf durch Neuinterpretation - Keine Trennung von Prsentation und Logik

HTMLDokument

Fr kleinere Webanwendungen sehr gut geeignet


WS 2009/10 WS 2007/08 33

Informationsintegration & Web-Portale

PHP fr groe Projekte: Wikipedia


Praxisbeispiel Wikipedia.org verwendet PHP fr ein sehr umfangreiches Projekt. Prinzip: Statisches Schreiben von Webseiten
Verhltnis von Seitenabruf zu Seitennderung sehr gering Anwendungslogik vergleichsweise gering: Seitennderungen annehmen und protokollieren. Statisches Schreiben von Webseiten reduziert CPU / Ressourcenlast: HTML Seite muss nur geladen werden

! Wenn mglich, sollten aus dynamischen Seiten statische Seiten generiert werden, um die Skalierbarkeit zu erhhen
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 34

Variante 2: Kompilierte Skriptsprachen


Anwendung erstellen
<html> <jsp:...> </html>

z.B. JSP

Erfordert Installation von JAVA fhigem Web-Server Kompilierung erzeugt Servlets zur Ausfhrung der JSP-Seiten

bersetzungszeit (einmalig)

Compiler

Servletgenerierung

Laufzeit HTMLDokument
Informationsintegration & Web-Portale

+ JSP 1.1 ermglicht durch Tags klarere Trennung von Darstellung und Anwendung - JSP Programmierung entspricht nicht den meisten Programmierern bekannte GUIProgrammierung (z.B. event Verarbeitung

WS 2009/10 WS 2007/08

35

Clientseitige Anwendungslogik
Motivation
Die Funktionen im Browser reichen fr geplante Anwendung nicht aus, z.B.
gleichzeitiges Aufladen von Bildern aus einem lokalen Ordner fr ein Fotoalbum (Sicherheitsbeschrnkungen von http erlauben immer nur eine Datei auszuwhlen => Umstndlich fr Benutzer) Abspielen von Multimedia (z.B. Videos)

Die Anwendung soll sehr dynamisch sein, z.B.


Produktwerbung (viele bewegte Bildsequenzen)

Die Anwendung soll wie eine Desktop-Anwendungen wirken


Vor ein paar Jahren gab es noch kein AJAX ;-)

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

36

Browser Plugins
Erweiterung des Browsers um neue Softwarekomponente Hier: am Beispiel von Macromedia Flash 9 Teile oder komplette Anwendungslogik wird integriert
Kommunikation mit Server ber http oder soap

Einsatz: sehr dynamische Anwendungen, Multimedia, Desktop Integrierte Skriptsprache: Action Script

Starten einer Plugin-Anwendung 1. Benutzer muss jeweils kompatible Version des Plugins haben 2. Eigener HTML-Tag zum starten des Plugins in einer Webseite 3. Komplettes Programm wird zum Client bertragen 4. Plugin ldt Programm und stellt es dar + Verhalten der Software exakt vorhersagbar (mit HTML problematisch) Plugin, speziell aktuellste Version nicht auf allen Client PCs (z.B. beschrnkte Installationsrechte auf Firmen-PSs) Erfordert Spezialisten im Umgang mit der jeweiligen Programmiersprache Meist Wartung schwierig

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

37

JAVA Applets
Motivation
ber ein Browser soll eine Desktopanwendung geladen werden Anwendungslogik komplett integrierbar Theoretisch auch Datenhaltung direkt ansprechbar (praktisch nicht: aus Sicherheitsgrnden erfordert dies ffnung eines Ports direkt zur Datenbank !) + + + Entwicklung der Anwendung komplett in JAVA mglich Saubere Trennung von Darstellung und Anwendungslogik mglich Wiederverwendbarkeit von Komponenten vgl. Plugins: Installationen notwendig

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

38

Schichtenarchitektur mit Skripten und Plugins

Prsentation

Anwendung

1. Plug-inAnwendung mit direkter Datenbankkommunikation

2. PluginAnwendung mit Zugriff ber Middleware

3. HTMLClient

HTTP-basiertes Protokoll

Daten

Direkte Kommunikation mit Datenbank (SQL ber DB-spezifisches Protokoll)


WS 2009/10 WS 2007/08

Kommunikation ber Middleware-Protokoll (RMI, IIOP, SOAP)

Informationsintegration & Web-Portale

39

Zusammenfassung: kleine Webanwendungen

Fr kleine Anwendungen
Skalierbarkeit, Wartbarkeit und Wiederverwendbarkeit stellen keine Anforderung dar Plugins ermglichen Spezialanwendungen Alle gezeigten Skriptanstze ermglichen die Generierung von dynamischen HTML-Seiten. Erstellung von Anwendungen mit Desktop-Charakter hier nicht ntig Generierung von statischen Seiten ermglicht auch umfangreiche Anwendungen bei geringen Ressourcen

Umsetzung der Anwendung also entscheidend von Vorkenntnissen der Programmierer und den installierten Interpretern / Gateways auf einem Web-Space
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 40

Web-Rahmenwerke fr umfangreiche Webseitenprojekte

.. Mal schnell ein Skript schreiben reicht da nicht mehr!

Umfangreiche Webanwendungen
Beispiele:
Ebay, Google (Mail), Flickr,

Eigenschaften
Hoher Anteil an dynamischen Seiten Komplexer Seitenaufbau Umfangreiche Anwendungslogik, hufige nderungen und Erweiterungen Verschiedene Ausgabesprachen, Ausgabemedien Zuverlssiger Betrieb auf unterschiedlichsten Browsern

Erstellung mit Web Rahmenwerk


Rahmenwerk, dass Erstellung einer umfangreichen Anwendung ermglicht
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 42

Rahmenwerke ber

Tapestry
OXF

Echo

JSF

Cocoon
WebWork

Millstone

Struts
Xoplon

Cassandra

SOFIA

WebOnSwing
Genie

Groovy
Chiba Jaffa JWarp Japple
Helma

Flex
JBanana

Wicket

GWT

Smile

MyFaces

Melati
Dinamica

Eclipse RAP

Liste unvollstndig.
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 43

Welches Rahmenwerk verwenden?


Hauptfrage bei einem neuen Projekt
Welches Framework verwendet man?

Generelle Faktoren
Programmiersprache: abhngig vom Team Lizenz: abhngig von Budget, Infrastruktur (Beispiel Smartshopping: alles .NET => Rahmenwerk ebenfalls)

Informationsintegration & Web-Portale

WS 2009/10

44

Hauptparameter bei umfangreichen Projekten

Trennung von Anwendungslogik und Darstellung Grnde


Code gemischt mit HTML schwer lesbar und wartbar (in Skriptsprachen und JSP der Fall) nderung der Darstellung knnen unabhngig von der Anwendungslogik gemacht werden.

Gngige Umsetzungen
Id-Marken in HTML-Text, die spter durch HTML-Text ersetzt werden z.B. <span app:id=codehere/> Web-Rahmenwerk bietet Standardkomponenten an, die verwendet werden knnen (Tables, Pulldowns, etc) Formatierung durch CSS Wnschenswert: eigene Komponenten zu erstellbar
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 45

Model View Controller


Dreischichtenarchitektur trennt
Prsentation Anwendung Datenhaltung

Model View Controller hnlich, trennt


View: Darstellung Controller: Request / Response Verwaltung Model: Daten

Saubere Trennung von Darstellung und Anwendung Wiederverwendbarkeit der Anwendungslogik Im Einsatz bei SWING und den meisten Web-Frameworks

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

46

Web Rahmenwerke
Prinzip
meist: Model - View - Controller

Es gibt flle von Rahmenwerken Welches nimmt man? Ziele


Zusammenstellung von Anforderungen an ein Rahmenwerk Zustzliche Anforderungen durch AJAX Trend Kurze Vorstellung von drei Rahmenwerken heute Tutorial fr Framework Apache Wicket nchste Woche
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 47

Anforderungen an umfangreiche Webanwendungen und Web-Rahmenwerke (1)

Regelmige Umstrukturierung Umbau / Erweiterung der Seite:

Erfordert strikte Trennung von Anwendungslogik und Darstellung Templates, auch fr verschiedene Ausgabearten (PC, PDA, Mobile, ) Automatisches Fllen von Textstellen in Webseiten mit Lndersprache

Untersttzung von einheitlichem Look & Feel

Betrieb der Webseite in mehreren Sprachen

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

48

Mehrsprachigkeit
Webseiten umfangreicher Projekte mssen meist in mehreren Sprachen erstellt werden Manuelle Erstellung von sprachspezifischen Seitenteilen ist zeit und pflegeaufwendig, schwer wartbare Quelltexte Anforderung Framework sollte sprachspezifische Textbausteine automatisch in Webseiten einfgen knnen Gngige Umsetzung: i18n Standard Verwendung von properties Dateien fr lnderspezifische Sprachbausteine, z.B. (response_en.properties) Dynamisches Laden der jeweiligen Properties Datei durch das Web-Framework fr die Spracheinstellungen eines Nutzers
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 49

Anforderungen an umfangreiche Webanwendungen und Web-Rahmenwerke (2)

Hoher Anteil an dynamischen Seiten, z.B. fr Suchergebnisse, Shopsysteme, Warenkrbe,

Erstellung von umfangreicher Anwendungslogik

Umfangreiche Datenintegration / Umfangreiche Dateneingaben


Erfordert Einbindung von Frameworks zur Datenintegration Integrierte Prfung der Konsistenz von Benutzereingaben

mit Datenmodell und Anwendungslogik

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

50

Datenintegration und Eingaben

Umfangreiche Datenintegration
Erweiterung mit speziellen Frameworks mit Objektmapping
Hybernate, Spring (Details: Vorlesung Guido Sauter)

Umfangreiche Dateneingaben
wenn ntig Transaktionen, Speicherung, Durch Web-Rahmenwerk selbst , oder in Verbindung mit Erweiterungen: Prfung der Konsistenz von Benutzereingaben,
z.B. PLZ hat fnf Ziffern e-Mailadresse muss @ beinhalten

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

51

Anforderungen an umfangreiche Webanwendungen und Web-Rahmenwerke (3)

Zugangsbeschrnkungen fr geschtzte Bereiche

User-Sessions und Weiterleitung auf Login-Seite Zustandshaltung von aktuell bentigten Daten / Kontext eines Nutzers Einfache Intergrierbarkeit von AJAX Techniken

Schnelle Reaktionszeiten auf Benutzeranfragen

Anwendungen mit Desktopstil

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

52

Zugangsbeschrnkungen fr geschtzte Bereiche

Gngige Verfahren (da http zustandslos)


Rahmenwerk generiert nach einem erfolgreichen Login ein Session-ID String. z.B. jsessionid=0EEC1A1BE9980145F81DF6B99418B027 Rahmenwerk hlt ein Session-Objekt pro Benutzer zur Bindung von Objekten eines Benutzers Useridentifikation:
Session-id als cookie (falls von Browser akzeptiert), sonst als GET Parameter in allen URLs der Webseite Bei jedem Seitenaufruf:
Rahmenwerk sucht nach vorhandenem Session-Objekt Falls nicht vorhanden: Weiterleitung auf Login-Seite (falls die aufgerufene Seite eine geschtze Seite ist)
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 53

Anwendungen mit Desktopstil AJAX

AJAX (asynchronous Java Script and XML)


Ermglicht die Aktualisierung von Seitenteilen
Somit muss nicht immer die ganze Seite neu geladen werden und die Anwendung bekommt desktop-feeling ber JavaScript wird ein XMLHttpRequest an Server geschickt Server verarbeitet Request und gibt XML oder HTML zurck Java Script nimmt Request entgegen und verarbeitet diesen, meist durch Aktualisierung eines Seitenbereichs (z.B. Layers)

Bestandteile:

Keine wicklich neue Technologie, sondern eine Kombination von bestehenden Techniken
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08

54

AJAX in der Praxis


Beispiele
Auto-Complete fr Suchanfragen Pop-Up Fenster (in Seite integriert) Drag & Drop Direkte Fehlermeldungen auf Falscheingaben in Formularen

Best Practices
AJAX Funktionen manuell zu erstellen ist zeitaufwendig und fehleranfllig (Nur fr JavaScript Experten) => Verwendung eines geeigneten Rahmenwerks Bei Aktualisierung von Seitenteilen: Aktion dem Benutzer anzeigen (z.B. durch Ladebalken) AJAX nicht wahllos einsetzen!
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 55

AJAX integriert in Web-Frameworks

Ajax stellt umfangreiche Anforderungen an ein Web-Framework


Ohne AJAX: es wird eine ganze Seite generiert und Komponenten, Zustnde der Seite komplett gendert Mit AJAX: Webtechnologie sollte mglichst schnell und unkompliziert die Aktualisierung von Seitenteilen untersttzen
Komplexitt der JavaScript Aufrufe verbergen Methoden fr AJAX-Calls anbieten Aktualisierung von Seitenteilen / Komponenten ermglichen AJAX Untersttzung mglichst direkt in einem Framework (und nicht ber viel Hackerei eingebunden)

Fr zeitgeme Webanwendungen: AJAX Support in Framework zwingend erforderlich

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

56

Anforderungen an umfangreiche Webanwendungen und Web-Rahmenwerke (4)

Weitere Anforderungen Objektorientierte Programmierung der Anwendung mit fr Entwickler vertrauten Prinzipien (vgl. Swing: Datenbindung, Events, etc) Schnelle Erlernbarkeit der Webtechnologie, Abstraktion von zugrundeliegenden Techniken (z.B. Details von http) Durchfhrung von automatischen Funktionstests (vgl. JUnit Tests) Grund: manuelle Tests zeitaufwendig!
WS 2009/10 WS 2007/08

Informationsintegration & Web-Portale

57

Auswahl des geeigneten Rahmenwerks


Zusammenfassung Hauptkriterien
Erfllung der genannten Anforderungen, Focus auf
AJAX Support Erweiterbarkeit Trennung von Anwendung und Darstellung

Lizenzierung: Proprietr, open-source Programmiersprache (im Folgenden: Focus auf JAVA) Zeitaufwand zur Erstellung von Web-Anwendungen Support: Qualitt der Mailinglisten Antwortzeit

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

58

Konzepte von Web-Rahmenwerken

Google Web Toolkit (GWT) Java Server Faces (JSF) Weitere Web-Rahmenwerke und Technologien

Google Web Toolkit (1)


Programmiersprache: JAVA Widget Library: Verhalten von GUI Komponenten wie in Swing programmierbar (Events, ContainerZuordnung, ) Verhalten der Komponenten wie in Applets (mittels AJAX) Proprietrer Compiler generiert daraus smtlichen XHTML und JavaScript Code fr AJAX Saubere Trennung von Darstellung und Anwendungslogik

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

60

Google Web Toolkit (2)


Entwickler bentigen (fast) keine HTML-Kenntnisse (nur eine Host-HTML Seite wird bentigt) Design der Komponenten ber CSS anpassbar. (Aufruf von CSS ber Host-HTML Seite) Spring, Hybernate fr Datenhaltung integrierbar GWT auch nur zur GUI-Erstellung (WebseitenFrontend) nutzbar
JSF dann fr die Anwendungslogik

Informationsintegration & Web-Portale

WS 2009/10 WS 2009/10

61

Google Web Toolkit Bewertung


+ Trennung von Anwendung und Darstellung + Einfach erlernbar und schnell anwendbar + Wachsende Community guter Support - Getrennte Betrachtung von Client und Serverseite (Bereitstellung von Daten durch SOAP basierte RPC Calls) - Proprietrer Compiler

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

62

JSF: Java Server Faces

Grundidee: Komponentenverhalten wie in SWING Java Beans als Model; JSP Seiten und Komponentenbaum als View; Action Listener und aus JSP generiertes Servlet als Controller
Jeder Request durchluft festen JSF Lifecycle 1. Restore view : stellt den Zustand der aktuellen Session her (aus Session Context) 2. Apply request values; process events: Zustandsermittlung der Komponenten 3. Process validations; process events : Eingabewerte validieren 4. Update model values; process events : Beans aktualisieren 5. Invoke application; process events : Anwendungslogik ausfhren 6. Render response : Antwortseite generieren

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

63

JSF: Bewertung

+ Durch Industriestandard zukunftssicherheit fr Anwendungen, - Standard selbst untersttzt kein AJAX - Schwergewichtiger Lifecycle - JSP Seiten knnen Anwendungslogik enthalten - Recht hoher Zeitaufwand, z.B: durch Konfiguration in XML-Files ntig

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

64

JSF Tuning (kein Standard mehr!)


Ajax Support
Ajax4JSF mit SEAM, G4JSF (GWT mit JSF kombiniert)

JSF Facelets
Verzicht auf JSP Seiten; ermglicht strikte Trennung von Anwendung Stattdessen HTML-Seiten mit id-Marken, in die Componenten spter geschrieben werden sollen

+ JSF erfllt dann auch alle genannten, wichtige Kriterien eines Web-Frameworks - Zu viele Frameworks = zu viele potentielle Fehlerquellen !
- Teilweise Inkompatibilitten zwischen Frameworks / Bibliotheken - Zeitaufwendige Fehlersuche
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 65

Weitere Web-Rahmenwerke und Technologien

Grails (ursprnglich Groovy on Rails)


Verwendet Sprache Groovy auf JAVA basierende Variante von Ruby on Rails Verwendet Hybernate fr objektrelationales Mapping Scaffolding: Basierend auf einem Bean (Domain) werden Views und Controller automatisch generiert

Eclipse Rich Application Client (RAP)


Entwicklung von richtigenDesktop Anwendungen mit Elipse (!) Seit Anfang Oktober 2007 offiziell Version 1.0.

Alles nur mit XML / XSLT / : Vorlesung Heiko Paoli

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

66

Zusammenfassung
Umfangreiche Webanwendungen erfordern WebRahmenwerke
Ermglichen langfristige Wartung einer Anwendung Trennung von Darstellung und Anwendung wichtig Verdecken Komplexitt der zugrunde liegenden Webtechnologien
Umfangreiche Anforderungen an ein Web-Rahmenwerk

Integration von AJAX in ein Rahmenwerk ermglicht die Erstellung von Anwendungen mit desktop-Charakter

Auswahl des richtigen Rahmenwerks


Bei neuen Projekten: Prfen, ob aktuelle Rahmenwerke die Anforderungen besser /direkter / schneller erfllen knnen
Informationsintegration & Web-Portale WS 2009/10 WS 2007/08 67

Nchste Woche: Wicket Tutorial


Wicket: ein Beispiel fr ein leistungsfhiges Rahmenwerk
Offizielles Apache Projekt, open source Event-getriebene Architektur sehr performant Ermglicht die Anwendungsentwicklung komplett in JAVA und davon unabhngiges Design der Webseiten Ein Framework statt vieler (siehe JSF) Ermglicht die einfache Gestaltung eigener Komponenten Umfangreicher AJAX - Support

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

68

Literatur
Buch: Web-Technologien JSP
http://www.jsptutorial.org/ http://www.w3schools.com/ajax/default.asp http://code.google.com/webtoolkit/ http://www.exadel.com/tutorial/jsf/jsftutorial-kickstart.html http://www.slideshare.net/loffenauer/2007-09-10-fzi-training-groovy-grails-v-ws, Raphael Volz http://www.eclipse.org/rap/

von Heiko Whr von Dpunkt Verlag (Taschenbuch - Mai 2004)

AJAX

Google Web Toolkit JSF

Grails

Elipse RAP

Informationsintegration & Web-Portale

WS 2009/10 WS 2007/08

69