Lab05_2012_draft_1
.pdfЛабораторная работа № 5. Разработка простого приложения с графическим интерфейсом
Настоящая лабораторная работа предполагает разработку простого графического редактора. Это будет первое графическое приложение, которое Вы . Кроме использования некоторых стандартных визуальных компонентов, Вы также познакомитесь со средствами Java для «низкоуровневого рисования».
Проект № 5. Простой графический редактор.
Простой графический редактор по своим возможностям будет уступать даже Paint в Windows (впрочем, в Ваших силах этот простой графический редактор доработать). Одна из его основных задач –продемонстрировать, как можно рисовать в java-приложениях.
В отличие от консольных приложений, в которых практически весь код Вы писали вручную, графические приложения, создаваемые с помощью средств разработки таких приложений, содержат достаточно большое количество автоматически сгенерированного кода. Этот код отвечает, в частности, за размещение компонентов в приложении, за связывание компонентов с обработчиками событий и т.п. Нужно отметить, что Java – это не только язык, это система программирования, в которую, в том числе, входят библиотеки, содержащие компоненты. А среда NetBeans является лишь надстройкой над этой системой программирования: и разместить компоненты, и создать обработчики событий можно, не прибегая к помощи какой-бы то ни было визуальной среды. Однако использование среды позволяет быстрее решить такие технические задачи.
Примечание.
Для размещения компонентов в Java существуют специальные компоненты, именуемые менеджерами размещений. Поскольку среда действует «универсальным образом», она нередко генерирует более громоздкий код, нежели тот, который мог бы быть написан вручную. Разумеется, от среды тоже можно его добиться, в частности, используя группирующие компоненты и т.п. Конечно, красивый код – это всегда одно из достоинств приложения. Но пока мы делаем акцент на скорости разработки.
§ 1. Создание проекта
Создайте в NetBeans новый проект как графическое приложение. Для этого в окне New Project (рис. 1., появляющемся после обращения к меню File | New Project), выберите Java Application и нажмите Next.
В следующем окне New Java Application (рис. 2) выберите следующие настройки: имя проекта (Project Name) – SimpleGraphicEditor, местоположение проекта (Project Location) – W:\JavaProject\LR05_01, снимите галочку с пункта Create Main Class (Создать главный класс), остальные – оставьте по умолчанию.
Кнопка Next после этого не будет активна, поэтому нажмите сразу на кнопку Finish, чтобы среда выполнила создание проекта. Это займет некоторое время – более долгое, чем создание консольного приложения. Однако созданная заготовка будет пустой (рис. 3).
Рис. 1. Выбор типа нового проекта
Рис. 2. Выбор имени и местоположения нового проекта
Рис. 3. Созданная заготовка пока пуста
Чтобы создать приложение с графическим интерфейсом, нам потребуется поместить в него компонент-контейнер, в который, в свою очередь, будут помещаться другие (визуальные) компоненты. Для создания графического интерфейса мы будем использовать библиотеку Swing.
Рис. 4. Добавим контейнер JFrame во вновь созданный проект
Библиотека Swing — это библиотека графических компонентов, таких как кнопки, списки, панели, позволяющих разрабатывать графический интерфейс пользователя. Это не единственная библиотека для Java, так, например, в установочный пакет NetBeans входит также библиотека JavaFX, в Eclipse используется SWT.
Добавим во вновь созданный проект контейнер JFrame. Для этого нажмите правой клавишей мыши на имени проекта SimpleGraphicEditor и в появившемся меню выберите JFrame Form (рис. 4). Заметим, что JFrame можно найти в списке форм графического интерфейса Swing (Swing GUI Forms), обратившись к диалоговому окну, вызываемому с помощью пункта контекстного меню Other... (этот пункт также можно увидеть на рис. 4, а диалоговое окно приведено на рис. 5).
Рис. 5. Список форм интерфейса Swing
Какой бы способ создания JFrame Вы ни выбрали, Вам понадобится задать имя класса и имя пакета для него. Предлагается в качестве имени класса использовать SimpleGraphicEditorUI, а в качестве имени пакета — my.simplegraphiceditor (рис. 6). Заполните соответствующие поля диалогового окна и нажмите кнопку Finish. Теперь наша заготовка стала значительно более «наполненной» (рис. 7).
В проекте появился файл SimpleGraphicEditorUI.java, размещенный в пакете my.simplegrapiceditor (обратите внимание, что этот пакет заменил собой пакет по умолчанию). Если Вы переключитесь теперь на вкладку Source, то увидите код, который автоматически был сгенерирован средой (рис. 8).
Рис. 6. Выбор имени и пакета для компонента JFrame
Рис. 7. Заготовка проекта после добавления JFrame
Рис. 8. Переключение на вкладку Source показывает исходный код
Впрочем, некоторая часть кода свернута: если Вы внимательно присмотритесь, то обнаружите, что возле некоторых номеров строк в квадратиках показаны знаки «+», а за строкой № 26 следует строка № 44 (не исключено, что у Вас номера могут оказаться другими). Чтобы просмотреть этот код, можно нажать на знак «+», а можно просто подвести мышку к пометке Generated Code – и код будет показан в отдельном окне (рис. 9). Этот код помечен серым, и система не позволит его менять
Рис. 9. Сгенерированный код можно посмотреть, просто наведя курсор мыши на скрытый элемент
Кроме этого, «свернутым по умолчанию» оказывается еще и фрагмент, отвечающий за «Look and feel» (рис. 10) — строки с 52 по 74; на рисунке они полностью раскрыты (хотя их тоже можно просмотреть, просто наведя курсор мыши на строчку 52,
содержащую пометку о скрытом коде (знак «+» и комментарий; обратите внимание, что комментарий тоже раскрывается)
Рис. 10. Скрытый код (Look and feel setting code)
Несмотря на то, что этот код тоже «свернут», редактировать его не запрещено. Впрочем, сейчас нам это не требуется.
Изучая метод main(), Вы обнаружите там еще одну интересную синтаксическую конструкцию (рис. 11, строки с 79 по 84). Форма создается и отображается с помощью анонимного класса, реализующего интерфейс Runnable. Мы обсудим эту конструкцию позже.
Рис. 11. Создание и отображение формы JFrame
§ 2. Рисование: подготовка «холста»
Переключитесь вновь в режим Design: следующая задача состоит в том, чтобы создать «область для рисования». В роли этой области будет выступать компонент JPanel, который также является компонентом-контейнером. Он доступен в Палитре компонентов (по умолчанию располагается в правой верхней части окна среды Netbeans; рис. 12).
Рис. 12. Фрагмент Палитры компонентов
Перетащите мышкой этот компонент на форму JFrame в окне разработки. По умолчанию панель имеет небольшие размеры и займет собой лишь часть окна формы (рис. 13).
Рис. 13. JPanel выделен оранжевой рамкой
Заметим, что вместо перетаскивания можно сначала щелкнуть (один раз левой клавишей) мышкой на компоненте в Палитре, а затем щелкнуть мышкой в нужном месте на форме. Когда компонент расположен на панели, Вы можете его перемещать, растягивать (или сжимать) так, как сочтете нужным.
Предлагается расположить панель таким образом, чтобы она была достаточно большой по размеру, но не занимала всю область приложения (дабы оставить место для меню и «инструментов рисования») (рис. 14).
Рис. 14. Возможное расположение панели JPanel
По умолчанию среда дает имя этому компоненту jPanel1 (Вы можете увидеть это в Навигаторе; рис. 15). Такое имя малоинформативно, поэтому заменим его. Вызовите контекстное меню, нажав правую клавишу мыши либо на имени объекта jPanel1 в Навигаторе, либо на самой панели (рис. 16), и выберите пункт Change Variable Namе. В появившемся диалоговом окне замените имя jPanel1 на jDrawingPanel (рис. 17) и нажмите ОК. Обратите внимание, что имя в Навигаторе также изменилось.
Рис. 15. По умолчанию панель получает имя jPanel1
Рис. 16. Контекстное меню для изменения имени панели
Рис. 17. Новым именем компонента будет jDrawingPanel
Теперь изменим некоторые настройки компонента: сделаем цвет панели (цвет фона для рисования) белым и добавим заметную границу. Для этого можно либо обратиться к панели Properties (рис. 18; располагается чуть ниже Палитры компонентов в окне среды), либо с помощью пункта Properties контекстного меню компонента вызвать окно Properties (рис. 19). И панель Properties, и окно Properties имеют 4 вкладки: Properties (Свойства), Binding (Связь), Events (События), Code (Код). В ближайшее время нас будут интересовать только вкладки Properties и Events.