RebelGeekz' Blog

Introduction to UI design for the innovative mind

After a bar fight last night, I decided to post my thoughts about UI design.

Let's start with some basic assumptions:

• User interfaces are well defined structures that contain well defined controls. A textbox is a textbox.
• Controls have well defined properties in the form of attributes or objects. Forecolor for example.
• Properties have well defined values. No wild-guessing. Intellisense to its best.

Based on these assumptions we could easily assert that:

• Textbox, Panel and Label are UI controls
• Font, forecolor and width are properties
• Black, 10px and bold are values

Now to the code:

public UI mainForm : Form 
{ 
    forecolor = white; 
    backcolor = black; 
    Textbox textSample 
    { 
        top = 20; 
        width = 100; 
        font 
        { 
            name=Arial; 
            size=10px; 
            weight=bold; 
        } 
    } 
} 

We can easily identify controls, properties, values and identifiers, right?

The first thing you notice is the lack of instantiation, good. No need to complicate things with:

I hope you get the point.

We dont need to instantiate objects since we are assuming our objects will be instantiated when the UI is instantiated, clear?

And red means, well, red, everywhere, here and in china.

Also, you could easily create reusable styles like:

public style textInput 
{ 
    forecolor = white; 
    backcolor = black; 
    font { name=Arial; size=10px; weight=bold; } 
} 

And as wisely suggested by Michael Flanakin we could also place all our styles in a separate file and import them like:

Style myStyle = Style.Load("yourStyles.cs","RedInput"); // load styles 
textSample.style = myStyle; //aply style 

or

StyleCollection myStyles = Style.Load("yourStyles.cs"); // load styles 
textSample.style = myStyles["RedInput"]; //aply style 

Want more? of course you do, take this:

font 
{ 
    name=Arial; 
    size=10px; 
    weight=bold; 
} 

or this:

font{ name=Arial; size=10px; weight=bold; } 

or this

font="Arial 10px bold"; 

see? there is no way on earth it can get easier.

Print posted @ Thursday, February 12, 2004 6:12 PM