Tematy, motywy w ASP.NET (Themes) [PL]

Tym razem na warsztat wzięty zostanie kolejny mechanizm w ASP.NET, a mianowicie coś co można tłumaczyć jako Tematy, Motywy lub po prostu z angielskiego: "Themes".

Notka: Niniejsze opracowanie powstało w oparciu o następujące źródła: "MCTS Self-Paced Training Kit (Exam 70-562): Microsoft .NET Framework 3.5—ASP.NET Application Development", Autorzy: Mike Snell; Glenn Johnson; Tony Northrup; and GrandMasters, Wydawnictwo: Microsoft Press, 2009 "Microsoft Visual C# 2005 Księga eksperta", Autor: Kevin HoffMan, Wydawnictwo: Helion, 2007 http://msdn.microsoft.com/

Zacznijmy może od odpowiedzi na pytanie skąd wziął się ten mechanizm? Ano, coraz więcej witryn chce umożliwiać użytkownikowi dostosowanie wyglądu witryny do jego upodobań. 

• Najczęściej jest to określane mianem (tematu, motywu, skórki, kompozycji, ...)
• Zwykle wykorzystywane są do tego różne arkusze styli (CSS)

Aby zapewnić spójny mechanizm obsługi motywów (i aby programista nie musiał "ręcznie" kodować silnika zmian np. arkusza stylu) prowadzono w .NET 2.0 tzw. "Themes".

Co zawiera dany temat/motyw?

• Skórkę (Skin) - plik z rozszerzeniem .skin, który zawiera ustawienia właściwości dla kontrolek
• Kaskadowy arkusz styli (CSS)
• Obrazki oraz inne zasoby

Tworzenie tematu

1. Należy dodać folder specjalny: App_Themes
2. W folderze App_Themes tworzymy indywidualne foldery dla każdego tematu, a nazwa folderu odpowiada nazwie tematu
3. W folderze tematu dodajemy pliki skórek, arkusze styli, obrazki, itp...
4. Przypisujemy temat:
• do strony: <%@ Page Theme="ThemeName" %>lub <%@ Page StyleSheetTheme="ThemeName" %>
• do witryny w pliku Web.config: <pages theme="ThemeName" /> lub <pages StyleSheetTheme="ThemeName" />
5. ASP.NET wspiera także możliwość wykorzystania tzw. tematów globalnych (Global Themes)
• wszystkie strony na danym serwerze mogą wykorzystywać ten sam temat, mieć ten sam wygląd, itp...
• w tym celu należy umieścić temat w jednym z katalogów: 
• %windows%\Microsoft.NET\Framework\version\ASP.NETClientFiles\Themes
• IISRootWeb\aspnet_client\system_web\version\Themes
• Uwaga: należy pamiętać, że ViusalStudio nie rozpoznaje tematów globalnych, ale później w przeglądarce wyświetlane są prawidłowo

Zajmijmy się teraz plikami skórek (Skin Files),w celu utworzenia pliku skórki dodajemy plik typu Skin. Skórki mogą być:

• domyślne - określający wygląd wszystkich kontrolek pewnego typu
• nazwane - zawierają atrybut SkinId, dzięki któremu możemy kontrolować przypisanie ustawień tylko pewnym kontrolkom

Przykładowe ustawienia zawarte w skórce, mogą wyglądać następująco: <asp:Button runat="server" BackColor="Red" ForeColor="White" Font-Name="Arial" Font-Size="9px" />
Można również dodawać obrazki do tematu, wtedy w pliku skórki pojawia się np. wpis: <asp:Image ImageUrl="~/App_Themes/Theme1/logo.png"  SkinId="Logo" runat="server" />, wtedy na stronie wystarczy wpisać: <asp:Image ID="Image1" SkinID="Logo" runat="server" /> Przyjrzyjmy się kolejności w nadawaniu atrybutów dla kontrolek (od najważniejszego):

1. Atrybut Theme w dyrektywie @ Page
2. Element <pages theme="ThemeName" /> w pliku Web.config
3. Atrybuty lokalne kontrolek
4. atrybut StyleSheetTheme w dyrektywie @ Page
5. Element <pages StyleSheetTheme="ThemeName" /> w pliku Web.config

Przykład: Ustawienie wyglądu przy pomocy <pages StyleSheetTheme="ThemeName" /> może zostać nadpisane przez nadanie kontrolce lokalnych atrybutów.
Motyw można też ustawić z poziomu kodu programu. Najlepiej zrobić to w obsłudze zdarzenia Page_PreInit, ustawiając właściwość Page.Theme lub Page.StyleSheetTheme, np.:

  protected void Page_PreInit(object sender, EventArgs e)
  {
    if (Session["theme"] != null)
    {
      Page.Theme = (string)Session["theme"];
    }
  }

Na dziś to już wszystko, mam nadzieję że udało mi się przybliżyć mechanizm motywów w ASP.NET. W następnej części pojawi się przykład do dzisiejszej teorii.