Java: Создание интерфейса пользователя

Ни одна современная программа, предназначенная для пользователя, не обходится без удобного, понятного, в идеале – красивого пользовательского интерфейса (GUI).

Мы познакомимся с пакетом AWT.

Пакет java.awt

Пакет java.awt, предоставляет технологию Abstract Window Toolkit (AWT) для создания графического (оконного) интерфейса пользователя – GUI.  Мы рассмотрим несколько инструментов, доступных программисту – работа с цветами, шрифтами, отрисовка графических примитивов, менеджеры компоновки.

Abstract Windowing Toolkit (AWT) - набор классов Java, которые позволяют нам создавать графический интерфейс пользователя (GUI) и принимать пользовательский ввод через клавиатуру и мышь. AWT обеспечивает нас различными элементами, которые позволяют создавать привлекательный и эффективный GUI. Он содержит

·        Контейнеры 

·        Компоненты 

·        Менеджеры компоновки

·        Графические примитивы

·        Шрифты

·        События 

 Контейнер

Контейнер - область, которая может содержать элементы. Контейнер подобно окну. Также как и окно, контейнер может иметь рамки, области окна, замки и зацепки, контейнер может содержать меньшие по размерам компоненты. Мы можем иметь стеклянные области окна или толстые ставни, поэтому мы и можем открыть или закрыть окно. 

В пакете java.awt есть класс по имени  Container, который является родителем двух обычно используемых контейнеров Frame (фрейм) и Panel (панель). 

Container:

·        Фрейм - отдельное окно,

·        Панель - область, находящиеся в пределах окна.

Фрейм

Для создания фрейма нужно определить пользователем класс FrameDemo - подкласс класса Frame. Этот класс (FrameDemo) имеет конструктор, в котором мы вызываем метод super (), который в свою очередь вызовет конструктор суперкласса (в данном случае Frame). Цель super () здесь состоит в том, чтобы вызвать родительский конструктор класса, который тогда создаст объект дочернего класса для создания фрейма.

Однако, фрейм будет невидим и не будет иметь никаких измерений. Чтобы позаботится об этом, мы используем два метода в методе main() - setSize () и setVisible ().
Создадим новый проект JavaAWT, написав следующую программу (для удобства чтения текста примера, щелкните на него)

Обратите внимание:

• Созданный класс JavaAWT – наследник класса Frame (JavaAWT extends Frame)
• Объявлен конструктор класса JavaAWT(String title), который вызывается при создании фрейма

Запустив проект, вы увидите созданное окно-фрейм. Оно пока не взаимодействует с пользователем и не реагирует на щелчки мыши. Закрыть его можно, щелкнув на крестик в строке состояния системы NetBeans (внизу окна, справа).

Задание 1. Наберите пример. Отладьте и запустите его. Остановите выполнение программы. Замените наименование окна и сделайте его прямоугольным.

Метки и текстовые поля

Метки используются, чтобы указать назначение (название) элемента. Они не являются доступными для редактирования пользователям, но указывают назначение других компонентов на экране. Например, если мы просто размещаем textbox на экране, ожидая от пользователя, когда он введёт название, как пользователь может узнать, что он должен вводить в элемент textbox? При использовании метки «Название» рядом с textbox, было бы очень просто понимать цель текстового поля. Для создания метки используется класс Label.
Текстовая поле - элемент GUI, который позволяет вводить текст. Текстовое поле вообще принимает только одну линию ввода; для многострочного ввода используется элемент textarea.
Оператор setLayout(new FlowLayout()); организует последовательное размещение элементов в области.

Кнопки

