Korzystając z sieci z pewnością spotkaliście się z sytuacją, kiedy po
zarejestrowaniu się na witrynie internetowej mogliście dostosowywać jej wygląd
do swoich upodobań. Często też, użytkownicy mają możliwość stosowania
specjalnych "skórek" w obrębie jednej witryny. W przypadku, gdyby nie odpowiadał
nam standardowy wygląd strony internetowej, możemy zmienić go za pomocą
udostępnionych przez twórców aplikacji tematów. Zmieniając udostępnioną "skórkę"
możemy zmienić schemat graficzny witryny, kolor przycisków, tła, rodzaj
stosowanej czcionki i wiele, wiele innych. Najnowsza wersja ASP.NET daje twórcom
aplikacji internetowych możliwość implementacji tego mechanizmu w niezwykle
prosty sposób.
Przed rozpoczęciem pracy z mechanizmem skórek musimy mieć pewne informacje na
temat stylów CSS. W największym skrócie – mechanizm ten umożliwia twórcom
aplikacji internetowych przechowywanie informacji na temat wyglądu strony.
Przykładowo, chcąc stosować w wielu miejscach na stronie internetowej czcionkę o
danym rozmiarze, czy kolorze, nie musimy zawierać tych informacji za każdym
razem w kodzie strony. Wystarczy, że stworzymy sobie plik zawierający informacje
o wyglądzie określonych elementów witryny (w naszym przypadku będzie to
stosowana czcionka). W naszym projekcie Visual Studio wybieramy opcję: WebSite
-> Add New Item. Następnie wybieramy plik typu "StyleSheet". Po otwarciu pliku w
oknie Visual Studio możemy zmienić jego zawartość w następujący sposób:
.MyFontClass
{
font-family: Verdana;
font-size: medium;
forecolor: Blue
}
Powyżej widzimy zdefiniowaną klasę, określającą wygląd wszystkich elementów
tej klasy na stronie. Żeby zastosować tą klasę musimy zmodyfikować nasz dokument
*.aspx. Po pierwsze, musimy przekazać stronie informacje o pliku, zawierającym
zdefiniowane style. Możemy to zrobić, modyfikując nagłówek strony w następujący
sposób:
<head runat="server">
<title>Untitled Page</title>
<style type = "text/css" >
@import url("StyleSheet.css");
</style>
</head>
Oczywiście, kod ten będzie poprawny, jeżeli nasz plik, zawierający definicję
stylów, będzie nosił nazwę StyleSheet.css. Jeżeli nasz plik nazywa się inaczej,
nazwę domyślną w kodzie musimy zastąpić nazwą własną. Następnie zmodyfikujmy
zawartość strony, w następujący sposób:
<body>
<form id="form1" runat="server">
<div>
Przykładowy tekst
</div>
<div class = "MyFontClass">
Przykładowy tekst, z wykorzystaniem stylu CSS.
</div>
</form>
</body>
Po otwarciu strony, w oknie przeglądarki pojawią się dwa napisy. Drugi z
nich, wykorzystywał będzie zdefiniowaną w pliku StyleSheet.css klasę stylu.
Oczywiście, zdefiniowanych stylów nie musimy umieszczać w oddzielnym pliku.
Możemy umieścić definicje klas stylów między znacznikami <style></style> w
kodzie źródłowym strony, bądź też nawet definiować styl każdorazowo, z momencie
jego zastosowania (<font style=...>). Stworzenie centralnego szablonu umożliwia
nam jednak zastosowanie tej samej klasy na wielu formatkach wchodzących w skład
aplikacji ASP.NET. Co więcej, zmieniając jakąś z właściwości klasy, musimy to
zrobić jedynie w pliku *.css, a nie na każdej stronie wykorzystującą tą klasę.
Wróćmy teraz do tematu, wymienianego w tytule artykułu, czyli tworzenia
skórek dla naszych aplikacji. Pierwszą czynnością, którą musimy w tym celu
wykonać jest dodanie do projektu folderu: App_Themes. Robimy
to, klikając kolejno: "Website" -> "Add ASP.NET Folder" -> "Theme" w Visual
Studio. Pierwszy z naszych tematów, który utworzy się od razem z nowym
folderem, nazwijmy: “Theme_01".
Folder Theme_01, może zawierać pliki reprezentujące skórki (rozszerzenie
*.skin), pliki *.css, lub pod-foldery, zawierające na przykład pliki graficzne.
Aby podłączyć temat do strony w dyrektywie Page, musimy dodać następujący
parametr:
<%@ Page Theme="Theme_01" ... >
Spróbujmy utworzyć teraz przykładowy plik, o nazwie: DefaultSkin.skin.
Oczywiście musi się on znajdować w folderze: App_Themes\Theme_01. Dla ułatwienia
przyjąłem, że nasze skórki, zawierać będą jedynie informacje dotyczące wyglądu
obiektów typu Label. Jeżeli jednak uda ci się zrozumieć zasadę działania skórek
dla tych kontrolek, wygląd kolejnych obiektów na stronie będziesz mógł zmieniać
w analogiczny sposób.
Dodajmy do naszego pliku DefaultSkin.skin następującą linię:
<asp:label runat="server" font-bold="true"
forecolor="blue" font-size="medium" />
Teraz na każdej stronie, na której podaliśmy w dyrektywie Page nazwę naszego
tematu, wygląd kontrolek klasy Label, będzie zgodny z tym, zdefiniowanym w pliku
skórki. W podobny sposób definiować możemy wygląd wszystkich elementów
znajdujących się na formatce.
W ramach jednego tematu możemy stosować klika rodzajów wyglądu poszczególnych
typów obiektów. Przykładowo, chcąc zdefiniować dwa różne sposoby wyświetlania
kontrolli Label, do naszego pliku Default.skin, musimy dodać kolejną linię:
<asp:label SkinId = “RedObject" runat="server"
font-bold="true" forecolor="red" font-size="medium" />
W dodanej linii możemy dostrzec nowy parametr o nazwie SkinId. Służy on, do
rozróżnienia kliku różnych definicji wyglądu określonych obiektów, w obrębie
jednego tematu. W tym przypadku wszystkie kontrolki Label na naszej formatce,
będą miały w dalszym ciągu wygląd zgodny z pierwszą, dodaną przez nas linią w
pliku DefaultSkin.skin. Nie zdefiniowaliśmy tam konkretnej wartości SkinId –
aplikacja traktuje więc taką definicję wyglądu jako domyślną. Chcąc zmienić
kolor znajdujących się na formatce łańcuchów znakowych na czerwony, w kodzie
strony musimy jawnie zadeklarować, z jakiego Id skórki dana kontrolka ma
korzystać.
<asp:Label ID="Label2" runat="server" Text="Czerwony
Tekst" SkinID="RedObject" ></asp:Label>
Zazwyczaj w skład pojedynczego tematu wchodzi kilka plików, definiujących
skórki. Stosuje się przede wszystkim podziały, ze względu na typy kontrolek
(tzn. poszczególne pliki zawierają wiele definicji wyglądu poszczególnych
kontrolek), lub ze względu na wygląd (w tym przypadku każdy plik zawiera jedną
definicję wyglądu każdej kontrolki).
| Przykładowa zawartość folderu, zawierającego pliki *.skin |
| Podział ze względu na kontrolki: |
Podział ze względu na wygląd: |
| Label.skin |
Domyślne_kolory.skin |
| Calendar.skin |
Barwa_niebieska.skin |
| TestBox.skin |
Barwa_czerwona.skin |
| ... |
... |
Jak zapewnie się domyślacie, opisany powyżej mechanizm można zastosować do
umożliwienia użytkownikowi aplikacji wpływu na jej wygląd w oknie przeglądarki.
Utwórzmy w oknie Visual Studio nową formatkę, do której podepnijmy zdefiniowany
przez nas wcześniej temat, o nazwie Theme_01. Robimy to, ustawiając odpowiednią
wartość parametru: "Theme" w dyrektywie Page na formatce. Następnie na formatce
dodajemy obiekty DropDownList oraz Button. Dodajemy także elementy listy
rozwijalnej, ręcznie, lub za pomocą kreatora Visual Studio:
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="Niebieski">Niebieski</asp:ListItem>
<asp:ListItem Value=" Czerwony ">Czerwony</asp:ListItem>
</asp:DropDownList>
W tym momencie musimy jeszcze dodać obsługę zdarzenia naciśnięcia przycisku
przez użytkownika. Chcemy, by po tej czynności na stronie pojawiła się kontrolka
Label w odpowiednim kolorze. Do wyboru mamy: niebieski (domyślny), oraz
czerwony.
protected void Button1_Click(object sender,
EventArgs e)
{
Label lbl = new Label();
lbl.Text = "Przykładowy Tekst";
if
(this.DropDownList1.SelectedValue == "Czerwony")
{
lbl.SkinID = "RedObject";
this.form1.Controls.Add(lbl);
}
else
{
this.form1.Controls.Add(lbl);
}
}