Neuer Anstrich für die Website

Eine Website, ein Design: Diese Maxime gilt in Zeiten von Corporate-Design-Guidelines, die ganze Bücher füllen, gerade für Websites. Jede einzelne Seite eines Webauftritts soll bestimmte Grundelemente besitzen und auch durch ein einheitliches Layout glänzen. Dafür gibt es schon seit Jahren eine Technologie, die alle Browser zumindest in einem kleinsten gemeinsamen Nenner unterstützen: CSS (Cascading Style Sheets), eine Entwicklung des W3C (World Wide Web Consortiums), erlaubt es, in zentralen Stil-Dateien das Aussehen einer Website zu bestimmen. Grob gesagt ist es damit möglich, sowohl einzelnen HTML-Elementen einen Stil zuzuweisen als auch so genannte CSS-Stil-Klassen zu vergeben. Ein Element erhält nun das Attribut class=«Stilklasse», während in der CSS-Datei dann dieser Stilklasse bestimmte Werte zugewiesen werden wie etwa die Positionierung oder die Schriftfarbe.

Mit ASP.NET änderte sich die Art und Weise, wie Websites entwickelt werden. Auch ohne Kenntnis von HTML und JavaScript (so heisst die Skriptsprache; JScript ist der nur im Internet Explorer funktionierende Klon von Microsoft) ist es möglich, funktionsreiche Websites zu entwickeln. Das bringt Vor- und Nachteile mit sich. Die Einstiegshürde in die Technologie ist nicht so hoch, allerdings führt die Unkenntnis und Missachtung von Webtechnologien zu einigen furchterregenden Architekturen und Ansätzen im Hintergrund. Doch auch, wenn diese Diskussion ausser Acht gelassen wird: Ein einheitliches Design ist nur noch schwerlich möglich. ASP.NET bietet Web Controls an, das sind serverseitige Steuerelemente, die adaptiv in HTML (oder ein anderes Zielformat wie etwa WML) gerendert werden. Das verringert die Programmierarbeit ein wenig, doch schmälert auch die Eingriffsmöglichkeiten. Unter anderem wird es etwas schwieriger, mit Stilen zu arbeiten. Immerhin: Alle Web Controls besitzen ein Attribut CssClass, in dem der Name einer CSS-Stilklasse angegeben werden kann. Zudem unterstützen viele Web Controls spezielle Stil-Eigenschaften wie etwa ForeColor für Label-Elemente.
Doch diese Stil-Eigenschaften müssen immer wieder aufs Neue gesetzt werden, auf jeder Seite. Ein zentraler Ansatz ist schwierig beziehungsweise erfordert grosse Programmieranstrengungen. Das ändert sich mit ASP.NET 2.0 schlagartig, denn dort werden so genannte Themes unterstützt.

Der Begriff «Theme» ist eher von der Windows-Welt bekannt und bezeichnet dort das Aussehen der Windows-Oberfläche. Es gibt sogar eine Dateiendung dafür: .theme. Diese Datei enthält dann die Information, wie bestimmte GUI-Elemente dargestellt werden sollen.
Im Web funktioniert das relativ ähnlich. Erstellen Sie (beispielsweise im kostenlosen Visual Web Developer Express Edition, Download unter http://www.asp.net/vwd/) eine neue Website und erstellen Sie eine Seite mit einigen Web Controls. Zur Demonstration genügt schon ein einfaches Label-Control.

Im Hauptverzeichnis der Webanwendung wird jetzt ein Ordner namens App_Themes angelegt (in Beta 1 hiess er noch Themes, vgl. http://msdn.microsoft.com/asp.net/whidbey/beta2update.aspx). Jeder Unterordner dort ist ein eigenes Theme. Im Beispiel gibt es dort einen Ordner namens Rot und einen namens Blau. In jedem dieser Ordner befindet sich eine Themes-Datei, die allerdings nicht die Endung .theme hat, sondern .skin. Auch der Begriff «Skin» wird verwendet, um Oberflächen mit einem anderen Anstrich zu versehen. (Screen 1)
In diese Skin-Datei gehörten nun alle Web Controls, die einheitlich aussehen sollen. Die folgende Skin-Datei beispielsweise führt dazu, dass alle Label-Controls auf der Seite in Rot erscheinen.

Fehlt nur noch eines: Die Angabe, welcher Skin verwendet werden soll. Visual Web Developer Express Edition (und natürlich auch der «grosse Bruder», Visual Studio .NET 2005) bieten dafür sogar IntelliSense an. Das Geheimnis liegt in der @Page-Direktive und dessen Attribut Theme. Dort ist der Name des Theme-Verzeichnisses anzugeben.

Mit Hilfe der .skin-Datei ist es also möglich, alle Web Controls einer Website einheitlich zu layouten - für alle HTML Controls ist weiterhin CSS zuständig. Jedoch ist das bisher gezeigte Vorgehen etwas unflexibel, denn es werden im Beispiel tatsächlich alle Label-Controls rot eingefärbt. Doch auch Ausnahmen sind möglich. Die Eigenschaft SkinID kann jedem Web Control eine eindeutige Bezeichnung geben. Wird diese SkinID auch in der Theme-Datei verwendet, können so Ausnahmeregelungen geschaffen werden. Hier ein entsprechend angepasstes Label-Control:

In der Skin-Datei sorgt folgender Eintrag dafür, dass dieses Label stets gelb dargestellt wird.

Das kommt zwar nicht an die Flexibilität der Selektoren von CSS 2 heran, ist aber schon ein wichtiger Schritt hin zu einem einheitlichen Layout, das sich nicht nur auf HTML Controls beschränkt sondern sich auch auf Web Controls bezieht. (Screen 3)
Abschliessend noch der Hinweis, dass auf die Theme-Eigenschaft nicht nur Lesezugriff möglich ist, sondern sie auch geändert werden kann. Allerdings gibt es hier eine entscheidende Einschränkung: Die ist bis maximal zum Eintreten von Page_Pre-Init() möglich; ein Einsatz in Page_Init() oder gar Page_Load() scheidet also aus. Es sind also einige Tricks nötig, um die Möglichkeit zu bieten das Theme einer Seite innerhalb der Anwendung zu ändern. Sie benötigen dazu eine Auswahlliste sowie Sessions. In der Session landet der Name des zu verwendenden Themes. Da jedoch Formulardaten zu spät abgefragt werden, wird nach dem Schreiben der Session die Seite serverseitig neu geladen, damit eine Auswertung der Theme-Einstellungen in Page_PreInit() möglich ist. Hier der entscheidende Code.

Themes und Skins bieten eine Möglichkeit, ASP.NET für Websites einzusetzen, die nicht nur funktional sind, sondern auch eine gute Integration in einen Webdesign-Prozess ermöglichen. Durch den modularen Aufbau kann es auch deutlich einfacher als bei ASP.NET 1.x sein, das Layout der Seite schnell zu ändern. In Koppelung mit weiteren neuen Features von ASP.NET 2.0, etwa dem eingebauten Template-System «Master Pages», können Sie sich bei der Entwicklung der Website endlich darauf konzentrieren, was wirklich wichtig ist. Viele nervende und immer wiederkehrende Alltagsaufgaben übernimmt .NET Framework.