Кнопки (buttons) обычно известны как неотъемлемая часть любого GUI. Кнопка - самый простой способ инициировать какое-нибудь пользовательское действие. Кнопки создаются аналогично текстовым полям путем использования класса Button (см. подробнее http://opensourcerules.net/java/gl6_3p2.html ).

Добавляем в нашу программу 3 кнопки:

Другие элементы интерфейса

В создаваемом пользователем окне аналогично можно разместить:

• Флажки (Checkbox)   (см. http://opensourcerules.net/java/gl6_3p3.html );
• Переключатели (RadioButton) 
• Списки (Lists и Choice  - см.   http://opensourcerules.net/java/gl6_3p3.html  и http://www.intuit.ru/studies/courses/16/16/lecture/27125?page=3 )
• Полосы прокрутки (Scrollbar –см.  http://www.intuit.ru/studies/courses/16/16/lecture/27125?page=3 )

Задание 2. Создайте окно, в котором имеются три текстовых поля с пояснениями "Фамилия", "Имя", "Отчество" соответственно, 2 флажка для выбора пола (мужской или женский) и кнопка "Внести в список". Размещение этих элементов производится в строку, но вы можете управлять им, пользуясь метками с пробелами.

Рисование с помощью графических примитивов

Обычно для рисования используется наследник класса Component – класс Canvas. При создании наследника этого класса, переопределяют метод paint. Этот метод в качестве параметра получает объект класса Graphics. В этом классе определено множество методов для отрисовки простейших графических элементов – линий, прямоугольников и многоугольников, окружностей и овалов, текста, картинок и т.д. (подробнее см. http://www.intuit.ru/studies/courses/16/16/lecture/27125?page=2 )

В примере ниже используются методы рисования линии    g.drawLine( ) и залитого  выбранным цветом с прямоугольника g.fillRect( ). Цвет заливки определяется экземпляром класса Color и задается с помощью трех чисел (от 0 до 255), соответствующих красной, зеленой и синей компонентам (RGB).

Задание 3. Создайте окно,  в котором нарисован домик:

Менеджер компоновки

Экранные компоненты на пользовательском интерфейсе могут быть размещены различными способами. Например, горизонтально, последовательным способом или в клетках некоторой  сетки. Каждая из этих схем реализуется своим менеджером размещения (компоновки). AWT обеспечивает группу классов, известных как менеджеры размещения, которые обрабатывают управление размещения.. Менеджер размещения автоматически устанавливает компоненты в пределах контейнера.

Менеджеры размещения, доступные в Java:

• Flow Layout (Размещение Потока) 
• Border Layout (Размещение Границы) 
• Card Layout (Размещение Карты)
• Grid Layout (Размещение Сетки) 
• GridBag Layout 

Особенности упомянутых классов описаны здесь: http://opensourcerules.net/java/gl6_4.html

Пример ниже демонстрирует использование различных размещений внутри областей -невидимых панелей, на каждой из которых реализуется свое размещение.

Пример.

public class JavaAppLayout extends Frame {

//class MultipleLayouts extends Frame {

Panel mainPanel = new Panel();

Panel p1 = new Panel();

Panel p2 = new Panel();

Panel p3 = new Panel ();

Panel p4 = new Panel ();

Panel p5 = new Panel();

Button btnl = new Button( "Button 1" );

Button btn2 = new Button( "Button 2" );

Button btn3 = new Button( "Button 3" );

Button btn4 = new Button( "Button 4" );

Button btn5 = new Button( "Button 5" );

Button btn6 = new Button( "Button 6" );

public JavaAppLayout(String title) {

super(title);

setLayout(new FlowLayout(FlowLayout.CENTER));

add(mainPanel);

p1.setLayout(new BorderLayout() ) ;

p1.add(btnl, BorderLayout.EAST);

p1.add(btn2, BorderLayout.WEST);

p2.setLayout(new GridLayout(2, 2) ) ;

p2.add(btn3);

p2.add(btn4);

p2.add(btn5);

p2.add(btn6);

mainPanel.add(p1);

mainPanel.add(p2);

         }

public static void main(String args[]) {

JavaAppLayout ml = new JavaAppLayout( "Multiple Layouts!" );

ml.setSize(300,300) ;

ml.setVisible(true);;

    }

   

}

Задание 4. Отладьте пример, разберитесь какие операторы организуют такое распределение элементов. Вернитесь к заданию 2 и попытайтесь красиво разместить  в окне элементы, созданные в нем.

Обработка пользовательских событий

Для, того, чтобы объекты в окне реагировали на действия пользователя, необходимо написать код обработки событий. Подробнее см. http://www.intuit.ru/studies/courses/16/16/lecture/27125?page=4#sect45

Литература

1. http://opensourcerules.net/osn_java.html
2. http://www.intuit.ru/studies/courses/16/16/lecture/27125?page=1
3. Пакет java.awt http://spec-zone.ru/RU/Java/Docs/7/api/java/awt/package-summary.html