Professional ASP.NET 3.5 in C# and Visual Basic Part 87 pot

When you drag and drop WebPartZone controls onto the design surface using Visual Studio 2008, the WebPartZone control is drawn at the top of the zone, along with a visual representation

Trang 1

directly in the code, or you can create the zones within the table by dragging and dropping WebPartZone controls onto the design surface at appropriate places within the table In Figure 17-4, the table border

width is intentionally turned on and set to1in order to show the location of the Web zones in greater

detail Figure 17-5 shows what the sample from Listing 17-2 looks like in the Design view of Visual

Studio 2008

Figure 17-3

When using Visual Studio 2008, note that by default this IDE creates a Microsoft SQL Server Express

Edition file calledASPNETDB.MDFand stores it in theApp_Datafolder of your Web Project This database file is where the Portal Framework stores all the customization points

Note that if you want this portal framework to run from SQL Server 7.0, 2000, 2005, or 2008, you

should follow the se-up instructions that are defined in Chapter 12.

Now that you have seen the use of WebPartZone controls, which are managed by the WebPartManager control, the next section takes a closer look at the WebPartZone server control itself

Understanding the WebPartZone Control

The WebPartZone control defines an area of items, or Web Parts, that can be moved, minimized,

max-imized, deleted, or added based on programmatic code or user preferences When you drag and drop

WebPartZone controls onto the design surface using Visual Studio 2008, the WebPartZone control is

drawn at the top of the zone, along with a visual representation of any of the items contained within

the zone

You can place almost anything in one of the Web zones For example, you can include the following:

❑ HTML elements (when putting arunat = "server"on the element)

❑ HTML server controls

Trang 2

Evjen c17.tex V2 - 01/28/2008 2:58pm Page 818

Chapter 17: Portal Frameworks and Web Parts

❑ Web server controls

❑ User controls

❑ Custom controls

Figure 17-4

WebPartZone controls are declared like this:

<asp:WebPartZone ID="WebPartZone1" Runat="server"></asp:WebPartZone>

Trang 3

Figure 17-5

The LayoutOrientation Attribute

The Web Parts declared within a WebPartZone control can be displayed either horizontally or vertically

By default, all the items are displayed vertically, but to display the items horizontally, you simply add

theLayoutOrientationattribute to the<asp:WebPartZone>element:

<asp:WebPartZone ID="WebPartZone1" Runat="server"

LayoutOrientation="Horizontal"></asp:WebPartZone>

The first row in the table from Listing 17-2 uses horizontal orientation, whereas the other two zones use the default vertical orientation

The ZoneTemplate Element

In order to include items within the templated WebPartZone control, you must include a

<ZoneTemplate>element

Trang 4

TheZoneTemplateelement encapsulates all the items contained within a particular zone The order in

which they are listed in theZoneTemplatesection is the order in which they appear in the browser until

changed by the end user or by programmatic code The sample<ZoneTemplate>section used earlier is

illustrated here:

<asp:WebPartZone ID="WebPartZone2" Runat="server">

<ZoneTemplate>

<asp:Image ID="Image1" Runat="server"

ImageUrl="~/Images/Tuija.jpg" Width="150" Title="Tuija at the Museum">

</asp:Image>

<uc1:DailyLinks ID="DailyLinks1" runat="server" Title="Daily Links">

</uc1:DailyLinks>

</ZoneTemplate>

</asp:WebPartZone>

This zone contains two items — an Image server control and a user control consisting of a collection of

links that come from an XML file

Default Web Part Control Elements

By default, when you generate a page using the code from Listing 17-2, you discover that you can exert

only minimal control over the Web Parts themselves In the default view, which is not the most artistic

in this case, you are able only to minimize or close a Web Part You can see these options when you click

on the down arrow that is presented next to the name of the Web Part

Figure 17-6 shows what the Web Part that contains the Calendar control looks like after you minimize it

Notice also that if you opt to close one of the Web Parts, the item completely disappears There seems to

be no way to make it come back — even if you shut down the page and restart it This is by design — so

don’t worry I will show you how to get it back!

A few of the items included in the zones have new titles By default, the title that appears at the top of the

Web Part is the name of the control For instance, you can see that the Calendar control is simply titled

Calendar If you add a Button control or any other control to the zone, at first it is simply titled Untitled

To give better and more meaningful names to the Web Parts that appear in a zone, you simply add a

Titleattribute to the control — just as was done with the Image control and the User control, which

both appear on the page In the preceding code example, the Image control is renamed toTuija at the

Museum, and the user control is given theTitlevalueDaily Links

Besides this little bit of default functionality, you can do considerably more with the Web Parts contained

within this page, but you have to make some other additions These are reviewed next

Allowing the User to Change the Mode of the Page

