Intellij idea конструктор swing

Обновлено: 15.07.2024

This example demonstrates how you can utilize IntelliJ GUI Designer to create a graphical user interface that is based on the Swing library components. It must be noted that IntelliJ does not support modeling of non-swing components.

When working with the GUI Designer you operate in design view where you are able to drag and drop swing components within the context of a form. All GUI information related to the form are stored in a file with .form extension. When creating a GUI component in IntelliJ you begin by creating a form, this form serves as a container that groups all other components that are required for your application. When a form is created, IntelliJ provides you with an option of also creating a Bound Class. A Bound Class is a Java class that is bound to a form and contains auto-generated code that reflects the components that are added on the form. The bound class can be updated at any point to add specific behavior on the components that have been added in the form.

In this example we shall create a simple calculator application to demonstrate how you work with the GUI Designer.

1. Creating a new project

Launch IntelliJ and create a new project called: CalculatorGUI.

New Project

Create a new package in the src/java directory called com.javacodegeeks.example

Right-click the new package and select -> New -> GUI Form

Create GUI Form

Create GUI Form

In the New GUI Form Window populate the following:

  • Form Name: Calculator
  • Base layout manager: GridLayoutManager(IntelliJ)
  • Create bound class:selected
  • Class name: Calculator

Clicking Ok on the GUI Form window once its populated, should display design-time graphical view as seen below:

Design view

2. Graphical view

  1. Component tree – displays the hierarchical view of the components that have been added on the form.
  2. Property editor – displays the properties of the components added on the form which can be edited.
  3. Design area – the graphical view of the form. Components are dragged into this area to be added on the form.
  4. Palette – contains all available swing components that can be selected to be added on the form.

3. Creating the GUI

3.1 Add Results display

Drag the JTextField from the palette and drop it in the design area. Update the field name in the property editor to read: results

Adding JTextField

When you add the JTextField the Vertical Spacer also gets automatically added.

3.2 Add Buttons

  • button1: field name change to clearBtn, Text change to AC
  • button2: field name change to signBtn. Text change to +/-
  • button3: field name change to percentBtn.Text change to %
  • button4: field name change to divideBtn. Text change to /

Add the rest of the buttons, in total should have 5 rows and 4 columns populated with buttons. You can now remove the Vertical Spacer .

Calculator design view

Calculator design view

Select the JPanel in the Component tree of the form view and update the field name property to calculatorView . Clicking on the Calculator.java should now have the following fields inserted:

4. Making the form functional

In order for the form to be functional it requires a runtime frame to be created. We will create the main() method that will will be responsible for creating and disposing the runtime frame.

In the code editor of Calculator.java file select -> Generate… -> Form main()

The following code gets generated:

Calculator.java main method

Now we create an enum for handling the different calculator operations. The constructor of the enum takes in a function in this case DoubleBinaryOperator (provided in Java 8) which represents an operation on two double-valued operands that produces a double-valued result.

5. Putting everything together

Now we add action listeners that will be triggered when the buttons of the calculator get clicked. We then bind the buttons to those action listeners.

6. Running your application

Right-click Calculator.java and select Run Calculator.main()

Calculator

7. Download the IntelliJ Project

This was an example of using IntelliJ GUI Designer to create a Swing Calculator.

Давно не писал настольных приложений на Java вообще и с использовании Swing в частности. Однако, возникла необходимость немного по GUIть. В качестве инструмента выбрал IntelliJ IDEA Community edition, 2016.1 версии.

Взялся ваять и, естественно, первое, на что налетел — хотя со времён Borland Java Builder 2006 воды утекло немало, экранные интерфейсы создавать проще не стало, скорее наоборот. А одной из причин выбора IDEA было как раз наличие Swing дизайнера «из коробки», однако как им пользоваться с ходу решительно непонятно — форма генерится, класс создаётся, создаются переменные контролов из дизайнера… но и только: при создании нашего класса форма на экране не появляется

Пошарил интернет, информации приблизительно ноль. Народ говорит, мол, «создавай и — вперёд!». Хм…

По результатам небольших мытарств на эту тему решил опубликовать инструкцию, так как мне с учётом былого опыта было искать намного легче, чем новичку, который вообще в первый раз ваяет форму на Swing.

Создание Swing GUI форм средствами JetBrains IntelliJ IDEA 2016.1

