Обработка изображений в приложении с графическим интерфейсом

Содержание

Содержимое на этой странице применимо к IDE NetBeans 7.4 и 8.0

Для работы с этим учебным курсом требуются программное обеспечение и ресурсы, перечисленные ниже.

Программное обеспечение или материал Требуемая версия
IDE NetBeans Версия 7.4 или 8.0
Комплект для разработчика на языке Java (JDK) Версия 6, 7 или 8

Введение

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

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

Создание приложения

  1. Выберите команду "Файл" > "Новый проект".
  2. В мастере создания проекта выберите "Java" > "Приложение Java", затем нажмите кнопку "Дальше".
  3. В качестве имени проекта введите ImageDisplayApp.
  4. Снимите флажок "Создать главный класс".

    Мастер создания проектов

  5. Нажмите кнопку 'Готово'.

Создание формы приложения

В примере в этом разделе будет создана форма JFrame, и в нее добавлена метка JLabel.

Создание формы JFrame:

  1. В окне 'Проекты' разверните узел ImageDisplayApp.
  2. Щелкните правой кнопкой узел "Исходные файлы" и выберите форму "Создать" > "JFrame".
  3. В качестве имени класса введите ImageDisplay.
  4. В качестве имени пакета введите org.me.myimageapp.
  5. Нажмите кнопку 'Готово'.

Добавление надписи:

  • В разделе "Палитра" выберите компонент "Метка" и перетащите его в форму.

Форма должна принять следующий вид:

Созданная форма с добавленной меткой

Добавление пакета для изображения

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

Создание пакета для изображения:

  1. В окне 'Проекты' щелкните правой кнопкой мыши узел org.me.myimageapp и выберите 'Создать' > 'Пакет Java'.

     Добавление нового пакета Java

  2. Нажмите кнопку 'Готово'.

В окне 'Проекты' в папке Исходные пакеты отображается новый пакет.

Окно проектов

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

В этом приложении изображение будет встроено в компонент JLabel.

Добавление изображения к метке:

  1. В редакторе GUI Designer выберите метку, добавленную ранее в форму.
  2. В окне "Свойства" щелкните категорию "Свойства" и выполните прокрутку до свойства "Значок".
  3. Нажмите кнопку со многоточием (...).
    Отображается редактор свойств значка.

    Редактор свойств значка

  4. В диалоговом окне свойств значка щелкните Import to Project ("Импорт в проект").
  5. В окне выбора файлов выберите любое сохраненное в компьютере изображение. Затем нажмите кнопку "Дальше".
  6. На странице 'Выбор целевой папки' выберите папку newpackage и нажмите 'Готово'.

    Выберите страницу 'Целевая папка' мастера импорта изображений в проекты

  7. Нажмите ОК, чтобы закрыть диалоговое окно свойств значка.

При нажатии на кнопку OK IDE выполняет следующие действия:

  • Копирование изображения в проект. В результате при выполнении сборки и распространения приложения это изображение добавляется в распространяемый архив JAR.
  • Создание кода, реализующего доступ к изображению, в классе "ImageDisplay".
  • Отображение изображения в качестве метки в режиме разработки формы.

    Изображение добавлено в метку

Теперь можно выполнить несколько действий по оптимизации вида формы, например:

  • В окне "Свойства" выберите свойство text и удалите метку jLabel1. Это значение было создано конструктором графического интерфейса в качестве отображаемого текста метки. В данном же случае в качестве метки отображается изображение, а не текст, поэтому вводить текст не требуется.
  • Перетащите jLabel1 в центральную область формы.

    Класс ImageDisplay в режиме конструирования с изображением по центру

Просмотр созданного кода:

  1. В средстве проектирования GUI нажмите кнопку 'Исходный код'. (Если кнопка 'Исходный код' скрыта, выберите Вид > Панель редактора исходного кода в главном меню.)
  2. Прокрутите вниз до строки "Созданный код".
  3. Щелкните значок (+) слева от строки "Созданный код" для просмотра кода, созданного GUI Designer.

Основная строка выглядит следующим образом:

jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/org/me/myimageapp/newpackage/image.png"))); // NOI18N

Свойство Icon элемента jLabel1 было изменено в редакторе свойств, поэтому средой IDE был создан метод setIcon. В параметре этого метода содержится вызов метода getResource() анонимного внутреннего класса в ImageIcon. Обратите внимание на то, что созданный путь к изображению связан с его местоположением в структуре пакетов приложения.

Примечания

  • Если в редакторе свойств значка установить параметр "Внешнее изображение", то средой IDE будет создан абсолютный путь к изображению, т.е. само изображение не будет скопировано в проект. Как следствие, при запуске приложения на этом же компьютере изображение появится, а при запуске на другом компьютере -- скорее всего, нет.
  • Метод getResource также используется для доступа к другим ресурсам, таким как текстовые файлы с какими-либо данными, используемыми в приложении.

Чтобы зарегистрировать обработчики для событий мыши на Jlabel:

В режиме конструирования щелкните правой кнопкой мыши объект JLabel и выберите События > Мышь > mouseClicked/mousePressed/mouseReleased в контекстном меню.
Для выбранного события создается обработчик событий.

Примечание. Можно получить координаты мыши (например, местоположение щелчка мыши) в обработчике событий с помощью методов event.getPoint(), event.getX() и event.getY(). Подробности приведены в разделе Класс MouseEvent.

Показ изображения как фона в кадре

Конструктор графического интерфейса не поддерживает напрямую использование JFrame как фонового изображения, поскольку такой поддержки нет в Swing.
Тем не менее, этой цели можно достигнуть различными непрямыми путями. В этом приложении JLabel с изображением будет внедрен в компонент JFrame, тогда как JPanel будет размещен над JLabel и использован как родительский элемент для всех компонентов.

Добавление прозрачного компонента JPanel к JFrame внутри изображения:

  1. Выберите команду "Файл" > "Новый проект".
  2. В мастере создания проекта выберите "Java" > "Приложение Java", затем нажмите кнопку "Дальше".
  3. В качестве имени проекта введите BackgroundImageApp.
  4. Снимите флажок "Создать главный класс".

    Создание нового проекта

  5. Нажмите кнопку 'Готово'.
  6. В окне 'Проекты' разверните узел BackgroundImageApp.
  7. Щелкните правой кнопкой узел "Исходные файлы" и выберите форму "Создать" > "JFrame".
  8. В качестве имени класса введите ImageDisplay.
  9. В качестве имени пакета введите org.me.mybackgroundapp.

    Добавление новой формы

  10. Нажмите кнопку 'Готово'.
  11. В режиме конструирования щелкните правой кнопкой мыши объект JFrame и выберите 'Выбрать макет > Макет контейнера сетки' в контекстном меню.
  12. Щелкните правой кнопкой мыши объект JFrame и выберите Добавить из палитры > Контейнеры Swing > Панель в контекстном меню.
  13. В окне свойств отмените выбор свойства jPanel opaque.
  14. Щелкните правой кнопкой мыши объект JFrame и выберите Добавить из палитры > Элементы управления Swing > Метка в контекстном меню.
  15. В окне 'Проекты' щелкните правой кнопкой мыши узел org.me.mybackgroundapp и выберите 'Создать' > 'Пакет Java'.
  16. Нажмите кнопку "Готово". В результате будет добавлен новый пакет.
  17. В редакторе GUI Designer выберите метку, добавленную ранее в форму.
  18. В окне "Свойства" щелкните категорию "Свойства" и выполните прокрутку до свойства "Значок".
  19. Нажмите кнопку со многоточием (...).
  20. В диалоговом окне свойств значка щелкните Import to Project ("Импорт в проект").
  21. В окне выбора файлов выберите любое сохраненное в компьютере изображение. Затем нажмите кнопку "Дальше".
  22. На странице 'Выбор целевой папки' в мастере выберите каталог ресурсов newpackage и нажмите 'Готово'.

    Выберите страницу 'Целевая папка' мастера импорта изображений в проекты

  23. Нажмите ОК, чтобы закрыть диалоговое окно свойств значка.
  24. В навигаторе щелкните правой кнопкой мыши jPanel и выберите 'Свойства' во всплывающем меню.
  25. В диалоговом окне Properties ("Свойства") установите свойства Grid X, Grid Y, Weight X и Weight Y на 1, а свойство Fill на Both.

    Свойства панели

  26. Выберите "Close" (Закрыть).
  27. Повторите шаги 24 и 25 для jLabel.
  28. В диалоговом окне 'Свойства' выберите свойство text и удалите jLabel1.

    Свойства метки

    Фон готов. Теперь можно, например, перетащить jLabel и jTextField в jPanel из Palette. Оба они будут отображены поверх фонового изображения.

    Снимок представления конструирования класса Background.

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

