Sunday, January 27, 2013

SharePoint 2010 - WebParts Overview

In this post we will  discuss about the fundamentals of Webparts in SharePoint 2010.

Webparts
A Web Part, also called a Web Widget, is an ASP.NET server control which is added to a Web Part Zone on Web Part Pages by users at run time. The controls enable end users to modify the content, appearance, and behavior of Web pages directly from a browser. It can be put into certain places in a web page by end users, after development by a programmer.

Types of Webparts
There are 2 types of webparts in SharePoint.
1) ASP.Net Webparts: These webparts are built on top of ASP.Net and inherit from the WebPart base class in the System.Web.UI.WebControls.WebParts. We can use these web part to create rich and highly reusable custom webparts.
2) SharePoint Webparts:  These Web Parts inherits from the WebPart base class in the Microsoft.SharePoint.WebPartPages namespace. These Web Parts can only be used in SharePoint websites to provide backwards compatability with MOSS 2003 webparts.

Webpart Archietecture
Following figure shows the overall architecture of a SharePoint Webpart.

Where, the main components supporting Webparts are:
1) Webpart Zones
To be able to fully utilize a Web Part in a page, you need to define a WebPartZone control, which is a container for a set of Web Parts.
2) Webpart Manager
Another fundamental control in the Web Parts architecture is the WebPartManager, which handles all the tasks related to Web Parts lifetime management, such as loading/unloading and serializing/deserializing their state within the current page, and connecting Web Parts into Web Part Zones. The WebPartManager control has been redefined in SharePoint into a custom implementation called SPWebPartManager, which handles some specific activities exclusively available in SharePoint.
3) Webpart Page
In order to leverage these controls, SharePoint also provides a custom page type called WebPartPage (available in the Microsoft.SharePoint.WebPartPages namespace) that includes a preconfigured and unique instance of a SPWebPartManager control and the main Web Part Zones, which are useful for rendering a page made of Web Parts.

Webpart Life Cycle Events
1) OnInit: Configuration values set using WebBrowsable properties and those in web part task pane are loaded into the web part.
2) LoadViewState: The view state of the web part is populated over here.
3) CreateChildControls: All the controls specified are created and added to controls collection. When the page is being rendered for the first time the method generally occurs after the OnLoad() event. In case of postback, it is called before the OnLoad() event. We can make use of EnsureChildControls() - It checks to see if the CreateChildControls method has yet been called, and if it has not, calls it.
4) OnLoad: User Generated Event  for e.g. button click on the web part.
5) OnPreRender: Here we can change any of the web part properties before the control output is drawn.
6) RenderContents: Html Output is generated.
7) SaveViewState: View state of the web part is serialized and saved.
8) Dispose: UnLoad.

Webpart Life Cycle Stages
Based on the events mentioned aove following are the webpart life cycle pages.
1) Initialization Stage
Web Part’s OnInit() is called BEFORE the Page’s OnInit()
The SPWebPartManager loads and applies any personalization settings
2) Loading Stage
Web Part’s OnLoad() is called AFTER the Page’s OnLoad()
3) Render Stage
CreateChildControls() is called.
OnPreRender() is called AFTER the page’s OnPreRender()
RenderContents() is called.

Adding a Webpart
Following are the steps to create a webpart page and add a webpart to it. In this example we will use the in-built content editor webpart.

1) Open SharePoint site and click on Site Action . From Site Action drop down select more option

2) Select Page option and then select Web Part page. And click on Create

3) Give a name of your choice to the page. Select a layout template. Select Share Document as place to save this page and click on Create.

4) You will get page template as below, if you have selected the same layout as of mine.

5) Click on Add a Web Part and select Media and Content from categories

6) Now in Content Editor type the text.

7) Stop Editing the page. Web part will be displayed as follows.
Hope you like this post!

1 comment: