Eastgroup.pl

Artykuł pochodzi w serii przygotowań do egzaminu 70-562 ASP.NET.

Dzisiaj powiemy sobie o używaniu tkz. skórek, motywów. Jak zdefiniować różne typy wyglądu strony które później możemy wykorzystywać w zależności od upodobań użytkownika czy też narzuconych przez nas zasad. Można oczywiście zdefiniować na poszczególnych stronach oddzielne wyglądy itd. ale jest to podatne na błędy i byśmy powielali kod. Tutaj z pomocą przychodzą nam właśnie tytułowe “tematy” ;) Motywy poprawiają spójność naszej witryny, zaoszczędzają nam czasu są zcentralizowane przez co zmiany nie stanowią problemów. Na motyw składają się:

Skórki – skórki to pliki z rozszerzeniem .skins . Są tam wspólne ustawienia właściwości dla np. przycisków, etykiet itd.

CSS – tutaj chyba jasne. Może być on powiązany dla pojedynczej strony, master page lub całej witryny.

Grafika i inne zasoby -  tutaj jakieś wspólne zasoby, Jeśli chodzi o grafikę, może ty być np. logo firmy.

Motyw oczywiście nie musi zawierać każdego z tych trzech wyżej wymienionych elementów.

Tworzenie motywu

Motywy tworzymy w specjalnym folderze App_Themes. Folder ten jest w głównej gałęzi aplikacji. Każdy folder wewnątrz App_Themes to oddzielny motyw. I tam wrzucamy odpowiednie skórki, style itd. Jak to się ma w VS:

1. Dodajemy do projektu folder App_Themes. Klikamy w Solution Explorer prawym przyciskiem myszy, wybieramy Add Folder a następnie Themes.
2. Następnie wewnątrz App_Themes tworzymy oddzielne foldery dla motywów. Nazwa folderu jest nazwą motywu. Jak wygląda to w VS przedstawia rysunek poniżej:
   
3. Następnie dodajemy do poszczególnych tematów skórki, CSS i inne zasoby.
4. No i pozostaje wdrożenie tego na stornie. Możemy zrobić to na dwojaki sposób aplikując do dyrektywy @Page atrybut Theme lub StyleSheetTheme.

Alternatywnie możemy dodać w web.configu element <pages Theme=”themeName”> lub <pages StyleSheetTheme=”themeName”> i wtedy będzie aplikowała go każda strona.

Tworzenie skórki

Skórki pozwalają na zdefiniowanie pewnych właściwości które są wspólne dla kontrolek. Skórka o CSS różni się tym, że ustawia rzeczywiste, aktualne właściwości danej kontrolki a nie tylko zestaw standardowych właściwości html. Plik skórki/skórek należy dodać do folderu z odpowiednim motywem. Skórki możemy podzielić na dwa typy:

default skins – skórki domyślne automatycznie aplikują konkretne właściwości do wszystkich kontrolek na stronie która ma zdefiniowany dany motyw. Jeśli np. stworzymy skórkę w motywie dla kalendarza to jeżeli użyjemy kalendarza na stornie to przyjmie on wszystkie wcześniej zdefiniowane właściwości. 

Named skins – nadajemy poszczególnym ustawieniom kontrolki ID przez co potem możemy zastosować je wpisując w atrybut naszej kontrolki na stornie (ale zakręciłem) ;) Tutaj musimy pamiętać że SkinID musimy wpisać ręcznie, nie da się tego zrobić automatycznie.

Przykład kodu skórki z domyślnymi właściwościami dla przycisku i określonym ID dla etykiety poniżej:

   1: <asp:Button runat="server"

   2: BackColor="Red"

   3: ForeColor="White"

   4: Font-Name="Arial"

   5: Font-Size="9px" />

   6:  

   7: <asp:Label runat="server"

   8: SkinId="Title"

   9: Font-Size="18px" />

Dodawanie grafiki do motywu

Motywy również pozwalają na przełączanie między obrazkami. Odbywa się to dzięki skórkom. Spójrzmy na przykład w którym mam zapisane loga powiedzmy naszej firmy:

   1: //Company A’s Skin File:

   2: <asp:Image runat="server" SkinId="CompanyLogo"

   3: ImageUrl="~/App_Themes/Contoso/contoso.jpg" />

   4: //Company B’s Skin File:

   5: <asp:Image runat="server" SkinId="CompanyLogo"

   6: ImageUrl="~/App_Themes/Fabrikam/fabrikam.jpg" />

Widzimy, że SkinId jest identyczne, natomiast kontrolki różnią się adresem na jaki wskazują. I teraz wystarczy, że na stornie umieścimy kontrolkę Image następująco:

   1: <asp:Image ID="Image1" SkinID="CompanyLogo" runat="server" />

I automatycznie w zależności od motywy na stornie pojawi się różne logo :)

Dodawanie CSS do motywu

Nie będę tutaj opowiadał do czego stosujemy i po co są kaskadowe arkusze stylów. Aby dodać je do naszego motywu klikamy prawy przyciskiem myszy na jego folderze i wybieramy Add New Item. I wybieramy z dostępnych Style Sheet. Sam VS wspomaga nas przy pisaniu styli np. dzięki IntelliSense. Aby dodać styl do strony musimy dodać w jej kodzie następującą dyrektywę:

   1: <link href="SiteStyles.css" rel="themeName/stylesheet" type="text/css" />

Używanie motywów w kodzie

Motywy są przydatne do scentralizowanego zarządzania stylami w swojej aplikacji. Ale często nam przyjdzie ustawiać motyw w zależności od wcześniej ustawionych preferencji użytkownika. Wtedy często będzie trzeba w kodzie ustawiać motyw. Poniżej jest przykład który pobiera z adresu nazwę motywu a następnie go dołącza do kalendarza. Ważne żeby ustalenie motywu odbyło się w metodzie Page_PreInit();

   1: //C#

   2: Protected void Page_PreInit(object sender, EventArgs e)

   3: {

   4: switch (Request.QueryString["theme"])

   5: {

   6: case "Blue":

   7: Page.Theme = "BlueTheme";

   8: break;

   9: case "Pink":

  10: Page.Theme = "PinkTheme";

  11: break;

  12: }

  13: }

  14:  

  15: void Page_PreInit(object sender, EventArgs e)

  16: {

  17: Calendar1.SkinID = "BlueTheme";

  18: }

To tyle na dzisiaj. Miłego weekendu!