Click here to Skip to main content
Click here to Skip to main content

Generating XP style webparts from a web control

, 13 Jul 2003
Rate this:
Please Sign up or sign in to vote.
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:

<%@ 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 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:

<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:

 <!-- 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:

<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:

<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

<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:
    <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

    <A href="http://www.my_fave_page.com">http://www.my_fave_page.com</A>
  2. By including a parameter in the address:
    <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:

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

or by including a parameter in the address:

<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

Share

About the Author

Bill Seddon
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

 
QuestionHow to align this control at left-side with 0pixel margin ? [modified] PinmemberL Khnh Thnh11-May-09 20:07 
Questionhow to add user control PinmemberMATRIX-23-Jan-06 2:17 
GeneralWebpart State Save (javascript) Pinmemberwildwildwolf28-Jul-05 23:08 
GeneralShows only on the Linkspage Pinmembermrabie23-Jan-05 12:25 
GeneralRe: Shows only on the Linkspage Pinsussmrabie23-Jan-05 12:36 
GeneralRe: Shows only on the Linkspage PinmemberBill Seddon26-Jan-05 9:38 
GeneralI fake one like ms Web Part with your code PinmemberdTianx22-Jan-05 2:01 
GeneralRe: I fake one like ms Web Part with your code PinmemberBill Seddon26-Jan-05 9:39 
GeneralRe: I fake one like ms Web Part with your code PinmemberMATRIX-23-Jan-06 2:14 
GeneralRe: I fake one like ms Web Part with your code PinmemberBill Seddon23-Jan-06 3:21 
GeneralRe: I fake one like ms Web Part with your code PinmemberMATRIX-23-Jan-06 20:11 
QuestionUsng several framelinks is impossible ? Pinmemberlije135-Oct-04 23:57 
AnswerRe: Usng several framelinks is impossible ? PinmemberBill Seddon6-Oct-04 0:51 
GeneralRe: Usng several framelinks is impossible ? Pinmembermrbello3-Nov-04 16:15 
GeneralRe: Usng several framelinks is impossible ? Pinmembermrbello3-Nov-04 16:21 
GeneralRe: Usng several framelinks is impossible ? PinsussAnonymous3-Nov-04 22:09 
GeneralRe: Usng several framelinks is impossible ? Pinmembermrbello4-Nov-04 18:27 
AnswerRe: Usng several framelinks is impossible ? Pinmembermrbello28-Feb-06 10:12 
GeneralUsing Javascript to move a User Controls Panel around the page. PinmemberChuck Lane2-Aug-04 12:10 
Questionmodifying the width of the control ? Pinmemberlije1327-Jul-04 23:49 
AnswerRe: modifying the width of the control ? PinmemberBill Seddon28-Jul-04 4:09 
AnswerRe: modifying the width of the control ? PinmemberBill Seddon28-Jul-04 4:12 
GeneralRe: modifying the width of the control ? Pinmemberlije1328-Jul-04 7:13 
GeneralMissing Files Pinmemberwrussell18-Jun-04 10:39 
GeneralRe: Missing Files PinmemberBill Seddon18-Jun-04 11:34 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411023.1 | Last Updated 14 Jul 2003
Article Copyright 2003 by Bill Seddon
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid