Web Applications Made Easy

OpenWAML Viewer - Web Application Viewer
Omnibus - Offline Web Storage

WAML (pronounced "wammel") is a markup language for building web based applications.

The most important aspects of WAML are:

  • It has a similar layout to HTML and share many of the features of HTML, e.g. JavaScript, AJAX, Cookies, etc.
  • It does not replace or extend HTML, but utilize HTML while adding much needed application functionality.
  • It is based on the XML standard and can thus be output from almost any server side language (ASP.NET, PHP, Python, etc.)
  • It is extensible with installable component libraries, separated into unique namespaces.
  • It is currently the only web application markup language that can be translated back to HTML for backward (legacy) support.

WAML pages are often used in conjunction with HTML pages, so it is important to understand the differences between these two markup languages and when/where each should be used.

HTML

The "Hyper Text Markup Language" (HTML) was designed to view and link text documents. Most of the markup tags of HTML are aimed at document specific operations like:

  • <h1>, <h2>, <h3>, <h4>, <h5> Headings
  • <p> Paragraph
  • <b>, <i> Bold, Italic
  • <a> Anchor (link)
  • etc.

HTML web pages can be made more interactive and can also simulate application-like functionality (e.g. menus) with the addition of JavaScript coding. Unfortunately, this is against HTML's original intent and creates many issues like complex and difficult to maintain code, accentuated browser incompatibilities, sluggish and non-standard user interfaces.

WAML

The Web Application Markup Language (WAML) was designed to compensate for the lack of advanced user interface elements in HTML. Unlike other Rich Internet Application (RIA) solutions, WAML is neither an alternative nor a replacement technology. Most of an existing HTML based web application's code can be used directly in a WAML application with little or no modification.

Typical WAML elements include:

  • <menubar>, <toolbar> Menu and Tool bars
  • <treeview>, <listview> Tree and List views
  • <web:browser> Web Browser (embedded HTML browser)
  • <doc:editor> Document editor (word processor)
  • etc.
Basic WAML layout
<waml>
  <head>
    <!-- Add non-visual elements here -->
  </head>
		
  <body>
    <!-- Add visual elements here -->
  </body>
</waml>

WAML Libraries

Elements in WAML code are actually components, provided by any number of component libraries. Each component library has a unique namespace (e.g. http://libs.openwaml.com/stdlib/1.0) that is used to identify components from this library. In this way, two different libraries may both have, for instance a button component, while allowing the WAML browser to still be able to differentiate between these two components.

Because it would be cumbersome to specify the complete namespace each time a component is used, the XML standard provides a mechanism for creating an alias for each namespaces that is used. The alias is then used as a prefix for components from specific libraries. It is also possible to create a single default namespace that does not require a prefix for it's components. While this is not required, the convention is to make the OpenWAML standard library the default namespace.

The following example shows a simple web browser created using WAML components from two separate libraries.

<waml xmlns="http://libs.openwaml.com/stdlib/1.0" xmlns:web="http://libs.openwaml.com/weblib/1.0">
  <head>
    <actions>
      <web:goBack id="Back"/>
      <web:goForward id="Forward"/>
      <web:refresh id="Refresh"/>

      <action id="GotoGoogle" caption="Google" image="http://www.google.com/intl/en_ALL/images/logo.gif" onExecute="mybrowser.go('http://www.google.com')"/>
      <action id="GotoYahoo" caption="Yahoo" image="http://l.yimg.com/a/i/ww/beta/y3.gif" onExecute="mybrowser.go('http://www.yahoo.com')"/>
      <action id="GotoAlfega" caption="Alfega" image="http://www.alfega.com/images/logo_big.png" onExecute="mybrowser.go('http://www.alfega.com')"/>
    </actions>
  </head>

  <body width="1000" height="700" caption="My Web Browser">

    <toolbar align="top" captionOptions="none">
      <item action="Back"/>
      <item action="Forward"/>
      <item action="Refresh"/>
      <item caption="|"/>
      <item action="GotoGoogle"/>
      <item action="GotoYahoo"/>
      <item action="GotoAlfega"/>
    </toolbar>

    <web:browser id="mybrowser" align="client" homepage="http://www.microsoft.com"/>

  </body>
</waml>
test

You will notice that we defined two namespaces in the above example:

  1. http://libs.openwaml.com/stdlib/1.0 - The default namespace (no prefix)
  2. http://libs.openwaml.com/weblib/1.0 - A second namespace (defined with a web: prefix)

Notice how some of the elements are prefixed with "web:" while most of the other elements do not have any prefix. The "web:" prefix identifies these components as coming from the second namespace, while elements with no prefix are from the first (default) namespace.

The namespace-library model is what sets WAML apart from other products. Using unique namespaces for individual libraries and library versions, you are assured of backwards compatibility with older libraries and absolutely no conflicts between libraries created by different vendors.

Related Articles