Особые компоненты Visual Mobile Designer: использование элементов таблицы в приложениях Java ME

Visual Mobile Designer (VMD) позволяет разрабатывать приложения Java ME, используя функцию перетаскивания компонентов. С ее помощью можно задавать поток операций в приложении, а также общий стиль пользовательского интерфейса при использовании компонентов, поставляемых средой IDE или при использовании самостоятельно разработанных компонентов. VMD имеет в своем составе много стандартных компонентов, которые можно использовать для создания приложения: Lists, Alerts, Forms, Images и многие другие. Сюда также входят особые компоненты, упрощающие создание многих сложных компонентов, например экранов ожидания, заставок и экранов входа в систему.

Компонент TableItem позволяет быстро создавать таблицы, состоящие из одного или нескольких столбцов, каждый с областью заголовка и областью данных, повторяющихся для каждой записи. Таблицы могут быть больше экрана как по вертикали, так и по горизонтали. Пользователи могут использовать курсор для прокрутки в любом направлении. Использование компонента TableItem из Visual Mobile Designer (VMD) упрощает проектирование и реализацию таблиц в приложениях Java ME.

Если вы ранее не разрабатывали мобильные приложения в среде NetBeans, начните с изучения Краткого руководства пользователя по NetBeans Java ME MIDP.

Содержание

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

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

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

Принципы работы компонента TableItem

В данном примере показано, как использовать компоненты TableItem и TableModel в мобильном приложении. Демонстрируются основные свойства компонентов, а также принципы их использования для визуализации и управления данными в приложении Java ME внутри компонента SimpleTableModel. Пользовательский компонент TableItem, обсуждаемый в этом учебном курсе, использует таблицу из интерфейса SimpelTableModel, отображает данные и даже позволяет пользователям изменять их.

Помимо пользовательского компонента TableItem необходимо использовать два других компонента MIDP: TextBox и Form. Дополнительные сведения об этих и других пользовательских компонентах, входящих в палитру VMD, приведены в руководстве по палитре Visual Mobile Designer.

Установка и выполнение примера приложения

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

  1. Загрузите файл TableItemExample.zip.
  2. Распакуйте файл.
  3. В среде IDE откройте меню File и выберите команду Open Project (Файл > Открыть проект). Затем перейдите к папке, содержащей распакованные файлы.
  4. Откройте окно "Project" (Проект). На экране должно быть следующее:

    Окно "Project" с примером элемента таблицы

  5. В окне "Projects" (Проекты) щелкните правой кнопкой мыши узел проектов и выберите "Run Project" (Выполнить проект) (или нажмите клавишу F6). После запуска приложения откроется окно эмулятора, отображающее это приложение, которое выполняется в эмуляторе устройства по умолчанию.
  6. В окне эмулятора нажмите кнопку под элементом "Launch." Эмулятор выводит на экран таблицу, как показано ниже:

    Эмулятор DefaultColorPhone, отображающий пример табличного приложения

  7. Изменение таблицы:
    • для перемещения курсора из ячейки в ячейку используйте стрелки на кнопке "Select";
    • для изменения содержимого ячейки нажмите кнопку под элементом "Edit Cell".
  8. Для закрытия приложения нажмите кнопку под элементом "Exit".

В начало

Создание таблицы с пользовательским компонентом TableItem

Теперь, после ознакомления с компонентом TableItem, можно рассмотреть процедуру создания этого приложения. Для создания приложения необходимо выполнить действия, указанные ниже.

  1. Создайте проект MyTableExample.
  2. Добавление пакетов и визуального мидлета к проекту MyTableExample
  3. Добавление компонентов к проекту MyTableMIDlet
  4. Изменение проекта SimpleTableModel
  5. Добавление команд к компонентам Form и TextBox
  6. Соединение компонентов для создания потока операций в приложении
  7. Вставка исходного кода
  8. Запустите проект.

Создание проекта MyTableExample

  1. В меню File выберите команду New Project (Файл > Новый проект) (CTRL+SHIFT+N). В разделе "Categories" (Категории) выберите "Java ME". В разделе "Projects" (Проекты) выберите "Mobile Application" (Приложение Mobile) и нажмите кнопку "Next" (Далее).
  2. Введите MyTableExample в поле "Project Name" (Имя проекта). В поле "Project Location" (Местоположение проекта) укажите локальный каталог. Далее в тексте этот каталог будет называться каталогом $PROJECTHOME.
  3. Снимите флажок с параметра "Create Hello MIDlet". Нажмите кнопку "Next" (Далее).
  4. Оставьте "Java Platform Micro Edition SDK 3.0" в качестве выбранной платформы эмулятора. Нажмите кнопку "Finish" (Готово).

Добавление пакетов и визуального мидлета к проекту "MyTableExample"

  1. Выберите проект MyTableExample в окне "Project" (Проекты), затем в меню File выберите комаду New File (Файл > Создать файл) (CTRL+N). В области "Categories" (Категории) выберите "Java". В разделе "File Types" (Типы файлов) выберите "Java Package". Нажмите кнопку "Next" (Далее).
  2. Введите tableitemexample в поле "Package Name" (Имя пакета). Нажмите кнопку "Finish" (Готово).
  3. Выберите пакет tableitemexample в окне "Project" (Проекты), затем в меню File выберите команду New File (Файл > Создать файл) (CTRL+N). В разделе "Categories" (Категории) выберите "MIDP". В разделе "File Types" (Типы файлов) выберите "Visual MIDlet". Нажмите кнопку "Next" (Далее).
  4. Введите MyTableItemMidlet в поля "MIDlet Name" и "MIDP Class Name". Нажмите кнопку "Finish" (Готово).

Добавление компонентов к проекту MyTableItemMidlet

  1. Переключите визуальный мидлет на представление "Flow". Перетащите следующие компоненты "Screen" из окна "Palette" в окно "Flow Designer":
    • Form
    • TextBox
  2. Выберите компонент textBox и установите для свойства компонента "Title" в окне "Properties" (Свойства) значение Edit.
  3. Дважды щелкните компонент form, чтобы переключиться к представлению "Screen" (Экран).
  4. Перетащите компонент Table Item из раздела Items (Элементы) палитры компонентов в компонент form. Компонент Table Item, добавленный в Screen Designer, выглядит следующим образом:

    Компонентом TableItem в окне "Device Screen" (Экран устройства) в Screen Designer

  5. Выберите компонент tableItem, откройте окно "Properties" (Свойства) и введите TableItem Example в качестве значения свойства "Label".
  6. Правой кнопкой мыши щелкните компонент tableItem и выберите "Properties" (Свойства) во всплывающем меню.
  7. Щелкните стрелку (Стрелка) в свойстве "Table Model" и выберите команду<Создать SimpleTableModel> в раскрывающемся списке.
  8. Выберите "Close" (Закрыть).
    Компонент simpleTableModel добавляется в раздел "Resources" (Ресурсы).

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

Изменение SimpleTableModel

  1. В представлении "Screen" (Экран) дважды щелкните компонент <No table model specified>> (Модель таблицы не определена), чтобы открыть диалоговое окно "Values" (Значения).
  2. В диалоговом окне "Values" (Значения)выберите параметр "Use Header" (Использовать заголовок).
  3. Нажмите кнопку "Add Row" (Добавить строку)и "Add Column" (Добавить столбец) четыре раза, чтобы увеличить количество строк и столбцов на 4.
  4. Переименуйте заголовки таблицы в column 1, column 2, column 3 и column 4.

    Модель таблицы

  5. Для завершения нажмите кнопку "OК".

    Простая модель таблицы, назначенная компоненту "TableItem"

Добавление команд к компонентам Form и TextBox

  1. Откройте представление "Flow".
  2. Выберите элемент ExitCommand в разделе "Commands" (Команды) на палитре компонентов. Перетащите ее в компонент form. Повторите эту операцию для элемента ItemCommand.
  3. Выберите itemCommand в представлении "Screen" (Экран). Откройте окно "Properties" (Свойства) и измените значение свойства "Label" на Edit Cell.
  4. В представлении Flow (Последовательность действий) выберите элемент OkCommand в разделе "Commands" (Команды) на палитре компонентов и перетащите его в компонент textBox.

    Представление "Flow" с добавленными командами

Соединение компонентов

Откройте представление "Flow", щелкните команду Started (Запущено) элемента "Mobile Device" (Мобильное устройство) и перетащите его в компонент form. Аналогичным образом соедините другие компоненты, как показано на следующем рисунке.

Окно "Flow" с соединенными компонентами

Вставка исходного кода

  1. В представлении "Flow" щелкните правой кнопкой мыши элемент itemCommand компонента form и выберите команду "Go to source" (Перейти к исходному тексту) во всплывающем меню.
  2. Вставьте следующий код перед методом switchDisplayable вместо комментария // write pre-action user code here:
     	                                    
                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("");
            } 
  3. В представлении "Flow" щелкните правой кнопкой мыши элемент okCommand компонента textBox и выберите команду "Go to source" (Перейти к исходному тексту) во всплывающем меню.
  4. Втавьте следующий код перед методом switchDisplayable вместо комментария // write pre-action user code here:
    	            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();  
    	  
  5. Нажмите сочетание клавиш CTRL+S, чтобы сохранить внесенные изменения.

Запуск проекта

Нажмите клавишу F6, чтобы запустить основной проект. Можно также выбрать в меню Run команду Run Main Project (Запустить > Запустить основной проект).

В начало

Документация Java по компонентам TableItem и SimpleTableModel

Среда IDE NetBeans предоставляет документацию Java по API-интерфейсу для компонентов TableItem или TableModel, а также для других компонентов, которые можно использовать в VMD. Чтобы просмотреть документацию Javadocs для компонентов TableItem и TableModel, выполните следующие действия.

  1. Наведите курсор на компоненты TableItem и TableModel в исходном коде и нажмите сочетание клавиш CTRL+SHIFT+ПРОБЕЛ или выберите в менюSource команду Show Documentation (Исходный код > Показать документацию).
    Документация Java для этого элемента отобразится во всплывающем окне.
  2. Щелкните значок команды "Показать документацию во внешнем веб-обозревателе" (Показать документацию во внешнем веб-обозревателе) во всплывающем окне, чтобы просмотреть подробные сведения о компонентах TableItem и TableModel в обозревателе.

В начало


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

В начало

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