Разработка гибридных приложений для мобильных устройств под Windows Phone

Разработка серверных сценариев гибридных мобильных приложений средствами ASP.NET

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

Технология ASP.NET WebForms для разработки серверных сценариев

Серверная часть гибридных мобильных приложений для современных устройств под Windows Phone практически не отличается от традиционных веб-приложений для настольных компьютеров и может создаваться на базе большого разнообразия технологий. Компания Microsoft предлагает для этих целей технологию ASP.NET и множество шаблонов проектов для ее реализации, таких как WebForms [1], MVC [2] и WebPages [3]. Ввиду того, что вхождение в WebForms начинающих разработчиков происходит быстрее, для нашего учебного курса была выбрана именно эта технология в среде Visual Studio. Основные преимущества использования веб-форм таковы:

  • для создания веб-форм используется знакомая большинству разработчиков программная модель, позволяющая легко мигрировать от Windows-приложений к веб-приложениям практически без дополнительного обучения;
  • веб-формы обеспечивают полное разделение визуального представления и кода формы. Такой подход облегчает обновление отдельных частей независимо друг от друга, упрощает навигацию по коду и обеспечивает более простую поддержку версий;
  • код обработчиков событий компилируется при первом обращении к веб-странице, что повышает производительность приложений по сравнению с использованием интерпретируемого кода.
    •

    Следует отметить, что в версию ASP.NET 4 и выше добавлены такие усовершенствования для веб-форм, как поддержка новых браузеров мобильных устройств, а также поддержка HTML5.

    Веб-форма представляет собой веб-страницу, которую пользователи мобильных устройств могут открыть в браузере. Серверное приложение ASP.NET состоит из одной или нескольких веб-форм, которые могут обращаться к ресурсам на сервере (файлам и базам данных). Как правило, для работы веб-формами используется программный код, запускаемый на сервере. Мы будем использовать в наших серверных сценариях код C#. Обычный механизм работы серверного приложения ASP.NET выглядит следующим образом:

  • браузер пользователя мобильного устройства генерирует запрос HTTP;
  • парсер ASP.NET интерпретирует код источника;
  • если код еще не откомпилирован в DLL, ASP.NET вызывает компилятор;
  • среда выполнения выполняет код на языке MSIL (ассемблер) и возвращает скомпилированный код HTML в браузер пользователю.
    •

    Для отладки сценариев на компьютере можно использовать обычный браузер, но лучше использовать специальный эмулятор мобильного браузера, например, Opera Mobile emulator. Его можно скачать по ссылке [4] и подключить к набору браузеров Visual Studio.

    Инструменты Visual Studio создания веб-форм

    Visual Studio.NET - это главное программное средство для разработки серверных приложений типа WebForms. На примере создания простейшего серверного приложения мы продемонстрируем возможности веб-форм получения серверным сценарием данных от клиентского мобильного приложения (виджета) и отправки данных на мобильное устройство.

    Откройте Visual Studio и создайте в любой вашей папке новый проект c произвольным именем, например "WebApp_Mobile", используя шаблон "Пустое веб-приложение ASP.NET":

    (рис 21.1)

    В окне проекта средствами главного оконного меню ВИД -> Обозреватель решений, установите обозреватель решений:

    (рис 21.2)

    Окно обозревателя решений содержит все ресурсы проекта. Первоначально здесь только конфигурационная информация (файл web.config), ссылки на подключаемые библиотеки (References) и файлы свойств (Properties). По мере разработки, здесь появятся файлы веб-форм *.aspx, и дополнения к веб-формам: модули C# (файлы *.cs), папки с базой данных, файлами изображений, таблицами стилей и другие компоненты.

    Используя обозреватель решений, добавьте в проект веб-форму (Добавить -> Создать элемент):

    (рис 21.3)

    В окне добавления нового элемента следует выбрать "Форма Web Form" и дать создаваемой форме имя, например, WebForm_Mobile.aspx:

    (рис 21.4)

    Visual Studio IDE создает страницу, которой присваивается имя WebForm_Mobile.aspx. Исходный код страницы:

    (рис 21.5)

    Анализ созданной страницы. Тег атрибутов страницы @Page

    Исходный код HTML для веб-формы (файла .aspx) обычно начинается с тега @Page, который определяет параметры данной страницы. По умолчанию данный тег для каждой новой страницы .aspx выглядит примерно так:

    <%@ Page Language="C#" AutoEventWireup="true" 
CodeBehind ="WebForm_Mobile. aspx.cs" Inherits="_Default" %>

    Прокомментируем значение каждого из атрибутов:

  • Language - это, конечно, указание на язык, который используется для программных вставок на самой странице (для кода на страницах codebehind он определяется отдельно). Можно указывать любой .NET-совместимый язык, например. Visual Basic.NET("vb"), C# ("c#") или JavaScript ("jscript"). Однако для каждой страницы язык может быть указан только один.
  • AutoEventWireup - это значение позволяет определять, какие имена можно будет использовать для событийных процедур данной страницы. Если для данного атрибута используется значение "true", то это значит, что имена событийных процедур для страницы жестко предопределены. Например, для события загрузки страницы можно будет использовать только событийную процедуру с именем Page_Load(). Если же для этого атрибута использовать значение "false", то имена событийных процедур можно определять самостоятельно.
  • CodeBehind - этот атрибут определяет имя файла, который используется для данной страницы, используется вместе с атрибутом Inherits.
  • Inherits - этот атрибут определяет, от какого класса с точки зрения программного кода производится объект данной страницы. Можно использовать любой класс, производный от System.Web.UI.Page.
  • Title - позволяет определить заголовок страницы (если он не определен в соответсвующем теге HTML).
    •

    Атрибут runat ="server"

    Основное назначение ASP.NET - создание динамических веб-сайтов. Поэтому в большинстве ситуаций на сайтах ASP.NET предусмотрены страницы с формами HTML, где размещены элементы управления, которые выполняют прием информации от пользователей. В тегах <head>, <form> и др. атрибуту runat присваивается значение server, указывающее на то, что код элемента должен выполняться на стороне сервера, а не на стороне клиента. В принципе код ASP .NET может работать и на стороне клиента, но это делается очень редко, поскольку многие возможности ASP.NET становятся недоступными (в сущности, при этом выполняется сценарий клиентской стороны, не имеющий ничего общего с ASP .NET).

    В ASP.NET слово "форма" (form) употребляется в двух значениях. Во-первых, это слово употребляется для обозначения самой Web-страницы с расширением .aspx (веб-форма). Во-вторых, это слово употребляется для обозначения обычных форм HTML, которые размещаются на страницах HTML и служат контейнерами для элементов управления. В этом разделе речь пойдет именно о формах HTML.

    В большинстве ситуаций создавать форму на странице ASP.NET вручную нет необходимости. Обычно она создается автоматически при перетаскивании из ToolBox на веб-страницу любого элемента управления. По этой причине в ToolBox даже не предусмотрено специального элемента управления для форм. Однако, при желании вы можете, как создать форму вручную, так и настроить ее параметры в режиме работы с кодом HTML (вкладка "Исходный код"). В самом простом варианте тег для формы выглядит так:

    <form id="form1" runat="server">
 ...
 </form>

    В принципе, теги форм, которые используются в ASP.NET, определяются стандартом HTML. Однако при применении форм на страницах ASP.NET необходимо учесть дополнительные особенности, специфические именно для ASP.NET:

  • На странице .aspx может быть только одна форма, обрабатываемая сервером (то есть с атрибутом runat = "server". В противном случае при попытке обработать эту страницу в ASP.NET возникнет исключение.
  • Для форм ASP.NET, которые должны обрабатываться сервером, обязательно должен быть указан атрибут runat со значением "server". Именно этот атрибут говорит о том, что события для элементов управления данной формы должны обрабатываться сервером. Если этот элемент управления указан не будет, то в этом случае форма будет вести себя как обычная форма HTML.
  • В открывающем теге не должен использоваться атрибут action. Значение этого атрибута настраивается подсистемой ASP.NET в автоматическом режиме.
    •

    Другие атрибуты форм, которые можно использовать согласно стандарту HTTP, можно использовать и в ASP.NET.

    Добавление текста на страницу

    Перейдите в "Конструктор" созданной нами формы, щелкнув одноименную вкладку.

    Представление "Конструктор" отображает страницу, над которой ведется работа, в режиме точного отображения (WYSIWYG). На этом этапе на странице нет ни текста, ни элементов управления, а только изображенная пунктиром прямоугольная область. Эта прямоугольная область представляет на странице элемент <div>. Щелкните внутри прямоугольной области, ограниченной пунктиром и введите текст "Наше первое приложение". Далее показан текст, введенный в представлении "Конструктор":

    (рис 21.6)

    Запустите приложение в обычном браузере, установленном в меню проекта:

    (рис 21.7)

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

    (рис 21.8) (рис 21.9)

    Элементы управления ASP.NET

    После того, как форма будет создана, следующее, что необходимо сделать - добавить на нее элементы управления. Их можно создать вручную в коде HTML или программным способом, но обычно удобнее размещать их на странице, просто перетаскивая их из ToolBox (Панель элементов). В представлении "Конструктор" откройте панель элементов управления:

    (рис 21.10)

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

    <asp:Button ID="Button1" runat="server" Text="Button" />

    Обратите внимание на атрибут runat="server". Он означает то же, что и для формы: элемент управления, для которого использован такой атрибут, становится доступным из программного кода в С# - файле *.aspx.cs, а на события этого элемента управления реагирует сервер. Если этот атрибут убрать (а также, возможно, избавиться от атрибутов, которые допустимы только для серверных элементов управления), элемент управления станет обычным элементом управления HTML. Отметим некоторые отличия серверных элементов управления ASP.NET от обычных элементов управления HTML:

  • Главное отличие заключается в том, что в ответ на события серверного элемента управления (например, на нажатие кнопки) срабатывает событийная процедура на сервере, в которой вы можете определить любой требуемый вам код. При этом работа с серверными элементами управления основана на стандартной модели событий для этих элементов, что делает ее очень похожей на работу с элементами управления Windows: например, используются те же события Click, Load и т.п..
  • В коде HTML для серверных элементов управления используется префикс пространства имен XML, который выглядит как <asp:...>. Например: 
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    Для элементов управления HTML такой префикс не используется.

  • В ASP.NET элементы управления производятся от общих предков и поэтому обладают общим набором свойств (BackColor), методов и событий (хотя для каждого элемента управления могут быть предусмотрены и уникальные свойства, методы и события).
  • В отличие от стандартных элементов управления HTML, для серверных элементов управления обязательно сохраняется информация о состоянии. Отличия наглядно видны при обновлении страницы. Для серверных элементов управления установленные пользователем значения по умолчанию сохранятся, а для обычных элементов управления HTML будут загружены исходные значения.
  • Серверные элементы управления автоматически определяют тип и версию браузера мобильного устройства и генерируют подходящий для него код. В результате снижается потребность в тестировании и разработке разных версий страниц под разные версии браузеров.
    •

    На одной странице .aspx вполне можно использовать одновременно как серверные элементы управления, так и стандартные элементы управления HTML. Элементы управления HTML проще, стандартнее и используют меньшую полосу пропускания, поэтому серверные элементы управления обычно используются только тогда, когда вам нужна дополнительная функциональность: как на уровне сервера (например, для взаимодействия с базами данных), так и на уровне клиентского интерфейса (например, в наборе элементов управления HTML нет календаря).

    Отметим, что атрибут runat = "server" можно использовать не только для традиционных элементов управления. Например, атрибут runat = "server" можно поместить внутрь тега для элемента HTML <body>, и при этом вы точно так же получите программный доступ к этому элементу (например, сможете настраивать для него фон).

    Все элементы управления разделены на несколько групп (найдите эти группы в среде своего проекта). Назначение основных групп элементов управления:

  • HTML - это просто блоки кода HTML (как элементы управления, так и другие теги, например, тег <div>). К ASP.NETотношения они не имеют, а в ToolBox помещены для удобства дизайнеров. Справку по ним можно посмотреть в руководствах по HTML.
  • Стандартный (Standard) - главный набор серверных элементов управления ASP.NET. Эти элементы управления используются чаще всего
  • Данные (Data) - эти элементы управления предназначены для работы с информацией в базах данных.
  • Проверка (Validation) - эти элементы управления предназначены для проверки вводимых пользователем значений.
  • Переходы (Navigation) - специальные элементы управления, которые предназначены для упрощения навигации пользователя по сайту.
  • Вход (Login) - эти элементы управления предназначены для аутентификации пользователя на Web-сайте.
  • Веб - части (WebParts) - сложные элементы управления, предназначенные для использования на портальный сайтах (например, реализованные средствами SharePoint Portal Server). Обычно эти элементы управления используются для того, чтобы предоставить возможность пользователю самостоятельно настраивать для себя интерфейс Web-сайта.
    •

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

    (рис 21.11)

    Исходный код формы должен примерно выглядеть вот так (можете доработать или изменить его вручную):

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm_Mobile.aspx.cs" Inherits="WebApp_Mobile.WebForm_Mobile" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <style type="text/css">
 .auto-style1 {
 width: 429px;
 }
 .auto-style2 {
 font-size: xx-large;
 }
 .auto-style3 {
 font-size: xx-large;
 color: #009900;
 }
 </style>
</head>
 <body style="margin-bottom: 384px; height: 484px; background-color:#a9f2f2">
<h1 class="auto-style3">Гибридное мобильное приложение</h1>
<h2>Серверная страница</h2>
<p style="height: 25px" class="auto-style2"> <strong>Форма ввода клиентских данных</strong></p>
<form id="form1" runat="server">
<table style="width: 40%; height: 162px;">
<tr>
<td class="auto-style2"><strong>Имя</strong></td>
<td class="auto-style1">
<asp:TextBox ID="TextBox1" runat="server" Width="202px"
 Font-Bold="True" Font-Size="X-Large" ForeColor="Red"
  Height="24px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2"><strong>Фамилия</strong></td>
<td class="auto-style1">
<asp:TextBox ID="TextBox2" runat="server" Width="252px" Font-Bold="True"
 Font-Size="X-Large" ForeColor="Red"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style2" ><strong>Страна</strong></td>
<td class="auto-style1">
<asp:TextBox ID="TextBox3" runat="server" Font-Bold="True" Font-Size="X-Large" 
ForeColor="Red"></asp:TextBox>
</td>
</tr>
</table>
<asp:Button ID="Button2" runat="server" Font-Bold="True" Font-Size="X-Large" 
Height="49px" Text="Отправить на сервер" Width="599px" />
<br />
<asp:Label ID="Label1" runat="server" Font-Bold="True" ForeColor="Red" 
style="font-size: x-large" Text="Сервер получил:"></asp:Label>
</form>
</body>
</html>

    Обратите внимание: все теги элементов управления страницы (надпись, кнопка) снабжаются префиксом "<asp:". Дело в том, что элементы ASP.NET не являются элементами HTML. Они находятся на сервере, и обычные элементы HTML используются только в страницах, передаваемых клиенту (там, где это возможно). Так, в HTML не существует аналогов для таких элементов ASP.NET, как календарь или элемент интервальной проверки. В этом случае в ASP .NET для достижения желаемого эффекта используется комбинация обычных элементов HTML, сценарного кода и кода, работающего на стороне сервера.

    Запустите проект. В эмуляторе Opera Mobile его главная страница будет выглядеть примерно так (кнопка "Отправить на сервер" пока не работает):

    (рис 21.12)

    Добавление в проект C#- кода для получения данных от клиента и отправки клиенту сообщения

    Основная задача нашего серверного сценария - принять на сервер данные, переданные мобильным приложением (виджетом). Это можно сделать в событии загрузки страницы мобильным устройством - Page_Load(). Обработчик этого события всегда присутствует в файле дополнения к веб-формам - модуле C# - кода (файл WebForm_Mobile.aspx.cs) и вы можете увидеть его:

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApp_Mobile
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

    Добавьте в обработчик события Page_Load операторы получения данных из запроса клиента (см. предыдущую лекцию), которые содержатся в коллекции Request:

    protected void Page_Load(object sender, EventArgs e)
        {
  // принять данные от клиентского Cardova -приложения,
   //расположенного на мобильном телефоне
   string Name = Request["name"]; // request (англ.) - запрос
   string Lastname = Request["lastname"];
   string Country = Request["country"];
   // Ответ сервера клиенту
   Label1.Text += Name + " " + Lastname + " " + Country;
        }

    Коллекция Request

    Приведенный выше C# - код получает три значения, отправленные веб-страницей, и содержащиеся в ASP коллекции, называемой Request. Эта коллекция содержит всю информацию из URL, посредством которой был запрошен данный сценарий. Поскольку наш ASP сценарий находится в файле WebForm_Mobile.aspx, то строка URL с запросом этого сценария мобильным клиентским приложением может выглядеть так:

    http://www.intuitXMLHttpRequestTest.com/
WebForm_Mobile.aspx?name=Татьянаlastname=Самойловаcountry=Россия

    В данном случае URL содержит три единицы информации в конце (в части URL, называющейся строкой запроса, - query string). Значение первой переменной name равно Татьяна, второй (lastname) - Самойлова, третьей (country) - Россия. Начало строки запроса обозначается знаком вопроса (?), а каждая последующая переменная - знаком амперсанда(). Когда C#- код ASP-сценария начинает исполняться, он извлекает эту информацию из URL и сохраняет ее в коллекции Request.QueryString, где она доступна для последующих операций.

    Последний шаг - отправить сообщение (или, возможно, данные) веб-странице, которая подала запрос. Эти данные можно было бы обернуть в разметку HTML или даже приспособленную для этого разметку XML, но это будет слишком для данного примера. Здесь вполне достаточно для отправки присвоить метке формы Label1 желаемый текст.

    Получение данных от клиента посредством элементов управления формы

    Для облегчения отладки этого кода создайте его аналог для события от щелчка по кнопке "Отправить на сервер", где примите данные из пользовательской формы (объекты TextBox). Если дважды щелкнуть на этой кнопке, в окне модуля C# создается процедура события Click. В приложениях ASP .NET код обычно отделяется от средств визуального представления и хранится в отдельном файле с двойным расширением .aspx.cs.

    Включите в процедуру события Click следующий фрагмент:

    // принять данные формы серверного приложения,
   //открытой в браузере мобильного устройства
   string Name = TextBox1.Text;
   string Lastname = TextBox2.Text;
   string Country = TextBox3.Text;
  // Ответ сервера клиенту
   Label1.Text += Name + " " + Lastname + " " + Country;

    Полный текст модуля C# для двух событий, принимающих одноименные данные от клиента, имеет вид:

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApp_Mobile
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
  // принять данные от клиентского Cardova -приложения,
   //расположенного на мобильном устройстве
   string Name = Request["name"];
   string Lastname = Request["lastname"];
   string Country = Request["country"];
   // Ответ сервера клиенту
   Label1.Text += Name + " " + Lastname + " " + Country;

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
  // принять данные формы серверного приложения,
   //открытой в браузере мобильного устройства
   string Name = TextBox1.Text;
   string Lastname = TextBox2.Text;
   string Country = TextBox3.Text;
  // Ответ сервера клиенту
   Label1.Text += Name + " " + Lastname + " " + Country;
        }
    }
}

    Результат тестирования серверного приложения, принимающего данные от клиента мобильного устройства (изображены четыре шага - запрос формы браузером клиента, ввод данных, отправка на сервер, ответ сервера):

    (рис 21.13) (рис 21.14) (рис 21.15) (рис 21.16)

    Подробнее ознакомиться с использованием веб - форм можно в ИНТУИТ - учебном курсе Майкла Хальверсона [5].

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^