Working with theWebPartManagerclass either directly or through the use of the WebPartManager server

control, you can have the mode of the page changed Changing the mode of the page being viewed

allows the user to add, move, or change the pages they are working with The nice thing about the Web

Part capabilities of ASP.NET is that these changes are then recorded to theASPNETDB.MDFdatabase file

and are, therefore, re-created the next time the user visits the page

Trang 5

Figure 17-6

Using theWebPartManagerobject, you can enable the user to do the following, as defined in this list:

❑ Add new Web Parts to the page:Includes Web Parts not displayed on the page by default and

Web Parts that the end user has previously deleted This aspect of the control works with the cat-alog capabilities of the Portal Framework, which is discussed shortly

❑ Enter the Design mode for the page:Enables the end user to drag and drop elements around

the page The end user can use this capability to change the order in which items appear in

a zone or to move items from one zone to another

❑ Modify the Web Parts settings:Enables the end user to customize aspects of the Web Parts, such

as their appearance and behavior It also allows the end user to modify any custom settings that developers apply to the Web Part

Trang 6

❑ Connect Web Parts on the page:Enables the end user to make a connection between one or more

Web Parts on the page For example, when an end user working in a financial services

applica-tion enters a stock symbol into an example Web Part, he can use a connecapplica-tion to another Web

Part to see a stock chart change or news appear based on that particular stock symbol All of this

is based on the variable defined in the first Web Part

Building on Listing 17-2, Listing 17-3 adds a DropDownList control to the table’s header This drop-down

list provides a list of available modes the user can employ to change how the page is displayed Again, the

mode of the page determines the actions the user can initiate directly on the page (this is demonstrated

later in this chapter)

Listing 17-3: Adding a list of modes to the page

VB

<%@ Page Language="VB"%>

<%@ Register Src="DailyLinks.ascx" TagName="DailyLinks" TagPrefix="uc1" %>

<script runat="server">

Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, _

ByVal e As System.EventArgs)

Dim wpDisplayMode As WebParts.WebPartDisplayMode = _

Webpartmanager1.SupportedDisplayModes(DropDownList1.SelectedValue.ToString())

Webpartmanager1.DisplayMode = wpDisplayMode

End Sub

Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs)

For Each wpMode As WebPartDisplayMode In _

Webpartmanager1.SupportedDisplayModes

Dim modeName As String = wpMode.Name Dim dd_ListItem As ListItem = New ListItem(modeName, modeName) DropDownList1.Items.Add(dd_ListItem)

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>Web Parts Example</title>

</head>

<body>

<form id="form1" runat="server">

<asp:WebPartManager ID="Webpartmanager1" Runat="server">

</asp:WebPartManager>

<table cellpadding="5" border="1">

<tr>

<td colspan="2">

<h1>Bill Evjen’s Web Page</h1>

<asp:WebPartZone ID="WebPartZone1" Runat="server"

LayoutOrientation="Horizontal">

<ZoneTemplate>

Continued

Trang 7

<asp:Label ID="Label1" Runat="server" Text="Label"

Title="Welcome to my web page!">

Welcome to the page!

</asp:Label>

</ZoneTemplate>

</td>

<td valign="top">

Select mode:

<asp:DropDownList ID="DropDownList1" runat="server"

AutoPostBack="True"

OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

</asp:DropDownList>

</td>

</tr>

<tr valign="top">

<td>

<ZoneTemplate>

<asp:Image ID="Image1" Runat="server"

ImageUrl="~/Images/Tuija.jpg" Width="150px"

Title="Tuija at the Museum">

</asp:Image>

<uc1:DailyLinks ID="DailyLinks1" runat="server"

Title="Daily Links">

</uc1:DailyLinks>

</ZoneTemplate>

</td>

<td>

<ZoneTemplate>

<asp:Calendar ID="Calendar1" Runat="server"

Title="Calendar">

</asp:Calendar>

</ZoneTemplate>

</td>

<td><! Blank for now >

</td>

</tr>

</table>

</form>

</body>

</html>

C#

<%@ Page Language="C#"%>

<%@ Register Src="DailyLinks.ascx" TagName="DailyLinks" TagPrefix="uc1" %>

<script runat="server">

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

WebParts.WebPartDisplayMode wpDisplayMode =

Continued

Trang 8

Webpartmanager1.SupportedDisplayModes[DropDownList1.SelectedValue.ToString()];

Webpartmanager1.DisplayMode = wpDisplayMode;

}

protected void Page_Init(object sender, EventArgs e)

