ITA-103 Aplikacje Internetowe Piotr Bubacz

Moduł 12 Wersja 1

Technologia WebParts Spis treści Technologia WebParts ........................................................................................................................ 1 Informacje o module ........................................................................................................................... 2 Przygotowanie teoretyczne................................................................................................................. 3 Przykładowy problem ................................................................................................................. 3 Podstawy teoretyczne ................................................................................................................. 3 Uwagi dla studenta ..................................................................................................................... 7 Dodatkowe źródła informacji ...................................................................................................... 7 Laboratorium podstawowe ................................................................................................................. 8 Problem 1 (czas realizacji 20 min) ............................................................................................... 8 Problem 2 (czas realizacji 20 min) ............................................................................................... 9 Problem 3 (czas realizacji 5 min) ............................................................................................... 10

Piotr Bubacz ITA-103 Aplikacje Internetowe

Moduł 12 Technologia WebParts

Informacje o module Opis modułu W tym module znajdziesz informacje dotyczące technologii umożliwiającej personalizację wyglądu strony przez jej użytkowników – WebParts. Nauczysz się, jak tworzyd i zarządzad kontrolkami WebPart, jak również, jak zachowad układ kontrolek umieszczonych na szablonie strony na wszystkich stronach serwisu. Cel modułu Celem modułu jest przedstawienie możliwości wykorzystania technologii umożliwiającej personalizację wyglądu strony przez jej użytkowników. Uzyskane kompetencje Po zrealizowaniu modułu będziesz:  wiedział jak wykorzystad technologię WebPart tworzenia treści personalizowanych przez użytkowników strony  potrafił tworzyd kontrolki WebPart na podstawie kontrolek użytkownika  potrafił zachowad wygląd kontrolek WebPart na wszystkich stronach serwisu Wymagania wstępne Przed przystąpieniem do pracy z tym modułem powinieneś:  znad podstawy HTML i CSS  znad zasady pracy w Visual Studio 2008 Mapa zależności modułu Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem do realizacji tego modułu należy zapoznad się z materiałem zawartym w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS” oraz „Wprowadzenie do ASP.NET”. MODUŁ 14 MODUŁ 13

MODUŁ 1

MODUŁ 11 MODUŁ 10

MODUŁ 2 MODUŁ 12

MODUŁ 9

MODUŁ 3 MODUŁ 4

MODUŁ 8

MODUŁ 5 MODUŁ 6

Rys. 1 Mapa zależności modułu

Strona 12-2

Piotr Bubacz ITA-103 Aplikacje Internetowe

Moduł 12 Technologia WebParts

Przygotowanie teoretyczne Przykładowy problem Coraz częściej jednym z wymagao stawianych przed portalem internetowym jest jego interaktywnośd. Użytkownik powinien mied możliwośd nie tylko dodawania treści czy interakcji z elementami portalu, lecz również układania elementów na stronach zgodnie z potrzebami. Użytkownicy chcą sami określad, które komponenty i w jakich miejscach mają byd umieszczone. Za tym trendem podążają najwięksi. Na naszym rynku jeden z portali internetowych wprowadził możliwośd zmiany układu elementów na stronie oraz ilości wyświetlanych informacji. W sieci Internet możemy znaleźd wiele przykładów stron, które umożliwiają nam indywidualną konfiguracje elementów na stronie. Napisanie takiej funkcjonalności nie jest proste. Chcielibyśmy mied gotowe rozwiązanie, które szybko i skutecznie możemy dodad do naszej strony. Podstawy teoretyczne Kontrolki WebPart służą do budowania portali internetowych, w których użytkownik decyduje, co i gdzie będzie wyświetlane. Użytkownik za pomocą przeglądarki może dodad, usunąd oraz zamienid zawartośd wybranych przez programistę kontrolek. Możliwości technologii WebParts Główne możliwości, jakie zapewniają nam kontrolki WebPart, to:  Personalizacja zawartości strony – użytkownik może dodad, usunąd, ukryd lub zminimalizowad kontrolkę WebPart.  Personalizacja wyglądu strony – użytkownik może przeciągad kontrolki pomiędzy strefami na stronie, zmieniad ich wygląd, własności i zachowanie.  Eksport i import kontrolek – użytkownik może eksportowad i importowad kontrolki WebPart wraz z ustawieniami, wyglądem a nawet danymi.  Tworzenie połączeo pomiędzy kontrolkami – użytkownik może zmieniad wartości w jednej kontrolce, które mają wpływ na inną kontrolkę (np. zmiana wartości powoduje zmianę zawartości innej kontrolki). Kontrolki WebPart Najważniejsze kontrolki WebPart to:  WebPartManager – zarządza kontrolkami WebPart, musi zostad umieszczony przed innymi kontrolkami WebPart, może byd tylko jeden na stronie.  CatalogZone – zawiera katalog kontrolek WebPart, które użytkownik może wybrad z listy dostępnych elementów i umieścid w strefach Web Part.  EditorZone – umożliwia edycję i personalizację kontrolek WebPart przez użytkownika.  WebPartZone – umożliwia umieszczanie kontrolek użytkownika, na stronie może znajdowad się wiele takich kontrolek. Możliwe jest również umieszczanie w niej istniejących kontrolek serwerowych oraz kontrolek użytkownika, które stają się kontrolkami WebPart.  WebPart – jest to klasa bazowa dla kontrolek WebPart, kontrolka dziedzicząca po tej klasie może zostad dodana do WebPartZone. Kontrolka WebPartManager Kontrolka WebPartManager umożliwia zarządzanie i kontrolę zachowaniem kontrolek WebPart. Na stronie internetowej może byd umieszczona tylko jedna taka kontrolka, ponadto musi zostad umieszczona przed innymi kontrolkami WebPart.

Strona 12-3

Piotr Bubacz ITA-103 Aplikacje Internetowe

Moduł 12 Technologia WebParts

WebPartManager umożliwia zmianę trybu wyświetlania strony zawierającej kontrolki WebPart. Możliwe tryby to:  Browse – w tym trybie możliwe jest tylko przeglądanie kontrolek.  Design – w tym trybie możliwe jest przeciąganie kontrolek pomiędzy strefami WebPartZone przy pomocy myszy. Zmiany są zapamiętywane na serwerze.  Edit – w tym trybie użytkownik może robid to, co w trybie Design, dodatkowo, po umieszczeniu kontrolki EditorZone możliwa jest zmiana atrybutów kontrolki.  Catalog – w tym trybie użytkownik może przy pomocy kontrolki CatalogZone dodawad i usuwad kontrolki WebPart ze stref WebPartZone Tryb pracy może zostad zmieniony programowo przy pomocy zmiany własności DisplayMode: WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode

Kontrolka WebPartZone Kontrolka WebPartZone jest kontenerem dla innych kontrolek WebPart i można w niej umieścid dowolną ilośd tych kontrolek. Kontrolki WebPart mogą zostad dodane do WebPartZone statycznie lub dynamicznie. Użytkownik może, wykorzystując kontrolkę CatalogPart, wybrad z listy rozwijanej obiekt WebPart i dodad go do odpowiedniej strefy WebPartZone. Kontrolka CatalogZone W trybie Catalog obiektu WebPartManager jest widoczna kontrolka CatalogZone. Przy jej pomocy użytkownik może dodad kontrolkę WebPart do wybranej strefy WebPartZone. Kontrolka ta może zawierad kontrolki PageCatalogPart, DeclarativeCatalogPart oraz ImportCatalogPart. Kontrolka PageCatalogPart (Rys. 2) wyświetla wszystkie dostępne kontrolki WebPart, które jeszcze nie są umieszczone na stronie. Po dodaniu kontrolki do strefy kontrolka jest usuwana z listy dostępnych kontrolek.

Rys. 2 Kontrolka PageCatalogPart

Kontrolka ImportCatalogPart (Rys. 3) umożliwia zaimportowanie kontrolek WebPart na serwer.

Strona 12-4

Piotr Bubacz ITA-103 Aplikacje Internetowe

Moduł 12 Technologia WebParts

Rys. 3 Kontrolka ImportCatalogPart

Kontrolka DeclarativeCatalogZone umożliwia programowe określenie listy dostępnych kontrolek. Kontrolka EditorZone W trybie Edit po wybraniu opcji Edit na kontrolce WebPart (Rys. 4) jest wyświetlana kontrolka EditorZone. Umożliwia ona edycję właściwości kontrolek znajdujących się w strefach WebPartZone.

Rys. 4 Kontrolka i opcje dostępne w trybie Edit

Kontrolka EditorZone może zawierad kontrolki AppearanceEditorPart BehaviorEditorPart, LayoutEditorPart oraz PropertyGridEditorPart.

