| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <!-- | |
| Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. | |
| --> | |
| <html> | |
| <head> | |
| <title>Создание сенсорного пользовательского интерфейса SVG для устройств Java ME – учебный курс по среде IDE NetBeans</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <meta name="Karol Harezlak" content=""> | |
| </head> | |
| <body> | |
| <a name="top"></a> | |
| <h1>Создание сенсорного пользовательского интерфейса SVG для устройств Java ME</h1> | |
| <p>В этом учебном курсе приведены принципы разработки функционально насыщенных пользовательских интерфейсов для Java ME на базе устройств с сенсорными экранами с использованием элементов оформления пользовательских интерфейсов SVG. Быстро растущее число устройств с сенсорными экранами и поддержкой Java ME, например, Samsung Omnia и Instinct, Nokia 5800 Xpress Music или Blackbery Storm, требует дополнительных знаний от серьезных разработчиков мобильных приложений для этих устройств. Приложение, созданное в настоящем учебном пособии, работает на большинстве устройств, поддерживающих интерфейс API SVG для J2ME (<a href="http://jcp.org/en/jsr/summary?id=226">JSR226</a>), поскольку элементы оформления пользовательского интерфейса Rich SVG поддерживаются также устройствами, не имеющими сенсорных экранов.</p> | |
| <!--<p class="notes"><b>Примечание.</b> Если используется NetBeans IDE 6.8, воспользуйтесь учебным курсом <a href="../../68/javame/svgtouch.html">Создание в среде IDE NetBeans 6.8 пользовательского интерфейса SVG, поддерживающего сенсорные устройства, для устройств с поддержкой Java ME</a>.</p>--> | |
| <h3>Содержание</h3> | |
| <img src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" class="stamp" alt="Содержимое данной страницы относится к среде IDE NetBeans версии 6.9 или более поздней" title="Содержимое данной страницы относится к среде IDE NetBeans версии 6.9 или более поздней" > | |
| <ul> | |
| <li><a href="#reqs" title="Требования для работы с руководством">Требования для работы с руководством</a></li> | |
| <li><a href="#setup" title="Настройка среды проекта">Настройка среды проекта</a></li> | |
| <li><a href="#svgcomp" title="Создание пользовательского интерфейса в SVG Composer">Создание пользовательского интерфейса в SVG Composer</a> | |
| <ul> | |
| <li><a href="#backinfo" title="Базовые сведения">Базовые сведения</a></li> | |
| <li><a href="#svgintro" title="Знакомство с элементами оформления SVG и их функцией">Знакомство с элементами оформления SVG и их функцией</a></li> | |
| <li><a href="#svgui" title="Действия по созданию пользовательского интерфейса SVG">Действия по созданию пользовательского интерфейса SVG</a></li> | |
| <li><a href="#createmidlet" title="Создание мидлета в Visual Mobile Designer">Создание мидлета в Visual Mobile Designer</a></li> | |
| </ul></li> | |
| <li><a href="#vmdflow" title="Использование Visual Mobile Designer для создания последовательности действий в приложении">Использование Visual Mobile Designer для создания последовательности действий в приложении</a></li> | |
| <li><a href="#applogic" title="Добавление логики приложения к пользовательскому интерфейсу">Добавление логики приложения к пользовательскому интерфейсу</a> | |
| <ul> | |
| <li><a href="#background" title="Базовые сведения">Базовые сведения</a></li> | |
| <li><a href="#creatingsvg" title="Создание особой модели SVGList">Создание особой модели SVGList</a></li> | |
| <li><a href="#nextprevious" title="Логика кнопок "Next" (Следующий) и "Previous" (Предыдущий)">Логика кнопок "Next" (Следующий) и "Previous" (Предыдущий)</a></li> | |
| </ul></li> | |
| <li><a href="#uitest" title="Проверка работы приложения в эмуляторе устройства с сенсорным экраном">Проверка работы приложения в эмуляторе устройства с сенсорным экраном</a></li> | |
| <li><a href="#summary" title="Заключение">Заключение</a></li> | |
| <li><a href="#see-also">Дополнительные сведения</a></li> | |
| </ul> | |
| <h2><a name="reqs"></a>Требования</h2> | |
| <p><b>Для работы с этим учебным курсом требуются программное обеспечение и материалы, перечисленные ниже.</b></p> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <th class="tblheader" scope="col">Программное обеспечение или материал</th> | |
| <th class="tblheader" scope="col">Требуемая версия</th> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">Среда IDE NetBeans с Java ME</a></td> | |
| <td class="tbltd1">Версия 6.9 или более поздняя</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Комплект для разработки приложений на языке Java</a> (JDK)</td> | |
| <td class="tbltd1">Версия 6 или 7 </td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/ContactBrowserExample.zip">Пример обозревателя контактов</a></td> | |
| <td class="tbltd1">проект NetBeans</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/projects/www/downloads/download/mobility%252Forg-netbeans-modules-mobility-svg-snippets.nbm">Фрагменты пользовательского интерфейса SVG</a></td> | |
| <td class="tbltd1">Подключаемый модуль NetBeans</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p class="notes">Чтобы убедиться в том, что функции устройства Java ME активированы, рекомендуется выполнить пользовательскую установку и во время установки IDE снять флажок для компонента "Features on Demand" (Функции по требованию).</p> | |
| <h2><a name="setup"></a>Настройка среды проекта</h2> | |
| <p> Кроме требуемого программного обеспечения, перечисленного выше, необходимо установить на компьютер нижеперечисленные программы.</p> | |
| <ul> | |
| <li>Распакуйте файл <code>ContactBrowser.zip</code> в папку проекта NetBeans.</li> | |
| <li>Загрузите подключаемый модуль фрагментов SVG и установите его в среду NetBeans: | |
| <ol> | |
| <li>В меню среды IDE выберите "Tools" > "Plugins". Перейдите на вкладку "Downloaded" и нажмите кнопку "Add Plugins".</li> | |
| <li>Перейдите в локальную папку, содержащую файл <tt>svg-snippets.nbm</tt>, выделите его и нажмите кнопку "Install" (Установить).</li> | |
| </ol></li> | |
| <li>Нажмите кнопку "Install" и выполните установку в соответствии с указаниями среды IDE. После установки подключаемого модуля необходимо перезапустить среду IDE. </li> | |
| <li>После перезапуска среды IDE выберите "Tools" > "Options". Щелкните значок "Miscellaneous" в диалоговом окне "Options", после чего выберите вкладку "SVG".</li> | |
| <li>В разделе "SVG Rich Components Snippets" откройте раскрывающееся меню "Snippets" и выберите <strong>J1 HOL SVG Snippets</strong>. Нажмите кнопку "ОК". | |
| <p class="align-center"><a href="../../../images_www/articles/71/mobility/svgtouch/ex0_3.png" rel="lytebox" | |
| title="Диалоговое окно "Options" (Параметры)"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex0_3-small.png" | |
| alt="Диалоговое окно "Options" (Параметры)" border=1></a></p> | |
| </li> | |
| </ul> | |
| <p class="align-center"><a href="#top">В начало</a></p> | |
| <h2><a name="svgcomp"></a>Создание пользовательского интерфейса в SVG Composer</h2> | |
| <p> Мы приступаем к созданию базового пользовательского интерфейса приложения на основе SVG. На примере приложения можно довольно просто показать, как создавать новое приложение Java ME, как импортировать изображения SVG из SVG Composer в визуальный мидлет и как запускать проект в эмуляторе устройства MIDP. </p> | |
| <a name="backinfo"></a> | |
| <h3>Дополнительные сведения</h3> | |
| <p><strong>SVG:</strong> JSR-226 определяет интерфейс API для визуализации масштабируемой двухмерной векторной графики в XML. Вместо кодировки содержимого каждого пикселя, как это происходит, например, в формате GIF и JPG, векторная графика содержит только инструкции по рисованию каждого пикселя. Благодаря этому векторные изображения обладают несколькими преимуществами: </p> | |
| <ul> | |
| <li><strong>масштабируемость</strong> с сохранением качества изображения на экранах различных размеров и разрешений; возможность растягивать, отображать зеркально или переворачивать изображение без потери качества;</li> | |
| <li>поддержка <strong>сценариев и анимации</strong>, благодаря чему векторные изображения являются идеальными для интерактивной динамической графики;</li> | |
| <li><strong>компактность</strong>. Векторные изображения могут быть в десять раз меньше аналогичных изображений в формате GIF или JPEG. Это важное преимущество позволяет создавать графически насыщенные приложения для портативных устройств с ограниченными ресурсами; </li> | |
| <li>возможность <strong>взаимодействия</strong> пользователей с содержимым изображения;</li> | |
| <li><strong>доступность для поиска</strong>. Пользователи могут искать текст внутри изображения. Например, можно искать определенные названия улиц на карте или любимые блюда в меню ресторанов.</li> | |
| </ul> | |
| <p>Включенная в полнофункциональный набор мобильных устройств, предназначенных для SVG (с названием SVG-Tiny или JSR-226), версия 1.1 профиля SVG-Tiny адаптирована в качестве официального формата файлов векторной графики J2ME. | |
| </p> | |
| <a name="svgintro"></a> | |
| <h3>Знакомство с элементами оформления SVG и их функцией</h3> | |
| <p>Создание пользовательских интерфейсов упрощает использование SVG Composer и компонентов функционально насыщенных пользовательских интерфейсов SVG Form в среде NetBeans. </p> | |
| <p>Обзор доступных в палитре SVG Composer фрагментов пользовательского интерфейса SVG:</p> | |
| <ul> | |
| <li>SVG List – позволяет разработчикам создавать список элементов пользовательского интерфейса;</li> | |
| <li>SVG Radio Button – используется во фрагментах SVG; в данном примере позволяет пользователям указывать свой пол;</li> | |
| <li>SVG Combo Box – компонент пользовательского интерфейса для меню раскрывающегося списка; </li> | |
| <li>SVG Text – поле, в котором можно отображать имена людей, идентификаторы продуктов и т.п. </li> | |
| <li>SVG Button – кнопки, используемые для функций "Next", "Previous", "ОК" и других функций пользовательского интерфейса;</li> | |
| <li>SVG Spinner – позволяет пользователю прокручивать изменяемые значения с помощью кнопок "Up" и "Down";</li> | |
| <li>SVG Slider – позволяет пользователю настроить свойство изменяемого значения. Например, от светлого до темного или от 0 до 100%;</li> | |
| <li>SVG Label – позволяет пользователю ставить метки в текстовых полях или в других компонентах пользовательского интерфейса.</li> | |
| </ul> | |
| <p class="align-center"> <a href="../../../images_www/articles/71/mobility/svgtouch/ex1_2.png" rel="lytebox" | |
| title="Фрагменты кода пользовательского интерфейса SVG, доступные на палитре SVG Composer"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex1_2-small.png" | |
| alt="Фрагменты кода пользовательского интерфейса SVG, доступные на палитре SVG Composer" border=1></a></p> | |
| <p>Это лишь общий обзор компонентов функционально насыщенных пользовательских интерфейсов SVG. Более подробные сведения приведены на странице <a href="http://wiki.netbeans.org/MobilityDesignerRichComponents">Netbeans Visual Mobile Designer Wiki</a>.</p> | |
| <a name="svgui"></a> | |
| <h3>Действия по созданию пользовательского интерфейса SVG</h3> | |
| <p> Откроем подготовленный проект ContactBrowser, используемый в качестве основы для создания проекта. </p> | |
| <ol> | |
| <li>Откройте в среде IDE NetBeans подготовленный проект Java ME ContactBrowser. | |
| <p>Обзор проекта ContactBrowser</p> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/svgtouch/ex2_2.png"></p></li> | |
| <li>Откройте изображение <code>employeeList.svg</code> в SVG Composer и перетащите два компонента SVG Button и один компонент SVG List Form из палитры на холст "Preview", как показано ниже. Мы переименуем кнопки позднее в этом учебном курсе. | |
| <p>Ниже приведена завершенная форма со следующими добавленными компонентами:</p> | |
| <ul> | |
| <li>2 компонента Button;</li> | |
| <li>1 компонент List.</li> | |
| </ul> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_3.png" rel="lytebox" | |
| title="Форма с двумя кнопками и списком"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_3-small.png" | |
| alt="Форма с двумя кнопками и списком" border=1></a> | |
| </p></li> | |
| <li>В окне "Preview" (Предварительный просмотр) щелкните текст на кнопке "ОК" вверху слева и перетащите его влево, как показано ниже на снимке экрана. Это позволит правильно отобразить слово "Select" на кнопке пользовательского интерфейса. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_4b.png" rel="lytebox" | |
| title="Форма с двумя кнопками и списком"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_4b-small.png" | |
| alt="Форма с двумя кнопками и списком" border=1></a></p></li> | |
| <li>Для нашего пользовательского интерфейса SVG необходим дополнительный файл SVG, <code>employeeForm.svg</code>, поэтому снова откроем файл и добавим кнопки, текстовые поля и метки из палитры на изображение в SVG Composer и переименуем их для создания пользовательского интерфейса. После завершения на экране должно быть примерно следующее изображение. | |
| <ul> | |
| <li>Добавленные компоненты: | |
| <ul> | |
| <li>3 компонента Button;</li> | |
| <li>4 компонента Label;</li> | |
| <li>2 компонента Text Field;</li> | |
| <li>1 компонент Radio Button;</li> | |
| <li>1 компонент Spinner.</li> | |
| </ul></li> | |
| </ul> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_4.png" rel="lytebox" | |
| title="Добавленные компоненты SVG"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_4-small.png" | |
| alt="Добавленные компоненты SVG" border=1></a> | |
| </p></li> | |
| <li>В окне "Preview" (Предварительный просмотр) щелкните текст кнопки "ОК" внизу слева и перенесите его влево, как показано на рисунке ниже. Это позволит правильно отобразить слово "Previous" на кнопке пользовательского интерфейса. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_4a.png" rel="lytebox" | |
| title="Текст на кнопке "ОК", перенесенный влево"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_4a-small.png" | |
| alt="Текст на кнопке "ОК", перенесенный влево" border=1></a> | |
| </p></li> | |
| </ol> | |
| <a name="createmidlet"></a> | |
| <h3>Создание мидлета в Visual Mobile Designer</h3> | |
| <p>Инфраструктура компонентов функционально насыщенного пользовательского интерфейса SVG разделена на две части:</p> | |
| <ul> | |
| <li>фрагменты SVG, которые используются для сборки пользовательского интерфейса в SVG Composer или другом редакторе SVG;</li> | |
| <li>библиотеки Java ME, поддерживающие функциональность пользовательского интерфейса.</li> | |
| </ul> | |
| <p>Мы уже ознакомились с редактором SVG Composer и фрагментами, поэтому следующим шагом является рассмотрение библиотек в Visual Mobile Designer, с помощью которых осуществляется объединение изображений SVG с логикой приложения в исходном коде Java ME.</p> | |
| <ol> | |
| <li>Для создания нового визуального мидлета выберите <tt>File</tt> > <tt>New File</tt> (Файл > Создание файла) и в диалоговом окне "New File" (Создание файла) в списке"Categories" (Категории) выберите MIDP, а в списке "File Types" (Типы файлов) выберите Visual MIDlet. Новый файл должен быть частью пакета <tt>org.netbeans.lab.ui.svg</tt>. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_5.png" rel="lytebox" | |
| title="Диалоговое окно "New File" (Создание файла)"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_5-small.png" | |
| alt="Диалоговое окно "New File" (Создание файла)" border=1></a> | |
| </p> | |
| </li> | |
| <li>В только что созданном мидлете переключитесь на представление "Flow". Найдите на палитре раздел "SVG Components" (Компоненты SVG), затем перетащите два компонента SVG Form на холст проектирования в представлении "Flow" (Последовательность действий) и с помощью контекстного меню переименуйте их в <code>employeeList</code> и <code>employeeForm</code>. | |
| <p class="align-center"><a href="../../../images_www/articles/71/mobility/svgtouch/ex2_6.png" rel="lytebox" | |
| title="Две добавленные формы SVG"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_6-small.png" | |
| alt="Две добавленные формы SVG" border=1></a></p> | |
| </li> | |
| <li>Следующее действие – соединение изображений SVG с исходным кодом. Для подключения компонентов пользовательского интерфейса SVG к исходному коду достаточно перетащить файл <code>employeeList.svg</code> из окна "Project" (Проект) на компонент <code>employeeList</code> и повторить это действие для <code>employeeForm.svg</code>, перетащив его на <code>employeeForm</code>. | |
| <p class="align-center"><a href="../../../images_www/articles/71/mobility/svgtouch/ex2_8.png" rel="lytebox" | |
| title="Компоненты пользовательского интерфейса SVG, подключенные к исходному коду"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_8-small.png" | |
| alt="Компоненты пользовательского интерфейса SVG, подключенные к исходному коду" border=1></a></p> | |
| </li> | |
| <li>Теперь необходимо изменить имена экземпляров <code>svgButtons</code>, чтобы связать их с действиями, которые они выполняют. Обратите внимание, что пользовательский интерфейс кнопки не изменяется, это будет сделано позже. Для изменения имен экземпляров <code>svgButtons</code> щелкните кнопку правой кнопкой мыши и выберите команду "Rename" из контекстного меню. Введите название требуемого действия для экземпляра <code>svgButtons</code> в поле "New Name" диалогового окна "Rename Instance Name". | |
| <p class="notes"><b>Примечание.</b> Изменяя имена экземпляров компонентов пользовательского интерфейса, выбирайте новое имя, отражающее функцию кнопки интерфейса.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_9.png" rel="lytebox" | |
| title="Имена экземпляров svgButtons изменены"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_9-small.png" | |
| alt="Имена экземпляров svgButtons изменены" border=1></a> | |
| </p> | |
| </li> | |
| <li>Следующее действие – изменение стандартных меток SVG Label для кнопок и текстовых полей, чтобы они соответствовали информации, отображаемой в приложении <strong>ContactBrowser</strong>. Для этого переключитесь в представление "Screen" и откройте <code>employeeForm</code>. Выберите элемент "Label" в представлении "Screen" и измените текст всех меток и кнопок согласно приведенному ниже рисунку. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_11.png" rel="lytebox" | |
| title="Свойства текста кнопок и меток изменены"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_11-small.png" | |
| alt="Свойства текста кнопок и меток изменены" border=1></a> | |
| </p> </li> | |
| <li>Также необходимо изменить имена экземпляров текстовых полей SVG. Щелкните правой кнопкой мыши элемент "First Name", выберите "Rename" из контекстного меню и измените имя на <code>svgTextFieldFirstName</code>. Повторите это действие для поля "Last Name" и измените его имя на <code>svgTextFieldLastName</code>.</li> | |
| <li>Теперь в раскрывающемся окне проекта IDE перейдите от <strong>employeeForm</strong> к <strong>employeeList</strong> и переименуйте кнопки, как показано на рисунке ниже. Изменения отображаются в поле "Text" окна "Properties". | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_11a.png" rel="lytebox" | |
| title="Свойства текста кнопок изменены"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_11a-small.png" | |
| alt="Свойства текста кнопок изменены" border=1></a> | |
| </p> </li> | |
| </ol> | |
| <p class="align-center"><a href="#top">В начало</a></p> | |
| <h2><a name="vmdflow"></a>Использование Visual Mobile Designer для создания потока операций в приложении</h2> | |
| <p>Теперь вы готовы создать поток операций в приложении с помощью представления "Flow" Visual Mobile Designer. </p> | |
| <ol> | |
| <li>Переключитесь в среде IDE из представления "Screen" в представление "Flow".</li> | |
| <li>Соедините компоненты, как это указано ниже. Начните с выбора компонента "Started" элемента <strong>Mobile Device</strong> и перетащите мышь к элементу <strong>employeeList</strong>. Соедините остальные компоненты таким же образом. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_12.png" rel="lytebox" | |
| title="Последовательность действий приложения создана"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_12-small.png" | |
| alt="Последовательность действий приложения создана" border=1></a> | |
| </p> | |
| </li> | |
| </ol> | |
| <p>В представлении "Source" показан механизм привязки фрагментов компонента пользовательского интерфейса XML SVG к библиотекам среды выполнения Java ME. В приведенном ниже примере показано, как фрагменты кода SVG Button привязаны к объектам Java ME. Компонент SVG распознается с помощью идентификатора фрагмента кода XML, в данном примере – <code>button_0</code>.</p> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/svgtouch/ex2_14.png"></p> | |
| <h3>Выполнение приложения</h3> | |
| <p>Перед добавлением логики приложения необходимо протестировать пользовательский интерфейс обозревателя контактов в эмуляторе.</p> | |
| <p>Выберите в меню "Run Main Project" (F6). После запуска эмулятора пользовательский интерфейс может быть просмотрен и протестирован. Мы еще не реализовали логику приложения, однако можем проверить, отображается ли пользовательский интерфейс корректным образом с учетом действий, выполненных в Visual Mobile Designer.</p> | |
| <p class="align-center"><a href="#top">В начало</a></p> | |
| <h2><a name="applogic"></a>Добавление логики приложения к пользовательскому интерфейсу SVG</h2> | |
| <p>Теперь мы можем использовать Visual Mobile Designer для создания логики приложения в пользовательском интерфейсе, сформированном в результате предыдущего действия. Мы используем некоторые дополнительные компоненты и методы, после чего сможем запустить приложение в эмуляторе пакета Java ME SDK 3.0.</p> | |
| <a name="background"></a> | |
| <h3>Дополнительные сведения</h3> | |
| <ul> | |
| <li><strong>SVG ListModel.</strong> Определяет компоненты метода типа SVGList, используемые для получения значения каждой ячейки списка и вычисления числа ячеек, требуемых для их отображения. Логически модель представляет собой вектор, индексы которого изменяются от <tt>0</tt> до <tt>ListDataModel.getSize() - 1</tt>. Любое изменение содержимого или длины модели данных должно сообщаться всем SVGListDataListeners. Если вы имеете опыт работы с моделью JList из Swing, работа с SVGListModel не вызовет у вас затруднений.</li> | |
| <li><strong>Компонент Entry Point.</strong> Компонент Entry Point позволяет представить метод в разработанном классе. Метод содержит код, определенный операцией, присвоенной ему, – пин-код "Entry Called". Этот метод можно использовать, если необходимо выполнять код при переключении между экранами приложения, или, в нашем случае, для отображения логики SVGButton в представлении "Flow" мидлета "Visual Midlet".</li> | |
| </ul> | |
| <a name="creatingsvg"></a> | |
| <h3>Создание пользовательской модели SVGList</h3> | |
| <p> Здесь мы создадим собственную реализацию SVGListModel. Наша реализация SVGListModel является анонимным классом внутри метода <code>getSvgList</code>.</p> | |
| <ol> | |
| <li> Используйте "Navigator" (нажмите Ctrl+7, если он не отображается) для поиска элемента <code>getSvgList</code> в компоненте <code>employeeList</code>, щелкнув правой кнопкой и выбрав из контекстного меню команду "Got To Source".</li> | |
| <li>В методе <code>getSVGList</code> после <code>svgList = new SVGList(getEmployeeList(), "list_0");</code> добавьте следующий код.<br> | |
| <pre class="examplecode"> | |
| //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) { } | |
| });</pre></li> | |
| </ol> | |
| <p class="notes"><b>Примечание.</b> В IDE вы можете использовать функцию автозавершения кода и ввести код по своему усмотрению.</p> | |
| <a name="nextprevious"></a> | |
| <h3>Логика кнопок "Next" (Следующий) и "Previous" (Предыдущий)</h3> | |
| <p>На этом этапе мы добавим логику для кнопок SVGButton, являющихся частью <code>employeeForm</code>. Эти кнопки позволяют пользователям приложения просматривать данные сотрудников. Нажав кнопку "Next" пользователь переходит к следующей записи контакта. Нажав кнопку "Previous" пользователь переходит к предыдущей записи контакта. На этом этапе мы используем элемент "Entry Point", описанный ранее.</p> | |
| <ol> | |
| <li>Переключитесь в представление "Flow" и добавьте два компонента "Entry Point" из категории "Flow" палитры. Щелкните компоненты правой кнопкой мыши и переименуйте их в <tt>nextMethod</tt> и <tt>previousMethod</tt>, как показано ниже: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex3_1.png" rel="lytebox" | |
| title="Последовательность действий SVGButtons создана"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex3_1-small.png" | |
| alt="Последовательность действий SVGButtons создана" border=1></a> | |
| </p> | |
| </li> | |
| <li> Теперь необходимо добавить глобальный закрытый целочисленный индекс свойства для визуального мидлета. Переключитесь в представление "Source" и добавьте следующий текст в охраняемый блок "Generated Fields":<br> | |
| <pre class="examplecode">private int index = 0;</pre></li> | |
| <li>Теперь добавьте логику для обновления пользовательского интерфейса в <code>employeeForm</code>. Используемый здесь метод обновляет элементы пользовательского интерфейса SVG в компоненте <code>employeeForm</code>. В редакторе исходного кода добавьте в конец класса следующий метод. | |
| <p class="notes"><b>Примечание.</b> Для ввода кода в среде IDE можно использовать функцию автозавершения кода.</p> | |
| <pre class="examplecode"> | |
| //**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())); | |
| } | |
| </pre> | |
| <p>Теперь можно приступать к добавлению логики в <tt>nextMethod</tt> и <tt>previousMethod</tt>.</p></li> | |
| <li>Переключитесь на представление "Flow" (Последовательность действий), щелкните правой кнопкой мыши точку входа для <code>nextMethod</code> и во всплывающем меню выберите команду "Go To Source" (Перейти к исходному коду).</li> | |
| <li>В редакторе исходного кода добавьте в метод <tt>nextMethod()</tt> перед <tt>switchDisplayable(null, getEmployeeForm().getSvgCanvas());</tt> следующий код. Этот код отображает следующую запись в очереди записей сотрудников. Кроме того, он вызывает пользовательский интерфейс для обновления выведенной на экран информации.<br> | |
| <pre class="examplecode">// Move to the next Employee record | |
| if (index < EmployeeData.getData().size() - 1) { | |
| //Update index. | |
| index++; | |
| } | |
| //Update UI - employee form | |
| updateEmployeeFormUI(); | |
| //Go back to employeeForm | |
| </pre></li> | |
| <li>Переключитесь на представление "Flow" (Последовательность действий), щелкните правой кнопкой мыши точку входа для <code>previousMethod</code> и во всплывающем меню выберите команду "Go To Source" (Перейти к исходному коду).</li> | |
| <li>В редакторе исходного кода добавьте в метод <tt>previousMethod()</tt> перед <tt>switchDisplayable(null, getEmployeeForm().getSvgCanvas());</tt> следующий код, чтобы активировать функциональные возможности обзора данных.<br> | |
| <pre class="examplecode">// Move to the previous Employee record | |
| if (index > 0) { | |
| //Update index | |
| index--; | |
| } | |
| //Update UI | |
| updateEmployeeFormUI(); | |
| //Go back to employeeForm | |
| </pre> | |
| <p>Далее необходимо убедиться в том, что пользовательский интерфейс будет обновлен при взаимодействии с <code>employeeForm</code> и установить глобальный индекс, основываясь на выборе, выполненном в списке сотрудников.</p></li> | |
| <li>Переключитесь на представление "Flow" (Последовательность действий), щелкните правой кнопкой мыши кнопку <tt>select</tt> в <code>employeeList</code> и выберите во всплывающем меню команду "Go To Source" (Перейти к исходному коду).</li> | |
| <li>В редакторе исходного кода добавьте в метод <code>getSelect()</code> после <tt>public void actionPerformed(SVGComponent svgComponent) {</tt> следующий код.<br> | |
| <pre class="examplecode"> //Updating global index | |
| index = getSvgList().getSelectionModel().getSelectedIndex(); | |
| //Updating UI after selection has been made | |
| updateEmployeeFormUI(); | |
| //Switching to the employeeForm</pre></li> | |
| </ol> | |
| <p class="align-center"><a href="#top">В начало</a></p> | |
| <h2><a name="uitest"></a>Тестирование приложения в эмуляторе устройства с сенсорным экраном</h2> | |
| <p>Мы готовы к проверке нашего приложения в эмуляторе устройства Java ME SDK 3.0 <strong>DefaultFxTouchPhone1</strong>, поставляемого в пакете вместе с установщиком среды IDE NetBeans. Для запуска приложения необходимо изменить свойства проекта.</p> | |
| <ol> | |
| <li>Щелкните правой кнопкой узел "Project" и выберите из контекстного меню команду "Properties". В диалоговом окне "Project" выберите в области "Category" пункт "Platform", после чего из раскрывающегося списка "Emulator Platform" выберите пункт "Java Platform Micro Edition SDK 3.0".</li> | |
| <li>Для эмуляции устройства с сенсорным экраном выберите DefaultFxTouchPhone1 в раскрывающемся меню "Device" (Устройство) и CLDC-1.1 в качестве "Device Configuration" (Конфигурация устройства), как показано ниже, затем нажмите кнопку "ОК". | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex4_4.png" rel="lytebox" | |
| title="Для эмулятора выбраны платформа и устройство"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex4_4-small.png" | |
| alt="Для эмулятора выбраны платформа и устройство" border=1></a> | |
| </p> | |
| </li> | |
| <li>Перейдите к "Run > Run Project" (Выполнить > Выполнить проект), и приложение запустится в эмуляторе. Наводя указатель мыши на компоненты SVG, можно убедиться, что свойства сенсорного экрана активированы. Для перехода по меню приложения можно перемещать по экрану курсор мыши, как это делал бы пользователь кончиком пальца.</li> | |
| <li>В эмуляторе можно выполнить несколько базовых тестов пользовательского интерфейса, например, тест на использование кнопок "Previous" или "Next", позволяющий проверить корректность работы элементов пользовательского интерфейса. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex4_5.png" rel="lytebox" | |
| title="Приложение запущено в эмуляторе"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex4_5-small.png" | |
| alt="Приложение запущено в эмуляторе" border=1></a> | |
| </p> </li> | |
| </ol> | |
| <h2>Заключение<a name="summary"></a></h2> | |
| <p> В этом учебном курсе вы освоили создание с помощью среды IDE NetBeans пользовательского интерфейса для устройств Java ME. Поддерживающий сенсорные устройства интерфейс основан на SVG.</p> | |
| <p class="align-center"><a href="#top">В начало</a></p> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=Creating%20a%20Touch%20Enabled%20SVG%20UI%20for%20Java%20ME%20Devices">Мы ждем ваших отзывов</a></div> | |
| <br style="clear:both;" > | |
| <a name="see-also"></a> | |
| <h2>Дополнительные сведения</h2> | |
| <ul> | |
| <li><a href="http://wiki.netbeans.org/MobilityDesignerRichComponents">Справочное руководство по компонентам пользовательского интерфейса Rich SVG</a></li> | |
| <li><a href="http://blogs.sun.com/kharezlak/entry/playing_with_svg_components_in">Приложения с пользовательским интерфейсом Rich SVG</a></li> | |
| <li><a href="http://wiki.netbeans.org/MobilitySVGComponents">Использование компонентов пользовательского интерфейса SVG Rich</a></li> | |
| <li><a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Справочная информация: руководство по компонентам Palette в Visual Mobile Designer</a></li> | |
| <li><a href="../../../kb/trails/mobility.html">Учебная карта по приложениям NetBeans Java ME</a>.</li> | |
| </ul> | |
| <p class="align-center"><a href="#top">В начало</a></p> | |
| </body> | |
| </HTML> |