WAP и ASP - часть III

В этой статье мы рассмотрим практическое приложение, созданное с использованием WML и ASP. Мы разработаем "корзину" для магазина некой компании по продаже бумаги для печатающих устройств. Предложенное приложение покажет продавцу компании состояние склада, используя его WAP-телефон, и в то же время позволит ему разместить заказ для клиента. Это приложение иллюстрирует некоторые концепции в WML и то, как WML и ASP могут использоваться вместе для создания динамических WAP-приложений.

Проектирование БД

Компания поддерживает базу данных Stock.mdb, содержащую следующие таблицы: Inventory (Опись), Orders (Заказы) и Staff (Персонал). Отношения для таблиц следующие:

Таблица Inventory содержит идентификатор (SKU) изделия и его запас, а также себестоимость и продажную цену. Таблица Orders используется, чтобы фиксировать заказы, сделанные продавцом компании. Таблица Staff содержит информацию входа в систему продавца.

Запуск приложения

Чтобы проверить примеры приложения, описываемые в этой статье, вы можете использовать UP.SDK 4.0 Beta 1 WAP Phone Emulator. UP.SDK доступен для загрузки на сайте Phone.com. Чтобы протестировать приложение, используйте UP.SIMULATOR.

WAP Телефоны, поддерживающие UP.BROWSER

В настоящее время более 20 изготовителей лицензировали UP.BROWSER для своих мобильных телефонов. Среди них Motorola, Ericsson, Nokia и Toshiba. Для получения полного списка мобильных телефонов, поддерживающих UP.BROWSER, посетите http://updev.phone.com/dev/ts/up/phones.html. 

Переносимость приложения

Пример, иллюстрированный здесь, был проверен только на UP.SIMULATOR. Поскольку различные изготовители телефонов имеют слегка различное исполнение WML, приложение, написанное в WML и проверенное на одной программе просмотра, может не работать правильно в другой. Поэтому возможно, что при загрузке данных исходных текстов вам потребуется адаптировать их к некоторым иным программам просмотра.

Вход в программу

Каждому продавцу от нашей гипотетической компании PaperClip присваивается StaffID и пароль для доступа к информации склада. 

Код для входа продавца:

<% Response.ContentType = "text/vnd.wap.wml" %>
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>

<!-- Welcome Screen -->
<card id="Welcome" title="Welcome">
<p>
Welcome to PaperClip WAP Services 
<img alt="" localsrc="paperclip" src=""/>
<br/>
StaffID ? <input name="StaffID" type="text" maxlength="8" />
Password ? <input name="Password" type="password" maxlength="8" /> 
<do type="accept" label="Login">
<go href="Login.asp" method="post">
<postfield name="StaffID" value="$StaffID" />
<postfield name="Password" value="$Password" />
</go>
</do> 
</p>
</card>

Первая часть кода должна установить тип документа. Вы можете обратить внимание, что вышеупомянутый код содержит только WML-разметку за исключением первой строки:

<% Response.ContentType = "text/vnd.wap.wml" %>

Использование свойства ASP Response.ContentType гарантирует, что тип MIME установлен правильно.

<% Response.ContentType = "text/vnd.wap.wml" %>
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

Обратите внимание на изображение скрепки на экране входа в систему. Оно создано WML–тэгом

<img>.
<img alt="" localsrc="paperclip" 
src=""/>

Атрибут localsrc <img> элемента определяет список изображений, доступных телефону локально. Для полного списка доступных изображений, обратитесь к WML Language Reference, стр. 37.
Большинство элементов WML подобны HTML. Прежде, чем мы перейдем к следующему экрану, рассмотрим этот код:

<do type="accept" label="Login"> 
<go href="Login.asp" method="post"> 
<postfield name="StaffID" value="$StaffID" /> 
<postfield name="Password" value="$Password" />
</go>
</do> 

Элемент сопоставляет задачу с клавишей интерфейса пользователя телефона. Для UP.SIMULATOR:

После того, как продавец ввел свой StaffID и пароль, он нажимает на клавишу accept (Login), для подтверждения подлинности его идентификации.

Идентификация

Как только продавец введет StaffID и пароль, приложение перейдет к подтверждению его подлинности.

<template>
<do type="options" label="Search">
<go href="Search.asp" />
</do>
</template>

