Click here to Skip to main content
15,867,704 members
Articles / Web Development / ASP.NET
Article

Generating XP style webparts from a web control

Rate me:
Please Sign up or sign in to vote.
4.67/5 (49 votes)
13 Jul 20039 min read 364.7K   5K   195   133
Generating XP style webparts from a web control

Sample Image - links.jpg

Introduction

The Internet is a tremendously important resource professionally and for private use, yet organizing access to frequently visited sites is left to the Favorites menu. For some reason Favorites doesn't work for me. It's great for filing away and organizing bookmarks to pages of interest but, for me, its not visible enough. The Links toolbar is good for a few items, but like many users, I visit a core set of about 30 sites and this is too many for the Links toolbar. So to try and address my own requirements, I've come up with my own home page that might also work for you. The page uses a web control that serves as an illustration of an ASP.NET control in action and that you might find a use for elsewhere.

As you can see from the image, the control is included in an ASP.NET (.aspx) page and comprises one or more group boxes. In this case the web part is one that Microsoft previously used on their MSDN site for presenting current information, grouped by topic - just as I want to have happen. The group boxes are expandable, they remember their collapsed/expanded state (even between successive IE sessions), so that the information on view can be restricted, but always show the header, so I know what's available and can be moved around. So far so good, but creating a web part using HTML is, while not not challenging, tedious because the tables have to be laid out just-so and use specific style classes recognized by the web part. Also, having the web part implemented in HTML means that changes are not straight forward as there is no separation of code and content. Sounds like an ideal candidate for being rendered by a web control.

The web page

Allowing the web parts to be generated automatically simplifies the process of creating a page and allows the source of the data to be a database or XML file. In my case I've chosen to use an XML file but more about that in a moment. Here is the HTML for the web page shown above:

HTML
<%@ Page Language="vb" AutoEventWireup="false" 
         Inherits="System.Web.UI.Page" %>
 <%@ Register TagPrefix="Links" 
         Namespace="Lyquidity.UtilityLibrary.WebControls" 
         Assembly = "Lyquidity.UtilityLibrary.WebControls" %>
 <HTML>
  <HEAD>
   <style> BODY { font-family:verdana,arial,helvetica; margin:0; }</style>
  </HEAD>
  <body onload="preloadImages();">
   <table cellpadding="0" cellspacing="0" width="100%" height="100%" 
                                                       border="0">
    <tr>
     <!-- Column for web gadgets/parts -->
     <td width="150" valign="top">
      <Links:WebPartsControl id="LinksWebParts" 
               LinkFrameName="LinkPage" 
               DefaultPage="http://www.my_fave_page.com" runat="server" />
     </td>
     <td width="20"> </td>
     <!-- Column to display default or frame link page -->
     <td width="100%">
      <iframe id="LinkFrame" name="LinkPage" width="100%" height="100%" 
        frameborder="0" scrolling="auto" 
        src="<%=LinksWebParts.DefaultPage%>">
      </iframe>
     </td>
    </tr>
   </table>
  </body>
 </HTML>

Not much to it. The key line is the one containing the <Links:WebPartsControl> tag. The tag is registered as required and the tag reference (<Links:WebPartsControl ... >) initializes the WebPartControl class that, in turn, presents the required group boxes. Note that the page is inherited directly from System.Web.UI.Page and does not use a code-behind implementation. This is just to remove all obfuscation from the example. The disadvantage of this page as presented is that it cannot be used in the designer.

The web part sits within a table comprising 3 columns. The positioning of the web part is controlled exclusively by this "outer" HTML. In this case, it sits within the left hand column. The middle column is used to provide a gap between it and the default page that is displayed on the right. The right hand column contains a frame, the source for which is a default page. You could just type in the name of a page to use, but the WebPartsControl provides a default to use. The default is initialized within the control to http://www.google.com (that, of course, you can change). But you can override this default by specifying one in the tag definition (see the HTML) or by using a parameter on the page reference (see below).

The XML file

The number of web parts and the links to be hosted by any given web part is defined by an associated xml file. Here is an example:

XML
<?xml version="1.0" encoding="utf-8" ?>
 <links> 
  <framelinks title="Code Pages" id="BE96D11D-326D-4910-A837-84D658DDF024">
   
   <link name="Code Project" 
         page="&lt;A href=&quot;http://www.codeproject.com/&quot;&gt;
         http://www.codeproject.com&lt;/A&gt;" alttext="Code Project" />
   <link name="Programmers Heaven" 
          page="&lt;A href=&quot;http://www.programmersheaven.com/&quot;&gt;
          http://www.programmersheaven.com&lt;/A&gt;" 
          alttext="Programmers Heaven" />
   <link name="Planet Source Code" 
          page="&lt;A href=&quot;http://www.planetsourcecode.com/&quot;&gt;
          http://www.planetsourcecode.com&lt;/A&gt;" 
          alttext="Planet Source Code" />
   <link name="Got Dot Net" 
          page="&lt;A href=&quot;http://www.gotdotnet.com/&quot;&gt;
          http://www.gotdotnet.com&lt;/A&gt;" alttext="Got Dot Net" />
   <link name="MSDN" page="&lt;A href=&quot;http://msdn.microsoft.com/&quot;&gt;
          http://msdn.microsoft.com&lt;/A&gt;" 
          alttext="Microsoft Developer Network" />
   <link name="24 / 7" page="&lt;A href=&quot;http://www.net247.com/&quot;&gt;
          http://www.net247.com&lt;/A&gt;" 
          alttext="Microsoft Developer Network" /> 
  </framelinks> 
  <popuplinks title="Links" id="E812F25B-3099-412e-A7E2-EA8FC397D169"> 
   <group name="Search Engines"> 
    <link name="Google" url="&lt;A href=&quot;http://www.google.co.uk/&quot;&gt;
          http://www.google.co.uk/&lt;/A&gt;" alttext="UK Google" />
    <link name="Yahoo" url="&lt;A href=&quot;http://www.yahoo.co.uk/&quot;&gt;
          http://www.yahoo.co.uk/&lt;/A&gt;" /> 
   </group> 
   <group name="Legal"> 
    <link name="Inland Revenue FAQ" 
          url="&lt;A href=&quot;http://www.inlandrevenue.gov.uk/&quot;&gt;
          http://www.inlandrevenue.gov.uk&lt;/A&gt;" />
    <link name="VAT" 
          url="&lt;A href=&quot;http://www.hmce.gov.uk/business/vat/vat.htm&quot;&gt;
          http://www.hmce.gov.uk/business/vat/vat.htm&lt;/A&gt;" />
    <link name="Companies House" 
          url="&lt;A href=&quot;http://www.companies-house.co.uk/&quot;&gt;
          http://www.companies-house.co.uk&lt;/A&gt;" /> 
   </group> 
  </popuplinks> 
  <popuplinks title="Other" id="E912F25B-3099-412e-A7E2-EA8FC397D169"> 
   <group name="Map Info"> 
    <link name="Street Map" 
          url="&lt;A href=&quot;http://www.streetmap.co.uk/&quot;&gt;
          http://www.streetmap.co.uk&lt;/A&gt;" />
   
   </group> 
   <group name="ISP"> 
    <link name="BlueYonder Status" 
          url="&lt;A href=&quot;http://status.blueyonder.co.uk:888/&quot;&gt;
          http://status.blueyonder.co.uk:888/&lt;/A&gt;" />
    <link name="BlueYonder Selfcare" 
          url="&lt;A href=&quot;http://selfcare.blueyonder.co.uk/&quot;&gt;
          http://selfcare.blueyonder.co.uk/&lt;/A&gt;" /> 
   </group> 
  </popuplinks> 
 </links>

