| X-Designer User's Guide |     |
| X-Designer User's Guide | |
| C H A P T E R 1 |
|
Overview |
X-Designer is an interactive tool for building graphical user interfaces (GUIs) using the widgets of the standard OSF/Motif toolkit as building blocks. X-Designer lets you design a hierarchy of widgets on the screen quickly and easily by clicking on icons. It displays your design in two ways simultaneously: as a tree structure which represents the widget hierarchy and as a dynamic display--an active prototype which shows what your interface looks like and how it behaves. Interactive editing features let you browse through the hierarchy, cut and paste individual widgets and change widget resources. Because the dynamic display changes as you edit your widget hierarchy, you can immediately see the effects of your actions.
When your design is complete, X-Designer automatically generates the code files required for your interface. You can compile, link and run the code generated by X-Designer without modification as a prototype of your interface. You connect the prototype interface to your application code by writing connecting code. X-Designer provides sample files which you can use as templates for the connecting code.
One way you can connect your X-Designer interface to the application is by associating callback functions with specific widgets. For example, you can designate a certain routine to be called whenever the user clicks a certain pushbutton in the interface. Callbacks let your application receive and handle user events from the interface.
X-Designer incorporates the tools XD/Replay, XD/Capture and AppGuru. All of these tools help you with your design. AppGuru provides you with the basics for your application while XD/Replay and XD/Capture let you update and examine your existing Motif applications. See Capture Dialog for details on XD/Capture and AppGuru for details on AppGuru. See Chapter 14 for details on XD/Replay.
With Smart Code callback technology, X-Designer helps you to build a thin client and server application from your design. It also allows you to create client applications capable of accessing the Internet. The following chapters cover this area:
X-Designer can also be extended to use widgets from other X toolkits. Chapter 23 discusses how to extend X-Designer to include additional widgets.
X-Designer typically generates code for use with the standard OSF/Motif and X toolkits. However, it can also generate code that will result in an equivalent interface on Microsoft Windows. The code can be structured in such a way that the majority of your application will remain the same on either platform. This technique makes extensive use of X-Designer's C++ code generation facilities and is discussed in Chapter 11 and Chapter 12.
X-Designer can also generate Java from your design, giving you an alternative cross-platform strategy. This is covered in Chapter 10.
X-Designer requires one of the following configurations:
|
Note - Solaris 7, Solaris 8 or Solaris 9 for Developer System Support or Entire Distribution cluster has to be installed. |
In order to compile the code generated by X-Designer, you will need the following:
To compile the MFC code generated when in Microsoft Windows mode, you will also require the following:
In order to compile and run generated Java code, you will need a Java compiler and interpreter. If you intend to generate applet code, you will also need either an applet viewer or a HTML browser to view the applet.
The following introduces some of the basic concepts of X-Designer together with some of the terms used in this manual.
Widgets are the building blocks used to create a user interface. Some widgets have a specific appearance and behavior in the interface display. Examples in Motif include PushButton, Label, and TextField widgets. Another type of widget is invisible itself but serves to contain and organize other widgets and is thus known as a container widget. Container widgets include the Form, BulletinBoard, MenuBar and RowColumn widgets.
All the Motif widgets, and any additional widgets which your configuration of X-Designer uses, are represented by icons in a widget palette on the left side of the main X-Designer screen. When you click on one of these icons, a widget of that type is added to the design. Individual widgets in the design are known as instances of a widget class. For example, if you click on the PushButton icon three times, you add three instances of the widget class PushButton to your design.
The widgets in a design are organized in a design hierarchy which X-Designer displays as a tree which has its root at the top and branches spreading downward. The design hierarchy is displayed in the large drawing area of the main X-Designer screen, as shown in FIGURE 1-1. This area is called the construction area.
[ D ]
Widgets added to the hierarchy are children of the parent widget immediately above them. This relationship is important because a parent widget can affect its children's appearance and behavior. For example, a RowColumn widget can impose a strict layout on its children which causes the children's size and position to change automatically.
Parent widgets appear above their children on the screen, as shown in FIGURE 1-2.
[ D ]
Resources are attributes of a widget which affect its appearance or behavior. Examples include dimensions, the content of a label or text field, and color. When X-Designer creates an instance of a widget, it assigns valid default values for each resource. Interactive resource panels allow you to supply your own resource values.
Since resources and their valid values are defined by the widget manufacturer, and not by X-Designer, it is not possible to document all of them fully in the X-Designer manual. However, to aid you in learning X-Designer, we discuss some commonly used Motif resources in this book. As you become more experienced, you should consult the Motif documentation for complete information about its widget set and the possible resource settings for each widget. If you are using widgets from other toolkits, consult the documentation from the widget developer for guidelines.
One group of resources (attachments) controls the spatial position of widgets within the Form container widget. X-Designer provides an interactive editor, the Layout Editor, for setting attachments.
Some classes of widgets have counterparts called gadgets. Gadgets are like widgets but have a more restricted set of resources. Because gadgets are less expensive than widgets in terms of machine resources, they are sometimes preferred.
X-Designer has many features designed to protect you from specifying widget hierarchies or resource combinations which are not valid in Motif. Commands that cannot be executed in the current circumstances, resources that do not apply to a particular widget and the icons of widgets that are not valid children of a proposed parent widget are grayed out on the screen, as shown in FIGURE 1-3. Grayed-out commands, resources, and icons have no effect if selected.
X-Designer also rejects invalid resource settings. An entry on a resource panel may be rejected for two reasons: either the value entered is outside the valid range, or you are trying to change a resource which is controlled or limited by the widget's parent. This subject is discussed in the Using the Resource Panels chapter. Motif's rules for resource settings are complex and invalid settings can have serious consequences. This feature of X-Designer ensures that your resource settings are valid.
On-line help is available throughout X-Designer. For general help, pull down the Help Menu in the main window and select the "Help" option. There are two viewers which can be used to display help: XD/Help and Netscape. Use the "Viewer" pullright menu in the "Help" menu to change between them. By default, Netscape is used.
The XD/Help window is shown in FIGURE 1-4.
XD/Help has a menubar and a toolbar. There is a "File" menu for the usual file operations, an "Edit" menu for text editing functions and a "Navigation" menu for navigation commands. The toolbar buttons are shortcuts to many of the menu items. The status line at the bottom of the window informs you of each button's function as you move the mouse pointer over it. A list of related topics is displayed in the section at the bottom of the help viewer window. Double-click on one of these to view help on that topic.
Most dialog boxes and resource panels also have a "Help" button which you can click on for specific help about that dialog box.
The help viewer provided with X-Designer can be built into your application to provide help for your users. This is described in Setting up Help in X-Designer.
By default, X-Designer uses Netscape to display hypertext help. In Netscape, you can use the usual navigation keys and commands. You can also click on any highlighted word or phrase in the text to follow a link.
The "Palette Icons" option in the main X-Designer Help Menu displays a copy of the widget palette with the name of each Motif widget icon. Clicking on any of the icons on this screen displays a description of the widget class of which the selected widget is a member.
In order to make X-Designer fully accessible, the following areas have had particular attention paid to them to ensure that they can be used from the keyboard and that they are visually clear. All of the tools which comprise X-Designer have been made accessible in this way.
To move the keyboard focus around the main window, use the Tab key. When a button or area is highlighted, it responds to key presses. Menus are more directly accessible, as detailed below.
All menu items have mnemonics, making them keyboard accessible. This applies not just to the main menu area, but also to tools which have menus such as the Font Editor, Pixmap Editor and Layout Editor.
To make sure that the design area has the keyboard focus, press the Tab key until the design area is highlighted. Once the design are has the focus, use the arrow keys to move the selection around the widgets in the design.
All resource panel items can be navigated with the Tab key. Change page by selecting the required tab (using the Tab or arrow keys) and then pressing Return.
In the window holding area you can use the left and right arrow keys to move between the shells in the window. The home and end keys select the first and last shell respectively.
In the window holding area, the selected dialog is highlighted with a rectangle border as well as with color.
In the design area, if a shell is selected, the left and right keys move between the previous and next dialog in the window holding area.
In the pixmap editor you can use the left, right, down, up, home and end keys in the editing area. The home key (you may need to use Alt-home on your keyboard) selects the cell in the top left corner and the end key (you may need to use Alt-end on your keyboard) selects the cell in the bottom right corner. The current tool is applied to the destination cell. This means that you can design pixmaps using just the keyboard. To change the current tool, use the Tools menu. All items in the Tools menu can be selected using either an accelerator or a mnemonic.
The current cell in the editing area is shown with cross-hatching as well as with a colored border in order to make it visually clear.
The foreground and background color squares can be changed using the up, down, left, right, home and end keys. These keys rotate through the colors defined for the palette.
In the Palette Editor, use the left, right, up, down, home and end keys to change which color cell is selected.
As with all dialogs, use the Tab key to navigate around the Pixmap Editor and Palette Editor windows.
The widget with the current focus is always shown with a highlighted border even if there is another means of indicating the current selection. Drawing areas in windows and dialogs have a border around the whole area when they have the focus. You can change the width of the border around the following areas by editing X-Designer's resource file, as described in Chapter 25:
XDesigner*tree_sw.borderWidth: 1
XDesigner*root_sw.borderWidth: 1
XDesigner*main_sw.borderWidth: 1
XDesigner*paletteDA.borderWidth: 1 (for the Palette Editor)
XDesigner*xmstr_sw.borderWidth: 1
For all of the above, the default thickness is "1".
By default, the red is used as the color for highlighting. You can change this by editing the following resource:
XDesigner*highlightColor: red
The process of creating X-Designer applications usually involves the following four stages:
Designing the interface. This stage includes the following operations:
Generating code. X-Designer automatically generates all the C or C++ code needed to display and operate your interface. X-Designer can also generate a stubs file containing all the #include statements and function declarations necessary to connect the interface code to your application code.
Writing code. To connect your interface prototype to a real application, supply the necessary code between the empty function brackets in the stubs file.
Linking, running and testing. This phase follows the debugging cycle needed for developing any software program.
This manual is organized in three main parts:
Because X-Designer is highly interactive, it is easier to learn its features by actually going through the steps for a simple layout than by reading descriptions of the various features. If you are new to X-Designer, we recommend reading the tutorial chapters at your workstation and performing the steps given to build a simple interface. The tutorial begins in Introduction to the Tutorial and continues through the following chapters, giving detailed instructions for all stages of the development cycle: building the design hierarchy, setting resources, adjusting the layout, setting callbacks, generating code and writing a very simple callback routine. At the end of the tutorial you will have a fully operational (if rudimentary) interface and you will have used all the major features of X-Designer.
Knowledge of the X Window System and Motif is valuable at all stages of learning X-Designer. However, if you are new to X or Motif, you can profit from the first several chapters of the X-Designer tutorial while studying the documentation for X and Motif simultaneously. The bibliography in this manual provides a list of recommended books on X and Motif. At the code generation stage you must have some understanding of X and Motif, and one of the programming languages used by X-Designer (C, C++, or UIL).
The tutorial ends in Adding Callback Functionality. The remainder of the manual covers advanced techniques for getting the most from X-Designer. It is intended for users who are familiar with Motif and X and who have prior experience with X-Designer or have finished working through the tutorial. There are sections dealing with the advanced code generation capabilities, Makefile generation, configuring the widget palette and toolbar, integrating user-defined widgets, advanced layout and internationalization. There are also short tutorials illustrating the structured code generation and cross platform development capabilities using MFC (Microsoft Foundation Classes) or Java. In addition, there are chapters describing the design tools XD/Replay, XD/Capture and AppGuru together with details on how XD/Replay can be extended. There are also chapters explaining X-Designer's Smart Code, thin client and Internet capabilities.
The reference section is intended for X-Designer users at all levels. It includes:
New terms occur in italics the first time they appear. These terms are defined in the Glossary.
The names of keyboard keys and mouse buttons appear in italics, enclosed by angle brackets: <Tab>. When two keys must be pressed simultaneously, we use this form:
For example: <Ctrl-C>, <Meta-H>, <Shift-button1>
Text to be typed at the keyboard is shown in this format:
without quotation marks. If quotation marks appear, they are to be entered with the text.
Some menu commands have keyboard accelerators--keystrokes which can be used to execute the command without using the mouse. In these instructions, we mention keyboard accelerators in parentheses after naming the menu command. The following instruction:
Pull down the Widget Menu and select "Reset" (<Ctrl-T>).
means to select "Reset" from the menu or press <Ctrl-T>--but not both.
File names, function names, and variable names are all given in italics. Function names are distinguished by empty parentheses after the function name: XtAppMainLoop(). Angle brackets indicate a variable portion of a name:
The default widget name is in the form <widget-class><n>, where widget-class is a Motif class (button, label etc.) and n is a numeral.
"Click" always means to use mouse button 1 unless otherwise noted. Unless you have reconfigured your mouse, button 1 is usually the left button, button 2 the middle button and button 3 the right button.
The instruction to "click twice" is different from "double-click". "Double-click" means that you must press the mouse button twice in rapid succession. "Click twice" can be done at any speed.
Names of Motif widget classes are capitalized: Label, PushButton. When similar words are used in an ordinary sense, they are not capitalized:
The main window of this design does not use a MainWindow widget but a Form widget.
Books mentioned in the text of this manual are listed in Appendix F.
| X-Designer User's Guide | 817-5581-10 | |
Copyright © 2003, Sun Microsystems, Inc. All rights reserved.