Dostosowanie I Personalizacja Aplikacji Web
Download as pptx, pdf0 likes1,550 views
Dostosowanie I Personalizacja Aplikacji Web: - Strony Wzorcowe (Master Pages) - Motywy (Themes) - Web Parts
![Ustawianie Tematu programowoNajlepiej 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-17Study Group 70-562, Autor: Maciej Zbrzezny23](https://image.slidesharecdn.com/dostosowanieipersonalizacjaaplikacjiweb-100121155437-phpapp01/85/Dostosowanie-I-Personalizacja-Aplikacji-Web-23-320.jpg)
![Tryb Wy?wietlania - ustawienieTryb 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-17Study Group 70-562, Autor: Maciej Zbrzezny33](https://image.slidesharecdn.com/dostosowanieipersonalizacjaaplikacjiweb-100121155437-phpapp01/85/Dostosowanie-I-Personalizacja-Aplikacji-Web-35-320.jpg)
Dostosowanie I Personalizacja Aplikacji Web
- 1. Dostosowanie i personalizacja aplikacji Web Study Group 70-562: Customizing and Personalizing a Web ApplicationAutor: Maciej Zbrzezny maciejzbrzezny@gmail.comhttp://maciej-progtech.blogspot.com/2010-01-17Study Group 70-562,Autor: Maciej Zbrzezny1
- 2. Co dzisiaj w planieMechanizm stron wzorcowych (Master Pages)Tematy, motywy (Themes)Kontrolki Web Parts2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny2
- 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, 2007http://msdn.microsoft.com/? 2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny3
- 4. Strony WzorcoweMaster Pages2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny4
- 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 koduwykorzystanie iFramedo??czanie (include) fragment¨®w wsp¨®lnego koduwykorzystanie mechanizmu w?asnych kontrolek2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny5
- 6. Cechy mechanizmu stron wzorcowychUmo?liwiaj? centralizacj? wsp¨®lnych funkcjonalno?ci, tak by modyfikacj? wprowadza? w jednym miejscuPozwalaj? 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 kontrolkamiZapewniaj? model obiektowy, kt¨®ry pozwala na dostosowanie stron wzorcowych z poziomu indywidualnych stron.2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny6
- 7. Strona wzorcowaPlik z rozszerzeniem .masterPodobna do standardowych stron typu .aspx (zawiera kod HTML, kontrolki, a nawet w?asny plik code-behind)Dziedziczy po klasie MasterPagePosiada dyrektyw? @ Master (w odr¨®?nieniu od @ Page dla zwyk?ych stron)Zawiera specjalne kontrolki: ContentPlaceHolder, kt¨®re definiuj? miejsce wykorzystywane przez strony zawarto?ci2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny7
- 8. Strony wzorcowe - koncepcjaNag?¨®wek (menu)Nag?¨®wek (menu)Lorem ipsum dolor sit amet, consectetur adipiscing elit. StopkamasterStopkaLorem ipsum dolor sit amet, consectetur adipiscing elit. content2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny8
- 9. Przetwarzanie stron wzorcowych i zawarto?ci w praktyceU?ytkownik ??da okre?lon? stron? zawarto?ci poprzez podanie URLStrona jest ?adowana, dyrektywa @ Page jest odczytywana, stamt?d pobierane s? informacje na temat strony wzorcowej i strona wzorcowa jest odczytywanaW przypadku gdy ??danie okre?lonej strony jest wykonywane po raz pierwszy, obie strony s? kompilowaneKontrolki strony zawarto?ci s? wstawiane do odpowiednich kontrolek (ContentPlaceHolder) strony wzorcowejRezultat poprzedniego kroku jest renderowany i przesy?any do przegl?darki klienta jako jedna strona.2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny9
- 10. Model obiektowy2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny10
- 11. Kolejno?? zdarze¨½ wykonywanych podczas generowania stronyContent 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-17Study Group 70-562, Autor: Maciej Zbrzezny11
- 12. Tworzenie strony wzorcowej i stron zawarto?ciStrona wzorcowa dodawana jest poprzez:?"Add -> New Item" i wybranie: "Master Page" oraz nazwy strony wzorcowejnowo 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 @ Pagedodanie odpowiedniej zawarto?ci2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny12
- 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-17Study Group 70-562, Autor: Maciej Zbrzezny13
- 14. Dodatkowe cechy mechanizmu stron wzorcowychUstawienia 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?oneMo?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-17Study Group 70-562, Autor: Maciej Zbrzezny14
- 15. Przyk?adUtworzymy projekt o nazwie "MyMasterPage", w kt¨®rym zaprezentowane zostan?:witryna z dwoma stronami wzorcowymiu?ytkownik ma do wyboru z kt¨®rej strony wzorcowej chce korzysta?strona zawarto?ci modyfikuje dane w kontrolkach strony wzorcowej2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny15
- 16. Tematy, motywyThemes2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny16
- 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. Themes2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny17
- 18. Co zawiera dany temat?Sk¨®rk? (Skin) - plik z rozszerzeniem .skin, kt¨®ry zawiera ustawienia w?a?ciwo?ci dla kontrolekKaskadowy arkusz styli (CSS)Obrazki oraz inne zasoby2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny18
- 19. Tworzenie tematuNale?y doda? folder specjalny: App_ThemesW folderze App_Themes tworzymy indywidualne foldery dla ka?dego tematu, a nazwa folderu odpowiada nazwie tematuW 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-17Study Group 70-562, Autor: Maciej Zbrzezny19
- 20. Tematy GlobalneASP.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\ThemesIISRootWeb\aspnet_client\system_web\version\ThemesUwaga: nale?y pami?ta?, ?e ViusalStudio nie rozpoznaje temat¨®w globalnych, ale p¨®?niej w przegl?darce wy?wietlane s? prawid?owo2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny20
- 21. Pliki sk¨®rek (Skin File)W celu utworzenie pliku sk¨®rki dodajemy plik typu SkinSk¨®rki mog? by?:domy?lne - okre?laj?cy wygl?d wszystkich kontrolek pewnego typunazwane - zawieraj? atrybut SkinId, dzi?ki kt¨®remu mo?emy kontrolowa? przypisanie ustawie¨½ tylko pewnym kontrolkomprzyk?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-17Study Group 70-562, Autor: Maciej Zbrzezny21
- 22. Kolejno?? w nadawaniu atrybut¨®w dla kontrolek (od najwa?niejszego)Atrybut Theme w dyrektywie @ PageElement <pages Theme="ThemeName" /> w pliku Web.configAtrybuty lokalne kontrolekatrybut StyleSheetTheme w dyrektywie @ PageElement <pages StyleSheetTheme="ThemeName" /> w pliku Web.configPrzyk?ad: Ustawienie wygl?du przy pomocy <pages StyleSheetTheme="ThemeName" /> mo?e zosta? nadpisane przez nadanie kontrolce lokalnych atrybut¨®w.2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny22
- 23. Ustawianie Tematu programowoNajlepiej 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-17Study Group 70-562, Autor: Maciej Zbrzezny23
- 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-17Study Group 70-562, Autor: Maciej Zbrzezny24
- 25. Web Parts2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny25
- 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 PartsS? komponentami, kt¨®re realizuj? pewn? fukncjonalno?? i mog? by? osadzone na stronieS? oparte o pewien scentralizowany framework, kt¨®ry zapewnia wsp¨®lne mechanizmy zarz?dzania i dostosowywania.Zapewniaj? mechanizm katalogu2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny26
- 27. Web Parts - koncepcjaMaciekU?ytkownik?X_Przygotowa? si? do StudyGroup
- 29. Przygotowa? ?wiczeniaLista zada¨½?X_Prognoza pogody?X_Mniej potrzebne?X¡õs?onko2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny27
- 30. WebParts namespace2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny28
- 31. 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-17Study Group 70-562, Autor: Maciej Zbrzezny29
- 32. Web Parts ZonesKontrolki 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-17Study Group 70-562, Autor: Maciej Zbrzezny30
- 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=/slideshow/dostosowanie-i-personalizacja-aplikacji-web/2967857/"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-17Study Group 70-562, Autor: Maciej Zbrzezny31
- 34. Tryby wy?wietlaniaBrowseDisplayMode ¨C jest to tryb podstawowy, brak edycjiDesignDisplayMode ¨C w tym trybie mo?na zmienia? uk?ad kontrolek na stronie (m.in. usuwania kontrolek, mechanizm drag&drop).EditDisplayMode ¨C dost?p do opcji ka?dej kontrolki. Wymagana strefa EditorZone, do kt¨®rej dodane s? AppearanceEditorPart, LayoutEditorPart.CatalogDisplayMode ¨C umo?liwia dost?p do katalogu. Wymagana strefa CatalogZone.ConnectDisplayMode ¨C tworzenie po??cze¨½ pomi?dzy Wymagana strefa ConnectionZone.2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny32
- 35. Tryb Wy?wietlania - ustawienieTryb 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-17Study Group 70-562, Autor: Maciej Zbrzezny33
- 36. Po??czenia pomi?dzy kontrolkami WebPartsDzi?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-17Study Group 70-562, Autor: Maciej Zbrzezny34
- 37. EdycjaMo?na edytowa? w?a?ciwo?ci kontrolek podczas dzia?ania aplikacjiAppearanceEditorPart LayoutEditorPartPropertyGridEditorPart, wa?ne atrybuty:WebBrowsable() Personalizable()2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny35
- 38. Katalogmo?na wykorzysta? katalog, z kt¨®rego u?ytkownik wybiera jak? kontrolk? chce doda? do stronyaby wykorzysta?? katalog: wystarczy tylko doda? CatalogZonenast?pnie do tej strefy dodajemy kontrolki, kt¨®re maj? znale?? si? w kataloguu?ytkownik mo?e skorzysta? z katalogu w trybie wy?wietlania typu katalog2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny36
- 39. Materia?y dost?pne na:http://maciej-progtech.blogspot.com/Dzi?kuj? za uwag?.2010-01-17Study Group 70-562, Autor: Maciej Zbrzezny37
Editor's Notes
- #29: Powy?szy rysunek pokazuje podstawowe klasy zapewniaj?ce mechanizm Web Parts, do najwa?niejszych z nich nale??:WebPartManager - Kontrolka tego typu potrzebna jest na ka?dej stronie, kt¨®ra zawiera kontrolki typu WebParts. Nie ma ?adnej reprezentacji wizualnej, za to zarz?dza osadzonymi na stronie kontrolkami i zdarzeniami przez nie generowanymi.WebPart - Jest to klasa bazowa dla wszystkich kontrolek typu Web Parts, kt¨®re s? tworzone przez programist?. Zapewnia interfejs u?ytkownika, mo?liwo?ci personalizacji i obs?ug? po??cze¨½.CatalogPart - Zapewnia interfejs u?ytkownika do zarz?dzania grup? kontrolek typu Web Parts, a kt¨®re mog? by? dodane do strony. Zwykle, taka grupa jest globalna w sensie ca?ego serwisu, a nie tylko okre?lonej strony.PageCatalogPart - jest podobna do CatalogPart, ale grupuje tylko te kontrolki Web Parts, kt¨®re s? powi?zane z dan? stron?DeclarativeCatalogPart - pozwala na zadeklarowanie, kt¨®re kontrolki powinny by? dost?pne do dodania dla strony lub ca?ego serwisu EditorPart - Pozwala na modyfikacj? ustawie¨½ danej kontrolki przez u?ytkownika.WebPartZone - jest u?ywana do definiowania obszar¨®w na stronie, w kt¨®rych s? osadzane kontrolki Web Parts.EditorZone - dostarcza obszar na stronie, w kt¨®rym mo?e si? pojawi? kontrolka EditorPart.CatalogZone - definiuje obszar na stronie, w kt¨®rym mo?e si? pojawi? kontrolka CatalogPart.
- #33: BrowseDisplayMode ¨C jest to tryb podstawowy, w kt¨®rym mo?emy wykorzystywa? podstawowe w?a?ciwo?ci kontrolek, nie s? w nim dost?pne ?adne opcje edycyjne.DesignDisplayMode ¨C w tym trybie mo?na zmienia? uk?ad kontrolek na stronie (m.in. dost?pna jest opcja usuwania kontrolek, mechanizm drag&drop).EditDisplayMode ¨C w tym trybie u?ytkownik ma dost?p do opcji ka?dej kontrolki, dzi?ki czemu mo?e zmienia? ustawienia kontrolek. Aby u?ywa? tego trybu nale?y na stronie umie?ci? stref? EditorZone, do kt¨®rej dodane s? AppearanceEditorPart, LayoutEditorPart.CatalogDisplayMode ¨C umo?liwia dost?p do katalogu kontrolek z kt¨®rego mo?na w trakcje dzia?ania aplikacji wybiera? jakie jeszcze kontrolki powinny znale?? si? na stronie.cji ka?dej kontrolki, dzi?ki czemu mo?e zmienia? ustawienia kontrolek. Aby u?ywa? tego trybu nale?y na stronie umie?ci? stref? CatalogZone.ConnectDisplayMode ¨C w tym trybie u?ytkownik ma mo?liwo?? tworzenia po??cze¨½ pomi?dzy kontrolkami.Aby u?ywa? tego trybu nale?y na stronie umie?ci? stref? ConnectionZone.