Dostosowanie I Personalizacja Aplikacji Web

  • 2,219 views
Uploaded on

Dostosowanie I Personalizacja Aplikacji Web: …

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

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,219
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
8
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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.
  • BrowseDisplayMode – 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 – w tym trybie można zmieniać układ kontrolek na stronie (m.in. dostępna jest opcja usuwania kontrolek, mechanizm drag&drop).EditDisplayMode – 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 – 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 – 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.

Transcript

  • 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%Microsoft.NETFrameworkversionASP.NETClientFilesThemes
    IISRootWebaspnet_clientsystem_webversionThemes
    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
  • 27. Web Parts - koncepcja
    Maciek
    Użytkownik
    ?
    X
    _
    • Przygotować się do StudyGroup
    • 28. Zrobić Prezentację
    • 29. Przygotować ćwiczenia
    Lista 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