{

foreach (WebPartDisplayMode wpMode in

Webpartmanager1.SupportedDisplayModes) {

string modeName = wpMode.Name;

ListItem dd_ListItem = new ListItem(modeName, modeName);

DropDownList1.Items.Add(dd_ListItem);

}

</script>

This adds a drop-down list to the top of the table, as shown in Figure 17-7 This drop-down list will allow

the end user to switch between the Browse and Design modes

Figure 17-7

Trang 9

When the end user clicks the link, a drop-down window of options appears, as shown in Figure 17-8.

Figure 17-8

Using thePage_Initevent, the drop-down list is populated with a list of the available page modes

that are accessible at this particular time In this case, it is Browse and Design The Browse mode is the

default mode used when the page is first created The Design mode causes the ASP.NET page to show

the WebPartZone sections In this mode, the user can drag and drop controls from one section to another with relative ease Again, the positioning of the elements contained in the page is remembered from one application visit to the next

It is important to note that the Design mode is only able to work in Internet Explorer browsers.

The DropDownList control is populated by iterating through a list of availableWebPartDisplayMode

objects contained in theSupportedDisplayModesproperty (which is of type

WebPartDisplayMode-Collection) These modes are available through theWebPartManager1control, which was placed on the page and is in charge of managing the modes and change of modes of the page These WebPartDisplay-Modeobjects are then used to populate the DropDownList control

When the end user selects one of the available modes displayed in the DropDownList control, using the

AutoPostBackfeature of the control, the page is then changed to the selected mode This is done using

the first creating an instance of aWebPartDisplayModeobject and populating it with the value of the

mode selected from the drop-down list Then, using thisWebPartDisplayModeobject, theDisplayMode

property of theWebPartManagerobject is assigned with this retrieved value

The next section covers an important addition to the Portal Framework — the capability to add Web

Parts dynamically to a page

Adding Web Parts to a Page

The next step is to rework the example so that the end user has a built-in way to add Web Parts to the

page through the use of the Portal Framework The ASP.NET Portal Framework enables an end user

to add Web Parts, but you must also provide the end user with a list of items he can add To do this,

simply add a Catalog Zone to the last table cell in the bottom of the table, as illustrated in the partial code example in Listing 17-4

Listing 17-4: Adding a Catalog Zone

<tr valign="top">

<td>

<asp:WebPartZone ID="WebPartZone2" runat="server">

<ZoneTemplate>

<asp:Image ID="Image1" runat="server"

ImageUrl="~/Images/Tuija.jpg" Width="150px"

Title="Tuija at the Museum">

Continued

Trang 10

</asp:Image>

<uc1:DailyLinks ID="DailyLinks1" runat="server"

Title="Daily Links">

</uc1:DailyLinks>

</ZoneTemplate>

</td>

<td>

<asp:WebPartZone ID="WebPartZone3" runat="server">

<ZoneTemplate>

<asp:Calendar ID="Calendar1" runat="server"

Title="Calendar">

</asp:Calendar>

</ZoneTemplate>

</td>

<td>

<asp:CatalogZone ID="Catalogzone1" runat="server">

<ZoneTemplate>

<asp:PageCatalogPart ID="Pagecatalogpart1" runat="server"/>

</ZoneTemplate>

</asp:CatalogZone>

</td>

</tr>

Once a Catalog Zone section is present on the page, the page is enabled for the Catalog mode You need

to create a Catalog Zone section by using the<asp:CatalogZone>control This is similar to creating a

Web Part Zone, but the Catalog Zone is specifically designed to allow for categorization of the items that

can be placed on the page Notice that Catalog mode does not appear as an option in the drop-down list

of available modes until a CatalogZone control is placed on the page If no CatalogZone control is present

on the page, this option is not displayed

After the Catalog Zone is in place, the next step is to create a<ZoneTemplate>section within the

Cat-alog Zone because this is also a templated control Inside the<ZoneTemplate>element is a single

control — the PageCatalogPart control If you run the page after adding the PageCatalogPart control

and change the mode to Catalog, you will see the results shown in Figure 17-9

To get some items to appear in the list (since none do at present), delete one or more items (any items

contained on the page when viewing the page in the browser) from the page’s default view and enter the

Catalog mode by selecting Catalog from the drop-down list of modes

At this point, you can see the deleted Web Parts in the Catalog Zone The PageCatalogPart control

con-tains a title and check box list of items that can be selected The PageCatalogPart control also includes

a drop-down list of all the available Web Part Zones on the page From here, you can place the selected

Web Parts into one of the Web Part Zones available from this list After you select the Web Parts and the

appropriate zone in which you want to place the item, you click the Add button and the items appear in

the specified locations

Moving Web Parts

Not only can the end user change the order in which Web Parts appear in a zone, he can also move

Web Parts from one zone to another By adding the capability to enter the Design mode through the

Định dạng
Số trang	10
Dung lượng	420,4 KB