Если Вы когда-нибудь разрабатывали собственное многоэкранное приложение с различными элементами управления в 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 (англ)
Александр Ледков