## 5.4. Designing Forms

### 5.4.1. Most important terms

- Form - a window provided to easy data entry and presentation on the computer screen.
- Form 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.
- Form field - direct equivalent of 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 bound table or query column (after accepting the change).
- Form design - tasks you are performing to define 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, e.g. text box or 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, e.g. 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 behaviour.
  - Other widgets allowing to enrich form's appearance, e.g. "line widget" can visually separate two form areas.

- Container widget - a widget taht can contain other widgets within its area. For example, frame widget or tab widget are containers. Form's surface itself is a container as well. Command button cannot be called as container because it is not possible to insert a widget inside it. In more complex cases, container widget can inserted inside a container, so nesting is possible.
  Example container widgets

### 5.4.2. 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:

- Table can contain too many columns to display them on your screen. Form can display such data using multiple rows.
- Form allows to visually split data fields into logical groups, thus increasing readability. Labels with additional infromation can be inserted to give users more hints 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 standalone applications they know.
- In data sheet view displaying multi-row data text fields or images is as easy as within forms.

### 5.4.3. 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 ofter refer to form design window as to Form Designer.

1. 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.
2. A new window with empty rectangular from surface will appear. Beyond the surface outer area is placed, separated from the surface using borders. You can move the borders to resize the form surface. THe surface is covered with a grid painted using dots which simplifies accurate widgets positioning.
   A window with design of a new form

As with table design, Form Designer provides property pane. To save some space on the screen, the pane has been splitted with three tabs related to the currently selected form:

1. Property tab containing a list of properties for the currently selected widgets
2. Data source tab containing properties related specifically to data source of the curently selected widget or the form itself.
3. Widgets tab containing 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:

- Widgets toolbar used for inserting new widgets into the form
- Format toolbar used to format form's elements (e.g. adjusting widget's size, groupping). Formatting commands are also available in Format menu. More about these commands can be found in appendix A.6. Format Menu.

___________

### 5.4.4. Inserting fields

Let's create a form providing infromation 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 Widgets toolbar containing a set of toggleable buttons. Each button corresponds with a single widget type.

1. Click Text Box button on the Widgets toolbar.
2. Click on the form surface with &LMB;. New text box widget will be palced in the place when you clicked. Before you release &LMB; you can drag your mouse to specify a desred size for the widget.
3. 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 deselect the widget by clicking another widget or the form surface, the boxes disappear.
4. Click 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 yourto form. For sake of simplicity we will limit ourselves to three data fields.

### 5.4.5. Assigning data sources

******TODO update polish docs for data source pane, first*********** Wstawione przez Ciebie pola formularza nie mają jeszcze przypisanych źródeł danych, zatem nie są w stanie wyświetlić informacji z bazy danych. Do ustalania źródeł danych używa się panelu właściwości.

Pierwszą czynnością będzie ustalenie źródła danych formularza, czyli tabeli z której mają być pobierane dane dostępne na formularzu. Jak już wspomnieliśmy, korzystamy z tabeli osoby.

1. Kliknij na powierzchni formularza, tak aby w panelu właściwości pojawiły się jego właściwości.
2. W panelu właściwości znajdź właściwość Źródło danych. Umieść tam kursor i wpisz nazwę osoby

Formularz ma już przypisane źródło danych. Teraz kolej na źródła danych dla pól tekstowych.

1. Kliknij pojedyncze pole tekstowe. W panelu właściwości pojawią się jego właściwości.
2. W panelu właściwości znajdź właściwość Źródło danych. Umieść tam kursor i wpisz nazwę pola imie.
   Wpisywanie źródła danych pola ,,imie''
3. Kliknij następne pole tekstowe i w podobny sposób wpisz nazwę nazwisko jako jego źródło danych.
4. Wpisz nazwę ulica dla ostatniego pola tekstowego.

Mimo, że nie jest to konieczne do przetestowania formularza, możesz teraz zachować projekt formularza w bazie danych. Kliknij przycisk Zapisz zmiany obiektu znajdujący się na pasku narzędzi lub wykonaj pole Zapisz z menu Plik. Zostaniesz zapytany o tytuł formularza. Wpisz tytuł Osoby i kliknij przycisk OK - nazwa uzupełni się samoczynnie.