Rys. 5 Kontrolka AppearanceEditorPart w kontrolce EditorZone

Strona 12-5

(Rys.

5),

Piotr Bubacz ITA-103 Aplikacje Internetowe

Moduł 12 Technologia WebParts

AppearanceEditorPart (Rys. 5) umożliwia zmianę wyglądu kontrolki WebPartZone poprzez konfigurowalne ustawienie kilku atrybutów strefy. Kontrolka umożliwia zmianę tytułu, sposobu wyświetlania kontrolki WebPart (tytuł i ramka), kierunku tekstu (z prawej do lewej lub odwrotnie), rozmiarów oraz widoczności kontrolki na stronie. Kontrolki WebPart W celu dodania kontrolek WebPart należy umieścid na stronie kontrolkę WebPartManager. Kontrolki WebPart należy umieszczad w kontrolce WebPartZone. Zarządzanie kontrolkami umożliwiają kontrolki EditorZone oraz CatalogZone. Problemy z zachowaniem wyglądu kontrolek WebPart Informacje o rozłożeniu kontrolek WebPart są przechowywane dla każdej strony osobno. Z tego względu należy przesłonid metod LoadPersonalizationBlobs, ResetPersonalizationBlob, and SavePersonalizationBlob klasy SqlPersonalizationProvider. Rozwiązaniem tego problemu jest wykorzystanie klasy zmieniającej standardowe zachowanie kontrolek WebPart. public class MasterPageOnlySqlPersonalizationProvider : SqlPersonalizationProvider { protected override void LoadPersonalizationBlobs( WebPartManager webPartManager, string path, string userName, ref byte[] sharedDataBlob, ref byte[] userDataBlob) { base.LoadPersonalizationBlobs( webPartManager, "master",userName, ref sharedDataBlob, ref userDataBlob); } protected override void ResetPersonalizationBlob( WebPartManager webPartManager, string path, string userName) { base.ResetPersonalizationBlob( webPartManager, "master", userName); } protected override void SavePersonalizationBlob( WebPartManager webPartManager, string path, string userName, byte[] dataBlob) { base.SavePersonalizationBlob( webPartManager, "master", userName, dataBlob); } }

Strona 12-6

Piotr Bubacz ITA-103 Aplikacje Internetowe

Moduł 12 Technologia WebParts

Zmiany w pliku Web.config. Dodanie do sekcji informacji o nowym dostawcy:

Rozwiązanie zaczerpnięto ze strony http://jason.diamond.name/weblog/2005/11/09/web-partsand-master-pages. Podsumowanie W tym rozdziale przedstawione zostały podstawy pracy z kontrolkami WebPart oraz rozwiązanie problemu umieszczenia kontrolek na szablonie strony i utrzymanie ich wyglądu w całej aplikacji. Uwagi dla studenta Jesteś przygotowany do realizacji laboratorium jeśli:  rozumiesz zasadę działania kontrolek WebPart  umiesz zarządzad trybem pracy kontrolki WebPartManager  wiesz jak skonfigurowad kontrolki WebPart, aby były wyświetlane na wszystkich stronach serwisu jednakowo Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów. Dodatkowe źródła informacji 1. Instrukcja: Tworzenie strony Web Parts w programie Visual Web http://www.microsoft.com/poland/developer/net/podrecznik/additional-2.mspx

Developer,

Krok po kroku instrukcja prowadzi Cię przez tworzenie strony z użyciem kontrolek WebPart. 2. Stephen Walther, ASP.NET 2.0 księga eksperta, Helion, 2008 W książce autor poświęcił wiele miejsca kontrolkom WebPart. Opisał metody tworzenia aplikacji za pomocą tych kontrolek, zaprezentował wszystkie kontrolki WebPart. Pokazał ścieżkę od podstawowej kontrolki WebPart aż po rozbudowane możliwości tej platformy. 3. Darren Neimke, ASP.NET 2.0 Web Parts in Action: Building Dynamic Web Portals, Manning Publications, 2006 Ta ponad 400-stronicowa książka jest poświęcona w całości technologii WebPart. Autor przekazuje całą swoją wiedzę, począwszy od postaw, a skooczywszy na współpracy WebPart z AJAX. 4. ASP.NET QuickStart Tutorials, http://quickstarts.asp.net/QuickStartv20/aspnet Na stronie w sekcji „WebParts Controls” znajdziesz podstawowe informacje i przykłady użycia kontrolek WebPart.

Strona 12-7

Piotr Bubacz ITA-103 Aplikacje Internetowe

Moduł 12 Technologia WebParts

Laboratorium podstawowe Problem 1 (czas realizacji 20 min) Przygotowujesz aplikację internetową dla firmy Adventure Works, która planuje ekspansje na rynku internetowym w Polsce. Aktualnie aplikacja praktycznie już działa, teraz nadszedł czas rozszerzania jej funkcjonalności. Wybór Twojego zespołu padł na technologię WebPart. Jest to ciekawa technologia, z którą już mieliście wcześniej stycznośd w intranetowej witrynie SharePoint, ale dopiero teraz testujecie ją w ASP.NET. Zadanie

Tok postępowania

1. Tworzenie podstawowej struktury dla kontrolek WebPart

 Otwórz aplikację internetową przygotowaną w poprzednim module.  Otwórz plik SzablonStrony.master i przełącz widok na Design.  Na górze strony dodaj kontrolkę WebPartManager. Zmieo jej ID na MenadzerWebPartow.  Do pierwszego obszaru bocznego (ID="PierwszyObszarBoczny") dodaj kontrolkę WebPartZone i określ jej ID jako PierwszyObszarWebPartow.  Do drugiego obszaru bocznego (ID="DrugiObszarBoczny") dodaj kontrolkę WebPartZone i określ jej ID jako DrugiObszarWebPartow.  Przenieś istniejące kontrolki użytkownika do odpowiednich obszarów WebPart.

2. Utwórz stronę do zarządzania kontrolkami WebPart

 Do projektu w katalogu Zarzadzanie dodaj plik WP.aspx oparty na stronie wzorcowej SzablonStrony.master.  Dodaj plik WP.aspx do pliku Web.sitemap. W węźle siteMapNode o właściwości title="Zarządzanie" dodaj:

 W pliku WP.aspx w widoku Design napisz Zarządzanie kontrolkami WebPart, następnie dodaj znak kooca linii i napisz Wybierz tryb:.  Dodaj kontrolkę DropDownList, a następnie w oknie Properties: — w polu ID wpisz trybDropDownList — w polu AutoPostBack z listy rozwijanej wybierz True  Z menu Smart Tag kontrolki trybDropDownList wybierz Edit Items, a następnie dodaj elementy o następujących właściwościach, po czym zamknij okno: — — — —

tekst wyświetlany: Przeglądaj, wartośd: 0 tekst wyświetlany: Projektuj, wartośd: 1 tekst wyświetlany: Edytuj, wartośd: 2 tekst wyświetlany: Katalog, wartośd: 3

 Dodaj kontrolkę EditorZone, następnie dodaj do niej kontrolkę AppearanceEditorPart.  Dodaj kontrolkę CatalogZone, a następnie dodaj do niej kontrolkę PageCatalogPart  Dodaj procedurę obsługi zdarzenia SelectedIndexChanged kontrolki trybDropDownList. W procedurze dodaj następujący kod: WebPartManager wpm = new WebPartManager(); wpm = (WebPartManager) Page.Master.FindControl("MenadzerWebPartow"); switch (trybDropDownList.SelectedValue) Strona 12-8

Piotr Bubacz ITA-103 Aplikacje Internetowe

Moduł 12 Technologia WebParts { case "1": wpm.DisplayMode break; case "2": wpm.DisplayMode break; case "3": wpm.DisplayMode break; default: wpm.DisplayMode break;

= WebPartManager.DesignDisplayMode;

= WebPartManager.EditDisplayMode;

= WebPartManager.CatalogDisplayMode;

= WebPartManager.BrowseDisplayMode;

}

 W pliku WP.aspx.cs w sekcji using na samej górze dodaj: using System.Web.UI.WebControls.WebParts;

 Zapisz stronę. 3. Sprawdź poprawnośd działania aplikacji

 Uruchom aplikację, zaloguj się i wybierz różne tryby pracy kontrolki WebPartManager. Sprawdź zachowanie kontrolek. Jakie nazwy noszą kontrolki?

Problem 2 (czas realizacji 20 min) Kontrolki użytkownika umieszczone w kontrolce WebPartZone wymagają wyświetlenia tytułu tak, aby łatwo można je było identyfikowad. W tym celu postanowiłeś przekształcid je na kontrolki WebPart. Zadanie

Tok postępowania

1. Zmiana wyświetlania tytułu kontrolki Kategorie

 Otwórz plik Kontrolki/Kategorie.aspx. Usuo sekcję HeaderTemplate wraz z zawartością wpisz tekst Wybierz kategorię produktu.  Otwórz plik Kontrolki/Kategorie.aspx.cs. w metodzie Page_Load umieśd następujący kod: GenericWebPart gwp = Parent as GenericWebPart; if (gwp != null) { gwp.Title = "Wybierz kategorię produktu"; }

2. Zmiana wyświetlania tytułu kontrolki Licznik

 Otwórz plik Kontrolki/Licznik.aspx.cs. w metodzie Page_Load umieśd następujący kod:

3. Zmiana wyświetlania tytułu kontrolki NoweProdukty

 Otwórz plik Kontrolki/NoweProdukty.aspx. Usuo następujący kod:

GenericWebPart gwp = Parent as GenericWebPart; if (gwp != null) { gwp.Title = "Licznik odwiedzin"; }

Nasze nowe produkty:


 Otwórz plik Kontrolki/NoweProdukty.aspx.cs. w metodzie Page_Load umieśd następujący kod: GenericWebPart gwp = Parent as GenericWebPart; if (gwp != null) { gwp.Title = "Nasze nowe produkty:"; }

4. Zmiana wyświetlania tytułu kontrolki WybraneProdukty

 Otwórz plik Kontrolki/WybraneProdukty.aspx. Usuo następujący kod: Wybrane produkty:

 Otwórz plik Kontrolki/WybraneProdukty.aspx.cs. Page_Load umieśd następujący kod:

Strona 12-9

W

metodzie

Piotr Bubacz ITA-103 Aplikacje Internetowe

Moduł 12 Technologia WebParts GenericWebPart gwp = Parent as GenericWebPart; if (gwp != null) { gwp.Title = " Wybrane produkty:"; }

5. Sprawdź poprawnośd działania aplikacji

 Sprawdź poprawnośd działania aplikacji.  Wybierz różne tryby i sprawdź zachowanie kontrolek. Czy układ kontrolek po zmianie na stronie WP.aspx jest utrzymywany na wszystkich stronach aplikacji?

Problem 3 (czas realizacji 5 min) Niestety okazało się, że kontrolki zachowują swój układ tylko na stronie WP.aspx. Musicie wraz z zespołem znaleźd rozwiązanie tego problemu. Zadanie

Tok postępowania

1. Dodaj klasę  Kliknij folder App_Code prawym przyciskiem myszy i wybierz Add New MasterPageOnlyS Item. qlPersonalizationP  W obszarze Templates wybierz Class, w polu Name wpisz rovider MasterPageOnlySqlPersonalizationProvider.cs, a z listy rozwijanej wybierz Visual C#.  W sekcji using dodaj: using System.Web.UI.WebControls.WebParts;

 Określ klasę bazową SqlPersonalizationProvider. Zmieo public class MasterPageOnlySqlPersonalizationProvider na: public class MasterPageOnlySqlPersonalizationProvider : SqlPersonalizationProvider

 Usuo konstruktor klasy i dodaj następujący kod: protected override void LoadPersonalizationBlobs( WebPartManager webPartManager, string path, string userName, ref byte[] sharedDataBlob, ref byte[] userDataBlob) { base.LoadPersonalizationBlobs( webPartManager, "master",userName, ref sharedDataBlob, ref userDataBlob); } protected override void ResetPersonalizationBlob( WebPartManager webPartManager, string path, string userName) { base.ResetPersonalizationBlob( webPartManager, "master", userName); } protected override void SavePersonalizationBlob( WebPartManager webPartManager, string path, string userName, byte[] dataBlob) { base.SavePersonalizationBlob( webPartManager,

Strona 12-10

Piotr Bubacz ITA-103 Aplikacje Internetowe

Moduł 12 Technologia WebParts "master", userName, dataBlob); }

 Zapisz zmiany w pliku. 2. Dodaj nowego dostawcę w pliku Web.config

 Otwórz plik Web.config i do sekcji dodaj:

 Zapisz zmiany w pliku. 3. Sprawdź poprawnośd działania aplikacji

 Sprawdź poprawnośd działania aplikacji.  Wybierz różne tryby i sprawdź zachowanie kontrolek. Czy układ kontrolek po zmianie na stronie WP.aspx jest utrzymywany na wszystkich stronach aplikacji?

Strona 12-11