Custom interface elements

This article is my first tutorial, describing process of creating custom interface elements.

Every modern developer, who had to create interfaces,  no doubt, have used these modern WYSIWYG editors. Of course, this invention gives many advantages - simplicity of use and reduced development time to begin with. But there are quite many projects where standard interface elements are of no use at all. For example, multimedia applications, games or just so-fond-of-design customer. There are two distinct ways to outflank standard interface elements.

First one is a usage of stylized standard components. There are plenty of them all over internet. Some of them are free (quality is relevant). Different prices, different quality but average pack is worth $100-$200. It’s not so much, I can tell - and this way is quite suitable for everyone who wants to “decorate” an application without paying much attention to improper details. There are some disadvantages of this method: since you have no sources of your interface elements you can’t improve or tweak them for your liking. Sometimes you can buy sources along with components, but their prices can bite you : ).

Second way is a subject of this article - usage of custom interface elements. Main disadvantage here is obvious: more code to write and to support. But, in my opinion solving these problems is worth of trying, because in turn you’ll get more advantages - flexiblity of your interface and total control.

Enough theory let’s move to practice. My example is written in Delphi (my favorite :)) but you can use it’s principles with any language you like.

Let’s start simple - we’ll create root class for custom buttons first. It’ll look like:

TCustomButton = class
ParentCanvas  : TCanvas;
PosRect          : TRect;
Selected      : boolean;
Pressed       : boolean;
constructor Create(Canvas: TCanvas; TheRect: TRect); virtual;
destructor  Destroy; override;
procedure   ChangeWidth(NewWidth : integer);            virtual;
procedure   ChangeHeight(NewHeight : integer);          virtual;
procedure   ChangePosition(NewLeft, NewTop : integer);  virtual;
function    InRect(X,Y : integer) : boolean;
procedure   Draw;

Classes’s fields in details:

ParentCanvas: TCanvas;
Link to “parent’s” Canvas. Parent - is an object which contains our button, usually it’s a menu panel or eveb a form itself. We don’t create some buffer objects (with their own Canvas) for buttons. It is so, because we want to be able to use some special effects on our buttons. Like, for example, non-rectangular buttons or even buttons with holes in them :).

PosRect: TRect;
TRect object stores info containing button’s size and position on it’s parent.

Selected : boolean;
Pressed : boolean;
These field’s names are pretty self-pronounced. Info about button’s status is stored here.
Selected - is true when cursor is hold above the button (it’s pretty simple to realize input focus movement from keyboard, as well).
Pressed - button is pressed.

In my next article we’ll continue discussing this root button class and I’ll present first working example.

posted by wiseman in Delphi, Interfaces, Tutorials and have
Live reply
© Wiseman Softworks 2009 | Powered by WordPress | Theme design by K.Libia | Theme coding by Wiseman