Chapter 14

Forms Design II

In this chapter, you will cover the following aspects of building forms:

• Creating additional input items
• Creating noninput items
• Creating windows and content canvases
• Working with other canvases

This chapter covers a wealth of information you can use to make your applications much more sophisticated. You will learn about all the input item types available in Form Builder, and then practice creating check boxes, lists, and radio button groups. Next you will cover noninput item types, with practice at creating buttons, read-only fields, calculated fields, and items to display pictures and play sounds. Then, you will learn how to create applications with multiple windows, and you will create forms that incorporate toolbars, tabbed interfaces, and stacked canvases. The OCP Exam 3 will consist of test questions in this subject area worth 18 percent of the final score.

In this section, you will cover the following points related to creating additional input items:

• Introduction to item types that allow input
• Creating a check box
• Creating a list item
• Creating a radio group

The most obvious task when creating forms is placing items on the form for the user to interact with. Several of the items you can place on a form are designed to let the reader enter or modify data. This section introduces those input items and takes you through exercises creating several different types of them.

Input items are form objects enabling the user to enter and change data. Table 14-1 shows the input items available in Form Builder, along with usage recommendations for each item type.

In order to add a check box to a form layout, the form’s data block needs to include an item that can contain only one of two possible values. Currently, the sample application being used in this unit does not have a column that matches this criterion, so you will add one. Using SQL*Plus, add a profit-sharing column to the EMPLOYEE table by entering the following code:

ALTER TABLE EMPLOYEE
ADD (PROFIT_SHARING_INDICATOR NUMBER(1,0) NULL
CONSTRAINT BETWEEN_0_AND_1
CHECK (PROFIT_SHARING_INDICATOR BETWEEN 0 AND 1));

COMMIT;

Now that the database can store a true/false value for profit sharing for each employee, you need to add the profit-sharing column to the data block underlying your Employee form. Open your sample application in Form Builder, open the Data Blocks node, right-click on the EMPLOYEE_2 data block, and select Data Block Wizard from the context menu that appears. In the wizard, click on the Table tab and then click on the Refresh button. After you see the PROFIT_SHARING_INDICATOR column appear in the Available Columns area, click once on the SALARY item in the Database Items area (to tell the wizard where it should add the new column), and then click on the > button to move PROFIT_SHARING_INDICATOR into the Database Items area. Complete the change by clicking on the Finish button.

Next, open your EMPLOYEE canvas in the Layout Editor. Right-click on the frame surrounding the Employee data block, and select Layout Wizard from the context menu that appears. In the Layout Wizard’s Data Block page, click on DEPARTMENT_ID in the Displayed Items area and then click on the > button to move PROFIT_SHARING_INDICATOR from the Available Items area to the bottom of the Displayed Items area. While PROFIT_SHARING_INDICATOR is still selected, open the Item Type drop-down list and choose Check Box from its choices. Then click on the Finish button. Your form should look very similar to the one shown in Figure 14-1.

Before you can run your modified form, you must set properties identifying the check box’s "on" and "off" values. Click on the check box to select it, open the Property Palette, set the Value When Checked property to 1, and the Value When Unchecked property to 0. In the property named Check Box Mapping of Other Values, change the property to Unchecked. Finally, change the Prompt property from Profit Sharing Indicator to simply Profit Sharing.

Your form is ready to run now, but none of the EMPLOYEE records currently have a "true" value for profit sharing, so it won’t be immediately apparent if your check box is working. Using SQL*Plus, enter the following code to set the first record’s profit sharing to "true":

UPDATE EMPLOYEE
SET PROFIT_SHARING_INDICATOR = 1
WHERE EMPLOYEE_ID = 1001;

COMMIT;

Now run your form. In the Forms Runtime program, use the Next Block button, if necessary, to make the EMPLOYEE canvas display. Then, click on the Execute Query button to retrieve records from the database. You will see that the Profit Sharing Indicator is checked for the first record—the one you set from SQL*Plus—but not for the other records.

Lists are a common way to improve the usability of your form. In order to gain experience with creating list items, you will modify your EMPLOYEE canvas so it displays a drop-down list for Department. Start by opening the EMPLOYEE canvas in the Layout Editor. Select the DEPARTMENT_ID item and open its Property Palette. Change its Item Type property to List Item, and set its List Style property to Poplist. Locate the Elements In List property, click on the empty field to the right of it, and then click on the More button that appears. Amazingly, you must manually type the elements of the list the user will see, and Developer/2000 offers no way to automatically read the contents of a table to initially create the list elements. (You can write code to populate a list, but that is a subject more appropriate for a later chapter.) There is also no automatic sorting of the list, so the list elements you type must be in the order you want them displayed. Type the following values for the list elements and their corresponding list item values:

When you are done, click on the OK button to continue. Change the Prompt property to Department. In the Layout Editor, drag the right side of the DEPARTMENT_ID item so it is long enough to display "Research & Development" along with the Drop-Down List button (you will need to expand the data block’s frame to the right to make the field large enough). Save your form and then run it. When the form compiles, the Form Compiler will display the following error message, which may be quickly covered up by the Forms Runtime program:

FRM-30188: No initial value given, and other values are not allowed

(item EMPLOYEE_2.DEPARTMENT_ID).

List DEPARTMENT_ID

Block: EMPLOYEE_2

Developer/2000 prefers that list boxes have a default value. Since that is not appropriate for a Department field, none was specified in the item’s Property Palette. The form will run perfectly, however.

