Кодирование простого пользовательского интерфейса Java с использованием NetBeans и Swing

Пол Лихи (Paul Leahy) — программист с более чем десятилетним опытом работы в ИТ-индустрии как штатным разработчиком, так и сторонним разработчиком.

Графический пользовательский интерфейс (GUI), созданный с использованием платформы Java NetBeans, состоит из нескольких уровней контейнеров. Первый слой — это окно, используемое для перемещения приложения по экрану вашего компьютера. Он известен как контейнер верхнего уровня, и его задача — предоставить место для работы всем другим контейнерам и графическим компонентам. Как правило, для настольного приложения этот контейнер верхнего уровня создается с использованием

Вы можете добавить любое количество слоев в свой дизайн графического интерфейса, в зависимости от его сложности. Вы можете размещать графические компоненты (например, текстовые поля, метки, кнопки) непосредственно в

, или вы можете сгруппировать их в другие контейнеры.

Слои графического интерфейса известны как иерархия сдерживания и могут рассматриваться как генеалогическое древо. Если

если дедушка сидит наверху, то следующий контейнер можно рассматривать как отец, а содержащиеся в нем компоненты — как дочерние элементы.

Для этого примера мы создадим графический интерфейс с

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

Существует два способа создания этого графического интерфейса с помощью NetBeans. Во-первых, вручную ввести код Java, представляющий графический интерфейс, который обсуждается в этой статье. Во-вторых, использовать инструмент NetBeans GUI Builder для создания графических интерфейсов Swing.

Информацию об использовании JavaFX вместо Swing для создания графического интерфейса см. в разделе Что такое JavaFX?

Примечание: Полный код для этого проекта находится в Примере кода Java для создания простого приложения с графическим интерфейсом.

Настройка проекта NetBeans

Создайте новый проект Java-приложения в NetBeans с основным классом. Мы назовем проект

Контрольно-пропускной пункт: В окне "Проекты" NetBeans должна быть папка GuiApp1 верхнего уровня (если имя не выделено жирным шрифтом, щелкните папку правой кнопкой мыши и выберите

папка должна быть папкой исходных пакетов с

называется GuiApp1. Эта папка содержит основной класс с именем

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

класс, между

Этот импорт означает, что все классы, необходимые для создания этого приложения с графическим интерфейсом, будут доступны для использования.

В основной метод добавьте эту строку кода:

Это означает, что первое, что нужно сделать, это создать новый

объект. Это хорошее сокращение для примеров программ, так как нам нужен только один класс. Чтобы это работало, нам нужен конструктор для

класс, поэтому добавьте новый метод:

В этом методе мы поместим весь код Java, необходимый для создания графического интерфейса, а это означает, что с этого момента каждая строка будет находиться внутри

Создание окна приложения с использованием JFrame

Примечание по дизайну: Возможно, вы видели опубликованный код Java, в котором показан класс (т. е.

) расширенный от

. Затем этот класс используется в качестве главного окна графического интерфейса приложения. На самом деле нет необходимости делать это для обычного приложения с графическим интерфейсом. Единственный раз, когда вы хотели бы продлить

класс, если вам нужно сделать более конкретный тип

для получения дополнительной информации о создании подкласса).

Как упоминалось ранее, первый уровень графического интерфейса представляет собой окно приложения, состоящее из

объект, вызовите

Далее мы настроим поведение окна нашего приложения с графическим интерфейсом, выполнив следующие четыре шага:

1. Убедитесь, что приложение закрывается, когда пользователь закрывает окно, чтобы оно не продолжало работать в фоновом режиме:

2. Установите заголовок для окна, чтобы у окна не было пустой строки заголовка. Добавьте эту строку:

3. Установите размер окна таким образом, чтобы размер окна соответствовал размещенным в нем графическим компонентам.

Примечание по дизайну: Альтернативным вариантом установки размера окна является вызов

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

4. Расположите окно по центру экрана компьютера, чтобы оно не отображалось в верхнем левом углу экрана:

Добавление двух панелей JPanel

Две строки здесь создают значения для

объекты, которые мы вскоре создадим, используя два

массивы. Это упрощает заполнение некоторых примеров записей для этих компонентов:

Создайте первый объект JPanel

Теперь давайте создадим первый

объект. Он будет содержать

. Все три создаются с помощью методов конструктора:

Примечания к вышеуказанным трем строкам:

• переменная объявлена окончательный. Это означает, что переменная может содержать только то, что создано в этой строке. В результате мы можем использовать переменную во внутреннем классе. Позже в коде станет ясно, почему мы хотим этого.
• Элементы и имеют значения, переданные им для установки их графических свойств. Метка будет отображаться как «Фрукты:», а в поле со списком теперь будут значения, содержащиеся в массиве, объявленном ранее.
• Метод размещения в нем графических компонентов. A использует FlowLayout в качестве менеджера компоновки по умолчанию. Это нормально для этого приложения, так как мы хотим, чтобы метка располагалась рядом с выпадающим списком. Пока мы добавим первый, он будет выглядеть нормально:

Создайте второй объект JPanel

следует той же схеме. мы добавим

и установите значения этих компонентов как «Овощи:», а второй

. Единственным другим отличием является использование

метод, чтобы скрыть

. Не забывайте, что будет

контролировать видимость двух

. Чтобы это работало, нужно быть невидимым в начале. Добавьте эти строки, чтобы настроить второй

Одна строка, которую стоит отметить в приведенном выше коде, — это использование

value заставляет список отображать содержащиеся в нем элементы в двух столбцах.Это называется «стиль газеты» и является хорошим способом отображения списка элементов, а не более традиционного вертикального столбца.

Добавление последних штрихов

Последний необходимый компонент — это

контролировать видимость

с. Значение, переданное в

конструктор устанавливает метку кнопки:

Это единственный компонент, для которого будет определен прослушиватель событий. «Событие» происходит, когда пользователь взаимодействует с графическим компонентом. Например, если пользователь нажимает кнопку или вводит текст в текстовое поле, происходит событие.

Слушатель событий сообщает приложению, что делать, когда происходит событие.

использует класс ActionListener для «прослушивания» нажатия кнопки пользователем.

Создайте прослушиватель событий

Поскольку это приложение выполняет простую задачу при нажатии кнопки, мы можем использовать анонимный внутренний класс для определения прослушивателя событий:

Это может показаться страшным кодом, но вам просто нужно разобрать его, чтобы увидеть, что происходит:

• Сначала мы вызываем метод . Этот метод ожидает экземпляр класса, который прослушивает событие.
• Затем мы создаем экземпляр класса, объявляя новый объект, используя и затем предоставляя анонимный внутренний класс — весь код в фигурных скобках.
• Внутри анонимного внутреннего класса добавьте метод с именем . Это метод, который вызывается при нажатии кнопки. Все, что нужно в этом методе, это использовать для изменения видимости s.

Добавьте панели JPanel в JFrame.

Наконец, нам нужно добавить два

использует менеджер компоновки BorderLayout. Это означает, что есть пять областей (в трех рядах)

который может содержать графическую составляющую (СЕВЕР, , ЮГ). Укажите эту область с помощью

Сделайте JFrame видимым

Наконец, весь приведенный выше код будет бесполезным, если мы не установим

Теперь мы готовы запустить проект NetBeans для отображения окна приложения. Нажатие на кнопку переключает отображение поля со списком или списка.