From 8362bf63dea22bbf6736609b0f49c152f975eb63 Mon Sep 17 00:00:00 2001 From: tpearson Date: Wed, 20 Jan 2010 01:29:50 +0000 Subject: Added old abandoned KDE3 version of koffice git-svn-id: svn://anonsvn.kde.org/home/kde/branches/trinity/applications/koffice@1077364 283d02a7-25f6-0310-bc7c-ecb5cbfe19da --- doc/kexi/designingforms.docbook | 1480 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 1480 insertions(+) create mode 100644 doc/kexi/designingforms.docbook (limited to 'doc/kexi/designingforms.docbook') diff --git a/doc/kexi/designingforms.docbook b/doc/kexi/designingforms.docbook new file mode 100644 index 00000000..b205fe71 --- /dev/null +++ b/doc/kexi/designingforms.docbook @@ -0,0 +1,1480 @@ + + + + Designing Forms + + + Most important terms + + + Form + + + A window provided for easy data entry and presentation on the + computer screen. + + + + + Form's data source + + + Database table or query providing data displayed in the + form. The data source is needed because forms itself are only + tools for displaying and entering data, + while tables and queries are the source of data. New, empty + forms have no data source assigned, so they are not displaying + any data from your database unless you assign a data source + to them. + + + + + Form field + + + Direct equivalent of a column in a table or query. Most frequently + used are fields for displaying text and numbers. Entering a new + value or changing the existing value of such a field causes a change + in the bound table or query column (after accepting the change). + + + + + Form design + + + Tasks you are performing to define the appearance and functions of + the form. To do this, you need to provide + data source, + insert form fields + of various types and place them at the appropriate location. + + + + + Form widget + + Form's element. Main widget types are: + + + + Widgets displaying information, ⪚ a text box or an image box. Each + widget of this type can be bound to a data + source field (a table or a query column). Therefore, such widgets + are called in short form fields. + + + + + Widgets able to perform a specified action, ⪚ a push button + that can close the current form. Within other applications this + widget type is sometimes called form control + because it can perform previously defined action of + controlling your database application's + behavior. + + + + + Other widgets allowing to enrich a form's appearance, ⪚ + a line widget can visually separate two form + areas. + + + + + + + Container widget + + + A widget that can contain other widgets within + its area. For example, frame widget or tab widget are containers. + The form's surface itself is a container as well. A command button cannot + be called as container because it is not possible to insert a widget + inside it. In more complex cases, container widgets can be inserted + inside a container, so nesting is possible. + + + + + + + + + Forms versus tables + + In chapter + 5.2 you learned about how to enter data directly into tables using their + data sheet view. However, in many cases forms are better suited for data + entry: + + + + + A table can contain too many columns to display them on your + screen. A form can display such a data using multiple rows. + + + + + A form allows to visually split data fields + into logical groups, thus increasing readability. Labels with + additional information can be inserted to give users more hints + on how to use the form or what given data fields mean. + + + + + Command buttons can be used within forms for commonly used commands + so users can use forms in a similar way as a standalone applications they + know. + + + + In data sheet view displaying multi-row data text + fields or images + is as easy as within forms. + + + + + + + Working with form design + As with table or query design, you are able to use Data View + and Design View. Form designing is performed in + Design View. We will often refer to the form design window as to + Form Designer. + + + + To create a new empty form, select + Insert + Form + from the Menubar. Optionally, you can use + + New Form + command from drop-down button on the Project Navigator's + toolbar or Create Object: Form command from the context menu. + + + + A new frame will appear, you can resize the form by moving the + borders. The form is covered with a grid which simplifies + accurate positioning of the widgets. + + + + + As with table design, Form Designer provides + Property pane. To save some space on the screen, + the pane has three tabs related to the currently + selected form: + + + + The Properties tab + + Contains a list of properties for the currently selected widget. + + + + + + The Data source tab + + + + Contains properties related specifically to the data source + of the currently selected widget or the form itself. + + + + + + + The Widgets tab + + + + Contains a hierarchy of all widgets of the form. The list simplifies + widgets lookup by name and navigation between them. + + + + + + There is information about currently selected widget's name and type displayed + on the first and second tab. + + Additional toolbars are also available: + + + + The Widgets toolbar used for inserting new widgets + into the form + + + + + The Format toolbar used to format form's elements (⪚ + adjusting widget's size, grouping). Formatting commands are also available + in the Format menu. More about these commands can be found + in . + + + + + + + + Using the <guilabel>Widgets</guilabel> tab + + The Widgets tab in the Property pane provides + a list of form widgets and their hierarchy. Each widget is presented + within the hierarchy beside other widgets being on the same level + (the same parent container). Child widgets (inside containers) are + presented using indented names. + + + + Each widget has displayed its name and type. The type has also an icon + displayed - the same as the one displayed on the toolbar used while + form designing is performed. + + + + + + Changing the current selection on the list causes appropriate selection + on the designed form. This allows for easier widget lookup by name and + easier navigation. For example, it is possible to select a widget by + name, and then switch to the Properties tab to change the + widget's properties. + + + + Keeping the Ctrl key pressed while an item on the + widgets list is being selected allows to select multiple widgets at a time. + Keeping the Shift key pressed allows to select entire lists + of widgets. + + + + + + Giving widgets reasonable names can be useful but is not mandatory. Note + that widget's name is a property that is not visible to the user of your form. + Users will only see a widget text, provided by Text property + or similar. + + + + + Inserting widgets - text fields + + Let's create a form providing information about persons, i.e. a form connected + it with Persons table. + + + If the form being designed should present data obtained from the database, + you need to place appropriate fields + on it. To do this, use the buttons on the Widgets toolbar. Each button corresponds to a single widget type. + + + + + Click + Text Box button on the Widgets toolbar. + + + + + Click on the form surface with the left mouse + button. A new text box widget will be placed in the point where you clicked. + Before you release you can drag your mouse to specify a desired size for the widget. + + + + + If needed, move the inserted widget using drag & drop to a desired + position. You can resize the widget afterwards by dragging one of the + small boxes appearing near its corners. Note that the boxes are only + visible when the widget is selected. If you select another widget or the + form surface, the boxes disappear. + + + + Click the Text Box toolbar button again and click + on the form surface to insert another widget. Repeat this action once + again until you get three text boxes inserted in your form. For sake of + simplicity we will limit ourselves to three data + fields. + + + + + + + + There is a context menu available in form's design mode, activated by a + right mouse button click the desired widget + or the form's surface. The menu offers commands like + Cut, + Copy, + Paste, + Delete + and other, more complex. Many of the commands are also provided in the + Menubar, usually Edit. + Keyboard shortcuts are also available for these commands. Some of the + commands are only available for certain types of widgets. + + + + + The commands + Cut, + Copy and + Paste + makes it possible to move or copy widgets between forms, even between separate + database projects. + + + + + Holding the Ctrl key down while clicking a widget allows to select + multiple widgets. + + + + + Instead of using + Copy + and + Paste + commands, to duplicate a widget within the same form you can hold down the + Ctrl key while moving the widget. After the Ctrl + key is released, the dragged widget will not be moved but copied in the new location. + + + + + + + + Assigning data sources + + The fields you inserted + have no data source assigned yet, + so these are not able to display information from the database. To assign data + source, use the + Data Source tab of the Property pane. + + + The very first step is to specify the form's data source, + i.e. a place the displayed data will be fetched from. As mentioned above, you + will use table persons as a + data source + for your new form. + + + + Click on the form's surface, as you will alter its properties. + + + + Switch to the + Data Source tab and enter persons + table name in the Form's data source drop down list. + Alternatively, you can select this name from the drop down list. + + + + + + You have assigned form's data source. Now you need to do specify + widget's data source. + + + + Click the first text field widget at the top of the form. + + + + In the Data Source + tab of the property pane enter field name name in the + Widget's data source drop down list. Alternatively, you can select + this name from the drop down list. + + + + + Click on next text field widget and enter surname as the data source. + + + + Enter data sources for street, house_number + and city text fields + in a similar way. + + + + + You can now save the form's design (this is not mandatory to test the + form in action). To save, click the + + Save object changes toolbar button or use the + CtrlS + File + Save + menu command. Upon saving you will be asked for entering the form's name. Enter + Persons as caption and click the OK + button. The form's name will be filled automatically. + + + This is the right moment for testing your form. Click the + Switch to data view toolbar button. Unless you made a + mistake while entering data sources, you should see + form's fields filled + with data from the persons table. + + + + + + + If you want to remove widget's data source + assignment for a form widget, you can use + Clear widget's data source button near + the Widet's data source drop down list. Similarly, you can use the + + Clear form's data source button near the + Form's data source drop down list. + + + + + Use the + Go to selected form's data source button to select + appropriate table or query in the Project Navigator, + so you can quickly open a table or query being the + data source + of the form. + + + + + + + + + Inserting text labels + + To make it easier for the form's user to identify the meaning of every field + widget, these should have added text labels with appropriate titles. To + create text labels the + Label widget is used. + + + Insert three text label widgets onto the form, placing them on the left + side of the text fields (or on the right hand if your operating system + uses right-to-left layout). On inserting a new label, a text cursor + appears at the location where you can enter the desired title. Enter consecutively: + Name, Surname and Street. Additionally, + on the top of the form insert another label displaying name of the form, + i.e. Persons. Enlarge this label's size and and increase the font size using + + FormatFont... + + menu command. + + + + + + Actions + + An Action is a single activity isolated in the application, + available for the user to execute. It can also be executed automatically as a + reaction for a given event (⪚ after opening a form). + + + + Assigning actions to form buttons + + Many actions can be assigned to form button. The assigned action is executed + after button is clicked. + + To assign action: + + + Switch to form's Design view if you have not done yet. + + + + Select the existing button widget by clicking on it or put a new button + widget onto the form. If you inserted a new button, enter its title and + press Enter key. + + + + + Click the button widget with the right mouse + button to display the context menu. + + + + + From the context menu select + + Assign action... command. + + + + + An Assigning Action to Command Button dialog window + will appear presenting a list of available actions. One of the actions + is selected if the widget already has action assigned. Otherwise the + Action type drop down list has the No type + item selected. + + + + + From the Action type drop down list select + Application item. Available application-wide actions + will be listed. + + + + Select one of the actions on the list (⪚ Delete Row). + + + + Click the OK button or press + the Enter key to + accept your selection. + + + + + + After switching to the form's data view you can try + whether the action works. For example, if you assigned Delete Row + action, clicking the button, the current database row will be deleted, similarly + to executing CtrlDeleteEditDelete Row + menu command (depending on your settings you may be asked to confirm the removal). + + + + + + + To remove an action assignment, select No type item from + the Action type drop down list of the + Assigning Action to Command Button dialog window. + + + + + Actions only work in the form's data view. Not every + action's assignment is reasonable. For example, the + Font... action is available in data view, but + only if you have a widget selected in the Design view. If you + make changes to the font settings the changes are applied to the text + of that selected widget. + + + + + + + + + Widget layouts + + In most cases form widgets should be conveniently arranged and aligned. + Positioning, aligning and resizing widgets by hand is not easy and these + parameters are not adjusted when the user resizes the form. In fact the + situation is even worse because you cannot assume a given form requires + a given space because users have different font sizes and display resolutions. + + + + Using special tool called widget layouts can help to automatically lay + out the form widgets. Widget layout is an action of grouping two or more + widgets so these are well positioned and have appropriate sizes. + + + Using layout in a form improves alignment. Moreover, its space is + better used. Text fields are closer to each other, spacing is constant. + + + There are two methods to create widget layout. + + + + Select two or more widgets that should be placed in a common layout, + and select one of the layout types from the context menu item + + Layout Widgets + . + + + + + Click a container widget (or a form surface itself), where widgets are + inserted and select one of the layout types from the context menu item + Layout Widgets + . + All widgets existing within the container or within the + form, being on the same level will be put into a single common layout. + + + + + In each of these cases you can also use + FormatLayout Widgets + menu. + + + + Widget layout is presented in the design view using a blue, green or + red box drawn with a broken line. This line is displayed only in the + form's design view. + + + Besides the grid type, there are other widget layout types. + + + vertical + + Vertical widget layout + + + + + horizontal + + Horizontal widget layout + + + + + + + + Springs in widget layouts + + A spring in widget layouts is a special, invisible element allowing + to adjust widget's position and size within layouts. Such a spring + stretches or squeezes a widget on the right, top, bottom or left hand, + so it can have desired size and position. + + To use a spring: + + + + Select spring icon on the + Widgets toolbar. + + + + Click on a selected point of the form to insert the spring. + + + + + To make springs work you need to create a global widget layout, i.e. a + layout for the form itself. Then, springs can use edges of the form as + a boundary for expanding. + + + + + + Removing widget layouts + + To remove widget layout without removing widgets, perform one of + these actions: + + + + + Click with the right mouse button on + the layout's border and select Break Layout + command from the context menu. + + + + + Click with the left mouse button on + the layout's border and select + FormatBreak Layout + menu command. + + + + + + Removing widget layout using the Break Layout + command will not remove widgets contained in the layout. If you want to + remove the widgets as well, just select the layout by clicking on its + border and press Delete key or use + Edit + Delete + menu command or context menu command. + + + + + + Size policies for widgets within a layout + + Instead of setting a fixed size for your widgets, in &kexi; you can + choose between various widget's size policies. A size policy + is a flexible strategy for controlling how a widget is stretched (or shrunk) + depending on other neighbouring widgets and space available within the form. + + + After putting widgets into a layout, typically each widget + gets a proportional (Preferred) size policy. These widgets + will be automatically resized with preferred settings, depending on their + type and size of the entire layout itself. For example, three buttons put + into the horizontal layout will be resized to fit their visible text. + + For each widget inserted into the form, there are settings for size policy + available in the Property Editor. The settings are presented + as a group of properties called Size Policy. + + + This group of properties contains: + + + Horizontal Size Policy + + defining horizontal size of the widget, + + + + Vertical Size Policy + + defining vertical size of the widget, + + + + Horizontal Stretch + + + defining strength of activity of the + Horizontal Size Policy, + + + + + Vertical Stretch + + + defining strength of activity of the + Vertical Size Policy + + + + + + + Values of size policies + + The following values are available in the drop down list for + Horizontal Size Policy and + Vertical Size Policy properties visible + in the Property Editor: + + + + Fixed + + + this value means that the widget cannot be automatically resized; it + should maintain the constant size defined at design time (width or height), + + + + + Minimum + + + this value means that the original size of the widget is set as minimal + allowed, it is sufficient and there is no need for expanding the widget, + but the widget will be expanded if needed. This type of policy can be used + to force the widget to be expanded to the whole width or height, especially + if you set a stretch value greater than 0. + + + + + + Maximum + + + this value means that the original size of the widget is set as maximum + allowed and can be decreased without breaking the widget's usability + and readability if other widgets need more space, + + + + + Preferred + + + this value means that the original size of the widget is the best and + preferred; the widget can be shrunk or expanded however and it + will stay readable, + + + + + + Expanding + + + this value means that the original size of the widget is reasonable but + the widget can be also shrunk; it can be expanded as well to take + as much space as possible, + + + + + Minimum Expanding + + + this value means that the original size of the widget is allowed; it + can be expanded to take as much space as possible, + + + + + Ignored + + + this value means that the original size of the widget is ignored; the + widget can be expanded to take as much space as possible but other + widgets usually will not allow for that + + + + + + Different widget types have various default size policies; for example, + button widgets have default size policy set to Minimum (in both directions), + while text field widgets have vertical size policy set to Fixed. + + + The most frequently used size policies are Preferred, + Minimum and Maximum. + + + + + Vertical and horizontal stretch + + The Vertical Stretch and Horizontal Stretch + properties accept integer values greater than or equal to 0. These properties allow to fine-tune the + behavior of size policies. The default value for the properties is 0. + A higher value of the stretch means that the widget will be expanded + more than widgets for which a lower stretch value is set. + + + + + + + + Setting widgets size and position by hand + In case when your form has no main layout set for auto-positioning and + auto-resizing its widgets, you will probably want to modify the position and size of widgets so the form can look cleaner and be easier to use. The &kexi; form + designer simplifies this task by offering the following groups of commands: + + + + + Adjusting sizes of selected widgets. The commands are available in the + FormatAdjust Widgets Size + submenu of the menubar and in the + Adjust Widgets Size + submenu of the context menu. The toolbar's drop down + button Adjust Widgets Size + is also available. + + + + To Fit + + + The size of the selected widgets will be altered so each widget will be + resized to its preferred size and its contents; for example, a text + label's size will be changed to fit its text. The position of the widgets + will not be changed. + + + + + To Grid + + + The size of the selected widgets will be altered so each widget's corner + will be placed on the form's (or other container's) grid point. + The widget's position can be slightly altered. + + + + + To Shortest + + + The height of the selected widgets will be altered so that each of them + will have the same height as the shortest one. The position of the widgets + will not be changed. + + + + + To Tallest + + + The height of the selected widgets will be altered so that each of them + will have the same height as the tallest one. The position of the widgets + will not be changed. + + + + + To Narrowest + + + The width of the selected widgets will be altered so that each of them + will have the same height as the narrowest one. The position of the + widgets will not be changed. + + + + + To Widest + + + The width of the selected widgets will be altered so that each of them + will have the same height as the widest one. The position of the widgets + will not be changed. + + + + + + + + Aligning positions of the selected widgets. The commands are available + in the + FormatAlign Widgets Position + submenu of the menubar and in the + Align Widgets Position + submenu of the context menu. The toolbar's drop + down button + Align Widgets Position is also available. + + + + To Left + + + All the selected widgets' left positions will be moved to the + position of the leftmost widget's left edge. + + + + + To Right + + + All the selected widgets' right positions will be moved to the + position of the rightmost widget's right edge. + + + + + To Top + + + All the selected widgets' top positions will be moved to the + position of the uppermost widget's upper edge. + + + + + To Bottom + + + All the selected widgets' bottom positions will be moved to the + position of the bottommost widget's bottom edge. + + + + + To Grid + + + All the selected widgets' top-left corners will be moved so that + they are positioned in the nearest grid point. + + + + + None of the above commands resizes the widgets. + + + + There are also additional commands available: + Bring Widget to Front + (i.e. above all other widgets) and + Send Widget to Back (i.e. below all + other widgets). These two commands are rarely used, as it is not + common to place one widget on top of an other (except when a + container widget contains other widget inside). Also note that clicking + a widget with a mouse button is enough to bring the widget to front. + + + + + Setting the tab order + + A widget's focus determines that widget's activity available using keyboard. + Focus is related to widgets displayed in the form's data view. Exactly one + form widget can have focus at the same time. The most frequent use of focus + is text entry (when a given text field is active, i.e. it is focused). + An other example is a button widget - when focused, it is possible to + press it using the Enter + or Space key instead of a mouse button. + + + There are a few methods of making the widgets active (moving the focus + to the widget): clicking with a mouse button, rotating the mouse wheel + over the widget, or using the Tab + key. The latter method is often used because of its speed and convenience + for users. Availability of the focusing methods is controlled by + Focus Policy property of a given widget. + + + There is a relationship between focusing (activating) widgets using Tab + key and tab order setting of a form. After pressing the Tab key, the + next widget should be focused, so the form should know about the tab order. + + To alter tab order for a form's widget: + + + Switch to design view of the form. + + + + Execute EditEdit Tab Order... + menu command. The Edit Tab Order dialog will appear with settings for this form. + + + + The window contains a list with two columns: the first column displays + widget names, the second - types of the widgets. To make it easier to + recognize meaning of the names and types for the user, icons related + to the types are also displayed. The list contains only widgets having + focus policy allowing to use the Tab key. The window + allows you to change the tab order or set the automatic tab order. + + + + To change tab order, either: + + + + Click a selected widget name in the widgets list and drag it + to a desired position (up or down) using the mouse. + + + + + Click a selected widget name on the widgets list and use + Move Up or Move Down + buttons, to move the widgets to a desired position. + + + + + Click the Handle tab order automatically check box to set the + automatic tab order for the form. If this option has been switched + on, any changes made to the list of widgets by hand are not taken + into account - &kexi; will be handling the tab orders on its own. + The automatic ordering means that the top-left widget will be focused + first (or the top-right if your operating system uses right-to-left + layout), and the order comes from the left to right (from the right + to left, respectively) and from the top to bottom. + + + + + + + + Click the OK button to accept the changes or Cancel button to dismiss + the changes. + + + + + -- cgit v1.2.1