Creating a Simple Web Parts Page


Okay, I've started out this chapter with a lot of theory! Web Parts, in fact, are quite easy to understand and use. A little example will give you an idea.

The example, based on those in previous chapters, will show you how to build a small portal page. It's essential to have an authenticated user session when working with Web Parts. Therefore, I've modified the web.config configuration file in a way that the login of the user is already required to access the starting page. This, however, isn't always mandatory, because the personalization feature, as described in the last chapter, works in combination with anonymous users as well. Additionally, I've activated the personalization of pages, which is deactivated globally by default.

 <?xml version="1.0"?> <configuration>     <system.web>         <compilation debug="true" />         <authentication mode="Forms" />            <authorization>                <deny users="?" />            </authorization>         <roleManager enabled="true">             <providers />         </roleManager>            <pages enablePersonalization="true" />     </system.web> </configuration> 

Adding the WebPartManager Control

The complete administration of Web Parts is managed by the WebPartManager control. This control doesn't offer any visualization. Therefore, it's quite irrelevant where you place it on the page.

I'd like to recommend, however, placing the control in the head area of the page within the <head> tags. This way it's still available and won't disturb your layout at all. The same is possible in combination with Master Pages. In that case, you need to place the control just once, and it can then be used on all the pages of your web site.

 <html> <head runat="server">     <title>Untitled Page</title>     <asp:WebPartManager runat="server" /> </head> <body> ... 

Note

Please be aware that you can place only one WebPartManager control on each page. Furthermore, the control must get a unique ID as shown in the previous example.

To activate personalization, you'll need direct access to the WebPartManager control within your source code. You can achieve this via a public property of the Master Page. A much easier way works like this:

 WebPartManager manager = (this.Items[typeof(WebPartManager)] as WebPartManager); 

Internally, the control adds its own instance to the new Items collection of the Page class during handling of the Page_Init event (by overriding OnInit()). Its own type instance is used as a key for the dictionary. This way the current instance can be accessed at any time within the page's life cycle as shown previously.

Adding Zones

Next, you can define the zones of your first content page. I've decided to enhance the starting page in this example, which now consists of a table with two columns and three lines. The first line goes right across both columns and consists only of one zone that I've dragged from the Toolbox as a regular WebPartZone control directly to the page. The second line has two equal zones: one appearing in the left cell and the other appearing in the right cell.

The source code of the updated content page is still quite simple, as Listing 8-1 demonstrates. Figure 8-3 shows the visual definition of the zones in VS .NET.

click to expand
Figure 8-3: You can visually define your zones for any single page.

Listing 8-1: Zones Serving As a Kind of Container for Your Web Parts

start example
 <asp:content      contentplaceholder     runat="server">     <table cellspacing="1" cellpadding="1"         width="100%" border="1">         <tr>             <td colspan="2">                 <asp:webpartzone                      runat="server"                     width="100%"                     draghighlightcolor="244, 198, 96">                 </asp:webpartzone>             </td>         </tr>         <tr>             <td>                 <asp:webpartzone                      runat="server" width="100%"                     draghighlightcolor="244, 198, 96">                 </asp:webpartzone>             </td>             <td>                 <asp:webpartzone                      runat="server" width="100%"                     draghighlightcolor="244, 198, 96">                 </asp:webpartzone>             </td>         </tr>         <tr>             <td>             </td>             <td>             </td>         </tr>     </table> </asp:content> 
end example

At first sight, you may think that the zone—same as the WebPartManager control—has no visualization of its own because these controls are shown as gray boxes only. This, however, isn't the whole truth. In edit mode the controls offer among other things a drag-and-drop functionality. Furthermore, they are responsible for the visualization of each single part and provide these parts with a header bar, for example.

Therefore, each zone control offers a considerable range of properties to modify its visualization. The easiest way to set these properties is to use the Auto Format dialog box from the Task List, which you already know from manipulating a bunch of other controls. In this dialog box, you can choose from two standard formats: SharePoint and IBuySpy. For the purposes of this example, I've decided to go with the first one. It's quite possible that this list will contain more items in the Beta version.

Adding Web Parts

Now that the WebPartManager control is in position and the zones are placed, I can show you what you've been waiting for: how to fill the zones with content.

As described previously, each zone has its own ZoneTemplate that carries the individual Web Parts, which you may edit as usual. Instead of placing text (literals) within the template, you may only use controls in this case. For example, I've placed a ContentWebPart control in the top zone to show some welcome text in the example. The ContentWebPart control also offers a template that accepts individual content. Figure 8-4 shows the embedded processing of both templates.

click to expand
Figure 8-4: Edit the templates.

Beneath the Web Part controls that have been especially equipped to be part of a zone, you may as well place any other server control within a zone, as mentioned previously. By using traces, it's quite easy to recognize that a GenericWebPart control is wrapped automatically around each of these objects, so that such areas can be treated in the same way as other Web Parts.

I've equipped the two remaining Web Parts with a Calendar control (on the left) and a user control (on the right), which I took from the intranet project template of VS .NET. The user control shows a list with links by using a DataList control that has been data-bound to an XML file via a DataSetDataSource control. Of course, you may place more than one control in a zone.

After the page has been opened in the browser, it'll look somewhat similar to what is shown in Figure 8-5. Through the code in Listing 8-2, a frame is drawn around each single Web Part. In addition, the Web Parts each have a title bar in which the name is displayed and two links are offered to minimize and close them (which results in taking it off the page). With a click of the Minimize link, I deactivated the calendar before the screen shot was made. A click of the Restore link button would display it again.

Listing 8-2: A Comfortable Portal Page Without a Line of Code

start example
 <%@ page language="C#" master="~/MasterPage.master" %> <%@ register tagprefix="uc1" tagname="DailyLinksWebPart"     src="/books/2/697/1/html/2/~/DailyLinksWebPart.ascx" %> <asp:content      contentplaceholder     runat="server">     <table cellspacing="1" cellpadding="1" width="100%" border="1">         <tr>             <td colspan="2">                 <asp:webpartzone  runat="server" width="100%"                     draghighlightcolor="244, 198, 96" >                     <zonetemplate>                         <asp:contentwebpart                              runat="server" width="100%" caption="Welcome">                             <contenttemplate>                                 <strong>Welcome!</strong><br />                                 <br />                                 Welcome to my small test application!                                 This is a simple page using three different                                 zones including some web parts. Nice feature,                                 right?                             </contenttemplate>                         </asp:contentwebpart>                     </zonetemplate>                 </asp:webpartzone>            </td>       </tr>       <tr>           <td valign="top">               <asp:webpartzone  runat="server" width="100%"                   draghighlightcolor="244, 198, 96">                   <zonetemplate>                       <asp:calendar  runat="server">                       </asp:calendar>                   </zonetemplate>               </asp:webpartzone>           </td>           <td valign="top">               <asp:webpartzone  runat="server" width="100%"                   draghighlightcolor="244, 198, 96">                   <zonetemplate>                       <uc1:dailylinkswebpart                            runat="server"></uc1:dailylinkswebpart>                   </zonetemplate>               </asp:webpartzone>           </td>       </tr>       <tr>           <td>               <asp:linkbutton                      runat="server"                     onclick="LB_Personalize_Click">                         Personalize this page!                 </asp:linkbutton>             </td>             <td>             </td>         </tr>     </table> </asp:content> 
end example

click to expand
Figure 8-5: Congratulations! Your first ASP.NET version 2 portal page is ready.

Customizing the Portal Page

The page now has some portal characteristics and can be modified a little bit by the individual user. The result, however, isn't too exciting—is it? Wouldn't you like to allow your users to modify the position of the content? It's probably easier than you may think!

To follow along with this example, add a LinkButton control with the assigned text "Personalize this page!" in an appropriate place of the page and take over the event handling shown in the following code:

 void LB_Personalize_Click(object sender, System.EventArgs e) {     WebPartManager manager = (this.Items[typeof(WebPartManager)]                                              as WebPartManager);     if (manager.DisplayMode == WebPartDisplayMode.Normal)     {         manager.SetDisplayMode(WebPartDisplayMode.Design);         this.LB_Personalize.Text = "End Personalization";     }     else     {         manager.SetDisplayMode(WebPartDisplayMode.Normal);         this.LB_Personalize.Text = "Personalize this page!";     } } 

With a click of the button, the page will switch to design mode. This is achieved by using the SetDisplayMode() method of the WebPartManager control. The object has been queried from the new Page.Items dictionary as mentioned earlier. Afterward, the user can visually define the position of each single Web Part by dragging and dropping it to the desired position. The alpha blending effect, which results in translucence as shown in Figure 8-6, helps you get the right look and feel for this maneuver. Another click of the button and you're finished with design mode.

click to expand
Figure 8-6: Just drag and drop to personalize your page.

Advanced Zone and Web Part Properties

Various properties allow you to individually set up defined zones as well as the Web Parts included therein. These can only be modified if you work directly with Web Parts and haven't placed a server or user control directly in the zone.

Customizing Your Web Part Zones

Although zones can be adapted to a fine level of detail, many changes don't affect the zone itself but have an overall influence on the integrated Web Parts. With the help of eight style properties, you can define the appearance of different areas in a sophisticated way. The arrangement of the Web Parts in a zone plays an important role with regard to the visuals. You set the Orientation property to either Vertical (default) or Horizontal. Even the drag and drop function can be adapted. The developer can choose among using the normal view of the content (including alpha blending), moving of the title bar, or displaying of a custom image.

The commands (or verbs in Microsoft terminology) shown in the title bar of each Web Part can be modified in a variety of ways. You can define the title, the description (shown as a tool tip), and a URL of an icon file for each and every verb.

The list of verbs can be enlarged, by the way, although I have to say that it takes some time to do that. Anyway, the WebPartZoneBase class offers the CreateVerbs event for this very purpose. You get access to a WebPartVerbCollection through the event arguments that are write-protected, however. To create a new verb, you must insert a new instance from the collection based on the existing one. Then you pass it back to the zone via the event arguments. Each verb contains a server-side event and, if needed, a client-side event-handling routine as well that starts upon a click of the verb.

The following code shows how to create a new verb displaying the text "Hello world". With a click of the automatically generated LinkButton control, the title of the corresponding Web Part will be changed programmatically, as shown in Figure 8-7.

click to expand
Figure 8-7: The way to add a new verb is a little unusal, but still easy to do.

 void WPZ_TopZone_CreateVerbs(object sender,     System.Web.UI.WebControls.WebPartVerbsEventArgs e) {     WebPartVerb verb = new WebPartVerb(         new WebPartEventHandler(this.CustomWebPartVerb_ServerClick));     verb.Text = "Hello world";     e.Verbs = new WebPartVerbCollection(e.Verbs, new WebPartVerb[] {verb}); } private void CustomWebPartVerb_ServerClick(object sender, WebPartEventArgs e) {     e.WebPart.Caption = "You clicked the custom verb!"; } 

Customizing Your Web Parts

Web Parts can be modified individually, too. For example, you can opt to assign a small and a large icon to the content. The presentation, including title bar and/or frame and the initial display mode (normal or minimized), can be influenced as well. You can even specify through various means which actions are allowed—for example, whether a Web Part can be moved, closed, or minimized.

Integration with Role Management has been done in very nice way. Through the Roles property, you may pass a list of roles separated by commas. Members of those roles now have access to the Web Part control. If a user is not a member of one of these roles, the Web Part will simply be hidden—the ideal basis for personalization.




ASP. NET 2.0 Revealed
ASP.NET 2.0 Revealed
ISBN: 1590593375
EAN: 2147483647
Year: 2005
Pages: 133

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net