Андрей Дмитриев Февраль 2008

Разработка графического
интерфейса приложения
Андрей Дмитриев
andrei-dmitriev@yandex.ru
http://in4mix2006.narod.ru/
2008
Copyright (C) 2000 - 2008 Sun Microsystems, Inc. All rights reserved.
Программа


Графический интерфейс: возможности Java
Автоматизация создания графического
интерфейса
Обзор графических
компонентов Swing




Окна
Контейнеры
Меню
Элементы управления
Обзор графических
компонентов: окна





Главное окно (JFrame)
Стандартный диалог (JOptionPane)
Диалоговое окно (JDialog)
Выбор файла (JFileChooser)
Выбор цвета (JColorChooser)
Окна: главное окно (JFrame)




При запуске приложения открывается главное
окно
На нем располагается меню и все
необходимые компоненты
Можно выбрать оптимальное расположение
для компонентов
Также можно задать нужный Look&Feel (Java,
Windows и т.п.)
Окна: стандартный диалог
(JOptionPane).

Модальный диалог можно создать
программно:
JOptionPane optionPane = newJOptionPane(“Text”,
JOptionPane.QUESTION_MESSAGE,
JOptionPane.YES_NO_OPTION);



Количество и текст кнопок можно менять
в конструкторе диалога
Можно также менять заголовок и картинку
Предусмотрен ряд стандартных картинок:
• Вопрос (question)
• Информация (information)
• Предупреждение (warning)
• Ошибка (error)

Их внешний вид зависит от текущего
Look&Feel’a. Можно вставлять
собственные картинки
Окна: диалоговое окно
(JDialog)


На диалоговом окне можно
размещать любые контейнеры
и элементы управления
Можно сделать диалоговое
окно модальным, задать
размеры по умолчанию,
приоритет (поверх всех окон)
и т.п.
Окна: выбор файла (JFileChooser)


•
•
Предоставляет
графический интерфейс
выбора файла (для
открытия, сохранения и
т.п.)
Можно создавать и
удалять файлы в
выбранном каталоге
Можно задать фильтр по типу файла
(.jpg, .exe и т.п.)
Каждый раз «запоминает» выбранный
каталог во время работы приложения
Окна: выбор цвета (JColorChooser)



Позволяет пользователю
выбрать цвет (например,
цвет кисточки для
рисования)
Палитру цветов можно
разместить на форме
приложения, а можно
отображать в
диалоговом окне
Можно задавать
цветовую модель (HSB,
RGB, etc.)
Обзор графических
компонентов: контейнеры





Панель (JPanel)
Панель с вкладками (JTabbedPanel)
Панель с прокруткой (JScrollPane)
Панель с разделителем (JSplitPane)
Панель инструментов (JToolBar)
Контейнеры: панель (JPanel)
•
•
•
Основной контейнер для
элементов управления
По умолчанию невидим на
форме, но можно обозначить:
•
Показывая границы
•
Закрашивая выбранным
цветом
Удобен для логической
группировки компонентов
(например, можно спрятать все
компоненты панели, спрятав
саму панель)
Контейнеры:
Панели с прокруткой (JScrollPane) и
разделителем (JSplitPane)



Прокрутка позволяет показать
больше информации, чем
могло бы поместиться в
отведенную под окно область
экрана
Разделитель позволяет
пользователю динамически
перераспределять
пространство окна между
несколькими панелями
Можно задать минимальные
размеры каждой панели и
расположение разделителя
по умолчанию
Контейнеры:
панель со вкладками (JTabbedPane)




Позволяет нескольким панелям располагаться в одной
области экрана
Пользователь выбирает нужную ему в данный момент
панель, нажимая на соответствующую вкладку
Можно менять расположение вкладок относительно
активной панели (вверх/внизу/слева/справа)
Переключение между вкладками также можно
конфигурировать: переключать при помощи:
• мыши,
• табуляции
• горячих клавиш
Контейнеры:
панель инструментов (JToolBar)




Содержит группу из нескольких элементов управления,
расположенных в строке или колонке. Обычно это кнопки-значки
Предоставляет быстрый доступ к функциональности, также
доступной из меню
Пользователь может менять расположение панели инструментов
и выносить ее в отдельное окно
Можно задать следующие свойства:

