AJAX-Technologie im Detail am Beispiel der Atlas CTP
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
AJAX-Technologie im Detail am
Beispiel der Atlas CTP
Adam Dyrbusch, Zhixuan Ding und Marc Schanne {dyrbusch|ding|schanne}@fzi.de
eren Leser wird so ein Einstieg zum
1. Motivation Vergleich der im Markt verfügbaren
Asynchronous JavaScript and XML AJAX-Rahmenwerke und Tools geboten
(AJAX) bestimmt als Buzzword derzeit und der Einsteiger findet in einem kleinen
alle Veröffentlichungen rund um die Zu- Beispiel (vgl. Abbildung 1) die Möglich-
kunft des World Wide Web. Ist es die Re- keit erste eigene Erfahrungen zu sammeln.
volutionierung des bestehenden Web, ein Da mit Nutzung der AJAX-Technologie
von Jesse James Garrett [1] und anderen ein veränderter Entwurf von Webseiten
Web-Entwicklern geprägtes Akronym, die und Präsentationsschichten geschäftlicher
Bezeichnung für ein neues Kommun- Applikationen möglich wird, ist dies die
ikationskonzept bei der Entwicklung dyn- Voraussetzung für zukunftssicheres Soft-
amischer Webseiten, eine notwendige waredesign. Diese Entwicklung erfordert,
Technik für Web 2.0 oder doch nur ein zusammen mit anderen aktuellen Hype-
alter Dynamic HTML Hut? Themen des Internets, wie z.B. der Um-
Der AJAX-Boom des letzten Jahres macht gestaltung von Geschäftssoftware-Applika-
viele Web-Nutzer etwas ratlos und dieser tionen mit Webservices, einen veränderten
technische Bericht will etwas Licht ins Softwareentwurf. Die Nutzung von ob-
Dunkel der AJAX-Technologie und die jektorientierten Konzepten und Entwurfs-
zugrunde liegenden Mechanismen und mustern bei der Entwicklung wird nochmal
Konzepte bringen. Am Beispiel des Visual deutlich, aber für eine ausführlichere
Studio 2005 Add-Ons Atlas, das von Diskussion muss auf Grund der Kürze
Microsoft als Community Technical Pre- dieses Berichts auf zukünftige Papiere ver-
view (CTP) auf die zu-künftige ASP.NET wiesen werden.
Version 3.0 bereitgestellt
wird [2], wollen wir Details
über Ideen und unter-
schiedliche Implemen-
tierungen auf Dienstgeber-
und Dienstnehmerseite er-
läutern.
Ausgehend von praktischen
Hinweisen bei der Install-
ation des Add-Ons, bietet
dieser Bericht eine
strukturierte Einführung in
die Funktionalität von AJAX Abbildung 1: Beispielanwendung mit AJAX-Möglichkeiten
mit Atlas. Der unwissende
Zauber von AJAX wird auf die
tatsächliche Umsetzung mit asynchroner
2. Integration in VS2005
Kommunikation über JavaScript mit XML- Mit dem Projekt Atlas bietet Microsoft
Daten herunter gebrochen. Dem erfahren- schon jetzt ein frei verfügbares Add-On für
1die Visual Studio 2005 Produktfamilie an, vorgeschlagen wird c:\docs\MS\Atlas_
um AJAX-Technologie in eigenen Web- doc.
Präsentationen und Web-Applikationen
In der Systemsteuerung/Verwaltung findet
nutzen zu können.
sich die Konfiguration für den Webserver
Voraussetzung für die folgende ("Internetinformationsdienste-Manager").
Beschreibung ist deshalb die erfolgreiche Hier kann die Dokumentation über den IIS
Installation einer Vollversion von verfügbar gemacht werden. Das angegeb-
Microsoft Visual Studio 2005 oder zu- ene Installationsverzeichnis muss unter
mindest die Visual Web Developer "Websites" und "Standardwebsite" als
Express Installation. Auf den Microsoft- neues virtuelles Verzeichnis registriert
Seiten für das Projekt befinden sich im werden. Als Alias kann z.B. “atlas_doku”
Bereich "Download" [3] die benötigten eingegeben werden und die Dokument-
Dateien. Für dieses Papier wird mindest- ation ist dann unter der URL
ens die Setup-Applikation "Atlas Setup - http://localhost/atlas_doku verfüg-
July CTP" und das "Atlas Control Toolkit" bar.
(mit Programmierbeispielen und Erweit-
Das "Atlas Control Toolkit" ist eine ge-
erung der Atlas-Standard-Steuerelemente)
benötigt, aber es empfiehlt sich auch die zippte Datei (AtlasControlToolkit.
Dokumentation ("Atlas Documentation"), zip), welche entpackt werden muss. Da-
sowie die angebotenen Beispielan- nach kann man die Projektdatei Atlas
wendungen zu installieren1. Vor der In- Control Toolkit.sln in Visual Studio
stallation sollte man ein Windows-Update öffnen.
durchführen, so dass MS IIS und das MS Um die Atlas Beispielanwendungen
.NET-Rahmenwerk auf dem neuesten installieren zu können, benötigt man die
Stand sind. Datei AtlasSamples.msi.
Zuerst muss Atlas (AtlasSetup.msi) Ein neues Atlas-Projekt kann jetzt in
installiert werden, dabei muss sicherge- Visual Studio mit "File | New | Web Site
stellt werden, dass beim Installationsschritt ..." und dann unter "My Templates" mit
"Install Atlas Visual Studio Project "Atlas Web Site" angelegen werden. Mit
Template" die Installation der Atlas- einem Projekt kann die Registrierung in
Projektvorlagen aktiviert bleibt. So könn- Visual Studio 2005 vervollständigt
en später Atlas-Projekte in Visual Studio werden: Nach einem Wechsel in den
erzeugt werden. In der nächsten Install- Design-Modus und dem Öffnen der
ationsmaske "Register .asbx file extension Toolbox (Strg + Alt + X) können mit der
in IIS" muss die Dateiendung ".asbx" aus- rechten Maustaste und "Add Tab" die
gewählt werde, damit der IIS-Webserver Controls von Atlas aufgenommen werden.
automatisch Webservices erkennt. Im Bei der Auswahl der Bibliothek muss die
weiteren Verlauf der Installation werden Datei "Microsoft.Web.Atlas.dll" aus
Templates & Starter Kits installiert und dem Atlas-Unterverzeichnis des Install-
"Atlas Web Application (VB)" und "Atlas ationsverzeichnisses angegeben werden.
Web Application (C#)" müssen für die Dann stehen die Atlas-Standardkompon-
Entwicklung mit VisualBasic und C# enten zur Verfügung. Genauso verfährt
aktiviert werden. man mit dem "Atlas Control Toolkit". Die
Für die Installation der Dokumentation Bibliothek AtlasControlToolkit.dll
(AtlasDocumentation.msi) kann ein befindet sich im Unterverzeichnis Atlas
beliebiges Verzeichnis ausgewählt werden, ControlToolkit\SampleWebSite\bin"
des Wurzelverzeichnisses.
1
Die Beispiele in diesem Papier sind auf den Seiten des ZfS
Karlsruhe zum Download verfügbar [4].
23. Controls im Überblick Das DragPanel**-Element ist eine Erweiter-
ung von Panel und bietet nach der Init-
In der aktuellen Version des Atlas-
ialisierung einen Bereich, der beliebig auf
Rahmenwerks werden 12 Steuerelemente
der Webseite verschoben und positioniert
installiert, die die Komplexität von dienst-
werden kann. Das Steuerelement Drop
nehmerseitigem JavaScript und ASP.NET
Shadow** bietet einen Fallschatten-Effekt
auf Webserver-Seite vereinen. Sie werden
für ein Panel. Man kann Form und Opa-
durch 21 Elemente des Toolkits erweitert
zität des Schattens anpassen. Für die Web-
und in diesem Papier werden deshalb alle
seite wird auch die Speicherung für
33 Steuerelemente2 vorgestellt und auf ihre
Positionierung und Größenänderung eines
Umsetzung hin untersucht.
Panel-Steuerelements angeboten. Das
**
Da alle Steuerelemente als Erweiterungen RoundedCorner -Steuerelement hat eine
von Objekten in ASP.NET zu verstehen ähnliche Funktionalität wie DropShadow**.
sind, werden im Folgenden die zurzeit im Es erlaubt Panel-Objekte mit Ecken in
Atlas-Rahmenwerk und Atlas-Toolkit ver- solche mit abgerundeten Ecken umzu-
fügbaren Controls über ihre Zuordnung zu wandeln.
ASP.NET strukturiert. Die ASP.NET-
DropDownList: Das CascadingDropDown**-
Steuerelemente, die für die Strukturierung
Element ist das einzige Atlas-Steuer-
verwendet werden sind: Panel, DropDown
element für das DropDownList ASP.NET-
List, BulletedList, Listbox, Checkbox, Textbox
Element. Es ermöglicht Abhängigkeiten
und Button.
zwischen mehreren Auswahllisten festzu-
Außerdem gibt es in Atlas Steuerelemente, legen. Sobald die erste Liste ausgewählt
die einem beliebigen ASP.NET-Element ist, wird durch Aufruf eines Webservices
zugeordnet werden können und beim Dienstgeber der Inhalt für abhängige
Erweiterungen mit sonstiger Funktion- folgende Listen-Objekte eingetragen.
alität, wie z.B. einen Webservice-Aufruf
BulletedList: Für das BulletedList-Element
oder eine Timer-Aktivität.
in ASP.NET bietet Atlas ein PagingBulleted
Panel: Mit Panel können sechs Atlas- List**-Steuerelement. PagingBulletedList**
Steuerelemente verwendet werden. bietet auf Dienstnehmerseite eine sortierte
CollapsiblePanel** erlaubt zusammen- Liste mit Informationen. Die Sortierung
klappbare (collapsible) Abschnitte in einer kann alphanumerisch beschrieben werden
Webseite zu definieren. UpdatePanel* teilt und das Steuerelement bestimmt die
eine Webseite in Regionen, die aktualisiert Einstellung des maximalen Index für eine
werden können, ohne die gesamte Seite zu Seite.
erneuern. UpdateProgress** stellt sicht-
Listbox: Das Atlas-Steuerelement
baren Effekt auf den Browser zur
ReorderList** ist eine Erweitung von Listbox
Verfügung, während der Inhalt einer oder
in ASP.NET. Mit ReorderList** können
mehrer UpdatePanel* Steuerelemente
Zeilen einer Liste ausgetauscht werden.
aktualisiert wird. Der Webdesigner legt
Man kann auch eine Zeile hinzufügen.
fest, welches Control für Öffnen/Schließen
Über die Postback-Funktionalität kann das
des Panel-Elements zuständig ist. Die mit
Steuerelement den Zustand des Dienst-
CollapsiblePanel** verbundene Postback-
nehmers auf dem Webserver speichern und
Fähigkeit erlaubt dem Dienstnehmer die
wieder herstellen.
automatische Zustandsspeicherung auf
dem Webserver. Mit Accordion** können Checkbox: Als Erweiterung des Checkbox-
mehrere CollapsiblePanel**-Steuerelemente Elements von ASP.NET bietet Atlas das
verwaltet und gleichzeitig benutzt werden. ToggleButton**-Objekt. ToggleButton** er-
laubt es den Zustand von einer Checkbox
2
Zur Unterscheidung werden die Elemente des
mit dem Benutzen von Bildern zu
Rahmenwerks mit einem * und die des Toolkits mit speichern.
zwei ** identifiziert.
3Textbox: Es gibt als Ergänzung zu Textbox Der Benutzer kann außerdem die Größe
in ASP.NET fünf Atlas-Steuerelemente. und die Position der anderen Steuer-
**
AutoCompleteExtender erweitert ein Text elemente einstellen. Das Steuerelement
Box-Steuerelement mit einem Verhalten, HoverMenu** wird mit einem anderen
das Inhalte automatisch vervollständigt. Steuerelement verbunden, um zusätzlichen
Das FilteredTextBox**-Objekt bietet Funkt- Inhalt in einem PopupPanel anzuzeigen.
ionalität, mit der der Benutzer nur gültigen Das Hovermenu**-Steuerelement bietet die
Text (Verifikation über einen Webservice- Postback-Funktion. PopupControl** hat eine
Aufruf) in ein Textfeld schreiben kann. ähnliche Funktionalität wie Hovermenu**.
Mit dem NumericUpDown**-Steuerelement Mit PopupControl** wird zusätzlicher Inhalt
kann man die Nummer einer Textbox in- in einem Panel angezeigt. Das Steuer-
krementieren und dekrementieren. Die element Rating** bietet für Benutzer eine
Größe des Inkrements und Dekrements ist intuitive Ranking-Möglichkeit. Der Be-
frei wählbar. Über einen Webservice kann nutzer kann die Rangliste auf ver-
auch auf das Ergebnis einer Operation auf schiedene Arten anzeigen. Mit dem
**
Dienstgeberseite zugegriffen werden. Das ResizableControl kann dem Benutzer die
PasswordStrength**-Steuerelement wird bei Möglichkeit gegeben werden, die Größe
der Eingabe eines Passworts eingesetzt. eines Steuerelements zu verändern.
Mit einem Indikator wird angezeigt, was Sonstige Funktionalität: Außerdem gibt
man weiter in der Textbox eingeben darf es 11 Atlas-Steuerelemente, die nicht
und wie viele Zeichen noch einzugeben direkt einem existierenden ASP.NET-
sind. Mit einer TextBoxWatermark** be- Steuerelement zugeordnet werden können.
kommt man für ein leeres Textfeld ein Das TimerControl* stellt einen dienst-
Wasserzeichen für den Hintergrund. nehmerbasierten Timer her, der Postbacks
Nachdem der Benutzer etwas in das Text in regelmäßigen Abständen durchführen
box-Element eingegeben hat, verschwindet
kann. Das Script ManagerProxy**-Steuer-
das Wasserzeichen. element ermöglicht verschachtelte Be-
Button: Das Atlas-Steuerelement Confirm standteile. So können Skripte und Dienste
Button** ist eine Erweitung des ASP.NET auf Seiten hinzugefügt werden, deren
Button-Objekts. Das ConfirmButton**- Elternteilelemente (wie eine Vorlagenseite
Steuerelement erlaubt dem Benutzer mit oder ein Benutzer-Steuerelement) bereits
einem Knopf (Button) oder einer Ver- ein ScriptManager* -Steuerelement enthält.
knüpfung (Link) eine Aktivität zu ver- ScriptManager* ist das Kern-Steuerelement
binden, die erst nach einem Hinweis und des Atlas-Rahmenwerks. Es verwaltet
der Bestätigung durch den Benutzer ausge- Atlas-Bestandteile, die Seitenübertragung,
führt wird. dienstnehmerseitige Anfragen und die
Antworten des Webservers auf einer
Beliebiges ASP.NET-Objekt: Es gibt
ASP.NET-Seite. Das Steuerelement Initial
sechs weitere Atlas-Steuerelemente, die bei
Data* sendet die Daten mit der ersten
beliebigen Objekten in ASP.NET als
Erweiterung verwendet werden können. Anfrage, damit die Datenquelle vom
Dienstnehmer benutzt werden kann, ohne
DragOverlayExtender* fügt Funktionalität
die Notwendigkeit, einen Callback an den
eines serverseitigen Steuerelements hinzu,
Webserver zu schicken. ProfileScript
welches es Benutzern ermöglicht, das *
Service stellt eine Komponente von
Objekt zu einer neuen Position zu
browserseitigen Profilen bereit, um auf
verschieben. AlwaysVisibleControl** ist ein
Benutzerprofile von ASP.NET zuzu-
Steuerelement, welches es ermöglicht, dass
greifen. Das Gadget* Steuerelement ist ein
bestimmte Steuerelemente immer sichtbar
Mechanismus, um einen portablen Dienst
bleiben, auch wenn der Benutzer die Seite
(Gadget) einzubinden, welcher bereits über
nach unten scrollt.
eine eigene Benutzer-Oberfläche verfügt.
Mit einem DynamicPopulate** kann der
4Benutzer den Inhalt eines Steuerelements des Atlas Rahmenwerkes zusammen mit
mittels eines Webservice- oder eines Visual Studio 2005 am Beispiel. Schließ-
entfernten Methodenaufrufs ändern. Durch lich werden in Abschnitt 4.3 die zugrunde
Verwendung des ModalPopup**-Steuer- liegende Kommunikation und Details der
elements kann man den Inhalt einer Umsetzung mit JavaScript und XML
Webseite auf modale Weise anzeigen, so erörtert.
dass der Benutzer nur mit dem modalen
Steuerelement der Seite interagieren kann, 4.1 Konzept und Funktionalität
sofern dieses aktiviert wurde. WebPart Mit Atlas-Steuerelementen wird die Ent-
*
Zone enthält WebPart-Steuerelemente, die wicklung interaktiver Webseiten mit
die Hauptbenutzeroberfläche von Anwend- AJAX-Funktionalität erleichtert.
ungen mit WebParts bilden. WebPart
Manager* fungiert als Hub oder Kontroll- Die Abbildung 2 zeigt drei Basiskonzepte
einheit einer Anwendung mit Webparts. von AJAX. Wenn der Benutzer eine
Webseite startet, erzeugt der Webserver
die Daten der
Benutzer Browser Webserver
dynamischen Seite,
WS aufrufen HTML, CSS und Java
HTTP-GET(POST)
Script für die Anzeige
Rendering
und Ausführung im
Browser.
WS präsentieren
Button klicken
Das erste AJAX-
Konzept ist rein dienst-
Aktualisierung
nehmerseitig. Der
WS präsentieren Beispiel 1 Browser sendet keine
Daten zum Webserver
Panel ziehen
Asynchrone anfragen und aktualisiert selbst
seine Anzeige.
Daten zurücksenden
WS präsentieren
Beispiel 2Das zweite Konzept
Anforderung en von
verwendet asynchrone
neuen Infos
Webservice aufrufen
Kommunikation von
Browser zu Webserver.
XML zurücksenden Beispiel 3 Diese geschieht im
WS präsentieren Hintergrund und wenn
der Browser die Daten
zum Dienstgeber
Abbildung 2: Grundkonzepte von AJAX.
schickt, generiert dieser
XML-Code und sendet
4. Umsetzung einiger nur die zu aktu-alisierenden Daten zum
Controls im Detail Browser zurück.
Ausgehend von der strukturierten Das dritte Basiskonzept für AJAX-Seiten
Einführung der Atlas-Steuerelemente wird beschreibt die Kommunikation zwischen
in diesem Abschnitt exemplarisch für Dienstgeber und Dienstnehmer mit einem
ConfirmButton**, DragOverlayExtender* und Webservice-Aufrufen aus der Webseite
DynamicPopulate** die Funktionalität und heraus. Der Browser kann durch Java
Umsetzung mit JavaScript und XML unter- Script einen Webservice aufrufen, um die
sucht. Der Unterabschnitt 4.1 stellt kurz Daten im Browser zu aktualisieren.
das Konzept und die AJAX-Funktionalität
der Controls vor. Ihre Verwendung wird Anhand von drei Atlas-Steuerelementen
an einem einfachen Beispiel demonstriert. werden diese Konzepte erläutert und ihre
Unterabschnitt 4.2 erläutert den Einsatz Verwendung mit Atlas erklärt.
5ConfirmButton** ist ein Steuerelement, ein Webservice von ASP.NET; die richtige
welches die Möglichkeit bietet, Web- Konfiguration der Datei web.config
Anwendungen mit besserer Benutzer- vorausgesetzt.
interaktion zu erstellen. Mit einem Input-
Der Inhalt der Webanwendung ist in der
Button von ASP.NET wird bei jedem
Datei Default.aspx beschrieben. Die
Bestätigen eine Anfrage zum Webserver
dienstgeberseitige Geschäftslogik befindet
geschickt, der Webserver erzeugt eine
sich in der C#-Datei Default.aspx.cs.
Antwort und schickt diese zum Browser.
Im Vergleich dazu wird von ConfirmButton** Auf der ASP.NET-Seite Default.aspx
nach dem Bestätigen vom Benutzer keine sieht man Ländervorwahlen und weitere
Anfrage zum Dienstgeber ge-schickt, Länderinformationen. Wobei man die
sondern der Inhalt wird durch ein Informationen als HTML-Seite oder als
dienstnehmerseitiges JavaScript zuerst HTML-Quelltext darstellen kann. Für
angezeigt. diese Funktionalität wird in der
DragOverlayExtender*: Durch Beispielanwendung internationale Vorwahlen
DragOverlayExtender* hat der MasterPage.master
Benutzer die Möglichkeit, die
letzten Position eines Panels ASPNETDB.MDF
auf dem Webserver asynchron
Default.aspx.cs
zu speichern. Es wird ein
Default.aspx getContentHTML
Postback an den Dienstgeber
Intra-/Internet
(contextKey)
updateHTML
geschickt, wenn der Benutzer Content(value)
das Panel neu positioniert, und
der Zustand auf dem AutoComplete
Service
Webserver gespeichert wird.
Wenn der Benutzer eine neue land
Anfrage an den Webserver
web.config
schickt, wird nicht die ganze
Webseite erneut geladen,
sondern es wird nur das Panel Abbildung 3: Komponenten der Beispielanwendung
erneuert und der letzte Zustand
Anwendung das Steuerelement
des Panels wird zurückgesendet.
DynamicPopulate** verwendet. Außerdem
DynamicPopulate**: Atlas bietet die wird ein Fenster angezeigt, um Abfrage-
Möglichkeit, einen Webservice auf dem daten unter Nutzung des DragOverlay
Server durch JavaScript synchron Extender* einzugeben. Nachdem der
aufzurufen, welcher den Inhalt eines Benutzer eine Länderbezeichnung
Steuerelements durch das zurückgegebene eingegeben hat, kann er durch einen
HTML ersetzt. Knopfdruck die Vorwahldaten abfragen.
Die Abbildung 3 stellt die Architektur der Dieser Knopf wird um die Funktionalität
Beispielanwendung dar. In der Datenbank des Steuerelements ConfirmButton*
ASPNETDB.MDF erweitert. Die Anfrage der Länder-
(im Verzeich- informationen wird erst nach einer Rück-
nis App_Data) frage beim Benutzer an den Webservice
werden Posit- geschickt. Die grafische Darstellung der
ionen ge- Benutzeroberfläche kann man der
speichert. Um Abbildung 1 entnehmen.
diese Auf-
gabe küm- 4.2 ASP.NET Darstellung
mert sich im Durch die Integration in Visual Studio
Hintergrund 2005 und die Erweiterung von ASP.NET
Abbildung 4: Eigenschaften
6bietet die Verwendung des Atlas Add-Ons Attribute beinhalten: Enabled, Target
eine komfortable Benutzeroberfläche. Es ControlID und ProfileProperty. Enabled
werden die von der ASP.NET Entwicklung steuert, ob die Funktionalität des
bekannten Sichten auf ein Website-Projekt Überlappens und der freien Beweglichkeit
unterstützt. Der Designer mit einer zu- des erweiterten Objekts aktiviert werden
sätzlichen XML-Ansicht und der Zugriff soll, oder nicht. Das Objekt, welches im
auf "code behind" und sonstige Klassen ist Browser frei beweglich sein soll, gibt man
leicht möglich. in dem Attribut TargetControlID an. Im
Abbildung 4 zeigt die Konfiguration eines Beispiel ist dieses Attribut auf Panel1
Atlas Steuerelements über Attribute und gesetzt. Das letzte Attribut, ProfileProperty,
Verknüpfungen mit .NET-Klassen. wird nur benötigt, falls die Positionen
abgespeichert werden sollen. Hier wird
Das Beispielprojekt besteht aus einer dieser Dienst verwendet. In der Datei
ASPX-Seite. Innerhalb dieser Seite wird web.config wird die Position des Panels mit
das Steuerelement ScriptManager* defin- addPanelLocation1 bezeichnet. Diese
iert, welches in jeder atlasbasierten Bezeichnung wird auch hier als Wert des
Anwendung benötigt wird. Es referenziert Attributs ProfileProperty verwendet.
automatisch die benötigten JavaScript-
DynamicPopulate** ist ein Steuerelement,
Bibliotheken. Im Beispielprojekt wird das
Attribut EnablePartialRendering verwendet welches im Beispiel den Inhalt eines
Panels (ContentPanel10) dynamisch auf-
und auf true gesetzt. Dieses Attribut spielt
grund eines Webserviceaufrufes verändert.
eine zentrale Rolle in Atlas. Es steuert die
Das Steuerelement hat ein ID- und ein
asynchrone Aktivität der Steuerelemente.
runat-Attribut. Im Kindelement Dynamic
Dies bedeutet, dass unter Verwendung von
PopulateProperties* werden die Eigen-
partiellem Rendering nur veränderte Teile
schaften festgelegt. Im Beispiel (vgl.
einer Seite an den Browser geschickt
Quelltext 2) hat das Kindelement eine ID.
werden und nicht ein komplettes Postback
In der JavaScript-Methode updateHTML
stattfindet. Auf der Seite befindet sich
Content wird über diese ID darauf
auch ein ProfileScriptService*. Durch das
zugegriffen. Bei einer Aktualisierung der
Attribut AutoSave wird im Projekt fest-
Seite können über das Attribut Clear
gelegt, dass die Zustände des DragOverlay-
ContentsDuringUpdate Inhalte aus dem Ziel-
Fensters nach jeder Änderung
abgespeichert werden. steuerelement sofort gelöscht werden; im
Beispiel ist dies deaktiviert. Über
Wie werden nun diese drei Steuerelemente PopulateTriggerControlID gibt man eventuell
in der Beispielanwendung verwendet? Drag an, ob beim Anklicken eines Steuer-
OverlayExtender* benötigt die Attribute ID elementes eine Aktualisierungsaktion
und runat, wobei das Steuerelement vom ausgeführt werden soll. Das Attribut
Dienstgeber ausgeführt wird. Das Steuer- TargetControlID gibt wieder den Bezeichner
element unterstützt in der Anwendung des Zielsteuerelements an. Im Beispiel ist
bewegliche Fenster, wobei es auf jegliche das ContentPanel10. Mit ServiceMethod legt
dienstgeberseitige Steuerelemente anwend- man fest, welcher Webservice aufgerufen
bar ist. Wie Quelltext 1 demonstriert, wird werden soll. Hier heißt der Webservice
im Beispiel das Steuerelement auf ein getContentHTML. Ferner können als
Panel (Panel1) angewandt. Das Atlas- Attribute für DynamicPopulateProperties**
Element DragOverlayExtender* beinhaltet noch ServicePath und CustomScript
ein oder mehrere Kinderelemente vom Typ angegeben werden. Damit Dynamic
DragOverlayProperties*. Diese können drei Populate** funktionieren kann, benötigt
Quelltext 1: DragOverlayExtender 7Quelltext 2: ConfirmButtonExtender und dynamicPopulateExtender
man eine JavaScript-Funktion, welche über wird bei einer Aktion des Ziel-
ein Ereignis aufgerufen wird. Die steuerelements aktiviert. Im Beispiel wird
JavaScript-Funktion ruft dann den die Frage gestellt, ob der Benutzer die
Webservice des DynamicPopulates** auf. Anfrage wirklich stellen möchte. Bejaht er
Im Beispiel heisst diese Funktion diese, so wird die Anfrage ausgeführt und
updateHTMLContent. Quelltext 3 zeigt, wie die Resultate in der Benutzeroberfläche des
diese Funktion aussieht. Diese Methode Browsers angezeigt. Andernfalls wird die
wird im Beispiel für onClick-Ereignisse Aktion nicht ausgeführt.
ausgenutzt, wenn der Benutzer einen der
Radio-Buttons anklickt. In diesem Fall 4.3 Umsetzung mit JavaScript
werden, je nachdem, welcher Radio-Button und XML
aktiviert wird, dem Benutzer die Inhalte in Nach der Vorstellung allgemeiner AJAX-
der entsprechenden Form präsentiert. Konzepte wurde die Implementierung
ConfirmButton** ist ein Steuerelement, das dieser Funktionalität in Atlas näher
steuert, ob eine bestimmte Aktion wirklich beschrieben. Aufbauend auf dem hierfür
ausgeführt werden soll. Es wird ein eingeführten Beispiel analysiert dieser
Bestätigungsfenster mit zwei Knöpfen (Ja Abschnitt die eigentliche Implementierung
und Abbrechen) angezeigt. Auch der mit JavaScript, XML und asynchroner
ConfirmButtonExtender** hat als Attribut ein Kommunikation.
ID- und ein runat-Attribut. In den Confirm
Für die Untersuchung der Dienstnehmer-
ButtonProperties** werden diese Eigen-
Dienstgeber-Kommunikation wird dabei
schaften festgelegt. Das Attribut der HTTP-Debugging-Proxy Fiddler [5]
ConfirmText gibt den Text an, welcher dem
von Eric Lawrence, sowie der Web Dev-
Benutzer im Nachrichtenfenster angezeigt
werden soll. function updateHTMLContent(value) {
TargetControlID
dient zur var behaviour = $object('DynamicPopulateProperties1');
Angabe des if (behaviour) {
Zielsteuereleme behaviour.populate(value);
}
nts. Der }
ConfirmButton**
Quelltext 3: JavaScript-Methode updateHTMLContent
8Applikation mit ver-
geben. DragOverlay
Extender* erlaubt es,
die Positionen dieser
objekt, das seine
Dienste als Web-
service anbietet. Im
.. Unterelement für
Eigenschaften kann
man über das
Attribut Profile
Property den in der
Quelltext 4: Atlas-XML in der Datei default.aspx web.config ein-
getragenen Namen
elopment Helper von Nikhil Kothari [6] der Eigenschaft angeben.
eingesetzt.
In der Beispielan-wendung (vgl. Quellcode
Außerdem konzentriert sich der folgende 1) wird so addPanelLocation1 genutzt. Beim
Absatz auf das Beispiel des Drag- ersten Aufruf der Seite default.aspx im
OverlayExtender*-Steuerelements, da hier Browser wird, wie in der Abbildung 2
die meisten AJAX/Atlas-Besonderheiten dargestellt, ein Aufruf mit HTTP-GET an
veranschaulicht werden können. Das den Dienstgeber geschickt. Dieser
vorgestellte Steuerelement ConfirmButton antwortet mit einem HTML-Dokument.
Extender** ist rein dienstnehmerseitig. Es Es ist vom Typ XHTML in der Version
ist keine Kommunikation mit dem 1.0. Damit kann man Elemente und
Dienstgeber notwendig, die Logik wird Attribute aus HTML 4.01 Transitional
durch JavaScript im Browser realisiert. verwenden und auch ältere Browser
Das Beispiel DynamicPopulate** versendet können diese Seite anzeigen. Das
bei seiner Anfrage an den Webserver Seitendokument ist aufgeteilt in: XHTML,
Daten aus einem Formular als Parameter. Skriptverweise und ein Atlas-spezifisches
Der Aufruf des Webservices getHTML XML-Skriptformat. Der Quelltext 4 zeigt
Content antwortet hierauf
mit einem HTML-String,
der in der JavaScript-
Programmlogik der Seite
weiterverwendet werden
muss.
Durch DragOverlayExten
*
der kann man einer
Webanwendung das Ver-
halten einer echten Abbildung 5: Bekanntgabe der Positionsänderung an den Dienstgeber
9schematisch die notwendigen
Skript-Referenzen, Kompon-
enten (z.B. ein Profil) und
Steuerelemente. Außerdem
werden weitere Dateien über-
Abbildung 6: Die Tabelle aspnet_Profil in ASPNETDB.MDF
tragen, auf die ein Verweis in
der Webseite default.aspx
existiert. Dies sind neben CSS- Für ein Fenster wird jeweils immer dann
Beschreibungen und Bildern auch ein asynchroner Aufruf an den Dienstgeber
JavaScript-Dokumente, die durch Atlas geschickt, wenn sich dessen Position
generiert werden (Atlas.js, ändert. Der Webservice ProfileWebService.
WebResource.axd). Dies ist ein ein- asmx wird mit der Methode SetProfile über
maliger Übertragungsprozess in einer auf HTTP-POST aufgerufen. Wie man der
AJAX-Technologien basierenden Anwend- Abbildung 5 entnehmen kann, besteht die
ung. Im klassischen HTML-Modell wurde Übertragung aus einem Aufruf im Java
als Antwort des Dienstgebers jeweils das Script Object Notation-Format (JSON) und
ganze HTML-Dokument übertragen. Im der Rumpf dieser XML-Antwort besteht
Gegensatz dazu wird in AJAX die gesamte aus {"values":{"addPanelLocation1":"345,62"}},
HTML-Darstellung der Webanwendung was die Bezeichnung des Attributs und
nur beim ersten Aufruf an den dessen Wert enthält. Der Profil-Web-
Dienstnehmer geschickt. Im weiteren service speichert diesen Wert in der
Verlauf der Sitzung werden nur die Datenbank ASPNETDB.MDF ab. Beim
aktualisierten Inhalte übertragen. Diese nächsten Start der Webanwendung wird
Anfragen an den Server geschehen hinter dieser Wert geladen. Abbildung 6 zeigt,
den Kulissen, so dass für den Benutzer der wie die Benutzeridentifikation, die
Eindruck einer „echten“ Anwendung Eigenschaftsbezeichnung, der Eigen-
entsteht und man von asynchroner schaftswert und weitere Daten gespeichert
Kommunikation spricht. werden. Als Ant-wort des Web-servers
wird ein JSON-Nullwert gesendet, der eine
erfolg-reiche
this.initialize = function() { Daten-
Sys.UI.FloatingBehavior.callBaseMethod(this, übertragung und
'initialize'); -speicherung re-
Sys.UI.DragDropManager.registerDropTarget(this); präsentiert.
Beim nächsten
var el = this.control.element; Start der Applik-
ation wird über-
var location; prüft, ob die Be-
if (_location) { nutzerdaten lokal
var numbers = _location.split(','); im Browser-
location = { x : parseInt(numbers[0]),
Cache vorhanden
y : parseInt(numbers[1]) };
sind. Falls ja,
}
werden diese
else {
location = Sys.UI.Control.getLocation(el); benutzt und
} wenn nicht, wird
dem Webservice
el.style.width = el.offsetWidth + "px"; eine Anfrage-
el.style.height = el.offsetHeight + "px"; zeichenkette mit
el.style.position = "absolute"; mn=GetProfile
Sys.UI.Control.setLocation(el, location); geschickt. Als
} Antwort erhält
Quelltext 5: Die Methode initialize in WebResource.axd 10der Dienstnehmer (wiederum in JSON) die
Positionsdaten. 6. Referenzen
In der Datei WebResource.axd wird die Nützliche Downloads und andere Be-
visuelle Komponente und ihre Position in schreibungen
der Methode initialize gespeichert. Im [1] Jesse James Garrett: Ajax: A New
Quelltext 5 sieht man, wie das als Approach to Web Applications;
JavaScript gelöst wird. Wenn das Objekt 02/2005;
_location existiert, werden seine http://www.adaptivepath.com/
Positionsdaten verwendet. Anderenfalls publications/essays/archives/
werden die voreingestellten Werte aus der 000385.php
Datei web.config eingesetzt. Am Ende der [2] Microsoft Seiten zum Atlas-Projekt;
Methode wird die Position der visuellen http://atlas.asp.net/Default.aspx
Komponente gesetzt. [3] Download-Bereich für Atlas AJAX
Setup – July CTP, Beispielanwen-
5. Fazit dungen, Dokumenation und AJAX
In der Öffentlichkeit wird viel über AJAX Control Toolkit;
gesprochen. Es stellt sich aber heraus, dass http://atlas.asp.net/default.aspx?tabid=
AJAX nur alte und bewährte Technologien 47&subtabid=471
einsetzt. Es ist keine Revolutionierung des [4] Zentrum für Softwarekonzepte (ZfS)
Web, aber auch kein alter Hut. Die rege http://zfs.fzi.de/
Diskussion über AJAX und Beispiele, wie [4] Download-Bereich für Fiddler – ein
GoogleMaps, Suggest oder Flickr, haben HTTP Debugger;
ein neues Bewusstsein für die bessere http://www.fiddlertool.com/Fiddler/
Gestaltung der Benutzeroberflächen im [5] Download-Bereich für Web Develop-
WWW, angelehnt an Maßstäbe von ment Helper – Analysetool für
Desktopanwendungen, hervorgebracht. AJAX/JavaScript;
Dadurch werden zukünftige Web- http://projects.nikhilk.net/Projects/Web
Anwendungen benutzerfreundlicher, DevHelper.aspx
flüssiger und interoperabler.
Microsoft Atlas ist eines von vielen AJAX-
Rahmenwerken für die .NET-Plattform.
Es bietet einfache Möglichkeiten zur
Erstellung von Web-Anwendungen und
beschleunigt den Entwicklungsprozess.
Jedoch nur dann, wenn man die Standard-
komponenten einsetzt. Man sollte auch
nicht vergessen, dass es sich noch um ein
„Preview“ handelt. Es werden also noch
viele Änderungen folgen. Zum Standard
soll es erst in ASP.NET 3.5 oder 4.0
werden.
11Sie können auch lesen
