corner imagecorner image
IDEPlatformPluginsDocs & SupportCommunityPartners

Особые компоненты Visual Mobile Designer: создание экранов входа в систему

Visual Mobile Designer (VMD) – это графический интерфейс в NetBeans Mobility, позволяющий проектировать мобильные приложения путем перетаскивания компонентов. VMD позволяет определять поток операций и проектировать графический интерфейс с помощью компонентов, предоставляемых средой IDE, или самостоятельно разработанных компонентов. VMD содержит большое число стандартных компонентов пользовательского интерфейса, которые можно использовать для создания приложений, такие как списки, предупреждения, формы и изображения. Сюда также входят пользовательские компоненты, упрощающие создание многих сложных компонентов, например экранов ожидания, заставок, элементов таблиц и многого другого.

Экран входа в систему предоставляет стандартные элементы эффективного пользовательского интерфейса, такие как поле имени пользователя, поле пароля и кнопка вода в систему. Этот пользовательский компонент можно использовать для создания интерфейса входа в систему, предоставляющего доступ к защищенным функциям, таким как GSM-банкинг.

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

Примечание. При использовании IDE NetBeans 6.8 обратитесь к учебному курсуСоздание экранов входа в систему в среде IDE NetBeans 6.8.

Содержание

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

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

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

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

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

В этом примере показано использование пользовательского компонента "Экран входа в систему" в клиентском приложении, а также его подключение к серверным ресурсам путем доступа с проверкой подлинности. В дополнение к проекту NetBeans Mobility необходимо также использовать веб-проект NetBeans. Для прохождения этого учебного курса необходимо обладать навыками работы с веб-проектами NetBeans, а также иметь локальный или удаленный доступ к серверу веб-приложений, например GlassFish или Tomcat.

Выполните следующие действия для установки приложения SplashScreenExample.

  1. Загрузите файл LoginScreenExample.zip. Этот файл содержит итоговую версию проекта NetBeans Mobility.
  2. Загрузите файл LoginScreenServletExample.zip. Этот файл содержит итоговую версию веб-проекта NetBeans.
  3. Распакуйте файлы.
  4. В среде IDE откройте менюFile и выберите команду Open Project (Файл > Открыть проект). Затем перейдите к папке, содержащей распакованные файлы с проектом LoginScreenExample.
  5. Нажмите кнопку "Open Project" (Открыть проект).
  6. Повторите действия 4 и 5, чтобы открыть проект LoginScreenServletExample.
  7. Представление "Projects" (Проекты) должно выглядить следующим образом:

    Окно "Projects" (Проекты) с открытым экраном входа в систему и примером сервлета экрана входа в систему

  8. В окне "Projects" (Проекты) щелкните правой кнопкой мыши узел проекта LoginScreenServletExample и выберите команду "Run Project" (Выполнить проект) (или нажмите клавишу F6).
  9. Щелкните правой кнопкой мыши узел проекта LoginScreenExample и выберите команду "Run Project" (Выполнить проект). После запуска приложения откроется окно эмулятора, отображающее это приложение, которое выполняется в эмуляторе устройства по умолчанию.
  10. В окне эмулятора нажмите кнопку под элементом "Launch" (Запуск).
    В эмуляторе отобразится заставка, затем экран входа в систему, как показано ниже:

    Отображение примера приложения экрана входа в систему в эмуляторе WTK 2.5

  • Переход между полями имени пользователя и пароля осуществляется путем перемещения курсора вверх и вниз.
  • Нажмите центральную кнопку, чтобы включить возможность редактирования выбранного текстового поля.
  • Щелкните поле "Username" (Имя пользователя) и введите "john", затем нажмите кнопку "ОК" в эмуляторе.
  • Щелкните поле "Password" (Пароль) и введите "peanuts", затем нажмите кнопку "ОК" в эмуляторе.
  • Для входа в систему нажмите кнопку под элементом "Login" (Вход в систему).
  • При подключении приложения к серверу на экране отобразится компонент alert1 с сообщением "Login Successful" (Вход в систему выполнен успешно).

В начало

Создание приложения с использованием пользовательского компонента "Экран входа в систему"

После ознакомления с экраном входа в систему вернемся к началу и создадим данное приложение. В этом учебном курсе будет создан только клиент Java ME с помощью пакета NetBeans Mobility. Чтобы получить дополнительные сведения о серверной стороне этого приложения, следует ознакомиться с исходным кодом проекта LoginScreenServletExample. Для создания клиентского приложения Java ME выполните следующие действия.

  1. Создание проекта LoginScreenExample
  2. Добавление пакетов и визуального мидлета к проекту LoginScreenExample
  3. Добавление компонентов к проекту LoginScreenExample
  4. Добавление команд к компоненту "Экран входа в систему"
  5. Соединение компонентов для создания потока операций в приложении
  6. Добавление дополнительного исходного кода
  7. Выполнение проекта

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

  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. Оставьте "Sun Java Wireless Toolkit" в качестве выбранной платформы эмулятора. Нажмите кнопку "Next" (Далее), затем нажмите кнопку "Finish" (Готово).

    Примечание. Папка проекта содержит все исходные файлы и метаданные проекта (например, сценарий Ant для этого проекта). Приложение отобразится в окне "Flow Design" в Visual Mobile Designer.

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

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

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

  1. Переключите визуальный мидлет на окно "Flow Designer". Перетащите следующие компоненты из палитры компонентов в окно "Flow Designer":
    • Заставка
    • Экран ожидания
    • Экран входа в систему
    • Предупреждения (2 шт.)
  2. Щелкните элемент "splashScreen", откройте окно "Properties" (Свойства), измените значение свойства "Text" сnull на строку Login Screen Example
  3. Правой кнопкой мыши щелкните компонент splashScreen и выберите команду "Rename" (Переименовать) во всплывающем меню.
  4. В диалоговом окне "Rename" (Переименовать) введите alertFailure и нажмите кнопку "ОК".
  5. Повторите действия 3 и 4 для компонента alert1 для его переименования в alertSuccess.
  6. Вернитесь к компоненту alertFailure, откройте окно "Properties" (Свойства) и измените значение свойства "String" на значение Error.
  7. Щелкните компонент waitScreen, откройте окно "Properties" (Свойства) и измените значение свойства "Text" на Please Wait....
  8. В окне "Properties" (Свойства) компонента нажмите кнопку с многоточием (Кнопка с многоточием) для свойства "Task".
  9. В диалоговом окне "Task" (Задача) нажмите кнопку "Add" (Добавить).
    Будет добавлен компонент task1.
  10. Нажмите кнопку "Go to Source" (Перейти к источнику).
    В представлении исходного кода отображается код метода getTask ().
  11. Нажмите кнопку "ОК", чтобы закрыть диалоговое окно "Task" (Задача).
  12. В представлении исходного кода найдите раздел // write task-execution user code here и замените его на login();.
  13. Нажмите сочетание клавиш CTRL+S, чтобы сохранить внесенные изменения.

Добавление команд в LoginScreenExample

  1. Откройте представление "Flow" (Поток операций).
  2. Выберите команду "Exit" (Выход) из раздела "Commands" (Команды) в окне "Component Palette" (Палитра компонентов). Перетащите ее в компонент loginScreen представления "Flow".

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

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

Flow Designer с компонентами, соединенными с помощью командных строк

Добавление исходного кода

  1. В разделе объявления исходного кода LoginScreenExample.java добавьте следующий код: private boolean login = false;.
  2. В конце исходного кода вставьте следующий код: 
     private void login() throws IOException {
   //URL
   String url = "http://localhost:8084/LoginScreenExample/"
                + "?username=" + getLoginScreen().getUsername()
                + "&password=" + getLoginScreen().getPassword();
   //Clean up alertSuccess 
   getAlertSuccess().setString("");
   //Connect to the server
   HttpConnection hc = (HttpConnection) Connector.open(url);
   //Authentication
   if (hc.getResponseCode() == HttpConnection.HTTP_OK) {
        login = true;
   }
   //Closing time...
   hc.close();
   //Take action based on login value
   if (login) {
        getAlertSuccess().setString("Login Succesfull");
   } else {
        getAlertFailure().setString("Wrong Username or Password");
   }
   login = false;
 }

    Этот код выполняет отправку запроса со сведениями об имени пользователя и пароле на сервер и получение ответа, если процесс входа в систему был завершен успешно. Чтобы исправить операторы импорта в исходном коде, нажмите сочетание клавиш CTRL+SHIFT+I.

Выполнение проекта

Перед запуском клиентского приложения следует убедиться в том, что серверное приложение развернуто и запущено.

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

В начало

Документация Java к компоненту "Экран входа в систему"

Среда IDE NetBeans предоставляет документацию Javadoc по интерфейсу API для компонента "Экран входа в систему", а также для других компонентов, которые можно использовать в VMD. Для ознакомления с документацией Javadoc для компонента "Экран входа в систему" выполните следующие действия.

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

В начало


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

В начало