Programmeren in ASP.NET/Thema's en skins

Begrippen

Een theme of thema is vergelijkbaar met een theme in Windows. Een thema is een totale lay-out voor je applicatie, dus niet alleen kleuren en lettertypes, maar ook afbeeldingen en dergelijke.

Je kan verschillende kant-en-klare themes vinden op het Internet, al dan niet tegen betaling.

Je kunt echter ook zelf thema's definiëren. Thema's worden geplaatst in de folder App_Themes. Een thema bestaat uit een subfolder in de folder App_Themes, waarin een aantal skin-bestanden staan met de extensie .skin. De naam van de subfolder is ook automatisch de naam van het thema. Een thema kan ook stylesheet (.css) bestanden bevatten, en afbeeldingen.

Een thema aanmaken

Als je zelf een thema wil maken, moet je eerst daarvoor een folder aanmaken binnen de folder App_Themes. Je kan dit doen door rechts te klikken op deze folder, en te kiezen voor "Add new theme..." Maak bijvoorbeeld een folder "Test".

Vervolgens maak je in deze folder de nodige skin-bestanden aan. De extensie moet ".skin" zijn, de naam kies je zelf.

Maak bijvoorbeeld een skin-bestand waarin de layout van knoppen ingesteld wordt:

knoppen.skin

<asp:Button runat="server" BackColor="Red" Font-Italic="True" Font-Size="Large"
    BorderWidth="0px" ForeColor="White" />

In een skin-bestand definieer je voor iedere control een opmaak, net zoals je dat in een pagina zou doen. Ook runat="server" is verplicht. Het enige dat je weg laat is de ID-eigenschap. Je kunt hierbij gebruik maken van de standaard opmaakmogelijkheden, CSS, en referenties naar afbeeldingen die je binnen een thema kunt definiëren.

Thema's gebruiken

Laten we dit thema nu gebruiken in een pagina. Maak een nieuwe pagina "thema.aspx", en voeg twee knoppen toe.

Om nu het thema in te stellen, gebruik je het Page-directief van de pagina:

<%@ Page Theme="Test" %>

Dit is alles. Alle knoppen in de pagina erven nu automatisch de instellingen van het thema over. Aan de code voor de knoppen zelf verandert niets.

thema.aspx

<%@ Page Language="VB" Theme="Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Thema</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="OK"  />
        <asp:Button ID="Button2" runat="server" Text="Cancel"  />
    </div>
    </form>
</body>
</html>

Nu kan je verder gaan en skins toevoegen voor tekstvakken, lijsten, radioknoppen, enz... Dat mag in één enkel bestand, of allemaal in aparte bestanden.

Oefeningen

Breid de skin uit met opmaak voor tekstvakken, lijsten en radioknoppen.
Maak een tweede thema aan, met een andere stijl. Maak weer voor alle controls de nodige skins (of kopieer het eerste thema, en pas het aan).

Benoemde skins (named skins)

Het vorige soort skin noemt men een default skin.

Binnen een thema kun je ook zogenaamde benoemde of named skins definiëren. Een benoemde skin zorgt ervoor dat je binnen de lay-out voor knoppen nog verschillende soorten kan hebben, bijvoorbeeld een lay-out voor een OK-knop en één voor een Annuleer-knop.

knoppen2.skin

<asp:Button Runat="server" SkinID="OK" BackColor="Green"
Font-Bold="True" Font-Size="Large" BorderWidth="0px" ForeColor="White" />

<asp:Button Runat="server" SkinID="Annuleer" BackColor="Red"
Font-Italic="True" Font-Size="Large" BorderWidth="0px" ForeColor="White" />

Hier verschil hier is dat er nu verschillende lay-outs zijn voor een knop, elk met hun eigen SkinID.

In de pagina’s bepaal je vervolgens welke knop welke skin gebruikt, zodat bijvoorbeeld de ‘terug’-knop er anders uit ziet dan een ‘selecteer’-knop. Het codefragment hieronder doet dit met twee knoppen die een SkinID uit knoppen2.skin gebruiken.

thema2.aspx

<%@ Page Language="VB" Theme="Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Thema</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="OK" SkinID="OK" />
        <asp:Button ID="Button2" runat="server" Text="Cancel" SkinID="Annuleer" />
    </div>
    </form>
</body>
</html>

Je kunt een thema ook dynamisch tijdens het uitvoeren van de pagina instellen door de Page.Theme-eigenschap in te stellen, zodat deze bijvoorbeeld afhankelijk van de gebruiker kan zijn. Je moet dit doen tijdens het Page_PreInit-event:

thema3.aspx

<%@ Page Language="VB" %>

<script runat="server">
    Protected Sub Page_Preinit(ByVal sender As Object, ByVal e As System.EventArgs)
        If (Not Request.Form("ListBox1") Is Nothing) Then
            Page.Theme = Request.Form("ListBox1")
        End If
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Thema</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        Thema:
        <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True">
            <asp:ListItem>Test</asp:ListItem>
            <asp:ListItem>Andere</asp:ListItem>
        </asp:ListBox><br />
        <asp:Button ID="Button1" runat="server" Text="OK" SkinID="OK" />
        <asp:Button ID="Button2" runat="server" Text="Cancel" SkinID="Annuleer" />
    </div>
    </form>
