// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Обработка изображений в приложении с графическим интерфейсом
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Обработка изображений в приложении с графическим интерфейсом - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Обработка изображений в приложении с графическим интерфейсом


image::images/netbeans-stamp-80-74.png[title="Содержимое этой страницы применимо к IDE NetBeans 7.4 и 8.0"]


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

|===
|Программное обеспечение или материал |Требуемая версия 

|link:http://netbeans.org/downloads/[+IDE NetBeans+] |Версия 7.4 или 8.0 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Комплект для разработчика на языке Java (JDK)+] |Версия 6, 7 или 8 
|===


== Введение

Для многих начинающих программистов на Java проблемой является обработка изображений в приложении. Обычный способ доступа к изображениям в приложении на Java состоит в применении метода `link:http://download.oracle.com/javase/6/docs/api/java/lang/ClassLoader.html#getResource(java.lang.String)[+getResource()+]`. В данном учебном курсе описывается использование конструктора графических интерфейсов среды IDE для создания кода с добавлением изображений (и других ресурсов) в приложение. Кроме того, пользователь научится настраивать способы создания средой IDE кода для обработки изображений.

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


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

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

[.feature]
--
image::images/newproj-small.png[role="left", link="images/newproj.png"]
--


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


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

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

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

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

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

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

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

[.feature]
--
image::images/form-small.png[role="left", link="images/form.png"]
--


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

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

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

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

[.feature]
--
image::images/package-small.png[role="left", link="images/package.png"]
--


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

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

image::images/project-with-imagepack.png[]


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

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

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

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

[.feature]
--
image::images/importimage-small.png[role="left", link="images/importimage.png"]
--


[start=4]
. В диалоговом окне свойств значка щелкните Import to Project ("Импорт в проект").

[start=5]
. В окне выбора файлов выберите любое сохраненное в компьютере изображение. Затем нажмите кнопку "Дальше".

[start=6]
. На странице 'Выбор целевой папки' выберите папку `newpackage` и нажмите 'Готово'.

[.feature]
--
image::images/targetfolder-small.png[role="left", link="images/targetfolder.png"]
--


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

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

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

[.feature]
--
image::images/label-added-small.png[role="left", link="images/label-added.png"]
--

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

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

[.feature]
--
image::images/centered-small.png[role="left", link="images/centered.png"]
--

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

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

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


[source,java]
----

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

Свойство `Icon` элемента `jLabel1` было изменено в редакторе свойств, поэтому средой IDE был создан метод `setIcon`. В параметре этого метода содержится вызов метода `link:http://download.oracle.com/javase/6/docs/api/java/lang/ClassLoader.html#getResource(java.lang.String)[+getResource()+]` анонимного внутреннего класса в `ImageIcon`. Обратите внимание на то, что созданный путь к изображению связан с его местоположением в структуре пакетов приложения.

*Примечания*

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

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

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

*Примечание.* Можно получить координаты мыши (например, местоположение щелчка мыши) в обработчике событий с помощью методов `event.getPoint()`, `event.getX()` и `event.getY()`. Подробности приведены в разделе link:http://docs.oracle.com/javase/1.4.2/docs/api/java/awt/event/MouseEvent.html[+Класс MouseEvent+].


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

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

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

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

[.feature]
--
image::images/prj-small.png[role="left", link="images/prj.png"]
--


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

[start=6]
. В окне 'Проекты' разверните узел `BackgroundImageApp`.

[start=7]
. Щелкните правой кнопкой узел "Исходные файлы" и выберите форму "Создать" > "JFrame".

[start=8]
. В качестве имени класса введите `ImageDisplay`.

[start=9]
. В качестве имени пакета введите `org.me.mybackgroundapp`.

[.feature]
--
image::images/newjframe-small.png[role="left", link="images/newjframe.png"]
--


[start=10]
. Нажмите кнопку 'Готово'.

[start=11]
. В режиме конструирования щелкните правой кнопкой мыши объект JFrame и выберите 'Выбрать макет > Макет контейнера сетки' в контекстном меню.

[start=12]
. Щелкните правой кнопкой мыши объект JFrame и выберите Добавить из палитры > Контейнеры Swing > Панель в контекстном меню.

[start=13]
. В окне свойств отмените выбор свойства jPanel `opaque`.

[start=14]
. Щелкните правой кнопкой мыши объект JFrame и выберите Добавить из палитры > Элементы управления Swing > Метка в контекстном меню.

[start=15]
. В окне 'Проекты' щелкните правой кнопкой мыши узел `org.me.mybackgroundapp` и выберите 'Создать' > 'Пакет Java'.

[start=16]
. Нажмите кнопку "Готово". В результате будет добавлен новый пакет.

[start=17]
. В редакторе GUI Designer выберите метку, добавленную ранее в форму.

[start=18]
. В окне "Свойства" щелкните категорию "Свойства" и выполните прокрутку до свойства "Значок".

[start=19]
. Нажмите кнопку со многоточием (...).

[start=20]
. В диалоговом окне свойств значка щелкните Import to Project ("Импорт в проект").

[start=21]
. В окне выбора файлов выберите любое сохраненное в компьютере изображение. Затем нажмите кнопку "Дальше".

[start=22]
. На странице 'Выбор целевой папки' в мастере выберите каталог ресурсов `newpackage` и нажмите 'Готово'.

[.feature]
--
image::images/targetfolder-small.png[role="left", link="images/targetfolder.png"]
--


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

[start=24]
. В навигаторе щелкните правой кнопкой мыши jPanel и выберите 'Свойства' во всплывающем меню.

[start=25]
. В диалоговом окне Properties ("Свойства") установите свойства `Grid X`, `Grid Y`, `Weight X` и `Weight Y` на `1`, а свойство `Fill` на `Both`.

[.feature]
--
image::images/panelprops-small.png[role="left", link="images/panelprops.png"]
--


[start=26]
. Выберите "Close" (Закрыть).

[start=27]
. Повторите шаги 24 и 25 для jLabel.

[start=28]
. В диалоговом окне 'Свойства' выберите свойство `text` и удалите `jLabel1`.

[.feature]
--
image::images/labelprops-small.png[role="left", link="images/labelprops.png"]
--

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

image::images/background.png[]

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


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

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

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

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

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

[.feature]
--
image::images/mainclass-small.png[role="left", link="images/mainclass.png"]
--


[start=4]
. Нажмите кнопку 'Выбрать основной класс'.

[start=5]
. Нажмите кнопку "ОК" для закрытия диалогового окна "Свойства проекта".

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

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

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

image::images/files.png[]

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

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


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

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

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

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

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

[.feature]
--
image:images/custom-code-small.png[role="left", link="images/custom-code.png"]
--

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

[.feature]
--
image::images/custom-view-small.png[role="left", link="images/custom-view.png"]
--


== Заключение

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

*Примечание. *Пример в этом учебном курсе очень схож с первым примером в разделе учебного курса по Java link:http://java.sun.com/docs/books/tutorial/uiswing/components/icon.html[+Использование раздела значков+]. Отличие заключается в том, что в коде, создаваемом при работе по этому учебному курсу, для вставки изображения в надпись используется метод `link:http://download.oracle.com/javase/6/docs/api/javax/swing/JLabel.html#setIcon(javax.swing.Icon)[+setIcon+]` элемента `link:http://download.oracle.com/javase/6/docs/api/javax/swing/JLabel.html[+JLabel+]`. В примере, приведенном в учебном курсе по Java, в значок добавляется в метку путем его передачи через конструктор.

link:/about/contact_form.html?to=3&subject=Feedback:%20Handling%20Images%20in%20a%20GUI%20Application[+Отправить отзыв по этому учебному курсу+]


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

* link:gui-functionality.html[+Введение в разработку графического интерфейса +]
* link:quickstart-gui.html[+Разработка Swing GUI в IDE NetBeans+]
* link:../../trails/matisse.html[+Учебная карта по приложениям с графическим интерфейсом Java +]
* link:../../trails/java-se.html[+Учебная карта по общим сведениям о разработке на Java+]
* link:http://wiki.netbeans.org/NetBeansUserFAQ#GUI_Editor_.28Matisse.29[+GUI Builder – часто задаваемые вопросы+]
* link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920[+Реализация Java GUI+] в документе _Разработка приложений в IDE NetBeans_