Introduction
I recently read an article on MSDN extolling XAML, Microsoft’s bright shiny new idea. XAML is their name for a new file format, based on XML, which they hope to use in describing graphical user interfaces.
In olden days (meaning the present day), graphical user interfaces were created in a conventional programming language, likely the same one used to build the owning application. Creating an interface by writing all the code yourself can be quite tedious, but for most interface toolkits there is a graphical designer available to make life easier.
Microsoft already produce graphical interface designers, which work almost acceptably well. Their backend file formats are not, as far as I know, XML, so why are they now making the shift?
My guess is that shifting to XML is simply a natural progression, as it has been with so many other file formats. The astute reader may note that XML itself is not a fully formed file format. XML excels as a base for a file format, helping the final format stay readable to mortals and allowing at least partial understanding by any language with its own XML parser or bindings to such.
The article to which I refer starts by explaining how it is possible to describe the colour of an user interface element (further: widget) using only XAML, with no ‘proper’ code in sight. It then proceeds to show how a two hundred line ‘conventional’ Windows program can be rewritten using a simple XAML document and only sixty lines of code.
This kind of simplification sounds impressive; indeed few developers would argue with the benefits implied by easily editable interface descriptions and shorter code.
The reason I write this text is that, as with many documents published by Microsoft, some history has been omitted. In the case of the article to which I refer, that history is the present. Microsoft’s XAML ‘ide’a was dreamed up by others years ago and has been implemented by various developers and development companies.
The graphical interface toolkit with which I am most familiar is Qt from Trolltech. It is not entirely correct to describe Qt as a graphical interface toolkit, as this is only a small part of its feature set, but for the moment this description suffices.
After reading the article by Microsoft, I immediately wondered how the example application, written for Qt, would compare with that given.
Implementation
Create the widgets
- Start Qt Designer.
- Create a new widget.
- Add a text label, name it, set its text property to nothing.
- Move and resize the label, such that it occupies approximately the right ‘half’ of the widget.
- Add and name three sliders. Make them vertical by drawing their outlines such that they are taller than they are wide, or just set their Orientation properties. Change their maximum value properties from 99 to 255. Place the sliders in a line, horizontally.
- Add three labels, one above each slider. Set their text to ‘Red’, ‘Green’ and ‘Blue’ respectively; set their foreground colours to red, green and blue.
- Add three more labels, one below each slider. Set each label’s text to ‘0’ and its foreground colour as for the other set of labels.
Lay out the widgets
- Select the vertical box layout from the toolbar, drag a box around the leftmost title label, slider and value label.
- Repeat the previous step for the other two label/slider/label groups.
- Group together these groups in an horizontal box layout.
- Set this new layout’s margin to greater than zero.
- Select the window (click on its background away from child widgets) and click the horizontal box layout button.
- Set this new layout’s margin to zero.
Create and connect signals and slots
- Press the signal/slot button on the toolbar and drag a connection from the first slider to the first label. Set the target to be the ‘setNumber’ method.
- Repeat for the other two sliders.
- Drag a connection from the first slider to the parent window. Edit the slots of the parent window and add a slot like: ‘void slotUpdateColorLabel()’.
- Add connections from sliders to the newly created slot.
- Fill in the body of the slot.
colourLabel->setPaletteBackgroundColor
(QColor(slider1->value(), slider2->value(), slider3->value()));
Total lines of code written so far: one.
Write the main program, main.cpp
#include "form1.h"
#include <qapplication.h>
int main(int argc, char ** argv)
{
QApplication app(argc, argv);
Form1 * form1 = new Form1;
app.setMainWidget(form1);
form1->show();
return app.exec();
}
Total lines of code written so far (including #includes and lines with only curly braces): eleven. Ten for the application, one for the form itself.
Build and run the program
qmake -project
qmake
make
./form1
Conclusion
The Qt program does the same job as its XAML counterpart. It is built using technology which has been available for years, is mature and stable.
The Qt program is cross-platform. It compiles and runs on Windows, MacOS X and Linux with zero modifications. It looks and acts like a native application (which it is!) on each platform.
Microsoft’s XAML will provide more than GUI elements (widgets). It will also give the developer the ability to perform 2D drawing on a canvas, from XML. For the moment, Qt requires the developer to do this with code. I expect that if Qt developers feel they need this feature, they will add a widget provided by KSVG.
The advantage of using KSVG would be that subversion is an open standard, whilst XAML is proprietary. SVG is already well established and XAML seems to be reinventing the wheel in this area.
XAML also seems to allow for transformation (e.g. rotation) of widgets. Many systems have provided this facility in the past few decades but as yet I haven’t seen it used by any applications. There are some games which use slightly rotated buttons for menus, though, so perhaps game developers will find this feature useful. I’m not sure how you handle resizable layout when you have rotated widgets, though.