ASP.Net veebilehtede kujundamine kasutades nägusid (Veebistuudiumi materjalist)

Järgnev jutt on jällegi pärit "Andmebaasipõhiste veebirakenduste arendamine Microsoft Visual Studio 2008 ja SQL Server 2008 baasil" õppematerjalist (lk 440-442)

Üldiselt on tuntud tõde, et hea programmeerija ei ole tavaliselt hea disainer ning hea disainer ei ole enamasti hea programmeerija. Luues aga veebirakendust, on vaja, et hästi oleks tehtud nii disain kui ka funktsionaalsus. See tähendab aga seda, et ühe veebilehega tegelevad korraga kaks inimest. Juba ASP.NET esimeses versioonis oli võimalik kood ja kujundus üksteisest eraldada (aspx fail kujunduse ja paigutuse jaoks, .cs fail koodi jaoks), kuid sellel lähenemisel oli kaks nõrka kohta:

• Läbi aspx faili ei saa kujundada dünaamiliselt tekitatud objekte
• Ühtse kujunduse hoidmine on raske, kuna kujundust tuleb igas aspx failis iga kontrolli juures uuesti korrata.

Üks lahendus on kasutada vana head stiilifaili .css, kuid raamistiku poolt genereeritud HTML objektide stiiliga kujundamine on üsna raske. Raskeks teeb selle asjaolu, et genereeritud struktuurid võivad tulla väga keerulised ning aeg-ajalt on väga raske ennustada, milliseks HTML objektiks üks või teine kontroll renderdub.

Lahendusena neile probleemidele pakub ASP.NET 2.0 välja näod e. Theme’d. Ühe näo alla koondatakse hulk kujundusi, mida on mugav tervele lehele peale panna. Nägu koosneb kahte liiki kujundustest:

• nahad (skin), on mõeldud serveri kontrollide kujundamiseks
• stiilid (css), on mõeldud HTML tagide kujundamiseks

Kõik näod tuleb paigutada veebi juurikas asuvasse App_Themes kausta. Sinna tuleb teha alamkaust iga vajaliku näo jaoks. Loodud alamkaustadesse saate hakata paigutama .skin ja .css faile. Loome nt näo nimega DefKujundus ning selle alla naha nimega nahk.skin. Naha sisse saate kopeerida .aspx failist kogu kujunduse. Näiteks on meil vaja kujundust tabelivaatele ja kahele erinevale kalendrile. Sellisel juhul võiks nt nahk.skin näha välja järgmine:

<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
    <AlternatingRowStyle BackColor="Blue" />
</asp:GridView>
<asp:Calendar runat="server" BackColor="White" BorderColor="Black" 
        BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" 
        Font-Size="9pt" ForeColor="Black" Height="250px" 
        NextPrevFormat="ShortMonth" Width="330px">
    
    <SelectedDayStyle BackColor="#333399" ForeColor="White" />
    <TodayDayStyle BackColor="#999999" ForeColor="White" />
    <DayStyle BackColor="#CCCCCC" />
    <OtherMonthDayStyle ForeColor="#999999" />
    <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
    <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" 
        Height="8pt" />
    <TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" 
        Font-Size="12pt" ForeColor="White" Height="12pt" />
</asp:Calendar>
<asp:Calendar runat="server" SkinId="punaneKalender" BackColor="White" 
    BorderColor="Black" BorderStyle="Solid" CellSpacing="1" 
    Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" 
    NextPrevFormat="ShortMonth" Width="330px">
    
    <SelectedDayStyle BackColor="#333399" ForeColor="White" />
    <TodayDayStyle BackColor="#999999" ForeColor="White" />
    <DayStyle BackColor="#CCCCCC" />
    <OtherMonthDayStyle ForeColor="#999999" />
    <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
    <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="red" 
        Height="8pt" />
    <TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" 
        Font-Size="12pt" ForeColor="White" Height="12pt" />
</asp:Calendar>

Nagu näha, on nahas olevad serveri elemendid peaaegu samasugused kui .aspx lehel. Ainukeseks erinevuseks on see, et kogu funktsionaalne osa on eemaldatud, so igasugused meetodid sündmustele reageerimiseks jne. Kujundusi saame teha kahte moodi:

• peakujundus – serveri kontroll, millel puudub kujunduse ID
• spetsiaalkujundus – serveri kontroll, millele on lisatud atribuut SkinID. Vastavad SkinIDd peavad olema samad nii aspx failis kui ka .skin failis.

Kui me soovime seda nahka kasutada oma .aspx lehe kujundamisel, siis tuleb meil:

• lisada lehekülje päisesse (Page element) atribuut Theme=”DefKujundus”
• kustutada kõigilt serveri kontrollidelt kõik kujundusega seonduv
• kontrollidele, mis vajavad spetsiaalkujundust, lisame atribuudi SkinID

Tulemusena on ilus ja lihtne aspx fail, kus on ainult funktsionaalsust puudutavad määrangud.

<%@ Page Language="C#" MasterPageFile="~/tavaline.master"
         AutoEventWireup="true" CodeFile="Default.aspx.cs" 
         Inherits="_Default" Title="Minu teine leht" Theme="DefKujundus"%>
<asp:Content ID="Content3" ContentPlaceHolderID="cphSisu" Runat="Server">
    <asp:TextBox ID="txtAasta" runat="server" AutoPostBack="True" 
        OnTextChanged="txtAasta_TextChanged"></asp:TextBox><br />
    <asp:Calendar ID="Cal1" runat="server" />
    <asp:Calendar ID="Cal2" SkinID="punaneKalender" runat="server" />
    <asp:SqlDataSource ID="andmeallikas" runat="server" 
        ConnectionString="<%$ ConnectionStrings:yhendusTxt %>"
        ProviderName="<%$ ConnectionStrings:yhendusTxt.ProviderName %>" 
        SelectCommand="SELECT TOP 100 ToodeID, Nimi, Hind FROM Toode" />
    <asp:GridView ID="gwToode" runat="server" AutoGenerateColumns="true"
        DataSourceID="andmeallikas" />
</asp:Content>