Во-первых, для понимания процесса лучше начать с того. что зайти в меню IDEA «File -> Settings» — там «Editor -> GUI Designer» и установить флажок Generate GUI Into: в Java source code. (это немного поможет пониманию процесса на первом этапе — потом можно будет убрать обратно).

image

Далее открываем дерево исходного кода своего проекта и кликаем правой кнопкой мыши на любую папку или файл исходного кода java и выбираем «New -> Dialog» — вводим имя класса для формы.

image

В итоге нам действительно сгенерили класс-наследник JDialog (который можно создать и использовать) и форма к нему.
Запускаем наш проект на выполнение и… о ужасчудо! при компиляции IDEA добавляет в конец нашего файла некоторый дополнительный код.


Несложно догадаться, что вся наша Swing-овая форма конфигурируется в автогенерируемом методе $$$setupUI$$$.

Вспомните настройку, которую мы установили в самом начале — «GUI Into: -> Java source code». Если её не ставить, то этот метод просто будет появляться напрямую в _class_ файле, минуя java-файл (декомпилируйте его, если сомневаетесь — я это сделал). Соответственно, можете вернуть настройку «GUI Into:» к первоначальному виду, чтобы этот код (который всё равно редактировать настоятельно не рекомендуют) не мозолил глаза.

Теперь, когда мы поняли, как оно работает, перейдём к созданию прочих форм — необязательно диалогов.

Опять правой кнопкой мыши кликаем на папку или файл исходного кода, выбираем «New -> GUI Form» — вводим имя класса для формы.

Генерится класс и форма к нему. Накидываем на форму несколько контролов. В GUI дизайнере смотрим имя корневого элемента (обычно panel1, если IDEA не задала имя, а такое бывает, задайте принудительно — я для наглядности назвал rootPanel).

image

Переходим к исходному коду нашего класса.

Итак:
1. Добавляем для нашего класса наследование «extends JFrame»;
2. Добавляем конструктор класса со строками:

Всё. Форма готова к употреблению. Остальное смотрите в многочисленных инструкциях по Swing.

P.S. Как вариант, можно не наследовать наш класс от JFrame, а создать конструктор вида:

IntelliJ IDEA включает в себя большое количество пользовательских Swing-компонентов. Использование этих компонентов в ваших плагинах гарантирует, что они будут выглядеть и работать согласовано с остальным пользовательским интерфейсом IDE и часто позволяет уменьшить размер кода, по сравнению с использованием стандартных Swing-компонентов.

Меню и панели инструментов

Меню и панели инструментов (тулбары) строятся с использованием системы действий (как уже было описано во второй части).

Окна инструментов

Окна инструментов — это панели, которые отображаются слева, снизу и справа от главного окна IntelliJ IDEA. На каждой стороне содержится по две группы окон инструментов — первичное и вторичное, причем в один и тот же момент активной может быть только одна группа.

Каждое окно инструментов может содержать несколько вкладок (в API называются «contents»). Например, toolwindow «Run» показывает вкладку для каждой активной конфигурации запуска, а «Changes» отображает фиксированный набор вкладок в зависимости от системы управления версиями, используемой в проекте.

Существует два основных сценария для использования окон инструментов в плагинах. В первом сценарии (используется, например, в плагинах Ant и Commander) кнопка окна инструментов отображается всегда, следовательно пользователь может активировать и взаимодействовать с функциональностью плагина в любое время. Во втором сценарии (используется действием «Analyze Dependencies») окно инструментов создается для того, чтобы показать результаты конкретной операции и может быть закрыто пользователем сразу после завершения операции.

  • Атрибут «id» (обязательный) — соответствует тексту, отображаемому на кнопке toolwindow;
  • Атрибут «anchor» (обязательный) — задает сторону экрана, к которой привязывается окно инструментов («left», «right» или «bottom»);
  • Логический атрибут «secondary» (необязательный) — указывает, будет ли окно инструментов принадлежать вторичной группе;
  • «icon» (необязательный) — иконка, которая будет отображаться на кнопке (13 x 13 пикселей).

Если окно инструментов не требуется для всех типов проектов, можно указать необязательный атрибут conditionClass, содержащий полное имя класса, реализующего интерфейс Condition (это может быть тот же класс, что реализует фабрику). Если метод value() возвращает «false», окно инструментов не будет отображаться. Обратите внимание, что условие вычисляется только один раз при загрузке проекта. Если вы хотите показывать и скрывать окна инструментов динамически, во время работы с проектом, вам нужно использовать второй сценарий регистрации окна инструментов.

