Formatting the Form Using the Layout Editor

1. Formatting the Form Using the Layout Editor Dr. Awad Khalil Computer Science & Engineering Department AUC

2. Wireless LANs Design Concepts • This part introduces the various for layout tools in the Layout Editor. Before learning how to use these tools, it is important to understand the basics of good design concepts. Concentrate on making your forms clear rather than impressive to the user. The following are some general guidelines you may want to consider for your form design: • Give each form a title that describes the purpose of the form. Window object contain a Delete window property that can be used to set the title that is displayed on the window. It is a good practice to always populate this property with a description form name. • Provide instructions on how to operate the form. You may even consider placing these instructions on the form using the Layout Editor’s Text tool. • Use zones and boxes to organize the information in the forms. The layout Editor has frames and graphic tools that can draw rectangles and lines that will help you organize your information. • Place administrative information at the bottom of the form. • Make sure the user understands how to navigate between zones, items, and forms. • Place a date on your form. Users often capture the form on paper as a reference and will use the date as a timestamp.

3. Wireless LANs Design Concepts • Use section headings, column headings, and labels. • Make sure your prompt values are the same for a specific item across all forms. • Display code descriptions rather than the code. • Balance the placement of information on the form. • Use adequate spacing and distance. • Clearly show where the user is within a process. • Use highlighting and bold colors sparingly and only to draw the user’s attention to appropriate objects, such as errors and warnings. • Use color to promote an understanding of a display. • Cool colors such as green or light blue are pleasing to the eye. Hot colors such as red and yellow are not. Try to employ the cooler, calming colors. • Use mixed case rather than all capitals when possible; it is easier to read. • Left-justify character values and right-justify numeric data. • Use double-spacing for text when possible. • Use at least two spaces between columns. • Display similar information vertically in multiple columns.

4. Wireless LANs Relationships between the Web Browser Window, the Canvas and the Form Window • Data items are placed on the canvas that is displayed by a window. In fact, unless you have a data block on a canvas, the form closes without ever operating. • A canvas is exactly what the name implies. It is a form object for displaying text items, radio buttons, prompts, rectangles, images, sounds, and a wide variety of other form objects. Just as a painter puts a vision of the world on a canvas, the developer puts his vision of a system interface on the form by using an electronic canvas. • A window is the user’s mechanism for looking at the canvas. The function of the form window is similar to the function of a window in your house. When you first look out the window you can see a portion of the world. Part of the world is also obscured because of the size of the window. It’s not possible to see the entire world through a window. Even though a canvas has a finite size, the canvas can be larger (or smaller) than the window. When a canvas is larger than the window, the window has scroll bars, so that the user can move the canvas within the window, just as you would look out your window. The difference is that you reposition yourself by walking to a corner of a room or toward the window instead of moving the canvas with a scroll bar.

5. Wireless LANs Relationships between the Web Browser Window, the Canvas and the Form Window • A form window is not the same as a window displayed on the Windows desktop. It is a window that is displayed inside the Forms Builder runtime engine. Forms Server sends the form to an applet that displays the form window inside the Web browser. The form window operates like any other window, except that it operates inside a Web browser or Forms runtime window if it a client-server application. • The Oracle window can be minimized, maximized, moved, or resized. Actually, the windows in Oracle Forms and Microsoft Windows operate in the same way. The windows have three modes: Normal, Maximized, and Minimized. • By default, the Web browser window and the Oracle form window in the Web browser are displayed in the Normal mode. This means that the Oracle form takes up a portion of the Web browser. The window can be maximized to display more of the canvas. However, the maximization must be done manually or programmatically. The following are some window characteristics that result from sizing the different windows:

6. Wireless LANs Relationships between the Web Browser Window, the Canvas and the Form Window • Maximizing the Web browser causes more space to be displayed within the browser window, but it does not increase the size of the form window. • Maximizing the form window takes up all of the allotted space in the Web browser window. If the canvas is larger than the Web browser window, the browser windows does not display all of the canvas. • If the canvas is smaller than the Web browser window in either Normal mode or Maximized mode, maximizing the form window causes the entire Web browser window to be covered by the canvas. • If the form window in Normal mode is smaller than the Web browser window, the browser window displays blank space. This is very common for newly created applications.

7. Wireless LANs Relationships between the Web Browser Window, the Canvas and the Form Window • The following three figures illustrate the Web browser and Oracle form windows in various combinations of Normal and Maximized modes. • The following first figure illustrates the Web browser and an Oracle form in Normal mode, a mode in which the windows can be moved around and resized, and the window does not cover the underlying object.

