Upload
maciej-zbrzezny
View
2.294
Download
0
Embed Size (px)
DESCRIPTION
Dostosowanie I Personalizacja Aplikacji Web:- Strony Wzorcowe (Master Pages)- Motywy (Themes)- Web Parts
Citation preview
1
Dostosowanie i personalizacja aplikacji Web
Study Group 70-562: Customizing and Personalizing a Web Application
Autor: Maciej Zbrzezny [email protected]
http://maciej-progtech.blogspot.com/
2010-01-17
Study Group 70-562,Autor: Maciej Zbrzezny
2
Co dzisiaj w planie Mechanizm stron wzorcowych (Master Pages) Tematy, motywy (Themes) Kontrolki Web Parts
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
Study Group 70-562, Autor: Maciej Zbrzezny
3
Literatura i dalsze informacje "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/
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
4
Strony WzorcoweMaster Pages
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
5
Strony Wzorcowe (Master Pages) - czemu? Potrzeba spójnego UI, czyli zastosowanie stron wzorcowych
pozwala naszej aplikacji Web w prosty sposób utrzymać spójny wygląd i sposób obsługi.
Ciężkie życie przed wprowadzeniem mechanizmu stron wzorcowych: konieczność powielania kodu wykorzystanie iFrame dołączanie (include) fragmentów wspólnego kodu wykorzystanie mechanizmu własnych kontrolek
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
6
Cechy mechanizmu stron wzorcowych Umożliwiają centralizację wspólnych funkcjonalności, tak by
modyfikację wprowadzać w jednym miejscu Pozwalają na stworzenie jednego zestawu kontrolek i i
przypisanie go do zbioru stron (pozwala to np. na stworzenie wspólnego menu)
Zapewniają szczegółową kontrolę nad końcowym układem strony, poprzez umożliwienie kontroli nad osadzonymi kontrolkami
Zapewniają model obiektowy, który pozwala na dostosowanie stron wzorcowych z poziomu indywidualnych stron.
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
7
Strona wzorcowa Plik z rozszerzeniem .master Podobna do standardowych stron typu .aspx (zawiera kod
HTML, kontrolki, a nawet własny plik code-behind) Dziedziczy po klasie MasterPage Posiada dyrektywą @ Master (w odróżnieniu od @ Page dla
zwykłych stron) Zawiera specjalne kontrolki: ContentPlaceHolder, które
definiują miejsce wykorzystywane przez strony zawartości
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
8Strony wzorcowe - koncepcja
Nagłówek (menu)
Stopka
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nagłówek (menu)
Stopka
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
master
content
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
9
Przetwarzanie stron wzorcowych i zawartości w praktyce1. Użytkownik żąda określoną stronę zawartości poprzez
podanie URL
2. Strona jest ładowana, dyrektywa @ Page jest odczytywana, stamtąd pobierane są informacje na temat strony wzorcowej i strona wzorcowa jest odczytywana
3. W przypadku gdy żądanie określonej strony jest wykonywane po raz pierwszy, obie strony są kompilowane
4. Kontrolki strony zawartości są wstawiane do odpowiednich kontrolek (ContentPlaceHolder) strony wzorcowej
5. Rezultat poprzedniego kroku jest renderowany i przesyłany do przeglądarki klienta jako jedna strona.
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
10
Model obiektowy2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
11
Kolejność zdarzeń wykonywanych podczas generowania strony1. Content page PreInit event.
2. Master page controls Init event.
3. Content controls Init event.
4. Master page Init event.
5. Content page Init event.
6. Content page Load event.
7. Master page Load event.
8. Master page controls Load event.
9. Content page controls Load event.
10. Content page PreRender event.
11. Master page PreRender event.
12. Master page controls PreRender event.
13. Content page controls PreRender event.
14. Master page controls Unload event.
15. Content page controls Unload event.
16. Master page Unload event.
17. Content page Unload event.
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
12
Tworzenie strony wzorcowej i stron zawartości Strona wzorcowa dodawana jest poprzez:
"Add -> New Item" i wybranie: "Master Page" oraz nazwy strony wzorcowej nowo dodaną stronę wzorcową należy dostosować (podobnie jak
przypadku standardowych stron aspx możemy używać styli, tabel, kontrolek itp...), ważne jest by znajdowała się na stronie wzorcowej kontrolka typu ContenPlaceHolder.
Strony zawartości: dodawane są standardowo (jak każda strona .aspx), jednakże przy
dodawaniu należy: zaznaczyć chęć wyboru strony wzorcowej, checkbox: "Select Master Page" przy dodawaniu nowego elementu wybrać szablon: "Web Content Form" później w źródle strony dodać atrybut MasterPageFile do dyrektywy @ Page
dodanie odpowiedniej zawartości
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
13
Przywiązywanie strony wzorcowej do strony zawartości. dla jednej strony: <%@ Page Title="" Language="C#"
MasterPageFile="~/MySite.Master" %> dla projektu w pliku Web.config: <pages
masterPageFile="~/MySite.Master" /> (UWAGA: zawartość strony .aspx musi zawierać tylko elementy typu Content, bez standardowych nagłówków i ciała HTML)
dla pewnego folderu (odpowiedni plik Web.config powinien być dodany do folderu)
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
14
Dodatkowe cechy mechanizmu stron wzorcowych Ustawienia strony wzorcowej mają priorytet nad ustawieniami stron
zawartości (Przykład: ustawienie EnableViewState = true w stronie zawartości i na wartość false w stronie wzorcowej, powoduje wyłączenie mechanizmu view state)
Strona zawartości jest świadoma swojej strony wzorcowej i ma dostęp do properties i kontrolek strony wzorcowej: W przypadku properties należy w stronie dodać dyrektywę @ MasterType: <%@
MasterType VirtualPath="~/MySite.Master" %> wtedy do properties można się odwoływać z wykorzystaniem właściwości Master strony aspx.
W przypadku kontrolek można wykorzystać Master.FindControl Strony wzorcowe mogą być w sobie zagnieżdżone Można dynamicznie (z poziomu kodu, podczas działania) zmieniać stronę
wzorcową, w tym celu modyfikujemy właściwość MasterPageFile dla strony zawartości.
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
15
PrzykładUtworzymy projekt o nazwie "MyMasterPage", w którym zaprezentowane zostaną: witryna z dwoma stronami wzorcowymi użytkownik ma do wyboru z której strony wzorcowej chce
korzystać strona zawartości modyfikuje dane w kontrolkach strony
wzorcowej
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
16
Tematy, motywyThemes
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
17
Tematy, motywy - czemu? Co raz 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
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
18
Co zawiera dany temat? 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
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
19
Tworzenie tematu Należy dodać folder specjalny: App_Themes W folderze App_Themes tworzymy indywidualne foldery dla
każdego tematu, a nazwa folderu odpowiada nazwie tematu W folderze tematu dodajemy pliki skórek, arkusze styli,
obrazki, itp... Przypisujemy temat:
do strony: <%@ Page Theme="ThemeName" %> lub <%@ Page StyleSheetTheme="ThemeName" %>
do witryny w pliku Web.config: <pages Theme="ThemeName" /> lub <pages StyleSheetTheme="ThemeName" />
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
20
Tematy Globalne 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
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
21
Pliki skórek (Skin File) W celu utworzenie 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 mogą wyglądać następująco: <asp:Button
runat="server" BackColor="Red" ForeColor="White" Font-Name="Arial" Font-Size="9px" />
można 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" />
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
22
Kolejność 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.
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
23
Ustawianie Tematu programowo 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"];
}
}
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
24
PrzykładTworzymy aplikację typu Web, w której będą zdefiniowane dwa tematy (każdy będzie miał skórkę i arkusz styli), a użytkownik będzie miał możliwość wyboru który temat wybrać.
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
25
Web Parts
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
26
Web Parts - czemu? i co to jest? Wiele stron składa się z wielu komponentów, z których każdych
działa samodzielnie i oferuje pewną oderwaną funkcjonalność Użytkownicy często chcą sami decydować jako komponent i w
którym miejscu ma występować, w jakiej postaci (np. standardowej, czy zminimalizowanej), itp...
Web Parts Są komponentami, które realizują pewną fukncjonalność i mogą być
osadzone na stronie Są oparte o pewien scentralizowany framework, który zapewnia
wspólne mechanizmy zarządzania i dostosowywania. Zapewniają mechanizm katalogu
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
27
Web Parts - koncepcja
Maciek
Użytkownik ? X_
• Przygotować się do StudyGroup
• Zrobić Prezentację• Przygotować ćwiczenia
Lista zadań ? X_
Prognoza pogody ? X_
słonko
Mniej potrzebne ? X□
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
28
WebParts namespace2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
29
Baza danych personalizacjiUwaga: Mechanizm ASP.NET Web Parts wymaga bazy danych personalizacyjnych. Zapewnia to możliwość personalizowania ustawień kontrolek Web Parts. Ta baza danych (ASPNETDB) jest instalowana gdy pierwszy raz używamy mechanizmu Web Parts. Domyślnie bazuje ona na Microsof SQL Express, ale może to być też wersja profesjonalna: Microsoft SQL Server.
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
30
Web Parts Zones Kontrolki Web Parts są umieszczane na stronie w specjalnie
przygotowanych dla nich strefach. Strefy te to obiekty klasy WebPartZone. Strefy mają określony rozmiar i lokalizację na stronie. Strefy mają ustalają też pewne style, które obowiązują wszystkie kontrolki
umieszczane w danej strefie. Nazywane jest to Web Part's chrome (określa on nagłówek, menu, ramki, itd...)
Przykład: <asp:webPartManager ID="webPartManager1" runat="server"> </asp:webPartManager> <asp:WebPartZone ID="WebPartZoneTop" runat="server" HeaderText="Top Zone" style="width: 700px; height: auto"> <ZoneTemplate> <!-- jakies kontrolki --> </ZoneTemplate> </asp:WebPartZone>
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
31
Jak stworzyć kontrolkę Web Parts?
Poprzez wykorzystanie własnej kontrolki (dziedziczącej po System.Web.UI.UserControl), w tym celu: rejestrujemy kontrolkę na stronie, np.: <%@ Register
src="LogoWebPart.ascx" tagname="LogoWebPart" tagprefix="uc1" %>
dodajemy kontrolkę do jakiejś strefy, np.: <ZoneTemplate><uc1:LogoWebPart ID="LogoWebPart1" runat="server" title="Logo" /></ZoneTemplate>
Poprzez wykorzystanie istniejącej kontrolki ASP.NET, np.: <ZoneTemplate><asp:Label ID="Label1" runat="server" title="Web Part Label">Web Part from standard Label </asp:Label></ZoneTemplate>
Poprzez stworzenie własnej "custom control" i odziedziczenie po klasie WebPart.
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
32
Tryby wyświetlania BrowseDisplayMode – jest to tryb podstawowy, brak edycji DesignDisplayMode – w tym trybie można zmieniać układ
kontrolek na stronie (m.in. usuwania kontrolek, mechanizm drag&drop).
EditDisplayMode – dostęp do opcji każdej kontrolki. Wymagana strefa EditorZone, do której dodane są AppearanceEditorPart, LayoutEditorPart.
CatalogDisplayMode – umożliwia dostęp do katalogu. Wymagana strefa CatalogZone.
ConnectDisplayMode – tworzenie połączeń pomiędzy Wymagana strefa ConnectionZone.
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
33
Tryb Wyświetlania - ustawienie Tryb wyświetlania można ustawić poprzez ustawienie
właściwości DisplayMode dla dodanego na stronie WebPartManager'a.
Odpowiedni tryb najlepiej wybrać z kolekcji dostępnych trybów WebPartManager'a, kolekcja jest dostępna jako własciwość SupportedDisplayMode.manager.DisplayMode= manager.SupportedDisplayModes["Browse"];
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
34
Połączenia pomiędzy kontrolkami WebParts Dzięki połączeniom jedna kontrolka może pobierać jakieś
informacje z innej kontrolki. Połączenia mogą być:
Statyczne (używamy atrybutów ConnectionProvider i Connection Consumer)
Dynamiczne (wymagana jest Connection Zone)
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
35Edycja
Można edytować właściwości kontrolek podczas działania aplikacji
AppearanceEditorPart LayoutEditorPart PropertyGridEditorPart, ważne
atrybuty: WebBrowsable() Personalizable()
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
36
Katalog można wykorzystać katalog, z którego użytkownik wybiera
jaką kontrolkę chce dodać do strony aby wykorzystać katalog:
wystarczy tylko dodać CatalogZone następnie do tej strefy dodajemy kontrolki, które mają znaleźć się
w katalogu użytkownik może skorzystać z katalogu w trybie wyświetlania
typu katalog
2010-01-17
Study Group 70-562, Autor: Maciej Zbrzezny
37
Materiały dostępne na:http://maciej-progtech.blogspot.com/
Dziękuję za uwagę.
2010-01-17