Второй сценарий заключается в обычном вызове метода ToolWindowManager.registerToolWindow() из кода плагина. Этот метод имеет несколько перегрузок, которые могут использоваться в зависимости от ваших задач. Если вы используете перегрузку, которая принимает Swing-компонент, то он становится первой вкладкой, отображаемой в окне инструмента.

Отображение содержимого многих toolwindows требует получение доступа к индексам. В силу этого окна выключаются при построении индексов, но оно останется активным, если вы передадите «true» в качестве значения параметра canWorkInDumbMode функции registerToolWindow().

Как упоминалось ранее, окна инструментов могут содержать несколько вкладок. Для управлением содержимым окна, вы можете вызвать ToolWindow.getContentManager(). Чтобы добавить вкладку («content»), необходимо сначала создать ее путем вызова ContentManager.getFactory().createContent(), а затем добавить в окно инструментов, с помощью ContentManager.addContent().

Вы можете определить, разрешено ли пользователю закрывать вкладки, или глобально, или для каждой в отдельности. Последнее осуществляется путем определения параметра canCloseContents функции registerToolWindow(), или указав в файле plugin.xml. Даже если закрытие вкладок разрешено глобально, его можно отключить для конкретной вкладки путем вызова .

Диалоги

Для отображения диалогового окна, вызовите метод show() и затем используйте метод getExitCode() для проверки, как было закрыто диалоговое окно.

Для настройки кнопок, отображаемых в диалоговом окне (т.е. замены стандартного набора кнопок ОК/Отмена/Помощь), можно переопределить методы createActions() или createLeftActions(). Оба этих метода возвращают массив объектов Swing Action. Если кнопка, которую вы добавляете закрывает диалоговое окно, можно использовать DialogWrapperExitAction в качестве базового класса для действия.

Всплывающие окна

Пользовательский интерфейс IntelliJ IDEA широко использует всплывающие окна — полу-модальные окна, которые не имеют кнопки явного закрытия и автоматически исчезают при потере фокуса. Использование этих элементов управления в вашем плагине обеспечивает единый пользовательский интерфейс между плагином и остальной частью интегрированной среды разработки.

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

  • createComponentPopupBuilder() — наиболее универсальный способ показать любой Swing-компонента внутри popup.
  • createListPopupBuilder() — создает всплывающее окно для выбора одного или нескольких элементов из Swing JList.
  • createConfirmation() — создает всплывающее окно для выбора между двумя вариантами и выполнения различных действий в зависимости от выбранного.
  • createActionGroupPopup() — создает popup, который показывает группу действий и выполняет то, которое выбрано пользователем.

Если вам нужно создать списочный всплывающий диалог, но обычный JList не устраивает — например, нежелательно собирать действия в группу, вы можете работать непосредственно с интерфейсом ListPopupStep и методом JBPopupFactory.createListPopup(). Обычно не требуется реализовывать весь интерфейс, вместо этого можно унаследоваться от класса BaseListPopupStep. Основные методы для переопределения это: getTextFor() (возвращается текст, отображаемый для элемента) и onChosen() (вызывается при выборе элемента). Возвращая новый PopupStep из метода onChosen(), можно реализовать иерархические (вложенные) всплывающие окна.

После того как вы создали окно, нужно отобразить его путем вызова одного из методов show(). Вы можете позволить IntelliJ IDEA автоматически выбрать позицию на основе контекста, путем вызова showInBestPositionFor(), или явно указать позицию через такие методы как showUnderneathOf() и showInCenterOf(). Обратите внимание, что методы show() немедленно возвращают управление, а не ждут, когда всплывающее окно закроется. Если вам нужно выполнить некоторые действия при закрытии окна, то можно привязать к нему слушателя с помощью метода addListener(); или переопределить метод, подобный PopupStep.onChosen(); или присоединить обработчик событий к соответствующему компоненту внутри всплывающего окна.

Уведомления

Один из ведущих принципов дизайна в последних версиях IntelliJ IDEA является предотвращение использования модальных окон для уведомления пользователя об ошибках и других ситуациях, которые могут потребовать его внимания. В качестве замены IntelliJ IDEA предоставляет на выбор несколько немодальных типов уведомлений.

Диалоги

При работе с модальным диалоговым окном, вместо проверки введенных данных при нажатии на кнопку ОК и уведомления пользователя о недопустимых данных в еще одном модальном окне, рекомендуется использовать метод DialogBuilder.doValidate(), который был описан ранее.

