icrosoft’s XAML markup language floats on top of the .NET platform. It is compiled into .NET classes, usually C#, which reduces it to a set of objects. Along with a host of other XML dialects it is an example of a new type of specification for GUIs. This article takes a look at XAML’s tags to see what?if anything?is new in them.
There are many such GUI specifications now, a few being Mozilla’s XUL, Oracle’s UIX, Macromedia’s Flex and the XML files created by the Gnome Glade tool. Although not W3C standards, some of these new GUI specifications are already on the W3C standards track. An example is the box model used within Mozilla’s XUL, which is headed toward inclusion in future CSS drafts.
The original and most popular source of XML definitions is, however, still the World Wide Web Consortium. The W3C is responsible for formalizing XML and many XML applications such as XHTML and SVG. Given that these standards are mostly complete, do we really need all these new XML GUI dialects? Microsoft’s XAML is a new spin on XML-based GUI description languages, borrowing very little syntax from established standards. Let’s see if it’s a radical improvement in some way, or if it’s merely familiar old friends dressed up in new clothes.
XAML vs. CSS2
For this article, I grabbed a handful of W3C standards and a list of XAML tags. I matched the tags up according to functionality where possible, and then sorted them by W3C standards. Here are the results. The first thing that struck me is the way XAML expresses quite a bit of style information using whole tags. Table 1 shows the bits of XAML that closely match aspects of the CSS2 specification:
Table 1. XAML tags that duplicate CSS2 functionality.
XAML Tag |
CSS2 Feature |
Description |
AdaptiveMetricsContext |
pt (pointsize), user-defined stylesheets. |
Styling of text for maximum user readability |
Bold |
font-weight : bold |
Bold text |
Border |
border |
Borders surrounding other content |
FlowPanel |
display : block |
A multi-line block that reflows when resized |
Inline |
display : inline |
A section of content held within a single line |
Italic |
font-style : italic |
Italic text |
PropertyTrigger |
pseudoselectors like :hover and :active. |
logic bound to common events in the UI |
PageBreak |
page-break-after |
Support for paginated display. |
ScrollViewer |
scroll |
scrolling support for content larger than its viewport. |
SmallCaps |
font-variant : smallcaps |
Text in all small capitals. |
Subscript |
vertical-align : sub; font-size : smaller |
Make the text smaller and raised above previous text |
Superscript |
vertical-align : super; font-size : smaller |
Make the text smaller and lowered below previous text |
Underline |
text-decoration: underline |
Text with an underscore beneath it |
Why XAML doesn’t use CSS2 is a mystery. Perhaps that’ll change by the time the final Longhorn release is upon us. At least then we’d have all the alternatives for these CSS2 properties, not just a sprinkling of them. Of course, XAML has an extensible tag set to fall back on, so a great deal of further styling can be added if a need arises.
It’s easy to see how beginners using XAML styling might benefit from a
XAML, XUL, and XHTML Overlap
The greatest overlap between XAML and other standards lies in its support for concepts drawn from HTML/XHTML. The similarities between XAML and HTML are numerous. Overlap with HTML is not limited to XAML, of course. The other well-known XML GUI dialect?Mozilla’s XUL?also overlaps with XHTML. Finally, both XAML and XUL overlap in places that XHTML doesn’t even include. XHTML and XUL can be combined in one document (at least in Mozilla browsers). Such a combination is a rough analog for non-Web uses of XAML. In fact, Mozilla’s XUL alone is a rough analog for some uses of XAML.
Table 2 shows a number of XAML tags that closely match standard XHTML tags, as well as the equivalent XUL tags, when available.
Table 2. XAML tags that duplicate XHTML and XUL functionality.
XAML Tag |
XHTML tag |
XUL tag |
Audio |
embed, object |
|
Block |
div |
|
Break |
br |
|
Button |
button |
button |
Cell |
cell |
|
CheckBox |
input type=”checkbox” |
checkbox |
Column |
th |
column listcol treecol |
ComboBox |
select |
menupopup listbox |
ComboBoxItem |
option |
menuitem listitem |
Document |
body |
|
Footer |
tfooter |
|
Frame |
frame, iframe |
iframe |
Header |
theader |
listheader treeheader |
Heading |
h1, h2, h3, h4, h5, h6 |
caption |
HyperLink |
a |
|
Image |
img |
image |
LineBreak |
br |
|
List |
ul, ol |
|
Listbox |
select |
listbox |
ListElementItem |
|
listcell treecell |
ListItem |
option |
listitem treeitem |
Menu |
select |
menu menulist |
MenuItem |
option |
menuitem |
Note |
blockquote |
|
Paragraph |
p |
description |
RadioButton |
input type=”radio” |
radio |
RadioButtonList |
input type=”radio name=”?” |
radiogroup |
Section |
section |
description |
Table |
table |
grid |
Text |
input type=”text” |
textbox |
TextBox |
textbox |
textbox multiline=”true” |
Video |
embed, object |
|
Table 2 contains a bewildering array of tags, but taken together, they really constitute nothing more than support for most of the basic HTML content and form widgets that are already routine in ordinary Web applications. XUL overlaps XHTML less that XAML does because XUL attempts to separate itself from XHTML. It’s not trying to be a drop-in replacement, as XAML is.
One thing I do like about XAML compared with HTML is the increased freedom from the publishing-derived features of HTML. XAML frees you from h1 tags, code tags and a host of other miscellaneous niche tags used infrequently in HTML. For practical purposes, these tags act as little more than style information in modern HTML documents.
HTML is also a poor GUI for applications, despite the popularity of the Web. Both XAML and XUL go a long way towards rectifying that problem. You could re-write your Web applications in XAML and they’d look better than the HTML originals, if only XAML had better CSS support. There’s that CSS issue again.
XAML and XUL Windowing Features
You might wish that the lists stopped with Table 2, but alas, XAML has a heap of tags to consider.
Some features of XAML are designed for application windows, not for hypertext-laden multimedia documents. Such windows look like any Microsoft Windows or GNOME control panel or like any other forms-and-menu based application that you might find, whether it be WinZip or GnuCash. Such applications are also the problem domain that Mozilla’s XUL addresses, so it’s no surprise that in this area, a large number of XAML and XUL tags match up nicely. Table 3 shows these equivalences.
Table 3. XAML and XUL tag equivalents that describe extended widgets.
XAML Tag |
XUL tag |
Description |
Application |
Window |
A whole application GUI expressed as XML |
ContextMenu |
Menupopup |
floating menu that appears when context-clicking (right clickingon Windows) |
DesignSurface |
canvas, deck, stack |
An area used for arbitrary placement of content |
DockPanel |
Box |
A layout device subject to vertical and horizonal alignment instructions. |
EmbeddedDialog |
Dialog |
A modal dialog box |
GridPanel |
Grid |
2-dimensional set of cells much like a table. |
HorizontalScrollBar |
Scrollbar align=”horizontal” |
A scrollbar used to scroll across content |
NavigationWindow |
opposite of the chrome specifier |
An area decorated with standard Web browser navigation controls |
ObjectDataSource |
template datasources= |
Specification of external data for dynamic display |
Popup |
menupopup |
The bit of a context menu or drop down menu that appears whensummoned |
QueryCommand |
rule |
A data query that supports dynamic content generation |
RepeatButton |
autorepeatbutton |
A button that fires continuously |
SimpleText |
Text |
Text that truncates when space is short |
TextPanel |
Editor |
An area used to edit and format text |
ToolTip |
Tooltip |
A textual hint that hovers over a widget |
VerticalScrollBar |
scrollbar align=”vertical” |
A scrollbar used to scroll up or down through content |
Window |
Window |
The GUI equivalent of HTML’s body tag. |
WindowNavigationContainer |
Browser |
A tag that allows page-oriented navigation of its content |
XmlDataSource |
template datasources= |
Specification of external data for dynamic display |
Table 3 shows that both XAML and XUL provide a large list of additional (beyond HTML) GUI widgets to choose from, plus some support for record management applications through the use of data-driven GUI elements. XAML is pretty powerful in that area, and will no doubt challenge Mozilla’s sophisticated but unusual template system once there’s proper SQL support in Longhorn.
The irony of these widget-oriented tags is that XUL does to Microsoft and XAML what Microsoft does to everybody else. XUL contains just about all of the popular and frequently used widgets that people need, but without the underlying complexity of .NET. The heavy lifting underneath XAML’s widgets is probably overkill for a wide range of applications?particularly the record management applications that are the heartbeat of most large organizations. To developers building those applications, XAML’s highly integrated widgets are a risky bet on high-end media-rich GUI applications of the future. Just how much of the application market that is, only many years will tell. Personally, I don’t need a rotating terminal window.
XAML and SVG Overlap
In addition to hypertext and GUI widgets, XAML supports two-dimensional graphics. The equivalent W3C standard is SVG. Table 4 shows the XAML tags that have SVG equivalents.
Table 4. XAML tags that duplicate SVG functionality.
XAML Tag |
SVG tag |
Description |
Canvas |
Svg |
A drawing area |
Ellipse |
Ellipse circle |
A mathematical ellipse |
Glyph |
Glyph |
One or more textual characters |
Line |
Line |
A straight line |
Path |
Path |
A pathway across a drawing area that delimits where other contentshould be applied |
Polygon |
Polygon |
A mathematical polygon that is closed |
Polyline |
Polyline |
A mathematical polygon that is open |
Rectangle |
Rect |
A rectangle or square, possibly with corner modifications. |
TransformDecorator |
transform= attribute |
A mathematical operation that rotates, scales, shears or relocatesa shape. |
In line with Microsoft’s tendency to put the most popular features of a given technology to the front and center, this list of tags extracts from the SVG standard the most obvious graphical elements you might want in a given diagram.
Of all the W3C standards, SVG is probably the one most suitable for generation via point-and-click design tools, rather than hand-coded XML tags. It’s encouraging to see that XAML supports simple hand coding, using simple tags, as some of us never want to let go of that. At the same time, there’s no way the current features are enough to support a point-and-click two-dimensional design tool, at least not one of any consequence. That’s OK, XAML’s still in its very early days. Oh, SVG supports CSS styling too. There’s that pesky CSS issue again.
XAML’s Unique Tags
Finally, XAML has a few miscellaneous tags that defy any large category. These tags expose unique features that make XAML stand out as a separate technology (see Table 5).
Table 5. Unique XAML tags.
XAML Tag |
Web equivalent |
Tag use |
ArrayListDataCollection |
JavaScript DOM 0 collection such as document.forms |
Provide programmer access to sets of tags. |
Bind |
Mozilla’s XBL system based on the CSS moz-binding extension. |
Attach programmer logic or further GUI elements to a tag. |
CollectionContainer |
none |
Hold a set of related tags. |
Document |
The DOM 0 window.document object. |
Represent the XML document. |
FillPanel |
none |
Unused |
FixedPage |
CSS2 fixed sizing and positioning. |
Override default layout for the page content. |
FixedPanel |
CSS2 fixed sizing and positioning |
Override default layout for sub-content of the page. |
HorizontalSlider VerticalSlider |
XForms range tag. |
Provides a widget used to select a value from a range. |
HwndHost |
plugins |
Embed a Win32 application in a tag. |
ItemsControl |
none |
Base class for lists and trees. |
NavigationApplication |
JavaScript’s window.navigator object. |
Provide context and control for moving within a multi-page application. |
PageFunction |
none |
Control page display. |
PageViewer |
none |
Print preview viewer for paged media. |
Pane |
Approximately a JavaScript window.modify() |
Modifiable area within a document. |
Panel |
Similar to XUL deck or stack content. |
Abstract base class. |
In this table, the uses specified for given tags provide only broad hints as to their uses, but some of these miscellaneous tags are quite powerful and their implications go far beyond a simple one sentence description.
All of these tags can be mimicked using existing Web technology, or at least using various Mozilla XUL-specific techniques, except for the mighty HwndHost tag. That tag allows legacy Windows applications to run and display inside a XAML document. Such a feature on the Web requires a sophisticated mega-plugin or a guru-level ActiveX object to say the least.
It’s the brevity and direct expression of these odds and ends that really delivers value in the XAML environment. The development time saved by taking a straight path using a single XAML tag is significant. Very few people want to build a GUI framework on top of HTML?that’s both time consuming and potentially buggy. Nevertheless, it’s been done several times. It’s these tags that impress the most about XAML, and show its breadth. Mozilla’s XUL could take a lesson or too from XAML about tag definitions missing from its XUL toolkit.
XAML Integration Advantages
A tag-by-tag comparison of XAML with other XML standards is just a beginning. For simple uses, and even for some intermediate ones, such a comparison might be all you need. For more complex uses, though, there’s a lot more to the comparison of XML GUI dialects. In the bigger picture, Microsoft’s Avalon display system integrates the XAML tags together far more tightly than any other XML display system so far. This is most obvious in the SVG-like two-dimensional effects that XAML can apply to XUL-like widgets and to XHTML-like content. Although Mozilla allows deep integration between SVG, CSS, XHTML, and XUL, it doesn’t yet go as far as XAML in applying the processing tricks of one standard to all the tags of all the others. Then again, XAML’s support for CSS, by comparison, is nonexistent. The unifying approach that CSS brings to various W3C standards is sorely missed in XAML by this writer. If XAML presented a substitute styling system that was as integrated as CSS, then XAML would be another matter?at least then we could have a proper technology shoot-out.
Examined superficially, XAML tags have many of the features of traditional Web standards like HTML, as well as those of newer Web approaches like Mozilla’s XUL. Alas, it lacks proper CSS stylesheet support. Examined more deeply, however, XAML tags reuse, reinvent, and renew many standard idioms from the software development world in a highly integrated way.