Dostosowanie I Personalizacja Aplikacji Web

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

mailto:[email protected]



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


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

http://msdn.microsoft.com/


4

Strony WzorcoweMaster Pages

2010-01-17


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


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


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


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


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


10

Model obiektowy2010-01-17


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


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


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


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


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


16

Tematy, motywyThemes

2010-01-17


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


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


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


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


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


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


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


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


25

Web Parts

2010-01-17


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


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


28

WebParts namespace2010-01-17


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

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>  </ZoneTemplate> </asp:WebPartZone>

2010-01-17


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


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


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


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


35Edycja

Można edytować właściwości kontrolek podczas działania aplikacji

AppearanceEditorPart LayoutEditorPart PropertyGridEditorPart, ważne

atrybuty: WebBrowsable() Personalizable()

2010-01-17


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


37

Materiały dostępne na:http://maciej-progtech.blogspot.com/

Dziękuję za uwagę.

2010-01-17



Dostosowanie I Personalizacja Aplikacji Web

Technology

Transcript of Dostosowanie I Personalizacja Aplikacji Web