In the Forms Runtime program, navigate to the Employee form and then click on the Execute Query button to populate it. You will see that the Department field now displays department names, instead of their numbers. When you are done, exit the Forms Runtime program and dismiss the Compilation Errors dialog box presented by the Form Compiler. To keep the Compilation Errors dialog box from appearing dozens of times as you work with this form module, open the Property Palette for the DEPARTMENT_ID item in your EMPLOYEE_2 data block and change the item’s Initial Value property to 1.

Radio buttons are a popular way to depict data when an item has two or more defined possible values, and only one of the values can be true at a given time. Neither the DEPARTMENT nor EMPLOYEE tables contain columns that satisfy this criterion, but another table generated by erdscript.sql does: EMPLOYEE_SKILL. This table is designed to link the EMPLOYEE and SKILL tables, and it includes a column named SKILL_LEVEL that rates an employee’s ability in a given skill, using the numbers 1, 2, 3, 4, or 5. This column is a good candidate for a group of radio buttons. To utilize the column, you must first create a data block for the EMPLOYEE_SKILL table and add that data block to the EMPLOYEE canvas. Then you will modify the EMPLOYEE_SKILL data block so the SKILL_LEVEL item displays as a radio group.

Start by right-clicking on the Data Blocks node in the Object Navigator. From the context menu that appears, select Data Block Wizard. Identify that the data block will be based on a Table or View, and specify the EMPLOYEE_SKILL table as the source. Move all available columns into the Database Items area, and enable the Enforce data integrity option. Proceed to the Master/Detail dialog page and click on the Create Relationship button, selecting EMPLOYEE_2 as the master data block. Ensure that both the Detail Item and the Master Item are set to EMPLOYEE_ID. Click on the Next button, select Just create the data block, and click on the Finish button.

In the Object Navigator, move to the new EMPLOYEE_SKILL data block and open the Items node beneath it. Select the SKILL_LEVEL item and open its Property Palette. Change the Item Type property to Radio Group. Back in the Object Navigator, click on the + to the left of the SKILL_LEVEL item to open the subnodes beneath it. Note that while there is an entry for Radio Buttons, there are no buttons beneath it. The Data Block Wizard does not generate radio buttons automatically—in order to do so, it would have to read the database and determine the unique values for the assigned column, and while this would be a handy feature, it doesn’t exist. So, you will add radio buttons to the radio group manually.

There are two ways to add radio buttons to a radio group: in the Object Navigator, and in the Layout Editor. In order to give you experience with both approaches, the following exercise will have you create some radio buttons in the Object Navigator, and others in the Layout Editor. Normally, you would choose one location or the other to perform this task.

Start by opening the Property Palette for the SKILL_LEVEL item and changing its Initial Value property to 1 (this avoids an error message similar to the one seen for the poplist on the DEPARTMENT_ID field). Then click once on the Radio Buttons subnode beneath SKILL_LEVEL, then click on the Create button. A radio button will appear. Open its Property Palette and change its Name property to SKILL_RADIO_1. Change its Label property to 1 so the button has a "1" next to it when it is laid out, and change its Radio Button Value property to 1 so the button relates to a value of "1" in the SKILL_LEVEL data block column. Set the button’s Width property to 36 so the button and its label have plenty of space. Then, return to the Object Navigator and click on the SKILL_RADIO_1 radio button object. Copy it by pressing ctrl-c and then paste four copies of it by pressing ctrl-v four times. Change the properties of each copy so that the Name, Label, and Radio Button Value for each button increment by one. When you are done, your Object Navigator should show radio buttons like those depicted in Figure 14-2.

You now have a data block for the EMPLOYEE_SKILL table, and a set of radio buttons to depict the values for the SKILL_LEVEL column in that table. The next step is to lay the data block out on the EMPLOYEE canvas. To do this, right-click on the EMPLOYEE_SKILL data block and select Layout Wizard from the context menu that appears. In the Layout Wizard, select the EMPLOYEE canvas as the destination for your new data block. On the next Wizard dialog page move SKILL_CODE and SKILL_LEVEL into the Displayed Items area. Continuing forward through the Wizard dialog pages, accept the default sizes for each item, and then specify that the layout style for the frame will be Tabular. In the next dialog page, enter a Frame Title of Skills for this employee: and specify that the frame will display 5 records at a time. Click on the Finish button to complete the process. Your EMPLOYEE canvas should now look similar to Figure 14-3.

Run your canvas. In the Forms Runtime program, navigate to the Employee form, and then click on the Execute Query button to populate the form. Move forward through the employee records using the Next Record button and you will see that the SKILL_LEVEL radio buttons change to reflect each employee shown. When you are done viewing records, exit the Forms Runtime program and return to Form Builder.

To see what happens when you add a radio button in the Layout Editor, view your layout for the EMPLOYEE canvas, click on the Radio Button button, shown here:

Then click anywhere within the EMPLOYEE_SKILL block. A modal window will appear asking whether you want to place the new radio button in an existing radio group—and if so which one—or if you would rather create a new radio group for this button. This window is shown in Figure 14-4. Click on the OK button to select the SKILL_LEVEL radio group. You will see that five closely positioned copies of the new radio button appear within the data block. There are five copies of the radio button because this data block’s properties specify that it displays five records at a time. The spacing of the new radio button’s instances does not match the record spacing already in place in the data block, however. If you were going to keep this radio button, you would alter its properties to make it fit with the existing data block. Since this new radio button is not going to be used, however, press the delete key to delete it now.

In this section, you will cover the following points about creating noninput items:

• Introduction to item types that do not allow input
• Creating a display item
• Creating an image item
• Creating a sound item
• Creating a button
• Creating a calculated field

