Подальші дії

Вирівнювання - це один з найбільш важливих аспектів при створенні професійного графічного інтерфейсу. У попередньому розділі ми побіжно ознайомилися з функціями вирівнювання, передбаченими в середовищі IDE, в ході додавання елементів "JLabel" і "JTextField" до форми "ContactEditorUI". Тепер звернемося до деталей функцій вирівнювання GUI Builder на прикладі роботи з іншими елементами, необхідними для нашого застосування.

Вирівнювання елементів

Кожного разу при додаванні елемента до форми GUI Builder позиція цього елемента коректується згідно з'являються на екрані напрямних. Однак іноді потрібно змінити зв'язки між групами елементів. Раніше ми додали до інтерфейсу ContactEditor чотири елементи "JLabel", однак вони не були вирівняні. Тому слід вирівняти два стовпці таких елементів по правому краю.

Для вирівнювання елементів:

1. Виберіть елементи "JLabel" First Name: і Title: зліва від форми.

2. Натисніть кнопку "Выравнивание направо в столбце" ( ) на панелі інструментів. Також можна клацнути правою кнопкою миші і вибрати "Выравнивание> Направо по столбцу" в меню, що.

3. Повторіть ці дії для елементів "JLabel" Last Name: і Nickname:.

Елементи розташовуються так, щоб праві межі підписів були вирівняні. Точки прив'язки оновлюються і вказують на те, що елементи були згруповані.

Перед завершенням позиціонування текстових полів "JTextField", які були раніше вставлені між елементами "JLabel", необхідно перевірити, що для цих елементів правильно налаштована коректування розмірів. На відміну від двох текстових полів "JTextField", які були вирівняні по правому краю форми, для цих елементів можливість зміни розміру автоматично не була встановлена.

Для визначення можливості зміни розмірів елемента:

1. Клацніть два вставлені елемента "JTextField" для їх вибору в GUI Builder.

2. Після вибору обох текстових полів клацніть правою кнопкою миші будь-який з них і виберіть "Автоматическое изменение размеров> По горизонтали" в меню, що з’явилося.

Таким чином для елементів "JTextField" визначається можливість зміни розмірів по горизонталі під час виконання. При цьому оновлюються направляючі і точки прив'язки, що дає візуальну підказку про властивості позиції елементів.

Для налаштування однакового розміру елементів:

1. Клацніть всі чотири елементи "JTextField" у формі для їх вибору.

2. Після вибору елементів JTextField клацніть правою кнопкою миші будь-який з них і виберіть "Установить размер по умолчанию" в меню, що з’явилося.

Це встановлює однакову ширину всіх текстових полів; при цьому до верхньої межі кожного додаються індикатори, що вказують на це властивість елементу.

Тепер слід додати ще один елемент "JLabel", який буде містити підпис до поля зі списком "JComboBox". Це поле буде використовуватися для вибору формату даних, які будуть відображатися в додатку ContactEditor.

Для вирівнювання "JLabel" відповідно до позиції групи елементів:

1. У вікні "Палитра" виберіть елемент "Метка" в категорії " Элементы управления Swing".

2. Перемістіть курсор під елементи "JLabel" First Name і Title зліва від панелі JPanel. Після появи направляючої, що вказує на те, що права межа нового елемента "JLabel" вирівняна по правому краю розташованої вище групи елементів (з двох "JLabel"), клацніть для підтвердження позиції елемента.

Елемент "JLabel" фіксується в положенні з вирівнюванням по правому краю стовпця "JLabel" вище. GUI Builder оновлює лінії вирівнювання з урахуванням інтервалів і прив'язок елемента.

Як і в попередніх прикладах, двічі клацніть елемент "JLabel" для вибору відображуваного в ньому тексту і потім введіть Display Format: в якості нового тексту. Слід зазначити, що при фіксації положення "JLabel" інші елементи зміщуються так, щоб збільшений за розміром текст помістився в формі.

Вирівнювання по базовій лінії