There are two type of links: "frame" and "popup". A frame link will cause the referenced page to be displayed in a named frame (which defaults to _Parent), while a popup will always display the page in the parents frame. The example use of the web control given above, specifies that the frame named LinkPage is to be used. There are two other significant differences between frame and popup link types: there can be only one FrameLink entry; popup links can have groups. The XML sample shown illustrates all tags and attributes recognized by the web control, so a moments review will provide almost all the information needed. The ID attribute is worth an additional comment. The web part will store its expanded/collapsed state and order so that it can be retrieved then next time IE is used. However it can only restore order if the parts being used have unique IDs. I've used GUIDs but any other unique ID will do. For example "A", "B", "C"...

The web part

The web part control is based on a web part implementation like the one that used to feature on the MSDN site. A web part is a component comprising some HTML and Java Script. Unlike a component in .NET, the presentation (HTML) is not in the same place as the code. But like a .NET component, the web part code encapsulates the functionality of the component. The link between HTML and code is a style class. In IE, a style class can have its behavior attribute set to refer to a file containing the code and a <component> tag. The following diagram attempts to depict these relationships:

HTML
<element 
    class="MyComponentStyle">
              |
              V
        MyComponentStyle 
        { behaviour:url(MyComponentCode.xxx); }
                           |
                           V
    <PUBLIC:COMPONENT> 
     <PUBLIC:ATTACH EVENT="oncontentready"   ONEVENT="fnInit()"   />
     <PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="fnGrab()"   />
     <PUBLIC:ATTACH EVENT="ondragstart" ONEVENT="fnCancel()" /> 
     <SCRIPT LANGUAGE="JavaScript"> 
      function fnInit()
      {
      ....
      } 
      function fnGrab()
      {
      ....
      } 
      function fnCancel()
      {
      ....
      } 
     </SCRIPT> 
    </PUBLIC:COMPONENT>

The code for the web part component used in this control can be found in the webparts.htc file in the webparts folder. The styles used by the web part, which includes the one that links the web part HTML to web part code, can be found in the file ie.css again in the webparts folder.

The HTML used for the web parts can be found in both the Render() method of the web control and within files in the HTML folder. This folder contains four files. Each contains a snippet of the HTML used to show the collapsible group boxes. The HTML is broken up into snippets so that they can be reused easily by the web control. They are held in files so that they can, if needed, be modified without the need to recompile the web control.

The first file to review is webpart.txt the contents of which are reproduced here:

HTML
<!-- Web part Start -->
<table cellpadding="0" cellspacing="0" class="clsPart"
           width="150" border="0" id="%id">
 <tr>
  <td class="clsPartHead" valign="top" align="left" height="19" width="15">
   <img class="clsPartHead" src="webparts/images/gripblue.gif"
           height="19" width="15">
  </td>
  <td class="clsPartHead" valign="middle" align="left" width="150">
   <b class="clsPartHead">%WebPartTitle</b>
  </td>
  <td class="clsPartRight" valign="top" align="right"
           height="19" width="25">
   <img class="clsMinimize" src="webparts/images/downlevel.gif"
           height="19" width="25">
  </td>
 </tr>
 <tr>
  <td colspan="3">
   <table bgcolor="#ffffff" width="100%" cellpadding="0"
           cellspacing="0" border="0">
    <tr>
     <td bgcolor="#6699cc" colspan="1" width="1px"
          valign="top"><div
          style="margin:1px;padding:0px;"></div>
     </td>
     <td width="150" colspan="2" bgcolor="#f1f1f1" valign="top">
      <table width="150" cellpadding="0" cellspacing="0" border="0">
       <tr>
        <td colspan="2" height="10"></td>
       </tr>
       %Elements
      </table>
     </td>
     <td bgcolor="#6699cc" colspan="1" width="1px"
           valign="top"><div
           style="margin:1px;padding:0px;"></div>
     </td>
    </tr>
    <tr>
     <td bgcolor="#6699cc" colspan="3" height="1"
           valign="top"><div
           style="margin:1px;padding:0px;"></div>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
<!-- Web part end -->

This HTML defines the table that controls the layout of a group box, the position of the button and the grab handle, its title and where the content will be located. This snippet contains the identifiers %WebPartTitle and %Elements. The web control will substitute these identifiers with HTML (based on HTML snippets from other files) to create a complete group box that is returned to the user's browser.