In addition to items through which users can enter and change data, a form usually needs items that display read-only data or initiate actions. This section covers such noninput items. You will start by learning about the different types of noninput items. After that, you will experiment with creating noninput items of your own, including a display item, an image item, a sound item, a group of buttons, and a calculated field.

In contrast to input items, noninput items do not enable the user to enter or change data. Instead, they present nonchangeable data to the user and/or generate actions. Table 14-2 shows the noninput items available in Form Builder, along with a description for each item type.

As its name suggests, a display item is a form object that shows data to the user but does not allow that data to be changed. The data can be calculated, or it can come directly from a database column.

Open your sample application, if it is not already open. If it is already open, save it now, because you will be performing some destructive actions during this exercise, and you’ll want to be able to revert to the intact version on disk later. In the Object Navigator, open the EMPLOYEE_2 data block and delete its SALARY item. Then, open your EMPLOYEE canvas in the Layout Editor, and you will see that the Salary item is gone. To replace it, click on the Display Item button, shown here:

Then click on the location previously occupied by the Salary field. Change the resultant display item’s Name property to SALARY_DISPLAY, and change its Column Name property—which identifies which data source column to read—to SALARY. Change its Height property to 14 so it matches the other fields, and change its background color to gray so the user doesn’t expect it to be changeable. Now run the form. Once the form is open in the Forms Runtime program, populate it using the Execute Query button, and then move among the records using the Next Record and Previous Record buttons. The data in the display item changes with the current record, but it cannot be changed, or even selected.

When you are done, close the Forms Runtime program and return to Form Builder. Execute the File | Revert command to return the Employee form to its fully changeable state.

You can also create a read-only field by changing a text item’s Insert Allowed, Update Allowed, and Keyboard Navigable properties to No, and changing its Background Color property to gray. However, even an unchangeable text item consumes more memory than a display item, so it is to your advantage to use display items whenever you want to display read-only data.

Using Developer/2000 to load and store images is really quite easy. In order to experiment with this feature, you will need to create a table capable of holding image files. In SQL*Plus, enter the code that follows. (The table used in this example is based on the BLOB table in Developer/2000’s demos. If after reading this section you would like a more in-depth treatment of image and sound files, you can dissect the image.fmb and sound.fmb files provided in the Developer/2000 demo directory.)

CREATE TABLE AV_DATA (
BLOB_ID NUMBER(10,0) NOT NULL,
BLOB_TYPE VARCHAR2(10) NOT NULL,
DESCRIPTION VARCHAR2(25) NOT NULL,
BLOB_DATA LONG RAW NULL
);

ALTER TABLE AV_DATA ADD (
CONSTRAINT AV_PRIMARY_KEY PRIMARY KEY (BLOB_ID)
) ;

COMMIT;

Next, you need to create a new data block to forge a link between your new table and the sample application you have been working with. To do this, open the application, click on the Forms node, and then click on the Create button. Navigate to the new module that is created and change its name to IMAGE_MODULE. Click on the + to the left of the module’s name in order to see the nodes it contains, and then click on its Data Blocks node, followed by the Create button. Elect to use the Data Block Wizard and specify that the block will be based on a Table or View. Select the AV_DATA table as the source, and move all columns into the Database Items area. Click on the Next button twice to proceed to the final Data Block Wizard page. Select the Just create the data block option and then click on the Finish button. When you see your new data block appear in the Object Navigator, change its name to AV_DATA_IMAGE. Open the Property Palette for the data block and change its where clause property to blob_type = ‘IMAGE’. Because the AV_DATA table is going to store both image and sound files, this where clause property will ensure that the AV_DATA_IMAGE data block only retrieves image records from the table.

In order to ensure that all records entered through this data block are identified as image records, return to the Object Navigator and click on the Triggers subnode beneath the AV_DATA_IMAGE data block. Click on the Create button and select the PRE-INSERT trigger, which fires before a record is inserted. Type the following code into the PL/SQL Editor for the trigger:

:av_data_image.blob_type := 'IMAGE';

Click on the Compile button and look for the message "Successfully Compiled" in the bottom-right corner of the PL/SQL Editor. If you do not see that message, correct the syntax of the code and re-compile it. When the trigger code is successfully compiled, click on the Close button to close the PL/SQL Editor. The code you just entered will cause the value of 'IMAGE' to be placed into the BLOB_TYPE item of any new record you create using this data block.

Now it is time to create a form for the data block. Right-click on the AV_DATA_IMAGE data block and select Layout Wizard from the context menu that appears. Specify that you want to lay the data out on a New Canvas. Move the BLOB_ID, DESCRIPTION, and BLOB_DATA items into the Displayed Items area. accept the default sizes for each item, and select Form as the layout style. Enter Picture Test as the Frame Title and then click on the Finish button. You should see a form that looks like Figure 14-5.

Click on the BLOB_DATA item and change its Sizing Style property to Adjust so that images will show in their entirety on your form, regardless of their size. (At least, that is the theory; in reality, large images are still cropped.) Then, close the Layout Editor and return to the Object Navigator. Change the name of your new canvas to AV_DATA_IMAGE.

In order to make this form useful, you need to give it the ability to read image files from disk and load them into your database. To do this, open the AV_DATA_IMAGE canvas once again in the Layout Editor. Locate the Button Tool button in the Tool Palette—shown next—and click on it.

Then click on an open area in your form, and a button will appear. Open the button’s Property Palette and change its Name property to LOAD_DISK_IMAGE, its Label property to Load Disk Image, its Keyboard Navigable property to No, its Mouse Navigate property to No, and its Tooltip property to Load image stored on disk.

Now you need to add trigger code to the button. Return to the Object Navigator and beneath your AV_DATA_IMAGE data block locate the new item named LOAD_DISK_IMAGE. Click on the + to the left of the item, and then click on the Triggers subnode. Click on the Create button and select the WHEN-BUTTON-PRESSED trigger. In the PL/SQL Editor, enter the following code:

declare
v_dirname varchar2(255);
v_filename varchar2(255);
begin
v_dirname := 'C:\';

v_filename := get_file_name(v_dirname,NULL,
'Bitmap files (*.bmp)|*.bmp|' ||
'JPEG files (*.jpg)|*.jpg|' );

if v_filename is not null then
read_image_file(v_filename,'ANY','av_data_image.blob_data');
end if;
end;

Click on the Compile button, and when the trigger code is successfully compiled, click on the Close button. You are done! Save your work, then run your form. When the Forms Runtime program opens, navigate to the AV_DATA_IMAGE canvas and click on your Load Disk Image button. Navigate to any disk directory you know will contain graphics files; your Windows directory is a safe bet, because it usually contains .bmp files used for wallpaper. Wherever you choose to search, select a graphics file and then click the OK button. Your image will appear inside the BLOB_DATA item, similar to the form shown in Figure 14-6. Enter values for the BLOB_ID and DESCRIPTION items, and then click on the Save button to store the image and description into your AV_DATA table. If you would like to store more image records, click on the Next Record button and repeat the process just described. When you are finished, exit the Forms Runtime program and return to Form Builder.

The process for adding a sound item is very similar to the process for adding an image item. Like images, sounds are stored in Oracle in a LONG RAW type column. You already have a database table suitable for storing sounds, so all you need to do is create a new data block to access that table, and then a form for reading sound files from disk and storing them in the table.

Starting in the Object Navigator, click on the Forms node, and then on the Create button. Navigate to the new module that is created, and change its name to SOUND_MODULE. Click on the + to the left of the module’s name in order to see the nodes it contains, and then click on its Data Blocks node, followed by the Create button. Elect to use the Data Block Wizard, and specify that the block will be based on a Table or View. Select the AV_DATA table as the source, and move all columns into the Database Items area. Click on the Next button to proceed to the final Data Block Wizard page. Select the Just create the data block option and then click on the Finish button. When you see your new data block appear in the Object Navigator, change its name to AV_DATA_SOUND. Open the Property Palette for the data block and change its where clause property to blob_type = ‘SOUND’. In order to ensure that all records entered through this data block are identified as sound records, return to the Object Navigator and click on the Triggers subnode beneath your AV_DATA_SOUND data block. Click on the Create button and select the PRE-INSERT trigger. Type the following code into the PL/SQL Editor for the trigger:

:av_data_sound.blob_type := 'SOUND';

Click on the Compile button. When the trigger code is successfully compiled, click on the Close button to close the PL/SQL Editor. To create the form, right-click on the AV_DATA_SOUND data block and select Layout Wizard from the context menu that appears. Specify that you want to lay the data out on a New Canvas. Move the BLOB_ID, DESCRIPTION, and BLOB_DATA items into the Displayed Items area, and while in that Layout Wizard page change the Item Type for BLOB_DATA to Sound. Accept the default sizes for each item, and select Form as the layout style. Enter Sound Test as the Frame Title and then click on the Finish button. You should see a form that looks like Figure 14-7.

Click on the BLOB_DATA item and open its Property Palette. Change its Distance Between Records property to 0 and its Number Of Items Displayed property to 1. Change its Width property to 140 and its Height property to 24. Set Yes values for the properties Show Record Button, Show Rewind Button, and Show Fast Forward Button. If the changes to the BLOB_DATA item’s size have caused it to extend outside the data block’s frame, use your mouse to reposition the item to a more suitable location. Then, close the Layout Editor and return to the Object Navigator. Change the name of your new canvas to AV_DATA_SOUND.

In order to give this form the ability to read sound files from disk and load them into your database, open the AV_DATA_SOUND canvas once again in the Layout Editor. Click on the Button Tool button in the Tool Palette and then click on an open area in your form. Open the newly-created button’s Property Palette and change its Name property to LOAD_DISK_SOUND, its Label property to Load Disk Sound, its Keyboard Navigable property to No, its Mouse Navigate property to No, and its Tooltip property to Load sound stored on disk.

Now you need to add trigger code to the button. Return to the Object Navigator and locate the new item named LOAD_DISK_SOUND. Click on the + to the left of the item to see the subnodes beneath it, and then click on the Triggers subnode. Click on the Create button and select the WHEN-BUTTON-PRESSED trigger. In the PL/SQL Editor, enter the following code:

declare
v_dirname varchar2(255);
v_filename varchar2(255);
begin
v_dirname := 'C:\';

v_filename := get_file_name(v_dirname,NULL,
'Wave files (*.wav)|*.wav|' );

if v_filename is not null then
read_sound_file(v_filename,'ANY','av_data_sound.blob_data');
end if;
end;

Click on the Compile button, and when the trigger code is successfully compiled, close the PL/SQL Editor. Save your work, and then run your form. When the Forms Runtime program opens, navigate to the AV_DATA_SOUND canvas, click on the Insert Record button, and then click on the Load Disk Sound button. Navigate to any directory you know will contain sound files, such as your Windows \media subdirectory, which usually contains .wav files. Wherever you choose to search, select a sound file and then click the OK button. Your sound will appear inside the BLOB_DATA item. Enter values for the BLOB_ID and DESCRIPTION items, such as the ones shown in Figure 14-8, and then click on the Save button to store the sound and description into your AV_DATA table. (Remember that your BLOB_ID cannot duplicate a BLOB_ID for an image file, since a single table is storing both types of data. In a production system, you would probably create an Oracle sequence to generate the BLOB_ID numbers, but that is not germane to this example.) If you would like to store more sounds, click on the Insert Record button and repeat the process just described. Since the sound item’s Show Record Button property was set to Yes, you can also record new sounds from a microphone, your computer’s CD-ROM drive (playing audio CDs), or any other audio input source your computer accommodates. When you are finished, exit the Forms Runtime program and return to Form Builder.

Since you have already learned the basics of creating individual buttons in Form Builder, it is time to extend that knowledge by creating a group of buttons. You will add buttons to your AV_DATA_SOUND canvas to navigate between records, as well as to create a new record, delete an existing record, save your work, and exit the application.

Start by opening the AV_DATA_SOUND canvas in the Layout Editor. Create six buttons in close proximity to each other. Select all six buttons, and in the property sheet set their Iconic property to Yes. Set their Background Color property to gray. Change their Keyboard Navigable and Mouse Navigate properties to No. Next select the first two buttons and set their Width property to 26 and their Height property to 24. Then select the remaining four buttons and set their Width and Height properties to 18. To set button-specific properties, click on individual buttons and change their properties to match those shown in the table that follows. The names in the Icon Filename column of the table relate to .ico files that are provided in the <oracle_home>\tools\devdem20\bin\icon directory. Their location on your system can vary, so you may need to search your disk to find them. Note that you do not include the .ico file type when entering an icon file’s name in the Property Palette.

After you have set the button-specific properties, select all of the buttons and use the Arrange | Align Objects menu command to line them up the way you wish. While they are all still selected, execute the Arrange | Group menu command to group the buttons. You will see that when this is done, the selection marks around the buttons change to indicate that a single group is selected, instead of six individual objects. In fact, it is impossible to select an individual object in the Layout Editor once that object has been made part of a group. To see this for yourself, click on any other object on the canvas, and then click on any of the six buttons you just created. You will see that clicking on a single button now results in the entire group of buttons being selected.

Close the Layout Editor now and return to the Object Navigator. Beneath the AV_DATA_SOUND data block, open the Items node and you will see items representing each of the six buttons you just created, in addition to the original items for database columns. Click on the + to the left of the PREV_REC item, and then click on the Triggers subnode beneath it. Click on the Create button and select the WHEN-BUTTON-PRESSED trigger. Once the PL/SQL Editor opens, type previous_record; as the trigger code. Compile the trigger and close it. Perform the same task with the other five buttons, using the following table as your guide.

Save your form, and then run it to test the buttons you have created. When you are done, close the Forms Runtime program and return to Form Builder.

Calculated fields are an excellent way to keep the user updated on important status information without giving them the opportunity to change that information directly. Form Builder gives you functions to easily select a data block item and perform sum, average, count, min, max, variance, and standard deviation calculations on it. You can also specify your own formulas to fulfill more complicated mathematical requirements.

To see how to create a calculated field, open your AV_DATA_SOUND canvas in the Layout Editor. Click on the Display Item button in the Tool Palette. Then click on the canvas at the location where you would like to display the number of records in the underlying data table. Open the new display item’s Property Palette and change its Name property to TOTAL_RECORDS. Change its Data Type property to Number, and its Calculation Mode property to Summary. Change its Summary Function property to Count, its Summarized Block property to AV_DATA_SOUND, and its Summarized Item property to BLOB_ID. Change its Width property to 25. Then move back to the Tool Palette and click on the Text button, which is shown here:

Click on your canvas just to the right of the display item you just created. Type Sound records in database inside the text box, and line it up with the display item so they can be read as a single phrase. Close the Layout Editor and return to the Object Navigator. Under the Data Blocks node, click on the AV_DATA_SOUND data block and change its Precompute Summaries property to Yes so the calculated field will show the correct number as soon as you retrieve records. Then save the form, run it, retrieve records using the Forms Runtime program’s Execute Query button, and watch your new TOTAL_RECORDS item display the calculated total as you add and delete sound records. When you are done, exit from the Forms Runtime program and return to Form Builder.

In this section, you will cover the following points about creating windows and content canvases:

• Introduction to windows and content canvases
• Window and content canvases properties
• Displaying a form module in multiple windows

Windows and content canvases are relatively simple objects, but not knowing how to work with them can cost you time, productivity, and quality in the final application. In this section, you will learn about key properties of windows and content canvases. You will then put your knowledge to use by creating a multiple-window application.

You may recall from Chapter 12 that whenever you create a new form module, Form Builder generates a multiple document interface (MDI) window for the module (assuming you are working in a Windows environment). The MDI window serves as a "parent" window containing all the other document windows, and it usually holds the application’s main menu and toolbar. All other document windows—in other words, the ones you create—must fit within the confines of the MDI window. A window is the outermost boundary for a form—an empty frame to hold objects. All of the visual objects in a Form Builder application are contained within windows. There are two types of windows: document and dialog. A document window is used for standard data entry forms. When a user is in a document window, they can generally enter and query data, move to other windows within the application, and utilize the application’s menu and toolbars. In contrast, a dialog window usually serves as a modal dialog box, requiring the user to acknowledge the dialog box in one way or another before proceeding to any other action.