8. Wireless LANs Relationships between the Web Browser Window, the Canvas and the Form Window • The following second figure illustrates the Web browser in the maximized mode and Oracle form in the Normal mode. Notice that the Web browser takes up the entire screen. You cannot be moved or resized. The Oracle form, however, is in the Normal mode. It can be moved and resized within the Web browser.

9. Wireless LANs Relationships between the Web Browser Window, the Canvas and the Form Window • The following third figure illustrates both the Web browser and form windows in the Maximized mode. The Web browser window covers the entire screen, and the form window covers the entire Web browser window. Neither window can be moved or resized unless they are placed in the Normal mode.

10. Wireless LANs Relationships between the Web Browser Window, the Canvas and the Form Window • One of your first tasks as a developer is to determine the amount of space that is available within the Web browser window when it is maximized. This depends somewhat on the screen resolution. The higher the resolution, the more space available. You must determine the normal resolution of your user’s screens to determine the size of the Web browser window. The Web browser window is sized by trial and error as follows: • Create a window and canvas of a specific height and width. (setting the height and width will be discussed shortly). • Execute the form. • Maximize the Web browser window and the Oracle form window within the Web browser. If the canvas covers the entire form window and scroll bars appear in the window, the canvas is too large. If the canvas does not fill the entire window, it is too small. If either of these conditions is true, repeat Step 1 with different settings. If the canvas appears within the form window without any window scroll bars, the height and width of the canvas is the maximum size you have available. Remember these size guidelines for use in future forms. • You should perform the same procedure for the Web browser in the Normal mode. When this is done, you will know how much canvas real estate you have available within the window. If your form does not have a large number of displayed data block items, graphics, and boilerplate, you can choose to initially display your form and the Web browser in the Normal mode leaving a portion of the desktop open to your view. If you have a large number of objects, you may need to use the entire screen.

11. Wireless LANs Relationships between the Web Browser Window, the Canvas and the Form Window • There are two other settings that control how much of the form can be seen in the Web browser. The following figure illustrates these settings. The Web browser is maximized in the figure. Notice that only a portion of the Web browser window is occupied by the form. The applet that displays the form determines the area occupied. This area cannot be resized. The size must be set before the Web browser displays the Oracle applet that displays the form. The height and width of this area is set in the formsweb,cfg file. This file is used by the applet sent by the Form Server to control the area within the browser that can be used by the form. It is best to set the formsweb.cfg height and width settings to cover the maximized size of the Web browser window.

12. Wireless LANs Relationships between the Web Browser Window, the Canvas and the Form Window • To reiterate, when designing the form, you must identify and set the following: • Determine the height and width of the canvas. • Set the height and width of the window to the size you have determined. • Identify the height and width of the form window when it is displayed in the Normal mode. If the canvas is larger than the size, your form must be displayed in the Maximized mode. It is poor design to force a user to maximize a new window to see the form contents. If the canvas is larger than the Normal mode form window, it should be maximized when the form is opened. This can be done with the Set_window_property built-in. • Set the formsweb.cfg height and width settings to be equal to or larger than the size of the canvas and form window. • The original form canvas and window created by the Layout Wizard is probably smaller than the Web browser window. Forms Builder bases the canvas Height and Width properties on the number of data items it places on the canvas. This probably doesn’t match the way you want the canvas to be displayed in the form window. To get the form canvas and window to cover the entire Web browser, you must set their Height and Width properties. The form canvas and form window each has independent size properties, because Forms Builder does not force the developer to make them the same size, even though the Layout Wizard originally makes the sizes the same.

13. Wireless LANs Relationships between the Web Browser Window, the Canvas and the Form Window • The canvas and form window Height and Width properties can be set two ways: • Open a property palette for the Canvas and Window objects. Locate and modify the Height and Width properties. • Open the Layout Editor (see the following figure), click and hold the bottom-right corner of the canvas or view, and drag to the proper size. The view is a rectangle that represents the window to which the canvas is assigned. Changing the view changes the Width and Height properties of the window.

14. Wireless LANs Using Frames to Format Data Block Items • A Frame is a canvas child object that can be used to format data block’s items. It is depicted on the canvas as rectangular box surrounding a data block’s items. The shape of the frame determines the positioning of the items in the frame. You can change the position of the items by clicking or selecting the frame and dragging it. Because a frame is an object, it has a legion formatting properties, including the following: • Text or boilerplate displayed within the frame. • Color and width of the frame. • Foreground and background colors of the items within the frame. • Distance Between Records that controls the space between the arrangement. • Layout Style (Form or Tabular) that controls the arrangement of the block’s items. • Top Prompt Alignment that aligns prompts displayed above the item. • Number Of Records Displayed that controls the number of records appearing within the frame. • The following figure illustrates a data block based on the EMPLOYEE table. A default frame with grab handles surrounds the data block items. The grabhandles can be used to change the size of the frame causing the layout of the items in the data block to change.

