Arbortext Editor XUI Customization - Part 2
Getting Started with XUI
This article follows up on Part 1, where we covered some of the basic concepts surrounding XUI. In this article, we go a bit deeper into two illustrative XUI examples.
Hello World, XUI Style
Breaking Down ‘Hello World’
The dialog has four main components, each represented by XML elements and their attributes:
- A window element. This is the window container for the dialog. Shown above are two attributes:
- The focus attribute has a value of “hello”, which links the initial focus of the dialog to the hello button.
- The title attribute has a value of “Hello XUI!” This is the window title for the dialog.
- A box element, which provides a container for the two buttons. This is primarily used to organize dialog components.
- Two button elements, which use attributes to further designate the following:
- An id attribute to provide a mechanism for linking to a particular button. For example, the focus attribute on the window element.
- A label attribute with a value of “Hello”. This dictates the text that appears inside the button.
- A type attribute that dictates one of three button types (accept, cancel, or help). These map keys to buttons. For example, an accept button will typically get triggered when a user strikes the Enter key.
There are three attributes used in the HelloWorld.xml example:
- An ev:event attribute which maps the event listener to an event type. XUI allows you to register DOM events to help monitor user-initiated actions on your dialogs. These actions in turn can directly change the XML file used to represent the dialog.
- An ev:propagate attribute which controls event processing.
The Arbortext Help Center provides a full XUI element reference and more details on event handling. Search on “XUI element reference” in the Arbortext Help Center for more information.
Let’s take a look at a more robust example that demonstrates a host of XUI widgets. In the Arbortext install path, locate samples/XUI/allwidgets.xml.
Locate the All Widgets Example
As we discussed last time, one of the cool features about developing XUI customizations is the View > Dialog feature. When you are editing the XML file for a XUI dialog in Arbortext Editor, you can use this tool to see how the dialog will display to your users. Display the dialog generated by allwidgets.xml.
Viewing the All Widgets Example
This example goes far beyond HelloWorld.xml and is useful for reverse engineering any specific widgets you may want to add to your own XUI customizations.
Some highlighted features of this example:
- Note the use of box and separator elements to organize the widgets. For complex dialogs with lots of information on them, these elements can help provide a logical display to end users.
- For another way to organize complex dialogs or capture a process flow, try using the tabbox and tabpanel elements.
- If you expand the first three box elements, you should see a checkbox element. Click on the attributes icon and observe what happens when you toggle the checkbox in the upper left corner. As you can see, user events will directly change the underlying XML representing the dialog. Try experimenting with other controls as well.
- The first tab of the tabbox element demonstrates a XUI calendar widget that can be very handy for manipulating date information in your XML data. The datetime element displays the selected date and allows a user to select a specific date using the Windows calendar control.
- The treecontrol elements demonstrate how to set up a set of nodes in a tree structure, including how to reference images to display next to particular nodes and nest additional controls like radio buttons inside a set of nodes.
- The tablecontrol elements provide column sorting in ascending or descending order.
Learn More About the Arbortext XUI
- Read Arbortext Editor XUI Customization Part 1
- For details on all XUI elements and their attributes, see “XUI element reference” in the Arbortext Help Center
- For more information on event listeners, see “Specifying event listeners” in the Arbortext Help Center
- For more information on the AOM, see the Arbortext Programmer’s Reference
- See here for XUI code samples provided by the Adepters Arbortext user community, see here:
Arbortext Services & Training
TerraXML provides a variety of service and training offers surrounding the PTC Arbortext product line. Click the links below to learn how we can help integrate/customize Arbortext for optimum use, or to help elevate user skill sets to drive the most value out of its use.
Services ButtonTraining Button