Teraz jest odpowiedni moment na przetestowanie Twojego formularza. Kliknij przycisk Przełącz do widoku danych na pasku narzędzi. Jeśli nie popełniłeś błędu przy wpisywaniu źródeł danych, pola formularza zostaną wypełnione danymi z tabeli osoby.
Formularz w widoku danych po wstawieniu pól tekstowych i źródeł danych

### 5.4.6. Wstawianie etykiet tekstowych

Aby użytkownik formularza był w stanie określić przeznaczenie każdego pola, powinny one mieć dołączone etykiety z tytułami pól. Do wykonania etykiet używa się widżetu etykiety tekstowej.

Wstaw trzy etykiety tekstowe do formularza, umieszczając je po lewych stronach pól tekstowych. Przy wstawianiu każdej nowej etykiety pojawia się wewnątrz niej kursor, za pomocą którego możesz wpisać żądany tytuł, czyli kolejno: imię, nazwisko oraz ulica. Dodatkowo, na górze formularza wstaw etykietę tekstową z jego nazwą, czyli ,,Osoby''. Powiększ czcionkę w tej etykiecie za pomocą polecenia Czcionka w menu Format.

Gotowy formularz po dodaniu etykiet tekstowych

### 5.4.7. Akcje

Akcja jest pojedynczą czynnością wyodrębnioną w aplikacji, która może być wykonana przez użytkownika lub uruchomiona automatycznie w wyniku jakiegoś zdarzenia.

#### Przypisywanie akcji do przycisków formularza

Większość akcji można przypisać do przycisku formularza tak, by była wykonywana po jego kliknięciu. Aby to zrobić:

1. Na powierzchnię formularza wstaw widżet przycisku.
2. W widoku projektu formularza zaznacz przycisk poprzez jego kliknięcie.
3. Kliknij przycisk prawym klawiszem myszy, aby pokazało się menu kontekstowe.
4. Wybierz polecenie Przypisz akcję.
5. Pojawi się okno z listą akcji. Jedna z nich jest zaznaczona, o ile wskazany przycisk miał już przypisaną jakąś akcję.
6. Zaznacz jedną z akcji na liście (np. ,,Usuń wiersz'') lub linię <brak akcji>, jeśli nie chcesz przypisywać żadnej akcji.
7. Kliknij przycisk OK lub naciśnij klawisz Enter.

Przypisywanie akcji ,,Usuń wiersz'' do przycisku

Po przełączeniu sie do widoku danych formularza możesz sprawdzić działanie akcji, którą przypisałeś do przycisku. Jeśli np. przypisałeś akcję ,,Usuń wiersz'', po naciśnieciu przycisku zostaniesz poproszony o potwierdzenie usunięcia wiersza, zupełnie tak samo, jakbyś wywołał polecenie Edycja > Usuń wiersz.

Uwaga: zauważ, że nie każda akcja ma sens, gdy ją przypiszemy do przycisku, np. akcja Czcionka... jest nie dostępna w widoku danych formularza, więc jeśli ją przypiszemy, klikanie w przycisk nie będzie miało żadnego efektu.

### 5.4.8. Układy widżetów

W większości przypadków widżety na formularzu muszą być w jakiś porozmieszczane i wyrównane. Zwykłe ręczne rozmieszczenie widżetów sprawia kłopot jeśli użytkownik zmieni rozmiar formularza. W rzeczywistości sytuacja komplikuje się jeszcze bardziej, ponieważ nie można założyć, że formularz ma dany rozmiar, gdyż użytkownicy posiadają różne monitory oraz rozdzielczości ekranu.

Poniższy przykład prezentuje formularz w któym pola tekstowe i etykiety zostały rozmieszczone ręcznie. Niektóre z nich nie mieszczą się w oknie formularza.
Przykładowy formularz z nie mieszczącymi się widżetami

Zastowosanie układu w tym samym formularzu poprawia sytuację. Co więcej, miejsce jest lepiej zagospodarowane. Pola tekstowe są bliżej siebie, w równych odstępach.
Przykładowy formularz z układem widżetów

