XML UI

What is XML UI Markup?

Use XML UI Markup to specify your UI in the Nexaweb Platform.

Specifying Your UI

Use the XML UI to specify all of the various widgets and Event handlers available in Nexaweb that make up your UI.

The following example XML UI defines a panel containing a text field and a button:

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

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

<window width="300" height="300">
    <gridLayout />
    <label text="Description" width="100" height="25" />
    <textArea width="100" height="100">A description...</textArea> 
    <button text="Submit" width="100" height="25" />
</window>

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

<panel width="100" height="100" bgColor="#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.

XUpdate

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

<xu:modifications document="nxml" xmlns:xu="http://nexaweb.com/xupdate">
    <xu:append select="/nxml/rootPane/panel">
      <button text="Submit" width="100" height="25" />
    </xu:append>
</xu:modifications>

Use XUpdate 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.

 <xu:modifications document="nxml" xmlns:xu="http://nexaweb.com/xupdate">
    <xu:append select="/nxml/rootPane">
        <messageDialog title="Error" message="Invalid Id"  width="300" height="300" / >
    </xu:append>
</xu:modifications>

Macros

Macros allow you to name a group of XUpdate statements that the client references and executes, avoiding a roundtrip to the server and improving your application's responsiveness. The following defines a macro named "showDialog" that, when executed, displays a dialog by appending it to the nxml element.

The following XML document defines a button that uses the "showDialog" macro as the event handler for its onCommand event. When a user presses a button, the dialog box defined in the "showMessageBox" macro appears.

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

<macro:macro xmlns:macro="http://nexaweb.com/macro" 
    name="showDialog">
    <xu:modifications document="nxml" 
        xmlns:xu="http://nexaweb.com/xupdate">
        <xu:append select="/nxml/rootPane">
            <dialog title="My Dialog" width="300" height="300"/>
        </xu:append>
    </xu:modifications>
</macro:macro>

XInclude

You can use XInclude statements to include the contents of a file into an XML 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 NXML 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.nxml" into a panel widget.

<panel>
    <xi:include xmlns:xi="http://nexaweb.com/xinclude" 
     href="table.nxml" />
</panel>

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

<xu:modifications document="nxml" 
    xmlns:xu="http://nexaweb.com/xupdate">
    <xu:append select="/nxml">
        <rootPane>
            <label text="Username" width="100" height="35" />
        </rootPane>
    </xu:append>
</xu:modifications>

Validation

You can use NXML 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 XML UI, see the XML UI section of the reference documentation. For more information on modifications syntax see XInclude and XUpdate in the reference documentation.