<!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>Особые компоненты Visual Mobile Designer: создание экранов входа в систему – учебный курс по Java ME для NetBeans </TITLE> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
<link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
<meta name="author" content="Karol Harelzak"> | |
</HEAD> | |
<BODY> | |
<a name="top"></a> | |
<H1>Особые компоненты Visual Mobile Designer: создание экранов входа в систему</H1> | |
<P>Visual Mobile Designer (VMD) – это графический интерфейс в NetBeans Mobility, позволяющий проектировать мобильные приложения путем перетаскивания компонентов. VMD позволяет определять поток операций и проектировать графический интерфейс с помощью компонентов, предоставляемых средой IDE, или самостоятельно разработанных компонентов. VMD содержит большое число стандартных компонентов пользовательского интерфейса, которые можно использовать для создания приложений, такие как списки, предупреждения, формы и изображения. Сюда также входят пользовательские компоненты, упрощающие создание многих сложных компонентов, например экранов ожидания, заставок, элементов таблиц и многого другого. </p> | |
<p>Экран входа в систему предоставляет стандартные элементы эффективного пользовательского интерфейса, такие как поле имени пользователя, поле пароля и кнопка вода в систему. Этот пользовательский компонент можно использовать для создания интерфейса входа в систему, предоставляющего доступ к защищенным функциям, таким как GSM-банкинг.</p> | |
<p>Если вы ранее не работали с NetBeans Mobility или J2EE, начните с изучения <A HREF="../../docs/javame/quickstart.html">Краткого руководства пользователя по NetBeans Java ME MIDP</A>.</p> | |
<!--<p class="notes"><b>Примечание.</b> При использовании IDE NetBeans 6.8 обратитесь к учебному курсу<a href="../../68/javame/loginscreen.html">Создание экранов входа в систему в среде IDE NetBeans 6.8</a>.</p>--> | |
<p><b>Содержание</b></p> | |
<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 class="class"> | |
<li><a href="#sample-app">Установка и выполнение примера приложения</a></li> | |
<li><a href="#create-app">Создание приложения с использованием пользовательского компонента "Экран входа в систему"</a> | |
<ul> | |
<LI><A HREF="#create">Создание проекта</A> | |
</LI> | |
<LI><A HREF="#add">Добавление пакетов и визуального мидлета к проекту</A> | |
</LI> | |
<LI><A HREF="#addcomponent">Добавление компонентов к проекту</A> | |
</LI> | |
<LI><A HREF="#addcommands">Добавление команд к компоненту "Экран входа в систему"</A> | |
</LI> | |
<LI><A HREF="#connect">Соединение компонентов для создания потока операций в приложении</A> | |
</LI> | |
<LI><A HREF="#storage">Добавление дополнительного исходного кода</A> | |
</LI> | |
<LI><A HREF="#run">Выполнение проекта</A> | |
</LI> | |
</ul></li> | |
<li><a href="#javadoc-loginscreen">Документация Javadoc к компоненту "Экран входа в систему" </a></li> | |
<li><a href="#see-also">Дополнительные сведения</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> | |
<tr> | |
<td class="tbltd1">GlassFish или Tomcat </td> | |
<td class="tbltd1">Включено в установки среды IDE <b>Java EE</b> и <b>Все</b></td> | |
</tr> | |
</tbody> | |
</table> | |
<a name="sample-app"></a> | |
<H2>Установка и выполнение примера приложения</H2> | |
<P>Перед тем как приступить к учебному курсу, можно ознакомиться с окончательным результатом этой работы.</P> | |
<p>В этом примере показано использование пользовательского компонента "Экран входа в систему" в клиентском приложении, а также его подключение к серверным ресурсам путем доступа с проверкой подлинности. В дополнение к проекту NetBeans Mobility необходимо также использовать веб-проект NetBeans. Для прохождения этого учебного курса необходимо обладать навыками работы с веб-проектами NetBeans, а также иметь локальный или удаленный доступ к серверу веб-приложений, например GlassFish или Tomcat.</p> | |
<P>Выполните следующие действия для установки приложения <tt>SplashScreenExample</tt>.</P> | |
<OL> | |
<LI>Загрузите файл <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/LoginScreenExample.zip">LoginScreenExample.zip</A>. Этот файл содержит итоговую версию проекта NetBeans Mobility.</LI> | |
<LI>Загрузите файл <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/LoginScreenServletExample.zip">LoginScreenServletExample.zip</A>. Этот файл содержит итоговую версию веб-проекта NetBeans. </LI> | |
<LI>Распакуйте файлы.</LI> | |
<LI>В среде IDE откройте меню<tt>File</tt> и выберите команду <tt>Open Project</tt> (Файл > Открыть проект). Затем перейдите к папке, содержащей распакованные файлы с проектом <tt>LoginScreenExample</tt>.</LI> | |
<li>Нажмите кнопку "Open Project" (Открыть проект).</li> | |
<li>Повторите действия 4 и 5, чтобы открыть проект <tt>LoginScreenServletExample</tt>.</LI> | |
<LI>Представление "Projects" (Проекты) должно выглядить следующим образом: | |
<p class="align-center"> | |
<IMG SRC="../../../images_www/articles/71/mobility/loginscreen/login-project.png" NAME="graphics1" ALT="Окно "Projects" (Проекты) с открытым экраном входа в систему и примером сервлета экрана входа в систему" BORDER=1> </p></li> | |
<LI>В окне "Projects" (Проекты) щелкните правой кнопкой мыши узел проекта <tt>LoginScreenServletExample</tt> и выберите команду "Run Project" (Выполнить проект) (или нажмите клавишу F6).</li> | |
<li>Щелкните правой кнопкой мыши узел проекта <tt>LoginScreenExample</tt> и выберите команду "Run Project" (Выполнить проект). После запуска приложения откроется окно эмулятора, отображающее это приложение, которое выполняется в эмуляторе устройства по умолчанию. </LI> | |
<LI>В окне эмулятора нажмите кнопку под элементом "Launch" (Запуск).<BR>В эмуляторе отобразится заставка, затем экран входа в систему, как показано ниже: <p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/loginscreen/login-emulator.png" NAME="graphics3" ALT="Отображение примера приложения экрана входа в систему в эмуляторе WTK 2.5" BORDER=1> </p></li> | |
</OL> | |
<UL> | |
<LI>Переход между полями имени пользователя и пароля осуществляется путем перемещения курсора вверх и вниз. | |
</LI> | |
<li>Нажмите центральную кнопку, чтобы включить возможность редактирования выбранного текстового поля. </li> | |
<LI>Щелкните поле "Username" (Имя пользователя) и введите "john", затем нажмите кнопку "ОК" в эмуляторе. | |
</LI> | |
<LI>Щелкните поле "Password" (Пароль) и введите "peanuts", затем нажмите кнопку "ОК" в эмуляторе. | |
</LI> | |
<LI>Для входа в систему нажмите кнопку под элементом "Login" (Вход в систему). | |
</LI> | |
<LI>При подключении приложения к серверу на экране отобразится компонент <code>alert1</code> с сообщением "Login Successful" (Вход в систему выполнен успешно). | |
</LI> | |
</UL> | |
<p class="align-center"><a href="#top">В начало</a></p> | |
<a name="create-app"></a> | |
<H2>Создание приложения с использованием пользовательского компонента "Экран входа в систему"</H2> | |
<P>После ознакомления с экраном входа в систему вернемся к началу и создадим данное приложение. В этом учебном курсе будет создан только клиент Java ME с помощью пакета NetBeans Mobility. Чтобы получить дополнительные сведения о серверной стороне этого приложения, следует ознакомиться с исходным кодом проекта <code>LoginScreenServletExample</code>. Для создания клиентского приложения Java ME выполните следующие действия.</P> | |
<OL> | |
<LI><A HREF="#create">Создание проекта LoginScreenExample</A> | |
</LI> | |
<LI><A HREF="#add">Добавление пакетов и визуального мидлета к проекту LoginScreenExample</A> | |
</LI> | |
<LI><A HREF="#addcomponent">Добавление компонентов к проекту LoginScreenExample</A> | |
</LI> | |
<LI><A HREF="#addcommands">Добавление команд к компоненту "Экран входа в систему" </A> | |
</LI> | |
<LI><A HREF="#connect">Соединение компонентов для создания потока операций в приложении</A> | |
</LI> | |
<LI><A HREF="#storage">Добавление дополнительного исходного кода</A> | |
</LI> | |
<LI><A HREF="#run">Выполнение проекта </A> | |
</LI> | |
</OL> | |
<H3><A NAME="create"></A>Создание проекта LoginScreenExample Project</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" (Местоположение проекта) укажите локальный каталог. Далее в тексте этот каталог будет называться каталогом <code>$PROJECTHOME</code>. | |
</LI> | |
<LI>Снимите флажок с параметра "Create Hello MIDlet". Нажмите кнопку "Next" (Далее). | |
</LI> | |
<LI>Оставьте "Sun Java Wireless Toolkit" в качестве выбранной платформы эмулятора. Нажмите кнопку "Next" (Далее), затем нажмите кнопку "Finish" (Готово). | |
<p class="notes"><b>Примечание.</b> Папка проекта содержит все исходные файлы и метаданные проекта (например, сценарий Ant для этого проекта). Приложение отобразится в окне "Flow Design" в Visual Mobile Designer. </p></LI> | |
</OL> | |
<H3><A NAME="add"></A>Добавление пакетов и визуального мидлета к проекту LoginScreenExample</H3> | |
<OL> | |
<LI>Выберите проект <CODE>LoginScreenExample</CODE> в окне "Project" (Проекты), затем в меню <tt>File</tt> выберите комаду <tt>New File (Файл > Создать файл) (CTRL+N)</tt>. В области "Categories" (Категории) выберите "Java". В разделе "File Types" (Типы файлов) выберите "Java Package". Нажмите кнопку "Next" (Далее). | |
</LI> | |
<LI>Введите <CODE>loginscreenexample</CODE> в поле "Package Name" (Имя пакета). Нажмите кнопку "Finish" (Готово). | |
</LI> | |
<LI>Выберите пакет <CODE>loginscreenexample</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><A NAME="addcomponent"></A>Добавление компонентов к проекту LoginScreenExample</H3> | |
<OL> | |
<LI>Переключите визуальный мидлет на окно "Flow Designer". Перетащите следующие компоненты из палитры компонентов в окно "Flow Designer": | |
<UL> | |
<LI>Заставка</LI> | |
<LI>Экран ожидания</LI> | |
<LI>Экран входа в систему</LI> | |
<LI>Предупреждения (2 шт.)</LI> | |
</UL></LI> | |
<LI>Щелкните элемент "splashScreen", откройте окно "Properties" (Свойства), измените значение свойства "Text" с<tt>null</tt> на строку <tt>Login Screen Example</tt> | |
</LI> | |
<LI>Правой кнопкой мыши щелкните компонент splashScreen и выберите команду "Rename" (Переименовать) во всплывающем меню.</li> | |
<li>В диалоговом окне "Rename" (Переименовать) введите <tt>alertFailure</tt> и нажмите кнопку "ОК".</li> | |
<li>Повторите действия 3 и 4 для компонента alert1 для его переименования в <tt>alertSuccess</tt>.</LI> | |
<LI>Вернитесь к компоненту alertFailure, откройте окно "Properties" (Свойства) и измените значение свойства "String" на значение <tt>Error</tt>. | |
</LI> | |
<LI>Щелкните компонент waitScreen, откройте окно "Properties" (Свойства) и измените значение свойства "Text" на <tt>Please Wait...</tt>. </LI> | |
<li>В окне "Properties" (Свойства) компонента нажмите кнопку с многоточием (<img src="../../../images_www/articles/71/mobility/loginscreen/ellipsis-button.png" border=1 alt="Кнопка с многоточием">) для свойства "Task".</li> | |
<li>В диалоговом окне "Task" (Задача) нажмите кнопку "Add" (Добавить).<br>Будет добавлен компонент task1.</li> | |
<li>Нажмите кнопку "Go to Source" (Перейти к источнику).<br>В представлении исходного кода отображается код метода <tt>getTask ()</tt>.</li> | |
<li>Нажмите кнопку "ОК", чтобы закрыть диалоговое окно "Task" (Задача).</li> | |
<li>В представлении исходного кода найдите раздел <tt>// write task-execution user code here</tt> и замените его на <tt>login();</tt>. </li> | |
<li>Нажмите сочетание клавиш CTRL+S, чтобы сохранить внесенные изменения. </li> | |
</OL> | |
<H3><A NAME="addcommands"></A>Добавление команд в LoginScreenExample</H3> | |
<OL> | |
<LI>Откройте представление "Flow" (Поток операций). </LI> | |
<LI>Выберите команду "Exit" (Выход) из раздела "Commands" (Команды) в окне "Component Palette" (Палитра компонентов). Перетащите ее в компонент <tt>loginScreen</tt> представления "Flow". </LI> | |
</OL> | |
<H3><A NAME="connect"></A>Соединение компонентов</H3> | |
<div> | |
<p>Откройте представление "Flow", щелкните команду <tt>Started (Запущено)</tt> элемента "Mobile Device" (Мобильное устройство) и перетащите его в компонент <tt>splashScreen</tt>. Аналогичным образом соедините другие компоненты, как показано на следующем рисунке.</p> | |
<p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/loginscreen/login-flow.png" NAME="graphics4" ALT="Flow Designer с компонентами, соединенными с помощью командных строк" BORDER=1> | |
</p> | |
</div> | |
<H3><A NAME="storage"></A>Добавление исходного кода</H3> | |
<OL> | |
<LI>В разделе объявления исходного кода <tt>LoginScreenExample.java</tt> добавьте следующий код: <CODE>private boolean login = false;</CODE>.</LI> | |
<LI>В конце исходного кода вставьте следующий код: <br> | |
<PRE> 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; | |
}</PRE> | |
<P> | |
Этот код выполняет отправку запроса со сведениями об имени пользователя и пароле на сервер и получение ответа, если процесс входа в систему был завершен успешно. Чтобы исправить операторы импорта в исходном коде, нажмите сочетание клавиш CTRL+SHIFT+I.</P></LI> | |
</OL> | |
<H3><A NAME="run"></A> Выполнение проекта</H3> | |
<div> | |
<p>Перед запуском клиентского приложения следует убедиться в том, что серверное приложение развернуто и запущено. | |
</p> | |
<p> Чтобы запустить мобильное клиентское приложение, выберите в меню <tt>Run</tt> команду <tt>Run Main Project</tt> (Выполнить > Выполнить главный проект) или нажмите клавишу F6, чтобы выполнить главный проект.</p> | |
</div> | |
<p class="align-center"><a href="#top">В начало</a></p> | |
<a name="javadoc-loginscreen"></a> | |
<H2>Документация Java к компоненту "Экран входа в систему"</H2> | |
<P>Среда IDE NetBeans предоставляет документацию Javadoc по интерфейсу API для компонента "Экран входа в систему", а также для других компонентов, которые можно использовать в VMD. Для ознакомления с документацией Javadoc для компонента "Экран входа в систему" выполните следующие действия.</P> | |
<OL> | |
<li>Поместите курсор на компоненте <tt>LoginScreen</tt> в исходном коде и нажмите сочетание клавиш CTRL+SHIFT+ПРОБЕЛ (либо выберите в меню <tt>Source</tt> команду <tt>Show Documentation (Исходный код > Показать документацию)</tt>.<br> | |
Документация Javadoc для этого элемента отобразится во всплывающем окне. </li> | |
<li>Щелкните значок отображения документации во внешнем веб-обозревателе (<img src="../../../images_www/articles/71/mobility/loginscreen/show-doc-button.png" alt="Отобразить документацию во внешнем веб-обозревателе">) во всплывающем меню, чтобы просмотреть подробную информацию по компоненту <tt>LoginScreen</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=NetBeans%20Java ME%20Custom%20Component:%20Login%20Screen">Мы ждем ваших отзывов</a><br style="clear:both;" ></div> | |
<br style="clear:both;" > | |
<a name="see-also"></a> | |
<H2>Дополнительные сведения</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="splashscreen.html">Особые компоненты Visual Mobile Designer: использование экранов заставок в приложениях Java ME</a></li> | |
<li><a href="waitscreen.html">Особые компоненты Visual Mobile Designer: создание экранов ожидания для мобильных приложений</a></li> | |
<li><a href="tableitem.html">Особые компоненты Visual Mobile Designer: использование элементов таблицы в приложениях Java ME</a></li> | |
<li><a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Справочная информация: руководство по компонентам Palette в Visual Mobile Designer</a></li> | |
</UL> | |
<p class="align-center"><a href="#top">В начало</a></p> | |
</BODY> | |
</HTML> |