您的位置：首页 > 运维架构

Designing with WebParts in Visual Web Developer

2005-08-02 14:26 591 查看

http://www.devsource.com/article2/0,1759,1751857,00.asp

By John Mueller

January 16, 2005

One
of the new features in Visual Studio .NET is Visual Web Developer, a
special application that helps you create entire Web sites. Visual Web
Developer makes your Web applications look amazingly similar to their
desktop counterparts, and those Web applications can provide more
flexibility. It's easy to take a look at this new feature, by
downloading the preview of Visual Web Developer Express.

ADVERTISEMENT<a><img></a> WebParts
are only a small part of the total product, but they're exciting
because they allow your users to completely customize the Web pages
you've created for them. For example, let's say your Web application
needs to display various kinds of company data. Instead of grabbing
everything-or-nothing, you can customize what is shown and how it's
accomplished. If the user doesn't care to see a list
of employees on the department page, he can remove it from the Web
page. The information still exists on the server, but the user doesn't
have to bother with it. If he wants that list back again, later on, he
can use the tools you include in your Web application to re-add it. The
user can also move items around and customize the Web page in other
ways.

Intriguing? I'll show you how to use this very neat capability as you build Web-based programs.

It's a Trick, Right?

WebParts rely on a combination of server-side and client-side code.
When you create a Web page that includes WebParts, the server
automatically generates scripts based on the content of the page you
design. The server side of the code manages the page and, in a local
database, stores any changes the user makes.

Note: While this technique eliminates the need for cookies, it also
creates a requirement for a strong privacy policy that users will
accept. (The user identification and selections are both encrypted in a
way that makes it very difficult to decipher any particular user's
preferences.)

WebParts may be the best thing to hit the development community in
recent history, and it doesn't even require a lot of code. Visual Web
Developer does most of the coding in the background. You use design
view to show the IDE how the page should look, set properties to tell
it how you want the page to act, and let the IDE generate most of the
code for you. In fact, it's possible to create simple customizable
pages that require no coding at all on your part. The only element
necessary is the

WebPartManager

to control the customization,

WebPartPageMenu

to allow user changes, and one or more zones that define the customization.

Adding the
WebPartManager

Before you do anything else, add a

WebPartManager

control to the Web page. The

WebPartManager

control is the component that coordinates the efforts of all of the other controls that you add to the Web page.

This control doesn't actually create any content, and you don't have
to do anything to configure it. However, you must have one (and only
one) of these controls on the page before you add any other WebPart
controls to the page. You can drag and drop this control from the
Toolbox or add it to the page in Source view, as shown here.

<asp:WebPartManager ID="WebPartManager1" Runat="server">
</asp:WebPartManager>

Changing Selections with the WebPartPageMenu

WebParts provide a lot of flexibility, but that flexibility is only
available when you allow the user to make changes. Before the user can
make changes, you must add a

WebPartPageMenu

control to the page.

This menu provides a list of selections or verbs which the user may use to make changes to the page. The

WebPartPageMenu

attaches each verb to a particular

WebPart

control. For example, to give the user the opportunity to remove items from a page, you should also provide a

WebPartCatalog

control to add the items back in. You'll discover more about these
modifiers as the example progresses. Here's a typical WebPartPageMenu
control.

<asp:WebPartPageMenu ID="WebPartPageMenu1"
Runat="server"
Text="Change the Layout"
Mode="Menu"
HoverStyle-BorderWidth="1"
MenuStyle-BorderWidth="1"
BrowseModeVerb-Text="Browse"
DesignModeVerb-Text="Design"
EditModeVerb-Text="Edit"
CatalogModeVerb-Text="Catalog">
</asp:WebPartPageMenu>

Notice that this control has four verbs configured:

The

BrowseModeVerb

verb lets the user return to browse mode after making changes to the Web page.
The

DesignModeVerb

verb lets the user move items
around on the screen. The user can't actually edit anything, but he can
move items to make them easier to use.
The

EditModeVerb

verb displays a special set of
editing tools. The user can choose one of these tools to move items
from one area to another, change the appearance of the items, give the
items a new title, and so on. This is an extremely powerful feature,
but not so powerful so that you have to worry about anyone damaging the
Web site. WebPart changes only affect the current user.
The

CatalogModeVerb

verb displays a list of items that
the user can add to the Web page. This is a mandatory addition when you
allow the user to remove items from the Web page because this is the
only way the user can add the items back.

Once you have the

WebPartManager

and

WebPartPageMenu

controls in place, you can design the movable content for the Web page by adding various zones to it. Two or more

WebPartZone

controls are essential. You use these controls to define the content
that the user can modify as well as define the content that must appear
on the page. The other zone controls work with the

WebPartZone

control to provide specific editing features.

Creating Content with the WebPartZone

A WebPart Web page contains two kinds of content:

Content that the user can't modify. For example, you wouldn't
want user to remove the company logo from a Web page or modify
important content, such as warnings.
Content that the user can change. If your Web page includes the
local weather and you feel that this information is ancillary, you can
permit the user to remove it (or at least move it out of the way). The
second kind of content appears within a WebPartZone control.

Normally, you'll include several WebPartZone controls on a page, so
the user can move items around. A page might contain a sidebar for less
important information, a main area for important materials, and a lower
section for items the user wants, but doesn't use very often. The point
of this example is to show the WebPart technology, rather than
interesting content, so the two WebPartZone controls shown here contain
simple labels and hyperlinks.

You can create all of this content in Design view. However, it's
interesting to look at the code that the IDE generates automatically
for you as you design your page. Here's an example of some of the
content you could create.

<asp:WebPartZone ID="wpzTest"
Runat="server"
HeaderText="Content Selections"
EditVerb-Text="Edit">
<ZoneTemplate>
<asp:Label Runat="server"
Text="Hello the First Time"
ID="lblGreeting1" />
<asp:HyperLink ID="hlNowhere"
Runat="server"
NavigateUrl="Default.aspx">
Goes Nowhere
</asp:HyperLink>
</ZoneTemplate>
</asp:WebPartZone>
<asp:WebPartZone ID="wpzTest2"
Runat="server"
HeaderText="Alternate Content Selections"
EditVerb-Text="Edit">
<ZoneTemplate>
<asp:Label Runat="server"
Text="Hello the Second Time"
ID="lblGreeting2" />
</ZoneTemplate>
</asp:WebPartZone><

The

WebPartZone

control acts as a container for the moveable content. You provide a verb for changing the content as part of the

WebPartZone

control. When the user selects the control on screen and chooses the
correct verb (Edit, in this case), the control lets the user move
content around, delete it, or change it in other ways.

The content controls (labels and hyperlinks, here) appear within a
<ZoneTemplate> tag. You must include this tag as a container for
the content. The content itself is relatively simple, and you can
include any content you want within the <ZoneTemplate> tag.

Simply adding several of these controls lets a user move content
around. To allow other actions, you must provide the requisite zones.
For example, to allow a user to delete content, you provide a

CatalogZone

control that lets the user add the content back onto the page.
Otherwise, the content disappears for good, from the user's
perspective. (Remember, the changes only affect this user,
not your actual Web server or its data, so the content still exists.)

Modifying the Content with an
EditorZone

Depending on what you want the user to do with the page, you can provide design and edit verbs on the

WebPartPageMenu

control. The design verb only lets the user move things around, while
the edit verb allows a lot more, such as removing content from view.

When you include the edit verb, you also need to add an

EditorZone

control. The Web page automatically displays the content of this
control when the user selects the edit verb. Here's an example of an

EditorZone

control with two kinds of editors.

<asp:EditorZone ID="EditorZone1" Runat="server">
<ZoneTemplate>
<asp:AppearanceEditorPart Runat="server"
ID="AppearanceEditorPart1" />
<asp:LayoutEditorPart Runat="server" ID="LayoutEditorPart1" />
</ZoneTemplate>
</asp:EditorZone>

As with most zone controls, you must place the

EditorZone

control content within a <ZoneTemplate> tag. In this case, the application uses an

AppearanceEditorPart

(which changes the appearance of the control) and a

LayoutEditorPart

control (which lets the user move the data elements around). As you can
see from the code, you don't have to perform a lot of work to make
these controls functional. Figure 1 shows both controls in action.

Figure 1: Make changes to the appearance (AppearanceEditorPart) and layout (LayoutEditorPart) of the Web page.

To make this display appear, the user first chooses Edit from the Change the Layout
menu. This selection displays the various controls, as shown in Figure
1, and makes the Edit selection for each control accessible. Choosing
the Edit option for a particular control displays both the

AppearanceEditorPart

and

LayoutEditorPart

controls. Notice that the

AppearanceEditorPart

control lets the user change the title for the display element, as well
as its width and height. The user can also choose to display the
element with a title and border, or without either item. The user can
even hide unwanted items from view. The

LayoutEditorPart

control makes it possible to move Web page elements around and change
their state from normal (viewable) to minimized (just the title
showing). The Zone Index field changes the control's position within a
particular zone.

You can add other controls to the list. The

BehaviorEditorPart

control lets the user change how the control interacts with the Web page. The

PropertyGridEditorPart

control lets the user change individual properties for the controls.
Both controls require special programming to make them work. However,
they're actually the exception to the rule. So far, all of the
customization in this article works without any additional coding on
your part; you
simply design the page and set the required properties.

Adding New Items with the CatalogZone

In this context, a catalog isn't a list of acquirable items. As
awkward as it sounds, it's easiest to think of a catalog as "something
you don't have now, but would like to have on the Web page." For
example, when a user closes an element on a Web page and wants it back
later, she opens the catalog and selects the missing
item.

Visual Web Developer supports three kinds of catalogs through the

CatalogZone

control. The

PageCatalogPart

control is the easiest to use and the one that you'll add most often. It lets a user add closed items back onto the page.

The other two — the

DeclarativeCatalogPart

and

ImportCatalogPart

controls — provide access to external elements
and require special handling. Again, the coding you must perform to use
special features will probably be the exception, rather than the rule.
Here's a sample of the

PageCatalogPart

control.

<asp:CatalogZone ID="CatalogZone1" Runat="server">
<ZoneTemplate>
<asp:PageCatalogPartID="PageCatalogPart1" Runat="server" />
</ZoneTemplate>
</asp:CatalogZone>

This control becomes active when the user selects the catalog verb from the

WebPartPageMenu

control.

Figure 2 shows a typical example of the

PageCatalogPart

control in action. Notice that it contains the closed element on this
Web page. To display the element, the user checks the element option
(Untitled [1]), chooses a location from the Add To field, and clicks
Add.

Figure 2 : Add elements back onto the Web page using a PageCatalogPart.

The Bottom Line

WebParts technology is a new and decidedly welcome technology, with
the ability to customize content turns your Web page from
user-constraining to user-enriching. This article shows the power of
WebParts technology and emphasizes the elements that don't require one
iota of programming on your part. Even with the simple changes shown
here, Web site visitors can create a completely custom viewing
experience. With a little additional programming, you can create an
application that not only makes desktop application users jealous, but
actually exceeds the functionality that most desktop applications
provide today.

John Mueller is a freelance author and technical editor. He has
writing in his blood, having produced 66 books and over 300
articles to date. The topics range from networking to artificial
intelligence and from database management to heads down
programming. His most recent book is FrontPage 2003 All-In One Desk Reference for Dummies (Wiley, ISBN 0764575317). His technical editing skills have helped over 35 authors refine the content of their manuscripts.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航