Canvases are displayed within windows, and a single window can be used by one or more canvases. If a window contains more than one canvas, you can use the Next Block and Previous Block buttons to move from one canvas to another. There are four types of canvases: content, stacked, tab, and toolbar. All four types can coexist within a single window. The default canvas type—and the most common—is the content canvas. The content canvas completely occupies the content pane of its window, and every window must have at least one content canvas. All of the canvases you created in this unit so far have been content canvases.

In order to thoroughly understand how to use windows and content canvases you must be well versed in their properties. This section presents the most important properties for you to know.

Table 14-3 shows key properties for use with windows.

Table 14-4 shows key properties for use with content canvases.

To practice controlling the relationship between windows and content canvases, you will create a second window in your sample application. You will then assign the DEPARTMENT canvas to one window, and the EMPLOYEE canvas to the other.

Open your sample form module in Form Builder and navigate to the Windows node. Click on it and then on the Create button. Once the new window object appears, change its Name property to DEPARTMENT_WINDOW. Then, select your original window in the Object Navigator and change its Name property to EMPLOYEE_WINDOW. Move to the Canvases node in the Object Navigator, and select the DEPARTMENT canvas. Change its Window property to DEPARTMENT_WINDOW. Then, select the EMPLOYEE canvas and ensure that its Window property is set to EMPLOYEE_WINDOW. Run your application. Once it opens in the Forms Runtime program, click on the Next Block button until the second window opens. It may open directly on top of the first window if both windows have default settings for size and location. You can drag the windows to different locations on the screen, resize them, and position them so both windows are open at once. Thus, you can cause two or more canvases to appear in your application simultaneously simply by assigning each canvas to its own window. You can also use the window size and position properties to ensure that the windows do not overlap, if you wish.

In this section, you will cover the following points about working with other canvases:

• Introduction to canvas types
• Creating an overlay effect using stacked canvases
• Creating a toolbar
• Creating a tabbed interface

You have created numerous canvases in your sample application, but they have all been the same type: content. Now it is time to learn about the other canvas types Developer/2000 offers for forms.

In addition to the content canvas type, Form Builder enables you to create stacked, tab, and toolbar canvases. Each of these types is ideal for fulfilling certain requirements. In this section, you will practice creating all three types.

As its name implies, a stacked canvas lays on top of—or "stacks" onto—a content canvas. In doing so, it hides whatever is beneath it; the user can see what is part of a stacked canvas, but not what it covers. Because of this, stacked canvases are useful for controlling the visibility of entire groups of objects. You can use a stacked canvas to display information that only needs to be viewed in certain situations, such as sensitive data, highly detailed data, or help text. A stacked canvas is also handy if you want to make a portion of the screen static, displaying a predictable group of data, while the user moves among other content canvases in the rest of the screen. Finally, because a stacked canvas can have its own set of scroll bars separate from those on the underlying content canvas, you can use a stacked canvas to show data in a tabular format that the user can scroll around in, while keeping important data like record IDs visible in a fixed location on the underlying content canvas.

Familiar to most computer users, the tab canvas is a very useful tool when you need to display a lot of information about a single subject but want to break the information into logical groups for reasons of simplicity or limited screen space. The tabs on a tab canvas essentially represent a group of stacked canvases, with each canvas page obscuring the rest when its tab is selected by the user.

Unlike the stacked or tab canvases, the toolbar canvas is not designed to display data from a data source. Instead, it contains the components that make toolbars for individual windows. You can make a toolbar either horizontal or vertical, and you can even have multiple toolbars in a single window.

To see how stacked canvases work, you will modify your EMPLOYEE canvas so that it only shows the employee work skills when a button is activated. Start by opening your sample application. Click on the application’s form module node—the one that displays the module’s name—and open the Property Palette. Change the First Navigation Data Block property to EMPLOYEE_2 so your EMPLOYEE canvas will show immediately each time the module is run. Next, move to the Object Navigator’s Canvases node and double-click on the EMPLOYEE canvas to open it in the Layout Editor. Click on the Button Tool button, and then click on your canvas in the location shown in Figure 14-9 to create the button. This button will end up being covered by the stacked canvas, and will therefore become visible to the user only when the stacked canvas is hidden. The button’s job will be to make the stacked canvas visible again, thereby covering the button and the Employee Skills area at the same time. Open the button’s Property Palette and change its Name property to HIDE_SKILLS. Change its Label property to Hide Skills. Set its Keyboard Navigable property to No and its Mouse Navigate property to No. Then, right-click on the button and select PL/SQL Editor from the context menu that appears. Select the WHEN-BUTTON-PRESSED trigger and enter the following code in the PL/SQL Editor:

go_block('EMPLOYEE_2');
show_view('EMPLOYEE_SKILL_COVER');

This command names a canvas that does not yet exist: EMPLOYEE_SKILL_COVER. You will create that canvas after setting the properties of this button, which will be hidden beneath it. To continue, compile your code and then close the PL/SQL Editor.

Button to redisplay stacked canvas

Now it is time to create the stacked canvas that will cover the employee skills area. Locate the Stacked Canvas button in the Tool Palette. The Stacked Canvas button looks like this:

Position your mouse over the top-left corner of the EMPLOYEE_SKILL frame in the bottom half of the canvas, hold down the mouse button, drag the mouse to the bottom-right corner of the EMPLOYEE_SKILL frame, and let the mouse button go. The EMPLOYEE frame will disappear from view, because it is covered by the stacked canvas. While the stacked canvas is still selected, open its Property Palette and change its Name property to EMPLOYEE_SKILL_COVER. Change the stacked canvas’s Bevel property to None, and change its Background Color to gray.

