Кодиране на прост Java графичен потребителски интерфейс

Графичен потребителски интерфейс (GUI), създаден с помощта на Java NetBeans платформа е съставен от няколко слоя контейнери. Първият слой е прозорецът, използван за преместване на приложението около екрана на вашия компютър. Това е известно като контейнер от най-високо ниво и неговата задача е да предостави на всички други контейнери и графични компоненти място за работа. Обикновено за настолно приложение този контейнер от най-високо ниво ще бъде направен с помощта на

клас.

Можете да добавите произволен брой слоеве към вашия GUI дизайн, в зависимост от неговата сложност. Можете да поставите графични компоненти (например текстови полета, етикети, бутони) директно в

или можете да ги групирате в други контейнери.

Слоевете на GUI са известни като йерархия на съдържанието и могат да се мислят като родословно дърво. Ако

е дядото, който седи на върха, тогава следващият контейнер може да се мисли като бащата и компонентите, които държи като деца.

За този пример ще създадем GUI с a

съдържащи две

и a

. Първият

ще проведе a

и

. Секундата

ще проведе a

и a

. Само един

(и следователно графичните компоненти, които съдържа) ще бъдат видими наведнъж. Бутонът ще се използва за превключване на видимостта на двете

.

Има два начина за изграждане на този GUI с помощта на NetBeans. Първото е ръчно да въведете Java кода, който представлява GUI, който се обсъжда в тази статия. Второто е да използвате инструмента NetBeans GUI Builder за изграждане на Swing GUI.

За информация относно използването на JavaFX, а не Swing за създаване на GUI, вижте Какво е JavaFX?

Забележка: Пълният код за този проект е на Пример Java код за изграждане на просто GUI приложение.

Създайте нов Ява Приложен проект в NetBeans с основен клас Ще наречем проекта

Контролна точка: В прозореца Проекти на NetBeans трябва да бъде папка GuiApp1 от най-високо ниво (ако името не е с удебелен шрифт, щракнете с десния бутон върху папката и изберете

). Под

папката трябва да бъде папка Source Packages с

наречен GuiApp1. Тази папка съдържа основния клас, наречен

.java.

Преди да добавим Java код, добавете следния импорт в горната част на

клас, между

линията и

:

Този импорт означава, че всички класове, от които се нуждаем, за да направим това GUI приложение, ще бъдат достъпни за нас.

В основния метод добавете този ред код:

Това означава, че първото нещо, което трябва да направите, е да създадете ново

обект. Това е хубаво пряко примерно програми, тъй като се нуждаем само от един клас. За да работи това, се нуждаем от конструктор за

клас, така че добавете нов метод:

В този метод ще поставим всички кодове на Java, необходими за създаването на GUI, което означава, че всеки ред оттук нататък ще бъде вътре в

метод.

Бележка за дизайн: Може би сте виждали Java код публикуван, който показва класа (т.е.

) удължен от a

. След това този клас се използва като основен прозорец на GUI за приложение. Наистина няма нужда да правите това за нормално GUI приложение. Единственият път, когато искате да разширите

клас е, ако трябва да направите по-специфичен тип

(погледни

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

Както бе споменато по-рано, първият слой на GUI е прозорец на приложение, направен от a

. За да създадете a

обект, обадете се на

конструктор:

След това ще зададем поведението на нашия прозорец с GUI приложение, като използваме тези четири стъпки:

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

2. Задайте заглавие на прозореца, така че прозорецът да няма празен заглавен ред. Добавете този ред:

3. Задайте размера на прозореца, така че прозорецът да е оразмерен, за да побере графичните компоненти, които поставяте в него.

Бележка за дизайн: Алтернативен вариант за определяне на размера на прозореца е да се обадите на

метод на

клас. Този метод изчислява размера на прозореца въз основа на графичните компоненти, които съдържа. Тъй като това примерно приложение не трябва да променя размера на прозореца си, просто ще използваме

метод.

4. Центрирайте прозореца, за да се появи в средата на екрана на компютъра, така че да не се показва в горния ляв ъгъл на екрана:

Двете линии тук създават стойности за

и

обекти, които ще създаваме скоро, използвайки два

масиви. Това улеснява попълването на някои примерни записи за тези компоненти:

Сега, нека да създадем първата

обект. Той ще съдържа a

и a

. И трите са създадени чрез техните конструкторски методи:

Бележки към горните три реда:

• Най-

  JPanel

  променлива е декларирана финал. Това означава, че променливата може да държи само

  JPanel

  което е създадено в този ред. Резултатът е, че можем да използваме променливата във вътрешен клас. Ще стане ясно защо искаме по-късно в кода.
• Най-

  JLabel

  и

  JComboBox

  имат изпратени стойности към тях, за да зададат своите графични свойства. Етикетът ще се появи като "Fruits:" и в комбинираната кутия вече ще има стойностите, съдържащи се в

  fruitOptions

  масив, деклариран по-рано.
• Най-

  добави ()

  метод на

  JPanel

  поставя в него графични компоненти. А

  JPanel

  използва FlowLayout по подразбиране мениджър на оформлението. Това е добре за това приложение, тъй като искаме етикетът да седи до комбинираната кутия. Стига да добавим

  JLabel

  първо, ще изглежда добре:

Секундата

следва същия модел. Ще добавим и

и a

и задайте стойностите на тези компоненти да бъдат "Зеленчуци:" и втори

масив

. Единствената друга разлика е използването на

метод за скриване на

. Не забравяйте, че ще има а

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

. За да работи това, човек трябва да е невидим в началото. Добавете тези редове, за да настроите втория

:

Един ред, който си струва да се отбележи в горния код, е използването на

метод на

. Най-

стойност прави списъка да показва елементите, които съдържа в две колони. Това се нарича "стил във вестника" и е приятен начин за показване на списък с елементи, а не по-традиционна вертикална колона.

Последният необходим компонент е

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

с. Стойността, предадена в

конструктор задава етикета на бутона:

Това е единственият компонент, който ще има дефиниран слушател на събития. „Събитие“ възниква, когато потребителят взаимодейства с графичен компонент. Например, ако потребителят кликне върху бутон или запише текст в текстово поле, тогава се случва събитие.

Слушател на събитие казва на приложението какво да прави, когато събитието се случи.

използва класа ActionListener, за да "слуша" за натискане на бутон от потребителя.

Тъй като това приложение изпълнява проста задача при натискане на бутона, можем да използваме анонимен вътрешен клас, за да определим слушателя на събитието:

Това може да изглежда като страшен код, но просто трябва да го разбиете, за да видите какво се случва:

• Първо, ние наричаме

  addActionListener

  метод на

  JButton

  . Този метод очаква екземпляр на

  ActionListener

  клас, който е класът, който слуша за събитието.
• След това създаваме инстанцията на

  ActionListener

  клас чрез деклариране на нов обект чрез

  нов ActionListener ()

  и след това предоставяне на анонимен вътрешен клас - което е целият код в къдравите скоби.
• Вътре в анонимния вътрешен клас добавете метод, наречен

  actionPerformed ()

  . Това е методът, който се извиква при натискане на бутона. Всичко, което е необходимо в този метод, е да се използва

  setVisible ()

  за промяна на видимостта на

  JPanel

  с.

Накрая трябва да добавим двете

пясък

към

. По подразбиране, a

използва мениджъра на оформлението на BorderLayout. Това означава, че има пет области (в три реда) на

които могат да съдържат графичен компонент (СЕВЕР, {ЗАПАД, ЦЕНТЪР, ИЗТОК}, ЮГ). Посочете тази област с помощта на

метод:

И накрая, всички по-горе код ще бъде за нищо, ако не зададете

да се вижда:

Сега сме готови да стартираме проекта NetBeans, за да покажем прозореца на приложението. Щракването върху бутона ще превключи между показването на комбинираната кутия или списъка.