Phil Wright : Component Factory

Monday, June 20, 2005

microISV, First Code

First Code

After spending so long dealing with domain names and logos I've been itching to get my hands dirty and actually start coding. So it's been a relief to spend the last week getting stuck in and I've created a shed load of code. (For non-techies I will point out that shed load is the technical term for quite alot)

Basic Design Outline

I now have a collection of simple base classes and the framework code that makes it all hang together. The basic design is very simple. My control has a Palette, Renderer and View. The Palette acts as a source for providing colors and fonts to the Renderer that knows how to actually draw in a particular style. The View is a hierarchy of visual elements that know how to position and size themselves and then call onto the Renderer when they need drawing. In the future I will be adding a Controller that knows how to handle user interaction such as mouse and keyboard handling.

The advantage of splitting these areas into their own implementations is that we can then vary them against each other. We could select a different Palette to shift from the standard system color to an alternative fixed color scheme. A different Renderer could be created that draws in a completely different style. These different areas can be independently varied and overridden by the developer as needed.

The Group Control

The first control I have created is the about the simplest I could think of that would actually be useful in the future, the Group control. This control is capable of drawing a border and background in the control client area and then positioning any child controls inside the border. Pretty simple stuff. Think of it as a GroupBox but without the ability to even draw a text header!

For the border you can define the width as well as how rounded the corners should be. Here is a picture of the control with solid colors defined, the first instance with no rounding on the corners and the second with a setting of 11 pixels.

As well as solid colors you can also define a gradient color effect so that the border and/or background merges from one color to another. There are a variety of different merge settings but here is a picture of the simplest.

In practice you would place one or more controls inside the group and use the Group control to provide a consistent border and background with the rest of your application. Here are three simple examples I created in the designer within a couple of minutes.

Obviously this control is not very exciting but it did allow me to create the framework around it and be able to debug quickly and easily. In fact I quickly did a scan of the code with a line counter just out of interest.

Line Count

The framework classes consist of 6867 lines of code and the Group control itself a mere 254 lines. This is a pretty impressive number of lines written in one week, until you realise it is really just counting carriage returns. So that is the total number of lines and many of those are white space, comments and file headers.

Next feature?

My next step is to allow the display of images over the border and/or background instead of just colors. This would then allow the developer to drop the Group control onto a design surface and just use properties to define either solid colors, gradient color effects or images.

Is there anything else that you think should be standard that the developer can alter with properties on the border or background?


  • drop shadows are always nice to give some depth.

    do the start and end colors support transparency?

    By Anonymous Dave, at 5:02 pm  

  • Yes you can have transparency in any of the colors. I like the idea of drop shadows and will look at how to add that.

    By Blogger Phil Wright, at 6:25 pm  

Post a Comment

<< Home