 |
||||||||||
| ||||||||||
| ||||||||||
Web Development »
User Controls »
General
Intermediate
Generating XP style webparts from a web controlBy Bill SeddonGenerating XP style webparts from a web control |
VB.NET 1.0, Win2K, WinXP, Win2003, Windows, .NET, ASP.NET, WebForms, Visual Studio, VS.NET2002, Dev Posted: 13 Jun 2003 Updated: 13 Jul 2003 Views: 193,861 Bookmarked: 171 times |
||
|
|
|||
|
Advanced Search Sitemap |
|
|
||||||||||||||||||
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="<A href="http://www.codeproject.com/">
http://www.codeproject.com</A>" alttext="Code Project" />
<link name="Programmers Heaven"
page="<A href="http://www.programmersheaven.com/">
http://www.programmersheaven.com</A>"
alttext="Programmers Heaven" />
<link name="Planet Source Code"
page="<A href="http://www.planetsourcecode.com/">
http://www.planetsourcecode.com</A>"
alttext="Planet Source Code" />
<link name="Got Dot Net"
page="<A href="http://www.gotdotnet.com/">
http://www.gotdotnet.com</A>" alttext="Got Dot Net" />
<link name="MSDN" page="<A href="http://msdn.microsoft.com/">
http://msdn.microsoft.com</A>"
alttext="Microsoft Developer Network" />
<link name="24 / 7" page="<A href="http://www.net247.com/">
http://www.net247.com</A>"
alttext="Microsoft Developer Network" />
</framelinks>
<popuplinks title="Links" id="E812F25B-3099-412e-A7E2-EA8FC397D169">
<group name="Search Engines">
<link name="Google" url="<A href="http://www.google.co.uk/">
http://www.google.co.uk/</A>" alttext="UK Google" />
<link name="Yahoo" url="<A href="http://www.yahoo.co.uk/">
http://www.yahoo.co.uk/</A>" />
</group>
<group name="Legal">
<link name="Inland Revenue FAQ"
url="<A href="http://www.inlandrevenue.gov.uk/">
http://www.inlandrevenue.gov.uk</A>" />
<link name="VAT"
url="<A href="http://www.hmce.gov.uk/business/vat/vat.htm">
http://www.hmce.gov.uk/business/vat/vat.htm</A>" />
<link name="Companies House"
url="<A href="http://www.companies-house.co.uk/">
http://www.companies-house.co.uk</A>" />
</group>
</popuplinks>
<popuplinks title="Other" id="E912F25B-3099-412e-A7E2-EA8FC397D169">
<group name="Map Info">
<link name="Street Map"
url="<A href="http://www.streetmap.co.uk/">
http://www.streetmap.co.uk</A>" />
</group>
<group name="ISP">
<link name="BlueYonder Status"
url="<A href="http://status.blueyonder.co.uk:888/">
http://status.blueyonder.co.uk:888/</A>" />
<link name="BlueYonder Selfcare"
url="<A href="http://selfcare.blueyonder.co.uk/">
http://selfcare.blueyonder.co.uk/</A>" />
</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):
- By including a value for the
DefaultPageproperty when the control is defined on the containing web page:<Links:WebPartsControl id="LinksWebParts" LinkFrameName="LinkPage" DefaultPage="<A href="http://www.my_fave_page.com/"> http://www.my_fave_page.com</A>" 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>
- 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)
| You must Sign In to use this message board. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
