ASP.NET Ajax
Die Zukunft des Atlas-Frameworks

DeveloperIT-ProjekteSoftware

Aus Microsofts Ajax-Framework Atlas wird ASP.NET Ajax, bestehend aus drei einzelnen Bestandteilen. In diesem Artikel wird das Ajax-Control-Toolkit vorgestellt, das Web-Anwendungen mit praktischen Ajax-Steuerelementen ausstattet.

Atlas wird dreigeteilt

ASP.NET Ajax

Als Scott Guthrie, der Projektmanager bei Microsoft für alle ASP.NET-Aktivitäten, am 11. September verkündete, dass Atlas fortan nicht mehr Atlas heißt, war das keine große Überraschung.
Zwar kann man dem sagenhaften Namen noch ein wenig verbunden sein, es war aber ein offenes Geheimnis, dass Atlas in der nächsten Version von ASP.NET direkt integriert sein sollte. Deswegen kommt es dann doch etwas überraschend, dass es schon Ende des Jahres das neue Produkt geben soll, sprich deutlich vor einer neuen ASP.NET-Version. Diese Beschleunigung liegt wohl an der großen Nachfrage und am Erfolg von Ajax im Allgemeinen und Atlas im Speziellen.

Was ändert sich noch? Die Website von Atlas ist jetzt unter ajax.asp.net verfügbar. Der alte URL mit Atlas im Namen führt allerdings auf dieselbe Seite. Außerdem soll aus Atlas nicht nur ein, sondern drei Produkte werden:

– die Microsoft Ajax Library mit Code auf Client-Seite, der unabhängig von ASP.NET eingesetzt werden kann
– die ASP.NET 2.0 Ajax Extensions mit serverseitigen Controls wie dem Updatepanel für ASP.NET
– das ASP.NET Ajax Control Toolkit, das es jetzt schon als separaten Download gibt und das das Hauptthema dieses Artikels ist

Weitere Änderungen passieren im Code. Das Präfix für Controls ändert sich von atlas in asp. Auch dies ist ein deutliches Zeichen für die zukünftige Integration in ASP.NET.


Das Toolkit

ASP.NET Ajax

Die aktuelle Atlas-Version ist die Community Technology Preview (CTP) aus dem Juli, an der bisher die Umbenennungsbemühungen vorbeigegangen sind. Sie muss installiert sein, um das Toolkit einsetzen zu können.

Das Toolkit selbst besteht aus einem ZIP-Archiv mit einigen Unterverzeichnissen. Entpacken Sie es in einen beliebigen Ordner. Zum Paket gehört eine SLN-Datei. Sie ist ein Visual-Studio-Projekt, das Sie direkt über Datei, Projekt öffnen starten. Sie erhalten hier unter Umständen noch eine Warnung für den Template-VSI-Projektbestandteil, der ein Template für eigene Atlas-Steuerelemente installiert. Wenn Sie das Projekt ausführen, wird die Beispiel-Site aus dem Verzeichnis SampleWebSite gestartet. Sie zeigt in der Datei setup.aspx die Steuerelemente aus dem Toolkit im Einsatz und erläutert im Detail, wie der Rest des Pakets installiert wird.

Um die Steuerelemente allein einzusetzen, müssen Sie das Projekt allerdings nicht installieren, und Sie benötigen auch nicht Visual Studio. Die Steuerelemente stehen in zwei Varianten zur Verfügung: als Quellcode im Verzeichnis AtlasControlToolkit und als Binärdatei im Verzeichnis Bin unter SampleWebSite. Um sie in Ihrem Projekt einsetzen zu können, verwenden Sie die DLL aus dem Bin-Verzeichnis. Sie können sie sich dann auch in die Toolbox integrieren.

Klicken Sie dazu mit der rechten Maustaste auf die Toolbox und wählen Sie Registerkarte hinzufügen. Geben Sie der Registerkarte einen neuen Namen, zum Beispiel Atlas. Im Dialogfenster Toolboxelemente auswählen wechseln Sie zu .NET Framework-Komponenten und wählen Durchsuchen. Dort fahnden Sie nach der DLL aus dem Bin-Verzeichnis der SampleWebSite. Wenn Sie bestätigen, sind im Dialogfeld die relevanten Elemente markiert und per Häkchen installiert. Bestätigen Sie nochmals mit OK, und Sie sehen die Steuerelemente aus dem Toolkit in der Toolbox.

Wenn Sie nicht mehr mit der Beispiel-Site arbeiten möchten, erstellen Sie eine neue Website aus der normalen Atlas-Vorlage. Dort können Sie dann die Atlas-Steuerelemente einsetzen, die Sie gerade in die Toolbox hinzugefügt haben. Beim ersten Element erhalten Sie eine Warnung, dass die Atlas-DLL kopiert wird, aber in der Vorlage bereits eine besteht. Es spielt jedoch keine Rolle, welche der beiden Sie verwenden. Neben der Atlas-DLL wird die AtlasControlToolkit.dll in das Bin-Verzeichnis der neuen Anwendung kopiert.

Wenn Sie ganz ohne Visual Studio arbeiten, fügen Sie die zwei DLLs einfach von Hand in ein Bin-Verzeichnis in Ihrer Website ein und registrieren Sie die DLL dann wie folgt in der Site:


<%@ Register Assembly= "AtlasControlToolkit" Namespace= "AtlasControlToolkit" TagPrefix="cc1" %>

Das Standard-Präfix für das Toolkit ist cc1. Das heißt, alle Elemente werden dann mit cc1 eingeleitet:





Atlas erweitern: Extender

ASP.NET Ajax

Das Atlas Control Toolkit ist auf der einen Seite eine Sammlung an Steuerelementen. Andererseits erscheint auch häufiger der Begriff Extender, sprich bei den Elementen handelt es sich um Erweiterungen bestehender Elemente. FilteredTextBox erweitert beispielsweise ein normales Textfeld um die Ajax-Filterung nach bestimmten Kriterien.

Neben den vielen sehr praktischen Elementen bietet das Atlas Control Toolkit auch noch eine umfangreiche Architektur, um bestehende Elemente zu ändern und eigene zu schreiben. Es gibt zum einen den Atlas Control Extender, der als VSI-Paket im ZIP-Archiv verfügbar ist. Diese Erweiterung klappt nur mit Visual Studio, nicht mit Visual Web Developer. Eine Anleitung zum Erstellen eigener Extender finden Sie in der beim Toolkit mitgelieferten Beispiel-Website. Dort gibt es auch nähere Informationen zum automatisierten Testen, das den Javascript-Debugging-Problemen ein wenig zu Leibe rückt.


Filter und Text

ASP.NET Ajax

Bevor Sie aber selbst Atlas-Elemente erstellen, sollten Sie sich einen Überblick über die vielen beim Atlas Control Toolkit mitgelieferten Elemente verschaffen. Zum Testen erstellen Sie eine neue Website mit der Atlas-Vorlage und verwenden dort eine ASPX-Datei.

Den Anfang machen Filtermöglichkeiten für Textfelder und Nutzereingaben. Das PasswordStrength-Control prüft, ob ein Passwort stark genug ist. Um es einzusetzen, benötigen Sie ein Textfeld, das als TextMode den Wert Password besitzt:



Als Nächstes müssen Sie das PasswordStrength-Control aus der vorher angelegten Toolbox-Sektion ziehen. Das Control kann für mehrere Passwortfelder dienen. Die einzelnen Passwortfelder werden jeweils als PasswordStrengthExtenderProperties-Element angelegt.


ID="PasswordStrength1" runat="server">
DisplayPosition="RightSide"
TargetControlID="TextBox1"
StrengthIndicatorType="Text"
PreferredPasswordLength="8"
PrefixText="Stärke: "
TextStrengthDescriptions="Schlecht; Gering;Durchschnitt;Stark;Optimal"
MinimumNumericCharacters="1"
MinimumSymbolCharacters="1"
RequiresUpperAndLowerCaseCharacters="false"/>

Über die Attribute dieses Elements lassen sich dann alle weiteren Verhaltensweisen steuern. DisplayPosition gibt an, wo neben dem Feld die Meldung erscheint, PrefixText ist der Text vor der Meldung und TextStrengthDescriptions enthält Beschreibungen für die einzelnen Bewertungen des Passworts. Die benötigte Stärke des Passworts steuern Sie über die minimale Anzahl an Zahlen, Sonderzeichen, Groß- und Kleinschreibung sowie über die Passwortlänge.

Ähnlich in der Funktionalität und gleich in der Anwendung ist der FilteredTextBoxExtender. Er filtert ein Textfeld per Javascript auf bestimmte Zeichen. Die jeweils falschen Zeichen werden automatisch entfernt – allerdings ohne Fehlermeldung. Möglich ist per Attribut FilterType das Filtern auf Zahlen (Numbers), Kleinbuchstaben (LowercaseLetters), Großbuchstaben (UppercaseLetters) und die Filterung mit eigenen Angaben (Custom). Die eigenen Angaben landen in der Eigenschaft ValidChars. Die Zeichen werden dabei einfach hintereinander geschrieben. Verschiedene Filtertypen können auch durch Kommas getrennt im FilterType angegeben werden.





Inhalte aufbereiten

ASP.NET Ajax

Inhalt des ersten Pane.


Bewegung

ASP.NET Ajax

Neben den Drag-and-Drop-Elementen bietet das Toolkit auch einen Schieberegler, den Slider. Damit lässt sich ein ebenfalls in Javascript nicht trivialer Schieberegler erstellen, der sowohl horizontal als auch vertikal ausgerichtet sein kann (Attribut Orientation). Mit Minimum und Maximum wählen Sie die Wert-Unter- und Obergrenzen für den Schieberegler, Steps bestimmt die Zahl der Schritte.

Damit der Slider korrekt dargestellt wird, verwenden die Autoren hier ein Label-Control für die Ausgabe des Schiebereglers selbst und eines für die Ausgabe der jeweils aktuellen Position des Reglers:






Für umfangreichere Animationen ist das Animation-Element enthalten. Die Konfigurationsmöglichkeiten sind so umfassend, dass es in der Dokumentation auf der Beispiel-Website eine eigene Referenz dafür gibt.


Fazit

ASP.NET Ajax

Zugegeben, Sie sollten sich gut überlegen, ob und wie man Ajax und Web 2.0 auf Websites unterbringt. Verfallen Sie auf keinem Fall dem Spieltrieb. Das Control-Toolkit von Microsoft ist in Sachen Spielen allerdings eine große Verlockung, da viele spannende Effekte schnell eingebunden werden können. Wer viel mit Javascript entwickelt hat, der weiß, wie aufwendig manche Effekte sind, und weiß auch zu schätzen, dass Microsoft sich um Browserunabhängigkeit bemüht hat und nur in wenigen Fällen – meist am Safari – gescheitert ist.