| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | |
| <!-- Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. --> | |
| <!-- Use is subject to license terms.--> | |
| <html> | |
| <head> | |
| <title>Особые компоненты Visual Mobile Designer: использование элементов таблицы в приложениях Java ME – учебный курс по среде IDE NetBeans</title> | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <meta name="Karol Harezlak" content="NetBeans Visual Mobile Designer"> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
| </head> | |
| <body> | |
| <a name="top"></a> | |
| <h1>Особые компоненты Visual Mobile Designer: использование элементов таблицы в приложениях Java ME</h1> | |
| <p> Visual Mobile Designer (VMD) позволяет разрабатывать приложения Java ME, используя функцию перетаскивания компонентов. С ее помощью можно задавать поток операций в приложении, а также общий стиль пользовательского интерфейса при использовании компонентов, поставляемых средой IDE или при использовании самостоятельно разработанных компонентов. VMD имеет в своем составе много стандартных компонентов, которые можно использовать для создания приложения: Lists, Alerts, Forms, Images и многие другие. Сюда также входят особые компоненты, упрощающие создание многих сложных компонентов, например экранов ожидания, заставок и экранов входа в систему. </p> | |
| <p>Компонент TableItem позволяет быстро создавать таблицы, состоящие из одного или нескольких столбцов, каждый с областью заголовка и областью данных, повторяющихся для каждой записи. Таблицы могут быть больше экрана как по вертикали, так и по горизонтали. Пользователи могут использовать курсор для прокрутки в любом направлении. Использование компонента TableItem из Visual Mobile Designer (VMD) упрощает проектирование и реализацию таблиц в приложениях Java ME. </p> | |
| <p>Если вы ранее не разрабатывали мобильные приложения в среде NetBeans, начните с изучения <A HREF="quickstart.html">Краткого руководства пользователя по NetBeans Java ME MIDP</A>.</p> | |
| <!--<p class="notes"><b>Примечание.</b> При использовании среды IDE NetBeans 6.8 воспользуйтесь учебным курсом <a href="../../68/javame/tableitem.html">Использование элементов таблицы в приложениях Java ME в среде IDE NetBeans 6.8</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="#intro" title="Принципы работы компонента TableItem">Принципы работы компонента TableItem</a></li> | |
| <li><a href="#sample" title="Установка и выполнение примера приложения">Установка и выполнение примера приложения</a></li> | |
| <li><a href="#creating" title="Создание приложения Java ME с использованием особого компонента TableItem">Создание приложения Java ME с использованием особого компонента TableItem</a> | |
| <ul> | |
| <li> <a href="#create">Создание проекта MyTableExample</a> </li> | |
| <li><a href="#add">Добавление пакетов и визуального мидлета к проекту MyTableExample</a></li> | |
| <li><a href="#addcomponent">Добавление компонентов к проекту MyTableMIDlet</a></li> | |
| <li><a href="#edit">Изменение проекта SimpleTableModel</a></li> | |
| <li><a href="#addcommands">Добавление команд к компонентам Form и TextBox</a></li> | |
| <li><a href="#connect">Соединение компонентов для создания потока операций в приложении</a></li> | |
| <li><a href="#insert">Вставка исходного кода </a></li> | |
| <li><a href="#run">Выполнение проекта</a></li> | |
| </ul></li> | |
| <li><a href="#nextsteps" title="Дополнительные сведения">Дополнительные сведения</a></li> | |
| </ul> | |
| <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> | |
| </tbody> | |
| </table> | |
| <h2><a name="intro"></a>Принципы работы компонента TableItem</h2> | |
| <p>В данном примере показано, как использовать компоненты TableItem и TableModel в мобильном приложении. Демонстрируются основные свойства компонентов, а также принципы их использования для визуализации и управления данными в приложении Java ME внутри компонента SimpleTableModel. Пользовательский компонент TableItem, обсуждаемый в этом учебном курсе, использует таблицу из интерфейса SimpelTableModel, отображает данные и даже позволяет пользователям изменять их.</p> | |
| <p>Помимо пользовательского компонента TableItem необходимо использовать два других компонента MIDP: TextBox и Form. Дополнительные сведения об этих и других пользовательских компонентах, входящих в палитру VMD, приведены в <a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">руководстве по палитре Visual Mobile Designer</a>.</p> | |
| <h2><a name="sample"></a>Установка и выполнение примера приложения</h2> | |
| <p> Перед тем как приступить к учебному курсу, можно ознакомиться с окончательным результатом этой работы. Для установки примера приложения <code>TableItemExample</code> выполните следующие действия.</p> | |
| <ol> | |
| <li>Загрузите файл <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/TableItemExample.zip">TableItemExample.zip</a>.</li> | |
| <li> Распакуйте файл. </li> | |
| <li> В среде IDE откройте меню <tt>File</tt> и выберите команду <tt>Open Project</tt> (Файл > Открыть проект). Затем перейдите к папке, содержащей распакованные файлы. </li> | |
| <li>Откройте окно "Project" (Проект). На экране должно быть следующее: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-project-window.png" border=1 alt="Окно "Project" с примером элемента таблицы" ></p> | |
| </li> | |
| <li>В окне "Projects" (Проекты) щелкните правой кнопкой мыши узел проектов и выберите "Run Project" (Выполнить проект) (или нажмите клавишу F6). После запуска приложения откроется окно эмулятора, отображающее это приложение, которое выполняется в эмуляторе устройства по умолчанию. </li> | |
| <li>В окне эмулятора нажмите кнопку под элементом "Launch." Эмулятор выводит на экран таблицу, как показано ниже: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-emulator.png" border=1 alt="Эмулятор DefaultColorPhone, отображающий пример табличного приложения" > </p> </li> | |
| <li>Изменение таблицы: | |
| <ul> | |
| <li>для перемещения курсора из ячейки в ячейку используйте стрелки на кнопке "Select";</li> | |
| <li>для изменения содержимого ячейки нажмите кнопку под элементом "Edit Cell".</li> | |
| </ul></li> | |
| <li>Для закрытия приложения нажмите кнопку под элементом "Exit". </li> | |
| </ol> | |
| <p class="align-center"><a href="#top">В начало</a></p> | |
| <h2><a name="creating"></a>Создание таблицы с пользовательским компонентом TableItem </h2> | |
| <div class="indent"> | |
| <p>Теперь, после ознакомления с компонентом TableItem, можно рассмотреть процедуру создания этого приложения. Для создания приложения необходимо выполнить действия, указанные ниже. </p> | |
| </div> | |
| <ol> | |
| <li> <a href="#create">Создайте проект MyTableExample</a>. </li> | |
| <li><a href="#add">Добавление пакетов и визуального мидлета к проекту MyTableExample</a></li> | |
| <li><a href="#addcomponent">Добавление компонентов к проекту MyTableMIDlet</a></li> | |
| <li><a href="#edit">Изменение проекта SimpleTableModel</a></li> | |
| <li><a href="#addcommands">Добавление команд к компонентам Form и TextBox</a></li> | |
| <li><a href="#connect">Соединение компонентов для создания потока операций в приложении</a></li> | |
| <li><a href="#insert">Вставка исходного кода </a></li> | |
| <li><a href="#run">Запустите проект</a>.</li> | |
| </ol> | |
| <div class="indent"> | |
| <h3 class="tutorial">Создание проекта MyTableExample<a name="create"></a></h3> | |
| <ol> | |
| <li> В меню <tt>File</tt> выберите команду <tt>New Project (Файл > Новый проект) (CTRL+SHIFT+N)</tt>. В разделе "Categories" (Категории) выберите "Java ME". В разделе "Projects" (Проекты) выберите "Mobile Application" (Приложение Mobile) и нажмите кнопку "Next" (Далее). </li> | |
| <li> Введите <code>MyTableExample</code> в поле "Project Name" (Имя проекта). В поле "Project Location" (Местоположение проекта) укажите локальный каталог. Далее в тексте этот каталог будет называться каталогом <tt>$PROJECTHOME</tt>. </li> | |
| <li> Снимите флажок с параметра "Create Hello MIDlet". Нажмите кнопку "Next" (Далее). </li> | |
| <li> Оставьте "Java Platform Micro Edition SDK 3.0" в качестве выбранной платформы эмулятора. Нажмите кнопку "Finish" (Готово). </li> | |
| <!--li> Click Finish. The project folder contains all of your sources and project metadata, such | |
| as the project Ant script. The application itself is displayed in the Flow Design window of the Visual Mobile Designer. </li--> | |
| </ol> | |
| <h3 class="tutorial">Добавление пакетов и визуального мидлета к проекту "MyTableExample"<a name="add"></a></h3> | |
| <ol> | |
| <li> Выберите проект <code>MyTableExample</code> в окне "Project" (Проекты), затем в меню <tt>File</tt> выберите комаду <tt>New File (Файл > Создать файл) (CTRL+N)</tt>. В области "Categories" (Категории) выберите "Java". В разделе "File Types" (Типы файлов) выберите "Java Package". Нажмите кнопку "Next" (Далее). </li> | |
| <li> Введите <code>tableitemexample</code> в поле "Package Name" (Имя пакета). Нажмите кнопку "Finish" (Готово). | |
| </li> | |
| <li> Выберите пакет <code>tableitemexample</code> в окне "Project" (Проекты), затем в меню <tt>File</tt> выберите команду <tt>New File (Файл > Создать файл) (CTRL+N)</tt>. В разделе "Categories" (Категории) выберите "MIDP". В разделе "File Types" (Типы файлов) выберите "Visual MIDlet". Нажмите кнопку "Next" (Далее). </li> | |
| <li> Введите <code>MyTableItemMidlet</code> в поля "MIDlet Name" и "MIDP Class Name". Нажмите кнопку "Finish" (Готово). </li> | |
| </ol> | |
| <h3 class="tutorial">Добавление компонентов к проекту MyTableItemMidlet<a name="addcomponent"></a></h3> | |
| <ol> | |
| <li> Переключите визуальный мидлет на представление "Flow". Перетащите следующие компоненты "Screen" из окна "Palette" в окно "Flow Designer": | |
| <ul> | |
| <li> | |
| <div class="indent"> Form</div> | |
| </li> | |
| <li> | |
| <div class="indent">TextBox</div> | |
| </li> | |
| </ul></li> | |
| <li>Выберите компонент <tt>textBox</tt> и установите для свойства компонента "Title" в окне "Properties" (Свойства) значение <tt>Edit</tt>.</li> | |
| <li>Дважды щелкните компонент <tt>form</tt>, чтобы переключиться к представлению "Screen" (Экран). </li> | |
| <li>Перетащите компонент <tt>Table Item</tt> из раздела Items (Элементы) палитры компонентов в компонент <tt>form</tt>. Компонент <tt>Table Item</tt>, добавленный в Screen Designer, выглядит следующим образом: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-tableitemform.png" border=1 alt="Компонентом TableItem в окне "Device Screen" (Экран устройства) в Screen Designer" ></p> | |
| </li> | |
| <li>Выберите компонент <tt>tableItem</tt>, откройте окно "Properties" (Свойства) и введите <code>TableItem Example</code> в качестве значения свойства "Label".</li> | |
| <li>Правой кнопкой мыши щелкните компонент <tt>tableItem</tt> и выберите "Properties" (Свойства) во всплывающем меню.</li> | |
| <li>Щелкните стрелку (<img src="../../../images_www/articles/71/mobility/tableitem/arrow.png" border=1 alt="Стрелка">) в свойстве "Table Model" и выберите команду<tt><Создать SimpleTableModel></tt> в раскрывающемся списке.</li> | |
| <li>Выберите "Close" (Закрыть).<br>Компонент <tt>simpleTableModel</tt> добавляется в раздел "Resources" (Ресурсы). | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/resources.png" border=1 alt="Добавленный компоннет simpleTableModel" ></p></li> | |
| </ol> | |
| <h3 class="tutorial">Изменение SimpleTableModel <a name="edit"></a></h3> | |
| <ol> | |
| <li> В представлении "Screen" (Экран) дважды щелкните компонент <tt><No table model specified></tt>> (Модель таблицы не определена), чтобы открыть диалоговое окно "Values" (Значения). </li> | |
| <li>В диалоговом окне "Values" (Значения)выберите параметр "Use Header" (Использовать заголовок). </li> | |
| <li> Нажмите кнопку "Add Row" (Добавить строку)и "Add Column" (Добавить столбец) четыре раза, чтобы увеличить количество строк и столбцов на 4. </li> | |
| <li> Переименуйте заголовки таблицы в <tt>column 1</tt>, <tt>column 2</tt>, <tt>column 3</tt> и <tt>column 4</tt>. | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/tableitem/ti-values-editor.png" border=1 alt="Модель таблицы" > </p></li> | |
| <li>Для завершения нажмите кнопку "OК". | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/tableitem/ti-screeneditor_form1.png" border=1 alt="Простая модель таблицы, назначенная компоненту "TableItem"" > </p></li> | |
| </ol> | |
| <h3 class="tutorial">Добавление команд к компонентам Form и TextBox<a name="addcommands"></a></h3> | |
| <ol> | |
| <li>Откройте представление "Flow". </li> | |
| <li>Выберите элемент <tt>ExitCommand</tt> в разделе "Commands" (Команды) на палитре компонентов. Перетащите ее в компонент <tt>form</tt>. Повторите эту операцию для элемента <tt>ItemCommand</tt>.</li> | |
| <li>Выберите <tt>itemCommand</tt> в представлении "Screen" (Экран). Откройте окно "Properties" (Свойства) и измените значение свойства "Label" на <tt>Edit Cell</tt>. | |
| </li> | |
| <li>В представлении Flow (Последовательность действий) выберите элемент <tt>OkCommand</tt> в разделе "Commands" (Команды) на палитре компонентов и перетащите его в компонент <tt>textBox</tt>. | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-flow.png" border=1 alt="Представление "Flow" с добавленными командами" > </p></li> | |
| </ol> | |
| <h3 class="tutorial">Соединение компонентов<a name="connect"></a> </h3> | |
| <div> | |
| <p>Откройте представление "Flow", щелкните команду <tt>Started (Запущено)</tt> элемента "Mobile Device" (Мобильное устройство) и перетащите его в компонент <tt>form</tt>. Аналогичным образом соедините другие компоненты, как показано на следующем рисунке.</p> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-flowdesigner.png" border=1 alt="Окно "Flow" с соединенными компонентами" ></p> | |
| </div> | |
| <h3 class="tutorial">Вставка исходного кода<a name="insert"></a></h3> | |
| <ol> | |
| <li>В представлении "Flow" щелкните правой кнопкой мыши элемент <tt>itemCommand</tt> компонента <tt>form</tt> и выберите команду "Go to source" (Перейти к исходному тексту) во всплывающем меню.</li> | |
| <li>Вставьте следующий код перед методом <tt>switchDisplayable</tt> вместо комментария <tt>// write pre-action user code here</tt>: | |
| <pre class="examplecode"> | |
| if (textBox != null) { | |
| // Get position of the cursor in the table. | |
| int row = tableItem.getSelectedCellRow(); | |
| int column = tableItem.getSelectedCellColumn() ; | |
| // Get value from the table model | |
| Object value = simpleTableModel.getValue(column,row); | |
| // Set textBox string value | |
| if (value != null) | |
| textBox.setString(value.toString()); | |
| else | |
| textBox.setString(""); | |
| } </pre> | |
| </li> | |
| <li>В представлении "Flow" щелкните правой кнопкой мыши элемент <tt>okCommand</tt> компонента <tt>textBox</tt> и выберите команду "Go to source" (Перейти к исходному тексту) во всплывающем меню.</li> | |
| <li>Втавьте следующий код перед методом <tt>switchDisplayable</tt> вместо комментария <tt>// write pre-action user code here</tt>: | |
| <pre class="examplecode"> | |
| int row = tableItem.getSelectedCellRow(); | |
| int column = tableItem.getSelectedCellColumn(); | |
| // Set new value to the table model | |
| simpleTableModel.setValue(column, row, textBox.getString()); | |
| // Repaint table model on the screen device | |
| simpleTableModel.fireTableModelChanged(); | |
| </pre></li> | |
| <li>Нажмите сочетание клавиш CTRL+S, чтобы сохранить внесенные изменения. </li> | |
| </ol> | |
| <h3 class="tutorial">Запуск проекта<a name="run"></a></h3> | |
| <p>Нажмите клавишу F6, чтобы запустить основной проект. Можно также выбрать в меню <tt>Run</tt> команду <tt>Run Main Project (Запустить > Запустить основной проект)</tt>.</p> | |
| </div> | |
| <p class="align-center"><a href="#top">В начало</a></p> | |
| <h2>Документация Java по компонентам TableItem и SimpleTableModel</h2> | |
| <P>Среда IDE NetBeans предоставляет документацию Java по API-интерфейсу для компонентов <tt>TableItem</tt> или <tt>TableModel</tt>, а также для других компонентов, которые можно использовать в VMD. Чтобы просмотреть документацию Javadocs для компонентов <tt>TableItem</tt> и <tt>TableModel</tt>, выполните следующие действия.</P> | |
| <OL> | |
| <li>Наведите курсор на компоненты <tt>TableItem</tt> и <tt>TableModel</tt> в исходном коде и нажмите сочетание клавиш CTRL+SHIFT+ПРОБЕЛ или выберите в меню<tt>Source</tt> команду <tt>Show Documentation</tt> (Исходный код > Показать документацию).<br> | |
| Документация Java для этого элемента отобразится во всплывающем окне. </li> | |
| <li>Щелкните значок команды "Показать документацию во внешнем веб-обозревателе" (<img src="../../../images_www/articles/71/mobility/smscomposer/show-doc-button.png" alt="Показать документацию во внешнем веб-обозревателе">) во всплывающем окне, чтобы просмотреть подробные сведения о компонентах <tt>TableItem</tt> и <tt>TableModel</tt> в обозревателе.</li> | |
| </OL> | |
| <p class="align-center"><a href="#top">В начало</a></p> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=VMD%20Custom%20Components:%20Using%20Table%20Items">Мы ждем ваших отзывов</a> </div><br style="clear:both;" > | |
| <h2><a name="nextsteps"></a>Дополнительные сведения</h2> | |
| <ul> | |
| <li><a href="smscomposer.html">Особые компоненты Visual Mobile Designer: создание приложения редактора сообщений SMS</a></li> | |
| <li><a href="filebrowser.html">Особые компоненты Visual Mobile Designer: создание обозревателя файлов мобильных устройств</a></li> | |
| <li><a href="pimbrowser.html">Особые компоненты Visual Mobile Designer: создание приложения для управления персональной информацией</a></li> | |
| <li><a href="loginscreen.html">Особые компоненты Visual Mobile Designer: создание мобильных экранов входа в систему</a></li> | |
| <li><a href="waitscreen.html">Особые компоненты Visual Mobile Designer: создание экранов ожидания для мобильных приложений</a></li> | |
| <li><a href="splashscreen.html">Особые компоненты Visual Mobile Designer: использование экранов заставок в приложениях Java ME</a></li> | |
| </ul> | |
| <p class="align-center"><a href="#top">В начало</a></p> | |
| </body> | |
| </html> |