You will see that the main table of this snippet is assigned a style class. As well as providing format styling, the use of this class allows the associated component code, residing in the .htc file, to identify the HTML elements that are part of the component. In this case the class is called clsPart.

The WebParts control

The entire web part is a collection of any number of the group boxes. This list of group boxes are, in turn, held within a containing table. The HTML for this table can be found in the Render() method of the web control:

HTML
<table cellpadding='0' cellspacing='0' 
  width='150' id='topTable' class='clsPartContainer'
  style='MARGIN-LEFT:10px; MARGIN-RIGHT:10px' border='0'> 

Critical to the web part is the use of the style class clsPartContainer. It is this class, defined in webparts/ie.css, that has its behaviour bound to the code in webparts.htc.

The control also links in the required style sheets, but its main task is to generate the HTML required to present to the user, the links defined in the XML file.

Properties

The control presents four properties:

LinkFrameName

The name of the frame in which pages referenced in <framelink> links should be displayed. By default this is _Parent in which case the behavior of popup link and frame link types is identical.

HTML

The name of the web folder containing the web part snippets. By default this is HTML, a folder located beneath the containing page, for example:

HTML
<A href="http://www.mysite.com/linkpages/html">
         http://www.mysite.com/linkpages/html</A>

DefaultPage

This defines the page that will be displayed by default (if required) and defaults to

HTML
<A href="http://www.google.com">http://www.google.com</A>

The value of the DefaultPage property can be modified in two ways (without changing the web control code):

  1. By including a value for the DefaultPage property when the control is defined on the containing web page:
    HTML
    <Links:WebPartsControl id="LinksWebParts" 
             LinkFrameName="LinkPage" 
             DefaultPage="&lt;A href=&quot;http://www.my_fave_page.com/&quot;&gt;
             http://www.my_fave_page.com&lt;/A&gt;" 
             runat="server" /> 

    In this example, the default page displayed in the the <IFrame> will be

    HTML
    <A href="http://www.my_fave_page.com">http://www.my_fave_page.com</A>
  2. By including a parameter in the address:
    HTML
    <A href="http://localhost/links.aspx?DefaultPage=
       http://www.my_fave_page.com">
       http://localhost/links.aspx?DefaultPage=
       http://www.my_fave_page.com</A>

XMLFile

This defines the name of the XML file used to contain the link information. The default is links.xml. Like the DefaultPage, this property can be modified by including a value when the control is defined on the containing web page:

HTML
<Links:WebPartsControl id="LinksWebParts" 
           LinkFrameName="LinkPage" 
           XMLFile="BMSLinks.xml" runat="server" /> 

or by including a parameter in the address:

HTML
<A href="http://localhost/links.aspx?XMLFile=BMSLinks.xml">
   http://localhost/links.aspx?XMLFile=BMSLinks.xml</A>

Things that could improve the control

  • Add the option to include icon by links
  • Provide a facility to hide the control (like a toolbox)
  • Add ability for setting width property (this is difficult because some of the width determinants are in style classes and within the .htc file)
  • Add a colour property (this far from impossible but yet more difficult as the colour is intrinsic to the images used)

Limitations

Beside the limitations implied in the "things to do" list, the HTML generated will only work when display in IE 4.01 browsers or higher. This is because the web part uses behaviors, an IE specific feature.

Updates

  • 2003-06-14 - Fixed problem with drag window not disappearing
  • 2003-07-10 - Added support for multiple controls on a page The condition of having two controls on a page was never tested. As it turns out this didn't work. Now as many controls as are required can exist within any page, and each control stores is data independently.
  • 2003-07-10 - Added support for the use of the control on a page that does not have an HTML or Webparts folder The sub-folder containing the HTML snippets used by the control can be referenced using a relative path so that only one copy of the HTML folder is required (rather than one per page). An attribute called HTMLSubFolder can be set on the control to specify the relative location of the HTML folder and corresponding web parts folder.
  • 2003-07-14 - Included .cmd file to compile the source (for those without VB.NET)

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United Kingdom United Kingdom
Independent software development for clients including Microsoft. Design and development of modules for financial reporting and business intelligence.

Comments and Discussions

 
GeneralRe: How to change space between blocks Pin
Jón Sveinsson15-Jul-03 12:11
Jón Sveinsson15-Jul-03 12:11 
GeneralRe: How to change space between blocks Pin
Bill Seddon15-Jul-03 12:31
Bill Seddon15-Jul-03 12:31 
GeneralMissing function 'preloadImages()' Pin
iBos25-Jun-03 13:26
iBos25-Jun-03 13:26 
GeneralRe: Missing function 'preloadImages()' Pin
Bill Seddon25-Jun-03 21:14
Bill Seddon25-Jun-03 21:14 
GeneralRe: Missing function 'preloadImages()' Pin
iBos26-Jun-03 13:09
iBos26-Jun-03 13:09 
GeneralHelp me, Mr. Bill Seddon Pin
Member 44446221-Jun-03 0:28
Member 44446221-Jun-03 0:28 
GeneralRe: Help me, Mr. Bill Seddon Pin
Tatham21-Jun-03 18:09
Tatham21-Jun-03 18:09 
GeneralRe: Help me, Mr. Bill Seddon Pin
Bill Seddon22-Jun-03 9:34
Bill Seddon22-Jun-03 9:34 
GeneralCuriosity!!! Pin
Anonymous20-Jun-03 2:37
Anonymous20-Jun-03 2:37 
GeneralRe: Curiosity!!! Pin
Bill Seddon20-Jun-03 6:01
Bill Seddon20-Jun-03 6:01 
QuestionHow can I modify the webPartsControl.vb Pin
merboy20-Jun-03 0:56
merboy20-Jun-03 0:56 
AnswerRe: How can modify the webPartsControl.vb Pin
Bill Seddon20-Jun-03 1:32
Bill Seddon20-Jun-03 1:32 
GeneralI upload it to www.brinkster.com but it can not run Pin
Member 44446219-Jun-03 0:34
Member 44446219-Jun-03 0:34 
GeneralRe: I upload it to www.brinkster.com but it can not run Pin
Bill Seddon19-Jun-03 1:06
Bill Seddon19-Jun-03 1:06 
GeneralRe: I upload it to www.brinkster.com but it can not run Pin
Member 44446219-Jun-03 4:35
Member 44446219-Jun-03 4:35 
GeneralRe: I upload it to www.brinkster.com but it can not run Pin
Bill Seddon19-Jun-03 5:15
Bill Seddon19-Jun-03 5:15 
GeneralRe: I upload it to www.brinkster.com but it can not run Pin
FinishedOnTime23-Jun-03 7:53
FinishedOnTime23-Jun-03 7:53 
GeneralRe: I upload it to www.brinkster.com but it can not run Pin
Bill Seddon23-Jun-03 11:41
Bill Seddon23-Jun-03 11:41 
QuestionHow can I install it? Pin
Member 24805318-Jun-03 4:41
Member 24805318-Jun-03 4:41 
AnswerRe: How can I install it? Pin
Bill Seddon19-Jun-03 1:15
Bill Seddon19-Jun-03 1:15 
GeneralRe: How can I install it? Pin
Member 24805319-Jun-03 2:45
Member 24805319-Jun-03 2:45 
Generalframelinks open in iframe or client workspace Pin
ICahn17-Jun-03 22:04
ICahn17-Jun-03 22:04 
GeneralRe: framelinks open in iframe or client workspace Pin
Bill Seddon17-Jun-03 22:50
Bill Seddon17-Jun-03 22:50 
GeneralHeads up Pin
Bill Seddon17-Jun-03 5:13
Bill Seddon17-Jun-03 5:13 
GeneralRe: Heads up Pin
Bill Seddon17-Jun-03 23:38
Bill Seddon17-Jun-03 23:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.