Web Part Framework
The Web Part Framework is the basis for extensibility in Windows SharePoint Services. It allows developers to write custom components that plug into the SharePoint infrastructure by encapsulating web services and enterprise data as Web Parts.
Windows SharePoint Services as a whole is based heavily on .NET technologies:
· ASP.NET instead of ISAPI for base page execution
· CLR based server object model for programmatic access to SharePoint data
· XML Web services-based access of SharePoint data from remote machines
In keeping with this investment in .NET technologies, the Web Parts Framework is also based entirely on ASP.NET:
· Web Part pages are ASP.NET pages.
· Web Parts are ASP.NET custom controls.
The fundamental notion in the Web Part Framework is that of a Web Part Page. A Web Part Page is essentially a scalable version of the Digital Dashboard. It is a container of Web Parts. A Web Part Page uses Windows SharePoint Services to store per-user views of the page, which enables powerful customizations on a user-by-user basis.
What Are Web Parts?
Web Parts are customizable plug and play components that empower information workers to create personalized user interfaces by simply dragging and dropping them onto a web page. Web parts allow customization at both design time and at run time. In fact, Web Parts blur the distinction between design time and run time:
· Web page authors use FrontPage 2003 to work with Web Parts by dragging and dropping them to a Web Part Page, and then customizing them using the developer enabled properties. In this sense, Web Parts are similar to design time controls.
· Web Parts also enable web page authors to use the browser as their authoring platform. Windows SharePoint Services provides a browser-based interface to design a SharePoint based site.
· The end user can customize a Web Part Page at run time by modifying the properties of each individual web part. The page author can designate which web parts can be customized or not by grouping them into “zones” and setting the appropriate properties on the zone using FrontPage 2003.
From the point of view of a developer, a web part is simply a specialized ASP.NET server control. To create a new Web Part, you create an ASP.NET custom control. However, unlike standard ASP.NET controls, which developers add to Web form pages at design time, Web Parts are intended to be added to Web Part Pages either by authors at design time, or by users at run time.
Note: Developers can also use Web Parts in “regular” ASP.NET pages, but in doing so, the developer loses the advantages of integration with Windows SharePoint Services.
Web Parts and Windows SharePoint Services
Web Parts rely heavily on Windows SharePoint Services to support:
· Creation of new sites and new pages
· Management of the user roster for a site
· Storage of Web Part customizations, including shared and personal property settings
· Administration of site backups and storage limits
· A scalable architecture that can handle thousands of sites and millions of users
· Assignment of users to customizable site groups
In turn, SharePoint Products and Technologies rely on Web Parts to provide configurable and extensible user interfaces.
Composition of a Web Part
A Web Part is composed of the following entities:
· The Web Part description file (.dwp) is a portable container of default and personalized property values for the Web Part.
· The Web Part assembly file (.dll) contains the logic and code for the Web Part, and is installed on the server running Windows SharePoint Services.
· Resource files that support the Web Part; these are also stored on the server.
· Tables in the Windows SharePoint Services database are used to store current values of the Web Part properties.
Windows SharePoint Services has been designed from the ground-up to be a powerful collaborative platform. It is possible and indeed commonplace for your web site to contain multiple instances of the same Web Part. Each instance would conceivably have a different set of properties.
Regardless of the number of instances of the Web Part, there is only one Web Part assembly file. Any instance-specific customizations are stored in the .dwp file and there exist as many .dwp files for a Web Part as there are instances of that part.
Brief Overview of ASP.NET
As we noted in the Introduction, the Web Part infrastructure is based on .NET technologies, specifically ASP.NET. Web Parts themselves are specialized ASP.NET custom controls and they reside on a Web Part Page, which is a specialized ASP.NET web forms page.
For readers that may not be familiar with these technologies, this section gives a very brief overview the main concepts. The reader should refer to many excellent books and articles on this topic.
ASP.NET Web Applications
ASP.NET is part of the .NET Framework and is the core technology for developing web applications and XML Web Services. ASP.NET pages run on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled, event-driven programming model that improves performance and enables separating the application logic and user interface. ASP.NET pages and ASP.NET XML Web services files contain server-side logic (as opposed to client-side logic) written in Visual Basic .NET, C# .NET, or any .NET-compatible language. Web applications and XML Web services take advantage of the features of the common language runtime, such as type safety, inheritance, language interoperability, versioning, and integrated security.
An ASP.NET web application is defined as
all files, pages, handlers, modules, and executable code that you can invoke or run in the scope of a given virtual directory (and its subdirectories) on an IIS server. Typical ASP.NET applications consist of the following:
· One or more web forms pages – which are text files with an .aspx extension. These pages typically consist of HTML markup which declares the controls on the page and specifies their formatting and layout attributes.
· One or more code files; you can developed in develop code C#, Visual Basic, J#, Jscript, etc. The code files contain the web application’s logic, including control event handling, postback handling, etc. The code files are tightly bound to the aspx files and are referred to as “code behind”.
· A Global.asx file to deal with session and application startup and clean-up logic. This file is optional.
· A Web.config file used to store configuration settings. This file is optional, and is new for ASP.NET
Web Forms Pages and Server Controls
Let’s look at a web forms page in more detail. In doing so, we will gain an understanding of ASP.NET server controls and code behind files.
Note This section provides a walkthrough for building an ASP.NET web application so that the reader can gain an understanding of the platform technologies that form the basis for web part pages. However, it is not possible to run arbitrary ASP.NET code within a web part page; specifically, you cannot insert the code presented in this section inside a web part page.
Web forms are ASP.NET pages which use ASP.NET server controls. Server controls are a set of built-in controls which are similar to Microsoft Visual Basic controls – essentially, prewritten pieces of code which you can drag and drop into your application. Just like Visual Basic controls, ASP.NET server controls are event driven; the developer’s task is to write code that handles events raised by the controls. This code appears in the code-behind file of the corresponding aspx file.
ASP.NET provides two sets of built-in server controls:
· HTML controls, which provide a 1-1 mapping to HTML elements
· Web controls, which provide prepackaged UI functionality such as text boxes, data grids, labels, etc. In addition, a class of Web controls, called Validation controls, are used to validate user input on a form (usually avoiding a round-trip to the server)
Let us now examine a sample web application. Below is a screenshot of the application:
The user types his name into the text box and clicks on the button labeled ClickMe. The application displays the text: “Hello World! This is
”.
Apart from the configuration files (global.asx, web.config), this application consists of 2 main files: Webform1.aspx – which is the web forms file, and WebForm1.aspx.cs, which is the code behind file.
Shown below is the WebForm1.aspx file:
File WebForm1.aspx
1. <%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
AutoEventWireup="false" Inherits="TestWebApp.WebForm1" %>
2.
3.
4.
5. WebForm1
6.
7.
8.
9. content="http://schemas.microsoft.com/intellisense/ie5">
10.
11.
12.
23.
24.
This form is strictly markup and no code. All the code required for processing the form appears in a separate file, called the “code-behind” file. This is one of the major innovations in ASP.NET; it separates the presentation from the logic, thus solving one of the major problems with ASP – ASP code was hard to maintain because it was interspersed with HTML markup.
· Line 1 identifies the code behind file to be webform1.aspx.cs. With this directive, the framework knows where to look for when it needs event handlers to process the aspx file.
· Line 12 begins the
16.
17.
· Line 2 uses the @Register directive. This contains the namespace and assembly name for the custom control. It uses the TagPrefix attribute to prevent name collisions. For instance, if somebody else creates a control whose name is also “ComputerName”, then these two controls are distinguished by the different tag prefixes (such as cc1 and cc2).
· Line 14 contains the markup for inserting the control into the page. The syntax and semantics of this markup is the same for a custom control and a built-in control (see the previous section for details).
When you run this page with the Greeting property set to “Welcome”, the output looks like this:
Creating Custom Web Parts
As mentioned before in this document, Web Parts are ASP.NET custom controls. Microsoft Visual Studio.net 2003 is an excellent environment for building and debugging ASP.NET custom controls. Developers can use it for building Web Parts as well.
There are two project templates you can use when building a Web Part using Microsoft Visual Studio.net 2003:
· Use the Web Control Library project: This project template comes with Microsoft Visual Studio.net 2003 which developers can use for building any ASP.NET controls, including Web Parts.
· Use the Web Part Library project: This project template is available as a free download from Microsoft that is optimized for building Web Parts.
In the rest of this section, we will use the Web Part Library project template. There are several advantages to using the Web Part Library template:
· Automatically adds a reference to the Microsoft.SharePoint.dll file, which is the assembly that contains the set of classes required to build Web Parts.
· Creates a Web Part class file.
· Creates a Web Part description (.dwp) file.
· Creates a Web Part manifest file, which is an XML file containing metadata used by stsadm.exe during the deployment of Web Parts.
· Adds new instances of the above files to the project by a simple right click; you can also add consumer and provider Web Part files and Tool Part files to the project.
Note: each of the above should be manually accomplished when using the Web Control Library project.
Installing the Web Part Library Template
The Web Part Library template is available for download at http://microsoft.com/downloads/details.aspx?FamilyId=14D5D92F-C3A6-407C-AAD7-B8C41A4991BE&displaylang=en.
To add the Web Part Library template to your Microsoft Visual Studio.net 2003 installation, follow these steps:
1. Download the Web Part Library templates and run the executable.
2. The Setup Wizard starts. Click Next to install the package.
3. Select the programming languages for which you want to install the templates and then click Next.
4. In the text box provided, type the location of the Windows SharePoint Services assembly in the file system and click Next.
5. The Confirm Installation page appears. Click Next to continue.
6. The Installation Complete page appears. Click Close to close the Setup Wizard.
Creating and Deploying a Web Part
To create a basic Web Part, follow these steps:
1. Create a new project in Microsoft Visual Studio.net 2003 based on the Web Part Library template.
2. Write code for the Web Part.
3. Strongly name the Web Part.
4. Create a Web Part description file (dwp).
5. Copy the Web Part assembly and the dwp file into the web application directory on the machine running Windows SharePoint Services.
6. Identify the Web Part as a safe control.
7. Import the Web Part into a Web Part Page or put the Web Part into the virtual server library.
The details of each of these steps are beyond the scope of this paper; we refer the reader to the following white papers:
· “A Developer’s Introduction To Web Parts”
· “Packaging and Deploying Web Parts for Windows SharePoint Services”
Both are available for download at http://msdn.microsoft.com/library/default.asp?url=/downloads/list/SharePoint.asp.
In this paper, we will examine the sample code for a simple Web Part and look at a dwp file that will accompany it.
Example: A Sample Web Part
The following code illustrates a simple Web Part which has a text box and a button; when you click on the button, the string in the text box is appended to the title of the Web Part.
1. using System;
2. using System.ComponentModel;
3. using System.Web.UI;
4. using System.Web.UI.WebControls;
5. using System.Xml.Serialization;
6. using Microsoft.SharePoint;
7. using Microsoft.SharePoint.Utilities;
8. using Microsoft.SharePoint.WebPartPages;
9. using System.Web.UI.HtmlControls;
10. using System.Runtime.InteropServices;
11. namespace WebPartLibrary1
12. {
13. [DefaultProperty("Text"),
ToolboxData("<{0}:WebPart1 runat=server>{0}:WebPart1>"),
XmlRoot(Namespace="WebPartLibrary1")]
14. public class WebPart1 :
Microsoft.SharePoint.WebPartPages.WebPart
15. {
16. private const string defaultText = "New Web Part";
17. private string text=defaultText;
18. // declare HTML controls used by this web part
19. HtmlButton _myButton;
20. HtmlInputText _myTextBox;
21. // Event handler for _myButton control; it gets the string in
// the text box & appends it to the custom property "Text" &
// sets this as the title of the web part
22. public void _myButton_Click (object sender, EventArgs e)
23. {
24. this.Title = _myTextBox.Value + "'s " + this.Text;
25. }
26. [Browsable(true),Category("Miscellaneous"),
DefaultValue(defaultText),
WebPartStorage(Storage.Personal),
FriendlyName("Text"),Description("Text Property")]
27. public string Text
28. {
29. get
30. {
31. return text;
32. }
33. set
34. {
35. text = value;
36. }
37. }
38. // override Web.UI.Controls.CreateChildControls method
39. protected override void CreateChildControls()
40. {
41. // create _myButton control and add event handler
42. _myButton = new HtmlButton();
43. _myButton.InnerText = "Add your Name to title";
44. _myButton.ServerClick += new EventHandler(_myButton_Click);
45. Controls.Add(_myButton);
46. _myTextBox = new HtmlInputText();
47. _myTextBox.Value = "";
48. Controls.Add(_myTextBox);
49. }
50. /// Render this Web Part to the output parameter specified.
51. protected override void RenderWebPart(HtmlTextWriter output)
52. {
53. _myTextBox.RenderControl(output);
54. _myButton.RenderControl(output);
55. }
56. }
57. }
You may notice that this code looks like the code shown for ASP.NET the custom control in a previous section. This should come as no surprise because Web Parts are ASP.NET custom controls.
However, there exist several differences.
The first is in Line 14:
· The Web Part class derives from Microsoft.SharePoint.WebPartPages.WebPart class, as opposed to a stock ASP.NET control, which derives from one of System.Web.UI.Control or System.Web.UI.WebControls.WebControl.
· However, the WebPart class itself derives from System.Web.UI.Control class and this is what ties a Web Part into the entire ASP.NET control infrastructure. To the features of a stock ASP.NET control, the Web Part class adds the following:
· Creates the title bar, border etc., around the control, which users can customize by setting properties and applying themes.
· Handles interactions with the WebPartPage and WebPartZone classes to support adding, moving, hiding, deleting, connecting, and personalizing Web Parts on a page. This is what “plugs” a Web Part into the Windows SharePoint Services infrastructure.
· Provides a set of common properties such as Title, Height, Width, FrameState, etc.
The second difference is in Line 51.
· When rendering an ASP.NET control, you typically override the Render method of the base class; however, the WebPart class has sealed the Render method. Developers should override the special RenderWebPart method provided by the WebPart class.
The rest of the code show above is straightforward ASP.NET control code:
· Lines 19 and 20 create HTML text controls used in this web part (an input text and a button control)
· Lines 21 - 25 define the event handler for the button click event. This handler simply takes the value in the text box, appends this to the value of the custom property called “Text”, and sets this as the new title. Thus if the Text Property is “New Web Part” and the string “Ralph” is typed in the input text box, then the button click will set the new title of the Web Part to “Ralph’s New Web Part”.
· Lines 26 - 37 define the accessors for the Text custom property.
· In lines 38 - 49, we override the CreateChildControls method of the base class to initialize the controls in this Web Part. The controls are added to the collection of child controls for this Web Part class. Also, we add the click event handler defined in lines 21-25 to the HtmlButton’s ServerClick event.
Rendering the Web Part at Design Time
FrontPage 2003 provides a design time preview of Web Parts on a Web Part Page at design time. The developer can exercise precise control over this design time rendering. This is done by implementing the IDesignTimeHtmlProvider interface in the Web Part. This interface has a single method, called GetDesignTimeHtml, which returns the HTML string used to render the Web Part. Design tools such as FrontPage 2003 which leverage Windows SharePoint Services, check to see if this interface is implemented; if it is, then they call the GetDesignTimeHtml method for rendering. Otherwise, they use the default rendering for that Web Part.
Creating a Web Part Description File (dwp)
The Windows SharePoint Services infrastructure uses the Web Part description file which contains metadata about the Web Part.
Shown below is the dwp file for the Web Part created in the previous section:
1.
2.
3. New Web Part
4. WebPart1.
5. WebPartLibrary1, Version=1.0.0.0, Culture=Neutral,
PublicKeyToken=334fd085a590fb9f
6. WebPartLibrary1.WebPart1
7.
As you can see, the dwp is an XML file. The root element of this file is the element, and it contains, among others, the following tags:
· specifies the default title of the Web Part
· specifies the pop up description for the Web Part which FrontPage 2003 and the browser displays.
· specifies the name of the assembly that contains the implementation for this Web Part.
· specifies the class within the assembly which implements the Web Part. This is required because an assembly can implement more than one Web Part and/or other ASP.NET controls. Notice how the value of the TypeName tag corresponds to the namespace declaration (line 11) and class declaration (line 14) shown in the previous section.
Note You can export dwp files in FrontPage 2003, using Tools/Save Web Part to/File…
Deploying the Web Part
You can deploy a Web Part in two different ways:
· Place it in one of the Windows SharePoint Services Web Part Libraries – the virtual server library, site library, or the online library. This makes it available to all pages in the site.
· Import it into a specific page. This makes the Web Part available only to that page and it will not appear in any gallery.
Deploying in a Windows SharePoint Services Library
Before deploying the Web Part into a Windows SharePoint Services Library, you must build a Web Part Package. A Web Part Package is a cabinet (.cab) file that contains the following items:
· Manifest.xml
· .dwp files
Note: When using the Web Part Library template for Microsoft Visual Studio.net 2003, it automatically creates the manifest.xml and dwp files for you.
· Web Part assemblies: one or more .NET assemblies and are the result of building your Web Part Library solution
· Class resource files contain bitmaps and other resources required for your Web Part.
The details of the structure of manifest.xml, and the modalities of building a CAB file are outside the scope of this paper. For details, please see the white paper entitled “Packaging and Deploying Web Parts for Microsoft Windows SharePoint Services” at http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnspts/html/SharePoint_DeployingWebParts.asp.
Once you have a CAB file, you can use the stsadm.exe tool on the server running Windows SharePoint Services to add the Web Part to the virtual server library. The typical command line for using stsadm.exe to add a Web Part looks like below:
stsadm.exe –o addwppack –filename path_to_CAB_file
The stsadm.exe tool is typically available in
:\Program Files\Common Files\Microsoft Shared\web server extensions\60\BIN
For more details on using stsadm.exe tool, see the “Packaging and Deploying Web Parts for Microsoft Windows SharePoint Services” white paper referenced above.
Using the stsadm.exe tool deploys the Web Part into the virtual server library and you can use with FrontPage 2003 or the Web Browser interface. You can make any Web Part in the virtual server library available in the site library. For more details on managing Web Parts in these libraries, see “FrontPage 2003: Working with Web Part Libraries”.
Importing the Web Part into a Specific Page
You can also simply import a Web Part onto a page. The process of import does not add the Web Part to the Virtual, Site, or Online libraries; it is just available on a given page. Before you can import a Web Part onto a page, you must perform the following tasks on the machine running Windows SharePoint Services:
1. Copy the Web Part assembly to the :\inetpub\wwwroot\bin folder.
2. Register the Web Part as a safe control. Do this by editing the web.config file, located in the :\inetpub\wwwroot folder. For our sample Web Part, this involves adding the following lines under the // block:
Namespace="WebPartLibrary1" TypeName="*" Safe="True" />
3. Make the dwp file for the Web Part available for the users that want to import this Web Part.
Assuming these steps are performed, the Web Part can be imported onto a page using FrontPage 2003 using the following steps:
1. Bring up the Web Parts task pane: View/Taskpane and select “Web Parts” from the dropdown list of available task panes.
2. Under Add Web Parts, click Import.
3. Browse to or type in the location of the .dwp file for the Web Part you want to import.
4. Click “Upload”. The Web Part now appears on the task pane.
You can now drag and drop the part onto the page.
Using the Web Part in FrontPage 2003
In this section, we will assume that our sample Web Part is available in the Virtual Server Library of the Windows SharePoint Services installation.
Using this Web Part is no different from using any other Web Part. To use a Web Part, follow these steps:
1. Open the site you wish to work with in FrontPage 2003. For the purposes of this section, we will assume the site is located at the URL: http://myserver/my-workgroup.
2. Click on Data/Insert Web Parts to open the Web Parts taskpane in FrontPage 2003.
3. Click on Virtual Server Gallery to display the available Web Parts. You should see the sample Web Part available there; its title is New Web Part.
Below is a screenshot of the task pane:
4. Drag and drop this Web Part into an appropriate zone in your web page. For the purposes of illustration, let us assume that we have dragged the Web Part into the default.aspx page of a Windows SharePoint Services site created using the Team Site template.
5. Save the page and run it in the browser by typing the appropriate URL. We have used the URL http://myserver/default.aspx.
6. Locate the Web Part you just added (it should be titled “New Web Part”).
7. Type your name in the text box, and click on Add your Name to title button. The title will change to (assuming the name you typed was Murali) “Murali’s New Web Part”.
Below is a screenshot of this:
Recall that this Web Part has a custom property called Text. Refer to the Web Part code in “Example: A Sample Web Part”.
Note the following:
· Line 22 – 25 specifies that the event handler for the button click event on the Add your Name to title button take the value of the Text property, append it to the string typed in the text field, and set this as the value of the title.
· Lines 26 – 37 implements the custom property and specifies that this property has to be put under the category “Miscellaneous”.
To manipulate this property in FrontPage 2003, follow these steps:
1. In the Web Part properties dialog box, notice the new category called Miscellaneous. Expanding this category shows a property called Text and a text box to enter the value for it. FrontPage 2003 automatically displays a text box to enter the value of this property because the data type of this property is string (line 27 of the code in “Example: A Sample Web Part”)
2. Type “Fancy Web Part” as the new value of this property.
3. In FrontPage 2003, right click on our example Web Part and select Web Part Properties in the pop-up menu.
Below is a screenshot of how this should look:
4. Click OK, save changes and run the page in the browser by typing the appropriate URL. We have used the URL http://myserver/default.aspx.
5. Locate our example Web Part (it title should be “New Web Part”).
6. Type your name in the text box, and click on Add your Name to title button. The title will change to (assuming that the name you typed was Murali) “Murali’s Fancy Web Part”.
Below is a screenshot of this:
Note By default, the custom properties you create and specify as browsable are automatically displayed in the default property pane, making their use transparent to the user. If the default property pane isn't rich enough in functionality, you can create a custom user interface called a ToolPart to manipulate your custom properties. For information on creating a ToolPart, see the http://msdn.microsoft.com/library/default.asp?url=/library/en-us/spptsdk/html/CreateWPCustomProperties.asp.
Labels: Asp.Net, MOSS 2007, webparts, WSS 3.0