A A+ A++  | Aussehen  | Anmelden

StyleSwitcher

Inhalt

Was ist der StyleSwitcher?

Der StyleSwitcher ist ein ASP.NET Server Control das es ermöglicht, die Stylesheets einer Website on-the-fly auszutauschen. Das Control rendert automatisch den clientseitigen Javascript Code, der die Stylesheets auf der Clientseite austauschen kann. Somit geschieht der Wechsel blitzschnell - rein clientseitig (Browser lädt im Hintergrund vom Server nach) - und ohne ein PostBack zu verursachen.

Falls kein Javascript verfügbar ist, wird mit Url GET Parametern (QueryString) gearbeitet, um mithilfe eines Neuladens der Seite, die jeweiligen Stylesheet zu laden.
Wenn das Control auf einer Seite eingesetzt wird, die auch mit GET Parametern arbeitet, werden diese beibehalten, dafür sorgt eine Hilfsmethode aus der WebTools Sammlung.

Das StyleSwitcher Control speichert client- und serverseitig den Namen des aktivierten Stylesheets in ein Cookie. So hat der Benutzer beim nächsten Seitenbesuch wieder das vorher aktive Stylesheet aktiv.

Als Demonstration dient unter anderem diese Website, zuoberst im Browserfenster kann ein Style ausgewählt werden.

Anmerkung: Dieses Control nutzt Features von ASP.NET 2.0 und wurde auch dafür konzipiert!

Die Installation

  1. StyleSwitcher.bin Datei in das bin Verzeichnis deiner Webanwendung kopieren
  2. Referenz zur StyleSwitcher.bin Datei erstellen

Benutzung

  1. Registrierung des StyleShow Handlers in der web.config
  2. Angabe der benötigten Eigenschaften (ApplicationName, BasePath, [ActiveCssClass], [RenderingMode])
  3. Datenquelle an das Control binden, oder deklerativ über die Items Collection StyleSheets notieren

Punkt 1

Für die StyleShow sowie auch das abrufen einer leeren CSS Datei wird der StyleShow Handler benutzt, der mit dem Control ausgeliefert wird.
Dazu muss der Bereich <httpHandlers> wie folgt um einen Eintrag erweitert werden (Siehe auch: Anleitung im Blog).
Es ist hierbei wichtig, das der Name des Handlers auf StyleShowHandler.axd lautet, da dieser intern auch so hardcodiert ist. 

    
        <?xml version="1.0"?>
        <configuration>
          <system.web>
            <httpHandlers>
              <add verb="GET" path="StyleShowHandler.axd" type="t4m.Controls.StyleShowHandler"/>
            </httpHandlers>
          </system.web>
        </configuration>

Punkt 2

Das Control benötigt mindestens folgende Eigenschaften, um arbeiten zu können:

ApplicationName
Eine eindeutige Zeichenfolge um Kollisionen von Cookies auf dem gleichen Domain zu vermeiden.
BasePath
Den relativen Pfad zu den Stylesheet Dateien.

Folgende Eigenschaften sind alternativ:

[ActiveCssClass]
Die CSS Klasse, die einem aktiven Menüpunkt (Stylesheet Auswahlmenü) zugewiesen wird (Per Javascript und clientseitig).
[RenderingMode]
Ein Enumerationswert (List / DropDown / Combined), der angibt ob das Control als Liste, als DropDown oder kombiniert gerendert werden soll.
Standardwert: List.

Folgend eine Beispielkonfiguration: 

    
        <t4m:StyleSwitcher ID="styleSwitcher"
                    ApplicationName="PeterBucher"
                    BasePath="style"
                    ActiveCssClass="active"
                    RenderingMode="List"
                    runat="server">
                        <Items>
                            <asp:ListItem Text="Text" />
                            <asp:ListItem Text="Test" Value="test.css" />
                            <asp:ListItem Text="Default" Value="default.css" />
                            <asp:ListItem Text="Simple" Value="simple.css" />
                        </Items>
        </t4m:StyleSwitcher>

Punkt 3

Das StyleSwicher Control erbt von ListControl und kann daher - wie bspw. von DropDownList gewohnt - per DataSource gefüttert werden.
Dabei ist DataTextField (Text) jeweils der Titel des Styles und DataValueField (Value) der Dateiname des Stylesheets.

Bei Punkt zwei ist die Verwendung des deklerativen Weges über die <Items> Collection zu sehen.
Genau so kann irgend eine Datenquelle eingespeisen und durch die Zuordnung von den zwei Feldern (DataText- / DataValueField) zugeordnet werden.
Auch möglich ist die Einspeisung von ListItems über den Code (C# / VB.NET).
Die Vorgehensweise ist identisch mit den bekannten ASP.NET Controls wie bspw. DropDownList.

Features

  • Mehrere Möglichkeiten zur Datenabfüll- und Bindung
  • Clientseitige Umschaltung als Komfortfunktion, wenn verfügbar. Falls kein Javascript verfügbar, besteht immer noch die volle Funktionalität.
  • Leerer Value Wert eines Eintrags ergibt eine Text Versions Ansicht der Seite.
  • Rendert eine ungeordnete Liste, unformatiert mit Links als Anker Tags. Semantisch korrekt und extrem flexibel mit CSS zu formatieren. Die Links bestehen aus einer "href"-Angabe und einem Javascript Aufruf. Wenn der Javascript Aufruf erfolgreich war, wird der Link aussen vor gelassen. Ohne Javascript wird die Seite neu geladen und GET Parameter bleiben erhalten.

StyleShow

Aus der Möglichkeit CSS ohne Seitenneuladen zu empfangen, kam mir die Idee das CSS nur schrittweise an den Browser zu senden.
So baut sich das Design langsam auf, was einen interessanten Effekt erzielt.
Dabei kann der Intervall für den Wechsel und die Teilstückzahl der CSS Datei angegeben werden.

Das StyleShow Feature ist experimentell und standardmässig deaktiviert, durch die Eigenschaft EnableStyleShow kann das Feature aktiv geschalten werden.

Download

Ich biete den StyleSwicher & StyleShow in zwei Versionen an.
Entweder als DLL-Datei, die direkt in einer Anwendung genutzt werden kann, oder aber als Quellcode.