</body>
</html>

Merk op dat je Request.Form("ListBox1") moet gebruiken in Page_PreInit, en niet ListBox1.SelectedValue. Dit komt doordat je op dat moment nog geen properties van controls rechtstreeks kan opvragen (dat kan pas later vanaf Page_Load).

Om dit systeem goed te laten werken, moet je het nog verder uitwerken, bijvoorbeeld met behulp van cookies.

Je kan een thema ook instellen voor een ganse site. Dit gebeurt in web.config met een regel zoals de volgende (in de <system.web>-sectie):

<pages theme="Test" />

Je kan een thema voor één enkele control dan weer uitschakelen door de property EnableTheming=False in te stellen voor die control.

Thema's en CSS

Als je een stylesheet wil gebruiken voor een thema, moet je alleen een .css-bestand aanmaken binnen de juiste folder in de App_Themes folder. Je zou bijvoorbeeld een css-bestand met de naam DefaultStyle.css kunnen bewaren in de folder App_Themes\DefaultStyle. Als je dan het DefaultTheme gebruikt in een pagina, dan wordt DefaultStyle.css automatisch toegepast. Je kan nog altijd een stylesheet manueel kan instellen via het <link>-element in de <head>-tag. Je mag ook meer dan één stylesheet bestand in een thema-folder zetten. ASP.NET zal alle bestanden in die folder gebruiken, en indien nodig de styles combineren.

Thema's vergeleken met CSS-stylesheets

Thema's gelijken op CSS-stylesheets doordat ze beiden een verzameling gemeenschappelijke attributen toepassen op een pagina waarin het thema of de stylesheet wordt toegepast. Er zijn echter verschillen:

Thema's kunnen meerdere property's van een control of pagina instellen, niet alleen maar style-property's. Zo kan je met thema's bijvoorbeeld de pictogrammen in een TreeView-control instellen of de template lay-out van een GridView-control, enz...
Thema's kunnen hulpbestanden bevatten, zoals afbeeldingen.
Thema's werken niet in cascade zoals stylesheets. Thema-instellingen overschrijven bijvoorbeeld altijd de lokale instellingen in de pagina. Als je bijvoorbeeld een knop gebruikt met ForeColor="Red", en in het thema staat dat knoppen blauwe tekst hebben, dan heeft dit laatste voorrang (behalve als de knop ingesteld staat met EnableTheming=False).
Thema's kunnen verwijzen naar stylesheets. De stylesheet-definities worden dan toegepast samen met alle andere instellingen in het thema.

Server-side styles

Instellingen in een thema kunnen niet overschreven worden in een pagina.

Een thema kan ook gebruikt worden als een server-side style. In dit geval kunnen de instellingen wel overschreven worden door bepaalde controls in de pagina. In dit geval gebruik je niet het Theme-attribuut van de pagina, maar wel het StyleSheetTheme-attribuut:

<%@ Page StyleSheetTheme="wikibooks" %>

Ook dit kan ingesteld worden voor een ganse site. Dit gebeurt in web.config met een regel zoals de volgende (in de <system.web>-sectie): <pages styleSheetTheme="wikibooks" />

Je kan zelfs beide combineren, zowel een StyleSheetTheme-attribuut als een Theme-attribuut. De volgorde van toepassing is dan als volgt:

Eerst wordt het StyleSheetTheme toegepast
Dan worden de instellingen van de individuele controls toegepast, waarbij eventueel overeenkomstige instellingen van het StyleSheetTheme overschreven worden.
Tenslotte wordt het Theme toegepast, waarbij eventueel overeenkomstige instellingen van het StyleSheetTheme en individuele controls overschreven worden.

StyleSheetThemes worden ondersteund in Visual Studio voor bepaalde controls. Als je de optie "Auto Format..." vindt in de smart tag, dan kan je via die optie een StyleSheetTheme selecteren.

Je kan extra thema's downloaden van: http://msdn.microsoft.com/asp.net/reference/design/templates.

Oefening

Je verkoopt pizza's, die je aan huis bestelt. Maak een toepassing bestaande uit 4 stappen. Gebruik hiervoor één enkele pagina met panels. Je kan ook de MultiView-control gebruiken.
1. De gebruiker vult het aantal in voor pizza's. Geef keuze tussen 3 soorten.
2. De gebruiker vult het aantal in voor drank. Geef keuze tussen 3 soorten drank.
3. De gebruiker geeft zijn naam en adres in.
4. Het resultaat toont een samenvatting van de bestelling.
Maak 2 thema's aan en test ze uit.
Voeg een profiel toe en zorg dat de keuze van het thema in het profiel bewaard blijft. Dit gaat het gemakkelijkst als je een aparte pagina maakt om het thema te kiezen en in het profiel te bewaren.
Zet ook de naam en het adres in het profiel, en zorg ervoor dat dit vanzelf in de 3e stap verschijnt als het gebruikersprofiel al bestaat.

← Personalisatie en profielen

Programmeren in ASP.NET

WebParts →