Обработка изображений в приложении с графическим интерфейсом
Содержание
Для работы с этим учебным курсом требуются программное обеспечение и материалы, перечисленные ниже.
Введение
Для многих начинающих программистов на Java проблемой является обработка изображений в приложении. Обычный способ доступа к изображениям в приложении на Java состоит в применении метода getResource(). В данном учебном курсе описывается использование конструктора графических интерфейсов среды IDE для создания кода с добавлением изображений (и других ресурсов) в приложение. Кроме того, пользователь научится настраивать способы создания средой IDE кода для обработки изображений.
Созданное в результате изучения этого учебного курса приложение будет представлять собой простую форму, содержащую одну надпись с одним изображением.
Создание приложения
- Выберите "Файл" > "Создать проект".
- В мастере создания проекта выберите "Java" > "Приложение Java", затем нажмите кнопку "Дальше".
- В качестве имени проекта введите
ImageDisplayApp.
- Снимите флажок "Создать главный класс".
- Убедитесь, что установлен флажок Set As Main Project ("Установить как главный проект").
- Нажмите кнопку Finish ("Готово").
Создание формы приложения
В примере в этом разделе будет создана форма JFrame, и в нее добавлена метка JLabel.
Создание формы JFrame:
- В окне "Проекты" разверните узел "ImageDisplayApp".
- Щелкните правой кнопкой узел "Исходные файлы" и выберите форму "Создать" > "JFrame".
- В качестве имени класса введите
ImageDisplay.
- В качестве имени пакета введите
org.me.myimageapp.
- Нажмите кнопку "Завершить".
Добавление надписи:
- В разделе "Палитра" выберите компонент "Метка" и перетащите его в форму.
Форма должна принять следующий вид:
Добавление пакета для изображения
Если в приложении используются изображения или другие ресурсы, то для этих ресурсов обычно следует выбрать отдельный пакет Java. В локальной файловой системе пакет соответствует папке.
Создание пакета для изображения:
В окне "Проекты" щелкните правой кнопкой узел "org.me.myimageapp" и выберите "Создать" > "Пакет Java".
- В мастере создания проекта к имени
org.me.myimageapp добавьте .resources; новый пакет получит имя org.me.myimageapp.resources.
- Нажмите кнопку "Завершить".
В окне "Проекты" в пакете org.me.myimageapp.resources должно появиться изображение.
Вывод изображения в качестве метки
В этом приложении изображение будет встроено в компонент JLabel.
Добавление изображения к метке:
- В редакторе GUI Designer выберите метку, добавленную ранее в форму.
- В окне "Свойства" щелкните категорию "Свойства" и выполните прокрутку до свойства "Значок".
- Нажмите кнопку со многоточием (...).
- В диалоговом окне свойств значка щелкните Import to Project ("Импорт в проект").
- В окне выбора файлов выберите любое сохраненное в компьютере изображение. Затем нажмите кнопку "Дальше".
- На странице "Выбор целевой папки" в мастере выберите папку
resources и нажмите кнопку "Дальше".
При нажатии кнопки "Дальше" в среде IDE будут выполнены следующие операции:
- Копирование изображения в проект. В результате при выполнении сборки и распространения приложения это изображение добавляется в распространяемый архив JAR.
- Создание кода, реализующего доступ к изображению, в классе "ImageDisplay".
- Отображение изображения в качестве метки в режиме разработки формы.
Теперь можно выполнить несколько действий по оптимизации вида формы, например:
- В окне "Свойства" выберите свойство
text и удалите метку jLabel1. Это значение было создано конструктором графического интерфейса в качестве отображаемого текста метки. В данном же случае в качестве метки отображается изображение, а не текст, поэтому вводить текст не требуется.
- Перетащите кнопку в центр формы.
Просмотр созданного кода:
- В GUI Designer перейдите на вкладку "Исходный код".
- Прокрутите вниз до строки "Созданный код".
- Щелкните значок (+) слева от строки "Созданный код" для просмотра кода, созданного GUI Designer.
Основная строка выглядит следующим образом:
jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/org/me/myimageapp/resources/park-sculpture.jpg"))); // NOI18N
Свойство Icon элемента jLabel1 было изменено в редакторе свойств, поэтому средой IDE был создан метод setIcon. В параметре этого метода содержится вызов метода getResource() анонимного внутреннего класса в ImageIcon. Обратите внимание на то, что созданный путь к изображению связан с его местоположением в структуре пакетов приложения.
Примечания
- Если в редакторе свойств значка установить параметр "Внешнее изображение", то средой IDE будет создан абсолютный путь к изображению, т.е. само изображение не будет скопировано в проект. Как следствие, при запуске приложения на этом же компьютере изображение появится, а при запуске на другом компьютере -- скорее всего, нет.
- Метод
getResource также используется для доступа к другим ресурсам, таким как текстовые файлы с какими-либо данными, используемыми в приложении.
Чтобы зарегистрировать обработчики для событий мыши на Jlabel:
Щелкните JLabel правой кнопкой мыши и выберите Events ("События") > Mouse ("Мышь") > mouseClicked/mousePressed/mouseReleased из всплывающего меню.
Будет создан обработчик для соответствующего события.
Примечание. Координаты мыши (например, точку щелчка) в обработчике событий можно получить, используя методы event.getPoint(), event.getX() или event.getY(). Подробности приведены в разделе Класс MouseEvent.
Показ изображения как фона в кадре
Конструктор графического интерфейса не поддерживает напрямую использование JFrame как фонового изображения, поскольку такой поддержки нет в Swing.
Тем не менее, этой цели можно достигнуть различными непрямыми путями. В этом приложении JLabel с изображением будет внедрен в компонент JFrame, тогда как JPanel будет размещен над JLabel и использован как родительский элемент для всех компонентов.
Добавление прозрачного компонента JPanel к JFrame внутри изображения:
- Выберите File ("Файл") > New Project ("Создать проект").
- В мастере создания проекта выберите Java > Java Application ("Приложение Java"), затем нажмите кнопку Next ("Далее").
- В качестве имени проекта введите
BackgroundImageApp.
- Снимите флажок Create Main Class ("Создать главный класс").
- Убедитесь, что установлен флажок Set As Main Project ("Установить как главный проект").
- В окне Projects ("Проекты") разверните узел
BackgroundImageApp.
- Щелкните правой кнопкой узел Source Packages ("Исходные файлы") и выберите форму New ("Создать") > JFrame.
- В качестве имени класса введите
ImageDisplay.
- В качестве имени пакета введите
org.me.mybackgroundapp.
- Нажмите кнопку Finish ("Готово").
- В представлении Design ("Проект") щелкните правой кнопкой мыши JFrame и выберите Set Layout ("Установить компоновку") > Grid Bag из всплывающего меню.
- Щелкните правой кнопкой мыши JFrame и выберите Add From Pallette ("Добавить из палитры") > Swing Containers ("Контейнеры Swing") > Panel ("Панель") из всплывающего меню.
- В окне свойств отмените выбор свойства jPanel
opaque.
- Щелкните правой кнопкой мыши JFrame и выберите Add From Pallette ("Добавить из палитры") > Swing Controls ("Элементы управления Swing") > Label ("Метка") из всплывающего меню.
- В окне Projects ("Проекты") щелкните правой кнопкой узел
org.me.myimageapp и выберите New ("Создать") > Java Package ("Пакет Java").
- В мастере создания пакетов к имени
org.me.mybackgroundapp добавьте .resources; новый пакет получит имя org.me.mybackgroundapp.resources.
- Нажмите кнопку Finish ("Готово").
- В конструкторе графического интерфейса выберите подпись, добавленную ранее в форму.
- В окне "Свойства" щелкните категорию "Свойства" и выполните прокрутку до свойства "Значок".
- Нажмите кнопку в виде эллипса (...).
- В диалоговом окне свойств значка щелкните Import to Project ("Импорт в проект").
- В окне выбора файлов выберите любое сохраненное в компьютере изображение. Затем нажмите кнопку Next ("Далее").
- На странице Select Target Folder ("Выбор целевой папки") в мастере выберите папку resources и нажмите кнопку Finish ("Готово").
- В навигаторе щелкните компонент jPanel правой кнопкой мыши и выберите Properties ("Свойства") из всплывающего меню.
- В диалоговом окне Properties ("Свойства") установите свойства
Grid X, Grid Y, Weight X и Weight Y на 1, а свойство Fill на Both. Выберите Close ("Закрыть").
- Повторите действия 24 и 25 для jLabel.
Теперь фон готов. Теперь можно, например, перетащить jLabel и jTextField в jPanel из Palette. Оба они будут отображены поверх фонового изображения.
Преимуществом описанного решения является то, что фоновое изображение показывается как в ходе разработки, так и во время выполнения.
Сборка и запуск приложения
На данном этапе после создания кода, реализующего доступ к изображению и вывод его на экран, можно выполнить сборку и запуск приложения и проверить правильность вызова изображения.
Сначала необходимо указать главный класс проекта. При назначении главного класса среда IDE получает информацию о том, какой класс следует запускать при запуске проекта. Кроме того, таким образом обеспечивается создание элемента Main-Class в архиве JAR приложения при его сборке.
Для назначения главного класса проекта выполните следующие действия:
- Правой кнопкой щелкните узел "ImageDisplayApp" проекта и выберите "Свойства".
- В диалоговом окне "Свойства проекта" выберите категорию "Выполнение".
- Нажмите кнопку "Обзор" рядом с полем "Главный класс". Выберите класс
org.me.myimageapp.ImageDisplay и нажмите кнопку "Выбрать главный класс".
Для сборки проекта:
- Выберите Run ("Запустить") > Clean & Build Main Project ("Очистка и сборка главного проекта").
В окне "Файлы" отображаются объекты, созданные при сборке приложения. Скомпилированный класс находится в папке build. В папке dist находится исполняемый архив JAR, содержащий скомпилированный класс и изображение.
Для запуска проекта выполните следующие действия:
- Выберите "Выполнение" > "Выполнить главный проект" (F6).
Создание пользовательского кода
Во многих приложениях выводимое изображение определяется не статически, как в данном примере. К примеру, выводимое изображение может определяться тем, что выбрал пользователь.
Если требуется предоставить возможность выбора изображения в исходном коде, то можно написать пользовательский код для вызова и отображения необходимых ресурсов. В среде IDE не предусмотрена возможность добавления кода в "защищенные блоки", содержащие созданный GUI Builder код, в режиме просмотра исходного кода. Однако существует возможность вставки кода в защищенные блоки с помощью редакторов свойств, которые можно вызвать в окне "Свойства". Если использовать в этих целях редакторы свойств, то пользовательский код не будет потерян при внесении изменений в GUI Builder.
Например, для вставки пользовательского кода в свойство icon метки JLabel выполните следующие действия:
- Выберите "JLabel" в режиме разработки или в окне "Инспектор".
- В окне "Свойства" нажмите кнопку в виде эллипса (...) рядом со свойством "Значок".
- В раскрывающемся списке в верхней области диалогового окна выберите параметр "Пользовательский код".
С помощью параметра "Пользовательский код" в этом редакторе свойств можно вручную указать метод setIcon. Кроме того, в этом параметре можно ввести требуемую логику или указать вызов отдельного метода, для которого вручную был создан код.
Заключение
В этом учебном курсе была описана процедура вызова изображений в приложении, созданном в среде IDE NetBeans. Более подробно работа с изображениями рассматривается в учебном курсе по Java.
Примечание. Приведенный в данном учебном курсе пример практически аналогичен первому примеру в разделе Работа со значками в учебном курсе по Java. Отличие заключается в том, что в коде, создаваемом при работе по этому учебному курсу, для вставки изображения в надпись используется метод setIcon элемента JLabel. В примере, приведенном в учебном курсе по Java, в значок добавляется в метку путем его передачи через конструктор.
Дополнительные сведения
