Skin Design

Flexo is a personal accounting package. Since it is in very initial stage, it tracks only your expenses and generates variety of reports on it. (Recently I included income tracking module which is in alpha stage) In coming years Flexo will extend and mechanize most of money management activities under few button clicks. In parallel to cool features, creating a good and ease of user interface is also a head scratching work. It’s an art too. I don’t want to set more expectation saying that Flexo has very good interface but I feel it has got what it was expected to have.

When you download and check all screens in Flexo, one thing you will sure notice, Consistency. Just open any UI guidelines book, this will be a first statement and there is no way to skip this rule in my software too.

If we think traditionally, the design approach for consistent UI for all forms could be like these,

Create header-footer ActiveX/Custom/User control and place it on all forms or create a static class which has a drawing method to decorate runtime loading forms and thinking further to this, maintain one XML configuration file which will hold all coloring, fonts and size details from which our drawing method gets inspired and brushes it on all forms.

In dot net, we have one cool feature - Visual Inheritance, which allows us to create a master form and inherit this to all child forms. Whatever UI changes you make on a master form will affect all its children. Re-using the idea of above mentioned XML configuration file, use dot net App.config and define all fancy information in it. Associate values from app.config file to master form’s properties popularly known as setting dynamic properties and we are done! Whenever I want to change any color of my Flexo forms I will just update flexo.exe.config file and I don’t have to compile my application to reflect new changes.