<!-- Login Card -->
<card id="Login" title="Login">
<p>
<%
sqlQuery = "SELECT * FROM Staff WHERE StaffID='" 
Request.Form("StaffID") & "' AND Password='" 
Request.Form("Password") & "'"
set rs = conn.Execute(SQLquery)

if rs.EOF then
Response.Write "Invalid Login"
Response.Write "<do type='accept' label='Retry'>"
Response.Write " <go href='index.asp'/>"
Response.Write "</do>"
'---override the <template> element
Response.Write "<do type='options' label=''>"
Response.Write " <go href=''/>"
Response.Write "</do>"
else
Session("StaffID") = Request.Form("StaffID") 
Session("Password") = Request.Form("Password")
Response.Write "<strong>Welcome, " & rs.Fields("Name") & "! </strong><br/>"
sqlQuery = "SELECT * FROM Inventory"
Set rs = conn.Execute(SQLquery)
%>

Если продавец не прошел идентификацию, появляется экран, показанный здесь. Заметьте, что, когда пользователь не сумел войти, элемент <template>:

<template>
<do type="options" label="Search">
<go href="Search.asp" />
</do>
</template>
заменяется на:
'---override the <template> element
Response.Write "<do type='options' label=''>"
Response.Write " <go href=''/>"
Response.Write "</do>"

Это гарантирует, что функция поиска недоступна неидентифицированному пользователю. Как только пользователь прошел регистрацию, его StaffID и пароль сохраняются в объекте session.

Относительно поддержки Cookies

В этом приложении был использован объект Session в ASP. Поскольку объект Session требует поддержки cookies на стороне клиента, предположим, что платформа, которая используется, чтобы выполнить это приложение, поддерживает cookies. В частности, при разработке приложений, которые будут развернуты в реальном мире, гарантируйте, что Ваш WAP шлюз использует поддержку cookies. UP.SIMULATOR поддерживает cookies, и, таким образом, мы можем использовать их для создания двух переменных сессии:

Session("StaffID")  = Request.Form("StaffID")
Session("Password") = Request.Form("Password")

Эти две переменные сессии могут использоваться повсюду в приложении для идентификации пользователя, который его запустит. Если платформа не поддерживает cookies, то StaffID и пароль должны передаваться от входной формы до их повторного использования при помощи методов get или post (элементы <go> и <postfield >).

Получение списка описи

Как только пользователь идентифицирован, сценарий ASP начнет генерировать список доступных изделий. Для простоты изложения ограничим число предметов в списке десятью предметами.

<anchor>
View Cart 
<go href="cart.asp" />
</anchor>
<br/>Stock List:
<select name="stockID">
<% 
while not rs.EOF 
%> 
<option value="<% =rs("SKU") %>">
<% =rs("SKU") %>-<% =rs("Name") %>(<% =rs("OnHand") %>)
$$<% =rs("CostPrice") %> - $$<% =rs("SellPrice") %>
</option>
<%
rs.MoveNext 
Wend
%>
</select>
<do type="accept" label="Order">
<go href="cart.asp" method="get">
<postfield name="SKU" value="$stockID" />
</go> 
</do>

Мы будем использовать элемент <anchor> для создания гиперсвязи просмотра содержания корзины покупок. Что касается списка предметов, доступных в таблице описи, будем использовать элементы <select> и <option>. 

В этом примере информация о товаре выводится в одну строку. На UP.SIMULATOR длинные строки переводятся на следующую строку. Однако внимательный читатель может заметить, что различные WAP - броузеры имеют различную обработку длинных строк и могут просто обрезать все избыточные символы, которые не помещаются на той же самой строке. Поэтому с самого начала рассмотрите платформу, на которой будет выполняться ваше приложение.

Ввод для функций «Заказ» и «Поиск» соответственно:

>do type="accept" label="Order"<
>go href="cart.asp" method="get"<
>postfield name="SKU" value="$stockID" /<
>/go< 
>/do<
>template<
>do type="options" label="Search"<
>go href="Search.asp" /<
>/do<
>/template<

Обратите внимание, что здесь был использован элемент < template >, чтобы отделить параметр «Поиск». Элемент template определяет связи на уровне деки и относится ко всем платам в деке.
Если пользователь щелкает на клавише Up, «фокус» переходит на ссылку View Cart.
Формат отображенного товара - SKU-Название- (Количество -Себестоимость-Цена Продажи).

Клавиша accept теперь изменена на Link. Щелчок по клавише accept покажет содержимое корзины.

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

Для добавления товара в корзину просто выберем элемент и нажмем на клавишу accept.

При добавлении товара отображается содержание корзины. Изображенный ниже код добавляет товар в корзину:

sqlQuery = "INSERT INTO Orders (StaffID, SKU, Qty, OrderDate) "
sqlQuery = sqlQuery + "Values ('" & Session("StaffID") & "','" & " 
sqlQuery = sqlQuery + "Request.QueryString("SKU") & "',1,'" & date & "')"" 
On Error Resume Next '---prevent duplicate items from crashing my program--- 
set rs = conn.Execute(sqlQuery) 
rs.Close 'Displaying the Cart Content

Следующий код показывает содержание корзины:

'---Displays the cart content---
Response.Write "<br/><strong>Cart Contents</strong>"
sqlQuery = "SELECT * FROM Orders INNER JOIN Inventory ON 
Orders.SKU=Inventory.SKU WHERE StaffID='" & 
Session("StaffID") & "'"
set rs = conn.Execute(sqlQuery)
if not rs.EOF then
Response.Write "<select name='CartItem'>"
While not rs.EOF 
Response.Write "<option value='" & rs("SKU") & "'>" & rs("SKU") & _
"-" & rs("Name") & "(" & rs("qty") & ")</option>" 
rs.MoveNext
Wend
Response.Write "</select>"
rs.Close 
%>
<do type="option" label="Qty">
<go href="EditCart.asp" method="get"> 
<postfield name="SKU" value="$CartItem" />
</go>
</do>
<%
else
%>
<br/>Cart is empty!
<do type="accept" label="Main">
<go href="login.asp" method="post"> 
<postfield name="StaffID" value="<% =Session("StaffID") %>" />
<postfield name="Password" value="<% =Session("Password") %>" />
</go>
</do>
<%
end if
%>

Заметьте, что, если тележка пуста, клавиша ACCEPT будет отображена как Main и возвратит пользователя к основной экранной странице.

В корзине две ссылки [Главная] и [Поиск], и два параметра: Delete и Qty  (чтобы изменить количество товара). Чтобы удалить товар, щелкните на клавише ACCEPT (Delete).

<template>
<do type="accept" label="Delete">
<go href="Cart.asp" method="get">
<postfield name="delete" value="$CartItem" />
</go>
</do>
</template>

Чтобы изменить количество товар, щелкните на клавише option (Qty).

<do type="option" label="Qty">
<go href="EditCart.asp" method="get"> 
<postfield name="SKU" value="$CartItem" />
</go>
</do>

Изменение количества товара в корзине

Когда пользователь нажимает на клавишу option (Qty), исполняется файл EditCart.asp.

<card id="GetQty" title="Get Qty"> 
<p>
Qty? <input name="Qty" type="text" maxlength="3" />
<do type="accept" label="Set">
<go href="EditCart.asp" method="get">
<postfield name="SKU" value="<% =Request.QueryString("SKU")%>" />
<postfield name="qty" value="$Qty" />
</go>
</do>
</p>
</card>

Чтобы изменить количество, введите число и нажмите на клавишу accept ( Set ). 

sqlQuery = "UPDATE Orders SET Qty=" & Request.QueryString("qty") & _ 
" WHERE StaffID='" & Session("StaffID") & "' AND SKU='" & _
Request.QueryString("SKU") & "'" 
set rs = conn.Execute(sqlQuery) 
'response.write sqlquery 
'---display the content of the cart--- 
Response.Redirect "cart.asp" 

После изменения количества WAP – броузер перенаправит на cart.asp, где отобразится обновленное содержание корзины.

Удаление товара из корзины

Для этого нажмите на кнопку accept (Delete).

'---check to see if this is a deletion?---
ItemToDelete = Request.QueryString("delete")
if ItemToDelete<>"" then 
'---delete an item---
sqlQuery = "DELETE FROM Orders WHERE StaffID='" & Session("StaffID")" 
sqlQuery = sqlQuery + " & "' AND SKU='" & ItemToDelete & "'"" 
set rs = conn.Execute(sqlQuery)
'rs.Close

Поиск товара

Поиск можно производить из основной страницы и со страницы корзины

Для поиска введите SKU товара и нажмите на кнопку accept (Locate).

sqlQuery = "SELECT * FROM Inventory WHERE SKU LIKE '%" & SearchStr & "%'"
Set rs = conn.Execute(SQLquery)