15. Wireless LANs Using Frames to Format Data Block Items

16. Wireless LANs Using Frames to Format Data Block Items • You can create frames using the Layout Wizard or Frame tool in the Layout Editor, but you use the Property Palette to change the frame properties. The properties offer a number of options for formatting the data items. There are two benefits to using the frame properties to format the data block items: • Setting a frame property ensures that all common components have the same format. For instance, the Start Prompt alignment option ensures that all item prompts begin in the same location. This is very difficult to achieve by setting each item separately. • A great deal of formatting work can be avoided by using frame properties rather than dragging or formatting each frame object. • Frames have two properties that can cause some confusion to the new developer. The Shrinkwrap property causes frame objects to collaps into the smallest area. If you try to modify the layout , Forms Builder does not accept the changes and continues to collapse the objects. Setting the property to NO prevents this from happening. • A second property that can be troublesome is the Update Layout property. It determines when the frame objects are updated. The Update Layout property offers three options: AUTOMATICALLY, MANUALLY, and LOCKED. The default property, AUTOMATICALLY, causes the frame to accept the changes immediately. The second option, MANUALLY, causes Forms Builder to delay the modification until the Update Layout tool in the Layout Editor is clicked. The last option, LOCKED, prevents the frame layout from changing as a result of setting a frame property.

17. Wireless LANs

18. Wireless LANs

19. Wireless LANs Using Frames to Format Data Block Items • Locate the following properties and reset their values: Frame Alignment: Change from Column to Start, Vertical Margin: Change from 10 to 60, Start Prompt Offset: Change from 7 to 60. • Open the Layout Editor by pressing F2. notice the effect of the property changes. • Open the Property Palette for the frame and modify other properties to see the effect. • Save the form for later practice.

20. Wireless LANs

21. Wireless LANs

22. Wireless LANs Operating the Layout Editor • The Layout Editor is one of the Forms Builder’s main design tools. It displays canvases, form window views, data block items, boilerplate, and graphics in a special painting environment. This environment allows you to graphically create and set the properties of all displayed objects through the Layout Editor rather than in the Property Palette. It is important to to remember that whenever you perform a procedure in the Layout Editor, you are actually setting a property. You can also accomplish the same formatting by opening each item’s Property Palette. However, this is time consuming, and the Layout Editor is far more effective at setting formatting properties than manually changing each individual property. There may be times, though, when it is preferable to set an item property on the Property Palette rather than on the Layout Editor. • The Layout Editor makes it possible to drag items and text into position, add data items, set font characteristics, arrange and size items, and set colors. The Layout Editor can be launched in three ways: • Double-click the left icon of any Object Navigator graphic item. • Press the F2 key. • Select the Tools/Layout Editor menu selection.

23. Wireless LANs Layout Editor Components • The Layout Editor has a number of components. The first of these is the workarea where the formatting occurs. At the base of the work area is an underlying grid. The grid consists of a series of equally spaced points that can be used as a guide in arranging items. The grid covers the entire work area. • The canvas is displayed above the grid. Initially, the canvas is a gray rectangle with white borders on the left and bottom edges. Displayed objects such as boilerplate text and data items are displayed on top of the canvas. Form items can only be placed on the canvas, so if they are placed in the work area outside the canvas, the form does not compile. The last work area component is the view. A view represents the window in relationship to the canvas. • On the left side of the Layout Editor is the toolpalette. The palette contains tools for adding graphic features such as rectangles, text, data items, buttons, images, and sounds. The tool palette also has three tools for coloring form objects. At the top of the Layout Editor is a toolbar used to set font characteristics, arrange selected items, and layer graphic items. Above this toolbar is another toolbar with standard tools for saving and opening files and a pull-downmenu with additional options. Together, the work area, tool palette, toolbars, and menu offer you a wide variety of tools to format your forms.

24. Wireless LANs Sizing the Canvas and Window • It is possible to size the canvas and window directly in the Layout Editor rather than entering height and width property values. A view represents the area of the window. When the canvas and window are first created, they are the same size. The top-left corner of both the canvas and view are located in the top-left corner of the work area at position 0,0. The default canvas and view sizes will probably not suit your design, and you will have to resize the view and canvas. • Before you can resize the canvas, you should select and resize the view. Because the view overlays the canvas edge, you cannot select the canvas until you increase the size of the view. • Both the canvas and window can be resized by grabbing their bottom-right corners. • Looking at the Layout Editor, the view is a thin black frame that has no fill. To change the view (or window) size: • Select the view by clicking any portion of the black frame . Grab handles appear when the view frame is selected. • Place the insertion point over a grab handle, hold the left Mouse button down, and drag the view frame.

