Loading...
Part I - Building the User Interface
In this tutorial we will go through a series of techniques and technologies used when creating a User Interface.
Overview
- Introduction to markup-based UI Layout
- Embedding XML UI into a web page
- Using XML for laying out UI declaratively
- Using DOM-Core for building UI dynamically
-
- Using XInclude to merge XML documents
-
Introduction to markup-based UI Layout
Different UI Frameworks offer different means to define (or instantiate) a User Interface. If we look at the existing Ajax frameworks, the most widely used approach is to use JavaScript, where components of an interface get instantiated with a new JavaScript operator (for example ExtJS, YUI). Another approach that is utilized for example in Dojo is using HTML with custom attributes.
In Ample SDK we have chosen for a markup-based approach, where a User Interface is defined in XML. Actually, thanks to that choice, the developer is not limited to using XML, he can still use JavaScript to dynamically create part of UI as well.
The major benefits of this approach are:
- UI code is easy to read and modify
- Ability to style UI with CSS
- Standard core API (enabling UI traversal / modification) - DOM-Core (Level 2)
- Standard events API (enabling UI interaction feedback) - DOM-Events (Level 3)
- Great separation of concerns between the UI and the Application
XML and Namespaces
XML is a general purpose markup language, one of whose intentions was to be human-legible. That is exactly why it also suits well the purpose of laying out UI. XML is at the heart of UI building in Ample SDK.
There is huge range of XML-based technologies that includes:
- User Interface markup languages (such as XUL)
- Transformation languages (such as XSL-T)
- Hypertext markup languages (such as XHTML)
- Vector Graphics markup languages (such as SVG or VML)
- many more...
XML Namespaces concept enables usage of different XML "vocabularies" (or applications) in the same XML document. By declaring a prefix and binding it to a dedicated namespace, the XML document author instructs an XML processor on which vocabulary’s tags he is using.
Writing XML code is not very different from writing HTML code. The following main rules should be kept in mind:
- Tags should always be closed
- Attribute values should always be enclosed in quote signs
- Namespaces used in the document should be declared
- Certain text characters, such as "&", "<" and ">" should be replaced with entities "&", "<" and ">"
- Names of elements and attributes are case-sensitive
DOM Core
The DOM (Document Object Model) Core module provides an implementation-neutral API to the representation of a document in memory.
DOM Core's main purposes is to enable:
- Traversal
- Creation
- Alteration
Embedding XML UI into a web page
There are three ways to embed Ample SDK UI into a web page:
Inline, using a script tag with type="application/ample+xml"
<body>
<!-- other HTML code -->
<script type="application/ample+xml">
<!-- Ample SDK inline XML markup -->
</script>
<!-- other HTML code -->
</body>
Referencing a resource, using a script tag with src attribute
<body>
<!-- other HTML code -->
<script type="application/ample+xml" src="ui.xml"></script>
<!-- other HTML code -->
</body>
Inline, using ample.open() and ample.close()
<body>
<!-- other HTML code -->
<script type="text/javascript">ample.open()</script>
<!-- Ample SDK inline XML markup -->
<script type="text/javascript">ample.close()</script>
<!-- other HTML code -->
</body>
The benefit of the last approach is SEO, search engines will index XML content.
Using XML for laying out UI declaratively
There are several UI technologies implemented in Ample SDK that you can use to define a User Interface with.
When using a certain UI technology in your application, you have to include its implementation library in addition to the inclusion of the Ample SDK runtime. Note! This is also required for the use of XHTML 1.
XHTML 1 and XHTML 5 - General purpose Layout / Hyper Text Markup Technologies
Both XHTML1 and XHTML5 have their roots in HTML4, a language that you most likely know very well. Unfortunately HTML is not always a good fit for application layouts.
<article>
<header>
<h1>Apples</h1>
<p>Tasty, delicious fruit!</p>
</header>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples and make a great filling for
apple pies.</p>
</section>
<footer>
<h1>Apples</h1>
<p>Tasty, delicious fruit!</p>
</footer>
</article>
See also
XUL - Desktop like UI Technology
XUL is probably the only feature-complete XML-based UI technology that is well suited for the purpose of building applications. It has:
- Layout: box, groupbox, stack, grid, tabbox
- Input controls: checkbox, radio, datepicker, menulist, colorpicker, scale, textbox etc.
- Lists and trees: listbox, tree
- Bars: toolbar, menubar, statusbar
- Popups: popup, menupopup
- Dialogs: dialog, wizard
- Commands: command, broadcaster
- and more...
The example below shows how to create a dropdown with 3 items in it.
<xul:menulist xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<xul:menupopup id="items-popup">
<xul:menuitem label="Item 0" value="0"/>
<xul:menuitem label="Item 1" value="1"/>
<xul:menuitem label="Item 2" value="2"/>
</xul:menupopup>
</xul:menulist>
The example below shows how to create a tabbox with 3 tabs which have input components in their content.
<xul:tabbox xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<xul:tabs>
<xul:tab label="checkbox" />
<xul:tab label="textbox" />
<xul:tab label="datepicker" />
</xul:tabs>
<xul:tabpanels>
<xul:tabpanel>
<xul:checkbox />
</xul:tabpanel>
<xul:tabpanel>
<xul:textbox />
</xul:tabpanel>
<xul:tabpanel>
<xul:datpicker />
</xul:tabpanel>
</xul:tabpanels>
</xul:tabbox>
See also
SVG 1.2 Tiny - Vector Graphics Technology
SVG, Scalable Vector Graphics is the technology for drawning vector shapes. In Ample SDK we currently support follownig SVG modules:
- Document Structure
- Paths
- Basic Shapes
- Text
The following code demonstrates how you can create a pulsating circle with the help of SVG and SMIL
<svg:svg viewBox="0,0 400,400" height="400px" width="400px"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:smil="http://www.w3.org/2008/SMIL30/">
<svg:circle cx="200" cy="200" r="10" fill="red" opacity="1" stroke="black" stroke-width="1">
<smil:animate begin="click" decelerate="0.5" to="200" attributeName="r" dur="500ms"/>
</svg:circle>
</svg:svg>
See also
Using DOM-Core for building UI dynamically
As mentioned earlier, a UI can also be build using pure JavaScript. The functions you need for that are:
- Document traversal: getElementById, getElementsByTagName, getElementsByTagNameNS (available on Document)
- Elements creation: createElement, createElementNS (available on Document)
- Attribute alteration: setAttribute, getAttribute, removeAttribute (available on Element)
- Document alteration: appendChild, insertBefore, replaceChild (available on all Node)
var sXULNameSpace = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
var popup = ample.getElementById("items-popup");
var item4 = ample.createElementNS(sXULNameSpace, "xul:menuitem");
popup.appendChild(item4);
item3.setAttribute("label", "Item 3");
item3.setAttribute("value", "3");
In this code we created a new XUL menuitem element and added it to the list of items in the popup.
Using XInclude to merge XML documents
It is not always convenient to work on a single XML document, because for example your source document can become very large and hard to navigate through, or because you might want to keep different areas of the application UI separate.
Using the XInclude technology can help assemble (merge) the final XML document out of such fragments. It is important to understand that such a merge happens at the application UI build time. So, first all occurances of include instructions are processed, and only after that the UI is drawn. (Note: We will see in a later chapter how to load application UI fragments dynamically)
<div xmlns:xi="http://www.w3.org/2001/XInclude">
<xi:include href="Menubar.xml" />
<xi:include href="Editor.xml" />
<xi:include href="Statusbar.xml" />
</div>
Worth mentioning is that there are server-side environments in which XInclude is supported, and having specified the references in your document the server may end up processing the merge.
See also