Подсказки редактора

Для действий, вызываемых из редактора (например, рефакторинг, навигации и тому подобное) лучший способ уведомления пользователя о невозможности выполнения действий — это использование класса HintManager. Его метод showErrorHint() отображает плавающее над редактором окно, которое скрывается автоматически, когда пользователь начинает выполнение другого действия в редакторе. Остальные методы HintManager можно использоваться для отображения прочих видов немодальных уведомлений в виде подсказок над редактором.

Высокоуровневые уведомления
  • пользователь может управлять каждый типом уведомлений, перечисленных в разделе «Settings | Notifications»;
  • все отображенные уведомления, собираются в окне инструментов «Event Log» и могут быть просмотрены позднее.

Параметр GroupDisplayId конструктора Notication указывает тип уведомления; пользователь может выбрать тип отображения, соответствующий типу каждого уведомления в разделе Settings | Notifications. Чтобы указать предпочтительный тип, необходимо вызвать Notifications.Bus.register() перед показом уведомления.

Выбор классов и файлов

Выбор файла

Класс FileChooserDescriptor позволяет вам проконтролировать, какие файлы могут быть выбраны. Параметры конструктора определяют можно ли выбрать файлы и/или каталоги, допускается ли выбор нескольких элементов. Для более точного контроля можно перегрузить метод isFileSelectable(). Вы также можете настроить отображение файлов путем перегрузки методов getIcon(), getName() и getComment() класса FileChooserDescriptor. Обратите внимание, что родной диалог выбора файлов Mac OS X не поддерживает большую часть настроек, так что если вы полагаетесь на них, необходимо использовать перегрузку метода chooseFiles(), которая отображает стандартное диалоговое окно IntelliJ IDEA.

Очень распространенный способ выбора файла — использовать текстовое поле для ввода пути с многоточием (". ") для отображения диалога выбора файлов. Для создания такого элемента управления, используйте компонент TextFieldWithBrowseButton и вызовите его метод addBrowseFolderListener(), чтобы настроить средство выбора файлов. В качестве дополнительного бонуса это даст возможность автозавершения имени файла при вводе пути в текстовом поле вручную.

Альтернативный UI для выбора файлов, который идеально подходит, когда необходим поиск файла по названию, доступен через класс TreeFileChooserFactory. Диалоговое окно, используемое этим API имеет две вкладки: одна показывает структуру проекта, другая — список файлов, аналогичный используемому в «Goto File». Для отображения диалогового окна, вызовите showDialog() на объекте, возвращенном из createFileChooser() и затем вызовите getSelectedFile() для получения пользовательского выбора.

Выбор класса и пакета

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

Для выбора пакета Java, можно использовать класс PackageChooserDialog.

Компоненты редактора

По сравнению со Swing JTextArea, компонент редактора IntelliJ IDEA имеет массу преимуществ — подсветка синтаксиса, автозавершение кода, сворачивание кода и многое другое. Редакторы в IntelliJ IDEA обычно отображаются в виде вкладок редактора, но они могут быть внедрены в диалоговые окна или окна инструментов. Это позволяет компонент EditorTextField.

  • Тип файла, согласно которому выполняется синтаксический анализ текста в поле;
  • Будет ли текстовое поле только для чтения;
  • Является ли текстовое поле однострочным или многострочным.
  • Используйте JavaCodeFragmentFactory.getInstance().createReferenceCodeFragment() для создания фрагмента кода, представляющего имя класса или пакета;
  • Вызовите PsiDocumentManager.getInstance().getDocument() чтобы получить документ, соответствующий фрагменту кода;
  • Передайте полученный документ в конструктор EditorTextField или его метод setDocument().

Списки и деревья

JBList и Tree
ColoredListCellRenderer и ColoredTreeCellRenderer

Когда вам нужно настроить представление элементов в поле со списком или дереве, рекомендуется использовать классы ColoredListCellRenderer или ColoredTreeCellRenderer в качестве средства визуализации ячеек. Эти классы позволяют собирать представления из нескольких фрагментов текста с разными атрибутами (посредством вызова append()) и применять дополнительный значок для элемента (путем вызова setIcon()). Система визуализации автоматически берет на себя настройку правильного цвета текста для выбранных элементов и многие другие платформозависимые детали рендеринга.

ListSpeedSearch и TreeSpeedSearch

Для облегчения выбора элементов с помощью клавиатуры в списке или дереве, к ним можно применить обработчик быстрого поиска. Это можно сделать простым вызовом или . Если вам нужно настроить текст, который используется для поиска элемента, можно переопределить метод getElementText(). Кроме того, можно передать функцию для преобразования элементов в строки (как elementTextDelegate в конструктор ListSpeedSearch или как метод toString() в конструктор TreeSpeedSearch).

ToolbarDecorator

Весьма распространенная задача при разработке плагина — отображение списка или дерева, где пользователь мог бы бы добавлять, удалять, редактировать или переупорядочить элементы. Осуществление этой задачи значительно облегчаются классом ToolbarDecorator. Этот класс содержит панель инструментов с действиями, привязанными к элементам и автоматически позволяет drag & drop изменение порядка элементов в списках, если это поддерживает нижележащая модель списка. Положение панели инструментов (выше или ниже списка) зависит от платформы, на которой выполняется IntelliJ IDEA.

  • Если вам нужна поддержка удаления и изменения порядка элементов в списке, убедитесь, что модель вашего списка реализует интерфейс EditableModel. CollectionListModel — это удобный класс, реализующий этот интерфейс.
  • Вызовите ToolbarDecorator.createDecorator для создания экземпляра декоратора.
  • Если вам нужна поддержка добавления и/или удаления элементов, вызовите setAddAction() и/или setRemoveAction().
  • Если вам нужны другие кнопки в дополнение к стандартным, вызовите addExtraAction() или setActionGroup().
  • Вызовите createPanel() и добавьте возвращенный компонент к вашей панели.

Прочие Swing-компоненты

Функция showCheckboxMessageDialog() обеспечивает простой способ реализации флажка «Do not show this again».

JBSplitter

Класс JBSplitter является заменой для стандартного класса JSplitPane. В отличие от некоторых других, улучшенных JetBrains Swing-компонентов это не равноценная замена, т.к. он имеет другой API. Однако, чтобы добиться единообразия в пользовательском интерфейсе, рекомендуется использовать JBSplitter вместо стандартного JSplitPane.
Чтобы добавить компоненты в разделитель, вызовите методы setFirstComponent() и setSecondComponent().

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

JBTabs

Класс JBTabs является реализацией вкладок от JetBrains, используемой в редакторе и некоторых других компонентах. Она имеет значительно другой look & feel, по сравнению со стандартными вкладками Swing и выглядит более инородно на платформе Mac OS X, так что оставляем за вами выбор, какая реализация вкладок будет более подходящей для вашего плагина.

Пытаюсь создать форму в IDEA с помощью дефолтного плагина. Версия IDE 11.0.1.

  1. Создаю проект.
  2. Создаю в нем форму.
  3. В настройках указываю Generate GUI into Java source code.
  4. Потом добавляю форму, добавляю кнопки и т.д.
  5. Запускаю проект - генерируются какие-то строчки.

Приложение не запускается, ошибка:

Подсвечиваются строки, сгенерированные IDEA.

2 ответа 2

Попробуйте в общем так:

И вообще советую почитать хотя бы эту статью или купить книгу Swing-эффективные пользовательские интерфейсы издание-2 Портянкин Иван.

видимо он просто ограничен созданим форм и всё, остальное, по всей видимости, ты должен сам доделывать =)

Некропост и все такое, но поделюсь своим велосипедом 3 итерации. По ходу проекта нужно было создавать много внутренних окон, по этому решил пойти через абстрактный класс. Само окно содается средставми JIdea, просто добавляется наследование абстрактного класса. Переопределяем метод getRootPanel(), в котором возвращаем самый верхний JPanel, который и станет нашим contentPane. Затем во внешнем классе просто вызываем ManagebleWindow.getInstance(НужныйНамКлассОкна.class) и все.

В велосипеде v.2 я просто наследовал JInternalFrame а всю инициализацию выносил в переопределенный метод setVisible(), потому как конструктор отрабатывает раньше, чем генерируется сам GUI, но этот велосипед не переживал mvn:clean - просто переставал запускаться и нужно было вручную дергать каждое окно всякими бубнами, чтобы оно начало работать (что там происходило я так и не разобрался), а этот велосипед спокойно переживает mvn:clean

Всё ещё ищете ответ? Посмотрите другие вопросы с метками gui java intellij-idea swing или задайте свой вопрос.

Связанные

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.6.20.42399

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

In this post, we feature a comprehensive Tutorial on IntelliJ IDEA GUI Designer. We are going to take you through the process of creating a ‘Display Image’ application using a GUI.

