Copyright © TIBCO Software Inc. All Rights Reserved
Copyright © TIBCO Software Inc. All Rights Reserved


Chapter 1 Getting Started : Tutorial 2: Customizing the Appearance of a Form

Tutorial 2: Customizing the Appearance of a Form
This tutorial illustrates techniques for refining the appearance of a form. In this tutorial, you will do the following:
 
Task A: Change the Background Colors of Panes
Use background colors to make forms and panes more colorful, and to help users find their way through a complex form by visually grouping related controls. In this section, you will configure the background colors of the panes on the Capture Claim form.
1.
Click the Customer Information pane of the Capture Claim form.
2.
On the Layout tab of the pane’s Properties sheet, clear Inherit from Parent, as in Figure 23.
Figure 23 Edit Pane’s Layout
3.
Click the BG Color field to open the color picker for this pane’s background color.
The Color Picker pop-up window opens.
4.
The expanded color picker opens, as in Figure 24.
Figure 24 Expanded Color Picker
 
5.
6.
Save the custom color by clicking the Add to Custom Colors button in the color picker. This will make it easier to reuse the color in the Interview Witness form.
Be sure to save any custom background colors that you might want to reuse. A saved color will appear in the Custom Colors palette of the color picker, and will be available to panes in other forms in this business process, as well as other panes on the same form.
Note that the Windows color picker saves each custom color to one of the 14 color boxes that are arranged in two rows beneath the Basic colors section. Each of these boxes is black until it is used to hold a custom color. Click one of the unused boxes to hold the custom color before you click Add to Custom Colors, or the color you add may overwrite a color you previously saved.
7.
Click OK to set the Customer Information background to the new color.
8.
Repeat steps 1 through 5 for the Accident Information pane to set its background color to light blue with these values:
9.
Again, save the custom color by clicking the Add to Custom Colors button in the color picker. This color will be reused in the next two panes of this form, as well as in the Interview Witness form.
10.
Click OK to set the Accident Information pane’s background to the new color.
11.
Click the Third Party Information pane. Use the procedure above to set its color to the saved custom blue.
12.
Click the Witness Information pane. Use the procedure above to set its color to the saved custom blue.
Setting the background of the Third Party Information and Witness Information panes to the same pale blue as that of the Accident Information pane, suggests visually to the user that, although they are shown only when relevant to a particular claim, the two additional panes belong with the Accident Information pane in terms of content and function. Using background colors in this way helps users more quickly comprehend the layout and organization of a form.
13.
14.
Set the Margin property for the message pane to 20 to allow space between the pane and the buttons.
15.
Set the color to pale gray for the Witness Contact Information pane, blue for the Accident Information pane, and red for the message pane.
16.
Set the Margin property for the message pane of the Interview Witness form to 20, as you did with the Capture Claim form’s message pane.
Task B: Change the Label Width Property of the Panes
With the default settings, each pane is set to Use Form Defaults to determine the Child Labels settings for the controls it contains, as shown in Figure 25.
Figure 25 Child Labels Settings
In the above example, then, the Label Width property for controls placed in this pane is not 120 (that is, the value in the Label Width field is ignored), but is based on form settings.
If no width is set at the form level, each vertical pane will align its controls so that all the fields it contains are vertically aligned, though their labels are of differing widths. This is done on a pane-by-pane basis, so that the fields on different panes won’t necessary be vertically aligned.
In this section, you will modify the Child Label properties at the pane level so that all controls on the form have their fields vertically aligned. To do this, you will set the label width (in pixels) for all fields to a length sufficient to contain the longest label. In addition, you will set the label position property to left instead of top so that control labels appear to the left of the control.
Modify the Form Level Child Labels Properties
To edit a form so that the labels are the same width as the control labels:
1.
Click the Capture Claim form outside of any pane to select the form itself.
2.
Click the Child Labels tab.
Figure 26 Edit the Child Labels Settings
3.
Make sure that Inherit from System Defaults check box is cleared.
4.
Type 200 in the Label Width field.
5.
Click inside the Customer Information pane (but not inside any control) to select the pane.
6.
Click the Child Labels tab on the Properties View.
7.
Clear the Inherit From Parent check box.
8.
Set the Label Width to 200 and the Label Position to left.
9.
Repeat steps 5 through 8 for the other panes: Accident Information, Third Party Information, and Witness Information.
After completing this procedure, all controls on the form will be vertically aligned and the pane labels (as indicated by the underline rule beneath the label text) will be the same width as the control labels (as indicated by the left-hand edge of the editable fields).
10.
a.
b.
Click the Child Labels tab.
c.
Clear Inherit from System Defaults.
d.
Change the Label Width to 230.
11.
Using the same procedure, configure the control labels Witness Contact Information and Accident Information on the Interview Witness form:
a.
b.
Clear Inherit From Parent.
c.
Set the Label Width to 230.
d.
Set the Label Position to left.
All controls on the Interview Witness form will now be vertically aligned and the pane labels will be the same width as the control labels.
Task C: Preview of Finished Forms
After you have finished all steps described in the first tutorial and tasks A and B, the Interview Witness form appears as displayed in Figure 27.
Figure 27 Tutorial 2: Interview Witness Form Design Page
The Capture Claim form appears as displayed in Figure 28.
Figure 28 Tutorial 2: Capture Claim Form, Design Page
 
Summary of Tutorial 2
This tutorial showed how to change some of the visual characteristics of a form to make the form more pleasing in appearance and easier to use. The background color can be used to set off groups of controls that belong together, and the label widths can be adjusted so that all fields on the form are vertically aligned.
 
 

Copyright © TIBCO Software Inc. All Rights Reserved
Copyright © TIBCO Software Inc. All Rights Reserved