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ę.
@STRONA@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);
}
}
341f31d.png)