All that is left to do now is give the user the ability to make the skill information visible, which requires hiding the stacked canvas. To do this, click on the Button Tool button, and then click on the stacked canvas in approximately the same location where you placed the first button. Change the second’s button’s Name property to SHOW_SKILLS. Change its Label property to Show Skills. Set its Keyboard Navigable property to No and its Mouse Navigate property to No. Then, right-click on the new button and select PL/SQL Editor from the context menu that appears. Select the WHEN-BUTTON-PRESSED trigger and enter the following code in the PL/SQL Editor:

hide_view('EMPLOYEE_SKILL_COVER');

Compile the code and then close the PL/SQL Editor. Save your form module and then run it. Populate the Employee form in the Forms Runtime program by clicking on the Execute Query button. Then, click on your Show Skills button. The skills for each employee will appear, and they will stay visible until you click on the Hide Skills button. When you are finished experimenting with the form, close it and return to Form Builder.

You can create a toolbar containing exactly the functions your application’s users need. To see how to do this, open your SOUND_MODULE form module, if it is not already open. In the Object Navigator, click on the module’s Data Blocks node and then the Create button. Select Build a new data block manually from the dialog box that appears, and click on the OK button. Change the block’s Name property to TOOLBAR_ITEMS and set its Database Data Block property to No.

Click on the Canvases node and then the Create button. Set the new canvas’s Name property to TOOLBAR_HORIZONTAL, and set its Canvas Type property to Horizontal Toolbar. Double-click on the new canvas’s icon to open it in the Layout Editor. Create four buttons, and set their properties to those shown in Table 14-5.

Click on the background canvas that all the buttons are located on. Change the canvas’s Height property to 24. Then, use the PL/SQL Editor to place the code shown in Table 14-6 into WHEN-BUTTON-PRESSED triggers behind each button.

Close the Layout Editor. In the Object Navigator, click on the module name and change its Form Horizontal Toolbar Canvas property to TOOLBAR_HORIZONTAL. Then, save your work and run the form to see the toolbar in action. When you are done, close the Forms Runtime program and return to Form Builder.

A tabbed interface is an excellent way to squeeze large amounts of related information into a limited display space. It can also be useful for separating information into logical groups for purposes of clarity. To see how to produce one, create a new form module and name it EMPLOYEE_TAB. Using the Data Block Wizard, create new data blocks for the EMPLOYEE and EMPLOYEE_SKILL tables. Establish appropriate relationships between the two tables. Select the EMPLOYEE_SKILL data block and change its Number Of Records Displayed property to 5 so the user will be able to see up to five skills for each employee.

Form Builder doesn’t like it when a single data block’s items are split between a main canvas and a tab page residing on the same canvas; the program responds by hiding the main canvas items at run time. To avoid this, create a second data block for the EMPLOYEE table. In the Data Block Wizard page for relationships, deselect Auto-join data blocks and then click on the Create Relationship button. Select the EMPLOYEE data block and specify EMPLOYEE_ID for both the Detail Item and the Master Item. This will cause Form Builder to keep the two data blocks synchronized on any form that uses them both—such as the form you are about to create. Keep the new data block’s default name of EMPLOYEE1.

Right-click on the EMPLOYEE data block and start the Layout Wizard. Create a new canvas containing the LAST_NAME and FIRST_NAME items from the EMPLOYEE data block. Select a form layout style, and enter a frame title of Employee Data Sheet. Once you are in the Layout Editor, click on the background to select the canvas, and change the canvas’s Name property to EMPLOYEE. Then, click on the Tab Canvas button, shown here:

Move your mouse to a location just below the Employee Data Sheet’s bottom-left corner, hold down the left mouse button, and drag the mouse down and to the right so it creates a rectangle approximately the same width as the Employee Data Sheet area and twice as deep. Your screen should look similar to Figure 14-10 at this point. Change the tab canvas’s Name property to EMPLOYEE_TAB, and change its Background Color property to gray.

Return to the Object Navigator. Locate the EMPLOYEE_TAB canvas and click on the + to the left of its name in order to see its objects. Click on the + to the left of the Tab Pages node, and then select the first tab page beneath it. Change the first tab page’s Name property to GENERAL_INFO, and change its Label property to General Info. Change the second tab page’s Name property to SKILLS, and change its Label property to Skills. Then, locate the EMPLOYEE1 data block in the Object Navigator—the "extra" employee data block—and select its EMPLOYEE_ID, HIRE_DATE, DEPARTMENT_ID, SALARY, and PROFIT_SHARING_INDICATOR items. Set the Canvas property for all five items to EMPLOYEE_TAB, and the Tab Page property to GENERAL_INFO. Next, move to the EMPLOYEE_SKILL data block and select its SKILL_CODE and SKILL_LEVEL items. Set the Canvas property for both items to EMPLOYEE_TAB, and set the Tab Page property to SKILLS. Return to the Layout Editor and arrange the items into an effective layout. One possible layout is shown in Figure 14-11. Now run your form, populate it using the Execute Query button, and move between the two tab pages you created to see the results of your efforts.

In this chapter, you have covered a substantial amount of information on forms design. Several topics were covered, including creating additional input items, as well as creating noninput items. You also learned to create windows and several kinds of canvases, including content canvases, toolbar canvases, stacked canvases, and tab canvases.