25. Wireless LANs Sizing the Canvas and Window • The middle view grab handles only allow you to resize the frame horizontally or vertically. The corner grab handles allow you to resize both horizontally and vertically. • Canvases are identified by the white right and bottom edges. To change the canvas size, you would follow these steps: • Select the canvas by clicking any portion of the white frame. One grab handle appears at the lower-right corner of the canvas. • Place the insertion point over a grab handle, hold the left Mouse button down, and drag the handle. • as practice, perform the following steps to open the previous practice form module and resize the canvas and view: • Open the form module in the Object Navigator. • Run the form and notice the size of the window and the canvas. Close the form. • Open the Layout Editor by pressing F2 key. • Select the Viewport frame. This may require several tries. When drag handles appear, drag the Viewport frame away from the canvas. • Select the canvas by clicking the bottom-right corner. A black grab handle appears. Grab this handle and resize the canvas. Be sure to make the canvas smaller than the view frame. • Run the form and see if the canvas and window sizes have changed. • Repeat steps 5 and 6. this time make the canvas bigger than the view. • Save the form for later practice.

26. Wireless LANs Moving, Arranging, and Sizing Items • Any item on the canvas can be moved to another location by selecting the object and dragging it to the new location. Text and display items actually consist of two components; the prompt and the item. When you move an item , the prompt is moved along with it the prompt retains the same relative position to the item after it is moved. The prompt can be repositioned by selecting the prompt and dragging it to the new location. Repositioning the prompt changes the item’s prompt offset properties but not the item’s position property. Thus, as the item is moved around the canvas, the prompt retains the same position relative to the item. • Multiple items can be selected by holding down the Shift key while selecting items. It is then possible to move the entire set of selected items. It is also possible to micro-move selected items by using the arrow keys. When small changes are needed, you will find these keys easier to use than dragging with a mouse. • A good form design concept is to align the left edge of the form items. It is also preferable to right-justify the prompts for these items. • Forms Builder has two excellent tools for aligning selected items. These are the alignment tools on the Layout Editor toolbar and the Layout/Align Components menu selection.

27. Wireless LANs Alignment Toolbar • The Layout Editor has six alignment tools, which are used to align two or more selected items including their prompts. These tools are: • AlignLeft: Aligns the left edge of all selected items. This is a common alignment for text items. • AlignCenterhorizontally: Determines the horizontal middle point of all selected items and aligns the selected items to this point. • AlignRight: Aligns the right edge of all selected items. This is a common alignment for prompts. • AlignTop: Aligns the top edge of all selected items. This tool is commonly used to align items on a row. • AlignCentervertically: Determines the vertical middle point of all selected items and aligns the items to this point. If the selected items are in a columnar layout, all the items are moved to one point. • AlignBottom: aligns the bottom edge of all selected items. This tool is also commonly used to align items on a row.

28. Wireless LANs Alignment Toolbar • The following list presents a formatting sequence for using the tools of the toolbar . These steps are used for data blocks in a Form style. The data items are initially laid out in multiple columns. The initial practice form layout is a good example of this placement: • Use the drag method to roughly align all items. • Select all of the items in the left-most column. Align the left edges using the Align Left tool. • Select all of the prompts for the column items that are furthest to the left. Align the right edges using the Align Right tool. This right-justifies the column prompts that are furthest to the left. • Select all of the items in the top row. Use either the Align Top or Align Bottom tool to align the row. • Repeat Step 4 for each row. • Repeat steps 2 and 3 for each column of items. • Micro-adjust any items using the arrow keys.

29. Wireless LANs Alignment Toolbar • As practice, format the form that you used in the previous practice session by performing the following steps: • Open the Layout Editor for the practice form. • Resize the frame so that the EMPLOYEE data block items are listed in two columns. • Select one of the items and drag to another location. Move it back to its previous location. Notice that the prompt stays in its position relative to the item. • Select one of the prompts and drag it to the left of the item. Notice that the item stays in its original location. • Select multiple items and move them around the canvas returning them to their original locations. • Use the formatting sequence described previously to align all of the items. • Save the form for later practice.

30. Wireless LANs The Layout/Align Components Menu Option • Selecting the Layout/AlignComponents menu option launches the Align Objects dialog box. This dialog box has the same alignment settings as the toolbar, plus several additional settings. The dialog box has additional settings used to distribute or stack the selected items both vertically and horizontally. • The Distribute option evenly spaces the selected objects. For example, if five items are selected and the HorizontallyDistribute option is selected, Forms Builder shifts the items so that equal space is placed between each object. The two end items remain in the same place, but the inner three are moved. The same thing happens if the VerticallyDistribute option is selected. The difference is that the end items will be the top-most and bottom-most items. You should be aware that it makes no difference for the tool if the items are on a single row or column, because the tool looks at all selected items and arranges them. • The Stack option places the items adjacent to each other. It shifts all of the selected items together until they are aligned with no space between them. The HorizontallyStack option causes the right or left item edges to abut, and the VerticallyStack option causes top or bottom edges to abut.

31. Wireless LANs The Layout/Align Components Menu Option • The following figure illustrates the use of several different alignment of the same items: • Horizontal left align / vertical distribute • Horizontal left align / vertical stack • Horizontal right align / vertical stack • Horizontal stack / vertical bottom align • Horizontal distribute / vertical bottom align

32. Wireless LANs Sizing Items • Sizing objects in the Layout Editor is easy. Selecting the item causes grab handles to appear around the item, which you can select and drag to change the size of the object. This technique works very well when changing the width of an item. If a text item is a little bit wider than it should be, no one will notice. However, your users will notice that the height of an item is not the same as other form items, even if it is only one point size different. Unless there is a special reason for a difference, you should ensure that all text items are the same height. For this reason, it is preferable to use a method other than dragging for changing the height. It is much better to use the Size Objects dialog box.

33. Wireless LANs Sizing Items • The Size Objects box is similar to the Align Objects dialog box in that it contains three groups of radio button options: Width, Height, and Units. Width and Height each have five radio buttons that perform the following functions: • NoChange: Does not modify the width or height. • Smallest: Sets the width or height equal to the smallest selected item. • Largest: Sets the width or height equal to the largest selected item. • Average: sets the average height or width of all selected items to the average of the items. • Custom: Allows you to set the value. Selecting this option activities the text box in each of the groups. You can then enter a custom value. The value is based on the Units Selected options. Setting a value of 1 using the inches unit sets the items equal to one inch. • The third group of radio options is Units. Units control the overall width and height settings you have chosen for your text boxes. You can choose inches, centimeters, points, or character cells. Points are the number resolution points on the screen. A character cell is a unit of measure used by primarily in character-based mainframe applications.

34. Wireless LANs Sizing Items • Whether you use inches, centimeters, points, or character cells, Forms Builder translates the property setting to points, which is the default setting. • As practice, perform the following steps: • Open the practice form you have been using in previous practices. • Open the LayoutEditor and select the Fname and Lname items. • Select the Layout/Size Components menu selection, which opens the SizeObjects dialog box. • Click the Width/Largest radio button. • Click OK. This causes the Fname and Lname items to have the same width. • Save the form for later practice.

35. Wireless LANs Selecting and Grouping Objects • As Edit/SelectAll tool format and arrange objects and items on the canvas, you will continually select the items using several methods as follows: • Place the insertion point over the object and click the left mouse button. • Hold the Shift key while selecting additional objects. • Use the selection tool to create a box around a set of objects. • Use the Edit/SelectAll tool to select all Layout Editor objects. • Regardless of the technique that you employ, as soon as you select another object without holding down the Shift key, all previously selected objects are deselected. This may be an accident or, more likely, you want to work on other objects. As you work on a form layout, you often have to repeatedly select the same group of items. It can be time consuming to continually select the same objects. The Layout/GroupOperations menu option can alleviate this problem. • The Layout/GroupOperations/Group menu option essentially places all currently selected items into a group. The grab handles disappear from the individual items, and a set of grab handles is displayed around the group.

36. Wireless LANs Selecting and Grouping Objects

37. Wireless LANs Selecting and Grouping Objects • The advantage of grouped items is that all of the items are selected when you select any of the group objects. This prevents you from having to perform continuous multi-select procedures. Other grouping techniques include: • Addingan item to an existing group: Select the group. Select the new item(s) while holding the Shift key down. From the menu, select Layout/Group Operations/Add to Group. • Removing an item from an existing group: Select the group. Select the target item within the group. The group grab handles disappear and grab handles appear around the item. From the menu , select Layout/GroupOperations/RemovefromGroup. • As practice, perform the following steps: • Open the practice form and display the canvas in the Layout Editor. • Select the Fname, Lname, and Sex items. • From the menu, select Layout/Group Operations/Group. Notice that the item grab handles disappear and a large grab handles is placed over all three items. • Select any of the three items and drag it to a new location. Notice that the other items are also moved.