Кожного разу при додаванні або переміщенні елементів, які містять текст ("JLabel", "JTextField" і т.д.), середа IDE пропонує вирівняти їх згідно з базовими лініями тексту цих елементів. Після вставки елемента "JTextField", наприклад, його базова лінія автоматично вирівнюється згідно суміжних з ним полях "JLabel".

Тепер додамо поле списку, що дозволяє користувачам вибрати формат інформації, яка буде відображатися в додатку ContactEditor. При додаванні поля "JComboBox" його базова лінія буде вирівняна по базової лінії тексту "JLabel". Зверніть увагу на що з'являються на екрані направляючі, що спрощують точне позиціонування елемента.

Для вирівнювання базових ліній елементів:

1. У вікні "Палитра" виберіть елемент "Поле со списком" в категорії " Элементы управления Swing".

2. Перемістіть курсор до правого краю доданого елемента "JLabel". При появі горизонтальних направляючих, що вказують на те, що базова лінія поля "JComboBox" вирівняна з базовою лінією тексту "JLabel", і вертикальної напрямної, визначальною інтервал між цими двома елементами, клацніть для підтвердження позиції поля списку.

Елемент фіксується в положенні з вирівнюванням по базової лінії тексту в "JLabel" зліва. GUI Builder відображає лінії вирівнювання з урахуванням інтервалів і прив'язок елемента.

Для зміни розмірів елемента "JComboBox":

1. Виберіть поле списку "ComboBox" в GUI Builder.

2. Переміщайте маніпулятор на правій межі елементу "JComboBox" вправо, доки на екрані не з'являться направляючі, які позначають рекомендований інтервал між кордонами JPanel і "JComboBox".

Права межа "JComboBox" буде вирівняна відповідно до запропонованого полем JPanel, а для ширини цього елемента буде встановлено автоматичну зміну згідно структурі форми.

Резюме

Отже, ми вже створили значну частину інтерфейсу користувача для програми ContactEditor, проте до переходу до додавання наступних необхідних елементів було б доцільно закріпити вивчений матеріал.

До цих пір акцент ставився на додаванні елементів до інтерфейсу ContactEditor за допомогою напрямних, які дозволили спростити процес позиціонування елементів на екрані. Ще однією важливою функцією позиціонування є точки прив'язки. Незважаючи на те, що ми ще не торкалися цієї теми, в одному з попередніх прикладів ця функція вже використовувалася. Як було зазначено раніше, кожен раз при додаванні елемента до форми середу IDE пропонує кращий варіант його розташування, що позначається за допомогою направляючих. Після розміщення нові елементи також прив'язуються до найближчої границі контейнера або елементу з метою збереження правильних взаємозв'язків між ними під час виконання. У цьому розділі буде розглянуто більш зручний спосіб виконання подібних завдань з коротким описом внутрішнього механізму роботи GUI Builder.

Додавання, вирівнювання і прив'язка

GUI Builder дозволяє швидко встановити розташування елементів форми за рахунок раціоналізації типових операцій. Кожного разу при додаванні елемента до форми GUI Builder автоматично фіксує їх у переважних позиціях і встановлює необхідні зв'язки, дозволяючи користувачеві сконцентруватися на проектуванні форм замість вивчення складних технічних деталей.

Щоб додати, вирівнювання і зміни відображуваного тексту "JLabel":

1. У вікні "Палитра" виберіть елемент "Метка" в категорії " Элементы управления Swing".

2. Перемістіть курсор у формі під нижній заголовок "E-mail" на панелі JPanel. Після появи направляючих, що вказують на розміщення елемента у верхньому лівому куті панелі JPanel з невеликим полем у верхній і лівій частині, клацніть для підтвердження позиції нового елемента.

3. Двічі клацніть елемент "JLabel" для вибору тексту. Потім введіть E-mail Address: і натисніть клавішу Enter.

Елемент "JLabel" фіксується в кращою позиції в формі з прив'язкою до верхнього і лівого краю панелі JPanel. Як і слід було очікувати, у вікні "Навигатор" з'явився новий вузол, відповідний доданого елемента.

Для додавання елемента "JTextField":

1. У вікні "Палитра" виберіть елемент "Текстовое поле" в категорії " Элементы управления Swing".

2. Перемістіть курсор до правого краю доданого поля E-mail Address. При появі напрямних, які вказують на те, що базова лінія поля "JTextField" вирівняна з базовою лінією тексту "JLabel", і вертикальної напрямної, визначальною інтервал між цими двома елементами, клацніть для підтвердження позиції текстового поля.

3. Елемент "JTextField" фіксується в позиції праворуч від "JLabel" E-mail Address: і прив'язується до цього елементу. У вікні " Навигатор " з'являється пов'язаний з ним вузол.

4. Переміщайте маніпулятор елемента "JTextField" до правої межі панелі JPanel, поки на екрані не з'являться направляючі, які позначають рекомендований інтервал між кордонами "JTextField" і JPanel.

Права межа "JTextField" фіксується по направляючої, яка позначає переважні поля.

Тепер необхідно додати елемент "JList", в якому буде відображатися весь список контактів ContactEditor.

Для додавання і зміни розмірів елемента "JList":

1. У вікні "Палитра" виберіть елемент "Список" в категорії " Элементы управления Swing".

2. Перемістіть курсор прямо під елементом "JLabel" E-mail Address, який був доданий раніше. Після появи направляючої, що вказує на те, що верхня і права межі елементу "JList" вирівняні згідно кращим інтервалам по лівому краю панелі JPanel і розташованому вище елементу "JLabel", клацніть для підтвердження позиції списку.

3. Переміщайте маніпулятор елемента "JList" до правої межі панелі JPanel, поки на екрані не з'являться направляючі, які вказують на те, що ширина списку співпадає з шириною розташованого вище поля "JTextField".

Елемент "JList" фіксується в позиції, позначеної направляючими, і у вікні "Навигатор" з'являється відповідний йому вузол. Зверніть також увагу на те, що форма розширюється для розміщення нового елемента "JList".

Так як елементи "JList" використовуються для відображення відносно довгих списків, вони зазвичай вимагають додавання смуги прокрутки (JScrollPane). Кожного разу при додаванні елемента, що вимагає смуги прокрутки, GUI Builder автоматично додає до нього елемент "JScrollPane". Оскільки смуги прокрутки є невізуальними елементами, для їх перегляду і налаштування повинно використовуватися вікно " Навигатор " в GUI Builder.

Визначення розмірів елемента

Часто ряд пов'язаних елементів, наприклад, кнопок в модальних діалогах, повинні мати один і той же розмір для забезпечення несуперечливого візуального представлення. Для демонстрації того, як це можна зробити, додамо до форми "ContactEditor" чотири кнопки "JButton", які будуть використовуватися для додавання, зміни та видалення окремих записів з нашого списку контактів, як показано на наступних малюнках. Після цього кнопки будуть налаштовані так, щоб вони мали однаковий розмір і відображали пов'язану з ними функціональність.

Щоб додати, вирівнювання і зміни відображуваного тексту декількох кнопок:

1. У вікні "Палитра" виберіть елемент "Кнопка".

2. Помістіть кнопку "JButton" над правою кордоном поля "JTextField" E-mail Address на нижній панелі JPanel. Після появи направляючих, що вказують на те, що базова лінія кнопки "JButton" і права межа вирівняні з полем "JTextField", клацніть, утримуючи клавішу Shift для розміщення першої кнопки по правому краю елемента "JFrame". Після відпускання кнопки миші ширина "JTextField" зменшується так, щоб поруч помістилася кнопка "JButton".

3. Наведіть курсор на верхній правий кут списку "JList" на нижній панелі JPanel. Після появи направляючих, який вказує на те, що верхня і права кордону кнопки вирівняні з полем "JList", клацніть, утримуючи клавішу Shift для розміщення другої кнопки по правому краю елемента "JFrame".

4. Додайте дві додаткові кнопки "JButton" до кнопок, які вже вставлені в форму, так, щоб вони утворили стовпець. Ці кнопки повинні розміщуватися з урахуванням необхідних інтервалів, які повинні мати однаковий розмір. Якщо клавіша Shift не була відпущена до розміщення останньої кнопки "JButton", просто натисніть клавішу Escape.

