plik

Piotr Bubacz

Moduł 12

ITA-103 Aplikacje Internetowe

Technologia WebParts

Strona 12-2

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Ł 12

MODUŁ 14

MODUŁ 3

MODUŁ 6

MODUŁ 1

MODUŁ 5

MODUŁ 2

MODUŁ 4

MODUŁ 8

MODUŁ 9

MODUŁ 10

MODUŁ 11

MODUŁ 13

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

Piotr Bubacz

Moduł 12

ITA-103 Aplikacje Internetowe

Technologia WebParts

Strona 12-3

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.

Piotr Bubacz

Moduł 12

ITA-103 Aplikacje Internetowe

Technologia WebParts

Strona 12-4

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.

Piotr Bubacz

Moduł 12

ITA-103 Aplikacje Internetowe

Technologia WebParts

Strona 12-5

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

Piotr Bubacz

Moduł 12

ITA-103 Aplikacje Internetowe

Technologia WebParts

Strona 12-6

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);
  }
}

Piotr Bubacz

Moduł 12

ITA-103 Aplikacje Internetowe

Technologia WebParts

Strona 12-7

Zmiany w pliku Web.config. Dodanie do sekcji <system.web> informacji o nowym dostawcy:

Rozwiązanie zaczerpnięto ze strony http://jason.diamond.name/weblog/2005/11/09/web-parts-
and-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.

Piotr Bubacz

Moduł 12

ITA-103 Aplikacje Internetowe

Technologia WebParts

Strona 12-8

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)

Piotr Bubacz

Moduł 12

ITA-103 Aplikacje Internetowe

Technologia WebParts

Strona 12-9

{
  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:

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:

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

3. Zmiana
wyświetlania
tytułu kontrolki
NoweProdukty



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

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.

metodzie

Page_Load umieśd następujący kod:

Piotr Bubacz

Moduł 12

ITA-103 Aplikacje Internetowe

Technologia WebParts

Strona 12-10

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ę
MasterPageOnlyS
qlPersonalizationP
rovider



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(
      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,

Piotr Bubacz

Moduł 12

ITA-103 Aplikacje Internetowe

Technologia WebParts

Strona 12-11

        "master",
        userName,
        dataBlob);
}



Zapisz zmiany w pliku.

2. Dodaj nowego
dostawcę w pliku
Web.config



Otwórz plik Web.config i do sekcji <system.web> 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?