Motif Example

In this example, we'll construct a very simple color selector. The finished application will allow the user to choose a color and see it displayed. Additionally, we will include a simple dialog. A Simple Motif Color Selector shows the finished color selector:

A Simple Motif Color Selector

Project language

For this example, you can work with UIL, C, C++, or ViewKit as your project language.

Note: A Java example follows later in this chapter ( Java Example ).

Preparing for a Work Session

Starting Builder Xcessory

1. Start Builder Xcessory.

If you have been using Builder Xcessory, select New from the Browser File menu to begin a fresh session.

2. Select either UIL, C, C++, or ViewKit as your language from the Choose a Language dialog of the Browser Options menu.

The following discussion assumes that you have chosen standard (ANSI) C as your programming language. Significant differences for other languages are noted as appropriate.

Note: Complete code files for this example are available in the directory {BX}/xcessory/examples/UsersGuide/Chap1 on the BX PRO CD-ROM or from the ICS Website (http:://www.ics.com) for the following languages: C, C++, UIL, or ViewKit.

Creating Widgets

To create widgets, use the following procedure:

Creating a MainWindow

1. Create a MainWindow about three inches wide and two inches high.

Click on the MainWindow Palette icon with MB1. A widget outline appears. Move this to a convenient screen location and with MB1, drag the rectangle out to the desired size. (Refer to Using the Palette for review.)
If you are using ViewKit, create a VkWindow rather than a MainWindow. When prompted for a class name, enter "MainWindow". After creating the object, change to Classes view by clicking on the arrow button of the Instances/Classes view combination box and selecting Classes from the drop-down list.

Creating a MenuBar

2. Create a MenuBar and place it as a child of the MainWindow, using one of the following methods:

· Click on the MenuBar Palette icon and click again on top of the MainWindow.
· Drag the MenuBar Palette icon from the Palette and drop it on the MainWindow.
· Drag the MenuBar Palette icon from the Palette and drop it on the MainWindow instance representation in the Browser Display Area. (Refer to Display area and Instances/ Classes view combination box for review.)

Note: The MainWindow recognizes the MenuBar widget and automatically moves the MenuBar to the top of the window and resizes it to span the entire width of the MainWindow. Most widgets must be resized manually to fit the MainWindow.
Builder Xcessory automatically creates a MenuBar with many common menu entries when you create a VkWindow subclass. To keep the C and ViewKit interfaces parallel in this example, delete all of these items except the Help menu (helpPane). For the helpPane menu, delete all of its children except helpVersionMenuItem, which we will use later.

Creating a BulletinBoard

3. Create a BulletinBoard and place it as a child of the MainWindow, using one of the methods in the previous step. Resize the BulletinBoard as you place it, using one of the methods described in Creating Objects . The MainWindow automatically resizes itself to encompass the BulletinBoard.

Hint: The first time you create and place an object, it's usually best to resize it as you place it. Otherwise you are likely to end up with a widget that is too small to easily deal with. If this happens, select Enlarge from the Browser Edit menu, or from the MB3 Quick Access menu.

Creating a Scale

4. Create a Scale and place it as a child of the BulletinBoard.

Copying Widgets

1. Copy the Scale and paste two copies as Bulletin Board children, for a total of three scales. Use one of the following methods (check that Scale is currently selected, or select it by clicking on the Scale or its Browser representation):

· Select Copy from the Browser Edit menu. Then select Paste from the same menu. You are presented with an outline of the Scale. Place it into the BulletinBoard. Select Paste a second time and place the next scale into the BulletinBoard.
· Select Copy from the MB3 Quick Access menu by pressing MB3 while the cursor is over the Scale or its Browser representation. Then select Paste from the same menu. You are presented with an outline of the Scale. Place it into the BulletinBoard. Select Paste a second time and place the next Scale into the BulletinBoard.


· While holding down the Control key (Ctrl), drag the Scale with MB2 to another location in the BulletinBoard and drop it. Repeat to create the third Scale. You can also perform this Ctrl-MB2 drag operation with the Browser representations.

Hint: Be careful not to drop a new scale onto another scale. That creates the new scale as a child of the existing scale. If this happens, use MB2 (without Ctrl) to drag the new scale out and onto the BulletinBoard.

Creating a Drawing Area

2. Create a DrawingArea and place it as a child of the BulletinBoard.

This is the area in which the user will view the selected color. It should be about 1" wide and 1.5" high.

Your Interface in Progress shows the result of the preceding steps:


Your Interface in Progress

Setting Instance Names

Using your own instance names when working with Builder Xcessory is good practice. There's no guarantee that the default names will be maintained from session to session. (Besides, imagine sitting down to maintain your application months later and trying to figure out what pushButton73 is supposed to do...)

1. Assign instance names to the existing widgets.

To save time, we'll only assign names to widgets that will be directly referenced in our code.

2. Select each widget and enter the new name in the Instance Name field at the top of the Resource Editor. Use the following names:

scale -> redScale
scale1 -> greenScale
scale2 -> blueScale
drawingArea -> colorArea

Note: When generating C++ or ViewKit code, Builder Xcessory automatically prepends an underscore character to all instance names to construct the class data member used to store the object ID (following accepted convention). So the object named redScale is referenced as _redScale in all generated code.

Working with Multiple Widgets

Now that we have created the basic widgets, we'll begin customizing the widgets and designing the layout.

Setting Scale resources

First, we'll set a number of resources on the Scale widgets:

1. Select all of the scales, using one of the following methods:

· Select the first widget to ensure that no other widgets are accidentally included. Select the other widgets, each in turn, with Ctrl-MB1. You can perform this operation directly on your interface, or in the Browser by clicking on the instance representations.
· Using Shift-MB1, drag out a rectangle, enclosing all of the desired widgets. Any widget entirely within the rectangle is selected. You can circle the widgets directly, or you can circle their Browser representations.

2. Update the Resource Editor by selecting Update from the Resource Editor View menu, or from the Update toolbar icon.

3. Set the following resources (check that All Resources is selected from the Resource Editor View menu):

orientation: XmVERTICAL
We'll be using vertical scales.
maximum: 255
minimum: 0
value: 255
We'll start off at white.
showValue: True
This forces the scale to display its current value as a label
next to its scroll thumb.

Hint: Use the search area of the Resource Editor to quickly locate each of the resources. (See Search area for review.)

4. Set the following resource on the DrawingArea widget:

background: white
We want to ensure that all settings start out in synch,
so make the color display match the scale values.

Moving and Resizing Widgets

Now that we have the Scale widgets oriented properly, we'll work on the layout.

1. Move each of the Scale widgets and the DrawingArea to their intended positions (don't worry about exact positions, we'll use the Alignment Editor to fine-tune the layout).

To move one or more widgets, select the widget(s) and using MB1, position the cursor inside the border of the widget(s) and drag to the new position. During the drag operation, you are presented with a rectangular outline of the widget(s).

Hint: To move a manager and all of its children, select the container and its children, and drag with MB1.

2. Resize each of the Scales so they are the same width, and resize the Scales and the DrawingArea so that they are the same height.

First, select all of the Scales and set their widths. Next, add the DrawingArea to the group of selected widgets by clicking on it with Ctrl-MB1 and set the heights. You have a choice as to how to resize the widgets:
· Selected widgets have grey borders separated into sides and corners. Grab a section of the border with MB1 and drag to the desired size.

Hint: Increasing the size of the layout grid makes it easier to resize and align objects with the mouse. The default value is a 10-pixel resolution. (See Placing Objects with the Layout Grid for more information.)
· With all of the widgets selected, use the Resource Editor to set the width and height resources on the selected widgets. If you have one widget width or height already correct, you can click on the "!=" symbol to the left of the resource to display a list of values for the selected widgets. You can then select a value from the list and apply it to the entire group of widgets.

Using the Alignment Editor

3. Use the Alignment Editor to align and distribute the widgets.

Bring up the Alignment Editor (Browser:Edit:Align:Alignment Editor) and set the following values:
Align: Left/Right: As Is
Align: Top/Bottom: Top
Distribute: Horizontal: Edge Gap: 10 pixels
Distribute: Vertical: As Is
With all the widgets still selected, you can now move them as a group into an attractive position, resizing the top-level shell as necessary by using your normal window manager controls.

Your Interface in Progress shows the result of the preceding steps:


Your Interface in Progress

Adding Action to Your Interface

In this section, we add callbacks to various widgets so that when the user adjusts the scales, something actually happens. We will deal with X color capabilities. If you are not familiar with color manipulation in X, consult your Xlib or Motif programming manuals.

Looking ahead, we will need to access the widget IDs for the Scales and the DrawingArea. We'll do this using one method for UIL and C, and using a different method for C++.

Making object IDs accessible

You can make the necessary object IDs accessible using one of the following methods:

Note: The example code for this example uses the third method below, so you should not take any action at this time.

· Global Storage

Select the widgets, then select the Storage Location option from the Resource Editor Code menu. Choose Global from the dialog that appears, and apply and dismiss the dialog by selecting the OK button.

Note: This method is not recommended. As a general rule, avoid global variables in your code.

· Other Storage

With most applications, instead of declaring a large number of widgets globally, you typically create your own structure with which to keep track of global data. In these cases, you would select Other as a storage location. See Storage Location for more information.

· Local Storage

In many cases, you can retrieve widget IDs dynamically by using the intrinsics function XtNameToWidget. The C code for this example uses this method rather than creating global variables.
With C++, we can get to the widget instances very easily. In C++, all widget instances are automatically declared as protected members of the class and are thus accessible from class instances.

Creating an application as a single class

For simplicity's sake, we will create our example application as a single class, as follows:

1. Select the MainWindow widget.

2. Using either the MB3 Quick Access menu or the Browser Edit menu, choose Make Class.

3. When prompted for the class name, enter "MainWindow".

4. Once you have created your class, change to Classes view by selecting Classes from the Instances/Classes view combination box on the left side of the Browser.

We need to keep track of two pieces of data, the colormap and the colormap entry index. We use a variable of type Pixel that we call _ pixelVal and a variable of type Colormap called _cmap , and declare them as private member variables in our class. We can declare this with Builder Xcessory, using the Resource Editor, or by adding it directly to the right header file. Because discussion of class creation and manipulation is covered later in this manual ( Classes and Methods ), we will add this directly to the .h file later in the example.

Note: To access widget instances from outside a class, add a public method to the class definition. See Adding Methods and Data Members for more information.

Working with Callbacks

Now we'll set up a number of callbacks and use some Builder Xcessory editors to complete them.

1. Set the following resources on all of the Scale widgets.

dragCallback: setColorCallback()
valueChangedCallback: setColorCallback()
Any time the scale widgets' values have changed,
we want to set the color on the Drawing Area.
When you set the valueChangedCallback, rather than typing the procedure name directly into the Resource Editor, use the extended editor (click with MB1 on the button labeled ". . ." to the right of the resource input field). Enter setColorCallback into the Procedure Name field of the extended editor. The procedure appears in the Callback List at the top of the Callback Editor. Use the Apply button to apply this to the Scale widgets.

2. Add the code for the setColorCallback procedure using one of the following methods:

Note: The example file callbacks-c.c contains all the code for setColorCallback.

Note: In order to add code to a file, the file must exist. Builder Xcessory automatically generates code when you edit a callback from the Callback Editor. It's a good habit to be sure that you are in the correct working directory so that your files will be in the right place. Use the Filenames tab in the Code Generation Preferences dialog (Browser:Options: Code Generation Preferences) to set your working directory. Performing a Save, Save As, or Open operation (Browser:File) also sets your working directory.

Callback Editor

· Write the setColorCallback code using the Builder Xcessory Callback Editor. Bring this up by clicking on the Edit button to the right of the Callback List in the extended editor. This starts the configured editor with the correct file loaded in at the appropriate User Code Block.
If this is your first time using the Callback Edit feature, you must specify an editor to use, such as emacs or vi. You can do this without dismissing the Callback Editor. Choose an editor from the Options menu (Browser:Options:Tools Preferences:Editor). See Using emacsclient for more information on Emacs.

Generating code

· Add your callback code by generating code (Browser:File:Generate) and editing the appropriate file from outside the scope of Builder Xcessory.

User Code Blocks

In either case, you insert code into a User Code Block. User Code Blocks are present in many different locations in all Builder Xcessory-generated files. Any code that you insert into a User Code Block is preserved by Builder Xcessory whenever source code is generated.

Note: If you add code to any of the files outside of these User Code Blocks, it will be lost when you generate new versions of these files with Builder Xcessory.

Note: When generating C code, the file callbacks-c.c is not generated with User Code Blocks. Instead, this file is scanned each time code is generated and any new functions are appended to it. For this reason, you can make any changes you want to the file without losing them at the next code generation.

The function setColorCallback performs the following operations:

· Accesses the widget to determine current settings
· Allocates a color cell the first time it is called (we will keep this color cell and reuse it later)
· Gets/sets values from the Scale widgets

The first two operations vary slightly from language to language, but the final operation is the same for all languages.

Here is the code for the final step of the setColorCallback procedure:

XtVaGetValues(redScale, XmNvalue, &redVal, NULL);
XtVaGetValues(greenScale, XmNvalue, &greenVal, NULL);
XtVaGetValues(blueScale, XmNvalue, &blueVal, NULL);
col.red = redVal << 8;
col.blue = blueVal << 8;
col.green = greenVal << 8;
col.pixel = pixelVal;
col.flags = DoRed | DoGreen | DoBlue;
XStoreColor(XtDisplay(w), cmap, &col);
XtVaSetValues(colorArea, XmNbackground, pixelVal, NULL);

For C++ code, you must edit the file <classname>.C . In our example, this is MainWindow.C .

We mentioned earlier that we would be using variables of type Colormap and Pixel to store the currently selected color. Place the following code in the private User Code Block in the MainWindow.h file.

// Begin user code block <private>
Pixel _pixelVal;
Colormap _cmap;
// End user code block <private>

Note: Builder Xcessory makes it easy to specify public/protected/private member data using the Resource Editor, rather than directly editing the header files. See Adding Methods and Data Members for more information.

In addition to modifying the callback code, we'll need to initialize the colormap and color cell:

In C++, we'll use the User Code Block at the end of the create routine.


In C, we'll do the initialization in the callback, but protected such that the code is only executed once.

In all cases, the code to initialize the colormap and color cell looks like the following:

XtVaGetValues(_colorArea, XmNcolormap, &_cmap, NULL);
XAllocColorCells(XtDisplay(_colorArea), _cmap, False,
NULL, 0, &_pixelVal, 1);

Working with Menus

Now that we have taken care of the basics of our application, we'll fill in the gaps by adding menus and a simple dialog window.

1. Create a File menu.

Drag a PulldownMenu onto the MenuBar in your MainWindow. Builder Xcessory automatically creates a CascadeButton, a PulldownMenu, and n PushButton (a single menu item).
Use a VkSubMenu if you are generating ViewKit code.

2. Set the following resources on the CascadeButton (VkSubMenu):

instance name: fileCascade
labelString: File
mnemonic: F

3. Set the following resources on the PushButton (VkMenuAction) menu item:

instance name: exitButton
labelString: Exit

Note: When you select the CascadeButton, all menu items are displayed in your interface. You can control this display by turning Show Menu Children (Browser:View) on or off while the CascadeButton is selected. With the menu items posted, you can select any number of them in the usual manner.
For the next resource, use the extended editor to bring up the Callback Editor.
activateCallback: BxExitCB(0)
In the extended editor, click on the combination box arrow for the Procedure Name. This drops down a list of predefined callbacks and procedures. From this list, select BxExitCB(). In the Parameter Name field, enter 0. For a description of all the Builder Xcessory predefined callbacks, see Predefined Callbacks . You can also add your own procedures to this list. For more information on this process, see See Adding Predefined Callbacks .
Apply this callback with the Apply button.

4. Create a Help menu and apply the following resources to the Cascade:

instance name: helpCascade
labelString: Help
mnemonic: H
To move the Help menu to the right, set the following resource on the MenuBar:
menuHelpWidget: helpCascade
This step is unnecessary with ViewKit. The Help menu is automatically created and placed by the VkWindow class.

5. Set the following resources on the PushButton (VkMenuAction) menu item:

instance name: aboutButton
labelString: About...
activateCallback: BxManageCB("aboutBulletin")
Another one of the built-in callbacks. This one "takes"
a string (a widget instance name), and generates a
function that manages the widget. Notice that the
generated function actually uses a widget ID, not a string.
We'll create the aboutBulletin widget later.

Do not add the callback or change the instance name in ViewKit; change only the labelString.

Working with Dialogs

1. Create a BulletinBoard as a child of a DialogShell, in turn a child of your MainWindow.

To create a widget as a child of a DialogShell, click on a Palette icon (BulletinBoard, in this case), but rather than placing it by clicking again with MB1, click (and optionally drag to desired size) with MB3. Create this as a child of your MainWindow by locating the cursor over the parent (your MainWindow) when placing with MB3.
You can control the type of Motif Shell created at any given time with the Shells options (Browser:Options:User Preferences:Shells). For more information, see Shells .
Creating dialogs in ViewKit is a different procedure. You must create a subclass of VkGenericDialog by dragging out the VkGenericDialog object from the Palette. When prompted for the class name, enter "AboutBulletin".

2. Set the following resource on the BulletinBoard:

instance name: aboutBulletin
Create an instance of your AboutBulletin class as a child of the VkWindow. Resize the AboutBulletin if necessary, so that it is about 2" wide by 1.5" high.

3. Create a Label as a child of the BulletinBoard (genericDialog) and set the following resources:

labelString: Motif Color Editor
Version 1.0, Created by <your name>
Use the labelString extended editor to create a multiline label.
alignment: center
recomputeSize: true
We want the widget to resize itself to hold the labelString.

4. Create a PushButton as a child of the BulletinBoard and set the following resources:

instance name: okButton
labelString: OK
recomputeSize: true
We want the widget to resize itself to hold the labelString.
activateCallback: BxManageCB("aboutBulletin")
Just like the menu item that popped it up, this uses a built-in callback that unmanages ("pops down") the dialog's shell.
Skip this step for ViewKit. The dialog classes will handle all this automatically. We will connect this dialog to the Help menu item using VkApp::setAboutDialog(). Add this code to the <endcreate> User Code Block of MainWindow.C:
Additionally, add the following lines to the <constructor> User Code Block of AboutBulletin.C:
No other changes are necessary to display the aboutBulletin.

5. Resize and position the Dialog and its contents to create an attractive window.

Your Interface in Progress shows the result of adding the menus and Dialog:


Your Interface in Progress

Depending on the project language you are using, the object instance hierarchy shown on your Browser display should look like Your Interface in Browser Display (Using C) or Your Interface in Browser Display (Using ViewKit) .


Your Interface in Browser Display (Using C)


Your Interface in Browser Display (Using ViewKit)

Testing Your Application

We've now reached a point where we would like to test our application and its interface.

Saving the interface

1. Save the interface.(Browser:File).

The first time you save a new project, you'll be presented with a Motif file selection dialog. To change filenames for subsequent save or generate code operations, use the Save As option (Browser:File). Open, Save, Save As, and Generate Code operations all set your working directory for subsequent save and generate operations.

Play Mode

2. Enter Play Mode (Browser:Project) and test your interface.

In Play Mode, you can try out your interface. Click the OK button on the About dialog to dismiss the dialog. (Select Help:About from your application.) The dialog you created should reappear. Test the Scales; you'll see the result of the showValue resource. The labels should change as you move the sliders. Notice, however, the color of the DrawingArea did not change. In Play Mode, all predefined callbacks are active, hence the dialog behavior. Callbacks you've written, however, are not active.
Because the connection between the menu item and dialog is made in User Code Blocks, the dialog does not display in Play Mode.

Testing callbacks

To test callbacks, use one of the following methods:
· Generate Code (Browser:File), compile, link, and run. Using the UNIX command line is still the preferred method for many developers. Builder Xcessory generates both Imake and Makefiles for you.
See Working with Source Code for more information.
· Use an integrated environment (such as WorkShop, Developer Magic, FUSE, etc.).
Make Application (Browser:Project) sends a message to your environment's build tool to have it build your application.
Debug Mode (Browser:Project) runs your application through your environment's interpreter. This has the advantage of providing you with a full debugging environment for the code you've written.
See Integrating Builder Xcessory with Your Environment for more information on integrating Builder Xcessory with other tools.

3. When you are finished testing, re-enter Build Mode (Browser:Project).

Creating a Uniform Look and Feel for Your Application

There are many attributes, such as colors, fonts, and so forth, that contribute to an application's personality, or look and feel. Builder Xcessory helps you to define a total look and feel by building style sheets that can be reused and shared with other developers. You can use system styles to help all of your developers conform to a corporate style guide, clearly identifying all of your applications as part of a single family, and reducing the learning curve for your end-users.

A Builder Xcessory style is basically a collection of resource:value pairs that you define. Styles are related to one another as parents and children. Substyles inherit the resource values of their ancestors while overriding any ancestral values that are specifically re-defined in the substyle.

In this section, we'll build a very simple set of styles for your color selector.

Bringing up the Style Manager

1. Bring up the Style Manager (Browser:Managers:Styles).

In the Style Manager you see a style named "BaseStyle". This is the root style and serves as a placeholder. Notice the padlock symbol next to the name. This style, and any style with the padlock symbol, including system styles you create, cannot be edited.

Creating a new style

2. Create a new style.

Select Create Substyle from the Style Manager:Edit menu. This creates a new style as a child of the currently selected style, in this case as a child of BaseStyle.

Note: Just as with other UI objects, styles can be cut and copied or manipulated with the mouse, including all drag and drop operations, reparenting, and so forth.

Defining a new style

3. Define the new style.

Select the style (BaseStyle1). Select Edit Substyle from the Style Manager:Edit menu to bring up the Style Editor. You can also double-click on the style to invoke the Style Editor.

Creating a list of resources

First create a list of the resources you want to define in this style, using one of the following methods:
· Click on the Resources combination box arrow. This drops down a scrollable list of all available resources. Click on one or more resources to select them. You can deselect a resource by clicking on it a second time. When satisfied, click again on the combination box arrow.
· Type the resource names into the Resources combination box text field, separating multiple resources with commas. Enter Return to terminate the list.
Your selected resources appear below the combination box, where you can set their values just as you would in the Resource Editor.
You can add or delete resources from a style at any time. This affects all objects using the style.

Adding resources

Add the following resource:value pairs to the style:
background: blue
foreground: yellow
It's easiest to use the extended editor to select the font.
The font above is Helvetica, bold, 10 point. Choose any values you prefer.
See Extended Editors for more information.

Applying new definitions

Use the Apply button in the Style Editor to set the style definition.

Applying a style to an entire interface

4. Apply the style to your entire interface, preserving the background value of the DrawingArea widget.

You can apply a style to part, or all, of your interface by using one of the following methods:
· Select Apply from the Style Manager to apply the selected style to the selected object or to the selected object and all of its descendants. Force overrides any resource values already set on the affected objects. Otherwise, the resource values are preserved. Don't force the style in this case to maintain the white background of the Drawing Area.
· Dragging a style onto an object or its Browser representation with MB2 forces the style to the object, overriding any duplicated resource values.
· Dragging a style onto an object or its Browser representation with Ctrl-MB2 forces the style to the widget and all of its descendants, overriding any duplicated resource values.
· Selecting any group of widgets and entering the style name into the Style field of the Resource Editor applies the style to all of the selected widgets, preserving any resource values already set.

Note: Styles applied to classes while in Instances view are ignored. To apply a style to a class, you must be in Classes view.

5. Create a second style as a child of BaseStyle1 (the style we've created above).

Select the intended parent style, then select Create Substyle from the Edit menu of the Style Manager.

6. Add the following resource:value pairs to the style:

foreground: red
fontList: -*-times-bold-r-*-*-*-100-*-*-*-*-iso8859-1
It's easiest to use the extended editor to select the font.
The font above is Times, bold, 10 point.

7. Apply (force) this style to your DialogShell and its children.

Your new style has inherited the blue background from its parent.

8. Edit the first style you created (BaseStyle1), changing the value of the following resource:

background: black
Apply the change in the Style Editor. Note that each widget using that style immediately reflects the change and that each widget using a descendant of this style (including your dialog) also reflects the change.

For more information about styles, including the creation of system styles, refer to Styles .

Working with Source Code

You can generate source code and run your application at any point in the development process.

Note: Builder Xcessory always generates code that compiles and runs, generating stubs where your routines will placed. However, if you have begun adding incomplete routines such as callbacks, methods, and so forth, they may prevent your application from executing.

Creating source code

To create source code with Builder Xcessory, perform the following steps:

1. Customize your makefile to use your compiler of choice and reflect the library locations of your system (Browser:Options:Code Generation Preferences).

Be sure that your working directory is set correctly with the File Names tab sheet in the dialog. Use the Makefile tab panel to set up your makefile (specify your compiler, library locations, and so on).
You can also add your own include information, customize filenames, and turn on and off generation of any particular file.
See Code Generation Preferences for more information on these dialogs.

2. Generate source code (Browser:File:Generate).

3. Build and run your application.

You can build your application by using one of the following methods:
· Use the Make Application item on the Browser:Project menu. This sends a message to your environment's build tool (WorkShop, Developer Magic, FUSE, etc.) to have it build your application.
· Use the Make or Imake files that Builder Xcessory creates in your normal build process.

You can now run your color selector. This concludes our Motif example.

Additional work

Feel free to continue to explore Builder Xcessory's capabilities. Some ideas for additional work include:

· Experiment with Resource Placement in the Resource Editor and with your styles. With an app-defaults file, your end-user can change various attributes at start-up time with customized resource files, or with the X Toolkit command line options. See Resource placement and Resource Settings for a Widget Instance .

· Experiment with some advanced geometry management. Use the Resource Editor `Class Name' field and change the BulletinBoard to a Form. Edit the Constraint Resources of the Form's children with the Resource Editor to control the application's resize behavior. See XmForm for more information on the Form.

· Place the color sliders into a RowColumn widget. Drag the RowColumn along with its children to the Palette. Reuse the collection in another interface.

· Add mnemonics to the menus and test them in Play Mode.

· Do the tutorials in Appendix C Tutorials .

· Refer to the examples on the BX PRO CD-ROM in the directory {BX}/xcessory/examples/UsersGuide/Chap1 or the ICS Website (http:://www.ics.com) for samples of different programming languages.