This presentation shows how to create a simple form from a single table, CUSTOMER. Also show is a way to change the formatting displayed by the Layout Wizard. SIMPLE FORMS

CUSTOMER {CustomerNumber, CustomerName, StreetAddress, Town, Province Primary Key: CustomerNumber INVENTORY {InventoryNumber, Description, Colour, QuantityOnHand, Cost} Primary Key: InventoryNumber SUPPLIER {SupplierNumber, SupplierName, StreetAddress, Town, Province, FreightInArea} Primary Key: SupplierNuymber SUPP_INV {SupplierNumber, InventoryNumber} Primary Key: SupplierNumber, InventoryNumber Foreign Key: SupplierNumber references SUPPLIER Foreign Key: InventoryNumber references INVENTORY INVOICE {InvoiceNumber, SaleDate, CustomerNumber} Primary Key: InvoiceNumber Foreign Key: CustomerNumber references CUSTOMER INVOICE_LINE_ITEM {InvoiceNumber, LineItemNumber, InventoryNumber, Quantity} Primary Key: InvoiceNumber, LineItemNumber Foreign Key: InventoryNumber references INVENTORY Schema of the example database

P = primary key F = foreign key P P F P P F Tables used in this presentation

P P & F Tables used in this presentation, continued

CUSTOMER CustomerNumberCustomerNameStreet AddressTownProvincePostal CodeCompany Sales Area 5155George Black379 Queen Street WHamiltonOntarioL8C 2B Stephanie Green491 Baker StreetTorontoOntarioM3C 1J Alice Van Dunn296 Orton AvenueWinnipegManitobaR3A 8T Bonnie Stewart739 Sutton LaneOttawaOntarioK2G 1V Jake Solaris2176 Alcott CrescentVancouverBritish ColumbiaV6A 7G Jane Quicker12 Fred StreetMontrealQuebecH4G 9E34 INVOICE InvoiceNumberSaleDateCustomerNumber / / / / / / / / / / INVOICE_LINE_ITEM InvoiceNumberLineItemNumberInventoryNumberQuantitySold Primary Key Foreign Key Values in the tables

INVENTORY InventoryNumberDescriptionCostSupplierNumber Washer Dryer Small Refrigerator Medium Refrigerator Large Refrigerator Gas Range Electric Range Barbeque Microwave Freezer SUPPLIER SupplierNumberSupplierNameStreetAddressTownProvincePostal CodeFreightInArea 9625Able Company484 Gain RoadTorontoOntarioM9B 3P5Central 9758Delta Manufacturers378 Sleet BoulevardWinnipegManitobaR7B 5W2West 9876Foxtrot Limited187 Dock StreetSault Ste. MarieOntarioP6B 4E2West 9961Global Exports2876 Hacker RoadMontrealQuebecH1G 6R5East 9972Juniper Goods953 Broad StreetHamiltonOntarioL8E 3V7Central SUPP_INV SupplierNumberInventoryNumber Primary Key Foreign Key Primary Key & Foreign Key Values in the tables continued

EMPLOYEE Employee Number EmployeeLast Name EmployeeFirst Name Street AddressTownProvincePostal Code Employee Type Manager Number 1000JohnstonGerald7145 Quarterly RoadTorontoOntarioM6C 8R SimpsonAllison595 Tatterly AvenueTorontoOntarioM6E 5V SpinnerJames3815 Gottago StreetOakvilleOntarioL6M 6R BeefAngus64 Stockyard CrescentMississaugaOntarioL5L 9G BrownstoneVincent4234 Uppity BoulevardOakvilleOntarioL6L 7T WindstormJane6710 Nonesuch AvenueBramptonOntarioL6P 1Y HiggenbottomPaul22 Dungeon StreetBurlingtonOntarioL7M 8T WormholeIna78 Oval CircleTorontoOntarioM3C 9H BluecollarArthur4572 Higgins StreetBramptonOntarioL6R 4K BlackpantsSusan10 Younger RoadMississaugaOntarioL5P 9H BottomtopMartha71345 White Acres RoadMarkhamOntarioL3R 9G AboutfaceGeorge432 Gasoline AlleyTorontoOntarioM4E 1K EMPLOYEE TYPE TypeNumberTypeName 1Administration 2Sales 3Manufacturing SALES AREA AreaNumberAreaName 1Central 2Main 3East 4French East 5West Central 6West

Open the Oracle Forms Builder and Logon to the database Enter File, Connect. The popup will appear as shown on the next slide.

A new module is shown. This will be later saved under a desired name. Select Data Block Wizard in order to create the Data Block

Create a Data Block for CUSTOMER A Data Block contains the fields to be displayed from a selected table.

Select Table or View

Browse for the available tables

Tables owned by the user. Select CUSTOMER

Move all columns but for Postal Code and Company Sales Area

The columns have been moved

Name the Data Block CUSTOMER

Continue by using the Layout Wizard

The Layout Wizard

Select a New Canvas. This can be given a name at a later time Select Content. See the next page for details.

A canvas is the object on which the graphical user interface (GUI) is drawn, or the background of the form. At run-time, the user only sees those items that have been assigned to a specific canvas. Each canvas is displayed in a specific window. A a frame provides a way to interact with the window including the ability to scroll, move, update etc. There are five main types of canvases. The three main ones are: 1.Content: Also called the “Base” canvas, is the main and default type of canvas. It occupies the entire window in which it is displayed. Each form should have at least one content canvas. 2.Tab: This allows for a number of tabbed pages to be shown on each canvas. One tab could show Customer, another could show Supplier. The tab is clicked-on to bring up the form. Adds, changes and deletes are allowed. 3.Stacked: One canvas can be stacked upon another so that the user can see several canvasses at the same time. A stacked canvas is stacked on, or displayed on top of, the content canvas. More than one stacked canvas can be displayed at the same time.

This shows that the Data Block CUSTOMER is being used. Move all items over

All columns have been moved

The Prompt, Width, and Height can be modified. Modify the Prompt names to a more readable format.

The Prompt has been modified. The Prompt is the word that appears on the Form.

Choose the Form layout. The Form layout shows the contents as a form, not a table. Tabular layout shows the contents of the table in table format

Name the frame CUSTOMER Allow 5 records to be displayed Choose to display the Scrollbar

The form has been created.

This is what the CUSTOMER Form layout looks like. It can be modified later. The Frame Title

Compile the CUSTOMER Form

Run the CUSTOMER Form

The CUSTOMER Form is run in Windows Explorer as a Web application. The format could be more user-friendly. It can now be saved and modified.

File, Save As - CUSTOMER

MODULE1 will now be named CUSTOMER

The CUSTOMER module is the active module. CANVAS4 is the canvas, using the (CUSTOMER) frame The tool palette will aid in modifying the form

In the Object Navigator, under Tools, right click on CUSTOMER. This will bring up the Property Palette

This is the Property Palette for CUSTOMER. In the palette the form can be modified

Notice the black dots around the CUSTOMER frame. Right click to bring up the Property Palette The Layout Editor of the CUSTOMER frame

The Physical properties of the CUSTOMER frame. Set the width at 530

The width has been highlighted and set to 530. Close the screen after setting the width at 530.

The width has been increased.

Highlight the Scroll Bar. Right click to bring up the Property Palette

The Scroll Bar properties. Set the X Position at 520

The Scroll Bar position has changed. Now the CUSTOMER fields need to be rearranged

The name field has been highlighted. Right click to bring up the Property Palette.

Scroll down to the Physical characteristics.

Change the X coordinate to 150 and the Y to 29

All Name fields have been moved

Highlight the Address field and change the X coordinate to 350 and Y to 29

All the Address fields have moved.

Highlight the Town field and change the X coordinate to 150 and Y to 43

Highlight the Province field and change the X coordinate to 350 and Y to 43

The result when the form is run. Click Ctrl-F11 to show the individual customers in the CUSTOMER table. Note: If the user is already logged into the database through SQLPlus, Ctrl_F11 will not work. Thus quit SQLPlus before trying Ctrl_F11.

The CUSTOMER fields are now filled. Scroll down to look at the sixth customer.

File-Save As CUSTOMER

A line has been added with X = 7, Y = 64, and a width of 529 The Line tool. The Line colour tool. This has been changed to a dark grey

Three more lines have been added with the following coordinates: 1.X = 7, Y = 106, W = X = 7, Y = 148, W = X = 7, Y = 190, W = 529

The final formatted Customer form

The CUSTOMER Module Fields in the CUSTOMER Data Block The CUSTOMER Data Block Within CANVAS6, FRAME7 can be renamed CUSTOMER_FRAME Notice the four lines that have been added as shown in slide 50

The renamed CUSTOMER_FRAME using the Property Palette