XML user interface

What is XML UI Markup?

<freePane>
    <textField text="Some sample text..." 
               width="200" height="25" />
    <button text="Submit" width="100" height="25" />
</freePane>

 Use XML UI to specify layouts. The following shows a window that uses a grid layout:

<xal xlmns="http://openxal.org/ui">
  <window width="300" height="300">
    <gridPane />
    <label text="Description" width="100" height="25" />
    <textArea width="100" height="100">A description...</textArea>
    <button text="Submit" width="100" height="25" />
  </window>
</xal>

The following example XML UI defines an event handler for its onDoubleClick event: 

<panel width="100" height="100" 
       backgroundColor="#0000FF" onDoubleClick="change-color.xu"/>

All pages processed by Nexaweb, either as a page retrieval or through the NetService.retrieveAndProcess() method, contain a set of instructions to:

• Modify a document
• Declare MCOs
• Define Macros or calls.

Performing Operations on the XML UI

Once the client loads an application's intial page, the application's user interface document - the UI Document Object Model (DOM) - specifies the application's client interface.  Any subsequent XML sent to the client modifies or replaces this initial document. 

Use XModify to create XML documents containing instructions that modify the UI document existing on the client.  The following XAL is a common structure for XML modifications; it uses an XModify append instruction to append a button to a panel.

<xm:modifications xmlns:xm="http://openxal.com/core/xmodify">
  <xm:append select="/xal/rootPane/panel">
    <button text="Submit" width="100" height="25" />
  </xm:append>
</xm:modifications>

Use XModify statements combinded with XPath expressions to search and modify your UI. The following appends a message dialog to the UI by appending it to the rootPane element.  

	<xm:modifications xmlns:xm="http://openxal.com/core/xmodify">
  <xm:append select="/xal/rootPane">
    <messageDialog title="Error" message="Invalid Id" 
                   width="300" height="300" / >
  </xm:append>
</xm:modifications> 

	<macro:macro xmlns:macro=http://openxal.org/core/macro 
  name="showDialog" >
  <xm:modifications xmlns:xm="http://openxal.com/core/xmodify"> 
   <xm:append select="/xal/rootPane">
    <dialog title="My Dialog" width="300" height="300" /> 
   </xm:append>
  </xm:modifications>
</macro:macro>

	<button text="Show Dialog" 
        onCommand="macro://showDialog" width="100" height="25" />

You can use XInclude statements to include the contents of a file into a XAL document. Developers commonly use this to make applications more manageable by breaking applications into smaller files. Then a developer can include these smaller files into other XAL files as needed. The Nexaweb client processess XInclude included files after processing the document that contains them. The following example includes the contents of the file named table.xal into a panel widget.

<freePane>
 <xi:include xmlns="http://openxal.org/core/xinclude" href="table.xal" />
</freePane>

The following example shows the same XML without using the XInclude statement: 

<xm:modifications xmlns:xm="http://openxal.com/core/xmodify">
  <xm:append select="/xal">
   <rootPane>
   <label text="Username" width="100" height="35" />
   </rootPane>
  </xm:append>
</xm:modifications>   

Validation

You can use XAL schemas in standard XML editors to validate UI elements. However, XML elements are not validated at runtime.

Findng out more

For more complete reference on all available syntax for XAL, see the Ajax and Java schema documentation.  For more information on modifications syntax, see XInclude and XModify in the reference documentation.