Dostosowanie I Personalizacja Aplikacji Web: - Strony Wzorcowe (Master Pages) - Motywy (Themes) - Web Parts

1. Dostosowanie i personalizacja aplikacji Web Study Group 70-562: Customizing and Personalizing a Web Application Autor: Maciej Zbrzezny maciejzbrzezny@gmail.com http://maciej-progtech.blogspot.com/ 2010-01-17 Study Group 70-562, Autor: Maciej Zbrzezny 1

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 2

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 3

4. Strony Wzorcowe Master Pages 2010-01-17 Study Group 70-562, Autor: Maciej Zbrzezny 4

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 5

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 6

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 7

8. Strony wzorcowe - koncepcja Nagłówek (menu) Nagłówek (menu) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Stopka master Stopka Lorem ipsum dolor sit amet, consectetur adipiscing elit. content 2010-01-17 Study Group 70-562, Autor: Maciej Zbrzezny 8

9. Przetwarzanie stron wzorcowych i zawartości w praktyce Użytkownik żąda określoną stronę zawartości poprzez podanie URL Strona jest ładowana, dyrektywa @ Page jest odczytywana, stamtąd pobierane są informacje na temat strony wzorcowej i strona wzorcowa jest odczytywana W przypadku gdy żądanie określonej strony jest wykonywane po raz pierwszy, obie strony są kompilowane Kontrolki strony zawartości są wstawiane do odpowiednich kontrolek (ContentPlaceHolder) strony wzorcowej 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 9

10. Model obiektowy 2010-01-17 Study Group 70-562, Autor: Maciej Zbrzezny 10

11. Kolejność zdarzeń wykonywanych podczas generowania strony Content page PreInit event. Master page controls Init event. Content controls Init event. Master page Init event. Content page Init event. Content page Load event. Master page Load event. Master page controls Load event. Content page controls Load event. Content page PreRender event. Master page PreRender event. Master page controls PreRender event. Content page controls PreRender event. Master page controls Unload event. Content page controls Unload event. Master page Unload event. Content page Unload event. 2010-01-17 Study Group 70-562, Autor: Maciej Zbrzezny 11

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 12

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 13

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 14

15. Przykład Utworzymy 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 15

16. Tematy, motywy Themes 2010-01-17 Study Group 70-562, Autor: Maciej Zbrzezny 16

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 17

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 18

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 19

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%icrosoft.NETrameworkersionSP.NETClientFileshemes IISRootWebspnet_clientystem_webersionhemes 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 20

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 21

22. Kolejność w nadawaniu atrybutów dla kontrolek (od najważniejszego) Atrybut Theme w dyrektywie @ Page Element <pages Theme="ThemeName" /> w pliku Web.config Atrybuty lokalne kontrolek atrybut StyleSheetTheme w dyrektywie @ Page 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 22

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 23

24. Przykład Tworzymy 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 24

25. Web Parts 2010-01-17 Study Group 70-562, Autor: Maciej Zbrzezny 25

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 26

28. Zrobić Prezentację

29. Przygotować ćwiczeniaLista zadań ? X _ Prognoza pogody ? X _ Mniej potrzebne ? X □ słonko 2010-01-17 Study Group 70-562, Autor: Maciej Zbrzezny 27

30. WebParts namespace 2010-01-17 Study Group 70-562, Autor: Maciej Zbrzezny 28

31. Baza danych personalizacji Uwaga: 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 29

32. 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 30

33. 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 31

34. 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 32

35. 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 33

36. 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 34

37. Edycja 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 35

38. 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 36

39. Materiały dostępne na:http://maciej-progtech.blogspot.com/ Dziękuję za uwagę. 2010-01-17 Study Group 70-562, Autor: Maciej Zbrzezny 37