| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <!--Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. |
| --> |
| <html> |
| <head> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| <meta name="description" content="Tutorial that shows how to handle images and |
| other resources when creating Swing applications in NetBeans IDE"> |
| <meta name="keywords" content="NetBeans, IDE, integrated development environmenttutorial, guide, user, documentation, open source"> |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| <title>Обработка изображений в приложении графического интерфейса пользователя на Java - учебное руководство по IDE NetBeans 7.1</title> |
| </head> |
| <body> |
| <h1>Обработка изображений в приложении с графическим интерфейсом</h1> |
| |
| |
| <p><b>Содержание</b></p> |
| <img alt="Содержимое на этой странице применимо к IDE NetBeans 6.9 или более поздней версии" class="stamp" src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" title="Содержимое этой страницы применимо к IDE NetBeans 6.9 или более поздней версии"> |
| <ul class="toc"> |
| <li><a href="#intro">Введение</a></li> |
| <li><a href="#form">Создание формы приложения </a></li> |
| <li><a href="#package">Добавление пакета для изображения </a></li> |
| <li><a href="#displaying">Вывод изображения на метке</a></li> |
| <li><a href="#building">Сборка и запуск приложения</a></li> |
| <li><a href="#background">Показ изображения как фона в кадре</a></li> |
| <li><a href="#custom"> Создание пользовательского кода</a></li> |
| <li><a href="#summary">Заключение</a></li> |
| <li><a href="#seealso">Дополнительные сведения</a></li> |
| </ul> |
| |
| |
| <p> |
| <b>Для работы с этим учебным курсом требуются программное обеспечение и ресурсы, перечисленные ниже.</b> |
| </p> |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Программное обеспечение или материал</th> |
| <th class="tblheader" scope="col">Требуемая версия</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.netbeans.org/downloads/index.html">IDE NetBeans</a></td> |
| <td class="tbltd1">Версия 6.9 или более поздняя </td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Комплект для разработчика на языке Java (JDK)</a></td> |
| <td class="tbltd1">Версия 6 или 7</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| |
| <a name="intro"></a><h2>Введение</h2> |
| <p>Для многих начинающих программистов на Java проблемой является обработка изображений в приложении. Обычный способ доступа к изображениям в приложении на Java состоит в применении метода <code><a href="http://download.oracle.com/javase/6/docs/api/java/lang/ClassLoader.html#getResource(java.lang.String)" target="_blank">getResource()</a></code>. В данном учебном курсе описывается использование конструктора графических интерфейсов среды IDE для создания кода с добавлением изображений (и других ресурсов) в приложение. Кроме того, пользователь научится настраивать способы создания средой IDE кода для обработки изображений.</p> |
| <p>Созданное в результате изучения этого учебного курса приложение будет представлять собой простую форму, содержащую одну надпись с одним изображением.</p> |
| <h2>Создание приложения</h2> |
| <ol> |
| <li>Выберите команду "Файл" > "Новый проект".</li> |
| <li>В мастере создания проекта выберите "Java" > "Приложение Java", затем нажмите кнопку "Дальше".</li> |
| <li>В качестве имени проекта введите <code>ImageDisplayApp</code>.</li> |
| <li>Снимите флажок "Создать главный класс".</li> |
| <li>Проверьте, что установлен флажок "Установить как главный проект".<br> <a href="../../../images_www/articles/70/java/gui-image-display/newproj.png" rel="lytebox" title="Мастер создания проектов: платформы"> <img alt="Мастер создания проектов" class="margin-around" height="320" src="../../../images_www/articles/70/java/gui-image-display/newproj-reduced.png" width="517"></a></li> |
| <li>Нажмите кнопку "Завершить".</li> |
| </ol> |
| |
| <a name="form"></a><h2> Создание формы приложения </h2> |
| |
| <p>В примере в этом разделе будет создана форма JFrame, и в нее добавлена метка JLabel.</p> |
| <p><b>Создание формы JFrame:</b></p> |
| <ol> |
| <li>В окне 'Проекты' разверните узел ImageDisplayApp.</li> |
| <li>Щелкните правой кнопкой узел "Исходные файлы" и выберите форму "Создать" > "JFrame".</li> |
| <li>В качестве имени класса введите <code>ImageDisplay</code>.</li> |
| <li>В качестве имени пакета введите <code>org.me.myimageapp</code>.</li> |
| <li>Нажмите кнопку "Завершить".</li> |
| </ol> |
| |
| <p><b>Добавление надписи:</b></p> |
| <ul> |
| <li>В разделе "Палитра" выберите компонент "Метка" и перетащите его в форму.</li> |
| </ul> |
| <p>Форма должна принять следующий вид:</p> |
| <img alt="Созданная форма с добавленной меткой" class="margin-around" height="309" src="../../../images_www/articles/70/java/gui-image-display/form.png" width="409"> <a name="package"></a><h2> Добавление пакета для изображения </h2> |
| <p>Если в приложении используются изображения или другие ресурсы, то для этих ресурсов обычно следует выбрать отдельный пакет Java. В локальной файловой системе пакет соответствует папке.</p> |
| |
| <p><b>Создание пакета для изображения:</b></p> |
| <ol> |
| <li>В окне 'Проекты' щелкните правой кнопкой мыши узел <code>org.me.myimageapp</code> и выберите 'Создать' > 'Пакет Java'.<br> <img alt=" Добавление нового пакета Java" class="margin-around" height="106" src="../../../images_www/articles/70/java/gui-image-display/package.png" width="497"></li> |
| |
| <li>В мастере создания проекта к имени <code>org.me.myimageapp</code> добавьте <code>.resources</code>; новый пакет получит имя <code>org.me.myimageapp.resources</code>.</li> |
| <li>Нажмите кнопку "Завершить".</li> |
| </ol> |
| <p>В окне 'Проекты' изображение отображается в пакете <code>org.me.myimageapp.resources</code>.</p> |
| <img alt="Окно проектов" class="margin-around" height="90" src="../../../images_www/articles/70/java/gui-image-display/project-with-imagepack.png" width="233"> <a name="displaying"></a><h2>Вывод изображения в качестве метки</h2> |
| |
| <p>В этом приложении изображение будет встроено в компонент JLabel.</p> |
| |
| <p><b>Добавление изображения к метке:</b></p> |
| <ol> |
| <li>В редакторе GUI Designer выберите метку, добавленную ранее в форму.</li> |
| <li>В окне "Свойства" щелкните категорию "Свойства" и выполните прокрутку до свойства "Значок".</li> |
| <li>Нажмите кнопку со многоточием (...).</li> |
| <li>В диалоговом окне свойств значка щелкните Import to Project ("Импорт в проект").<br> <img alt="значок редактора свойств" class="margin-around" height="396" src="../../../images_www/articles/70/java/gui-image-display/importimage.png" width="480"></li> |
| <li>В окне выбора файлов выберите любое сохраненное в компьютере изображение. Затем нажмите кнопку "Дальше". </li> |
| <li>На странице "Выбор целевой папки" в мастере выберите папку <code>resources</code> и нажмите кнопку "Дальше".<br> <img alt="Выберите страницу 'Целевая папка' мастера импорта изображений в проекты" class="margin-around" height="364" src="../../../images_www/articles/70/java/gui-image-display/targetfolder.png" width="534"></li> |
| </ol> |
| |
| <p>При нажатии кнопки "Дальше" в среде IDE будут выполнены следующие операции:</p> |
| <ul> |
| <li>Копирование изображения в проект. В результате при выполнении сборки и распространения приложения это изображение добавляется в распространяемый архив JAR.</li> |
| <li>Создание кода, реализующего доступ к изображению, в классе "ImageDisplay".</li> |
| <li>Отображение изображения в качестве метки в режиме разработки формы.</li> |
| </ul> |
| |
| <p>Теперь можно выполнить несколько действий по оптимизации вида формы, например:</p> |
| <ul> |
| <li>В окне "Свойства" выберите свойство <code>text</code> и удалите метку <code>jLabel1</code>. Это значение было создано конструктором графического интерфейса в качестве отображаемого текста метки. В данном же случае в качестве метки отображается изображение, а не текст, поэтому вводить текст не требуется.</li> |
| <li>Перетащите кнопку в центр формы.</li> |
| </ul> |
| |
| <img alt="Снимок представления конструирования класса ImageDisplay с отцентрированным изображением." class="margin-around" height="266" src="../../../images_www/articles/70/java/gui-image-display/centered.png" width="386"> |
| |
| |
| <p><b>Просмотр созданного кода:</b></p> |
| <ol> |
| <li>В GUI Designer перейдите на вкладку "Исходный код".</li> |
| <li>Прокрутите вниз до строки "Созданный код".</li> |
| <li>Щелкните значок (+) слева от строки "Созданный код" для просмотра кода, созданного GUI Designer.</li> |
| </ol> |
| <p>Основная строка выглядит следующим образом:</p> |
| |
| <pre class="examplecode">jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/org/me/myimageapp/resources/park-sculpture.jpg"))); // NOI18N</pre> |
| |
| <p>Свойство <code>Icon</code> элемента <code>jLabel1</code> было изменено в редакторе свойств, поэтому средой IDE был создан метод <code>setIcon</code>. В параметре этого метода содержится вызов метода <code><a href="http://download.oracle.com/javase/6/docs/api/java/lang/ClassLoader.html#getResource(java.lang.String)" target="_blank">getResource()</a></code> анонимного внутреннего класса в <code>ImageIcon</code>. Обратите внимание на то, что созданный путь к изображению связан с его местоположением в структуре пакетов приложения.</p> |
| |
| <p><b>Примечания</b></p> |
| <ul> |
| <li class="notes">Если в редакторе свойств значка установить параметр "Внешнее изображение", то средой IDE будет создан абсолютный путь к изображению, т.е. само изображение не будет скопировано в проект. Как следствие, при запуске приложения на этом же компьютере изображение появится, а при запуске на другом компьютере -- скорее всего, нет.</li> |
| <li class="notes">Метод <code>getResource</code> также используется для доступа к другим ресурсам, таким как текстовые файлы с какими-либо данными, используемыми в приложении.</li> |
| </ul> |
| <p><b>Чтобы зарегистрировать обработчики для событий мыши на Jlabel:</b></p> |
| <p> |
| Щелкните JLabel правой кнопкой мыши и выберите Events ("События") > Mouse ("Мышь") > mouseClicked/mousePressed/mouseReleased из всплывающего меню.<br>Будет создан обработчик для соответствующего события.</p> |
| <p class="notes"><b>Примечание.</b> Можно получить координаты мыши (например, местоположение щелчка мыши) в обработчике событий с помощью методов <code>event.getPoint()</code>, <code>event.getX()</code> и <code>event.getY()</code>. Подробности приведены в разделе <a href="http://docs.oracle.com/javase/1.4.2/docs/api/java/awt/event/MouseEvent.html">Класс MouseEvent</a>.</p> |
| |
| <a name="background"></a> |
| <h2>Показ изображения как фона в кадре</h2> |
| |
| <p> Конструктор графического интерфейса не поддерживает напрямую использование JFrame как фонового изображения, поскольку такой поддержки нет в Swing.<br> Тем не менее, этой цели можно достигнуть различными непрямыми путями. В этом приложении JLabel с изображением будет внедрен в компонент JFrame, тогда как JPanel будет размещен над JLabel и использован как родительский элемент для всех компонентов.</p> |
| |
| <p><b>Добавление прозрачного компонента JPanel к JFrame внутри изображения:</b></p> |
| <ol> |
| <li>Выберите команду "Файл" > "Новый проект".</li> |
| <li>В мастере создания проекта выберите "Java" > "Приложение Java", затем нажмите кнопку "Дальше".</li> |
| <li>В качестве имени проекта введите <code>BackgroundImageApp</code>.</li> |
| <li>Снимите флажок "Создать главный класс".</li> |
| <li>Проверьте, что установлен флажок "Установить как главный проект".</li> |
| <li>В окне 'Проекты' разверните узел <code>BackgroundImageApp</code>.</li> |
| <li>Щелкните правой кнопкой узел "Исходные файлы" и выберите форму "Создать" > "JFrame".</li> |
| <li>В качестве имени класса введите <code>ImageDisplay</code>.</li> |
| <li>В качестве имени пакета введите <code>org.me.mybackgroundapp</code>.</li> |
| <li>Нажмите кнопку "Завершить".</li> |
| <li>В представление 'Конструирование' щелкните правой кнопкой мыши JFrame и выберите 'Настроить макет' > 'Макет GridBag' во всплывающем меню. </li> |
| <li>Щелкните правой кнопкой мыши JFrame и выберите Add From Pallette ("Добавить из палитры") > Swing Containers ("Контейнеры Swing") > Panel ("Панель") из всплывающего меню. </li> |
| <li>В окне свойств отмените выбор свойства jPanel <code>opaque</code>.</li> |
| <li>Щелкните правой кнопкой мыши JFrame и выберите Add From Pallette ("Добавить из палитры") > Swing Controls ("Элементы управления Swing") > Label ("Метка") из всплывающего меню.</li> |
| <li>В окне 'Проекты' щелкните правой кнопкой мыши узел <code>org.me.mybackgroundapp</code> и выберите 'Создать' > 'Пакет Java'.</li> |
| |
| <li>В мастере создания пакетов к имени <code>org.me.mybackgroundapp</code> добавьте <code>.resources</code>; новый пакет получит имя <code>org.me.mybackgroundapp.resources</code>.</li> |
| <li>Нажмите кнопку "Завершить".</li> |
| <li>В редакторе GUI Designer выберите метку, добавленную ранее в форму.</li> |
| <li>В окне "Свойства" щелкните категорию "Свойства" и выполните прокрутку до свойства "Значок".</li> |
| <li>Нажмите кнопку со многоточием (...). </li> |
| <li>В диалоговом окне свойств значка щелкните Import to Project ("Импорт в проект").</li> |
| <li>В окне выбора файлов выберите любое сохраненное в компьютере изображение. Затем нажмите кнопку "Дальше". </li> |
| <li>На странице Select Target Folder ("Выбор целевой папки") в мастере выберите папку resources и нажмите кнопку Finish ("Готово").</li> |
| <li>В навигаторе щелкните правой кнопкой мыши jPanel и выберите 'Свойства' во всплывающем меню. </li> |
| <li>В диалоговом окне Properties ("Свойства") установите свойства <code>Grid X</code>, <code>Grid Y</code>, <code>Weight X</code> и <code>Weight Y</code> на <code>1</code>, а свойство <code>Fill</code> на <code>Both</code>. Выберите "Close" (Закрыть). </li> |
| <li>Повторите действия 24 и 25 для jLabel.<br>Теперь фон готов. Теперь можно, например, перетащить jLabel и jTextField в jPanel из Palette. Оба они будут отображены поверх фонового изображения.<br> <img alt="Снимок представления конструирования класса Background." class="margin-around" src="../../../images_www/articles/71/java/gui-image-display/background.png"></li> |
| </ol> |
| <p>Преимуществом описанного решения является то, что фоновое изображение показывается как в ходе разработки, так и во время выполнения.</p> |
| |
| <a name="building"></a><h2>Сборка и запуск приложения</h2> |
| <p>На данном этапе после создания кода, реализующего доступ к изображению и вывод его на экран, можно выполнить сборку и запуск приложения и проверить правильность вызова изображения.</p> |
| <p>Сначала необходимо указать главный класс проекта. При назначении главного класса среда IDE получает информацию о том, какой класс следует запускать при запуске проекта. Кроме того, таким образом обеспечивается создание элемента <code>Main-Class</code> в архиве JAR приложения при его сборке.</p> |
| <p><b>Для назначения главного класса проекта выполните следующие действия:</b></p> |
| <ol> |
| <li>Правой кнопкой щелкните узел "ImageDisplayApp" проекта и выберите "Свойства".</li> |
| <li>В диалоговом окне "Свойства проекта" выберите категорию "Выполнение".</li> |
| <li>Нажмите кнопку "Обзор" рядом с полем "Главный класс". Выберите класс <code>org.me.myimageapp.ImageDisplay</code> и нажмите кнопку "Выбрать главный класс".</li> |
| </ol> |
| <p><b>Для сборки проекта:</b></p> |
| <ul> |
| <li>Выберите Run ("Запустить") > Clean & Build Main Project ("Очистка и сборка главного проекта").</li> |
| </ul> |
| <p>В окне "Файлы" отображаются объекты, созданные при сборке приложения. Скомпилированный класс находится в папке <code>build</code>. В папке <code>dist</code> находится исполняемый архив JAR, содержащий скомпилированный класс и изображение.</p> |
| |
| <img alt="Снимок окна 'Файлы' с развернутой папкой dist и отображением скомпилированного класса и файла изображения." class="margin-around" height="316" src="../../../images_www/articles/70/java/gui-image-display/dist.png" width="268"> |
| |
| <p><b>Для запуска проекта выполните следующие действия:</b></p> |
| <ul> |
| <li>Выберите "Выполнение" > "Выполнить главный проект" (F6).</li> |
| </ul> |
| |
| <a name="custom"></a><h2> Создание пользовательского кода</h2> |
| |
| <p>Во многих приложениях выводимое изображение определяется не статически, как в данном примере. К примеру, выводимое изображение может определяться тем, что выбрал пользователь. </p> |
| <p>Если требуется предоставить возможность выбора изображения в исходном коде, то можно написать пользовательский код для вызова и отображения необходимых ресурсов. В среде IDE не предусмотрена возможность добавления кода в "защищенные блоки", содержащие созданный GUI Builder код, в режиме просмотра исходного кода. Однако существует возможность вставки кода в защищенные блоки с помощью редакторов свойств, которые можно вызвать в окне "Свойства". Если использовать в этих целях редакторы свойств, то пользовательский код не будет потерян при внесении изменений в GUI Builder.</p> |
| <p><b>Например, для вставки пользовательского кода в свойство <code>icon</code> метки JLabel выполните следующие действия:</b></p> |
| <ol> |
| <li> Выберите "JLabel" в режиме разработки или в окне "Инспектор".</li> |
| <li>В окне "Свойства" нажмите кнопку в виде эллипса (...) рядом со свойством "Значок".</li> |
| <li>В раскрывающемся списке в верхней области диалогового окна выберите параметр "Пользовательский код".</li> |
| </ol> |
| |
| <img alt="Редактор свойств значков с выбранным параметром 'Пользовательский код' в раскрывающемся списке, но при этом представления средства выбора изображения все еще отображается." class="margin-around" height="115" src="../../../images_www/articles/70/java/gui-image-display/custom-code.png" width="419"> |
| <p>С помощью параметра "Пользовательский код" в этом редакторе свойств можно вручную указать метод <code>setIcon</code>. Кроме того, в этом параметре можно ввести требуемую логику или указать вызов отдельного метода, для которого вручную был создан код.</p> |
| <img alt="Редактор свойств значков с выбранным параметром 'Пользовательский код' в раскрывающемся списке и текстовой областью, в которой можно ввести параметр setIcon." class="margin-around" height="143" src="../../../images_www/articles/70/java/gui-image-display/custom-code-view.png" width="452"> <a name="summary"></a><h2>Заключение</h2> |
| <p>В этом руководстве описывается получение доступа к изображениям из приложения, созданного в IDE NetBeans. Более подробно работа с изображениями рассматривается в учебном курсе по Java. </p> |
| <p class="notes"><b>Примечание. </b>Пример в этом учебном курсе очень схож с первым примером в разделе учебного курса по Java <a href="http://java.sun.com/docs/books/tutorial/uiswing/components/icon.html" target="_blank">Использование раздела значков</a>. Отличие заключается в том, что в коде, создаваемом при работе по этому учебному курсу, для вставки изображения в надпись используется метод <code><a href="http://download.oracle.com/javase/6/docs/api/javax/swing/JLabel.html#setIcon(javax.swing.Icon)" target="_blank">setIcon</a></code> элемента <code><a href="http://download.oracle.com/javase/6/docs/api/javax/swing/JLabel.html" target="_blank">JLabel</a></code>. В примере, приведенном в учебном курсе по Java, в значок добавляется в метку путем его передачи через конструктор.</p> |
| |
| |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback:%20Handling%20Images%20in%20a%20GUI%20Application">Мы ждем ваших отзывов</a> |
| </div> |
| <br style="clear:both;" > |
| |
| |
| <a name="seealso"></a><h2>Дополнительные сведения</h2> |
| <ul> |
| <li><a href="gui-functionality.html">Введение в разработку графического интерфейса </a></li> |
| <li><a href="quickstart-gui.html">Разработка Swing GUI в IDE NetBeans</a></li> |
| <li><a href="../../trails/matisse.html">Учебная карта по приложениям с графическим интерфейсом Java </a></li> |
| <li><a href="../../trails/java-se.html">Учебная карта по общим сведениям о разработке на Java</a></li> |
| <li><a href="http://wiki.netbeans.org/NetBeansUserFAQ#GUI_Editor_.28Matisse.29" target="_blank">GUI Builder – часто задаваемые вопросы</a></li> |
| </ul> |
| |
| </body> |
| </html> |
