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

WebBoxes

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

<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

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)

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

Updates

  • 0.5
    • Added Showcase site Smile | :) 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 Smile | :) .

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

leppie
Software Developer
South Africa South Africa
No Biography provided
Follow on   Twitter

Comments and Discussions

 
GeneralChrome PinmemberDmitri Nesteruk18-Nov-08 7:13 
GeneralBackground Color Pinmembernanishta14-Apr-05 16:27 
GeneralHelp.... Pinmemberenjoycrack6-Dec-04 2:11 
Generalvb.net....I know, I know PinmemberMichael J. Collins10-Sep-03 11:48 
GeneralAlways the right size Pinmemberhansharro28-Jul-03 15:25 
GeneralRe: Always the right size Pinmemberleppie4-Jan-04 12:05 
GeneralBetter solution for background color issue PinmemberChristian Tratz20-Dec-02 4:17 
GeneralRe: Better solution for background color issue Pinmemberleppie5-Jul-03 21:21 
GeneralGarbage Friendly PinmemberEsteves17-Dec-02 13:33 
GeneralRe: Garbage Friendly Pinmemberleppie18-Dec-02 5:14 

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
Web04 | 2.8.150327.1 | Last Updated 14 Mar 2003
Article Copyright 2002 by leppie
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid