Attraktive Webseiten

Transkript

1 ASP.NET PROFESSIONAL Attraktive Webseiten dank AJAX Controls und Extenders Microsoft bietet mit dem ASP.NET AJAX Control Toolkit (nachfolgend Toolkit genannt) ein Paket an, mit welchem sich die Attraktivität von ASP.NET 2.0 Anwendungen steigern und sich die Bedienung vereinfachen lässt. Dieses zusätzlich ausgelieferte, auf dem AJAX Core basierende Toolkit wird regelmäßig um neue, einsatzbereite AJAX Controls und Extenders erweitert. Der vorliegende Artikel zeigt den Umfang, die Architektur und die Anwendung von ausgelieferten Controls und Extenders. Die Entwicklung eigener Komponenten auf der Basis des Toolkits wird in einer nächsten Ausgabe aufgezeigt. Von Patrick Spieler Das Toolkit besteht aus einer Ansammlung von Beispielen (s. Abb. 1), Komponenten und Dokumentationen, welche das Entwickeln von clientseitigen ASP.NET AJAX Controls und Extenders ermöglicht. Eine Übersicht der aktuell verfügbaren Komponenten ist im Hinweisblock ASP.NET AJAX Toolkit: Verfügbare Controls und Extenders ersichtlich. Das Toolkit verfolgt verschiedene Ziele: Zugang zu AJAX-Funktionalität für ASP.NET- Entwickler ohne JavaScript-Kenntnisse Erstellung von AJAX Controls und Extenders durch die Community und Microsoft Begeisterung und Freude am Erstellen von coolen AJAX Controls zu erwecken Community-Gedanke und Community- Entwicklungsmodell (wer mitmachen will, findet im Contributor's Playbook [05] das Regelwerk) Gemäß den Vorgaben der Shared Source Initiative [02] arbeiten Entwickler von Microsoft mit Entwicklern aus aller Welt (Community) zusammen am Toolkit. Dabei werden mit den heutigen verfügbaren Möglichkeiten von JavaScript und mit Hilfe der AJAX Library und der AJAX Extension einfach zu nutzende, attraktive Controls und Extenders erstellt, getestet und publiziert. Die zugrunde liegenden Framework-Bibliotheken werden weiterhin von Microsoft umgesetzt und verteilt. Abb. 1: ASP.NET AJAX Control Toolkit Samples Die aktuellen Ergebnisse dieser Zusammenarbeit sind unter der Microsoft Open Source Hosting Webseite Codeplex [03] sowohl als Binary wie auch als Quellcode verfügbar. Die auf Basis des Toolkits erzeugten Controls und Extenders werden von der nächsten Version von Visual Studio (Orcas) vollständig unterstützt ( Drag&Drop Design Experience ), was die Einbindung zusätzlich erleichtert. Die Controls und Extenders sind mit allen gängigen Browsern (IE 6, IE 7, FireFox, Safari und 40 06/2006

2 ASP.NET AJAX CONTROL TOOLKIT ASP.NET PROFESSIONAL weitgehend Opera) kompatibel logisch, da das Toolkit auf ASP.NET AJAX basiert. Speziell wird darauf geachtet, dass die Controls und Extenders auch mit anderen AJAX Frameworks innerhalb von Seiten kombiniert werden können. ARCHITEKTUR Das Toolkit ist ein wertvoller Zusatz zum eigentlichen Kern des Microsoft AJAX Frameworks (ASP.NET AJAX Core). Es baut auf der ASP.NET AJAX Extension (serverseitige.net Assemblys) und der Microsoft AJAX Library (clientseitiges JavaScript Framework) auf (Abb. 2). Neben dem Toolkit gibt es neu auch die ASP.NET Value-Add CTPs (auch als Future CTPs bekannt), welche den Kern um weitere, zukünftige Funktionalitäten ergänzen. Diese CTPs (Community Technology Previews) stehen jedermann zum Download zur Verfügung. Der Code dafür bleibt aber weiterhin in Entwicklung und es ist offen, welche der enthaltenen Teile es in den nächsten Release schaffen. Die CTPs sind nicht dokumentiert und der Support ist allein durch die Community gegeben. Abb. 3: ASP.NET AJAX Control Toolkit Abb. 2: ASP.NET AJAX Core und Erweiterungen Neben diversen mitgelieferten Controls und Extenders beinhaltet das Toolkit verschiedene Helfer- und Basisklassen, welche das Erstellen von Controls und Extenders unterstützen und die Realisierung beschleunigen (Abb. 3). Dank vorbereiteten Projekt- und Item Templates (sowohl für C# als auch für VB.NET), welche die für die Erstellung notwendigen Referenzen und Konfigurationseinstellungen beinhalten, kann die Einbindung von Controls und Extenders rasch umgesetzt werden. Mehr über die Umsetzung eigener Komponenten können Sie in einer der nächsten Ausgaben lesen. INSTALLATION Der Einsatz des Toolkits setzt folgende Komponenten voraus: ASP.NET AJAX 1.0 RC alias AJAX Core [07] AJAX Control Toolkit [02] Nach dem Entpacken des Toolkits müssen die Datei AJAXControlExtender.vsi aus dem Unterverzeichnis AJAXControlExtender ausgeführt und die gewünschten Templates installiert werden. Die im Toolkit enthaltenen Extenders sind leider nicht sofort in der Visual Studio.NET Toolbox ersichtlich. Hierfür reicht aber ein einfaches Drag&Drop der AJAXControlToolkit.dll (aus dem Unterverzeichnis SampleWebSite\Bin) auf die Toolbox (Abb. 4). Das Installieren des Visual Studio.NET, Service Pack 1[06], ist ebenfalls empfehlenswert. ANWENDUNG DES RATING CONTROLS Bei den aktuell über 30 mitgelieferten Controls handelt es sich vorwiegend um AJAX Extenders. Die Extenders erweitern Standard ASP.NET Server Controls um Funktionalität. Im Gegensatz dazu gibt es auch eigenständige AJAX Controls, welche unabhängig von weiteren Controls existieren. Ein Vertreter davon ist das Rating Control, welches nachfolgend erläutert wird. 06/

3 ASP.NET PROFESSIONAL ASP.NET AJAX CONTROL TOOLKIT Um das Rating-Control-Beispiel zu erstellen, müssen folgende Schritte durchgeführt werden: Erstellen einer neuen AJAX Control Toolkit Web Site (File, New Web Site, My Templates) Platzieren der Bewertungsfrage, des Rating Controls <ajaxtoolkit:rating... /> sowie des Server-Rückmeldungslabels (lblresponse) auf der Webseite und nachträgliches Konfigurieren der wichtigsten Rating-Eigenschaften (s. Listing 1 und 2): Abb. 4: Registrieren der AJAX Controls innerhalb der Toolbar Das Rating Control ermöglicht es, Bewertungen von Benutzern anzufragen (Abb. 5). Im vorgestellten Beispiel soll der Benutzer vorhersagen, wie viele Tore die Schweiz im EM Final 2008 gegen Deutschland schießen wird :-) Nachdem der Benutzer die Anzahl Tore mit der Maus ausgewählt hat, wird die Information asynchron im Hintergrund an den Server übertragen und anschließend der ausgewählte Wert im Browser dank Callback und JavaScript ohne Flackern aktualisiert. MaxRating CurrentRating StarCssClass EmptyStarCSSClass WaitingStarCssClass FilledStarCssClass Höchste Anzahl der möglichen Bewertung Aktuelle Bewertung (Vorgabe) CSS-Basisklasse für Darstellung der Symbole (Höhe, Breite, Cursor) CSS-Klasse für nicht aktive Symbole (background-image) CSS-Klasse für ausgewählte Symbole während Server- Aktivität (background-image) CSS-Klasse für ausgewählte Symbole (background-image) Serverseitigen Changed-Event des Rating Controls ausprogrammieren. Im vorliegenden Beispiel wird durch ein Thread.Sleep eine längere Aktion (typischerweise das Speichern der Bewertung in die Datenbank) simuliert. Ebenfalls wird an die EventArgs das für den Client benötigte Resultat angehängt (s. Listing 3). Dies könnte auch der neu berechnete Durchschnittswert sein. Abb. 5: Rating Control 42 06/2006

