Window Design Tips

Document created by Chris_Short Employee on Apr 20, 2011Last modified by Chris_Short Employee on Jun 13, 2014
Version 3Show Document
  • View in full screen mode

Field Design List

The field design list is an excellent way to see the ‘state’ of all of the export views in the procedure.

tips-fig6a.bmp

The character to the left of the attribute tells the developer how (or if) the field is being utilized by the current window/dialog box. ‘*’ The attribute has already been placed on the window. ‘d’ The properties have been defined for the attribute, but the field has not been placed. The developer can define an attribute by clicking the PROPerties push button or by double clicking on the attribute. ‘h’ The attribute is hidden. The field may have been placed on a window and later removed, but the mapping still exists.

If the attribute is not coupled with one of the three characters above, then it’s properties have not been defined for use by the current window or dialog box.

Attributes which are defined (‘d’) can be used to manipulate disable logic within a window or dialog box. Take the situation illustrated below in Figure 6.1. The field ‘out_return_needed ief supplied flag’ is defined to the window, but not placed anywhere on it.

tips-fig6.1.bmp

When setting up the disable logic for the OK button on the dialog box ‘POC Detail’, that flag is available for selection by the developer.

tips-fig6.2.bmp

This eliminates the need to place fields outside the barriers of the window (widen a window, place a field on the edge, and return the widow to its original size) in order to provide an alternate means of disabling a field or control.

Special Actions for Menu Items

When defining an item that is part of a menu structure, the developer has some additional options that are not available when defining other controls.

tips-fig7.bmp

The special actions ‘Cut’, ‘Copy’, and ‘Paste’ can be used in association with menu items only. As Figure 7 shows, CA Gen takes advantage of the clipboard within the operating system to perform this function.

Getting Rid of Help and Window Menu Items

Performing this task is as easy as clicking a checkbox. The trouble here is knowing where to find it. Click on ‘Menu Design’ within the Window Design Tool, and highlight the top line – ‘Main Menu Bar’. Clicking on the PROPerties button will open the Menu Properties Box. It contains the checkbox which needs to be ‘turned off’ in order to prevent the ‘Window’ and ‘Help’ options from being generated.

tips-fig8.bmp

As illustrated above, the user can also change the Foreground Color, Background Color, and Font Size of the menu within the Menu Properties box.

Resizing Listbox Columns

Once a list box is placed on a window, the developer can adjust the width of the columns. This is done by placing the cursor over the column divider line until a double arrow appears. Figure 9 shows a double-headed arrow in between the columns “status” and “date-entered”. From there, it is a simple click and drag procedure.

tips-fig9.bmp

There are a couple of simple, yet very important, things to remember when resizing list box columns: Even though the edit pattern characters are not running into the next column, this does not mean that user entered data will automatically fit in the space provided. Font size and the specific width of each character in the font must be considered before determining the proper column size.

Resizing list box columns will affect how the data lines up with its associated column header prompt. The headers must be moved independently – their position does not change when a column width is adjusted.

The Selection Character

In order to associate a export group view with the list box control, the group view must contain a selection character. When setting up the properties of a list box, the developer can specify which field will act as the selection character by highlighting the desired field and clicking the PROPerties button as shown in Figure 10. This action will open the ‘List Box Field Properties Box’ and the developer must then check the ‘selection indicator’ field at the bottom of the dialog box.

tips-fig10.bmp

After the checkbox is ‘checked’ and the window is closed, the field designated as the selection character will have a ‘d’ next to it. This means that the field has been defined, but will not be placed on the window. For more information, see FIELD DESIGN VIEW LIST earlier in this section of the guide.

Each list box must have a selection character if it is to work properly. The selection character is what CA Gen uses to determine if a row within a list box has been selected. The developer can see how this is done within the TRACE facility (discussed later on in this guide). If a row in a list box is highlighted, the selection character for that row will contain an ‘*’. By cycling through the members of a group view within TRACE, the developer can see which row has been selected.

Note: If a list box supports ‘Extended Selection’, selection character fields might at times contain a ‘+’ or a ‘-‘. By allowing extended selection, the developer gives the user the ability to select multiple rows by holding down the shift or control keys while clicking on items within the list box. The ‘+’ is used to indicate the last row selected in the list box when extended selection is utilized. Likewise, the ‘-‘ is used to show the last field being ‘unselected’ using this method.

Selection Character Values
BLANKuntouched row in the view is not highlighted at all
*highlighted, row selected
+currently highlighted row clicked (unhighlighted)
-unhighlighted row clicked
<unhighlighted top row in viewable list
>Item is the highlighted top row in viewable list
HRow is hidden via FILTER or listbox view
ARow is added and highlighted (applies to enterable listboxes and enterable dropdowns

Window Mapping

Mapping is the process of assigning Import Views to Export Views. For a given Window or Dialog box, the developer can see which fields are mapped by clicking on Design…Mapping within the Window Design tool.

tips-fig11.bmp

The view mapping dialog box, Figure 11, illustrates which export views will be moved to which import views after each execution of the procedure. This passing of views happens once the flow through a procedure is complete and control is passed to the Window Manager. The developer does not have to go into the view mapping dialog box if both an import and export view were assigned to a window field at the time it was placed. However, it is always a good idea to double check the mapping once the design of a window or dialog box is complete. Improper mapping will result in data being lost and/or placed in the wrong fields at runtime. CAUTION: ADDING AN ATTRIBUTE VIEW AFTER IT HAS BEEN MAPPED WILL NOT AUTOMATICALLY MAP IT. BE SURE TO CHECK YOUR MAPPING EVERYTIME YOU ADD A VIEW.

“The biggest problem with not mapping is losing a variable's value. For example, you need to map exports to imports as a holding area when travelling between the window and its associated procedure. If you do not map a flag, for example, then flow to the window, when you come back into the procedure, the flag will be blank. The reason you do window mapping is to retain attribute values when cycling between the window/dialog boxes and their associated procedure. Also, if you want to place an attribute on a window, you place export attributes (of course), then those exports get passed back into the procedure as imports to capture what the user enters or changes on the window. SO, TWO REASONS to map: (1) retain “working” attribute values and (2) communicate with the window.” Mary Russell, Computer Associates, Principal Consultant

Specifying Commands

Setting a command within CA Gen serves multiple functions and can be done in a variety of places with a given model. The manner in which a command is set determines what affect it will have when the application is executed.

Command is (command value): When a command is set in this fashion, its purpose is to request an action to be taken by the current procedure, or to request action when passed to a separate procedure. It is added as its own statement within an action diagram. When a command is set in this fashion, the developer may interrogate the special attribute ‘command’ within an action diagram by using a such statements as CASE, IF, or WHILE.

tips-fig12.1.bmp

Associating a command with an event: A command can be associated with an event action so that when the event is triggered, the special attribute ‘command’ is set. This is done by clicking on the ‘Commands’ button within the Event Processing window as shown in Figure 12.2. When a command is set in this fashion, it may be interrogated within an action diagram by using such statements as CASE, IF, or WHILE.

tips-fig12.2.bmp

Associating a command with a push button or menu item: When a command is associated with a push button or menu item, the special attribute command is not set, and therefore DOES NOT have the same effect as the command set in the event action. The specified value will not show up when attempting to interrogate the command attribute within an action diagram. The command is set by clicking on the ‘Cmds’ button in the properties window for the push button or menu item.

tips-fig12.3.bmp

The main reason to set a command in this fashion is to allow for the enabling and disabling of the item within an action diagram using the GUI statements ENABLE and DISABLE. In the case of a menu item, it also allows the developer to utilize the MARK and UNMARK GUI statements, Figure 12.4.

tips-fig12.4.bmp

Importing Bitmaps to the Model Directory

Utilizing Bitmaps on widows will help spice up the appearance of any application. By replacing the standard push button text with a bitmap, the developer can help reinforce the action associated with that particular control. In either case, if the developer wishes to utilize a bitmap, it must first be imported before it can be placed within the application. This is done through the bitmap management window, Figure 13.1. It can be access through both the push button properties window as well as the picture properties window.

tips-fig13.1.bmp

In the example above, no bitmaps have been imported. To import a bitmap, browse to the location where the bitmap is located (or type the path directly into Import/Export File box). Once the location is entered into the Import/Export file box, press the import button. The bitmap you specified will be listed in the Installed Bitmap box and is now available for placement on a window.

tips-fig13.2.bmp It is possible to import multiple bitmaps at once. This is done by inserting ‘path name/*.bmp’ as shown above. Click ‘Import’, and all of the bitmaps in the specified directory will be available for selection.

When a bitmap is imported, a .PPM (PORTABLE PICTURE MAP) file will be created in the bitmap subdirectory underneath the {model name}.ief directory. It is the existence of this .PPM file which allows the developer to select it for placement on a window.

Note: When a bitmap is used for the face of a push button, the button text entered in the push button properties box still plays a role at runtime. When the user places the cursor over the push button within the application, the push button text will pop up in the form of context sensitive help. This helps make the application more user friendly.

Different Bitmap States

The CA Gen toolset will accommodate 4 bitmap ‘states’: enabled, disabled, pushed, and focused. The number of states utilized at runtime is determined by the value of the Number of Pictures filled on the Push Button Properties dialog box. The example below, Figure 14.1, is only utilizing two states.

tips-fig14.1.bmp

The Number of Pictures specified is interpreted as follows:

1: The entire image is to represent the enabled state. Operating system defaults are to be used for the disabled state, the pushed state, and the focused state.

2: The top half of the bitmap is to represent the enabled state and the bottom half is to represent the disabled state. Operating system defaults are to be used for the pushed state and the focused state.

3: The top third of the bitmap is to represent the enabled state, the middle third is to represent the disabled state, and the bottom third is to represent the pushed state. The operating system default for focused is to be used for the focused state.

4: The top fourth of the bitmap is to represent the enabled state, the second fourth is to represent the disabled state, the third fourth is to represent the pushed state, and the bottom fourth is to represent the focused state.

NOTE: When specifying multiple states, make sure the bitmap file contains the same number of versions of the picture to be placed on the button. The following bitmap was used for the OK button in the previous example, Figure 14.1

tips-fig14.2.bmp

Video Properties

The video properties option allows the developer to control the appearance of all fields and control on a window or dialog box. The object selected at the time the menu option is chosen will determine how the changes cascade down. For example, if the window selected and the developer changes the font, the fonts of all prompts, fields, and push buttons will be changed. (The exception is the menu structure. Menu properties must be set separately) However, if a single entry field is selected, only that field will display in the newly chosen font. The video properties box is accessed via the detail menu within the window design tool.

tips-fig15.bmp

As illustrated above in Figure 15, foreground color, background color, and font settings can be controlled through the video properties box.

Positioning Window Objects

Proper positioning of window objects is essential when attempting to create a uniform look throughout a given application. Objects can be moved in three ways:

Click and Drag: Right click and hold the item to be moved, drag it to its desired location, and release

Edit…Move: Highlight the item to be moved and click edit…move on the Window Design menu. A cross hair will appear over the selected item. Drag (don’t click yet!) the item to the desired location and then click to release the cursor’s hold on it.

Field Positioning dialog box: By selecting ‘Position’ from the Edit menu item within the Window Design tool, the developer can line up objects on a window, position them relative to each other, and position them relative to the window itself. This will open the Field Positioning dialog box, Figure 16.

tips-fig16.bmp

The two options under ‘Move’ will place the selected items relative to the entire window, and are available when single or multiple items are selected. The ‘Default Size’ and ‘Arrange prompts against the fields’ options are also available independent of the number of selected items.

All other options are available only when multiple items are selected; they involve moving items relative to each other. When multiple items are selected, CA Gen uses the first item as the ‘anchor’, and subsequently selected items are placed relative to the anchored item.

Tabbing Sequence

By setting the sequence on a window or dialog box, the developer can specify the order in which the cursor moves from control to control when the tab key is pressed. The tool will automatically determine a sequence for you, but it often must be altered once fields are moved around during the window design process. The default sequence will flow left to right, top to bottom based on where the individual controls were originally placed. This order can be modified by clicking on Detail … Sequencing within the Window Design tool. This will open the Control Sequencing dialog box, Figure 17.

tips-fig17.bmp

In order to change the default sequencing, highlight the field you wish to move and click ‘Move’. Next, click on the field or control you want the highlighted field to be after in the new sequence order. The selected field will then appear in its new place in the sequence order. Clicking on ‘Transform’ will reorder the controls to the default sequence.

Designing with Grid On or Off

The Window Grid is another tool available to the developer to aid in the placing of objects on a window. To display the Grid Definition, click Options … Grid within the Window Design Tool, Figure 18.

The Information group box displays characteristics about the font being used. These settings are not controlled by CA Gen – they are set at the operating system level.

The Horizontal and Vertical coordinate boxes allow the developer to set the distance between grid lines. The figures measure distance in a device independent presentation unit of measure.

The Show Grid check box determines if the grid is visible to the developer within the Window Design tool. The grid is never visible to the user at runtime.

tips-fig18.bmp

The Snap Windows to Grid checkbox will force the developer to place all fields and controls along a grid line. It also restricts the sizing of objects, ensuring that all corners will fall on a grid coordinate point. This helps to ensure that fields and controls are lined up properly with one another.

The Show Coordinates checkbox controls whether or not a highlighted object’s coordinates, height, and width will appear in the title bar of the Window Design tool.

Rabbit Test…Oops, Rapid Test

Did you know that when you resize the CA Gen Testing Tool dialog box that there is a rabbit head rolling around and his tongue sticking out. The previous version of CAGen, the race car, Figure 19, used to be a rabbit. It was so-called probably because of “rabbit testing” which sounds similar to rapid testing. It was not only later on that it was changed to a race car. But the rabbit still lives.

Next time you are in Window design, go to Mode…then Test. Resize the CA Gen testing tool and you will see the rabbit’s head rolling around and, as always, sticking out his tongue at you.

tips-fig19.bmp

<!-- wikipage stop -->

Attachments

    Outcomes