The following table shows an overview of the whole article:

1. Introduction

Graphical User Interface (GUI) provides an enhanced user experience. Fortunately, Java provide a set of components ‘Swing components’ which allow for the creation of a User Interface.

IntelliJ provides 2 types of GUI component:

It uses special XML format with extension .form to design GUI component.

Table Of Contents

2. Create New Project

Start by creating a new Java Project in IntelliJ.

IntelliJ IDEA GUI Designer - new java project

Create New Project

IntelliJ IDEA GUI Designer - Java project

New Java Project – step 1

Make sure not to check the creating project from template:

IntelliJ IDEA GUI Designer - step 2

New Java Project – step 2

Now choose a name for the project:

IntelliJ IDEA GUI Designer - project name

Project name

3. Structure of the Packages

As you can see there will be a package named src . We now create a new package under it:

IntelliJ IDEA GUI Designer - New Package

Create New Package

Now we choose a name for out package, for example: com.java.codegeek

IntelliJ IDEA GUI Designer - New Package name

New Package name

Creating new GUI form or Dialog can be done by right click on src → New → GUI Form or Dialog

  • form file (extension .form)
  • bound class (extension .java)

IntelliJ IDEA GUI Designer - New GUI Form

Add New GUI Form

Here we choose GUI Form.

Name the form ‘DisplayImage’ and configure it as shown in the image below.

IntelliJ IDEA GUI Designer - GUI Form name

New GUI Form name

  • Components Treeview
  • Properties Inspector
  • Components Palette
  • Form Workspace

IntelliJ IDEA GUI Designer - GUI designer

GUI designer components

4. Configure Components of GUI Form

4.1 Component Tree

In the component tree you can see the JPanel. This treeview displays the components contained in the design form and enables you to navigate to and select one or more components.

When you create a new Form, a JPanel component is automatically added to the Form Workspace and it appears as a child of the Form in the Component Treeview. This JPanel is the top of the UI component hierarchy (in the Java sense) for the current Form.

4.2 Properties Inspector

Several types of property editors appear in the Value column of the inspector:

  • Text field: Type a value.
  • Pick list: Pick a value from a drop-down list of valid choices.
  • Checkbox: Set value for Boolean type properties.
  • Dialog: Presents an ellipsis button which opens a dialog box.

IntelliJ IDEA GUI Designer - Component Tree

Component Tree

If you switch to the DisplayImage.java file you can now see the jPanel as a variable in the DisplayImage class: DisplayImage.java

4.3 Components Palette

The component palette provides quick access to commonly used components (JavaBeans) available for adding to forms. It appears by default at the right side of the frame next to the Form Workspace.

You can add a new UI component to the form in following way:

Select a component in the palette move the cursor to the Form Workspace and click where you want to add the component.

4.4 Form Workspace

The Form Workspace occupies the center part of the frame. It is a gray rectangle which appears when you create a new Form.

Back to the .form file, drag a JLabel onto the panel.

IntelliJ IDEA GUI Designer - Add JLable

Add JLable on the JPanel

You can change the field name of the JLable in the Component tree (as you did with the JPanel) and set it ‘lable01’.

Add another JLable on the panel and name it ‘lable02’. As you see, all these lables are contained by panel.

IntelliJ IDEA GUI Designer - Add second JLable

Add second JLable

We want to display 2 images on these lables. So first you should copy your image files into the project folder:

IntelliJ IDEA GUI Designer - Image sources

Image sources

Now we should set these images as ‘icon’ property value for the JLables.

‘icon’ Property

IntelliJ IDEA GUI Designer - image file

Choose the image file

Repeat the same process for assigning image02 to icon property of lable02.

5. Setup Bounded Java Class

Add ‘ImageIcon’ variables to ‘DisplayImage.java’: DisplayImage.java

Now we should set the layout in java class, assign the images to the lables and add the panel : DisplayImage.java

We should also set the value of Layout Manager property for the panel, here we chose ‘FlowLayout’:

IntelliJ IDEA GUI Designer - Layout Manager

‘Layout Manager’ Property

6. Run the Project

In order to run the application we need a main() method for our class: DisplayImage.java

Now from the menu, Run -> Run ‘DisplayImage’:

IntelliJ IDEA GUI Designer - Project result

Project result

7. Download the Complete Source Code

This was a tutorial of IntelliJ IDEA GUI Designer for displaying images.

Читайте также: