Завдання.

1. Створіть суматор, описаний в теоретичній частині.

2. Додайте до нього кнопки: "subtraction", "multiplication", "division" і, відповідно, їх функціональність.

Лабораторна робота № 8-9

Тема: Розробка графічного інтерфейсу Swing в середовищі IDE NetBeans.

Мета: Проектування інтерфейсу користувача для програми, що дозволить переглядати і змінювати інформацію про контакти співробітників, записи про яких є в базі даних.

Теоретичні відомості

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

Створення проекту

Оскільки всі дії по розробці Java в середовищі IDE виконуються в рамках проектів, спочатку необхідно створити новий проект ContactEditor, в якому будуть зберігатися вихідні файли та інші файли проекту. Проект IDE являє собою набір вихідних файлів Java та пов'язані з ними метадані, в тому числі файли властивостей проекту, сценарій збірки Ant, керуючий параметрами зборки і виконання, а також файл project.xml, що зв'язує параметри Ant з командами IDE. Додатки на Java зазвичай складаються з декількох проектів IDE, однак у цій роботі ми створимо просте додаток, який можна розмістити всього в одному проекті.

Для створення нового проекту додатка ContactEditor:

1. Виберіть "Файл> Создать проэкт". Також можна клацнути значок "Создать проэкт" на панелі інструментів середовища IDE.

2. В області "Категории" виберіть вузол "Java", потім виберіть "Приложение Java" в області "Проэкты". Натисніть кнопку "Далее".

3. Введіть "ContactEditor" в полі "Имя проэкта" і вкажіть місце проекту.

4. Не встановлюйте прапорець " Использовать отдельную папку для хранения библиотек ".

5. Зніміть прапорець "Создать главный класс".

6. Натисніть кнопку "Готово".

Середа IDE створює папку ContactEditor в зазначеному місцезнаходження в системі. Ця папка містить всі пов'язані файли проекту, в тому числі його сценарій Ant, папки для зберігання вихідних файлів і тестів, а також папку для метаданих проекту. Структуру проекту можна переглянути у вікні "Files" середовища IDE.

Створення контейнера графічного інтерфейсу

Після створення нового додатка у вікні "Проэкты" в папці "Пакеты исходных кодов" з'явиться порожній вузол <пакет по умолчанию>. Для продовження процесу створення інтерфейсу необхідно створити контейнер Java, в який будуть поміщені інші необхідні елементи графічного інтерфейсу. У цій дії ми створимо контейнер за допомогою елемента JFrame і розмістимо його в новому пакеті.

Для створення контейнера "JFrame":

1. У вікні "Проэкты" клацніть правою кнопкою миші вузол "ContactEditor" і виберіть "Новый> Форма JFrame".

2. Введіть ім'я класу "ContactEditorUI" в полі "Имя класса".

3. Вибрати пакет my.contacteditor.

4. Натисніть кнопку "Готово".

Середа IDE створює форму ContactEditorUI і клас ContactEditorUI в додатку ContactEditorUI.java і відкриває форму ContactEditorUI в GUI Builder. Пакет my.contacteditor замінює собою пакет за замовчуванням.

Знайомство з GUI Builder

Після створення нового проекту для програми слід ознайомитися з інтерфейсом GUI Builder.

Після додавання контейнера "JFrame" нова створена форма ContactEditorUI автоматично відкривається на вкладці "Editor", де є панель інструментів з рядом кнопок, показаних на попередньому малюнку. Режим проектування GUI Builder, в якому відкрита форма "ContactEditor", і три додаткових вікна, автоматично виводяться по краях екрану IDE, дозволяє здійснювати переходи, упорядковувати і змінювати форми графічного інтерфейсу у міру їх розробки.

Різні вікна GUI Builder містять наступне:

