5.4. Designing Forms

5.4.1. Most important terms

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:

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:

___________

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.


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.

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:


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:

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;.