Response.Write "<select name='stockID'>"
While not rs.EOF
Response.Write "<option value='" & rs("SKU") & "'>" & rs("SKU") & "-" _ 
& rs("Name") & "(" & rs("OnHand") & ") $$" & rs("CostPrice") & "-$$" _ 
& rs("SellPrice") & "</option>"
rs.MoveNext
Wend
Response.Write "</select>"

Со страницы поиска можно заказать товар или перейти на главную страницу

Отладка WAP-программы

Немногие симуляторы позволяют удобно работать с отлаживаемым WAP-приложением. Однако, в UP.Simulator во все время работы открыто окно Phone Information Window.

Окно Phone Information представляет полезную информацию для WAP разработчика. В нем отображены все HTTP запросы и WML страницы, которые вы загружаете с сервера. Наиболее полезная особенность - способность показать неправильно созданную WML страницу. Пример ниже:

<% Response.ContentType = "text/vnd.wap.wml" %>
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>

<!-- Welcome Screen -->
<card id="Welcome" title="Welcome">
<p>
Welcome to PaperClip WAP Services <img alt="" localsrc="paperclip" src=""/>
<br>
StaffID ? <input name="StaffID" type="text" maxlength="8" />
Password ? <input name="Password" type="password" maxlength="8" /> 
<do type="accept" label="Login">
<go href="Login.asp" method="post">
<postfield name="StaffID" value="$StaffID" />
<postfield name="Password" value="$Password" />
</go>
</do>
</p>
</card>

Обычная ошибка - пропущено "/" после <br>. UP.Simulator отобразит такую картинку:

В окне Phone Information мы получим

======================= WML Errors =====================
WML translation failed.
(10) : error: Expected tag end(>) instead of <newline>
(10) : error: Expected </ instead of TEXT ''
(10) : error: Invalid element 'PCDATA' in content of 'br'. Expected closing tag
(10) : error: Invalid element 'input' in content of 'br'. Expected closing tag
(11) : error: Invalid element 'PCDATA' in content of 'br'. Expected closing tag
(11) : error: Invalid element 'input' in content of 'br'. Expected closing tag
(12) : error: Invalid element 'do' in content of 'br'. Expected closing tag
(18) : error: Close tag 'p' does not match start tag 'br'
(19) : error: Close tag 'card' does not match start tag 'p'
(29) : error: Close tag 'wml' does not match start tag 'card'
(29) : error: Expected the end of root element instead of end of file

======================= End Errors =====================
************************ Current WML ******************************************

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD
/wml_1.1.xml">
<wml>

<!-- Welcome Screen -->
<card id="Welcome" title="Welcome">
<p>
Welcome to PaperClip WAP Services <img alt="" localsrc="paperclip" src=""/

<br>
StaffID ? <input name="StaffID" type="text" maxlength="8" />
Password ? <input name="Password" type="password" maxlength="8" />

<do type="accept" label="Login">
<go href="Login.asp" method="post">
<postfield name="StaffID" value="$StaffID" />
<postfield name="Password" value="$Password" />
</go>
</do>
</p>
</card>
</wml>
********************************************************************************

Translation failed for content-type: text/vnd.wap.wml

----------------- DATA SIZE ------------------------
Uncompiled data from FILE is 266 bytes.
...found Content-Type: text/vnd.wap.wml.
Compiled WAP binary is 96 bytes.
----------------------------------------------------

В сообщении об ошибках мы можем видеть, что строка 10 содержит ошибку и что ожидается "/". Мы можем также просмотреть коды WML, которые посланы UP.SIMULATOR. Коды отображены в конце окна Phone Information. Еще одна интересная информация – размер неоткомпилированных и откомпилированных WAP данных.

----------------- DATA SIZE ------------------------
Uncompiled data from FILE is 266 bytes. 
...found Content-Type: text/vnd.wap.wml.
Compiled WAP binary is 96 bytes.
----------------------------------------------------

Заключение

В этой статье Вы увидели, как типичное приложение E-коммерции может быть адаптировано для WAP устройств. Очевидно , что размер экрана накладывает серьезные ограничения на разрабатываемые приложения. Однако есть и хорошие новости. Навыки программирования HTML и ASP существенно помогают при создании приложений WAP. Очевидно, в ближайшие месяцы компании будут писать две различные версии приложений для Интернет: одну для Web, а другую для WAP. Другая проблема – совместимость броузеров для WAP.Это напоминает создание страниц под Microsoft Internet Explorer и Netscape Navigator.