"SBase Personal - 35. DESIGNING AND EDITING FORMS" 35 DESIGNING AND EDITING FORMS Basic Design Concepts Editing Aids Ruler and Grid Snap to Grid Crosshairs Auto Field Names Reduced View Placing Objects on the Form Defining the Object Hierarchy Placing Graphic Objects Placing Images Placing Text Selecting a Font Placing Fields External File Fields Fields from dBase Files Saving Forms Editing Forms Adjusting Form Page to Match Printer Page Selecting Objects Undo Cut, Copy, Paste, and Clear Editing Text Altering an Image Changing File and Field References Managing Pages New Page Opening and Saving Pages Page Clear and Page Erase Page Next / Previous / Go to ... 35 DESIGNING AND EDITING FORMS Designing forms requires a mix of creative and logical skills. To be successful, a form must achieve its purpose, which is to provide an interface to a SBase database. To begin you must first understand how to set up a SBase file definition and how users will enter and review data. A basic form needs only to show some or all of the fields from a database file. No graphical objects or text are needed. However, a form with no text would leave the user unable to distinguish one field from another. So the minimum requirement for a usable form is to complement the fields from the database with their names. Beyond these minimum requirements, a form should employ graphic features to improve its usefulness. Color, patterns, boxes and lines all contribute to the visual structure of the form, making it easier to understand. In this chapter, we look at the editing aids available in the Form Designer, and see how to combine graphic and data elements to produce effective screen forms. Basic Design Concepts A form is a picture. Everything on a form should be harmonized to make it a pleasure to work with. The more attention paid to this ergonomic and esthetic aspect of form design, the better users will interact with the software. They will make fewer mistakes, enjoy their work more, and contribute more to your organization. Perhaps the most basic of concepts for form design is that of focus. The average user scans a page or a screen from left to right and top to bottom, pausing at areas which draw attention to themselves. As a designer, you should take advantage of this. The fields in most data files can be divided into groups. For example, a simple address file has two groups: the name and the address. A more complex customer record is likely to include financial information. A record for a stock item is still more complex, with fields for identification and description, supplier, prices, and quantities. It makes sense to group these fields together on a form, placing them within separate boxes, or at least separating each group from the others with lines. The actual positioning of groups on the form depends on the number and size of the groups. A simple rule of thumb is to place the most frequently read data near the center of the screen, or within vertical or horizontal zones that intersect as a broad cross. Leave the corners of the screen for less frequently read data. Remember that you may have multiple pages in a form. Sensitive or very infrequently read data may be placed on a second page. See Managing Pages at the end of this chapter. Text is essential. There should be neither too much nor too little. Since you do not have to use fieldnames, you should omit them where possible. For example, a group of address fields needs only the cue `Address' next to or above it for the user to see at a glance what the fields are for. On the other hand, you can add extra text to make fields intelligible where the field name is itself enigmatic. Q1 could be expanded to `First Quarter,' for example. Always identify the application for the user. Reserve a heading area for a description of the application and if necessary the specific function. For example, `ADDRESS FILE: Add New Records' explains what is going on in five words. You could underline or embolden the text, or draw it in contrasting pen and paper colors. Likewise, identify which page of a multi-page form the user is looking at. You may include prompts for the user, indicating the kind or range of data to be entered into a specific field. These can be designated Display Only, so that they will be omitted when the form is printed out. Color is another essential element of form design. The most obvious use is color coding. This can be applied throughout an application: data entry screens in green, browsing screens in blue; or, index key fields in red, ordinary fields in black. Within a particular screen, related fields may be placed within boxes with different color backgrounds and borders. There are a number of pitfalls in form design. Too many lines, boxes, areas and colors just confuse the user. Go for as simple a scheme as possible. Garish color contrasts attract the eye too strongly. Objects should always be aligned: a group of twenty fields all slightly askew is very hard to read. Editing Aids The Form Designer provides a set of editing aids to facilitate design. These aids are available from the Edit menu. The most frequent editing action is selecting an object prior to changing its characteristics. This is done by double-clicking. See Chapter 33 Getting To Know The Form Designer for more information on selection techniques. Ruler and Grid The Form Designer rulers and grid displays are selected with the Ruler/Grid command on the Edit menu. Rulers allow you to ensure that your form layout is correct for the page size on which the form will be printed. One inch on the ruler equals one inch on the paper. - The ruler as it appears on screen uses logical rather than physical measures. One inch on the screen ruler is not one inch on a real ruler. This is necessary to cope with different screen resolutions, and does not affect the outcome when a form is printed. The grid is an invaluable tool for ensuring that objects on the form are aligned, both with each other and with precise points on the rulers. - The grid is hidden under any area, so you may want to place areas on the form last, or use the Crosshairs editing aid to align with the grid outside an area. When editing, resize areas temporarily to expose the grid. 1. Select the Ruler/Grid command. *** See Fig 35-1 *** 2. To turn on the rulers, click the Show Rulers check box. - Rulers are displayed in inches or centimeters depending on which option is selected on the requester. 3. Define ruler units in the left-hand box. The units apply to inches or centimeters, whichever is selected. 4. To turn on the grid, click the Show Grid check box. 5. Define grid units in the right-hand box. The values are multiples of the ruler units. 6. You can override the grid units by turning on the Characters check box. - This forces the grid to the character size of the currently selected font. Use this feature with Snap to Grid to position adjoining fields. 7. When you have defined all the settings you require, click OK. The Form Designer returns to the work area showing your selections. - To turn off Rulers and Grid, deselect the appropriate check box on the Rulers and Grid requester. Snap to Grid The Snap to Grid command forces objects into alignment with the grid. This make the process of form creation much faster, as you can place objects at approximate positions and the Form Designer will align them for you. Snap to Grid also affects moved and sized objects. Already selected objects are snapped to the grid when you choose the command. Crosshairs The Crosshairs editing aid allows you to position objects precisely. When the Crosshairs command is selected, vertical and horizontal lines are shown intersecting at the mouse pointer. If the Snap to Grid command is also selected, then the Crosshairs will snap to the grid. The intersection of the Crosshairs is shown as X and Y co-ordinates at the right of the toolbox. Auto Field Names The simplest way to create text prompts for the fields on a form is to use their field names. When the Auto Field Names option is selected, the name of any field that you place on the form is positioned next to it. If possible, the Form Designer places the name at the left of the field. If this would entail a collision with the left margin, the name is placed above. If names end up overlapping, they may be easily selected and moved, as they are simple text objects. Reduced View If your form is larger than the window, you may wish to see it scaled down to check that the parts are correctly arranged. Select the Reduced View command to display a scaled down view of the form. *** See Fig 35-2 *** It is not possible to do any editing in the reduced view, and most menu commands are disabled. Placing Objects on the Form The order in which types of object are placed on a form is largely a matter of individual preference. There is no reason why you should place fields before text, or the other way round. In this chapter, we present the order of graphic objects, fields, and text. The general technique for positioning objects is to place them on the form, then move them into the exact position you want. This is quicker for the beginner than trying to get the position right first time, though with experience you will find that your accuracy improves. Of course, the Snap to Grid command helps accurate positioning a lot, but there are always objects that you do not want snapped to the grid. Defining the Object Hierarchy The Hierarchy command on the Page menu allows you to alter the existing hierarchy of objects. When you place an new object on top of another object, the Form Designer decides whether to display it in front or behind the other object according to the following default hierarchy (from lowest to highest): Areas Boxes Lines Images Text Fields Commands, Calculations, Functions (Only in Form Designer Pro) The further down the list an object is, the higher the priority it is given. Thus fields appear in front of areas, and text is displayed on top of images. Note: Commands in the Form Designer Pro include push buttons, radio buttons and check boxes. The ability to redefine the object hierarchy can be particularly useful when you want to design a form where the user can select specific points on an image; for example, if the form showed a map of England, clicking on a city might display further information about that city. The simplest way to achieve this effect would be to create a push-button for each of the cities in the image. But because push buttons have a higher priority than images in the hierarchy they would normally be shown on top of the cities. The answer is to redefine the object hierarchy so that fields have a lower priority than images; i.e., they appear further up the list. To alter the position of an object in the hierarchy: 1. Select Page/Hierarchy. - The Form Designer displays a dialog box listing the default object hierarchy (as shown above). 2. Select the object type whose position in the hierarchy you wish to change, by clicking it once. 3. Click once on the object currently at the position in the hierarchy to which you want to move. The Form Designer moves the first object to the new position. 4. Repeat this procedure for any other objects in the list which you wish to change. 5. Click OK. Once you have redefined the hierarchy, the Form Designer saves it with the current form. Placing Graphic Objects The graphic objects are described in Chapter 34. The procedure is the same for areas, lines, and boxes: 1. Choose the required object type in the toolbox. 2. Choose color and pattern as required. 3. Click where you want the object to appear. 4. Drag the object to the required size. - Areas and Boxes may be square or round cornered. - Areas may have borders. Once an object is on the form, it may be easily sized or moved. See Chapter 34 The Toolbox for more details of these functions. Placing Images Image files can be used as graphic elements on the form. To add an image: 1. Click on the Camera tool. 2. Place the pointer on the form at the position for the image and then click and drag a frame on the form. When you release the mouse button the Image Requester shown below will be presented: The above requester is shown if the program is operating under AmigaDOS 2.0 or greater. Otherwise a more limited requester is presented. In the requester are buttons for selecting the file requester, color map, and image scaling options. 3. Select the file by clicking on the File button. The normal SBase file requester for the operating system utilized will be presented. Scroll through the files to find the desired image file. See chapter 36 for more information concerning image files. 4. Select the desired Color Map Options. Use Image Palette Will change the palette of the form to match the picture. Grayscale Will utilize tones of gray Use Form Palette Will remap the image utilizing the existing palette of the form. 5. Select Scale Remapping Options Scale (Maintain Aspect) Will maintain original aspect ratio of image within the frame. Scale (Exact Fit) Will remap picture to exactly fit in frame drawn on the form and thus alter aspect ratio. No Scale Image will be rendered at original size ignoring the size of the frame. The image will be rendered as dictated by the above options. Placing Text Text is mainly used to identify objects and applications, and to prompt the user. As a general rule, define the characteristics of text before you place it on the form. 1. Choose a font. 2. Choose a text style. 3. Choose pen color. - Choose a paper color and select the pen and paper tool if you want the text to be drawn with a background. 4. Choose the Text object type in the toolbox. 5. Click where you want the text to appear. 6. Type the text and press ENTER to finish. Text objects are restricted to a single line. You may easily change the characteristics of text and edit it. See below in this chapter. Selecting a Font The Define Font command allows you to choose a font for any text object on the form. 1. Select the Define Font command. *** See Fig 35-3 *** 2. Select a font from the list. - The default list of fonts shows all the fonts that are present in the fonts directory. 3. Click OK. All text, fields, and calculation names will be drawn in the selected font. Placing Fields Placing a field on a form allows you to enter data into database records and retrieve it with the same form. You can select fields from any existing database file, and position them anywhere on a form. Field data has the same characteristics as text data. You may define font, text style, and pen and paper colors for each field. See the previous section. Fields may be left, right, or center justified. You may designate a field as Read Only to protect it from being edited. Fields, like other objects, may be designated as Display Only, to stop them from being printed. See Chapter 34 The Toolbox for descriptions of these features. 1. Open the database file with the SB Project Open command. - Repeat this step for each file. 2. Select the Field object type (FLD) from the toolbox. - Select the Auto Field Names command on the Edit menu if you want the field name supplied automatically as a text prompt for the field. - Click the Borders tool in the toolbox if you want each field to be supplied with a border in the current border color. The border is always drawn in the finest line pattern. 3. Click where you want the field to appear. 4. Select a field from the list shown. - You may switch to another file by clicking the arrow box next to the file name on the requester. - If you place fields from more than one file on a form, you should link the files before saving the form. See Chapter 38 Linking Files in Form Designer. 5. Click OK. A dotted box containing the field name is placed on the form at the point where you clicked. The size of the box is determined by the font and text style. You should resize long text fields to a rectangular shape. External File Fields If you wish the form to show external images or text in an external file field, you must use the size tool to make the field box large enough to hold the image. - Clipping. If an External File Field is left justified, the top left-hand corner of the image will be shown on the form. Center and right justification show the center and bottom right-hand corner of images respectively. - Scaling. If you select the Image Scaling tool in the toolbox, SBase will scale images to fit the size of the field box. Fields from dBase Files In SBase, you may open dBase files for browsing, query, and output. dBase files may not be modified from within SBase, so there is no risk of affecting existing data. Commands which would write to the dBase file are disabled. You may also import dBase files into SBase so that you can use all the menu commands. Before you use a dBase file in the Form Designer, you must create a special definition file in SBase itself. Open at least one index for the dBase file before using the SBase Project Save command. In the Form Designer, select the SB Project Open command and click the dBase check box. Any dBase DBD files in the current directory will be listed, and can be opened in the usual way. Note that you may use the SBase Project Modify command to alter the display format of individual fields. Saving Forms When you have completed the design of your form, select the Project Save As command to save it on disk. The Save command saves an existing form under its own name, whereas Save As allows you to give it a new name. - You can also save individual pages from a form to build up a library of form designs. See Managing Pages later in this chapter. - You must save a form after editing it for SBase to detect that it has changed and re-open it automatically. See Chapter 42 Generating Reports for a description of what happens when you save a report form. Editing Forms Whenever you make changes to a form, you are editing it. The Form Designer provides many tools and commands so that you can easily adapt a form by changing its graphical layout or logical contents. The toolbox at the bottom of the window is the designer's main aid. You select an object on the form, then change its color or pattern or another characteristic by choosing the appropriate tool from the toolbox. Other ways of editing a form include the use of the cut and paste commands, and the tools for moving and resizing objects. See Chapter 34 The Toolbox for details on Move and Size and other tools. Adjusting Form Page to Match Printer Page The editable area is taken from the dimensions of the page set with the Printer Setup command. Sometimes there will be a difference between the dimensions of an existing form and those currently set in the Form Designer. If the printer page size is smaller than the screen form size, a broken line will appear on screen to show the dimensions you must work within. If you have opened an existing form the printer page dimensions may be different from the screen form dimensions. Select the Printer Setup command from the Project menu, select the printer you intend to use from the Change Printer requester and click on OK. The Page Setup requester is displayed. *** See Fig 35-4 *** The requester shows the current settings for the selected printer. If you want to change any of these, set the new values before clicking on OK. If the Form Designer detects any objects partly or wholly outside the new boundaries, it selects all such objects and advises you that the adjustment cannot be completed. You must then move the selected objects inside the boundaries, or reset the printer page dimensions. Selecting Objects In order to change any characteristic of an existing object, you must first select it. On the screen, a selected object is shown with a border of dashes. Select an object by positioning the mouse pointer over it, then double-clicking the mouse button. You may select more than one object at a time. To select other objects singly, hold down the SHIFT key while clicking them. If the objects are in a group, hold down the CTRL key and hold down the mouse button. This produces an expandable selection box, which you drag until it fully or partly encloses the objects you wish to select. When you release the mouse button, all the objects are shown as selected. To deselect an object, click it, select another object, or click on an unoccupied part of the form. Select also Chapter 33 Getting To Know The Form Designer. Undo The Undo command reverses the previous editing action. Actions that may be undone include Move and Size. Undo also removes the last object placed on a form if your last action was to create it. Undo does not reverse the commands on the Define menu, or the Page Clear or Erase commands. Cut, Copy, Paste, and Clear The Cut and Paste commands work in the normal way. First, select the object or objects to be edited. Next select the command you require from the Edit menu. Cut Removes the selected object and stores a temporary copy. Copy Stores a temporary copy of the selected object. Clear Removes the selected object from the form. Paste This command works differently. First you select the Paste menu command, then you click where the object is to appear. You can then move the paste box to the required position and release the mouse button. The Form Designer inserts a copy of the stored objects where you clicked. - Once an object has been stored with Cut or Copy, it may be pasted many times. - See also the Page Clear and Page Erase commands, described below. Editing Text Text objects may be edited in two senses: by changing the characteristics of the object, or by changing the content of the text. To alter the way a text object is drawn, select the text to be edited as you would any object. You may select multiple text objects if you wish. Now you may vary the color and other characteristics of the text simply by clicking the appropriate tools in the toolbox. The font of selected text may be altered by choosing a new font with the Define Font command. To change the content of a text object, select the Text object type and then click the text object. An insertion point appears at the beginning of the text. You may now delete and retype the text. Press ENTER to finish. Altering an Image Images can be re-sized or have their color re-mapped by clicking on the Re-size tool in the Toolbox of the Form Designer and then use the mouse to re-size the image. This will then bring up the Image Requester and you can then change the settings to alter the image. Changing File and Field References The field names used in a form are taken from a SBase file definition. When you open an existing form for editing, the Form Designer checks to see whether the SBase file is still present in the directory. You may have reorganized the file from within SBase, giving it another name, or you may have created an empty copy and removed the old file. Your form would still be valid if you could change the filename for all the fields from the original file to the filename of the new file. If the file is not there, the Form Designer informs you that it cannot find the file, and presents you with a Replacement File requester. Select the new file. All references to the old filename - the one that was not found - will be updated. Similarly, you may have changed a field name in SBase. When you open a form that still has a reference to the old field name, the Form Designer informs you that it cannot find the field, and shows a list of the fieldnames in the new file definition. Select a field to replace the one that could not be found. If the Form Designer finds a reference that needs changing in a calculation, a validation, or a command, it presents the appropriate requester for you to edit the command line or formula. If you click Cancel the object will remain but the formula or command line itself will be cleared out. - Remember to save the form. Managing Pages Forms may consist of one or more pages. If you have to design many pages, you can build up a library of pages on disk from which to assemble more complex forms. This can greatly reduce the time required to develop input and browsing screens, especially if you adopt formal standards so that the forms used in different parts of an application look similar. The Page menu includes commands for creating a new page, opening and saving pages, clearing and erasing pages, and for switching between pages. New Page When you want to create a second or subsequent page for your form, use this command. It starts a new page after the current page. You may define the page dimensions of each page separately. Opening and Saving Pages Individual pages may be opened and saved with the Page Open and Page Save As commands. Page Open lists all PG files in the current directory. Opening a page file causes it to be inserted as the current page of the form. Page Save As allows you to save the current page of the form as a PG file. Page Clear and Page Erase If you want to remove all objects from a page, use the Page Clear command. In a multi-page form, you may need to remove a page completely. The Page Erase command deletes the current page. You cannot restore a page that has been erased or cleared in this way with the Undo command, so you may wish to save the page separately first. Page Next / Previous / Go to ... During the design process, you will need to move from page to page. The Page Next and Previous commands switch to the neighboring pages of the form. The Page Go To command presents a requester allowing you to specify the required page. See also Chapter 44 Housekeeping in Form Designer.