Создание мобильных веб-приложений при помощи ASP.NET

Разбить на страницы

Показывать лекцию целиком

В данной лабораторной работе демонстрируется применение управляющих элементов ASP.NET Mobile для создания веб-приложений для мобильных устройств.

.NET Mobile представляет собой расширение Microsoft ASP.NET и Microsoft .NET Framework. По-сути, .NET Mobile представляет собой набор серверных управляющих элементов для форм, ориентированных на использование в беспроводных мобильных устройствах. Эти элементы управления генерируют разный код для различных устройств на языках WML, HTML или Compact HTML (cHTML).

Управляющие элементы ASP .NET Mobile расширяют функции SDP (Smart Device Programmability) и платформу .NET Compact Framework. Они позволяют использовать возможности платформы .NET Compact Framework и среды разработки Visual Studio .NET для создания мобильных веб-приложений благодаря возможности доставки данных на разнообразные мобильные устройства при помощи технологии ASP.NET. Этот подход позволяет создать в среде Visual Studio .NET единое мобильное веб-приложение, автоматически производящее формирование данных для отображения на разнообразных устройствах: мобильных телефонах, пейджерах, смартфонах, Pocket PC и др. При этом интегрированная среда разработки позволяет создавать мобильные веб-приложения, просто перетаскивая управляющие элементы в дизайнер форм.

Система .NET Mobile не устанавливает никаких компонентов на клиентское устройство. Для адаптации форматирования под конкретные браузеры используется серверная логика. Она генерирует данные в форматах WML, HTML, и cHTML. Помимо адаптивной генерации веб-страниц, технология .NET Mobile предоставляет богатый набор средств индивидуализации и расширения, обеспечивая простой способ осуществления поддержки новых устройств. Кроме того, технология .NET Mobile позволяет разработчикам управлять представлением данных для конкретного устройства или класса устройств в одной программной модели и обеспечивает легкую реализацию поддержки новых устройств без переделки существующих веб-приложений.

Общая последовательность работы .NET Mobile выглядит следующим образом:

Мобильное устройство. С него исходит запрос на загрузку веб-страницы.

Интернет. Запрос передается через сеть соответствующему веб-серверу.

Веб-сервер IIS получает запрос от мобильного устройства и передает его обработчику.

.NET Framework выполняет обработку запроса.

ASP.NET компилирует запрашиваемый устройством документ.

.NET Mobile. Реализует элементы веб-страницы с учетом требований конкретного типа мобильного устройства.

Веб-страница возвращается обратно клиентскому устройству.

Наиболее распространенными элементами управления форм для мобильных устройств являются следующие:


Название	Функция
`Command`	Выполнение действия
`Form`	Контейнер для элементов управления
`Image`	Изображение
`Label`	Текст
`Link`	Гиперссылка
`List`	Список
`MobilePage`	Контейнер для элементов управления
`ObjectList`	Список объектов
`Panel`	Контайнер для других элементов управления
`SelectionList`	Список с выбором
`StyleSheet`	Стили для других элементов управления
`TextBox`	Поле для ввода однострочного текста
`TextView`	Поле для ввода многострочного текста

Порядок выполнения лабораторной работы

Для работы с примерами, приводимыми в данной лабораторной работе помимо среды разработки Visual Studio .NET потребуется установка компонентов .NET Mobile и WAP эмулятора.

В качестве WAP эмулятора был использован Series 40 5th Edition SDK (на основе Nokia 6267 ). Для установки эмулятора необходимо скачать с сайта http://www.forum.nokia.com/ (требуется предварительная регистрация) и установить программу Nokia Mobile Internet Toolkit и сам эмулятор Nokia Series 40 5th Edition SDK.

Общая последовательность разработки веб-приложения с использованием .NET Mobile выглядит следующим образом:

Создание проекта веб-приложения ASP.NET.

Подключение интерфейса System.Mobile.UI.

Вставка в веб-страницу управляющих элементов .NET Mobile.

Рассмотрим пример создания простейшей веб-странице, отображающей на экране мобильного устройства сообщение " Hello world!".

Создайте новый проект типа ASP.NET Web Application.

Активируйте с помощью меню окно "Solution Explorer". Из списка файлов проекта удалите файлы Default.aspx.cs и Default.aspx.designer.cs.

Страница Default.aspx должна содержать следующий код:

<%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage " Language= "C# "%>
<%@ Register TagPrefix= "mobile" Namespace= "System.Web.UI.MobileControls " 
Assembly= "System.Web.Mobile " %> 

<mobile:Form runat="server">
   <mobile:Label runat="server">Hello world!</mobile:Label>
</mobile:Form>

Директива в первой строке сообщает обработчику ASP о необходимости обработки данной страницы как предназначенной для мобильных устройств.

Директива во второй строке регистрирует префикс "mobile" для обращения к элементами управления для мобильных устройств.

Тэг <mobile:Form> указывает серверу на необходимость вставки формы.

Тэг <mobile: Label> указывает серверу на необходимость вставки метки с текстом " Hello world!".

Откомпилируйте проект.

Создайте новый виртуальный каталог, связанный с директорией текущего проекта. Добавьте в список документов по умолчанию страницу Default.aspx.

Запустите эмулятор Nokia Series 40 5th Edition SDK и программу Nokia Mobile Internet Toolkit. В программе Nokia Mobile Internet Toolkit укажите полный URL созданной с помощью ASP.NET страницы

После обработки данной страницы для мобильного устройства, поддерживающего протокол WAP, будет сгенерирована страница, вид которой в эмуляторе приведен ниже:

В эмуляторе выберите раздел меню "Tools > Diagnostics". В появившемся окне диагностики можно будет увидеть следующий код страницы, загруженной в эмуляторе:

<?xml version='1.0'?>
  <!DOCTYPE wml PUBLIC '-//WAPFORUM//DTD WML 1.1//EN' 
  'http://www.wapforum.org/DTD/wml_1.1.xml'>
  <wml>
    <head>
      <meta http-equiv="Cache-Control" content="max-age=0" />
    </head>
    <card>
      <p>Hello world!</p>
    </card>
  </wml>

Следующий пример демонстрирует использование простого элемента формы для ввода текста (в режиме пароля):

<%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage " Language= "C# "%>
<%@ Register TagPrefix= "mobile " Namespace= "System.Web.UI.MobileControls " 
Assembly= "System.Web.Mobile " %> 

<script runat="server" language="C#">

string uname;

protected void AgeClick(Object sender, EventArgs e)
{
    uname=text1.Text;
    ActiveForm=form2;
}

protected void  Form2_Activate(Object sender, EventArgs e)
{
  message.Text="Wellcome " + uname + "!";
}
</script>

<Mobile:Form id="form1" runat="server">
<Mobile:Label runat="server">Your name, please</Mobile:Label>
<Mobile:TextBox runat="server" id="text1" password="true"/>
<Mobile:Command runat="server" OnClick="AgeClick" Text="Submit" />
</Mobile:Form>

<Mobile:Form id="form2" runat="server" OnActivate="Form2_Activate">
<Mobile:Label runat="server" id="message" />
</Mobile:Form>

Если выполнить как в предыдущем примере все шаги с 1 по 8, то после загрузки получившейся страницы в эмуляторе на экране отобразится первая форма:

После ввода строки и нажатия кнопки " Submit " активируется вторая форма:

Код страницы для первой формы, загруженный в мобильное устройство, выглядит следующим образом:

<?xml version='1.0'?>
<!DOCTYPE wml PUBLIC '-//WAPFORUM//DTD WML 1.1//EN' 
'http://www.wapforum.org/DTD/wml_1.1.xml'>
<wml>
  <head>
    <meta http-equiv="Cache-Control" content="max-age=0" />
  </head>
  <card>
    <do type="prev" label="РќР°Р•Р°Рґ"><prev /></do>
    <p>Your name, please<br/>
    <input name="mcsvprtws0" type="password" value="" />
    <anchor title="Р'РїРµСЂРµРґ">Submit
    <go href="Default.aspx?__ufps=058985" method="post">
    <postfield name="__EVENTTARGET" value="ctl01" />
    <postfield name="text1" value="$(mcsvprtws0)" />
    </go>
    </anchor>
    </p>
  </card>
</wml>

Контрольное задание

Разработайте с помощью MS Visual Studio .NET серверное веб-приложение, использующее управляющий ASP.NET Mobile элемент: <Mobile:Calendar> Добавьте для этого элемента обработчик события OnSelectionChanged, который должен отображать выбранный пользователем мобильного устройства день календаря с помощью элемента <Mobile:Label>.

Код обработчика события может выглядеть следующим образом:

<script runat="server">

protected void CalChanged(Object sender, EventArgs e)
{
    label1.Text = "You selected: " + calendar1.SelectedDate;
}
</script>

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

Страницы:

Общая последовательность работы .NET Mobile выглядит следующим образом:

Мобильное устройство. С него исходит запрос на загрузку веб-страницы.

Интернет. Запрос передается через сеть соответствующему веб-серверу.

Веб-сервер IIS получает запрос от мобильного устройства и передает его обработчику.

.NET Framework выполняет обработку запроса.

ASP.NET компилирует запрашиваемый устройством документ.

.NET Mobile. Реализует элементы веб-страницы с учетом требований конкретного типа мобильного устройства.

Веб-страница возвращается обратно клиентскому устройству.

Наиболее распространенными элементами управления форм для мобильных устройств являются следующие:


Название	Функция
`Command`	Выполнение действия
`Form`	Контейнер для элементов управления
`Image`	Изображение
`Label`	Текст
`Link`	Гиперссылка
`List`	Список
`MobilePage`	Контейнер для элементов управления
`ObjectList`	Список объектов
`Panel`	Контайнер для других элементов управления
`SelectionList`	Список с выбором
`StyleSheet`	Стили для других элементов управления
`TextBox`	Поле для ввода однострочного текста
`TextView`	Поле для ввода многострочного текста

Порядок выполнения лабораторной работы

Общая последовательность разработки веб-приложения с использованием .NET Mobile выглядит следующим образом:

Создание проекта веб-приложения ASP.NET.

Подключение интерфейса System.Mobile.UI.

Вставка в веб-страницу управляющих элементов .NET Mobile.

Создайте новый проект типа ASP.NET Web Application.

Активируйте с помощью меню окно "Solution Explorer". Из списка файлов проекта удалите файлы Default.aspx.cs и Default.aspx.designer.cs.

Страница Default.aspx должна содержать следующий код:

<%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage " Language= "C# "%>
<%@ Register TagPrefix= "mobile" Namespace= "System.Web.UI.MobileControls " 
Assembly= "System.Web.Mobile " %> 

<mobile:Form runat="server">
   <mobile:Label runat="server">Hello world!</mobile:Label>
</mobile:Form>

Тэг <mobile:Form> указывает серверу на необходимость вставки формы.

Тэг <mobile: Label> указывает серверу на необходимость вставки метки с текстом " Hello world!".

Откомпилируйте проект.

<?xml version='1.0'?>
  <!DOCTYPE wml PUBLIC '-//WAPFORUM//DTD WML 1.1//EN' 
  'http://www.wapforum.org/DTD/wml_1.1.xml'>
  <wml>
    <head>
      <meta http-equiv="Cache-Control" content="max-age=0" />
    </head>
    <card>
      <p>Hello world!</p>
    </card>
  </wml>

Следующий пример демонстрирует использование простого элемента формы для ввода текста (в режиме пароля):

<%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage " Language= "C# "%>
<%@ Register TagPrefix= "mobile " Namespace= "System.Web.UI.MobileControls " 
Assembly= "System.Web.Mobile " %> 

<script runat="server" language="C#">

string uname;

protected void AgeClick(Object sender, EventArgs e)
{
    uname=text1.Text;
    ActiveForm=form2;
}

protected void  Form2_Activate(Object sender, EventArgs e)
{
  message.Text="Wellcome " + uname + "!";
}
</script>

<Mobile:Form id="form1" runat="server">
<Mobile:Label runat="server">Your name, please</Mobile:Label>
<Mobile:TextBox runat="server" id="text1" password="true"/>
<Mobile:Command runat="server" OnClick="AgeClick" Text="Submit" />
</Mobile:Form>

<Mobile:Form id="form2" runat="server" OnActivate="Form2_Activate">
<Mobile:Label runat="server" id="message" />
</Mobile:Form>

После ввода строки и нажатия кнопки " Submit " активируется вторая форма:

Код страницы для первой формы, загруженный в мобильное устройство, выглядит следующим образом:

<?xml version='1.0'?>
<!DOCTYPE wml PUBLIC '-//WAPFORUM//DTD WML 1.1//EN' 
'http://www.wapforum.org/DTD/wml_1.1.xml'>
<wml>
  <head>
    <meta http-equiv="Cache-Control" content="max-age=0" />
  </head>
  <card>
    <do type="prev" label="РќР°Р•Р°Рґ"><prev /></do>
    <p>Your name, please<br/>
    <input name="mcsvprtws0" type="password" value="" />
    <anchor title="Р'РїРµСЂРµРґ">Submit
    <go href="Default.aspx?__ufps=058985" method="post">
    <postfield name="__EVENTTARGET" value="ctl01" />
    <postfield name="text1" value="$(mcsvprtws0)" />
    </go>
    </anchor>
    </p>
  </card>
</wml>

Контрольное задание

Код обработчика события может выглядеть следующим образом:

<script runat="server">

protected void CalChanged(Object sender, EventArgs e)
{
    label1.Text = "You selected: " + calendar1.SelectedDate;
}
</script>

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

Создание мобильных веб-приложений при помощи ASP.NET

Порядок выполнения лабораторной работы

Контрольное задание

Порядок выполнения лабораторной работы

Контрольное задание

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!