Piotr Bubacz Moduł 12 Wersja 1 Spis treści... 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
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Ł 2 MODUŁ 10 MODUŁ 12 MODUŁ 3 MODUŁ 9 MODUŁ 4 MODUŁ 8 MODUŁ 6 MODUŁ 5 Rys. 1 Mapa zależności modułu Strona 12-2
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
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
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 (Rys. 5), BehaviorEditorPart, LayoutEditorPart oraz PropertyGridEditorPart. Rys. 5 Kontrolka AppearanceEditorPart w kontrolce EditorZone Strona 12-5
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( string username, ref byte[] shareddatablob, ref byte[] userdatablob) base.loadpersonalizationblobs( "master",username, ref shareddatablob, ref userdatablob); protected override void ResetPersonalizationBlob( string username) base.resetpersonalizationblob( "master", username); protected override void SavePersonalizationBlob( string username, byte[] datablob) base.savepersonalizationblob( "master", username, datablob); Strona 12-6
Zmiany w pliku Web.config. Dodanie do sekcji <system.web> informacji o nowym dostawcy: <webparts> <personalization defaultprovider="masterpageonlysqlpersonalizationprovider"> <providers> <add name="masterpageonlysqlpersonalizationprovider" type="masterpageonlysqlpersonalizationprovider, code" connectionstringname="localsqlserver" /> </providers> </personalization> </webparts> 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 Developer, http://www.microsoft.com/poland/developer/net/podrecznik/additional-2.mspx 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
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 1. Tworzenie podstawowej struktury dla kontrolek WebPart 2. Utwórz stronę do zarządzania kontrolkami WebPart Tok postępowania 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. 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: <sitemapnode url="zarzadzanie/wp.aspx" title="zarządzanie układem strony" description="zarządzaj kontrolkami WebPart" /> 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
case "1": wpm.displaymode = WebPartManager.DesignDisplayMode; break; case "2": wpm.displaymode = WebPartManager.EditDisplayMode; break; case "3": wpm.displaymode = WebPartManager.CatalogDisplayMode; break; default: wpm.displaymode = WebPartManager.BrowseDisplayMode; break; W pliku WP.aspx.cs w sekcji using na samej górze dodaj: 3. Sprawdź poprawnośd działania aplikacji using System.Web.UI.WebControls.WebParts; Zapisz stronę. 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 1. Zmiana wyświetlania tytułu kontrolki Kategorie 2. Zmiana wyświetlania tytułu kontrolki Licznik 3. Zmiana wyświetlania tytułu kontrolki NoweProdukty 4. Zmiana wyświetlania tytułu kontrolki WybraneProdukty Tok postępowania 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"; Otwórz plik Kontrolki/Licznik.aspx.cs. w metodzie Page_Load umieśd następujący kod: GenericWebPart gwp = Parent as GenericWebPart; if (gwp!= null) gwp.title = "Licznik odwiedzin"; Otwórz plik Kontrolki/NoweProdukty.aspx. Usuo następujący kod: <strong>nasze nowe produkty:</strong><br /> 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:"; Otwórz plik Kontrolki/WybraneProdukty.aspx. Usuo następujący kod: <strong>wybrane produkty:</strong> Otwórz plik Kontrolki/WybraneProdukty.aspx.cs. W metodzie Page_Load umieśd następujący kod: Strona 12-9
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 1. Dodaj klasę MasterPageOnlyS qlpersonalizationp rovider Tok postępowania Kliknij folder App_Code prawym przyciskiem myszy i wybierz Add New Item. W obszarze Templates wybierz Class, w polu Name wpisz 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( string username, ref byte[] shareddatablob, ref byte[] userdatablob) base.loadpersonalizationblobs( "master",username, ref shareddatablob, ref userdatablob); protected override void ResetPersonalizationBlob( string username) base.resetpersonalizationblob( "master", username); protected override void SavePersonalizationBlob( string username, byte[] datablob) base.savepersonalizationblob( Strona 12-10
2. Dodaj nowego dostawcę w pliku Web.config 3. Sprawdź poprawnośd działania aplikacji "master", username, datablob); Zapisz zmiany w pliku. Otwórz plik Web.config i do sekcji <system.web> dodaj: <webparts> <personalization defaultprovider="masterpageonlysqlpersonalizationprovider"> <providers> <add name="masterpageonlysqlpersonalizationprovider" type="masterpageonlysqlpersonalizationprovider, code" connectionstringname="localsqlserver" /> </providers> </personalization> </webparts> Zapisz zmiany w pliku. 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