Создание многоэкранного интерфейса с помощью LWUIT

Если Вы когда-нибудь разрабатывали собственное многоэкранное приложение с различными элементами управления в Java2ME, Вы наверняка знаете, как это непросто. Стандартные высокоуровневые элементы управления, прямо скажем, никуда не годятся, ибо страшны и убоги. Редкий пользователь останется довольным приложением, написанным на их основе. Выход из сложившейся ситуации вполне очевиден – самостоятельно писать пользовательский интерфейс с нуля, на низком уровне отрисовывая все необходимые элементы управления. Конечно, это занимает уйму времени, но результат вполне оправдывает вложенные усилия. Этот способ хорошо подходит при разработке легких игровых интерфейсов, но вот когда речь идет о каком-нибудь "офисном" приложении, то затраты на написание интерфейса могут в разы превысить время написания движка программы. При разработке таких приложений имеет смысл обратить внимание на библиотеки пользовательских интерфейсов.

Одной из самых популярных библиотек интерфейсов на сегодняшний день являетсяLWUIT. Она вошла в последний релиз J2ME SDK 3, и даже удостоилась пункта в меню NetBeans IDE. LWUIT разрабатывалась SUN, теперь ее курирует Oracle, и нужно признать, что делает это весьма неплохо. В сети можно найтидокументацию по LWUIT. Представленные вблоге проекта видеоматериалы очень сильно помогают в освоении возможностей этой библиотеки.

Существует два подхода к разработке LWUIT приложений. Первый из них подразумевает "классическое" в j2me прописывание форм и кнопок (например, как делалосьтут) с использованием расширенных синтаксических конструкций библиотеки интерфейсов, и подключение файлов ресурсов, полученных с помощьюLWUIT Resource Editor. Второй подход, который кажется мне более правильным и эффективным, подразумевает разработку в обратном направлении. Сначала с помощью LWUIT Resource Editor рисуется весь интерфейс будущего приложения и обозначаются возможные события (нажатие кнопок, открытие форм), а затем все это экспортируется в NetBeans проект, где уже дописывается весь необходимый код и вносятся изменения.

Знакомство с LWUIT Resource Editor, создание темы и добавление элементов управления

Давайте запустим NetBeans и выберем пункт менюJava ME>LWUIT Resource Editor. В результате откроется окно редактора. В левом верхнем углу Вы увидите шесть закладок: темы, рисунки, шрифты, локализация, файлы данных и визуальный конструктор пользовательского интерфейса. На каждой из вкладок есть кнопки «+» и «-» для добавления и удаления элементов.

Процесс создания интерфейса приложения начинается с настройки темы. Тема это нечто вроде CSS шаблона в веб дизайне. В ней описан внешний вид будущего интерфейса, ну например цвет и размер кнопок. Можно воспользоваться одной из готовых тем, либо создать свою с нуля. Перейдем на вкладкуThemes и щелкнем по кнопке с плюсом (Add Theme). Появится диалоговое окноNew Theme. В полеName введем какое-нибудь название, например “HiTheme". В выпадающем окне выберем одну из тем, напримерLWUIT_Touch (для создания новой собственной темы следует выбратьBlank) и нажмем ОК. После этого действия окно редактора разделится на две части. Слева Вы увидите различные элементы управления темы, справа - окно предпросмотра. КнопкаPreview Options над окном предпросмотра предназначена для настройки встроенного эмулятора. Например, можно установить размер экрана, шрифта, настроить назначение soft-кнопок телефона, включить поддержку сенсорного экрана. При работе с окном предпросмотра кнопки F1 и F2 выполняют функции soft-кнопок телефона, ESC - соответствует кнопке "Назад".

Давайте создадим простое Hello World приложение. Переключимся на вкладкуGUI Builder (шестая вкладка в левом верхнем углу) и нажмем кнопку с плюсом. Появится диалоговое окноAdd UI. В полеName можно ввести название будущего интерфейса. Выпадающее менюTemplate позволяет создать пустую форму (Blank Form) или взять один из существующих шаблонов за основу. ВыберемBlank Form и нажмем ОК.

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

Разместим надпись на форме. Для этого щелкнем по кнопкеLabel в паллете элементов управления. В окне просмотра появится надписьLabel. Дважды щелкнем по ней и введём текст "Hello World". Обратите внимание, значение свойстваText в правой колонке тоже изменилось. Разместим на форме элементText Field

В настоящей момент на форме расположено три элемента управления. Все они идут друг за другом в один ряд (работает автоматический перенос), что не очень удобно. Щелкнем сначала по форме, чтобы снять выделение с последнего элемента, а затем изменим свойствоLayout, дважды щелкнув по словуFlowLayout. В появившемся окне можно определить, как будут располагаться элементы на экранах с разным разрешением. Вариант размещения элементов выберется в выпадающем менюLayout. Расположенные ниже поля ввода позволяют более точно настроить внешний вид приложения.

Для создания более сложного дизайна используется элементContainer. С его помощью несколько элементов управления можно сгруппировать в один большой блок элементов. На расположение этого блока влияет свойствоLayout формы (или блока более высокого уровня). УContainer тоже есть свойствоLayout, которое в свою очередь влияет на расположение находящихся внутри него элементов. Если вLayout выбрано значениеBorderLayout, то на положение визуального элемента также влияет параметрLayoutConstraint.

Чтобы посмотреть, как наше приложение будет выглядеть на экране телефона, перейдем на вкладкуThemes, щелкнем поHiThemeи нажмем кнопкуPreview Option над окном предпросмотра. В выпадающем меню UI Preview Content выберем GUI 1.

Настройка внешнего вида элементов управления

Как Вы помните, в начале работы мы взяли за основу одну из уже существующих тем. Давайте посмотрим, как можно настроить тему под себя. Для примера изменим внешний вид кнопок. Дважды щелкнем по изображению кнопки (правее словаButton) в левом окне вкладкиThemes. Появится диалог Edit.LWUIT подразумевает использование "резиновых" интерфейсов, подстраивающихся под размер экрана. Для того чтобы кнопку можно было растягивать, ее разбили на 9 картинок. Выбрать эти картинки можно на вкладкеBorder, нажав на кнопку с тремя точками рядом со словомImage. Вносимые изменения сразу сказываются на внешнем виде кнопки в окне предпросмотра. Можно поменять цвет надписи, ее шрифт и расположение в соответствующих вкладках.

Обратите внимание, компоненты имеют 4 различных стиля: не выбранный (unselected, этот стиль отображается по-умолчанию), выбранный (selected), нажатый (pressed) и запрещенный (dissabled). Соответствующие вкладки расположены в средней части экранаThemes (см. рисунок 2).

Локализация интерфейсов в LWUIT Resource Editor

Перейдем к вкладкеLocalization. Здесь можно настроить работу приложения с другими языками. По умолчанию выбрана английская локализация. Давайте добавим поддержку русского языка. Нажмем на кнопку с плюсом. Появится диалоговое окно, здесь ничего не меняя нажмем ОК. Главное окно перейдет в режим работы с локализациями. Нажмем кнопуAdd Locate и в диалоговом окне в полеLocate Name введем “ru".

Перейдем на вкладкуGUI Builder и щелкнем по элементуLabel, который в настоящий момент отображается как "Hello World". В правой части окна перейдем на вкладкуLocalize. Как видите, сейчас в этой вкладке содержится три строки: Key, en и ru. Введем в строку en значение "Hello world", а в ru "Привет, Мир"

Аналогичного эффекта можно добиться, работая во вкладкеLocalization. Для этого нужно нажать кнопкуAdd Property в нижней части экрана (Рисунок 6), а затем ввести значение в колонках ru и en. НажмемAdd Property и введем значение Button, затем дважды щёлкнем на пустое место в появившейся строке Button в колонке en и введем "Button", в колонке ru введем "Кнопка".

Чтобы посмотреть на результат перейдем во вкладкуThemes, щелкнем поHiTheme, в правой части окна нажмем наPreview Options, а затем в выпадающем менюForce Locate выбираем "Localization (L10N) 1 - ru". Чтобы увидеть изменения, нужно еще раз щелкнуть поHiTheme в левой части экрана.

Создание диалогов в LWUIT Resource Editor

Вы можете показывать различные диалоговые окна, сообщения, предупреждения поверх существующих форм. Давайте создадим диалоговое окно. Давайте перейдем на вкладкуGUI Builder и нажмем кнопку с плюсом в левой части экрана. В появившемся диалоговом окне введем "DialogForm" в полеName, в выпадающем менюTemplate выберем Blankdialog.

С диалоговыми окнами можно работать точно так же как и с другими формами, то есть размещать на них кнопки, строки текста и другие визуальные компоненты. Добавим в диалогLabel с текстом "User Pressed The Button" иButton с текстом "Close This Dialog". Поменяем свойствоLayout диалога на значение "BoxLayout Y". В результате кнопка будет расположена под надписью. Выберем созданную кнопку и щелкнем по свойствуCommand (которое в текущий момент содержит значение null). Это свойство позволяет настроить реакцию на нажатие кнопки. нажмем Ок ничего не меняя, по умолчанию кнопка закрывает диалог.

Заставим диалог появляться при нажатии кнопкиButton на форме. Нажмем на кнопкуGuI 1 в левой части экрана, чтобы перейти на форму. Выберем кнопкуButton и вызовем свойствоCommand. Для того чтобы нажатие кнопки приводило к показу диалога, в выпадающем менюAction выберем название нашего диалога, то есть DialogForm.

Взаимодействие между окнами настроено. Чтобы убедиться в том, что все работает, перейдем на вкладкуThemes и щелкнем поHiTheme. Если теперь нажать на кнопкуButton в окне предпросмотра, появится диалоговое окно. Нажатие на кнопку Close… приведет к его закрытию.

Генерация NetBeans проекта на основе созданного в LWUIT интерфейса

Для того, чтобы перенести созданную заготовку в NetBeans нужно выбрать пункт менюApplication > Generate NetBeans Project. В появившемся диалоговом окне следует выбрать стартовую форму. В нашем случае этоGUI 1. В следующем окне можно ввести название NetBeans проекта. Введем HiLWUITProj. Теперь выбираем папку, куда будет сохранен проект. Дальше нас попросят выбрать файл Netbeans.exe. После этого запустится IDE и будет создан проект. Вернее целых четыре проекта: общий, для десктопа, MIDP и RIM(для Blackberry). Щелкаем правой кнопкой по HiLWUITProj, выбираем "Установить проект как главный", после чего нажимаем кнопку Выполнить>Запустить главный проект.

У меня на машине в процессе создания проекта возникла проблема. Не были найдены некоторые библиотеки. У меня не был установлен на WTK 2.5.2, поскольку я ставил на чистую машину J2ME SDK 3.0.5. Пришлось доустанавливать не найденный компонент. Если у Вас возникла такая же проблема, то после установки WTK в дереве проектов NetBeans правой кнопкой нажмите на название проекта и выберите пункт "Разрешить проблемы ссылок". В открывшемся окне нужно указать путь к WTK. После этого проект можно будет запускать.

Заключение

Как видите, LWUIT довольно мощный инструмент. Его использование позволяет значительно сократить время разработки многоэкранных интерфейсов. В этой небольшой статье показаны базовые принципы работы с LWUIT Resource editor и генерации NetBeans проекта. Если данная тема вызовет живой интерес, у нас на сайте появятся еще статьи на эту тему. Пока же, рекомендую Вам ознакомиться с видеоуроками на сайте www.lwuit.com и с документом«LWUIT Developer Guide»

Источники: www.lwuit.com
Видеоурок – генерация NetBeans проекта (англ)
Видеоурок – Знакомство с LWUIT Resource Editor (англ)
Александр Ледков