Exercise 5-1: Building a Simple Web Part


Exercise 5-1: Building a Simple Web Part

When properly designed, web parts may be used in a variety of situations. In this exercise, you will create a page viewer web part that accepts a URL and displays a web site. This is a convenient way to embed external web pages in your portal, and will offer you a chance to use many of the concepts we have discussed in the chapter.

Creating the New Project

Before beginning, make sure that you have the web part template installed. This template will be the foundation of your project. For this exercise, you will create the web part using C#.

  1. Open Visual Studio .NET 2003.

  2. Select File New Project from the menu.

  3. In the New Project dialog, select the Visual C# Projects folder.

  4. From the project items, select Web Part Library.

  5. Name the new project SPSPageView .

  6. Click OK.

  7. In the Solution Explorer, locate the file WebPart1.cs .

  8. Rename this file PageView.cs .

  9. In the Solution Explorer, locate the file WebPart1.dwp .

  10. Rename this file PageView.dwp .

  11. Open the file Manifest.xml for editing.

  12. In the DwpFiles section, change the web part description file name to PageView.dwp .

Modifying the Web Part Description File

The web part template that you are using creates a default web part description file with a .dwp extension. This file contains information that is used by SPS to upload the web part and make it available. However, you need to change the information to reflect the names you will use in this project.

  1. Open the file PageView.dwp in Visual Studio .NET.

  2. Change the <Title> tag to contain the name PageView .

  3. Change the <Description> tag to contain the text " A web part to embed pages in the portal ."

  4. Change the <Assembly> tag to contain SPSPageView . You may come back later and create a complete entry including Version , Culture , and PublicKeyToken , but this entry alone should work for this exercise.

  5. Change the <TypeName> tag to contain SPSPageView.Container .

  6. Save the file and close it.

Listing 5-8 shows the final contents of the web part description file.

Listing 5-8: The Web Part Description File
start example
 <?xml version="1.0" encoding="utf-8"?> <WebPart xmlns="http://schemas.microsoft.com/WebPart/v2" >     <Title>PageView</Title>     <Description>A web part to embed pages in the portal</Description>     <Assembly>SPSPageView</Assembly>     <TypeName>SPSPageView.Container</TypeName>     <! Specify initial values for any additional base class or custom properties here. > </WebPart> 
end example
 

Coding the Web Part

Writing the code for the web part entails several steps. First, you will clean up the template code to make it easier to understand. Second, you will define the properties for the web part. Finally, you will write the code to render the web part in the portal.

  1. Open PageView.cs in Visual Studio .NET.

  2. In the code, rename the class from WebPart1 to Container . Be sure to make the changes both in the name of the class and the attributes that decorate the class.

  3. Change the DefaultProperty decoration of the class from Text to URL .

  4. Remove the code from the RenderWebPart function.

  5. Go through the class and strip out all of the comments and the one predefined property.

Listing 5-9 shows how the code should appear in the file.

Listing 5-9: Starting the Web Part in PageView.cs
start example
 using System; using System.ComponentModel; using System.Web.UI; using System.Web.UI.WebControls; using System.Xml.Serialization; using Microsoft.SharePoint; using Microsoft.SharePoint.Utilities; using Microsoft.SharePoint.WebPartPages; namespace SPSPageView {     [DefaultProperty("URL"),     ToolboxData("<{0}:Container runat=server></{0}:Container>"),     XmlRoot(Namespace="SPSPageView")]     public class Container : Microsoft.SharePoint.WebPartPages.WebPart     {         protected override void RenderWebPart(HtmlTextWriter output)         {         }     } } 
end example
 

Defining the Properties

The basic design of your web part is going to be a division in the web page created by an <IFRAME></IFRAME> tag. Using this tag, you can embed a web page into the portal. The only thing you need to know is the URL of the page to embed. However, the URL is not enough to create a professional web part with good fit and finish.

When web parts are used on a page, the designer can never know the available height and width of the display area. Typically, the height is not an issue and can be set using a property because the browser produces scroll bars if the specified height exceeds the available display height. However, the web part designer should be respectful of the available width by specifying the required width as a percentage. With this in mind, you will define two properties for your web part: one for the URL and the other for the page height. Listing 5-10 shows the code you should add to the class to define the properties.

Listing 5-10: Defining the Properties
start example
 private string url=""; private int pageHeight = 400; [Browsable(true),Category("Miscellaneous"), DefaultValue(""), WebPartStorage(Storage.Personal), FriendlyName("URL"),Description("The address of the page to display")] public string URL {     get     {     return url;     }     set     {     url = value;     } } [Browsable(true),Category("Miscellaneous"), DefaultValue(400), WebPartStorage(Storage.Personal), FriendlyName("Page Height"),Description("The height of the page in pixels.")] public int PageHeight {     get     {     return pageHeight;     }     set     {     pageHeight = value;     } } 
end example
 

Rendering the Web Part

In order to render the web part display, you must override the RenderWebPart function. Because there is no drag-and-drop tool for creating the web part interface, you must code it by hand. The RenderWebPart function provides an HTMLTextWriter that outputs HTML to create the interface. Add the following line of code to the RenderWebPart function to create the display.

 output.Write("<div><iframe height='" + PageHeight + "' width='100%' src='" + URL + "'></iframe></div>"); 

Deploying the Web Part

Once the web part is coded, you must prepare the project to be compiled. In order to run in SPS, the web part assembly must have a strong name and be deployed in the \bin directory underneath the root of the web site. Additionally, the web part must be marked as safe in the web.config file. In this section, we'll take all the steps necessary to deploy the web part.

Creating a Strong Name

Web parts need a strong name in order to run in SPS. In order to give the web part a strong name, you have to create a key pair file using the Strong Name tool, sn.exe . Once the strong name is created, you must create a reference to it in the assembly file.

  1. Open a command window by selecting Start All Programs Accessories Command Prompt.

  2. In the command window, navigate to \Program Files\Microsoft VisualStudio .NET 2003\SDK\v1.1\bin .

  3. In the command-line window, create a key file by executing the line sn.exe -k c:\keypair.snk .

  4. In Visual Studio .NET, open the AssemblyInfo.cs file.

  5. In the AssemblyInfo.cs file, scroll to the bottom of the file and add a reference to the key file by editing the AssemblyKeyFile entry to read as follows :

     [assembly: AssemblyKeyFile("c:\keypair.snk")] 
  6. Save and close AssemblyInfo.cs .

Compiling the Web Part

Once the strong name is defined and referenced in the key file, you are ready to compile the code. Because web parts must run in the \bin directory underneath the root of the web site, it is easier if you simply compile your assembly into the required directory. This makes it easier to get the web part working.

  1. Right-click the SPSPageView project in Visual Studio .NET and select Properties from the pop-up menu.

  2. In the Property Pages dialog, select Configuration Properties Build.

  3. Set the Output Path property to \inetpub\ wwwroot \bin .

  4. Click OK.

  5. Compile the web part by selecting Build Build SPSPageView.

  6. When the web part compiles successfully, close Visual Studio .NET.

Marking the Web Part As Safe

Even though the web part has compiled successfully, it cannot run in SPS until it is marked as safe. To mark the web part as safe, you need to make an entry in the web.config file under the <SafeControls> section. Furthermore, this section requires an entry for the PublicKeyToken , which is embedded in the key file.

  1. Open a command window by selecting Start All Programs Accessories Command Prompt.

  2. In the command window, navigate to \Program Files\Microsoft VisualStudio .NET 2003\SDK\v1.1\Bin .

  3. In the command-line window, display the PublicKeyToken by running the following line:

     sn.exe -T c:\inetpub\wwwroot\bin\SPSPageView.dll 
  4. Record the value of the PublicKeyToken for use in the web.config file.

  5. Using a text editor, open the web.config file, which is located under \inetpub\wwwroot .

  6. Locate the <SafeControls> section of the file. In this section, you must add a new <SafeControl> entry for your web part. The following example shows the form, but you must substitute your particular PublicKeyToken .

     <SafeControl Assembly="SPSPageView, Version=1.0.0.0, Culture=neutral, PublicKeyToken=ba635e9bfab94eac" Namespace="SPSPageView" TypeName="*" /> 
  7. When the changes are complete, save and close the file.

Using the Web Part

Once the web part is properly compiled, placed in the \bin directory, and marked as safe, it can be used in a portal page. To use the web part, you will import it into a gallery. Once it's imported, you can drag it onto a page and set its properties.

  1. Log into SPS as a member of the Administrator Site Group.

  2. Navigate to any site that you have previously created.

  3. On the site home page, select Modify Shared Page Add Web Parts Import.

  4. In the Import pane, click Browse.

  5. Locate the file PageView.dwp and click Open.

  6. In the Import pane, click Upload.

  7. Drag the PageView web part from the pane to any zone on the page.

  8. When the web part appears, select Modify Shared Web Part from its drop-down menu.

  9. Under the Miscellaneous section, enter a value for the URL field in the form http:// [address] .

  10. Click OK.




Microsoft SharePoint[c] Building Office 2003 Solutions
Microsoft SharePoint[c] Building Office 2003 Solutions
ISBN: 1590593383
EAN: N/A
Year: 2006
Pages: 92

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