The first area you covered was creating additional input items. During the introduction you leaned that an input item is a form object that enables the user to enter and change data. The input-item category includes text items, check boxes, drop-down lists, radio button groups, poplists, T-lists, combo boxes, and Lists Of Values (LOVs). A text item is most commonly used for entering and changing data, and it is best suited to data that is not repetitive and therefore does not belong in a list. A check box can be used singly or in groups, with each check box representing a data item that can have only one of two values. A radio button group is comprised of two or more radio buttons, and it represents data comprised of a limited number of mutually exclusive choices. A poplist provides a familiar drop-down list that allows user to select one value. It can autofill a user’s entry by matching the user’s typing with a list item as user types, and it will not accept nonlist entries. A T-List is designed for applications where the user will select one row from a list containing 15 to 30 choices. By default a T-list shows at least five rows from the list, so it is best suited for layouts that have plenty of screen space available. A combo box provides a drop-down list that allows the user to select one value. It does not autofill an entry as the user types, and it can accept nonlist entries as long as the developer has written a trapping trigger. A List of Values (LOV) can display an unlimited number of choices, and it can display multiple columns of information for each choice.

Next, you learned the steps necessary to create a check box. After adding a column to a database table to hold the yes/no data for which a check box is suited, you added the check box and set the properties necessary to make it work. You established the check box’s "on" and "off" values by setting the Value When Checked property and the Value When Unchecked property. The property named Check Box Mapping Of Other Values tells the check box what to display if it encounters other values in the data source. Next, you learned to create a list item. You created a poplist, which required you to manually type the list elements in the exact order they should be displayed to the user. One benefit of attaching a poplist to a field containing codes or ID numbers is that it allows that field to display as user-friendly text instead of codes or numbers—as long as the codes or numbers are in the list. You then proceeded to create a group of radio buttons. This allowed the SKILL_LEVEL values stored in the EMPLOYEE_SKILL table to display in a more graphical fashion by having one radio button assigned to each possible value. You can produce a radio group from the Layout Wizard by specifying that a column in the Displayed Items area should be represented as a radio group; you can also create a radio group in the Object Navigator or the Layout Editor. Once a group is created, radio buttons can be added to it from the Object Navigator, as well as from the Layout Editor. Each radio button within a radio group must be assigned a unique number that it will represent for existing records and generate in new records. When you add a radio button to an existing radio group in the Layout Editor, a modal window appears asking whether you want to place the new radio button in an existing radio group—and if so which one—or if you would rather create a new radio group for this button.

You then moved on to a new section covering noninput items. This section provided an introduction explaining what noninput items are available in Developer/2000, and then gave detailed instructions for creating display items, image items, sound items, buttons, and calculated fields. Noninput items do not enable the user to enter or change data. Instead, they provide the user with information to view but not change, and they generate actions. The types of noninput items include boilerplate text, which is any form text that was typed in manually rather than derived from the database by Form Builder; display items, which are read-only form fields that are useful for calculated data such as subtotals or totals, as well as read-only data such as ZIP code cities; image items, which provide access to graphics files; sound items, which provide access to audio files; push buttons, which initiate actions; and icons, which are toolbar buttons best suited for frequently used operations. You then created a table capable of holding image files, followed by a canvas that could load and save them. Here, you got your first taste of a form PRE-INSERT trigger, which fires before a record is inserted; the trigger ensured that any record entered through the image canvas was given a blob type of "IMAGE". You added a variety of buttons to the canvas, and since new buttons contain no code by default, you utilized WHEN-BUTTON-PRESSED triggers to store the code each button would execute when activated. After the buttons were combined into a group, you learned that selecting any object in a group causes the entire group to be selected. Then, you applied your knowledge to creating a canvas for loading and storing sound files. Sound items allow you to customize how many controls are given to the user by setting properties such as Show Play Button, Show Record Button, Show Rewind Button, Show Fast Forward Button, Show Volume Control, Show Time indicator, and Show Slider.

The next subject you covered was creating calculated fields, which let you easily create display items showing sum, average, count, min, max, variance, and standard deviation values. In order for calculated fields to work automatically, the summarized data block’s Precompute Summaries property must be enabled. Form Builder also lets you specify your own formulas to fulfill more complicated mathematical requirements.

Next you worked through a thorough discussion on creating windows and content canvases. Whenever you create a new form module, Form Builder generates a multiple document interface (MDI) window that serves as a "parent" window containing all the other document windows. There are two types of windows: document and dialog. A document window is used for standard data entry forms, allowing a user to enter and query data, move to other windows within the application, and interact with the application’s menu and toolbars, while a dialog window usually presents a modal dialog box requiring the user to acknowledge the dialog box before proceeding to any other action. Both types of windows display canvases. The four types of canvases are content, stacked, tab, and toolbar. All four types can coexist within a single window, meaning that a single window can contain numerous canvases. Every window must have a content canvas, which will completely occupy the content pane of its window. You can create multiple-window applications simply by creating additional windows and assigning canvases to them by setting each canvas’s Window property to the appropriate window.

The final area covered in this chapter is working with stacked, toolbar, and tab canvases. A stacked canvas lays on top of—or "stacks" onto—a content canvas, hiding anything beneath it. Stacked canvases are useful for controlling the visibility of entire groups of objects, and because they can have their own scroll bars separate from those on the underlying content canvas, they can provide a scrollable window separate from the main content canvas. A tab canvas is essentially multiple stacked canvases with handy "tabs" at the top to simplify moving from one canvas to another. Tab canvases are ideal for displaying a lot of information about a single subject in a small amount of screen space. Content, stacked, and tab canvases are all designed to display data. In contrast, a toolbar canvas contains buttons giving users quick access to whatever functions you choose. You can have multiple horizontal and vertical toolbars in a single window.

The content covered in this chapter represents about 18 percent of the material tested on OCP Exam 3.