5. Налаштуйте відображуваний текст для кожного елемента "JButton". (Для зміни тексту кнопки клацніть кнопку правою клавішею миші та виберіть "Редактировать текст". В якості альтернативи можна натиснути кнопку, витримати паузу і клацнути ще раз.) Для першої зверху кнопки введіть Add, для другої - Edit, для третьої - Remove, для четвертої - As Default.

Елементи "JButton" фіксуються в позиціях, позначених направляючими. Ширина кнопок коректується так, щоб помістився новий текст.

Тепер, після визначення місця розташування кнопок, слід встановити для них підтримання однакового розміру, а також вказати на їх функціональні зв'язки.

Для налаштування однакового розміру елементів:

1. Виділіть всі чотири кнопки за допомогою миші, утримуючи клавішу Control.

2. Клацніть правою кнопкою миші одну з них і виберіть "Одинаковый размер> Та же ширина" в меню, що з’явилося.

Розмір кнопок "JButton" коректується відповідно до розміру кнопки з найдовшим текстом.

Відступи

Часто ряд елементів доцільно об'єднати в кластер, що відноситься до якого-небудь загального елементу, в цілях вказівки на приналежність цих елементів до групи пов'язаних функцій. Наприклад, таким чином зазвичай розміщуються прапорці, згруповані в один розділ під загальною назвою. У GUI Builder відступ визначається за допомогою особливих напрямних, які позначають переважне зсув, відповідне загальному стилю операційної системи.

У цьому розділі ми додамо кілька перемикачів (JRadioButton) під один елемент "JLabel". Ці перемикачі призначені для налаштування користувачем способу відображення даних у додатку.

Для додавання відступу з розміщенням перемикачів "JRadioButton" під одним "JLabel":

1. Додайте до форми елемент "JLabel" з текстом Mail Format, розташувавши його під полем "JList". Перевірте, що цей елемент вирівняний по лівому краю списку.

2. У вікні "Палитра" виберіть елемент "Переключатель" в категорії "Элементы управления Swing".

3. Перемістіть курсор під тільки що доданий елемент "JLabel". При появі напрямних, які вказують на вирівнювання лівої межі перемикача з лівого кордоном елемента "JLabel", переміщайте перемикач трохи вправо до відображення другий надсилається відступу. Клацніть мишею при натиснутій клавіші Shift для підтвердження позиції першого перемикача.

4. Перемістіть курсор вправо від першого елемента "JRadioButton". Клацніть мишею при натиснутій клавіші Shift для розміщення другого і третього перемикача, враховуючи при цьому пропонований інтервал між цими елементами. Перед розміщенням останнього перемикача слід відпустити і знову натиснути клавішу Shift.

5. Налаштуйте відображуваний текст для кожного елемента "JRadioButton". (Для зміни тексту кнопки клацніть кнопку правою клавішею миші та виберіть "Редактировать текст". В якості альтернативи можна натиснути кнопку, витримати паузу і клацнути ще раз.) Для першого зліва перемикача вкажіть HTML, для другого - Plain Text, для третього - Custom.

Отже, до форми додані три елементи "JRadioButton", які розташовані під елементом "JLabel" Mail Format з необхідним відступом.

Тепер необхідно додати три перемикача "JRadioButton" до групи кнопок "ButtonGroup", що дозволить встановити необхідну поведінку: в один момент часу може бути вибраний тільки один перемикач. Це означає, що контактна інформація з додатку ContactEditor буде відображатися у вибраному користувачем форматі.

Для додавання перемикачів до групи кнопок:

1. У вікні "Палитра" виберіть елемент "Группа кнопок" в категорії " Элементы управления Swing".

2. Клацніть будь-де в рамках галузі проектування GUI Builder для додавання елемента "ButtonGroup" до форми. Слід зазначити, що елемент "ButtonGroup" не з'являється безпосередньо у формі, однак відображається в області "Other Component" у вікні "Навигатор".

3. Виберіть у формі всі три кнопки "JRadioButton".

4. У вікні "Свойства" виберіть "buttonGroup1" в полі списку властивості "buttonGroup".

До групи кнопок додаються три перемикача "JRadioButton".