Follow TerraXML
Small Orange Stripe

Subscribe via E-mail

Your email:

describe the image

Current Articles | RSS Feed RSS Feed

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

Arbortext Editor XUI Example 

 

Breaking Down ‘Hello World’

The Hello World example demonstrates how a few XML elements can create a working dialog in Arbortext Editor. When a user clicks the Hello button or strikes the Enter key, the associated JavaScript code launches an alert dialog. When a user clicks the Cancel button or strikes the Escape key, the dialog is dismissed.

The dialog has four main components, each represented by XML elements and their attributes:

  1. A window element. This is the window container for the dialog. Shown above are two attributes:
    1. The focus attribute has a value of “hello”, which links the initial focus of the dialog to the hello button.
    2. The title attribute has a value of “Hello XUI!” This is the window title for the dialog.
  2. A box element, which provides a container for the two buttons. This is primarily used to organize dialog components.
  3. Two button elements, which use attributes to further designate the following:
    1. An id attribute to provide a mechanism for linking to a particular button. For example, the focus attribute on the window element.
    2. A label attribute with a value of “Hello”. This dictates the text that appears inside the button.
    3. 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.
  4. Two script elements, one for each button. In this case, the script elements contain one or two lines of Javascript code and the supporting attributes needed to run that code. XUI also supports JScript and VBScript. You can even call ACL using the “Acl” interface of the AOM (Arbortext Object Model).

There are three attributes used in the HelloWorld.xml example:

  1. 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.
  2. An ev:propagate attribute which controls event processing.
  3. A type attribute which specifies the appropriate MIME type for the script interpreter. In this case, we are using Rhino JavaScript.

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.

 

Another Example

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

 Arbortext Editor XUI Widgets

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

 describe the image

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.

 

Conclusion

You now know enough to get started on your own XUI development. The provided samples will help make you quite effective in a hurry with whatever script language you prefer. If you’re just learning about the AOM (Arbortext Object Model) or JavaScript programming in general, be sure to check out the references listed below.

 

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 an online quick reference to Rhino JavaScript:
  • 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 Button
Training Button

Comments

Currently, there are no comments. Be the first to post one!
Post Comment
Name
 *
Email
 *
Website (optional)
Comment
 *

Allowed tags: <a> link, <b> bold, <i> italics