by Ken Henderson
Today, you'll delve more deeply into the task of constructing IntraBuilder forms. You'll build on the knowledge you acquired in Day 3, "Forms, Part 1," regarding form construction and the ways that components interact with one another, including the following:
The Layout menu is visible only when you're designing a form or report. It includes options for changing the appearance of the form or report currently open in the Designer. Using the Layout menu, you can align controls with one another, size controls relative to each other, change the spacing between controls, and apply font and color schemes.
Essentially, there are two ways to align controls in IntraBuilder.
The first way is through the use of the Align control buttons
on the standard toolbar. The second way is through the use of
the Align option on the Layout menu. In either case, you begin
by selecting the controls you want to align.
| NOTE |
You can select multiple controls in the Designer by dragging a rectangle around them or by clicking the first one and Shift-clicking any additional controls. |
After you select a group of controls, you have a variety of alignment options. You can choose any of the following alignments:
To see how this works, reload the Bio2 form you created yesterday and select some of the Text controls. After you've selected them, click the Right alignment button on the standard toolbar (it's the button with the vertical bar on the right). You should see the selected controls realigned so that they all share the same right margin, as illustrated by Figure 4.1.
Figure 4.1 : Align buttons on their left, right, top, or bottom edges.
Now, while the Text controls are still selected, click the Layout|Align|Align Left option in the IntraBuilder menu system to return them to their former positions. (Your Text controls should have been left-aligned initially if you constructed the Bio2 form as shown on Day 3.) Figure 4.2 shows what the form should again look like.
Figure 4.2 : Realigning controls to the left after experimenting with alignment.
Sizing a group of controls works much the same way as aligning them. Select the controls you want to resize and select Layout|Size. You have the following four options when sizing a group of controls using the Layout menu:
There are two easy ways to size a group of controls. One is the way just mentioned: the Layout|Size menu selection. The other way is to change the width property of the controls in the Inspector. You can do this by first selecting the group and then pressing f11 to call up the Inspector. In the Inspector, change the value of the width property to adjust the widths of the selected controls. Changing the width of all the controls at once might or might not result in what you want, but at least it's easy to do.
IntraBuilder provides a nifty grid facility for helping you align controls. When you have the Snap to Grid option turned on in the Form Designer, moving a component causes it to jump (or, snap) to the nearest horizontal or vertical grid.
Obviously, when you are dropping onto a form a number of controls that you want to be aligned in an intuitive and systematic fashion, a grid can be quite helpful. However, grids can get in the way of making minor adjustments to controls. If you want to move a control only slightly, having it jump to a nearby grid line can be annoying. In these cases, you should turn off the Snap to Grid option (on the Properties|Form Designer Properties menu).
To change the way that grids behave, use Properties|Form Designer Properties on the IntraBuilder menu. You can configure whether or not a grid is displayed, whether or not items snap to it, and how fine or granular the lines on the grid are (that is, how close the grid's horizontal and vertical lines are). Figure 4.3 shows the various grid options you can specify.
Figure 4.3 : Set grid options with the Form Designer Properties dialog box.
IntraBuilder enables you to build multi-page forms. These translate into multi-page Web pages when accessed with a browser. Adding a new page to an existing form is simple: Just click the Next Form Page button on the IntraBuilder toolbar. Every time you do this from a form's last page, a new page is added.
You can move backward to previously created pages by clicking the Previous Form Page button also on the toolbar. You also can set the current page number by using the pageno property of the base form class. Setting the pageno property in the Inspector changes the current form page.
Note that page zero has a special meaning among the pages in a multi-page form. It's known as a global page because any component whose pageno property is set to zero shows up on every page in a multi-page set. Page zero also shows the contents of all the other pages, layered one on top of the other. Of course, this could look pretty bizarre if you didn't already know that this is how things work. By displaying all the controls on all pages at once, you can more easily align controls between pages. You can ensure that they don't overlap controls on the other pages.
There are a couple of ways you can move a control or set of controls from one page to another. You can do this either using the Inspector or via the Windows Clipboard. I'll explain each technique in the next sections.
Moving a control or group of controls using the Inspector is as simple as changing any other property in the Inspector. Select the controls you want to move, and then bring up the Inspector (by pressing f11) and set the pageno property to the target page. Figure 4.4 shows how to make the buttons appear on all pages by moving them to page zero.
Figure 4.4 : Set the pageno property in the Inspector to move between pages.
You can also move controls from page to page using the Windows Clipboard and these steps:
You might find that you want to change a form's current page while the form is running (while a user is browsing it). The easiest way to change pages at runtime is with a code block. To do this, follow these steps:
Figure 4.5 shows the form with page navigation buttons.
Figure 4.5 : You can switch pages at runtime using code blocks.
 |
IntraBuilder remembers the current page in a multi-page form when you save the form to disk. If you then make the form available on your Web server, users will be presented with the page that was current when you last saved the form. This could be somewhat confusing, especially if page zero is the page they see. For this reason, be sure to set a form's current page to page one before saving it. (Do this by setting the form's pageno property to 1.) |
IntraBuilder enables you to create custom components and add them to the Component Palette for use in forms and reports. You base a custom component on an existing component, giving it property values, event handlers, and methods that you want to reuse. You might, for example, configure a set of buttons for navigating a form's rowset and then save them to the Component Palette for use on other forms. When you later drop them onto a form, the text property and onServerClick event of each button would already be set-so you wouldn't have to reset it.
To set up a new custom component, follow these steps:
Figure 4.6 : Use the Save as Custom dialog box to create new custom components.
After you add a custom component to the Component Palette, you can use it like any other component. You'll notice that the properties, event handlers, and methods that you established for a custom component before saving it already are in place when you drop the component onto a form. This saves you from having to reset commonly used settings for a number of similar controls.
You can create custom forms to provide consistency between the forms within an application and between applications. You might, for example, configure a special background bitmap that all of your forms share. You would begin by creating a custom form class and then using it with your forms as you build them.
You can take any of these three basic approaches to create a custom form class:
Custom form files have an extension of .JCF. When you get ready to save a custom form class, you'll need to supply a class name for the new class definition, as well as a base filename for the file in which it is to be saved to disk. Figure 4.7 illustrates the process of saving a custom form class.
Figure 4.7 : You can create custom form classes on which to base other forms.
You can set the custom form class on which to base a new form by selecting File|Set Custom Form Class. As you can see in Figure 4.8, you're required to specify the name of the file containing the custom class definition. From this, IntraBuilder extracts the name of the custom form class. After you've set up a custom form class as the basis for a new form, the new form inherits the properties of the custom form class.
Figure 4.8 : Base one form on another by specifying a custom form class.
You can clear a form's custom form definition by using the Set Custom Form Class dialog box. Select File|Set Custom Form Class and click the Clear Custom Form Class button in the ensuing dialog box. See Day 9, "Creating a Common Look and Feel," for more information about custom form classes.
In this chapter you learned how to construct more sophisticated forms and how controls interact with one another. Specifically, you discovered how to align controls with one another and how to size a form's controls. You also saw the usefulness of the Form Designer's grid and how to configure it. You finished up by learning how to set up and traverse multi-page forms and how to create and use custom components and forms.
| Q: | When I attempt to align two controls along their left edges, which control is considered the base control? |
| A: | The leftmost control. This is also true when aligning controls on their other edges. The control that is farthest in the direction you are aligning will serve as the base control; the other controls will line up with it. |
| Q: | When I align a set of controls to the "relative" horizontal center of a form, where are the controls actually aligned? |
| A: | They are aligned with the horizontal center of the selected controls. |
| Q: | What is the difference between a control and a component? |
| A: | Controls are components that the IntraBuilder Server renders as visible HTML controls in a browser. Other types of components include data access objects and report objects. |
| Q: | Can multiple custom components be added to the Component Palette in a single step? |
| A: | Yes; simply select them before clicking File|Save as Custom. |
The Workshop section provides questions and exercises to help you get a better feel for the material you learned today. Try to answer the questions and at least think about the exercises before moving on to tomorrow's lesson. You'll find the answers to the questions in Appendix A, "Answers to Quiz Questions."