W tej sytuacji przychodzi z pomocą specjalna funkcja zwana układami widżetów. Układ widżetów to czynność zgrupowania dwóch lub większej liczby widżetów, tak by znajdowały się na uporządkownych pozycjach i miały ustalone rozmiary.

Istnieją dwa sposoby na wykonanie układu widżetów.

- Zaznacz dwa lub więcej widżetów, które mają wchodzić w skład układu, po czym wybierz jednen ze typów układu w menu Ułóż widżety.
- Kliknij widżet kontenera, po czym wybierz jednen ze typów układu w menu Ułóż widżety. Wszystkie widżety znajdujące się wewnątrz wskazanego widżetu kontenera zostaną umieszczone we wspólnym układzie.

Zaznaczanie widżetów, z których zostanie wykonany układ
Cztery widżety zaznaczone
Użycie menu kontekstowego do układania widżetów w formie siatki

Aby utworzyć układ możesz użyć menu Format > Ułóż widżety lub kliknąć prawym przyciskiem na zaznaczonych widżetach i użyć podmenu Ułóż widżety. Układ widżetów jest reprezentowany w widoku projektu przez niebieski, zielony lub czerwony prostokąt narysowany linią przerywaną.

Widżety ułożone w formie siatki

Oprócz układu w siatce, istnieją inne układy widżetów.

- pionowy oraz poziomy
  Pionowy układ widżetów
  Poziomy układ widżetów
- podzial TODO------------

#### Sprężyny w układach widżetów

Sprężyna jest specjalnym, niewidocznym elementem pozwalającym dostosowywać pozycję widżetów wewnątrz układów. Wprężyna ,,dopycha'' widżet z boku, z góry lub z dołu, tak aby lepiej ustalić jego pozycję i rozmiar.

Aby użyć sprężyny:

1. wybierz ikonę na pasku narzedziownym Widżety;
2. kliknij w miejscu formularza, w którym chcesz ją wstawić.

Na poniższym przykładzie sprężyna została wstawiona z lewej strony etykiety tekstowej ,,Osoby'', tak aby została ona wyświetlona po prawej stronie formularza. Następnie sprężyna z etykietą została połączona w układzie poziomym.
Poziomy układ sprężyny i etykiety tekstowej

#### Zaawansowane układy widżetów

Układy widżetów można łączyć, czyli inaczej: zagnieżdżać. Można np. część widżetów połączyć za pomocą układu poziomego, po czym do całości formularza zastosować układ siatkowy. Na poniższym przykładzie możesz zobaczyć połączenie dwóch układów:

1. układu poziomego ze sprężyną, omówionego w poprzedniej sekcji
2. układu siatkowego grupującego widżety na całej powierzchni formularza

Dwa układy widżetów: układ poziomy wewnątrz siatkowego

Po otwarciu tak zaprojektowanego formularza w widoku danych, możesz sprawdzić (poprzez zmianę rozmiaru okna formularza), że:

- etykieta tekstowa ,,Osoby'', dzięki użyciu sprężyny jest stale wyrównywana do prawego brzegu formularza
- widżety pól tekstowych zajmują całą szerokość formularza dzięki zastosowaniu układu siatkowego
- wszystkie widżety formularza są ,,dopchnięte'' maksymalnie do góry, dzięki użyciu sprężyny u dołu formularza

Widok danych dla formularza z dwoma układami

#### Usuwanie układów widżetów

Aby usunąć układ widżetów bez usuwania samych widżetów, wykonaj jedną z dwóch czynności:

- kliknij prawym przyciskiem myszy na obramowaniu układu i wybierz polecenie Przerwij ułożenie.
- kliknij lewym przyciskiem myszy na obramowaniu układu i wybierz polecenie Przerwij ułożenie z menu Format

#### Typy rozmiarów w układach widżetów

Temat zostanie wprowadzony w uaktualnieniu Kexi &ver;.

### 5.4.9. Ręczne ustalanie rozmiarów i pozycji widżetów

### 5.4.10. Ustalanie kolejności tabulacji

Temat zostanie wprowadzony w uaktualnieniu Kexi &ver;.