Formatting the Form Using the Layout Editor Dr. Awad Khalil
Computer Science & Engineering Department AUC 1
Slide 2
Wireless LANs 2 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 Editors
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.
Slide 3
Wireless LANs 3 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 users 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.
Slide 4
Wireless LANs 4 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 users 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. Its 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.
Slide 5
Wireless LANs 5 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:
Slide 6
Wireless LANs 6 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.
Slide 7
Wireless LANs 7 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.
Slide 8
Wireless LANs 8 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.
Slide 9
Wireless LANs 9 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.
Slide 10
Wireless LANs 10 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 users screens to determine the size of the Web browser window.
The Web browser window is sized by trial and error as follows:
1.Create a window and canvas of a specific height and width.
(setting the height and width will be discussed shortly). 2.Execute
the form. 3.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.
Slide 11
Wireless LANs 11 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.
Slide 12
Wireless LANs 12 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 doesnt 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.
Slide 13
Wireless LANs 13 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: 1.Open a property palette
for the Canvas and Window objects. Locate and modify the Height and
Width properties. 2.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.
Slide 14
Wireless LANs 14 Using Frames to Format Data Block Items A
Frame is a canvas child object that can be used to format data
blocks items. It is depicted on the canvas as rectangular box
surrounding a data blocks 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 blocks 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 grab handles can be used to change the size of the frame
causing the layout of the items in the data block to change.
Slide 15
Wireless LANs 15 Using Frames to Format Data Block Items
Slide 16
Wireless LANs 16 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.
Slide 17
Wireless LANs 17
Slide 18
Wireless LANs 18
Slide 19
Wireless LANs 19 Using Frames to Format Data Block Items
9.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. 10.Open
the Layout Editor by pressing F2. notice the effect of the property
changes. 11.Open the Property Palette for the frame and modify
other properties to see the effect. 12.Save the form for later
practice.
Slide 20
Wireless LANs 20
Slide 21
Wireless LANs 21
Slide 22
Wireless LANs 22 Operating the Layout Editor The Layout Editor
is one of the Forms Builders 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 items 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.
Slide 23
Wireless LANs 23 Layout Editor Components The Layout Editor has
a number of components. The first of these is the work area 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 tool palette. 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-down menu with additional
options. Together, the work area, tool palette, toolbars, and menu
offer you a wide variety of tools to format your forms.
Slide 24
Wireless LANs 24 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: 1.Select the view by clicking any portion of the black frame.
Grab handles appear when the view frame is selected. 2.Place the
insertion point over a grab handle, hold the left Mouse button
down, and drag the view frame.
Slide 25
Wireless LANs 25 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: 1.Select the canvas by clicking any portion of the
white frame. One grab handle appears at the lower-right corner of
the canvas. 2.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: 1.Open the form module in
the Object Navigator. 2.Run the form and notice the size of the
window and the canvas. Close the form. 3.Open the Layout Editor by
pressing F2 key. 4.Select the Viewport frame. This may require
several tries. When drag handles appear, drag the Viewport frame
away from the canvas. 5.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. 6.Run the form and see if the canvas and window sizes
have changed. 7.Repeat steps 5 and 6. this time make the canvas
bigger than the view. 8.Save the form for later practice.
Slide 26
Wireless LANs 26 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 items
prompt offset properties but not the items 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.
Slide 27
Wireless LANs 27 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: Align Left : Aligns the
left edge of all selected items. This is a common alignment for
text items. Align Center horizontally : Determines the horizontal
middle point of all selected items and aligns the selected items to
this point. Align Right : Aligns the right edge of all selected
items. This is a common alignment for prompts. Align Top : Aligns
the top edge of all selected items. This tool is commonly used to
align items on a row. Align Center vertically : 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. Align Bottom : aligns the bottom edge
of all selected items. This tool is also commonly used to align
items on a row.
Slide 28
Wireless LANs 28 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: 1.Use the drag method
to roughly align all items. 2.Select all of the items in the
left-most column. Align the left edges using the Align Left tool.
3.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.
4.Select all of the items in the top row. Use either the Align Top
or Align Bottom tool to align the row. 5.Repeat Step 4 for each
row. 6.Repeat steps 2 and 3 for each column of items.
7.Micro-adjust any items using the arrow keys.
Slide 29
Wireless LANs 29 Alignment Toolbar As practice, format the form
that you used in the previous practice session by performing the
following steps: 1.Open the Layout Editor for the practice form.
2.Resize the frame so that the EMPLOYEE data block items are listed
in two columns. 3.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. 4.Select one of
the prompts and drag it to the left of the item. Notice that the
item stays in its original location. 5.Select multiple items and
move them around the canvas returning them to their original
locations. 6.Use the formatting sequence described previously to
align all of the items. 7.Save the form for later practice.
Slide 30
Wireless LANs 30 The Layout/Align Components Menu Option
Selecting the Layout/Align Components 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 Horizontally Distribute 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
Vertically Distribute 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
Horizontally Stack option causes the right or left item edges to
abut, and the Vertically Stack option causes top or bottom edges to
abut.
Slide 31
Wireless LANs 31 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
Slide 32
Wireless LANs 32 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.
Slide 33
Wireless LANs 33 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:
No Change : 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.
Slide 34
Wireless LANs 34 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: 1.Open the practice form you
have been using in previous practices. 2.Open the Layout Editor and
select the Fname and Lname items. 3.Select the Layout/Size
Components menu selection, which opens the Size Objects dialog box.
4.Click the Width/Largest radio button. 5.Click OK. This causes the
Fname and Lname items to have the same width. 6.Save the form for
later practice.
Slide 35
Wireless LANs 35 Selecting and Grouping Objects As Edit/Select
All 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/Select All 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/Group Operations menu option can alleviate this
problem. The Layout/Group Operations/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.
Slide 36
Wireless LANs 36 Selecting and Grouping Objects
Slide 37
Wireless LANs 37 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: Adding an 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/Group Operations/Remove from Group. As practice, perform the
following steps: 1.Open the practice form and display the canvas in
the Layout Editor. 2.Select the Fname, Lname, and Sex items. 3.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. 4.Select any of the three items and drag it to a
new location. Notice that the other items are also moved.