Изменение вида кнопок при наведении мыши

Фиксация панели

Добавление разделителя и
компонентов – не кнопок

многое другое
Обзор графических
компонентов: меню


Компоненты меню
Пункты меню
Компоненты меню



•
Меню позволяет пользователю
выбрать действие или опцию
Существенно экономит место на
форме
Содержит следующие компоненты :

JMenuBar (общая панель)

JMenu (отдельное меню)

JSeparator (разделитель)

JMenuItem (пункт меню)
Всплывающее (контекстное) меню появляется в любой части
приложения при наступлении определенных событий. Для
этого используется класс JPopupMenu
Пункты меню





Пункты меню представляют
собой кнопки
Они могут быть следующих
видов:

MenuItem/TextField

MenuItem/CheckBox

MenuItem/RadioButton
Можно изменить значок пункта
меню и для него задать
комбинацию клавиш
Расположение пунктов меню
можно конфигурировать
Пункты меню могут
активироваться клавишами
Обзор графических компонентов:
элементы управления









Надпись (JLabel, Label)
Кнопка (JButton, Button)
Кнопки выбора (JRadioButton, JCheckBox)
Текстовое поле (JTextField,TextField)
Специальные поля (JPasswordField, JFormattedField)
Список (JList, List)
Выпадающий список (JComboBox, Choice)
Таблица (JTable)
Дерево (JTree)
Элементы управления:
надпись (JLabel)




Можно вставить текст или картинку
Пользователь не может изменить содержимое
В окне свойств можно задать шрифт, цвет надписи и
т.п.
Можно менять свойства во время работы
приложения, при наступлении определенных
событий (прятать надпись, менять текст и т.п.)
Элементы управления:
Кнопка (JButton)




Предоставляет пользователю возможность
управлять приложением
Обычно обрабатывается нажатие кнопки
Можно вставить текст или картинку
Внешний вид кнопки автоматически меняется
при наступлении определенных событий
(деактивация, нажатие и т.п.)
Элементы управления: Кнопки
выбора (JRadioButton,
JCheckBox)



RadioButton обычно
объединяют в группу
(ButtonGroup) – при этом лишь
одна из кнопок группы может
быть выбрана
CheckBox позволяет
пользователю совершить
множественный выбор
Каждая кнопка
сопровождается надписью
Элементы управления:
Текстовое поле (JTextField)



Позволяет пользователю
ввести небольшое количество
текста
Если количество текста может
быть большим, лучше
использовать JTextArea
Можно обработать события
получения и потери фокуса
(пользователь начал/закончил
ввод текста)
Элементы управления: специальные
поля (JPasswordField, JFormattedField)

JPasswordField используется для ввода пароля.
Основные особенности:
• Пароль отображается в виде строки
специальных знаков (например, звездочек)
• Обеспечивается более безопасное хранение
пароля (не строка, а массив символов)
•
•
•
JFormattedField используется для ввода данных
специального формата
Элементу управления назначается правило,
которому должны соответствовать введенные
данные
Можно использовать для ввода даты, телефона,
лицензионного кода и т.п.
Элементы управления:
Список (JList)




Позволяет пользователю выбрать из группы
элементов, расположенных в
одной или
нескольких колонках
По умолчанию возможна прокрутка (и,
соответственно, неограниченное количество
элементов)
Список может быть предопределенным или
изменяться динамически (для этого необходимо
использовать свою модель списка)
Можно определять возможность выбора:
• Одного элемента списка
• Нескольких элементов подряд
• Нескольких любых элементов
Элементы управления:
Выпадающий список (JComboBox)




Позволяет пользователю выбрать один или
несколько элементов списка
Экономит место на форме (список появляется
лишь при нажатии на кнопку)
Используя свою модель списка можно
динамически варьировать набор его значений
Существуют 2 типа выпадающих списков:
• Нередактируемый (можно лишь выбрать
одно из предложенных значений)
• Редактируемый (можно либо выбрать
значение из списка, либо ввести свое)
Элементы управления:
Таблица (JTable)
Является одновременно контроллером и представлением
(позволяет просматривать, редактировать и вносить данные)
Можно использовать собственную модель данных, наследующую
от базового класса (например, AbstractTableModel)


•
В ячейках могут быть
не только текстовые
поля, но и другие
элементы
Элементы управления:
дерево (JTree)





Отображает иерархию данных
Каждая строка содержит одно
значение и представляет собой
узел
Узел может включать в себя
вложенные узлы; пользователь
может раскрывать и прятать их
динамически
Типичный пример – иерархия
файлов и каталогов
Структура дерева может быть
статической или динамической
(при использовании своей модели
данных)
Графический дизайнер
Matisse
Основные возможности
 Окна графического дизайнера
 Обзор графических компонентов
 Обработка событий

Создание графических
компонентов в Matisse



Берет на себя большую часть работы по созданию
графического интерфейса, позволяя разработчику
сосредоточится на логике приложения
Интуитивно понятный WISIWIG редактор
Среда сгенерирует необходимый код для интеграции
компонента в приложение






Генерация обработчиков событий при помощи среды
Управление свойствами компонента в окне свойств.
Полный набор компонентов пакета Swing и AWT
Интернационализация
Создание приложений на базе технологии Java Web
Start
И др.
Окна графического дизайнера
Можно настраивать внешний вид графического
дизайнера, добавляя, удаляя и масштабируя окна.
Каждое из окон обладает своими функциональными
возможностями:





Рабочая область (Design Area)
Палитра (Palette)
Инспектор (Inspector)
Окно свойств (Properties Window)
И т.д.
Рабочая область (Design Area) дизайн



Возможность создать форму приложения и задавать
взаимное расположение компонент мышкой
Удобство создания обработчиков событий
Помощник, позволяющий располагать компоненты
оптимально
Рабочая область (Design Area)
– исходный код


При работе с
визуальным
редактором
автоматически
генерируется
Сгенерированн
ый код выделен
цветом и
защищен от
случайного
изменения
Палитра (Palette)


Предоставляет полный набор компонентов для
создания графического приложения
Содержит JFC/Swing и AWT компоненты
Инспектор (Inspector)



Отображает дерево
компонентов приложения (как
видимых, так и невидимых)
Помогает быстро найти
интересующий элемент
управления и перейти на
нужную форму (диалог)
При выделении узла дерева в
рабочей области выделяется
соответствующий графический
компонент (и наоборот)
Окно свойств (Properties Window)


Отображает все свойства
выбранного компонента
 Название
 Отображаемый текст
 Цвет фона
 Текст подсказки
 И др. (набор зависит от
компонента)
Значения свойств можно
менять

Точная настройка расположения
компоненты
Обработка событий



Для создания обработчика
нужно выбрать событие во
вкладке Events и дважды
щелкнуть мышкой
Фокус автоматически
перемещается в
сгенерированный метод в
исходном коде
Туда нужно вписать код,
выполняющийся при
наступлении выбранного
события
Ссылки

Графический дизайнер в NetBeans (Matisse). На странице
можно найти ряд роликов, демонстрирующих
возможности дизайнера и много полезных ссылок:
• http://www.netbeans.org/kb/articles/matisse.html
• Использование компонентов Swing. Для каждого
компонента приведены примеры, описание и
функциональные возможности:
• http://java.sun.com/docs/books/tutorial/uiswing/componen
ts/index.html
• Руководство по созданию простейшего графического
приложения в NetBeans 5.0:
• http://www.netbeans.org/kb/50/quickstart-gui.html
Ролики, демонстрирующие
создание графического приложения
в NetBeans




http://testwww.netbeans.org/kb/41/flashmatisse.html
http://weblogs.java.net/blog/claudio/archive/nblayouts.html
http://testwww.netbeans.org/kb/articles/accountwith-matisse.html
http://weblogs.java.net/blog/claudio/archive/nbreusable.html
Q&A
Спасибо!
Разработка графического
интерфейса приложения
Андрей Дмитриев
andrei-dmitriev@yandex.ru
http://in4mix2006.narod.ru/
2008