• Область проектування. Основне вікно GUI Builder для створення і зміни форм графічного інтерфейсу Java. Кнопки перемикання між режимами перегляду коду (Источник) і проектування (Проэкт) на панелі інструментів дозволяють переглядати вихідний код класу або графічне представлення елементів графічного інтерфейсу. Додаткові кнопки панелі інструментів забезпечують зручний доступ до часто використовуваних команд, наприклад, для вибору режимів "Selection" (вибір) і "Connection" (з'єднання), вирівнювання елементів, настройки автоматичної зміни розміру елементів і попереднього перегляду форм.

• Вікно "Навигатор". У цьому вікні всі елементи (як візуальні, так і інші) додатки представлені у вигляді дерева. У цьому вікні також позначається елемент, який змінюється в даний час в GUI Builder. Крім того, це вікно дозволяє зручно розмістити елементи на доступних панелях.

• Вікно "Палитра". Настроюваний список доступних елементів з вкладками для елементів JFC / Swing, AWT і JavaBeans і засобами виклику диспетчерів компонування. Крім того, це вікно дозволяє створювати, видаляти і змінювати порядок відображувані в ньому категорії за допомогою спеціального засобу настроювання.

• Вікно "Свойства". У цьому вікні відображаються властивості елемента, вибраного в GUI Builder, вікні "Навигатор", вікні "Проэкты" або вікні "Файлы".

При натисканні кнопки "Источник" на екрані з'являється вихідний код програми на Java, що відображається в редакторі. Розділи коду, які були автоматично створені GUI Builder, позначаються синім кольором і називаються захищеними блоками (Guarded Blocks). Текст із захищених блоків неможливо змінити в режимі перегляду коду. Для зміни у цьому режимі доступний лише код, що відображається в редакторі на білому фоні. При необхідності коригування коду, що знаходиться в захищеному блоці, слід натиснути кнопку "Проэкт", після чого знову з'явиться екран GUI Builder, на якому можна внести необхідні зміни. Після збереження змін вихідний код файлу автоматично оновлюється.

Ключові поняття

GUI Builder вирішує основні проблеми, що виникають при розробці графічного інтерфейсу Java, шляхом раціоналізації процесу створення графічних інтерфейсів, звільняючи розробників від необхідності вивчення особливостей диспетчерів компонування Swing. Це досягається за рахунок додавання в GUI Builder середовища IDE NetBeans підтримки прямий парадигми "вільного проектування" (Free Design) з простими з точки зору сприйняття і реалізації правилами розміщення об'єктів. У процесі проектування форми GUI Builder надає візуальні засоби підтримки, пропонуючи оптимальне розташування і вирівнювання елементів. При цьому GUI Builder трансформує приймаються розробником рішення щодо позиціювання об'єктів в функціональний UI, реалізований диспетчером компоновки GroupLayout та іншими засобами Swing. Завдяки моделі динамічного розміщення елементів поведінку графічного інтерфейсу в середовищі GUI Builder повністю аналогічно такому в продуктивній середовищі виконання, що дозволяє вносити коректування без зміни вже встановлених взаємозв'язків між елементами. Кожного разу при зміні розмірів форм, перемиканні регіональних і мовних налаштувань або застосуванні нового стилю графічного інтерфейсу автоматично адаптується згідно з новими параметрами вставок і зсувів.

Концепція вільного проектування "Free Design"

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

Автоматичне розташування елементів (прив'язки)

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

Візуальні засоби підтримки

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

Перші дії

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

Завдяки парадигмі вільного проектування розробники позбавлені від тривалого вивчення тонкощів роботи з диспетчерами компоновки в цілях управління їх розміром і позицією в контейнерах. Все, що потрібно, - це розмістити методом звичайного пересування необхідні для форми графічного інтерфейсу елементи так, як показано на доданих ілюстраціях.

Додавання елементів: основні функції

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

Після додавання елемента "JFrame" як контейнера форми верхнього рівня слід додати кілька панелей JPanel, які дозволять об'єднати елементи UI в кластери, розділені кордонами з заголовками. При вивченні наступних ілюстрацій зверніть увагу на поведінку IDE при виконанні цієї операції шляхом перетягування.

Для додавання панелі JPanel:

1. У вікні "Палитра" виберіть елемент "Панэть" в категорії "Контэйнеры Swing" клацанням миші.

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

Елемент JPanel з'являється у формі ContactEditorUI з виділенням помаранчевим кольором, вказує на те, що цей елемент вибраний (див. малюнок нижче). Після того як кнопка миші буде відпущена, на екрані відобразяться невеликі індикатори, що показують точки прив'язки елемента, а у вікні "Навигатор" з'явиться відповідний вузол JPanel.

Після цього слід змінити розміри панелі JPanel для забезпечення простору, в якому розміщуватимуться інші елементи. Однак спочатку відзначимо ще одну функцію візуалізації GUI Builder. Для цього зніміть вибір доданої панелі JPanel. Елемент зникає, оскільки для нього ще не була додана кордон з заголовком. Однак зверніть увагу на те, що при наведенні курсору на панель JPanel її краю відображаються світло-сірим кольором, що дозволяє відразу визначити межі цієї панелі. Тепер залишилося лише клацнути в межах цих кордонів для повторного вибору елемента, після чого знову з'являться мітки-маніпулятори для зміни розміру і індикатори прив'язки.

Для зміни розмірів панелі JPanel:

1. Виберіть тільки що додану панель JPanel. По периметру елемента з'являються невеликі квадратні мітки-маніпулятори.

2. Клацніть мітку-маніпулятор на правій межі панелі JPanel і, не відпускаючи кнопки миші, переміщайте мітку до тих пір, поки поруч з кордоном не з'явиться пунктирна напрямна.

3. Відпустіть кнопку миші. Розмір елемента буде змінено.

Тепер елемент JPanel розширений і охоплює простору між лівим і правим полем контейнера з урахуванням рекомендованого зсуву (див. малюнок нижче).

Тепер, після додавання панелі, яка буде містити інформацію про ім'я, необхідно повторити цей процес для додавання ще одного поля, призначеного для електронної адреси. Друге поле буде розміщене безпосередньо під першим. Повторіть дві попередні процедури, звертаючи увагу на пропоноване GUI Builder розміщення елементів. Слід зазначити, що запропонований вертикальний інтервал між двома панелями JPanel набагато менше, ніж інтервал між кордонами. Після додавання другої панелі JPanel слід змінити її розміри так, щоб вона заповнила собою простір, що залишився форми (по вертикалі).

Оскільки функції у верхніх і нижніх розділах графічного інтерфейсу повинні бути візуально помітні, до кожної панелі JPanel необхідно додати кордону і заголовок. Спочатку спробуємо це зробити за допомогою вікна "Свойства", а потім - з використанням меню.

Для додавання меж панелей JPanel із заголовком:

1. Виберіть верхню панель JPanel в GUI Builder.

2. У вікні "Свойства" натисніть кнопку з трьома крапками (...) поруч з властивістю "Border".

3. У який з'явився редакторі кордонів JPanel Border виберіть вузол "Рамка с надписью" на панелі "Доступные граници".

4. Нижче на панелі "Свойства" введіть Name в якості значення властивості "Заголовок".

5. Натисніть кнопку з трьома крапками (...) поруч з властивістю "Шрифт" , виберіть "Полужирный" в полі "Стиль шрифта" і введіть "12" в полі "Размер". Натисніть кнопку "OK" для закриття діалогових вікон.

6. Вибрати нижню панель JPanel і повторіть дії 2-5, але на цей раз клацніть правою кнопкою миші панель JPanel і відкрийте вікно "Свойства" за допомогою контекстного меню. Введіть E-mail у поле властивості "Заголовок".

До обох елементам JPanel тепер додані кордону з заголовками.

Додавання окремих елементів до форми

Тепер додамо елементи, які будуть представляти фактичну контактну інформацію в списку контактів. Для цього необхідно додати чотири текстових поля "JTextField", в яких буде міститися контактна інформація, і чотири елементи "JLabel" для опису вмісту цих полів. При виконанні цієї процедури зверніть увагу на горизонтальні і вертикальні напрямні, автоматично виводяться GUI Builder, які відображають переважне відстань між елементами згідно стилю операційної системи. Таким чином забезпечується відповідність між створюваним графічним інтерфейсом і загальним стилем операційної системи під час виконання.

Для додавання до форми елемента "JLabel":

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

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

Елемент "JLabel" додається до форми, а у вікні "Навигатор" з'являється відповідний вузол.

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

Для зміни тексту елемента "JLabel":

1. Двічі клацніть елемент "JLabel" для вибору тексту.

2. Введіть First Name: і натисніть клавішу Enter.

Відображається нове ім'я "JLabel", і ширина елемента коректується згідно з новим текстом.

Тепер слід додати текстове поле "JTextField", на прикладі якого ми розглянемо функцію вирівнювання по базовій лінії в GUI Builder.

Для додавання поля "JTextField" до форми:

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

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

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

Перед наступним дією слід відразу вставити додатковий елемент "JLabel" і "JTextField" праворуч від вже доданих елементів. Тепер слід ввести Last Name: в якості тексту "JLabel"; при цьому текст всередині елемента "JTextField" поки не змінюється.

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

1. Виберіть тільки що доданий елемент "JTextField" праворуч від елемента "JLabel" Last Name:.

2. Перетягніть мітку-маніпулятор правого краю елемента "JTextField" до правої межі панелі JPanel.

3. Після появи вертикальних напрямних, які відображають відстань між текстовим полем і правим краєм панелі JPanel, відпустіть кнопку миші для зміни розмірів "JTextField".

Права межа елемента "JTextField" буде вирівняна відповідно до запропонованого полем панелі JPanel.

Додавання декількох елементів до форми

Тепер слід додати елементи "JLabel" Title: і Nickname:, що описують два текстових поля "JTextField", які будуть додані пізніше. При перетягуванні елементів будемо утримувати натиснутою клавішу Shift для швидкого їх додавання до форми. При цьому в GUI Builder знову з'являються відповідні горизонтальні і вертикальні напрямні, які вказують на переважне розміщення елемента.

Для додавання декількох "JLabel" до форми:

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

2. Перемістіть курсор у формі безпосередньо під елемент "JLabel" First Name:, який був доданий раніше. При появі напрямних, які вказують на вирівнювання лівої межі нового елемента "JLabel" з кордоном верхнього елементу "JLabel" і наявність невеликого проміжку між цими елементами, клацніть мишею при натиснутій клавіші Shift для підтвердження позиції першого елемента "JLabel".

3. Натисніть клавішу Shift і клацніть мишею для розміщення другого елементу "JLabel" праворуч від першого. Перед розміщенням другого елементу "JLabel" слід відпустити і знову натиснути клавішу Shift. В іншому випадку перед розміщенням другого елементу необхідно натиснути клавішу Escape.

Елементи "JLabel" додаються до форми і утворюють в ній другий ряд. У вікні "Навигатор" з'являються вузли, відповідні доданим елементам.

Перед наступним дією необхідно змінити ім'я елемента "JLabel", що дозволить перевірити результати вирівнювання, яке буде вироблено трохи пізніше.

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

1. Двічі клацніть перший елемент "JLabel" для вибору тексту, який буде відображатися в цьому елементі.

2. Введіть Title: і натисніть клавішу Enter.

3. Повторіть кроки 1 і 2 шляхом введення Nickname: в якості значення властивості "Name" елемента "JLabel".

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

Вставка елементів

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

Для вставки текстового поля "JTextField" між двома елементами "JLabel":

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

2. Наведіть курсор на елемент "JLabel" Title: і Nickname: у другому ряду, що призведе до розміщення поля "JTextField" поверх цих елементів і його вирівнюванню згідно їх базової лінії. У разі виникнення труднощів при розміщенні нового текстового поля можна прив'язати його до лівої направляючої елемента "JLabel" Nickname.

3. Клацніть для розміщення поля "JTextField" між елементами "JLabel" Title: і Nickname:.

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

Залишається додати до форми ще один елемент "JTextField" для відображення імені контакту в правій частині форми.

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

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

2. Перемістіть курсор вправо від підпису Nickname і клацніть для розміщення текстового поля.

Поле "JTextField" розміщується в зазначеній позиції ліворуч від елемента "JLabel".

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

1. Перетягніть мітки-маніпулятори поля "JTextField", пов'язаного з текстом Nickname:, яке було додано в попередній задачі в праву частину панелі JPanel.

2. Після появи вертикальних напрямних, які відображають відстань між текстовим полем і краями панелі JPanel, відпустіть кнопку миші для зміни розмірів елемента "JTextField".

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