2
<!DOCTYPE chapter PUBLIC "-//KDE//DTD DocBook XML V4.2-Based Variant V1.1//EN" "dtd/kdex.dtd">
6
<sect1 id="designing-forms">
10
<sect2 id="most-important-terms">
12
>Найважливіші терміни</title>
14
<glossentry id="gloss-form">
19
>Вікно, призначене для простого введення даних і показу цих даних на екрані комп’ютера. </para>
22
<glossentry id="gloss-form-data-source">
24
>Джерело даних форми:</glossterm>
27
>Таблиця бази даних або запит, у яких містяться дані, показані на формі. Джерело даних потрібне, оскільки самі форми є лише <emphasis
28
>інструментами</emphasis
29
> для показу і введення даних, джерелом же даних є таблиці і запити. У нових щойно створених форм немає призначених джерел даних, отже у них не буде показано ніяких даних з вашої бази даних аж доти, доки ви не пов’яжете з формою певне джерело даних. </para>
32
<glossentry id="gloss-form-field">
34
>Поле форми</glossterm>
37
>Прямий аналог стовпчика у таблиці або запиті. Найчастіше поля використовують для показу тексту і чисел. Введення нового значення або зміна існуючого значення такого поля призводить до зміни у відповідному стовпчику таблиці або запиту (після підтвердження зміни). </para>
40
<glossentry id="gloss-form-design">
42
>Компонування форми</glossterm>
45
>Виконане вами визначення вигляду і функціональних можливостей форми. Для того, щоб виконати таке визначення, вам слід вказати <glossterm linkend="gloss-form-data-source"
46
>джерело даних</glossterm
47
>, вставити <glossterm linkend="gloss-form-field"
48
>поля форми</glossterm
49
> різноманітних типів і певним чином розташувати ці поля на формі. </para>
52
<glossentry id="gloss-form-widget">
54
>Віджет форми</glossterm>
57
>Елемент форми. Основними типами віджетів є:</para>
61
>Віджети, призначені для показу інформації, наприклад, поле для показу тексту або зображення. Кожен з віджетів такого типу можна <emphasis
63
> з певним полем джерела даних (стовпчиком таблиці або запиту). Тому такі віджети скорочено називаються <glossterm linkend="gloss-form-field"
64
>полями форми</glossterm
69
>Віджети, які можуть виконувати вказану для них дію, наприклад, кнопка, за допомогою якої можна закрити поточну форму. У інших програмах подібні віджети іноді називають <firstterm
70
>керуванням формою</firstterm
71
>, оскільки такі віджети можуть виконувати заздалегідь визначену дію з <emphasis
73
> поведінкою вашої програм для роботи з базами даних. </para>
77
>За допомогою інших віджетів можна збагатити вигляд форми, наприклад, «віджет лінії» може візуально відокремити дві області форми. </para>
82
<glossentry id="gloss-container-widget">
84
>Віджет контейнера</glossterm>
87
>Віджет, який може <emphasis
89
> інші віджети у відведеній для цього віджета ділянці. Наприклад, віджет блоку або віджет вкладки є контейнерами. Сама площа форми є також контейнером. Кнопку команди не можна вважати контейнером, оскільки на неї не можна додати віджета. У складніших випадках віджети контейнерів може бути додано у інші контейнери, тобто можливе вкладення контейнерів. </para>
93
>Example container widgets</screeninfo>
96
<imagedata fileref="img/05_04_01_widget_containers.png" format="PNG"/>
100
>Example container widgets</phrase>
110
<sect2 id="forms-versus-tables">
112
>Порівняння форм з таблицями</title>
114
>У розділі 5.2 ми навчилися вводити дані безпосередньо до таблиць за допомогою панелі перегляду аркуша даних. Але здебільшого форми є придатнішими для введення даних: </para>
118
>У таблиці може бути багато стовпчиків: показ всіх цих стовпчиків на екрані буде неможливим. У формі такі дані може бути показано за допомогою декількох рядків. </para>
122
>За допомогою форми можна візуально поділити <glossterm linkend="gloss-form-field"
124
> даних на логічні групи з метою полегшення прийняття. На форму можна додати мітки з додатковими відомостями, які нададуть користувачам змогу легше зрозуміти способи користування формою та призначення <glossterm linkend="gloss-form-field"
130
>Кнопками команд форм можна скористатися для виконання найпоширеніших команд. Користувачі таких форм зможуть працювати з ними як зі знайомими окремими програмами. </para>
134
>На панелі перегляду аркуша даних показати рядки даних з текстом <glossterm linkend="gloss-form-field"
136
> або зображення так само просто, як і на формах. </para>
143
>Робота з компонуванням форм</title>
145
>Під час розробки таблиці або запиту ви зможете користуватися двома режимами перегляду: <interface
146
>Перегляд даних</interface
148
>Перегляд дизайну</interface
149
>. Компонування форми виконується у режимі <interface
150
>Перегляду дизайну</interface
151
>. Ми будемо називати вікно дизайну форми <interface
152
>Дизайнером форми</interface
157
>Щоб створити порожню форму, скористайтеся пунктом меню <menuchoice
163
>. Якщо ви хочете, ви можете скористатися пунктом <menuchoice
165
>Створити форму</guimenuitem
167
> у спадному списку панелі інструментів <interface
168
>Навігатора проектом</interface
169
> або пунктом <menuchoice
171
>Створити об’єкт: Форма</guimenuitem
173
> контекстного меню. </para>
177
>Програма відкриє нову панель. Змінити розміри форми можна за допомогою пересування меж панелі. Форму буде вкрито сіткою для полегшення точного розташування віджетів. </para>
180
>A window with design of a new form</screeninfo>
183
<imagedata fileref="img/05_04_03_new_empty_form.png" format="PNG"/>
187
>A window with design of a new form</phrase>
195
>Так само, як і у компонуванні таблиць, у <interface
196
>Дизайнері форм</interface
197
> передбачено <interface
198
>Панель властивостей</interface
199
>. Для того, щоб зекономити місце на екрані, на панелі буде показано три вкладки, пов’язані з поточною позначеною формою: </para>
204
>Властивості</guilabel
208
>Містить список властивостей для поточного вибраного віджета.</para>
214
>Джерело даних</guilabel
218
>Містить властивості, пов’язані безпосередньо зe <glossterm linkend="gloss-form-data-source"
219
>джерелом даних</glossterm
220
> поточного позначеного віджета або самої форми. </para>
230
>Містить ієрархію всіх віджетів форми. За допомогою списку спрощується пошук віджетів за назвою та навігація між ними. </para>
235
>Буде показано відомості щодо назви і типу поточного позначеного віджета на першій і другій вкладці. </para>
237
>Доступні також додаткові панелі інструментів:</para>
241
>Панель інструментів <guilabel
243
> призначено для додавання нових віджетів на форму. </para>
247
>Панель інструментів <guilabel
249
> призначено для форматування елементів форми (наприклад, зміни розмірів віджетів, групування). Доступ до команд форматування можна отримати за допомогою меню <guimenu
251
>. Докладніше про ці команди можна дізнатися з розділу <xref linkend="formatmenu"/>. </para>
256
<sect2 id="using-the-widgets-tab">
258
>Користування вкладкою <guilabel
262
>На вкладці <guilabel
265
>панелі «Властивості»</interface
266
> буде показано список віджетів форми та їх ієрархічну підпорядкованість. Всі віджети у ієрархії буде показано за рівнями (віджети одного рівня буде показано у їх спільному батьківському контейнері). Пункти дочірніх віджетів (віджетів, що містяться у контейнерах) буде показано з відступом. </para>
268
>In the picture below, the form (a container) contains two widgets:
276
> (being a container itself) contains two check box
286
<imagedata fileref="img/05_04_04_widgets_tab.png" format="PNG"/>
298
>Для кожного з віджетів буде показано назву і тип. Для позначення типу буде також використано піктограм (ту саму, яку було показано на кнопці панелі інструментів, яку ви натискали, щоб додати відповідний віджет під час компонування). </para>
304
>Зміна поточного позначеного пункту у списку призводить до позначення відповідного елемента на формі. Така взаємодія полегшує пошук віджетів за назвою і спрощує навігацію формою. Наприклад, можна обрати віджет за назвою, а потім перейти на вкладку <guilabel
305
>Властивості</guilabel
306
>, щоб змінити властивості віджета.</para>
310
>Утримування натиснутою клавіші &Ctrl; під час позначення пунктів у списку віджетів надасть вам змогу позначити декілька віджетів одночасно. Якщо утримувати натиснутою клавішу &Shift;, можна позначати послідовності віджетів у списку.</para>
314
When widget is inserted, it is recommended to give it a reasonable name.
315
For example, <guilabel
317
> check box widget has been named specifically
318
for its meaning, using the <guilabel
319
>Properties</guilabel
323
> property has been used to do that). Such change
324
can make it easier to find a widget within the list.
328
>Naming the widget as <guilabel
333
<imagedata fileref="img/05_04_04_renaming_widgets.png" format="PNG"/>
337
>Naming the widget as <guilabel
348
>Надання віджетам змістовних назв є корисним, але не обов’язковим кроком. Зауважте, що назва віджета є властивістю, яку не буде показано користувачеві вашої форми. Користувачі бачитимуть лише текст віджета, який визначається властивістю <varname
350
> або іншою подібною властивістю. </para>
353
<sect2 id="inserting-widgets-text-fields">
355
>Додавання віджетів — текстові поля</title>
357
>Давайте створимо форму з відомостями щодо осіб, тобто форму, пов’язану з таблицею <literal
361
>Якщо на формі, яку ви розробляєте, має бути показано дані, отримані з бази даних, вам слід розташувати на цій формі відповідні <glossterm linkend="gloss-form-field"
363
>. Для подібного розташування слід скористатися кнопками панелі інструментів <guilabel
365
>. Кожна з кнопок відповідає певному типу віджета. </para>
369
>Натисніть кнопку <guibutton
370
>Текстове поле</guibutton
371
> на панелі інструментів <guilabel
377
>Наведіть вказівник миші на форму і клацніть <mousebutton
379
> кнопкою миші. У точці, де знаходився вказівник миші, буде розташовано новий віджет поля для введення тексту. Перш ніж відпускати кнопку миші ви можете спробувати перетягти вказівник миші, щоб змінити розміри віджета на бажані. </para>
383
>Якщо потрібно, пересуньте доданий віджет за допомогою перетягування зі скиданням вказівником миші у потрібну позицію. Пізніше ви зможете змінити розміри віджета перетягуванням одного з маленьких квадратиків, розташованих у кутах віджета. Зауважте, що ці квадратики можна буде побачити, лише якщо віджет буде позначено. Якщо ви позначите інший віджет або всю поверхню форми, квадратики буде приховано. </para>
387
>Натисніть кнопку <guibutton
388
>Текстове поле</guibutton
389
> ще раз, а потім наведіть вказівник миші на поверхню форми і клацніть лівою кнопкою миші, щоб вставити ще один віджет. Повторіть цю процедуру ще раз так, щоб на вашій формі опинилося три поля для введення тексту. Для простоти ми обмежимося роботою з трьома <glossterm linkend="gloss-form-field"
398
>У режимі компонування форм передбачено також контекстне меню, доступ до якого можна отримати наведенням вказівника на бажаний віджет або поверхню форми з наступним клацанням <mousebutton
400
> кнопкою миші. У цьому меню ви знайдете команди <guimenuitem
401
>Вирізати</guimenuitem
403
>Копіювати</guimenuitem
405
>Вставити</guimenuitem
407
>Вилучити</guimenuitem
408
> та інші, складніші команди. Доступ до багатьох з цих команд можна отримати також і у меню, зазвичай, меню <guimenuitem
410
>. Крім того, для виконання цих команд передбачено клавіатурні скорочення. Деякими з цих команд можна скористатися лише для віджетів певних типів. </para>
414
>За допомогою пунктів <guimenuitem
415
>Вирізати</guimenuitem
417
>Скопіювати</guimenuitem
419
>Вставити</guimenuitem
420
> можна пересувати або копіювати віджети між формами, навіть між окремими проектами баз даних. </para>
424
>Утримування натиснутою клавіші &Ctrl; під час клацання кнопкою миші надає змогу позначати декілька віджетів одразу. </para>
428
>Окрім використання пунктів меню <guimenuitem
429
>Копіювати</guimenuitem
431
>Вставити</guimenuitem
432
> для дублювання віджета на одній формі, ви можете натиснути і утримувати натиснутою клавішу &Ctrl;, а потім пересунути віджет. Після відпускання клавіші &Ctrl; перетягнутий віджет не буде пересунуто, а скопійовано у нову позицію. </para>
438
<sect2 id="assigning-data-sources">
440
>Визначення джерел даних</title>
442
>Для вставлених вами <glossterm linkend="gloss-form-field"
444
> ще не призначено <emphasis
445
>джерела даних</emphasis
446
>, отже у цих полях не може бути показано даних з бази даних. Щоб призначити джерело даних, скористайтеся вкладкою <guilabel
447
>Джерело даних</guilabel
449
>панелі властивостей</interface
452
>На першому кроці слід вказати <glossterm linkend="gloss-form-data-source"
453
>джерело даних форми</glossterm
454
>, тобто вказати сховище даних звідки слід брати показані дані. Як ми вже раніше згадували, нам слід скористатися таблицею <literal
456
> як <glossterm linkend="gloss-form-data-source"
457
>джерелом даних</glossterm
458
> для нашої нової форми. </para>
462
>Наведіть вказівник миші на вікно форми і клацніть лівою кнопкою миші, так само, як під час зміни його властивостей.</para>
466
>Перемкніться на вкладку <guilabel
467
>Джерело даних</guilabel
468
> і введіть назву таблиці <literal
470
> (особи) у спадний список <guilabel
471
>Джерело даних форми</guilabel
472
>. Крім того, ви можете просто обрати цю назву зі спадного списку. </para>
475
>Entering <glossterm linkend="gloss-form-data-source"
476
>form's data source</glossterm
480
<imagedata fileref="img/05_04_05_entering_form_data_source.png" format="PNG"/>
484
>Entering <glossterm linkend="gloss-form-data-source"
485
>form's data source</glossterm
494
>Отже ми призначили <glossterm linkend="gloss-form-data-source"
495
>джерело даних форми</glossterm
496
>. Тепер нам треба визначити джерело даних віджетів. </para>
500
>Наведіть вказівник миші на перший з віджетів текстових полів у верхній частині форми і клацніть лівою кнопкою миші.</para>
504
>На вкладці <guilabel
505
>Джерело даних</guilabel
506
> панелі властивостей введіть назву поля <varname
508
> (ім’я) у спадному списку <emphasis
509
>Джерело даних віджета</emphasis
510
>. Крім того, ви можете обрати цю назву зі спадного списку. </para>
513
>Entering widget's data source name</screeninfo>
516
<imagedata fileref="img/05_04_05_entering_text_field_data_source.png" format="PNG"/>
520
>Entering widget's data source name</phrase>
528
>Натисніть наступне поле тексту і введіть у поле джерела даних <varname
534
>Введіть джерела даних для текстових <glossterm linkend="gloss-form-field"
539
>house_number</varname
540
> (номер будинку) і <varname
542
> (місто) у подібний же спосіб. </para>
546
>Тепер можна зберегти компонування форми (випробовувати форму у дії не обов’язково). Щоб зберегти компонування, натисніть кнопку панелі інструментів <guilabel
547
>Зберегти зміни у об’єкті</guilabel
548
> або скористайтеся пунктом меню <menuchoice
550
><keycombo action="simul"
558
> Зберегти</guimenuitem
560
>. У процесі зберігання програма попросить вас ввести назву форми. Введіть <literal
562
> у поле підпису і натисніть кнопку <guibutton
564
>. Поле назви форми буде заповнено автоматично. </para>
566
>Настав час перевірити нашу форму у дії. Натисніть кнопку панелі інструментів <guibutton
567
>Перемкнути у режим перегляду даних</guibutton
568
>. Якщо під час введення даних ви не помилилися, ви побачите <glossterm linkend="gloss-form-field"
569
>поля форми</glossterm
570
>, заповнені даними з таблиці <literal
577
> form in data view after inserting text fields and assigning data sources</screeninfo>
580
<imagedata fileref="img/05_04_06_form_with_text_fields.png" format="PNG"/>
586
> form in data view after inserting text fields and assigning data sources</phrase>
595
>Якщо ви бажаєте вилучити прив’язку <glossterm linkend="gloss-form-data-source"
596
>джерела даних</glossterm
597
> до віджета форми, натисніть кнопку <guibutton
598
>Очистити джерело даних віджета</guibutton
599
>, розташовану поруч зі спадним списком <guilabel
600
>Джерело даних віджета</guilabel
601
>. Крім того, ви можете скористатися натисканням кнопки <guibutton
602
>Очистити джерело даних форми</guibutton
603
>, розташованої поряд зі спадним списком <guilabel
604
>Джерело даних форми</guilabel
609
>Скористайтеся натисканням кнопки <guibutton
610
>Перейти до вибраного джерела даних форми</guibutton
611
>, щоб обрати відповідну таблицю або запит у <interface
612
>Навігаторі проектом</interface
613
>. Таким чином, ви зможете швидко відкрити таблицю або запит, який буде <glossterm linkend="gloss-form-data-source"
614
>джерелом даних</glossterm
618
<!-- TODO: mention about creating Auto Fields by using drag & drop -->
622
<sect2 id="inserting-text-labels">
624
>Додавання текстових міток</title>
626
>Для того, щоб полегшити користувачеві форми визначення призначення полів віджета, до цих полів слід долучати текстові мітки з відповідними написами. Для створення текстових міток використовують віджет <literal
630
>Додайте на форму три віджети текстових міток, розташувавши їх ліворуч від полів для введення тексту (або праворуч, якщо у вашій операційній системі використовується лівописне компонування). Після додавання нової мітки на формі з’являтиметься курсор у місці, куди слід вводити текст. Послідовно введіть мітки: <literal
634
> (прізвище) та <literal
636
> (вулиця). Крім того, у верхній частині форми додайте ще одну мітку, яка визначатиме назву форми, тобто <literal
638
>. Збільшіть розміри цієї мітки та розмір шрифту її тексту за допомогою пункту меню <menuchoice
642
>Шрифт...</guimenuitem
647
>Ready to use form after adding text labels</screeninfo>
650
<imagedata fileref="img/05_04_06_form_with_labels.png" format="PNG"/>
654
>Ready to use form after adding text labels</phrase>
667
> (дія) — це якась виокремлена функціональна можливість програми, дію якої може бути активовано користувачем. Дію може бути виконано і у автоматичному режимі у відповідь на вказану подію (наприклад, відкриття форми). </para>
669
<sect3 id="assigning-actions-to-form-buttons">
671
>Призначення дій до кнопок форми</title>
673
>З кнопками форми можна пов’язати багато дій. Призначену дію буде виконано після натискання кнопки. </para>
675
>Для призначення дії:</para>
679
>Перемкніть програму у режим <interface
680
>Перегляд дизайну</interface
681
>, якщо ви ще цього не зробили.</para>
685
>Позначте вже існуючий віджет кнопки наведенням на нього вказівника миші з наступним клацанням лівою кнопкою миші або додайте на форму новий віджет кнопки. Якщо ви додали нову кнопку, введіть її назву і натисніть клавішу <keycombo action="press"
691
>Наведіть вказівник миші на віджет кнопки і клацніть правою кнопкою миші для відкриття контекстного меню. </para>
695
>З контекстного меню оберіть пункт <guimenuitem
696
>Призначити дію...</guimenuitem
701
>У відповідь програма відкриє діалогове вікно <guilabel
702
>Призначення дії для кнопки</guilabel
703
>, де буде показано список можливих дій. Якщо для віджета вже було призначено дію, один з пунктів дій у цьому списку буде позначено. Якщо ж дії ще не було призначено, у спадному списку <guilabel
705
> буде позначено пункт <guilabel
711
>У спадному списку <guilabel
713
> оберіть пункт <guilabel
715
>. У відповідь програма покаже список можливих дій програми. </para>
719
>Оберіть одну з дій у списку (наприклад, <guilabel
720
>Вилучити рядок</guilabel
725
>Натисніть кнопку <guibutton
727
> або клавішу <keycombo action="press"
729
>, щоб підтвердити ваш вибір. </para>
735
>Delete Row</guilabel
736
> action to a form's button</screeninfo>
739
<imagedata fileref="img/05_04_07_assigning_action_to_button.png" format="PNG"/>
744
>Delete Row</guilabel
745
> action to a form's button</phrase>
751
>Після перемикання форми у режим <emphasis
752
>перегляд даних</emphasis
753
> ви зможете перевірити, чи буде програма виконувати вказану дію. Наприклад, якщо ви призначили дію <guilabel
754
>Вилучити рядок</guilabel
755
> до натискання кнопки, поточний рядок бази даних буде вилучено. Результат дії буде тим самим, що і результат вибору пункту меню <menuchoice
757
><keycombo action="simul"
765
>Вилучити рядок</guimenuitem
767
> (залежно від вказаних вами параметрів, програма попросить вас підтвердити вилучення). </para>
773
>Щоб вилучити прив’язку дії, оберіть пункт <guilabel
775
> у спадному списку <guilabel
777
> діалогового вікна <guilabel
778
>Призначення дії для кнопки</guilabel
783
>Дії працюють лише у режимі <emphasis
784
>перегляду даних</emphasis
785
> форми. Не кожне з призначення дій має сенс. Наприклад, ви можете отримати доступ до дії <guimenuitem
786
>Шрифт...</guimenuitem
787
> у режимі перегляду даних, але лише якщо у <interface
788
>Перегляді дизайну</interface
789
> позначено якийсь віджет. Якщо ви внесете зміни до параметрів шрифту, зміни буде застосовано до тексту цього позначеного віджета. </para>
796
<sect2 id="widget-layouts">
798
>Компонування віджетів</title>
800
>Віджети форми варто розташувати зручно для користувача та вирівняти. Розташування, вирівнювання і зміна розмірів віджетів вручну не є простою справою. Ці параметри віджета не коригуватимуться, коли користувач змінюватиме розміри форми. Фактично, стан справ ще гірший, оскільки ви не зможете передбачити потрібний для віджетів простір за умови, що на комп’ютері користувача буде встановлено інші розміри шрифтів і іншу роздільну здатність екрана. </para>
803
The following example presents a form where text fields and labels were
804
placed by hand. Some of them cannot fit in the form's window.
808
>An example form with widgets that cannot not fit in the window</screeninfo>
811
<imagedata fileref="img/05_04_08_form_no_fit.png" format="PNG"/>
815
>An example form with widgets that cannot not fit in the window</phrase>
821
>За допомогою особливого інструменту, який називається «компонування віджетів» можна автоматично розкласти віджети формою. Компонування віджетів — це дія з групування декількох віджетів так, щоб їх було розташовано у відповідних місцях, і так, щоб вони мали відповідні розміри. </para>
823
>Використання компонування покращує вирівнювання елементів форми. Крім того, краще використовується площа форми. Текстові поля наближаються одне до одного, інтервали стають однорідними. </para>
826
>Example form with layout used</screeninfo>
829
<imagedata fileref="img/05_04_08_form_well_fit.png" format="PNG"/>
833
>Example form with layout used</phrase>
839
>Існує два способи створення компонування віджетів.</para>
843
>Оберіть декілька віджетів, для яких слід використати одне зі стандартних компонувань, а потім оберіть тип компонування за допомогою пункту контекстного меню <guilabel
844
>Розкласти віджети</guilabel
849
>Наведіть вказівник миші на контейнер віджетів (або на поверхню самої форми), куди слід додати віджети, клацніть лівою кнопкою миші і оберіть один з типів компонування з контекстного меню компонування віджетів. Всі віджети контейнера або форми, розташовані на одному рівні з позначеним віджетом, буде розташовано у межах спільного компонування. </para>
853
>У кожному з цих випадків ви також можете скористатися пунктом меню <menuchoice
857
>Розкласти віджети</guimenuitem
862
>Selecting widgets that will be put into a layout</screeninfo>
865
<imagedata fileref="img/05_04_08_form_layout_selecting.png" format="PNG"/>
869
>Selecting widgets that will be put into a layout</phrase>
875
>Four widgets are selected</screeninfo>
878
<imagedata fileref="img/05_04_08_form_layout_selected.png" format="PNG"/>
882
>Four widgets are selected</phrase>
888
>Using the context menu for putting the widgets into a grid layout</screeninfo>
891
<imagedata fileref="img/05_04_08_form_layout_popup.png" format="PNG"/>
895
>Using the context menu for putting the widgets into a grid layout</phrase>
901
>У режимі перегляду компонування компонування віджетів буде показано за допомогою синіх, зелених і червоних прямокутників накреслених штрихованою лінією. Цю лінію буде показано лише у режимі перегляду компонування форми. </para>
904
>Widgets within a grid layout</screeninfo>
907
<imagedata fileref="img/05_04_08_form_layout_grid.png" format="PNG"/>
911
>Widgets within a grid layout</phrase>
917
>Окрім типу ґратки, існують інші типи компонування віджетів.</para>
924
>Вертикальне компонування віджетів</para>
927
>Vertical widget layout</screeninfo>
930
<imagedata fileref="img/05_04_08_form_layout_vertical.png" format="PNG"/>
934
>Vertical widget layout</phrase>
943
>горизонтальне</term>
946
>Горизонтальне компонування віджетів</para>
949
>Horizontal widget layout</screeninfo>
952
<imagedata fileref="img/05_04_08_form_layout_horizontal.png" format="PNG"/>
956
>Horizontal widget layout</phrase>
963
<!-- TODO podzia poziomy / pionowy
965
><img src="img/05_04_08_form_layout_vertical_splitter.png">
969
><img src="img/05_04_08_form_layout_horizontal_splitter.png">
976
<sect3 id="springs-in-widget-layouts">
978
>Пружинки у компонуваннях віджетів</title>
982
> у компонуванні віджетів називається особливий невидимий елемент, за допомогою якого можна скоригувати розташування віджетів і їх розмір у компонуванні. Така пружина розтягує або стискає віджет у вертикальному або горизонтальному напрямку так, щоб надати цьому віджету бажаних розмірів і розташування. </para>
984
>Щоб скористатися пружинкою, виконайте такі дії:</para>
988
>Натисніть піктограму з пружинкою на панелі інструментів <guilabel
994
>Наведіть вказівник миші на точку на формі, куди ви бажаєте вставити пружинку і клацніть лівою кнопкою миші.</para>
998
For the following example, the spring has been inserted on the left
999
hand of the text label "Persons". The label is thus displayed on the
1000
right hand of the form. To make the spring work, it has been put into
1001
a common horizontal layout with the label.
1005
>Horizontal layout containing a spring and a text label</screeninfo>
1008
<imagedata fileref="img/05_04_08_form_spring.png" format="PNG"/>
1012
>Horizontal layout containing a spring and a text label</phrase>
1018
>Для того, щоб пружини виконали свою роль, вам слід створити загальне компонування віджетів, тобто компонування самої форми. Після цього пружини зможуть скористатися краями форми як опорою під час стискання або розтягування. </para>
1022
TODO: The entire text in this section is built around a screenshot
1023
example, so it's commented out for now.
1025
<sect3 id="advanced-widget-layouts">
1027
>Advanced widget layouts</title>
1029
Widget layouts can be combined (or nested). On the following example
1030
you can identify two nested layouts:
1035
Horizontal layout with a spring, aligning the <literal
1037
text label to the right.
1042
>Grid layout grouping widgets on the whole form.</para>
1047
>Two widget layouts combined: horizontal layout inside of a grid layout</screeninfo>
1050
<imagedata fileref="img/05_04_08_form_advanced_layout.png" format="PNG"/>
1054
>Two widget layouts combined: horizontal layout inside of a grid layout</phrase>
1059
The horizontal layout is treated in the example as a single widget by
1060
the grid layout - it takes exactly one <quote
1063
After opening a form designed this way in the data view, you can notice
1064
(by resizing the form) that:
1071
> text label thanks to the spring used is constantly
1072
aligned to the to the right side of the form.
1077
Text fields take all of the available width thanks to putting them
1078
into the grid layout.
1083
All the form's widgets are pushed to the top thanks to the spring
1084
used at the bottom of the form.
1090
>The form using the two layouts displayed in data view</screeninfo>
1093
<imagedata fileref="img/05_04_08_form_advanced_layout_view.png" format="PNG"/>
1097
>The form using the two layouts displayed in data view</phrase>
1104
<sect3 id="removing-widget-layouts">
1106
>Вилучення компонувань віджетів</title>
1108
>Щоб вилучити компонування віджетів без вилучення самих віджетів, виконайте одну з таких дій: </para>
1112
>Наведіть вказівник миші на рамку компонування, клацніть <mousebutton
1113
>правою</mousebutton
1114
> кнопкою миші і оберіть пункт <guimenuitem
1115
>Забрати розкладку</guimenuitem
1116
> у контекстному меню. </para>
1120
>Наведіть вказівник миші на рамку компонування, клацніть <mousebutton
1122
> кнопкою миші і скористайтеся пунктом меню <menuchoice
1126
>Забрати розкладку</guimenuitem
1133
>Вилучення компонування віджетів за допомогою пункту <guimenuitem
1134
>Забрати розкладку</guimenuitem
1135
> не призведе до вилучення віджетів самого компонування. Якщо ви бажаєте вилучити і самі віджети, просто позначте компонування наведенням вказівника на рамку компонування з наступним клацанням лівою кнопкою миші, а потім натисніть клавішу <keycap
1137
> або скористайтеся пунктом <menuchoice
1141
>Вилучити</guimenuitem
1143
> головного або контекстного меню. </para>
1147
<sect3 id="size-policies-for-widgets-within-a-layout">
1149
>Правила розмірів для віджетів у компонуванні</title>
1151
>Замість встановлення для віджетів фіксованого розміру у &kexi; ви можете скористатися одним з декількох правил встановлення розмірів віджетів. <emphasis
1152
>Правила розмірів</emphasis
1153
> — це гнучка стратегія керування способом розтягування (або стискання) віджета залежно від розміру і розташування сусідніх віджетів і доступного місця на формі. </para>
1155
>Зазвичай, після розташування віджетів у <emphasis
1156
>компонуванні</emphasis
1157
> для кожного з віджетів буде встановлено правило пропорційних розмірів (<guilabel
1159
>). Розмір цих віджетів буде автоматично змінено відповідно до параметрів типу і розмірів самого компонування. Наприклад, розміри трьох кнопок у горизонтальному компонуванні буде змінено так, щоб на них можна було показати весь призначений для показу текст. </para>
1161
>Параметри правил розмірів для кожного з віджетів доданих на форму можна встановити за допомогою <interface
1162
>Редактора властивостей</interface
1163
>. Параметри буде зібрано у групі властивостей з назвою <guilabel
1164
>Правила розміру</guilabel
1168
>A group of properties for defining a widget's size policy</screeninfo>
1171
<imagedata fileref="img/05_04_09_size_policy_properties.png" format="PNG"/>
1175
>A group of properties for defining a widget's size policy</phrase>
1181
>Ця група властивостей містить:</para>
1186
>Правила горизонтальних розмірів</guilabel
1190
>визначення горизонтального розміру віджета,</para>
1196
>Правила вертикальних розмірів</guilabel
1200
>визначення вертикального розміру віджета,</para>
1206
>Горизонтальне розтягнення</guilabel
1210
>визначення рівня застосування <guilabel
1211
>Правил горизонтальних розмірів</guilabel
1218
>Вертикальне розтягнення</guilabel
1222
>визначення рівня застосування <guilabel
1223
>Правил вертикальних розмірів</guilabel
1231
>Величини правил розмірів</title>
1233
>У спадних списках властивостей панелі <interface
1234
>Редактор властивостей</interface
1236
>Правила горизонтальних розмірів</guilabel
1238
>Правила вертикальних розмірів</guilabel
1239
> можна буде обрати такі пункти: </para>
1244
>Фіксований</guilabel
1248
>таке значення означає, що розміри віджета не будуть змінюватися автоматично, його розміри завжди залишатимуться такими, якими їх було визначено під час компонування. </para>
1254
>Мінімальний</guilabel
1258
>такий варіант означає, що програма встановить мінімальний можливий розмір для віджета, цього буде достатньо для того, щоб не збільшувати розміри віджета, але початкові розміри буде збільшено, якщо це буде потрібно. Цим типом правил можна скористатися для примусового збільшення віджета до повної ширини або висоти, особливо, якщо ви встановите значення параметра розтягування, більше за 0. </para>
1261
>Text field and two buttons within a grid layout (Minimum horizontal size policy is set for both buttons, so these are slightly wider than needed)</screeninfo>
1264
<imagedata fileref="img/05_04_09_size_policy_minimum.png" format="PNG"/>
1268
>Text field and two buttons within a grid layout (Minimum horizontal size policy is set for both buttons, so these are slightly wider than needed)</phrase>
1278
>Максимальний</guilabel
1282
>такий варіант означає, що початково програма встановить максимальний можливий розмір віджета, цей розмір буде зменшено без шкоди для зручності користування віджетом та перегляду його тексту, якщо для показу інших віджетів потрібен додатковий простір, </para>
1292
>цей варіант означає, що початковий розмір віджета є найкращим і бажаним; але розміри віджета буде зменшено або збільшено так, щоб розташований на ньому текст можна було читати, </para>
1295
>Text field and two buttons within a grid layout (Preferred horizontal size policy is set for both buttons)</screeninfo>
1298
<imagedata fileref="img/05_04_09_size_policy_preferred.png" format="PNG"/>
1302
>Text field and two buttons within a grid layout (Preferred horizontal size policy is set for both buttons)</phrase>
1312
>Розширяється</guilabel
1316
>такий варіант означає, що хоча програма намагатиметься зберегти початкові розміри віджета, але їх може бути зменшено та збільшено з метою раціонального використання площі, </para>
1322
>Мінімально розширяється</guilabel
1326
>такий варіант означає, що хоча програма намагатиметься зберегти початкові розміри віджета, їх може бути збільшено так, щоб віджет займав якомога більшу площу, </para>
1332
>Ігнорується</guilabel
1336
>такий варіант означає, що початкові розміри віджета буде проігноровано; розміри віджета може бути збільшено так, щоб вони стали найбільшими можливими, але, зазвичай, ці розміри буде обмежено іншими віджетами форми. </para>
1341
>Для віджетів різних типів типово застосовуються різні правила встановлення розмірів; наприклад, для віджетів кнопок типово встановлюються правила розмірів <guilabel
1342
>Мінімальний</guilabel
1343
> (у обох напрямках), а для віджетів текстових полів встановлюються правила визначення вертикального розміру <guilabel
1344
>Фіксований</guilabel
1347
>Найпоширенішими правилами зміни розмірів віджетів є <guilabel
1350
>Мінімальний</guilabel
1352
>Максимальний</guilabel
1358
>Вертикальне та горизонтальне розтягнення</title>
1360
>Для властивостей <guilabel
1361
>Вертикальне розтягування</guilabel
1363
>Горизонтальне розтягування</guilabel
1364
> використовуються цілі числа, більші або рівні 0. За допомогою цих властивостей ви можете скоригувати застосування правил встановлення розмірів. Типовим значенням для цих властивостей є 0. Більше значення розтягування означає, що віджет буде розтягнуто більше, ніж віджет з меншим значенням розтягування. </para>
1367
>Size of button widgets affected by setting Vertical Stretch property of the second button to 1</screeninfo>
1370
<imagedata fileref="img/05_04_09_size_policy_vertical_stretch.png" format="PNG"/>
1374
>Size of button widgets affected by setting Vertical Stretch property of the second button to 1</phrase>
1383
<sect2 id="setting-widgets-size-and-position-by-hand">
1385
>Визначення розмірів та розташування віджетів вручну</title>
1387
>Якщо для вашої форми не буде встановлено основного компонування для автоматичного розташування і автоматичної зміни розмірів її віджетів, ймовірно, вам захочеться змінити розташування і розміри віджетів так, щоб форма виглядала акуратнішою і простішою у користуванні. Дизайнер форм &kexi; спрощує це завдання за допомогою таких груп команд: </para>
1391
>Коригування розмірів позначених віджетів. Відповідні пункти можна знайти у підменю <menuchoice
1395
>Вирівняти розміри віджетів</guisubmenu
1397
> основного меню програми і підменю <menuchoice
1399
>Вирівняти розміри віджетів</guisubmenu
1401
> контекстного меню. Крім того, ви можете знайти спадне меню <guibutton
1402
>Вирівняти розміри віджетів</guibutton
1403
> на панелі інструментів. </para>
1407
><!--<img src="img/aofit.png" class="icon"
1409
>Влаштувати</guilabel
1413
>Програма змінить розміри позначених віджетів так, щоб ці розміри відповідали бажаному розміру і вмістові віджетів. Наприклад, розміри текстової мітки буде змінено так, щоб у її віджеті вмістився весь її текст. Розташування віджетів змінено не буде. </para>
1418
><!--<img src="img/aogrid.png" class="icon"
1420
>До ґратки</guilabel
1424
>Програма змінить розміри позначених віджетів так, що кожен з кутів віджета буде розташовано у точці перетину ліній ґратки форми (або іншого контейнера). Розташування віджета також може бути трошки змінено. </para>
1429
><!--<img src="img/aoshortest.png" class="icon"
1431
>До найкоротшого</guilabel
1435
>Програма змінить висоту позначених віджетів так, щоб кожен з них мав ту саму висоту, що і найкоротший віджет. Розташування віджетів змінено не буде. </para>
1440
><!--<img src="img/aotallest.png" class="icon"
1442
>До найвищого</guilabel
1446
>Програма змінить висоту позначених віджетів так, щоб кожен з них мав ту саму висоту, що і найвищий віджет. Розташування віджетів змінено не буде. </para>
1451
><!--<img src="img/aonarrowest.png" class="icon"
1453
>До найвужчого</guilabel
1457
>Програма змінить ширину позначених віджетів так, щоб кожен з них мав ту саму висоту, що і найвужчий віджет. Розташування віджетів змінено не буде. </para>
1462
><!--<img src="img/aowidest.png" class="icon"
1464
>До найширшого</guilabel
1468
>Програма змінить ширину позначених віджетів так, щоб кожен з них мав ту саму ширину, що і найширший віджет. Розташування віджетів змінено не буде. </para>
1475
>Вирівнювання розташування позначених віджетів. Відповідні пункти можна знайти у підменю <menuchoice
1479
>Вирівняти позиції віджетів</guisubmenu
1481
> основного меню програми і у підменю <menuchoice
1483
>Вирівняти позиції віджетів</guisubmenu
1485
> контекстного меню. Крім того, спадне меню <guibutton
1486
>Вирівняти позиції віджетів</guibutton
1487
> можна знайти на панелі інструментів. </para>
1491
><!--<img src="img/aoleft.png" class="icon"
1497
>Всі ліві краї віджетів буде пересунуто так, щоб їх було розташовано на вертикальній лінії, що збігається з лівим краєм найлівішого віджета. </para>
1502
><!--<img src="img/aoright.png" class="icon"
1508
>Всі праві краї віджетів буде пересунуто так, щоб їх було розташовано на вертикальній лінії, що збігається з правим краєм найправішого віджета. </para>
1513
><!--<img src="img/aotop.png" class="icon"
1519
>Всі верхні краї віджетів буде пересунуто так, щоб їх було розташовано на горизонтальній лінії, що збігається з верхнім краєм найвищого віджета. </para>
1524
><!--<img src="img/aobottom.png" class="icon"
1530
>Всі нижні краї віджетів буде пересунуто так, щоб їх було розташовано на горизонтальній лінії, що збігається з нижнім краєм найнижчого віджета. </para>
1535
><!--<img src="img/aopos2grid.png" class="icon"
1537
>До ґратки</guilabel
1541
>Всі верхні ліві кути віджетів буде пересунуто так, щоб їх було розташовано у найближчій точці перетину ліній сітки. </para>
1546
>Жодна з наведених вище команд не змінює розмірів віджетів.</para>
1550
>Крім того, передбачено додаткові пункти: <guimenuitem
1551
>Пересунути віджет на передній план</guimenuitem
1552
> (тобто у позицію над усіма іншими віджетами) і <guimenuitem
1553
>Пересунути віджет на задній план</guimenuitem
1554
> (тобто у позицію під усіма іншими віджетами). Ці два пункти використовуються нечасто, оскільки розташування віджетів один над одним є досить рідкісним (окрім випадків віджетів-контейнерів, які містять у собі інші віджети). Крім того, зауважте, що наведення вказівника миші на віджет з наступним клацанням лівою кнопкою миші достатньо для пересування віджета на передній план. </para>
1557
<sect2 id="setting-the-tab-order">
1559
>Визначення порядку вкладок</title>
1561
>Доступ до функціональних можливостей віджетів, які перебувають у фокусі, можна отримати за допомогою клавіатури. Фокус пов’язано з віджетом, показаним у режимі перегляду даних форми. Одночасно у фокусі може перебувати лише один віджет. Найпоширенішим використанням фокуса є введення тексту (поле для введення тексту має бути задіяним, тобто перебувати у фокусі). Ще одним прикладом є віджет кнопки: якщо такий віджет перебуває у фокусі, ви можете «натиснути» кнопку за допомогою натискання клавіш <keycombo action="press"
1563
> або <keycombo action="press"
1567
>, а не кнопки миші. </para>
1569
>Існує декілька способів активувати віджет (пересунути фокус на потрібний віджет): клацання кнопкою миші, прокручування коліщатка миші, коли вказівник перебуває над віджетом, або натискання клавіші <keycombo action="press"
1571
>. Останній спосіб часто використовують через його швидкість і зручність для користувачів. Доступністю способів фокусування можна керувати за допомогою властивості <guilabel
1572
>Правила фокусування</guilabel
1575
>Фокусування (активація) віджетів за допомогою клавіші <keycombo action="press"
1577
> і параметр порядку табуляції взаємопов’язано. Після натискання клавіші <keycombo action="press"
1579
> фокус буде пересунуто на наступний віджет, отже для форми має бути встановлено порядок табуляції. </para>
1581
>Щоб змінити порядок вкладок для віджета форми:</para>
1585
>Перемкніть програму на режим дизайну форми.</para>
1589
>Скористайтеся пунктом меню <menuchoice
1593
>Зміна порядку табуляції...</guimenuitem
1595
>. У відповідь програма відкриє діалогове вікно <guilabel
1596
>Зміна порядку табуляції</guilabel
1597
>. За допомогою цього вікна ви зможете змінити відповідні параметри форми. </para>
1600
>A window for editing tab order for a form</screeninfo>
1603
<imagedata fileref="img/05_04_11_tab_stop_dialog.png" format="PNG"/>
1607
>A window for editing tab order for a form</phrase>
1613
>У вікні міститиметься список з двома стовпчиками: у першому стовпчику буде показано назви віджетів, у другому — типи віджетів. Щоб спростити визначення значення назв і типів для користувача, програма показуватиме піктограми, пов’язані з відповідними типами. У списку буде показано лише віджети, для яких дозволено використання правил пересування фокуса за допомогою клавіші 	. За допомогою цього вікна ви зможете змінити порядок табуляції або встановити автоматичний порядок табуляції. </para>
1617
>Щоб змінити порядок вкладок, виконайте одну з таких дій:</para>
1621
>Наведіть вказівник миші на пункт назви вибраного віджета у списку віджетів, клацніть лівою кнопкою миші, а потім перетягніть його у бажану позицію (вгору чи вниз) за допомогою вказівника миші. </para>
1625
>Наведіть вказівник миші на пункт назви вибраного віджета у списку віджетів, клацніть лівою кнопкою миші, а потім натискайте кнопки <guibutton
1626
>Пересунути вгору</guibutton
1628
>Пересунути вниз</guibutton
1629
>, щоб пересунути віджети на бажану позицію. </para>
1633
>Позначте пункт <guilabel
1634
>Опрацьовувати порядок табуляції автоматично</guilabel
1635
>, щоб встановити автоматичний порядок табуляції для форми. Якщо цей пункт буде позначено, всі зміни, внесені до списку віджетів вручну, не буде взято до уваги — &kexi; визначатиме порядок табуляції у автоматичному режимі. Автоматичне впорядкування означає, що найвищий лівий віджет буде у порядку фокусування першим (або найвищий правий віджет, якщо у вашій операційній системі використовується лівописне компонування), наступні віджети у списку визначатимуться у напрямку зліва праворуч (або справа ліворуч у випадку лівопису), а потім згори вниз. </para>
1638
>Automatic tab order for a form</screeninfo>
1641
<imagedata fileref="img/05_04_11_auto_tab_stop.png" format="PNG"/>
1645
>Automatic tab order for a form</phrase>
1655
>Натисніть кнопку <guibutton
1657
>, щоб підтвердити внесені зміни. Натискання кнопки <guibutton
1658
>Скасувати</guibutton
1659
> призведе до відкидання внесених змін. </para>
added
removed
docs/calligra/kexi/designingforms.docbook
