Using the XXL Visual Builder

Eric Lecolinet (

[XXL Index] [Elc Index]


1. Basic Concepts

Three-View Edition

The XXL Visual Builder is based on a 3-view paradigm:

All three views are linked together and are updated in an incremental way.

Most user interaction will take place on the Graph View (which is fully editable: see Section3: Editing the Graph View). GUIs in the Widget View look exactly the same as if they were executed in a normal way without using the XXL Builder.

Text View

The source code is generated in real time in the Text View. XXL provides an isomorphic representation of the GUI: the Text View and the Graph View are equivalent representations that are updated simultaneously.

The Text View is only displayed upon request. The source code can be modified interactively by editing the Text View as will be explained in Section 7: Editing the Text View.

Script and C/C++ Programs

The XXL Builder can be used to produce new interfaces or to re-edit preexisting XXL Script files and/or one C or C++ program. Conversely, new interfaces can either be saved as Script or as C files. These capabilities are explained in Section 8 and 9: Saving an Interface and Loading a Script or a C/C++ Program. The next sections only describe how to construct a new interface from scratch.

Liveness: No Building and Testing Phases

There are no "building" and "testing" phases: the GUIs displayed in the Widget View are always active and the user can interact with them in the usual way. When editing C or C++ programs, the Widget View is modified dynamically while the program is running.


Objects can be selected by clicking in an appropriate way (see below) on any of their three views (when applicable: certain abstract XXL objects do not have a visible representation in the Widget View). The two other views are then automatically highlighted (the Graph View and the Text View are highlighted in a permanent way, while the Widget View is only highlighted while the mouse is pressed).

As Widgets always remain active, they cannot be selected by just clicking on them (for instance, simple clicking on a Push Button would activate this button (its standard behavior!) rather than selecting it). So, XXL objects must be selected in the following way:

! Note : clicking must be performed by using mouse button 1 (usually the left button). Pushing or clicking the other mouse buttons have other meanings that will be explained in the following sections.

2. Building New Interfaces from Scratch


! Note that Interface objects can have only one Widget child. This immediate child must be a Box (i.e. a Motif Manager), a Dialog Box or a Shell Window. Interface objects must always be at the top of the object tree (they can not have parents and are responsible for the realization of the actual widgets of contained in the GUI).

Default Selection

Adding or Changing Links Between Object Icons

See next Section 3: Editing the Graph View.

Changing the Object Name

A new name is automatically computed at the object creation time when double-clicking on class names. This name can be changed once the object has been created by:

XXL Release 97.11 also allows to specify object names before object creation:

! Note that certain types of XXL objects do not have a name (but Widget objects always have one).

Changing the Object Class

The object class can also be changed once the object has been created. This can be done by:

! Note that changing object class may lead to errors if the new object is not compatible with the children and/or the parents that were already linked to it (errors will be detected and listed to the user and offending links will automatically be removed).

3. Editing the Graph View (Changing the Links)

The Graph View is fully editable: objects can be selected, moved, edited and links between objects can also be changed interactively. Depending on the object class, icons may contain all or some of the following areas:

! Note that the color of the icons indicate the meta-class of the corresponding objects (for instance, Interface icons have a specific color, Widget icons have a different one and so on).

Selecting Icons

! Note : remember that you can also select objects by clicking on their text or Control-clicking on their corresponding widget (refer to Section 1: Basic Concepts).

Moving Icons

Opening the Icon Menu

A pop up menu is associated to each kind of icon. What this menu actually contains depends on the meta-class of the corresponding XXL object. To open this menu:

Deleting Links

To delete incoming links (i.e. links that are coming from one or several parents):

Alternate way: Select icon then type Control-K

Adding Links

You can add children to most objects in the following way: A permanent arrow will be drawn from the parent icon to the child icon if the operation has succeeded. Otherwise: ! Note : certain classes of objects cannot have children (and thus, they have no child area).

Moving Links

Moving icons may change the relative order of the links of the child objects. This will automatically:

Minimizing and Maximizing Sub-Hierarchies

Double clicking on the child area of the icon alternatively minimizes and maximizes its children (the whole subtree will alternatively be hidden or shown).

Alternate way: Select icon then type Control-M

Changing the Object Name and Class

This can be done by changing the Class and Name of the selected object in the Edit Bar (see Section 2: Building New Interfaces from Scratch).

Redraw and Refresh

To Redraw a single hierarchy (or sub-hierarchy):

To Refresh the whole Graph View:

4. Editing Widget Properties

The XXL Builder provides a complete Resource Editor that can show and modify interactively almost all the resources of Motif widgets. To edit Widget Resources:

Alternate ways: Select icon then type Control-R, or open View Menu then click on Resources.

! Note : once opened, the Resource Editor will automatically be updated each time another Widget object is selected.

Resource specifications are stored in two kinds of XXL Objects:

In other words, Args objects constitute the normal way for initializing Widget resources while Set objects are mainly used for specifying dynamic behaviors (see Section 6: Specifying Behaviors).

Both kinds of objects can store a list of resource specifications. These objects must be linked as children of the Widget object(s) they are supposed to apply on. They can be shared by several Widget objects (they can have several Widget parents) thus allowing to apply the same resource specifications to a group of Widgets.

The Resource Editor automatically manages (creates and updates) Args and Set objects (note that Args objects are used by default, but this can be changed if needed). At last, these objects can also be modified by changing their source code directly (see Section 7: Editing the Text View).

Note: that certain Motif resources cannot be changed dynamically once the widget has been created (this is indicated in the Motif Reference Manual). Such resources must only be specified by means of "Args" objects.

5. Layout (Geometry Management)

XXL simplifies the way to deal with the geometry management capabilities of the underlying toolkit. In Motif interfaces, geometry is ensured by specialized widgets, called Geometry Managers that can control the layout of their child widgets in three different ways as explained in the following subsections. These three cases are handled differently by the XXL Builder.

Explicit Geometry (BulletinBoard and DrawingArea)

These managers do not control automatically the geometry of their children. Geometry is then set by direct manipulation:

Note that these values can also be set textually in the Resource Editor.

Implicit Geometry (RowColum, Menus and variants)

The child widgets are automatically aligned in a row, a column, or a matrix. Their size is computed dynamically and their physical position depends on their rank in the widget tree.

The XXL Builder ensures this correspondence dynamically: this means that the ordering of widgets is dynamically changed in the Widget View when changing the left-to right order of the corresponding icons in the Graph View (by moving them with the mouse).

Note that the order of the XXL descriptions in the source code (in the Text View) are also changed when moving the icons in the Graph View.

Constrained Geometry (Form Widget)

The children can be attached one to another, or to a virtual and elastic grid. XXL offers a special-purpose object (called Attach) to specify such constraints and a specialized editor to configure them interactively in the Builder. To open this editor:

Such constraints can also be specified textually as follows:

		 "menubar",  "top:FORM,    left:FORM, right:FORM",
		 "message",  "top:menubar, left:FORM, right:FORM",
		 "scrollbox","top:message, left:FORM, right:FORM, bottom:FORM",
Each line specifies top, left, right and bottom attachments to another widget, to a relative position in the Form or to the enclosing frame.

6. Specifying Behaviors

Callback Editor

Call-back functions can be registered by adding Callback objects to Widget objects (Callback objects must be linked as children of the Widget objects they are relative to). These objects provide a way to specify a callback function call, that is to say:

The first field is a Motif resource name that specifies which kind of events will automatically provoke a function call. We will call it a callback condition.

Callback conditions can be changed by modifying the Name field in the Edit Bar (see section 2). Callback objects can be freely attached or detached to Widget objects and their source code can interactively be changed (like for other XXL objects) through the Text View (see Section 7: Editing the Text View).

At last, they can also be set by invoking the Resource Editor in the following way:

Note: this feature is incomplete in the current version. It will be completed in the next release of the system.

Conditional Evaluation

Conditional Evaluation provides a way to re-evaluate dynamically a sub-tree of XXL objects when a certain condition is satisfied (i.e. when a certain event occurs on a certain widget). Cond objects work in the same way as Callback objects, except that they re-evaluate their child objects (that can be sub-trees of objects) instead of calling a call-back function.

Combined with Set objects (as children) they provide a simple way to change dynamically the resources of other widgets. Moreover, they can also be used to create new widgets or new Interface Instances at run-time.

Cond objects can be handled in a direct manipulation style like other XXL objects. They can also be modified in the same way as callback object through the Resource Editor, the Source Code Editor or by changing their condition value in the Edit Bar.

7. Editing the Text View

The Text View is only displayed upon request. Each source file (C, C++ or XXL Script file) corresponds to a separate Text window. To open the Text View that contains a given object:

Alternate ways: Select icon then type Control-T, or open the View Menu then click on Text.

The Text View is sensitive: clicking on the source code that corresponds to an XXL object will automatically select this object (more precisely, all the text that is actually included in this object will be selected, possibly including child objects).

The Text View also works in an "hyper-textual" fashion: clicking on variable that refers to another object will automatically scroll the text and select this object. Finally, note that clicking with Mouse Button 3 (right button) on the text will open the corresponding a pop-up Menu that is similar to the Icon Menu in the Graph View.

Changing the Source Code

The source code displayed in the Text View can be modified in two different ways:

The text is incrementally modified in facsimile way when changing the Graph View: its content is actually changed on the spot so that their original structure can be preserved (including comments).

You can also change the source code textually in the following way:

The Graph View and the Widget View will then be updated if the entered text is syntactically and semantically correct. Otherwise, errors will be displayed in an Error Dialog Box.

8. Saving an Interface

Alternate way: Select Interface icon then type Control-S

A newly created Interface (i.e. by using the Visual Builder) can either be saved as an interpretable XXL Script file or as a compilable C/C++ file. In the latter case, the XXL Builder can optionally add an appropriate main function to the C file and generate a standard Makefile. Note that XXL GUI descriptions in the source code are exactly the same in both cases except that additional source code is added when generating a C file.

XXL Interfaces loaded from Script files (see next section) can also either be saved in Script or in C/C++ files. By opposition, XXL Interfaces that come from C programs can only be saved in C files (in other words, it is not possible to convert C files into Script files but the opposite is true). However, Interface subparts can freely be exchanged between separate Interface hierarchies (no matter the kind of source file they are actually located in).

9. Loading an XXL Script or a C/C++ Program

Any C, C++ or XXL Script file that contains XXL Interface descriptions can be edited by using the XXL Visual Builder . There is no restriction on the way this file was initially produced: it may have be written by a programmer, generated by the XXL Builder (or by any another tool) or both. XXL descriptions can always be re-interpreted by the XXL Builder, no matter in which file they were initially located. The only mandatory condition is that XXL textual descriptions follow the XXL specific syntax.

Loading XXL Script Files

It is possible to load as many XXL Script files as needed so that several interfaces can be created and edited simultaneously. There are three possible way to load Script files:

Two possible cases: ! Notes:

Loading C and C++ Programs

By opposition to Script Files, C and C++ programs can not be loaded dynamically once the XXL Builder has been started. Instead, you must:

This command will actually start your program and the XXL Builder at the same time. The Builder is then ready to edit:

Interfaces are not implicitly edited (their Graph View and their Text View are not automatically created) in order to avoid unnecessary computation time. To edit a given Interface you must either:

The builder will then show the visual representation of the selected interface (the Graph View) and establish the correspondence between the graph of XXL objects and the original source code that produced this interface (the Text View).

! Notes :

Compilation Notes

There a two different ways to compile C and C++ programs:

The first compilation mode is intended for "final use", while the second mode must only be used during the iterative development process.

10. Don't Panic Section and Other Tips

If the XXL Builder is blocked ...

There is no feedback when clicking on widgets and: Sending Unix Signal SIGINT (Interrupt = Control-C) may also unlock the XXL Builder in certain cases (and without crashing the application: see below).

Signal Protection

The Builder is protected against most Unix Signals (including SIGINT; usually = Control-C) and X-Window Error Handlers. A Dialog Box should normally pop up to ask the user whether he/she wants to continue or to exit the application. However:

X-Window Server and Window Managers

Source files can't be Edited

All source files you want to edit must be located in the current directory (the directory where you started the Builder or your C program with option -build). Other files may be located anywhere in the file system.

Moreover, your program must have been compiled with the proper option and the proper library (see Section 9: Loading an XXL Script or a C/C++ Program and subsection Compilation Notes

Using Emacs to Edit Source Code

A few tips when using the Emacs text editor to edit XXL interfaces:

[XXL Index] [Elc Index]

Page maintained by Eric Lecolinet ( Jan/Nov 97.