Создание сенсорного пользовательского интерфейса SVG для устройств Java ME
В этом учебном курсе приведены принципы разработки насыщенных пользовательских интерфейсов для Java ME на базе устройств с сенсорными экранами с использованием элементов оформления пользовательских интерфейсов SVG. Быстрый рост числа приложений Java ME на базе устройств с сенсорными экранами, например, Samsung Omnia и Instinct, Nokia 5800 Xpress Music или Blackbery Storm, требует от разработчиков мобильных приложений серьезных знаний. Приложение, созданное в этом учебном курсе, работает на большинстве устройств, поддерживающих интерфейс SVG API для J2ME (JSR226), так как элементы оформления насыщенных пользовательских интерфейсов SVG также поддерживаются устройствами без сенсорных экранов.
Примечание. При использовании среды IDE NetBeans 6.8 просмотрите учебный курс Создание сенсорного пользовательского интерфейса SVG для устройств Java ME в среде IDE NetBeans 6.8.
Содержание
Требования
Для работы с этим учебным курсом требуются программное обеспечение и ресурсы, перечисленные ниже.
Для включения функций Java ME рекомендуется выполнить пользовательскую установку и снять флажок "Функциональность по требованию" во время установки среды IDE.
Настройка среды проекта
Кроме требуемого программного обеспечения, перечисленного выше, необходимо установить на компьютер нижеперечисленные программы.
- Распакуйте файл
ContactBrowser.zip в папку проекта NetBeans.
- Загрузите подключаемый модуль фрагментов SVG и установите его в среду NetBeans:
- Выберите в меню "Сервис" среды IDE команду "Подключаемые модули". Перейдите на вкладку "Загружено" и нажмите кнопку "Добавить подключаемые модули".
- Перейдите к локальной папке с файлом vg-snippets.nbm, выберите его и нажмите кнопку "Установить".
- Нажмите кнопку "Установить" и выполните установку в соответствии с указаниями среды IDE. После установки подключаемого модуля необходимо перезапустить среду IDE.
- После перезапуска среды IDE выберите в меню "Сервис" команду "Параметры". Нажмите в диалоговом окне "Параметры" кнопку "Разное" и выберите вкладку "SVG".
- Откройте в разделе "Фрагменты SVG Rich Components" раскрывающееся меню "Фрагменты" и выберите пункт Фрагменты J1 HOL SVG. Нажмите кнопку "ОК".
В начало
Создание пользовательского интерфейса в SVG Composer
В этом разделее рассматривается основной пользовательский интерфейс приложения на базе SVG. На примере приложения можно довольно просто показать, как создавать новое приложение Java ME, как импортировать изображения SVG из SVG Composer в визуальный мидлет и как запускать проект в эмуляторе устройства MIDP.
Дополнительные сведения
SVG: JSR-226 определяет интерфейс API для визуализации масштабируемой двухмерной векторной графики в XML. Вместо кодировки содержимого каждого пикселя, как это происходит, например, в формате GIF и JPG, векторная графика содержит только инструкции по рисованию каждого пикселя. Благодаря этому векторные изображения обладают несколькими преимуществами:
- масштабируемость с сохранением качества изображения на экранах различных размеров и разрешений; возможность растягивать, отображать зеркально или переворачивать изображение без потери качества;
- поддержка сценариев и анимации, благодаря чему векторные изображения являются идеальными для интерактивной динамической графики;
- компактность. Векторные изображения могут быть в десять раз меньше аналогичных изображений в формате GIF или JPEG. Это важное преимущество позволяет создавать графически насыщенные приложения для портативных устройств с ограниченными ресурсами;
- возможность взаимодействия пользователей с содержимым изображения;
- доступность для поиска. Пользователи могут искать текст внутри изображения. Например, можно искать определенные названия улиц на карте или любимые блюда в меню ресторанов.
Включенная в полнофункциональный набор мобильных устройств, предназначенных для SVG (с названием SVG-Tiny или JSR-226), версия 1.1 профиля SVG-Tiny адаптирована в качестве официального формата файлов векторной графики J2ME.
Введение в элементы оформления SVG и их функции
Создание пользовательских интерфейсов упрощает использование SVG Composer и компонентов насыщенных пользовательских интерфейсов SVG Form в среде NetBeans.
Обзор доступных в палитре SVG Composer фрагментов пользовательского интерфейса SVG:
- SVG List – позволяет разработчикам создавать список элементов пользовательского интерфейса;
- SVG Radio Button – этот компонент позволяет пользователям указывать пол в используемых фрагментах SVG;
- SVG Combo Box – компонент пользовательского интерфейса для меню раскрывающегося списка;
- SVG Text – поле, в котором отображается текст (например, имена людей, идентификаторы продуктов и т. д.);
- SVG Button – кнопки, используемые для функций "Next", "Previous", "OK" и других функций пользовательского интерфейса;
- SVG Spinner – позволяет пользователю прокручивать изменяемые значения с помощью кнопок "Up" и "Down";
- SVG Slider – позволяет пользователю настроить свойство изменяемого значения. Например, от светлого до темного или от 0 до 100%;
- SVG Label – позволяет пользователю ставить метки в текстовых полях или в других компонентах пользовательского интерфейса.
Это лишь общий обзор компонентов насыщенных пользовательских интерфейсов SVG. Более подробные сведения приведены на странице Netbeans Visual Mobile Designer Wiki.
Действия по созданию пользовательского интерфейса SVG
Откроем подготовленный проект ContactBrowser, используемый в качестве основы для создания проекта.
- Откройте подготовленный проект ContactBrowser Java ME в среде IDE NetBeans.
Обзор проекта ContactBrowser
- Откройте изображение
employeeList.svg в SVG Composer и перетащите два компонента SVG Button и один компонент SVG List Form с палитры на холст "Предварительный просмотр", как показано ниже. Позднее в этом учебном курсе кнопки будут переименованы.
Ниже приведена завершенная форма со следующими добавленными компонентами:
- 2 компонента Button;
- 1 компонент List.
- Щелкните в окне предварительного просмотра текст на кнопке "ОК в верхней левой части окна и перенесите его влево, как показано на рисунке ниже. Это позволит правильно отобразить слово "Выбор" на кнопке пользовательского интерфейса.
- Для нашего пользовательского интерфейса SVG необходим дополнительный файл SVG,
employeeForm.svg, поэтому снова откроем файл и добавим кнопки, текстовые поля и метки из палитры на изображение в SVG Composer и переименуем их для создания пользовательского интерфейса. После завершения на экране должно быть примерно следующее изображение.
- Добавленные компоненты:
- 3 компонента Button;
- 4 компонента Label;
- 2 компонента Text Field;
- 1 компонент Radio Button;
- 1 компонент Spinner.
- Щелкните в окне "Предварительный просмотр" текст кнопки "ОК" в нижней левой части окна и перенесите его влево, как показано на рисунке ниже. Это позволит правильно отобразить слово "Назад" на кнопке пользовательского интерфейса.
- В представлении "Свойства" измените свойство "Текст" для каждой кнопки. Перетащите текст кнопки "ОК" в левой нижней части окна влево, как показано на следующем рисунке. Это позволит правильно отобразить слово "Назад" на кнопке пользовательского интерфейса.
Создание мидлета в Visual Mobile Designer
Инфраструктура компонентов насыщенного пользовательского интерфейса SVG разделена на две части:
- фрагменты SVG, которые используются для сборки пользовательского интерфейса в SVG Composer или другом редакторе SVG;
- библиотеки Java ME, поддерживающие функциональность пользовательского интерфейса.
Мы уже ознакомились с редактором SVG Composer и фрагментами, поэтому следующим шагом является рассмотрение библиотек в Visual Mobile Designer, с помощью которых осуществляется объединение изображений SVG с логикой приложения в исходном коде Java ME.
- Чтобы создать новый визуальный мидлет, щелкните в меню Файл команду Создать файл, выберите в разделе "Категории" диалогового окна "Новый файл" элемент "MIDP", а в разделе "Типы файлов" — "Визуальный мидлет". Новый файл должен быть частью пакета org.netbeans.lab.ui.svg.
- В только что созданном мидлете переключитесь в представление потока операций. Найдите в окне палитры раздел "Компоненты SVG" и перетащите два компонента "SVG Form" на холст проекта в представление потока операций, а затем используйте команды контекстного меню, чтобы присвоить им имена
employeeList и employeeForm.
- Следующий шаг – соединение изображений SVG с исходным кодом. Для соединения компонентов пользовательского интерфейса SVG с исходным кодом перетащите файл
employeeList.svg из окна "Проект" в компонент employeeList. Повторите эту операцию для файла employeeForm.svg, перетащив его в компонент employeeForm.
- Теперь необходимо изменить имена экземпляров
svgButtons, чтобы связать их с действиями, которые они выполняют. Обратите внимание, что пользовательский интерфейс кнопки не изменяется, это будет сделано позже. Для изменения имен экземпляров svgButtons щелкните кнопку правой кнопкой мыши и выберите в контекстном меню команду "Переименовать". Введите название требуемого действия для экземпляра svgButtons в поле "Новое имя" в диалоговом окне "Изменить имя экземпляра".
Примечание. Убедитесь, что при изменении имен экземпляров компонентов пользовательского интерфейса новые имена соответствуют функции кнопки пользовательского интерфейса.
- Следующий шаг – изменение стандартных меток SVG Label для кнопок и текстовых полей, чтобы они соответствовали информации, отображаемой в приложении ContactBrowser. Для этого переключитесь в представление "Экран" и просмотрите
employeeForm. Выберите элемент "Метка" в представлении "Экран" и измените текст всех меток и кнопок согласно приведенному ниже рисунку.
- Также необходимо изменить имена экземпляров текстовых полей SVG. Щелкните правой кнопкой мыши элемент "Имя", выберите в контекстном меню команду "Переименовать" и измените имя на
svgTextFieldFirstName. Повторите этот шаг для поля "Фамилия" и измените его имя на svgTextFieldLastName.
- Теперь в раскрывающемся окне проекта IDE перейдите от employeeForm к employeeList и переименуйте кнопки, как показано на рисунке ниже. Изменения отображаются в поле "Текст" в окне "Свойства".
В начало
Использование Visual Mobile Designer для создания потока операций в приложении
Теперь создадим поток операций приложения с помощью представления потока операций в Visual Mobile Designer.
- Перейдите в среде IDE из представления "Экран" в представление потока операций.
- Соедините компоненты, как это указано ниже. Сначала выберите для элемента Mobile Device команду "Запущен" и переместите курсор к элементу employeeList. Соедините остальные компоненты таким же образом.
В представлении "Исходный код" показан механизм привязки фрагментов компонента пользовательского интерфейса XML SVG к библиотекам среды выполнения Java ME. В приведенном ниже примере показано, как фрагменты кода SVG Button привязаны к объектам Java ME. Компонент SVG распознается с помощью ид. фрагмента кода XML, в данном примере – button_0.
Выполнение приложения
Перед добавлением логики приложения необходимо протестировать пользовательский интерфейс обозревателя контактов в эмуляторе.
Выберите в меню команду "Выполнить главный проект (F6)". После запуска эмулятора пользовательский интерфейс можно просмотреть и протестировать. Мы еще не реализовали логику приложения, однако можем проверить, отображается ли пользовательский интерфейс корректным образом с учетом действий, выполненных в Visual Mobile Designer.
В начало
Добавление логики приложения в пользовательский интерфейс SVG
Теперь мы можем использовать Visual Mobile Designer для создания логики приложения в пользовательском интерфейсе, сформированном в результате предыдущего действия. В результате при помощи некоторых дополнительных компонентов и методов в эмуляторе Java ME SDK 3.0 будет запущено приложение.
Дополнительные сведения
- SVG ListModel. Определяет компоненты метода типа SVGList, используемые для получения значения каждой ячейки списка и вычисления числа ячеек, требуемых для их отображения. Логически модель является вектором, индексы которого варьируются от 0 до ListDataModel.getSize() - 1. Любое изменение содержимого или длины модели данных должно сообщаться всем SVGListDataListeners. Если вы имеете опыт работы с моделью JList Swing, работа с SVGListModel не вызовет у вас затруднений.
- Компонент Entry Point. Компонент Entry Point позволяет представить метод в разработанном классе. Метод содержит код, определенный операцией, присвоенной ему, – пин-код "Entry Called". Этот метод можно использовать для выполнения кода при переключении между экранами приложения или, в данном случае, для отображения логики SVGButton в представлении потока операций мидлета "Visual Midlet".
Создание пользовательской модели SVGList
Здесь мы создадим собственную реализацию SVGListModel. Наша реализация SVGListModel является анонимным классом внутри метода getSvgList.
- Используйте проводник (вызывается сочетанием клавиш CTRL+7) для поиска элемента
getSvgList в компоненте employeeList, щелкнув правой кнопкой мыши и выбрав в контекстном меню команду "Перейти к исходному тексту".
- Добавьте после строки
svgList = new SVGList(getEmployeeList(), "list_0"); в методе getSVGList следующий код:
//Создание и добавление новой модели SVGListModel в качестве анонимного класса. Реализация ListModel
svgList.setModel(new SVGList.ListModel() {
//Получение контактных данных в виде вектора из класса EmployeeData
Vector data = EmployeeData.getData();
/**
* Метод возвращает сочетание строк: Имя + Фамилия
* @return имя сотрудника в виде строки
*/
public Object getElementAt(int index) {
//Получение строки имени
String firstName = ((Employee) data.elementAt(index)).getFirstName();
//Получение строки фамилии
String lastName = ((Employee) data.elementAt(index)).getLastName();
return firstName + " " + lastName;
}
/**
* Число сотрудников
* @return число сотрудников
*/
public int getSize() {
return data.size();
}
//не используется
public void addDataListener(DataListener listener) { }
//не используется
public void removeDataListener(DataListener listener) { }
});
Примечание. Можно использовать функцию автозавершения кода в среде IDE и ввести код самостоятельно.
Логика кнопки "Далее" и кнопки "Назад"
На этом этапе мы добавим логику для кнопок SVGButton, являющихся частью employeeForm. Эти кнопки позволяют пользователям приложения просматривать данные сотрудников. Нажав кнопку "Далее", пользователь переходит к следующей записи контакта сотрудника. Нажав кнопку "Назад", пользователь переходит к предыдущей записи сотрудника. Воспользуемся элементом "Точка входа", описанным ранее.
- Переключитесь в представление потока операций и добавьте два компонента "Точка входа" из категории "Поток" на палитре. Щелкните компоненты правой кнопкой мыши и измените их имена на nextMethod и previousMethod, как показано на рисунке:
- Теперь необходимо добавить глобальный частный целочисленный индекс свойства для визуального мидлета. Переключитесь в представление "Исходный код" и добавьте следующий код в защищенный блок "Созданные поля":
private int index = 0;
- Теперь добавьте логику для обновления пользовательского интерфейса в
employeeForm. Используемый здесь метод обновляет элементы пользовательского интерфейса SVG в компоненте employeeForm. В редакторе исходного кода добавьте в конец класса следующий метод.
Примечание. Для ввода кода можно использовать функцию автозавершения кода в среде IDE.
//**Метод используется для внесения сведений о сотрудниках в форму пользовательского интерфейса для сотрудника.
private void updateEmployeeFormUI() {
//Получение выбранного сотрудника
final Employee employee = (Employee) EmployeeData.getData().elementAt(index);
//Определение имени
getSvgTextFieldFirstName().setText(employee.getFirstName());
//Определение фамилии
getSvgTextFieldLastName().setText(employee.getLastName());
//Определение пола
if (employee.getGender()) {
getSvgRadioButton().setSelected(false);
getSvgRadioButton1().setSelected(true);
} else {
getSvgRadioButton().setSelected(true);
getSvgRadioButton1().setSelected(false);
}
//Определение возраста
getSvgSpinner().getModel().setValue(new Integer(employee.getAge()));
}
Теперь добавим логику в методы nextMethod и previousMethod.
- Переключитесь в представление потока операций, щелкните правой кнопкой мыши точку входа
nextMethod и выберите во всплывающем меню команду "Перейти к исходному тексту".
- В редакторе исходного кода добавьте перед фрагментом switchDisplayable(null, getEmployeeForm().getSvgCanvas()); в метод nextMethod() следующий код. Этот код отображает следующую запись в очереди записей сотрудников. Кроме того, он вызывает пользовательский интерфейс для обновления выведенной на экран информации.
// Перейти к следующей записи сотрудника
if (index < EmployeeData.getData().size() - 1) {
//Обновить указатель.
index++;
}
//Обновить пользовательский интерфейс - форма сотрудника
updateEmployeeFormUI();
//Вернуться к employeeForm
- Переключитесь в представление потока операций, щелкните правой кнопкой мыши точку входа
previousMethod и выберите во всплывающем меню команду "Перейти к исходному тексту".
В редакторе исходного кода добавьте перед фрагметом switchDisplayable(null, getEmployeeForm().getSvgCanvas()); в методе previousMethod() следующий код, чтобы активировать функцию обзора данных.
// Вернуться к предыдущей записи сотрудника
if (index > 0) {
//Обновить указатель
index--;
}
//Обновить пользовательский интерфейс
updateEmployeeFormUI();
//Вернуться к employeeForm
Далее необходимо убедиться в том, что пользовательский интерфейс будет обновлен при взаимодействии с employeeForm и установить глобальный индекс, основываясь на выборе, выполненном в списке сотрудников.
- Переключитесь в представление потока операций, щелкните правой кнопкой мыши кнопку выбора в
employeeList и выберите во всплывающем меню команду "Перейти к исходному тексту".
- В редакторе исходного кода добавьте после public void actionPerformed(SVGComponent svgComponent) { в методе
getSelect() следующий код:
//Обновление глобального указателя
index = getSvgList().getSelectionModel().getSelectedIndex();
//Обновление пользовательского интерфейса после выбора
updateEmployeeFormUI();
//Переключение на employeeForm
В начало
Тестирование приложения в эмуляторе устройства с сенсорным экраном
Теперь можно протестировать приложение на эмуляторе устройства Java ME SDK 3.0 DefaultFxTouchPhone1, который поставляется вместе с программой установки среды IDE NetBeans. Чтобы запустить приложение, необходимо изменить свойства проекта.
- Щелкните правой кнопкой мыши узел "Проект" и выберите в контекстном меню команду "Свойства". В диалоговом окне "Проект" выберите в области "Категория" пункт "Платформа" и щелкните в раскрывающемся списке "Платформа эмулятора" пункт "Java Platform Micro Edition SDK 3.0".
- Для эмуляции устройств с сенсорным экраном выберите в раскрывающемся списке "Устройство" параметр "DefaultFxTouchPhone1" и нажмите кнопку "ОК".
- Выберите в меню "Выполнить" команду "Выполнить проект (F6)" для запуска приложения в эмуляторе. Чтобы убедиться, что свойства сенсорного экрана активированы, можно навести курсор мыши на компоненты SVG. Для перехода по меню приложения можно перемещать курсор мыши, эмулируя движения пальцем по экрану.
- В эмуляторе можно выполнить несколько базовых тестов пользовательского интерфейса, например, тест на использование кнопок "Назад" или "Далее", позволяющий проверить корректность работы элементов пользовательского интерфейса.
Заключение
В этом учебном курсе рассматривалось создание пользовательского интерфейса для сенсорного экрана на базе SVG для устройств Java ME с использованием среды IDE NetBeans.
В начало
Дополнительные сведения
В начало