4 ASP.NET AJAX CONTROL TOOLKIT ASP.NET PROFESSIONAL Listing 1: Rating Control Markup (Auszug) <div>wieviele Tore...?</div> <br /> <ajaxtoolkit:rating ID="SoccerRating" runat="server" CurrentRating="2" MaxRating="10" StarCssClass="rating" WaitingStarCssClass="green_ball" FilledStarCssClass="red_ball" EmptyStarCssClass="black_ball" OnChanged="SoccerRating_Changed"/> <asp:label ID="lblResponse" runat="server" Text="Bisher keine Antwort erhalten"> </asp:label> Listing 2: Rating CSS.rating { width: 32px; height: 32px; cursor: pointer;.green_goal {background-image: url(images/ Green_Goal.png);.black_ goal {background-image: url(images/ Black_Goal.png);.red_ goal {background-image: url(images/ Red_Goal.png); Listing 3: Rating Changed Event protected void SoccerRating_Changed (object sender, RatingEventArgs e){ System.Threading.Thread.Sleep(500); e.callbackresult = string.format ("Backend updated...{0 Tor(e) sollen es sein...", e.value); Listing 4: Rating Callback Result <script type="text/javascript"> Sys.Application.add_load(function() { $find('<%= SoccerRating.BehaviorID % >').add_endclientcallback( function(sender, e) { var a = $get('lblresponse'); a.innerhtml = e.get_callbackresult(); ); ); </script> Clientseitiges Auswerten des in Schritt 3 zurückgelieferten Resultates. Dazu wird über die AJAX Library ein Client Script Delegate registriert, welcher das Callback Resultat auf dem Client anzeigt (s. Listing 4). Abb. 6: CascadingDropDown Extender ANWENDUNG DES CASCADINGDROPDOWN Eine andere, etwas komplexere Komponente des Toolkits ist der CascadingDropDown Extender. Er erweitert die ASP.NET DropDownList, so dass über mehrere dieser Controls hierarchische Abhängigkeiten abgebildet werden können. Untergeordnete DropDowns zeigen nun noch die in dieser Konstellation möglichen Werte an (Abb. 6). Die ganze Logik inklusive des Datenbezugs ist in Services ausgelagert und wird im Hintergrund abgefragt. Im hier vorgestellten Beispiel werden zwei externe, via Internet verfügbare Webservices kombiniert: Die erste Liste zeigt verschiedene Länder an, die zweite Liste abhängig von der Auswahl des Landes entsprechende Städte. Um den CascadingDropDown Extender für dieses Beispiel zu erstellen, sind folgende Schritte durchzuführen: 1. Erstellen einer neuen AJAX Control Toolkit Web Site (File, New Web Site, My Templates) 2. Platzieren von zwei DropDownLists (DropDownList1, DropDownList2) sowie zwei CascadingDropDown Extender <ajaxtoolkit: CascadingDropDown... /> auf der Webseite und nachträgliches Konfigurieren der wichtigsten CascadingDropDown-Eigenschaften (s. Listing 5 bzw. folgende Tabelle). 3. Hinzufügen der benötigten Web-Referenzen: CountryService zum Bezug der Länderliste GlobalWeatherService zum Bezug der Städte zu einem Land 4. Ausprogrammieren der beiden Service-Methoden (hier direkt als Page-Methoden implementiert), welche die Daten von den externen Webservices beziehen und für die DropDowns aufbereitet zurückliefern. Diese müssen die folgende Signatur aufweisen: 06/

5 ASP.NET PROFESSIONAL ASP.NET AJAX CONTROL TOOLKIT TargetControlID LoadingText PromptText Category ServiceMethod ServicePath ParentControlID ID des Controls, an der der Extender angebunden werden soll. Diese Eigenschaft benötigen alle AJAX Control Extenders. Text, der während des Ladens der Daten angezeigt werden soll. Text, der bei noch nicht ausgewähltem Listeneintrag erscheint. Name der Kategorie, welche die DropDown beschreibt (wird für Auswertungszwecke als Parameter dem Webservice übergeben). Webservice-Methode, die die anzuzeigenden Daten der Liste zurückliefert. Webservice-Pfad. Muss nicht ausgefüllt werden, wenn eine Page-Methode statt eines Web Services angebunden wird. ID des Controls, das den Inhalt dieser DropDownListe einschränkt. Listing 6 - CascadingDropDown Methoden (Auszug) [WebMethod][ScriptMethod] public static CascadingDropDownNameValue[] GetCountries(string knowncategoryvalues, _ string category){ CountryService.country countryservice = _ new CountryService.country(); DataSet ds = new DataSet(); ds.readxml(new StringReader _ (countryservice.getcountries())); List<CascadingDropDownNameValue> values _ = new List<CascadingDropDownNameValue>(); foreach (DataRow rowcountry in _ ds.tables[0].rows) values.add(new _ CascadingDropDownNameValue( rowcountry[0].tostring(), _ rowcountry[0].tostring())); return values.toarray(); Listing 5: CascadingDropDown Markup (Auszug) <td>wählen Sie ein Land aus:</td> <td><asp:dropdownlist ID="DropDownList1" runat="server" /></td> <td>wählen Sie eine Stadt aus:</td> <td><asp:dropdownlist ID="DropDownList2" runat="server" /></td> <ajaxtoolkit:cascadingdropdown ID="CascadingDropDown1" runat="server" LoadingText="Loading Data..." PromptText="Bitte wählen" Category="Country" TargetControlID="DropDownList1" ServiceMethod="GetCountries" /> <ajaxtoolkit:cascadingdropdown ID="CascadingDropDown2" runat="server" LoadingText="Loading Data..." PromptText="Bitte wählen" Category="Cities" TargetControlID="DropDownList2" ServiceMethod="GetCitiesByCountry" ParentControlID="DropDownList1" /> [WebMethod] public CascadingDropDownNameValue[] GetDropDownContents( string knowncategoryvalues, string category){... Der Rückgabewert CascadingDropDownNameValue [] ist eine einfache Liste von Objekten, welche Name, Wert und optional eine boolesche Angabe, ob es sich um den Standardwert handelt, enthält. [WebMethod][ScriptMethod] public static CascadingDropDownNameValue[] GetCitiesByCountry(string _ knowncategoryvalues, string category){ string countryname = _ CascadingDropDown.ParseKnownCategoryValuesString _ (knowncategoryvalues)["country"]; GlobalWeatherService.GlobalWeather _ globalweatherservice = new _ GlobalWeatherService.GlobalWeather(); DataSet ds = new DataSet(); ds.readxml(new StringReader _ (globalweatherservice.getcitiesbycountry _ (countryname))); List<CascadingDropDownNameValue> values = _ new List<CascadingDropDownNameValue>(); if (ds.tables.count > 0){ foreach (DataRow rowglobalweather in _ ds.tables[0].rows) values.add(new _ CascadingDropDownNameValue( rowglobalweather[1].tostring(), _ rowglobalweather[1].tostring())); return values.toarray(); knowncategoryvalues enthält den aktuell ausgewählten Wert sowie dessen Kategorie. Über die Helper-Methode ParseKnownCategoryValuesString auf dem 42 06/2006

6 ASP.NET AJAX CONTROL TOOLKIT LINKS & QUELLEN [1] AJAX Control Toolkit Homepage tabid=47&subtabid=477 [2] Microsoft Shared Source Initiative resources/sharedsource/ default.mspx [3] AJAX Control Toolkit Binaries und Quellcode auf Codeplex AtlasControlToolkit [4] AJAX Control Toolkit Sample WebSite und weitere Hinweise Abb. 7: JSON Object Graph ParseKnownCategoryValuesString auf dem CascadingDropDown kann diese Zeichenkette einfach in eine StringCollection umgewandelt werden. category enthält die Kategorie, für welche Werte geliefert werden sollen. Die Implementierung ist in Listing 6 ersichtlich. Die Kommunikation zwischen den DropDownLists und dem Webserver erfolgt beidseitig im JSON-Format (JavaScript Object Notation), welches in der letzten Ausgabe genauer betrachtet wurde. Dies ist sehr schön über den Web Developer Helper (Abb. 7) ersichtlich, welcher unter anderem neu einen speziellen Viewer für das JSON-Format anbietet. Die beiden hier vorgestellten Beispiele können als komplette Solution über die Webseite von ASP.NET professional ( showcode.aspx) heruntergeladen werden. FAZIT Das Toolkit ist ein zentraler Baustein innerhalb der Microsoft AJAX-Entwicklung. Er bringt diverse kleine und größere Komponenten, welche bei der täglichen Arbeit mit ASP.NET sehr nützlich sind und bestehende oder neue ASP.NET-Anwendungen tunen lassen. Dank des Wissens von Community-Entwicklern kombiniert mit Microsoft Know-How finden sehr bedürfnisnahe Entwicklungen statt. Es wird agil auf neue Ideen und Wünsche reagiert. Die Grundlagen zur Erstellung der Komponenten (AJAX Core, AJAX Toolkit Base) bleiben bei Microsoft, was Stabilität und langfristigen Support sicherstellt. [5] AJAX Control Toolkit Contributor's Playbook AtlasControlToolkit/Wiki/View.aspx? title=toc [6] Visual Studio 2005, Service Pack 1 downloads/details.aspx? familyid=bb4a75ab-e2d4-4c96-b39d- 37baf6b5b1dc&displaylang=en [07] ASP.NET AJAX 1.0 RC LinkID=77296 [08] Web Development Helper ( ) Projects/WebDevHelper.aspx Patrick Spieler arbeitet als Senior Consultant bei der Trivadis AG. Als Trainer (MCT) und Entwickler für Microsoft- Technologien liegen seine Schwerpunkte in der Architektur und Umsetzung von Webanwendungen mit ASP.NET und AJAX. Sie erreichen ihn unter patrick.spieler@trivadis.com oder via Blog unter 06/2006