Сборка и запуск приложения

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

Сначала необходимо указать главный класс проекта. При назначении главного класса среда IDE получает информацию о том, какой класс следует запускать при запуске проекта. Кроме того, таким образом обеспечивается создание элемента Main-Class в архиве JAR приложения при его сборке.

Для назначения главного класса проекта выполните следующие действия:

  1. Правой кнопкой щелкните узел "ImageDisplayApp" проекта и выберите "Свойства".
  2. В диалоговом окне "Свойства проекта" выберите категорию "Выполнение".
  3. Нажмите кнопку "Обзор" рядом с полем "Главный класс". Затем выберите класс org.me.myimageapp.ImageDisplay.

    Выбор основного класса

  4. Нажмите кнопку 'Выбрать основной класс'.
  5. Нажмите кнопку "ОК" для закрытия диалогового окна "Свойства проекта".

Для сборки проекта:

  • Выберите Запуск > Очистить и собрать проект (project_name) на главной панели инструментов.

В окне "Файлы" отображаются объекты, созданные при сборке приложения. Скомпилированный класс находится в папке build. В папке dist находится исполняемый архив JAR, содержащий скомпилированный класс и изображение.

Развернутое окно 'Файлы' с папками build и dist

Для запуска проекта выполните следующие действия:

  • Выберите Запуск > Запуск проекта (project_name) на главной панели инструментов.

Создание пользовательского кода

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

Если требуется предоставить возможность выбора изображения в исходном коде, то можно написать пользовательский код для вызова и отображения необходимых ресурсов. В среде IDE не предусмотрена возможность добавления кода в "защищенные блоки", содержащие созданный GUI Builder код, в режиме просмотра исходного кода. Однако существует возможность вставки кода в защищенные блоки с помощью редакторов свойств, которые можно вызвать в окне "Свойства". Если использовать в этих целях редакторы свойств, то пользовательский код не будет потерян при внесении изменений в GUI Builder.

Например, для вставки пользовательского кода в свойство icon метки JLabel выполните следующие действия:

  1. Выберите JLabel в представлении 'Конструирование' или в окне 'Навигатор'.
  2. В окне 'Свойства' нажмите кнопку (...) рядом со свойством icon.
  3. В раскрывающемся списке в верхней области диалогового окна выберите параметр "Пользовательский код".

Редактор свойств значка с выбранным параметром 'Пользовательский код'

С помощью параметра "Пользовательский код" в этом редакторе свойств можно вручную указать метод setIcon. Кроме того, в этом параметре можно ввести требуемую логику или указать вызов отдельного метода, для которого вручную был создан код.

Текстовая область для ввода параметра setIcon

Заключение

В этом руководстве описывается получение доступа к изображениям из приложения, созданного в IDE NetBeans. Более подробно работа с изображениями рассматривается в учебном курсе по Java.

Примечание. Пример в этом учебном курсе очень схож с первым примером в разделе учебного курса по Java Использование раздела значков. Отличие заключается в том, что в коде, создаваемом при работе по этому учебному курсу, для вставки изображения в надпись используется метод setIcon элемента JLabel. В примере, приведенном в учебном курсе по Java, в значок добавляется в метку путем его передачи через конструктор.


Дополнительные сведения

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo