Создание сенсорного пользовательского интерфейса SVG для устройств Java ME

В этом учебном курсе приведены принципы разработки функционально насыщенных пользовательских интерфейсов для Java ME на базе устройств с сенсорными экранами с использованием элементов оформления пользовательских интерфейсов SVG. Быстро растущее число устройств с сенсорными экранами и поддержкой Java ME, например, Samsung Omnia и Instinct, Nokia 5800 Xpress Music или Blackbery Storm, требует дополнительных знаний от серьезных разработчиков мобильных приложений для этих устройств. Приложение, созданное в настоящем учебном пособии, работает на большинстве устройств, поддерживающих интерфейс API SVG для J2ME (JSR226), поскольку элементы оформления пользовательского интерфейса Rich SVG поддерживаются также устройствами, не имеющими сенсорных экранов.

Содержание

Содержимое данной страницы относится к среде IDE NetBeans версии 6.9 или более поздней

Требования

Для работы с этим учебным курсом требуются программное обеспечение и материалы, перечисленные ниже.

Программное обеспечение или материал Требуемая версия
Среда IDE NetBeans с Java ME Версия 6.9 или более поздняя
Комплект для разработки приложений на языке Java (JDK) Версия 6 или 7
Пример обозревателя контактов проект NetBeans
Фрагменты пользовательского интерфейса SVG Подключаемый модуль NetBeans

Чтобы убедиться в том, что функции устройства Java ME активированы, рекомендуется выполнить пользовательскую установку и во время установки IDE снять флажок для компонента "Features on Demand" (Функции по требованию).

Настройка среды проекта

Кроме требуемого программного обеспечения, перечисленного выше, необходимо установить на компьютер нижеперечисленные программы.

  • Распакуйте файл ContactBrowser.zip в папку проекта NetBeans.
  • Загрузите подключаемый модуль фрагментов SVG и установите его в среду NetBeans:
    1. В меню среды IDE выберите "Tools" > "Plugins". Перейдите на вкладку "Downloaded" и нажмите кнопку "Add Plugins".
    2. Перейдите в локальную папку, содержащую файл svg-snippets.nbm, выделите его и нажмите кнопку "Install" (Установить).
  • Нажмите кнопку "Install" и выполните установку в соответствии с указаниями среды IDE. После установки подключаемого модуля необходимо перезапустить среду IDE.
  • После перезапуска среды IDE выберите "Tools" > "Options". Щелкните значок "Miscellaneous" в диалоговом окне "Options", после чего выберите вкладку "SVG".
  • В разделе "SVG Rich Components Snippets" откройте раскрывающееся меню "Snippets" и выберите J1 HOL SVG Snippets. Нажмите кнопку "ОК".

    Диалоговое окно "Options" (Параметры)

В начало

Создание пользовательского интерфейса в 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", "ОК" и других функций пользовательского интерфейса;
  • SVG Spinner – позволяет пользователю прокручивать изменяемые значения с помощью кнопок "Up" и "Down";
  • SVG Slider – позволяет пользователю настроить свойство изменяемого значения. Например, от светлого до темного или от 0 до 100%;
  • SVG Label – позволяет пользователю ставить метки в текстовых полях или в других компонентах пользовательского интерфейса.

Фрагменты кода пользовательского интерфейса SVG, доступные на палитре SVG Composer

Это лишь общий обзор компонентов функционально насыщенных пользовательских интерфейсов SVG. Более подробные сведения приведены на странице Netbeans Visual Mobile Designer Wiki.

Действия по созданию пользовательского интерфейса SVG

Откроем подготовленный проект ContactBrowser, используемый в качестве основы для создания проекта.

  1. Откройте в среде IDE NetBeans подготовленный проект Java ME ContactBrowser.

    Обзор проекта ContactBrowser

  2. Откройте изображение employeeList.svg в SVG Composer и перетащите два компонента SVG Button и один компонент SVG List Form из палитры на холст "Preview", как показано ниже. Мы переименуем кнопки позднее в этом учебном курсе.

    Ниже приведена завершенная форма со следующими добавленными компонентами:

    • 2 компонента Button;
    • 1 компонент List.

    Форма с двумя кнопками и списком

  3. В окне "Preview" (Предварительный просмотр) щелкните текст на кнопке "ОК" вверху слева и перетащите его влево, как показано ниже на снимке экрана. Это позволит правильно отобразить слово "Select" на кнопке пользовательского интерфейса.

    Форма с двумя кнопками и списком

  4. Для нашего пользовательского интерфейса SVG необходим дополнительный файл SVG, employeeForm.svg, поэтому снова откроем файл и добавим кнопки, текстовые поля и метки из палитры на изображение в SVG Composer и переименуем их для создания пользовательского интерфейса. После завершения на экране должно быть примерно следующее изображение.
    • Добавленные компоненты:
      • 3 компонента Button;
      • 4 компонента Label;
      • 2 компонента Text Field;
      • 1 компонент Radio Button;
      • 1 компонент Spinner.

    Добавленные компоненты SVG

  5. В окне "Preview" (Предварительный просмотр) щелкните текст кнопки "ОК" внизу слева и перенесите его влево, как показано на рисунке ниже. Это позволит правильно отобразить слово "Previous" на кнопке пользовательского интерфейса.

    Текст на кнопке "ОК", перенесенный влево

Создание мидлета в Visual Mobile Designer

Инфраструктура компонентов функционально насыщенного пользовательского интерфейса SVG разделена на две части:

  • фрагменты SVG, которые используются для сборки пользовательского интерфейса в SVG Composer или другом редакторе SVG;
  • библиотеки Java ME, поддерживающие функциональность пользовательского интерфейса.

Мы уже ознакомились с редактором SVG Composer и фрагментами, поэтому следующим шагом является рассмотрение библиотек в Visual Mobile Designer, с помощью которых осуществляется объединение изображений SVG с логикой приложения в исходном коде Java ME.

  1. Для создания нового визуального мидлета выберите File > New File (Файл > Создание файла) и в диалоговом окне "New File" (Создание файла) в списке"Categories" (Категории) выберите MIDP, а в списке "File Types" (Типы файлов) выберите Visual MIDlet. Новый файл должен быть частью пакета org.netbeans.lab.ui.svg.

    Диалоговое окно "New File" (Создание файла)

  2. В только что созданном мидлете переключитесь на представление "Flow". Найдите на палитре раздел "SVG Components" (Компоненты SVG), затем перетащите два компонента SVG Form на холст проектирования в представлении "Flow" (Последовательность действий) и с помощью контекстного меню переименуйте их в employeeList и employeeForm.

    Две добавленные формы SVG

  3. Следующее действие – соединение изображений SVG с исходным кодом. Для подключения компонентов пользовательского интерфейса SVG к исходному коду достаточно перетащить файл employeeList.svg из окна "Project" (Проект) на компонент employeeList и повторить это действие для employeeForm.svg, перетащив его на employeeForm.

    Компоненты пользовательского интерфейса SVG, подключенные к исходному коду

  4. Теперь необходимо изменить имена экземпляров svgButtons, чтобы связать их с действиями, которые они выполняют. Обратите внимание, что пользовательский интерфейс кнопки не изменяется, это будет сделано позже. Для изменения имен экземпляров svgButtons щелкните кнопку правой кнопкой мыши и выберите команду "Rename" из контекстного меню. Введите название требуемого действия для экземпляра svgButtons в поле "New Name" диалогового окна "Rename Instance Name".

    Примечание. Изменяя имена экземпляров компонентов пользовательского интерфейса, выбирайте новое имя, отражающее функцию кнопки интерфейса.

    Имена экземпляров svgButtons изменены

  5. Следующее действие – изменение стандартных меток SVG Label для кнопок и текстовых полей, чтобы они соответствовали информации, отображаемой в приложении ContactBrowser. Для этого переключитесь в представление "Screen" и откройте employeeForm. Выберите элемент "Label" в представлении "Screen" и измените текст всех меток и кнопок согласно приведенному ниже рисунку.

    Свойства текста кнопок и меток изменены

  6. Также необходимо изменить имена экземпляров текстовых полей SVG. Щелкните правой кнопкой мыши элемент "First Name", выберите "Rename" из контекстного меню и измените имя на svgTextFieldFirstName. Повторите это действие для поля "Last Name" и измените его имя на svgTextFieldLastName.
  7. Теперь в раскрывающемся окне проекта IDE перейдите от employeeForm к employeeList и переименуйте кнопки, как показано на рисунке ниже. Изменения отображаются в поле "Text" окна "Properties".

    Свойства текста кнопок изменены

В начало

Использование Visual Mobile Designer для создания потока операций в приложении

