WebParts and Personalization Part 1 : Just a Start

In the last post I gave a brief introduction about webpart controls and page modes. In this post I will give an easy example of how to build a simple webpage that uses webparts.

First of all create a new web project. While in design mode, expand the Visual Studio Toolbox and open its Web Parts category. It’s from here that we can start adding web part controls to our page. In ASP.NET every web parts page must contain one and only one WebPartManager control. Furthermore, in a web parts page, the WebPartManager must be the first web part control in the control hierarchy. Drag the WebPart-Manager control from your Toolbox and add it to the top of your page.

Design your page to include two zones left zone and right zone. To do this first make the body tag in your source code of the .aspx page looks like this :



Next, drag a WebPartZone control from the Toolbox into each of the HTML DIV elements that we added previously; these two zones will contain the web parts. When we’ve completed the page, you will be able to drag web parts between the two zones and have the personalization mechanism automatically keep track of which zone each web part belongs to. Now that the page has zones, we can add the web parts to it so the source code of your .aspx page looks like this :



Then Open the Standard category panel of the Toolbox and drag a calendar onto the left zone and drag a label web control onto the middle zone. Notice that when those controls are added to the zones, additional user interface (UI) elements are wrapped around them—namely, a title and a little down arrow. These UI elements are not related in any way to the underlying calendar or label controls but instead are specific to web parts and this will be the source code of your .aspx page :



Now your page is ready to test webparts on it but remains only one thing which is to use the appropriate WebParts display mode. The default display mode of the page is “Browse” mode which Displays Web Parts controls and UI elements in the normal mode in which users view a page. We need to change our page to “Design” mode to allow moving webparts between Zones. To do this we will add a dropdownlist which has two items: Browse and Design and don’t forget to set the property AutoPostBack to True. this will be the code in the SelectedIndexChanged event of the DropDownList :



Run your web page normally When the page is first displayed it will be in its default state “browse” mode. Change it to the design mode from the dropdownlist drag both web parts into the one zone Close the browser and then start the application up again. Notice that the web parts page “remembered” which zone the web parts were in. This is the result of the personalization saving the customization changes and reapplying them for us. Now you built your first webparts example. Hope this part is useful enough till now.

WebParts and Personalization Part 0 : Introduction

WebPart Controls

The Web Parts control set is extensive, but some controls are essential either because they are required for Web Parts to work, or because they are the controls most frequently used on Web Parts pages. As you begin using WebParts and creating basic Web Parts pages, it is helpful to be familiar with the following essential WebParts controls:

• WebPartManager
  

  Manages all Web Parts controls on a page. One (and only one) WebPartManager control is required for every Web Parts page.

• CatalogZone

  Contains CatalogPart controls. Use this zone to create a catalog of Web Parts controls from which users can select controls to add to a page.

• EditorZone

  Contains EditorPart controls. Use this zone to enable users to edit and personalize Web Parts controls on a page.

• WebPartZone

  Contains and provides overall layout for the Web Part controls that compose the main user interface (UI) of a page. Use this zone whenever you create pages with Web Parts controls. Pages can contain one or more zones.

• ConnectionsZone

  Contains Connection controls.

• GenericWebPart

  Renders the primary UI; most Web Parts UI controls fall into this category. For maximum programmatic control, you can create custom Web Parts controls that derive from the base WebPart control. You can also use existing server controls, user controls, or custom controls as Web Parts controls. Whenever any of these controls are placed in a zone, the WebPartManager control automatically wraps them with GenericWebPart controls at run time so that you can use them with WebParts functionality.

• CatalogPart
  

  Contains a list of available Web Parts controls that users can add to the page

• Connection
  

  Creates a connection between two Web Parts controls on a page. The connection defines one of the Web Parts controls as a provider (of data) and the other as a consumer.

• EditorPart

  Serves as the base class for the specialized editor controls.

Web Part Page Modes

A Microsoft ASP.NET Web Parts page can enter several different display modes. A display mode is a special state that applies to an entire page, where certain user interface (UI) elements are visible and enabled, while others are invisible and disabled. Display modes enable users to perform certain tasks to modify or personalize a page, such as editing Web Parts controls, changing the layout of a page, or adding new controls from a catalog of available controls.

How Web Parts Display Modes Work?

A page can be in only one display mode at a time. The WebPartManager control contains the implementation for the display modes that are available in the Web Parts control set and manages all display mode operations for a page. Typically, you provide a UI that enables users to switch among display modes as needed. You can change a page’s display mode programmatically, using the DisplayMode property. There are five standard display modes in the Web Parts control set: browse (the normal mode in which a user views a Web page), design, edit, catalog, and connect. Each of these display modes is derived from the WebPartDisplayMode class. The following list describes the display modes and summarizes their behavior:

• Browse
  

  Displays Web Parts controls and UI elements in the normal mode in which users view a page.

• Design
  

  Displays zone UI and enables users to move Web Parts controls to change the layout of a page.

• Edit
  

  Displays special editing UI elements and enables users to edit the controls on a page. Allows dragging of controls, just as design mode does.

• Catalog
  

  Displays special catalog UI elements and enables users to add and remove page controls. Allows dragging of controls, just as design mode does.

• Connect
  

  Displays special connections UI elements and enables users to connect Web Parts controls.

In this part I showed an introduction about WebPart Controls and Page Modes. See you soon

WebParts and Personalization

one of the most ASP.NET 2.0 new features is WebParts. In this series we will assume that the reader already knows how to use WebParts because the main goal from this series is to know how to build your custom WebParts which means to use your own database to save Personalization data, build your own WebPartZone, and we will make also a custom pop up CatalogZone which will help alot many developers with their questions.

Frankly there is a book that i appreciate alot that contains everything anyone can imagine about webparts. its title is "Manning - ASP.NET 2.0 Web Parts in Action (2007)". Don't hesitate to download, this will help you alot.

How To Open a Web Page In a New Browser ASP.NET?

Many Beginer Web Developers wonder how they can open a new web page in a new web browser and setting some options for it.

In this article which wrote on CodeProject I discussed two methods of opening a new web page in a new web browser. The first method is by using the HyperLink control and the other is by using JavaScript.

you can take your time reading the article hoping to get all the benefits from it and waiting for your comments, questions and queries .

Playing With Registry

This is an article that i wrote before to make it easy for you to use Windows Registry to achieve 2 main goals :

1. Save and Load my application settinggs (e.g. font's color and size, application's position etc.)
2. How to use the Registry to control my Windows settings?

you can take your time reading the article on Codeproject hoping to get all the benefits from it and waiting for your comments, questions and queries .

Launching The Programmers Community

Fellow computer devotees! i have started this blog site to help all you computer wizards under development with the complex world of programming. i hope to pass on the knowledge and build a network where-by everyone with questions can ask and everyone with answers may answer.

Comments? Questions? Queries? Don't be shy! leave a post and we'll get to you as soon as humanly possible!