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

WebBoxes

Rate me:
Please Sign up or sign in to vote.
4.38/5 (21 votes)
13 Mar 20032 min read 197.7K   1.3K   71   32
Yet another collapsable control, but it relies on a "graphics server" for dynamic pretty rounded corners, cool arrows and unlimited font support. If you can FTP to your site, then the fonts are usable, no admin rights required.

Sample Image - screenshot.gif

Introduction

A while back I had a conversation with Paul Watson, telling him how nice rounded corners are in display "boxes". So a few days back I started working on what you see here. I also wanted some funky features like collapsibility, and font support that does not rely on installed fonts on the web server. The control consists of 2 parts:

  • The CollapsableControl with designer support.
  • Image.aspx a.k.a. the "graphics server"

The CollapsableControl

This control is nothing more than a table that acts as a front-end to the graphics server. It also acts as a container for child controls. Basically, the control requests graphics for certain parts of it.

The graphics server

This is a code-behind version of Nick Parker's ASP.NET article, but has been modified to accept parameters in the form of a query string. For example:

HTML
<img src="Image.aspx?type=UpArrow&width=20&height=20&
                           forecolor=Black&backcolor=DodgerBlue">

This will create an UpArrow image and display it (as an image).

Points of interest

Using fonts from the web directory

C#
static void InitPF(string path) 
{ 
  pf = new PrivateFontCollection(); 
  string[] ttfs = Directory.GetFiles(path, "*.ttf"); 
  for (int i = 0; i < ttfs.Length; i++) 
  { 
    pf.AddFontFile(ttfs[i]); 
  } 
} 

static PrivateFontCollection pf;

Just pass Server.MapPath("") from the page to get the path. Note: this has to be static, else there will be serious side effects on the web server.

Why PNG?

This is the only solution at this stage. But even PNG has it problems in GDI+. I find colors are darker than there CSS counterpart, and thus the header and footer are both images. Also, transparency does not work in IE6. GIF is also a problem in the sense that:

  1. You need licensing, and
  2. I am yet to find a way to make adaptive palette transparent GIF in .NET.

JPEG, is just a big NO-NO for its size/quality cost.

Sending a PNG file to a non-seekable Stream (such as Response.OutputStream)

C#
System.IO.MemoryStream ms = new System.IO.MemoryStream();
bmp.Save(ms, ImageFormat.Png);
byte[] msar = ms.ToArray();
Response.OutputStream.Write(msar, 0, msar.Length);
ms.Close();

Showcase site

Notes and problems

  • Changing properties of the CollapsableControl in the VS.NET designer will blatantly delete all the child controls of the control. Tip (as Paul will second me): DON'T USE IT (to set properties, set them via HTML).
  • Content does not display in VS.NET designer. Not sure if above has something to do with this. Everything else is rendered correctly.

Usage and installation instructions are in the readme file.

Enjoy :)

Updates

  • 0.5
    • Added Showcase site :) There you can see WebBoxes in DataLists, outside DataLists, etc. Also have a derived menu control. The whole site's images are generated, except for 4 photos and the logo. Comments welcome as always.
  • 0.4
    • Fixed support for most browsers. IE5+, Mozilla 1.1+, Netscape 6.2+ . Mozilla based browsers shows the hand (pointer) cursor now. Thanks Daniel Cazzulino :).

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
Software Developer
South Africa South Africa
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralRe: nice, but... Pin
leppie11-Dec-02 10:01
leppie11-Dec-02 10:01 
GeneralRe: nice, but... Pin
Paul Watson12-Dec-02 0:46
sitebuilderPaul Watson12-Dec-02 0:46 
GeneralRe: nice, but... Pin
leppie12-Dec-02 6:50
leppie12-Dec-02 6:50 
GeneralRe: nice, but... Pin
stephen woolhead14-Jan-03 7:50
stephen woolhead14-Jan-03 7:50 
GeneralRe: nice, but... Pin
leppie15-Jan-03 0:32
leppie15-Jan-03 0:32 
GeneralCould use window.width or screen.width Pin
gpupurs12-Mar-04 9:05
gpupurs12-Mar-04 9:05 
GeneralRe: nice, but... Pin
Megan Forbes13-Dec-02 4:28
Megan Forbes13-Dec-02 4:28 

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.