Теперь вы готовы создать поток операций в приложении с помощью представления "Flow" Visual Mobile Designer.

  1. Переключитесь в среде IDE из представления "Screen" в представление "Flow".
  2. Соедините компоненты, как это указано ниже. Начните с выбора компонента "Started" элемента Mobile Device и перетащите мышь к элементу employeeList. Соедините остальные компоненты таким же образом.

    Последовательность действий приложения создана

В представлении "Source" показан механизм привязки фрагментов компонента пользовательского интерфейса XML SVG к библиотекам среды выполнения Java ME. В приведенном ниже примере показано, как фрагменты кода SVG Button привязаны к объектам Java ME. Компонент SVG распознается с помощью идентификатора фрагмента кода XML, в данном примере – button_0.

Выполнение приложения

Перед добавлением логики приложения необходимо протестировать пользовательский интерфейс обозревателя контактов в эмуляторе.

Выберите в меню "Run Main Project" (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 в представлении "Flow" мидлета "Visual Midlet".

Создание пользовательской модели SVGList

Здесь мы создадим собственную реализацию SVGListModel. Наша реализация SVGListModel является анонимным классом внутри метода getSvgList.

  1. Используйте "Navigator" (нажмите Ctrl+7, если он не отображается) для поиска элемента getSvgList в компоненте employeeList, щелкнув правой кнопкой и выбрав из контекстного меню команду "Got To Source".
  2. В методе getSVGList после svgList = new SVGList(getEmployeeList(), "list_0"); добавьте следующий код.
    		    //Creating and adding new SVGListModel as anonymous class. Implementation of ListModel
                svgList.setModel(new SVGList.ListModel() {
                    //Getting contact data as Vector from class EmployeeData
                    Vector data = EmployeeData.getData();  
                                    
                    /**
                     * Method returns combination of strings: First Name + Last Name
                     * @return Employee name as String
                     */
                    public Object getElementAt(int index) {
                        //Getting First Name String
                        String firstName = ((Employee) data.elementAt(index)).getFirstName();
                        //Getting Last Name String
                        String lastName = ((Employee) data.elementAt(index)).getLastName();
                        
                        return firstName + " " + lastName;
                    }
                     /**
                     * Number of employees
                     * @return number of employees
                     */
                    public int getSize() {
                        return data.size();
                    }
                    //not used
                    public void addDataListener(DataListener listener) { }               
                    
                    //not used
                    public void removeDataListener(DataListener listener) { }                          
                });

Примечание. В IDE вы можете использовать функцию автозавершения кода и ввести код по своему усмотрению.

Логика кнопок "Next" (Следующий) и "Previous" (Предыдущий)

На этом этапе мы добавим логику для кнопок SVGButton, являющихся частью employeeForm. Эти кнопки позволяют пользователям приложения просматривать данные сотрудников. Нажав кнопку "Next" пользователь переходит к следующей записи контакта. Нажав кнопку "Previous" пользователь переходит к предыдущей записи контакта. На этом этапе мы используем элемент "Entry Point", описанный ранее.

  1. Переключитесь в представление "Flow" и добавьте два компонента "Entry Point" из категории "Flow" палитры. Щелкните компоненты правой кнопкой мыши и переименуйте их в nextMethod и previousMethod, как показано ниже:

    Последовательность действий SVGButtons создана

  2. Теперь необходимо добавить глобальный закрытый целочисленный индекс свойства для визуального мидлета. Переключитесь в представление "Source" и добавьте следующий текст в охраняемый блок "Generated Fields":
    private int index = 0;
  3. Теперь добавьте логику для обновления пользовательского интерфейса в employeeForm. Используемый здесь метод обновляет элементы пользовательского интерфейса SVG в компоненте employeeForm. В редакторе исходного кода добавьте в конец класса следующий метод.

    Примечание. Для ввода кода в среде IDE можно использовать функцию автозавершения кода.

    	        //**Method is responsible for populating employee UI form with information about employees.
                private void updateEmployeeFormUI() {
                  //Getting currently selected employee
                  final Employee employee = (Employee) EmployeeData.getData().elementAt(index);
                  //Setting First Name
                  getSvgTextFieldFirstName().setText(employee.getFirstName());
                  //Setting Last Name
                  getSvgTextFieldLastName().setText(employee.getLastName());
                  //Setting Gender
                  if (employee.getGender()) {
                      getSvgRadioButton().setSelected(false);
                      getSvgRadioButton1().setSelected(true);
                  } else {
                      getSvgRadioButton().setSelected(true);
                      getSvgRadioButton1().setSelected(false);
                  }    
                  //Setting age
                  getSvgSpinner().getModel().setValue(new Integer(employee.getAge()));
                }  
    	  

    Теперь можно приступать к добавлению логики в nextMethod и previousMethod.

  4. Переключитесь на представление "Flow" (Последовательность действий), щелкните правой кнопкой мыши точку входа для nextMethod и во всплывающем меню выберите команду "Go To Source" (Перейти к исходному коду).
  5. В редакторе исходного кода добавьте в метод nextMethod() перед switchDisplayable(null, getEmployeeForm().getSvgCanvas()); следующий код. Этот код отображает следующую запись в очереди записей сотрудников. Кроме того, он вызывает пользовательский интерфейс для обновления выведенной на экран информации.
    // Move to the next Employee record
            if (index < EmployeeData.getData().size() - 1) {
                //Update index.
                index++;
            }
            //Update UI - employee form
            updateEmployeeFormUI();
            //Go back to employeeForm
    		
  6. Переключитесь на представление "Flow" (Последовательность действий), щелкните правой кнопкой мыши точку входа для previousMethod и во всплывающем меню выберите команду "Go To Source" (Перейти к исходному коду).
  7. В редакторе исходного кода добавьте в метод previousMethod() перед switchDisplayable(null, getEmployeeForm().getSvgCanvas()); следующий код, чтобы активировать функциональные возможности обзора данных.
    // Move to the previous Employee record
            if (index > 0) {
                //Update index
                index--;
            }
            //Update UI
            updateEmployeeFormUI();
            //Go back to employeeForm
    	  

    Далее необходимо убедиться в том, что пользовательский интерфейс будет обновлен при взаимодействии с employeeForm и установить глобальный индекс, основываясь на выборе, выполненном в списке сотрудников.

  8. Переключитесь на представление "Flow" (Последовательность действий), щелкните правой кнопкой мыши кнопку select в employeeList и выберите во всплывающем меню команду "Go To Source" (Перейти к исходному коду).
  9. В редакторе исходного кода добавьте в метод getSelect() после public void actionPerformed(SVGComponent svgComponent) { следующий код.
     //Updating global index
                        index = getSvgList().getSelectionModel().getSelectedIndex();
                        //Updating UI after selection has been made
                        updateEmployeeFormUI();
                        //Switching to the employeeForm

В начало

Тестирование приложения в эмуляторе устройства с сенсорным экраном

Мы готовы к проверке нашего приложения в эмуляторе устройства Java ME SDK 3.0 DefaultFxTouchPhone1, поставляемого в пакете вместе с установщиком среды IDE NetBeans. Для запуска приложения необходимо изменить свойства проекта.

  1. Щелкните правой кнопкой узел "Project" и выберите из контекстного меню команду "Properties". В диалоговом окне "Project" выберите в области "Category" пункт "Platform", после чего из раскрывающегося списка "Emulator Platform" выберите пункт "Java Platform Micro Edition SDK 3.0".
  2. Для эмуляции устройства с сенсорным экраном выберите DefaultFxTouchPhone1 в раскрывающемся меню "Device" (Устройство) и CLDC-1.1 в качестве "Device Configuration" (Конфигурация устройства), как показано ниже, затем нажмите кнопку "ОК".

    Для эмулятора выбраны платформа и устройство

  3. Перейдите к "Run > Run Project" (Выполнить > Выполнить проект), и приложение запустится в эмуляторе. Наводя указатель мыши на компоненты SVG, можно убедиться, что свойства сенсорного экрана активированы. Для перехода по меню приложения можно перемещать по экрану курсор мыши, как это делал бы пользователь кончиком пальца.
  4. В эмуляторе можно выполнить несколько базовых тестов пользовательского интерфейса, например, тест на использование кнопок "Previous" или "Next", позволяющий проверить корректность работы элементов пользовательского интерфейса.

    Приложение запущено в эмуляторе

Заключение

В этом учебном курсе вы освоили создание с помощью среды IDE NetBeans пользовательского интерфейса для устройств Java ME. Поддерживающий сенсорные устройства интерфейс основан на SVG.

В начало


Дополнительные сведения

В начало

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo