Das Web hat in den in den letzten Jahren einen enormen Wandel durchlaufen. Das Schlagwort Web 2.0 ist in aller Munde.
Das Internet wird nicht mehr nur genutzt, um Informationen anzuzeigen, sondern als eine Plattform verwendet, das zur Abwicklung von Geschäften dient oder die Interaktion, Kom-munikation und Zusammenarbeit von vielen Nutzern fördert. Beispiele hierfür sind Ebay, Amazon, Google oder Wikipedia. Weitere Bestandteile, die das Web 2.0 kennzeichnen, sind unter anderem Weblogs, RSS-Feeds oder soziales Tagging/Bookmarking.
Das Web 2.0 ermöglicht vollkommen neue Geschäftsmodelle. Ein Unternehmen muss nicht mehr unbedingt ein Produkt neu entwickeln, um eine Aufgabe zu lösen. Es stellt eine Infra-struktur zur Verfügung, in der der Kunde durch Kombination von einzelnen Diensten in einer sogenannten Mashup-Applikation eine Lösung für seine Aufgabe zusammenstellen kann. Weiterhin werden Webseiten angeboten, deren Inhalt nicht durch den Betreiber der Seite, sondern durch die Nutzer der Seite zur Verfügung gestellt werden. Der Betreiber bietet ledig-lich das Rahmenwerk an, mit dem Informationen auf die Seite hinzugefügt werden können. Das wohl berühmteste Beispiel hierfür ist YouTube.
Um Benutzeroberflächen für verschiedene Web 2.0-Anwendungen zu entwickeln, die eine hohe Gebrauchstauglichkeit und Reaktionsfähigkeit haben, werden auch neue Ansätze zur Realisierung solcher Oberflächen benötigt. Ein solcher Ansatz ist Ajax (Asynchronous Ja-vaScript and XML), der es durch das asynchrone Nachladen von Daten erlaubt, Webanwen-dungen mit der Funktionaliät von Desktopanwendungen zu verwirklichen.
Diese Arbeit befasst sich mit der Untersuchung des Ajax-Ansatzes. Anhand der Entwicklung eines Webclients zur Bearbeitung von Geschäftsprozessen wird festgestellt, ob Ajax nur ein Internet-Hype oder ein zukunftweisender Ansatz ist, welche Mittel aktuell zur Verfügung stehen, um die Ajax-Entwicklung zu vereinfachen sowie beschrieben, wann der Einsatz sinn-voll und wann er es nicht ist.
Inhaltsverzeichnis
0 Einleitung
1 Das Web 2.0 und Ajax
1.1 Web 2.0 – Eine Einführung
1.2 Ajax – Eine Einführung
1.3 Möglichkeiten von Ajax anhand vorhandener Applikationen
1.3.1 Google Maps
1.3.2 Google Suggest
1.3.3 IBM BlueMail
1.4 Zusammenfassung
2 Ajax-Grundlagen
2.1 Asynchrone Kommunikation mit Frames und IFrames
2.1.1 Hidden Frame-Technik
2.1.2 Hidden IFrame-Technik
2.1.3 Vor- und Nachteile
2.2 Asynchrone Kommunikation mit XMLHttpRequest
2.2.1 XMLHttpRequest
2.2.2 Vor- und Nachteile
2.3 Datenformate bei der asynchronen Übertragung
2.3.1 HTML
2.3.2 Text
2.3.3 XML versus JSON
2.4 Zusammenfassung
3 Untersuchung von Ajax-Bibliotheken
3.1 Beliebteste Ajax-Bibliotheken
3.1.1 Scriptaculous
3.1.2 Dojo Toolkit
3.1.3 Yahoo! UI
3.1.4 Google Web Toolkit
3.1.5 Microsoft ASP .NET Ajax
3.2 Vergleich der Toolkits
3.2.1 Nutzung der Bibliothek
3.2.2 Behandlung des Vor-/Zurück-Button-, Lesezeichen-Problems
3.2.3 Anzahl, Benutzung und Erweiterbarkeit von Widgets
3.2.4 Abstraktion der Ajax-Kommunikation
3.2.5 Visuelle Effekte
3.2.6 Dokumentation
3.3 Zusammenfassung
4 OpenAjax-Allianz
4.1 Integrationsprobleme von Ajax-Bibliotheken
4.2 Idee von OpenAjax
4.3 Aktivitäten der Allianz
4.3.1 Marketing-/Kommunikationsaktivitäten
4.3.2 Technische Aktivitäten
4.3.3 Arbeitsgruppen
4.4 OpenAjax-Hub
4.5 Eclipse Ajax Toolkit Framework
4.6 Zusammenfassung
5 Analyse
5.1 Websphere Integration Developer
5.1.1 Human Task Webclient
5.1.2 Business Process Choreographer Explorer
5.2 Zielbestimmung
5.3 Funktionale Anforderungen
5.4 Nichtfunktionale Anforderungen
5.4.1 Gebrauchstauglichkeit
5.4.2 Erweiterbarkeit und Wiederverwendbarkeit
5.4.3 Performanz
5.4.4 Zuverlässigkeit
5.4.5 Technische Anforderungen
5.5 Auswahl der Entwicklungsumgebung
5.5.1 Dojo
5.5.2 Datenaustauschformat
5.5.3 Ajax für IBM Websphere Platform Early Program
5.5.4 Websphere Applikationsserver
5.5.5 Rational Software Architekt und Aptana
5.5.6 Microsoft Internet Explorer und Mozilla Firefox
5.5.7 Debugging mit Firebug
5.6 Gliederung in Teilprodukte
5.7 Zusammenfassung
6 Dojo
6.1 Dojo-Architektur
6.2 Aspektorientiertes Programmieren mit Dojo´s Ereignissystem
6.2.1 Ereignisbehandlung mit der connect()-Funktion
6.2.2 Ereignisbehandlung mit der subscribe()-Funktion
6.3 Widgetentwicklung mit Dojo
6.3.1 Nutzung von Widgets
6.3.2 Entwicklung von Widgets
6.3.3 Erweiterung von Widgets
6.4 Zusammenfassung
7 Design
7.1 Design der Benutzeroberfläche
7.1.1 Anfordern und Freigeben einer Human Task
7.1.2 Bearbeitung einer Human Task oder Subtask
7.1.3 Erzeugen einer Subtask
7.1.4 Hilfesystem
7.1.5 Aktualisierung von Daten
7.2 Architekturübersicht
7.3 Wiederverwendbare Komponenten
7.3.1 AccordionContainer
7.3.2 TableController
7.3.3 ComboBox
7.3.4 InputCollector
7.4 Anwendungsspezifische Komponenten
7.4.1 ToDo
7.4.2 Task
7.4.3 Subtask
7.4.4 SliderContainer
7.4.5 Help
7.5 Zusammenfassung
8 Implementierung
8.1 Ordnerstruktur
8.2 Aufbau der Oberfläche
8.3 Objektorientiertes Programmieren mit Dojo
8.4 Kommunikation mit dem Server
8.5 Comet
8.5.1 Grundlagen
8.5.2 Einsatz in diesem Projekt
8.6 Nutzung wiederverwendbarer Komponenten
8.6.1 TableController
8.6.2 InputCollector
8.7 Erweiterung anwendungsspezifischer Komponenten
8.7.1 ToDo-, Task- und Subtaskkomponente
8.7.2 SliderContainer
8.8 Zusammenfassung
9 Zusammenfassung und Ausblick
Zielsetzung und thematische Einordnung
Das Hauptziel dieser Diplomarbeit ist die Entwicklung eines Prototypen eines Ajax-basierten Webclients zur Bearbeitung von Geschäftsprozessen und Human Tasks für den IBM Websphere Integration Developer. Die Forschungsfrage fokussiert dabei darauf, ob durch den Einsatz des Ajax-Ansatzes die Gebrauchstauglichkeit von Webanwendungen signifikant gesteigert werden kann und unter welchen Bedingungen dieser Ansatz einen echten Mehrwert gegenüber traditionellen Modellen bietet.
- Untersuchung des Ajax-Ansatzes und seiner Eignung für moderne Webanwendungen
- Evaluation und Vergleich führender Ajax-Bibliotheken (Dojo, Scriptaculous, Yahoo! UI, GWT, ASP .NET Ajax)
- Analyse von Integrationsproblemen durch die OpenAjax-Allianz
- Entwicklung eines interaktiven Webclients unter Nutzung der Dojo-Bibliothek
- Implementierung spezifischer Ajax-Features wie Drag & Drop, Lazy Loading und Comet-basierten Echtzeit-Benachrichtigungen
Auszug aus dem Buch
1.2 Ajax – Eine Einführung
Im letzten Abschnitt wurde beschrieben, dass Ajax ein Mittel ist, um das Web 2.0-Prinzip Rich User Experience umzusetzen. Nun soll erläutert werden, was Ajax überhaupt ist und welche Möglichkeiten durch die Verwendung entstehen.
In einem Interview mit Sebastian Meyen, Chefredakteuer des Java-Magazins, sagte einmal Stefano Mazzocchi, der Erfinder des Java/XML-basierenden Cocoon-Frameworks, dass die Webentwicklung die Informationstechnologie um mindestens zehn Jahre zurückgeworfen hätte, weil Entwickler nur die Möglichkeit haben, mit dem primitiven Anfrage/Antwort Modell aus den Zeiten statischer HTML-Seiten (Hypertext Markup Language) zu arbeiten ([38], S. 4). Dieses Modell zeichnet sich besonders durch folgende Eigenschaften aus:
Synchronität: Wenn eine Anfrage als Folge einer Benutzerinteraktion mit der Anwendung an den Server gesendet wurde, kann der Benutzer die Webseite solange nicht bedienen, das heißt, die Seite ist solange blockiert, bis die Antwort vom Server empfangen wurde. Die Browser-Server-Kommunikation ist für den Benutzer somit nicht transparent.
Laden der kompletten Seite: Die Antwort vom Server enthält jedes Mal die komplette HTML-Seite, alle Bilder sowie die Cascading Style Sheets (CSS), auch wenn sie nur minimale Änderungen im Vergleich zu der aktuell angezeigten Seite aufweist.
Zusammenfassung der Kapitel
0 Einleitung: Die Arbeit erläutert den Wandel hin zum Web 2.0, stellt die Relevanz des Ajax-Ansatzes dar und definiert die Zielsetzung der Entwicklung eines Prototypen für IBM Websphere Integration Developer.
1 Das Web 2.0 und Ajax: Dieses Kapitel definiert die Charakteristika des Web 2.0 und erläutert Ajax als Mittel zur Verbesserung der User Experience, illustriert durch Beispiele wie Google Maps.
2 Ajax-Grundlagen: Es werden die technischen Mechanismen der asynchronen Kommunikation, wie Hidden Frames und das XMLHttpRequest-Objekt, sowie relevante Datenformate wie XML und JSON detailliert beschrieben.
3 Untersuchung von Ajax-Bibliotheken: Eine umfassende Evaluation von fünf bekannten Frameworks wird durchgeführt, um eine fundierte Entscheidungsgrundlage für die technologische Basis des Prototypen zu schaffen.
4 OpenAjax-Allianz: Die Rolle der OpenAjax-Allianz bei der Lösung von Integrationsproblemen zwischen verschiedenen Bibliotheken wird erläutert, inklusive der Vorstellung des OpenAjax-Hubs.
5 Analyse: Der Prototyp für den Websphere Integration Developer wird analysiert, Anforderungen werden definiert und die technologische Umgebung (Dojo, Java, Rational Software Architekt) ausgewählt.
6 Dojo: Der Fokus liegt auf der Dojo-Architektur, dem ereignisbasierten Programmiermodell und der Erstellung sowie Erweiterung von Widgets innerhalb des Frameworks.
7 Design: Das Kapitel beschreibt das UI-Design und die Architektur des Human Task-Clients, inklusive der entwickelten Komponenten für die Task-Bearbeitung und das Hilfesystem.
8 Implementierung: Es werden technische Details der Implementierung erläutert, wie etwa die Kapselung der Serverkommunikation, der Einsatz von Comet für Echtzeit-Updates und die Struktur wiederverwendbarer Komponenten.
9 Zusammenfassung und Ausblick: Abschließend werden die Ergebnisse evaluiert, der Erfolg der Implementierung bestätigt und eine Einschätzung zur zukünftigen Entwicklung von Ajax und Dojo gegeben.
Schlüsselwörter
Ajax, Web 2.0, Human Tasks, Dojo Toolkit, XMLHttpRequest, Rich User Experience, JSON, Comet, Geschäftsprozesse, GUI-Design, Webanwendungen, Client-Server-Kommunikation, JavaScript, Software-Architektur, Widget-Entwicklung
Häufig gestellte Fragen
Worum geht es in der Arbeit grundsätzlich?
Die Arbeit untersucht den Ajax-Ansatz zur Entwicklung moderner Webanwendungen und realisiert einen Prototyp für die Bearbeitung von Human Tasks innerhalb des IBM Websphere Integration Developer.
Was sind die zentralen Themenfelder?
Die Schwerpunkte liegen auf der Evaluierung von Ajax-Frameworks, der asynchronen Browser-Server-Kommunikation sowie dem Design und der Implementierung wiederverwendbarer UI-Komponenten.
Was ist das primäre Ziel der Arbeit?
Das Ziel ist der Nachweis, dass durch den Ajax-Ansatz die Gebrauchstauglichkeit komplexer Webanwendungen gesteigert werden kann, wobei der Prototyp als Basis für zukünftige IBM-Produkte dienen soll.
Welche wissenschaftliche Methode wird verwendet?
Die Arbeit nutzt eine methodische Evaluierung verschiedener Softwarebibliotheken sowie einen Prototyping-Ansatz, bei dem die Entwicklung in drei iterativen Phasen erfolgt.
Was wird im Hauptteil behandelt?
Der Hauptteil umfasst die theoretischen Grundlagen von Ajax, eine umfassende Untersuchung der Bibliotheken, eine detaillierte Analyse der Systemanforderungen und die anschließende technische Implementierung.
Welche Schlüsselwörter charakterisieren die Arbeit?
Wichtige Begriffe sind Ajax, Web 2.0, Human Tasks, Dojo Toolkit, Rich User Experience, Comet und Client-Server-Architektur.
Warum wurde das Dojo Toolkit für die Umsetzung gewählt?
Dojo wurde aufgrund seiner hohen Funktionalität, des mächtigen Widget-Systems und der integrierten Unterstützung für das Comet-Protokoll ausgewählt, was für die spezifischen Anforderungen des IBM-Projekts entscheidend war.
Wie werden Änderungen der Human Tasks in Echtzeit synchronisiert?
Die Anwendung verwendet das Comet-Protokoll, welches die Verbindung zum Server offen hält, um Ereignisse serverseitig auszulösen und Clients ohne manuelles Polling zu aktualisieren.
Welche Rolle spielt die MVC-Architektur in diesem Projekt?
Die Modell-View-Controller-Architektur wurde verwendet, um die Logik strikt von der visuellen Darstellung (Widgets) zu trennen, was die Testbarkeit und Wartbarkeit des Codes maßgeblich verbessert.
- Quote paper
- Diplom-Informatiker (FH) Mehmet Akin (Author), 2007, Untersuchung von Ajax-Nutzen für Business User, Ajax-Frameworks und Prototyp-Entwicklung eines Ajax-basierten Clients für Geschäftsprozesse und ToDos (Human Tasks), Munich, GRIN Verlag, https://www.grin.com/document/81175
