OpenTheme : An open source graphic user interface (GUI) toolkit

• Download source (external link) - approx 2 Mb

Introduction

OpenTheme is an XML based GUI toolkit with a set of foundation class and WYSIWYG editor. Although it's originally designed for full screen GUI, it is also good for Windowed user interface, with full localization support and arbitary look-and-feel.

I prepared a full tutorial at

• http://opentheme.sourceforge.net/OpenThemeTutorial.html

Background

When I was developing my OpenHTPC project, I was always thinking about how to make it looking cool. Since I'm not a graphic designer, I know I will never actually design any 'cool' graphics. That brought up an interesting old question, is there a way to completely separate the design of graphic user interface from the design of the business logic?

Well, since I'm confident I'm a fairly good software architect, I think I can do this job better. Finally, I designed this OpenTheme project. In this project, I tried some new technics. And finally I had chance to express my own opinion about software design and implementation in this project.

Using the code

It is still the preliminary Alpha release. So some of the design is still subject to changes. The best way to understand the design is to read the tutorial from a user's point of view.

But this release is already stable enough. The ThemeEditor can be used to design the entire ThemePack. In your code, just use the following code to load a Themepack.

// Create a ThemePack

ThemePack tp = ThemePack.FromXml(fileName, null);
// Run through Themes contained in the ThemePack


foreach (Theme curTheme in tp)
{
   // ........

}

// Get a Top Level page from Theme

ThemeObject themeObj = curTheme.GetThemeObject(ID);
// Draw this ThemeObject with a Graphics

themeObj.SetBounds(......);
themeObj.RecalculateLayout(Graphics g);
themeObj.Invalidate(Graphics g);

Points of Interest

A Theme is a collection of layered graphics (with alpha transparancy) with layout manager. System provides a set of 'atomic' components such as Images (OpenThemePictureBox), Text (OpenThemeTextBox), Color block (OpenThemeColorBox). Components can contain sub components within their bounds. The sub-components may contain other sub-components.

System also provides some more complicated components with custom code to determine the bounds of its sub-components for more complicated layout management. Those are called 'container' components.

Programmers can easily implement their own 'atomic' components and 'container' components. For example, the system provides a button component to support buttons with absolutly ARBITARY user designed look and feel. Below are the look and feels of that button with different state.

Disabled

Enabled

Active

Focused

Toggled

Another example is the horizontal scrollbar.

The logic is complete to define any popular components (such as button, radio, scrollbar, menu etc) with completely user defined look and feel, for full screen or windowed applications.

The system is very light-weighted. The core part only have barely more than 2000 lines of code and only dependent on some very basic GDI+ functions and XML library. And it doesn't even depend on Windows Forms classes. I would expect it to be ported to Linux platform and .Net compact framework with very little or no modification in the near future.

History

• Oct. 20, Initial Alpha release.

TODO List:

• Event model
• Finish all common controls
• Visual Studio .Net extensibility integration