Подробнее о приложении Catalogltem.hdml
Подробнее о приложении Catalogltem.hdml
Как и приложение формата WML, файл Catalogltem.hdml позволяет пользователюввести со своего сотового телефона номер и описание выбранного им товара.Файл Catalogltem.hdml имеет исходный код, приведенный ниже:
<HDML Version=3.0 Markable=True TTL=0>
<Choice Name=OrderItem Method=Alpha>
<Action Type=Accept Label=Edit> <Action Type=Soft1 Label=Next Task=GO Dest=CatalogShip.hdml>
<Center>Catalog Order <Line>Item information
<CE Task=GOSub Dest=#GetItemNum Vars=ItemNum=$ItemNum Receive=ItemNum> Item #:[$ItemNum]
<CE Task=GOSub Dest=#GetItemDesc Vars=ItemDesc=$ItemDesc Receive=ItemDesc> Item:[$ItemDesc]
</Choice>
<Entry Name=GetItemNum Default=$ItemNum Key=ItemNum Format=N4N>
<Action Type=Accept Task=Return Retvals=$ItemNum> Item #:
</Entry>
<Entry Name=GetItemDesc Default=$ItemDesc Key=ItemDesc Format=M14M>
<Action Type=Accept Task=Return Retvals=$ItemDesc> Item:
</Entry>
</HDML>
Первый элемент внутри деки сообщает браузеру (или другим программистам),какая версия языка HDML используется приложением. Далее, выражение Markable=True сообщает, что браузер может установить закладку в исходной деке, аTTL=O сообщает ему о невозможности кэширования (таким образом, браузердолжен перезагружать эту деку каждый раз при обращении к нему пользователя).Далее приложение использует элементы <Action> для управления кнопками Edit(Редактировать) и Next (Следующий).
Сначала карта использует элемент <choice> для предоставления пользователювыбора того, что он желает редактировать: номер товара или его описание. Далее, основываясь на выборе пользователя, приложение передает управлениеэлементу GetltemNum или GetltemDesc для обеспечения ввода данных. Здесь используется поле format для определения формата вводимых пользователем значений переменных.
К примеру, в элементе GetltemNum определяется формат N4N.Этот формат предусматривает ввод от одного до пяти числовых символов номератовара (N4N означает, что один числовой символ обязателен, остальные четыре -по необходимости)
После ввода пользователем номера и описания товара, приложение загружаетдеку CatalogShip.hdml, которая имеет следующий исходный код:
Shipping information
Ship to:[$ShipName]
Address:[$ShipAddr1]
Address:[$ShipAddr2]
City:[$ShipCity]
State:[$ShipState]
Zip Code:[$ShipZip]
Phone:[$ShipPhone]
Ship to:
Address:
Address:
City:
State:
Zip Code:
Phone:
Для предоставления пользователю возможности выбора желаемого адресногополя приложение использует элемент <Choice>. Основываясь на выборе пользовaтеля, приложение передает управление именованному элементу <Entry> внутри деки, который предлагает ввести данные в определенном формате. Послеввода пользователем адреса отправки, приложение загружает декуCatalogBill.hdml, в которой предлагается ввести адрес для выписывания счета.Как вы понимаете, содержимое этой деки практически идентично содермимомуподобной деки, описанной ранее в этой главе.
После ввода информации по счету, приложение вызывает деку CatalogCredit.hdml,в которой пользователю предлагается ввести информацию по его кредитнойкарте. Содержимое этой деки приведено ниже:
Как и в других деках, в CatalogCredit.hdml используются элементы <Action> дляуправления кнопками Edit (Редактировать) и Next (Следующий). Далее, в исходном коде следует элемент <Choice> для предоставления пользователю возможности редактирования поля типа кредитной карты либо поля ее номера. Основываясь на выборе пользователя, приложение передает управление именованомуэлементу внутри деки, который предлагает пользователю ввести данные в определенном формате.
После ввода пользователем информации о кредитной карте приложение загружает файл CatalogDone.hdml, из которого запускается сценарий языка PerlCatalogOrderHDML.pl.
Этому сценарию передаются параметры, как показано ниже:
<HDML Version=3.0 Markable=True TTL=0>
<Display Name=CatalogDone>
<Action Type=Soft1 Label=Reset Task=GO Dest=CatalogItem.hdml> <Action Type=Accept Label=Order Task=GO Method=Post PostData=$ItemNum&$ItemDesc:noesc&$ShipName: noesc&$ShipAddr1:noesc&ShipAddr2:noesc&$ShipCity: noesc&$ShipState&ShipZip&$ShipPhone&$BillName: noesc&$BillAddr1:noesc&$BillAddr2:noesc&$BillCity: noesc&$BillState&$BillZip&$BillPhone&$CartType: noesc&$CardNum Dest=../waplibcgi/CatalogOrderHDML.pl>
<br>Order form complete
</Display>
</HDML>
Как видите, в нашем случае используется единственое поле postdata, и параметры разделяются с помощью символа «амперсанд» (&).
Подробнее о приложении CatalogOrder
Подробнее о приложении CatalogOrder
Когда пользователь запускает приложение CatalogOrder, дека Catalogltem.wmlпредлагает ему ввести номер товара и его характеристики. После того как этаинформация будет введена, загружается другая дека (CatalogShip.wml) для получения информации об адресе отправки. Дека Catalogltem.wml имеет следующийисходный код:
<?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" forua="true"/>
</head>
<card id="OrderItem">
<do type="accept" label="Edit"> <noop /> </do>
<do type="options" label="Next"> <go href="CatalogShip.wml" /> </do>
<p align="center">
Catalog Order
</p>
<p align="left" mode="nowrap">
Item information
<select>
<option onpick="#GetItemNum">Item#: $(ItemNum)</option> <option onpick="#GetItemDesc">Item: $(ItemDesc)</option>
</select>
</p>
</card>
<card id="GetItemNum">
<do type="accept"> <go href="#OrderItem" /> </do>
<p align="left">
Item #: <input name="ItemNum" maxlength="5" format="N4N" />
</p>
</card>
<card id="GetItemDesc">
<do type="accept"> <go href="#OrderItem" /> </do>
<p align="left">
Item: <input name="ItemDesc" maxlength="15" format="M14M" />
</p>
</card>
</wml>
Так же как и во всех деках формата WML, первые два ее элемента сообщают браузеру, какую из версий спецификации WAP поддерживает данное приложение. Внашем случае WML-страница поддерживает версию 1.0 языка XML и версию 1.1описания типа документа (DTD), разработанного ассоциацией WAP Forum.
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
Далее, за информацией о версиях, каждый WML-файл начинается с тега <wml>. Вконце каждого файла вводят </wml>, что означает окончание исходного кодаприложения. За <wml> следуют теги <head> и </head>, внутри которых находитсяинформация о самом исходном коде, включая метаданные и информацию обуправлении доступом. Многие программисты называют метаданные «данными оданных». Другими словами, в этом случае метаданные, которые считывает и обрабатывает браузер, сообщают ему, как трактовать данные.
<head>
<meta http-equiv="Cache-Control" content="max-age=0" forua="true"/>
</head>
Элемент <meta> позволяет точно определить метаинформацию для исходногофайла. В нашем случае строка http-eguiv="Cache-Control" сообщает браузеруWAP, что эта часть метаинформации используется системой кэширования памяти. Аналогично, строка content=max-age=0 сообщает браузеру, что максимальноевремя, в течение которого будет кэшироваться этот файл, равно нулю секунд;значит, браузер не будет кэшировать данные, а загружать данные с сервера каждый раз, когда они будут запрошены. Для этой книги значение нуля было выбрано для содействия процессу обучения читателя. При выборе нуля каждый раз,когда будут происходить изменения, они будут передаваться на телефон. В реальном приложении статическое меню, подобное этому, можно использовать поумолчанию в течение 30 дней. Последняя строка forua="true" определяет, чтозначение Cache-Control предназначено для телефона и не может быть измененокаким-либо промежуточным агентом.
Приложение использует две переменные (itemNum и itemDesc) для хранениявведеных пользователем данных. После запуска приложения в карте используются два элемента <do>. Один из них служит для преобразования надписи кнопкиподтверждения ввода Accept (Принять) из ОК по умолчанию в Edit (Редактировать) на время, пока на дисплеее отображаются выбранные опции. Второй элемент <do> используется для обработки нажатия кнопки Next (Далее). :
Когда пользователь нажимает кнопку Next (Далее), приложение дает браузерууказание загрузить деку CatalogShip.wml, которая предлагает пользователю ввестиинформацию об адресе отправления товара.
Далее в карте используются элемент <select> для предоставления пользователювозможности выбрать и редактировать номер товара или его описание:
<select>
<option onpick="#GetItemNum">Item#: $(ItemNum)</option> <option onpick="#GetItemDesc">Item: $(ItemDesc)</option>
</select>
Внутри элемента <select> знак фунта (#), предшествующий первым двум опциямговорит о том, что каждая из карт, например #GetltemNum, находится внутри текущей деки формата WML. Когда пользователь производит выбор одной из опций, приложение передает управление соответствующей карте.
Внутри каждой из карт приложение использует элемент <input> для предоставления пользователю возможности ввода необходимой .информации. Если выпроанализируете этот элемент, вы увидите, что поле format определяет форматсоответствующих данных. Например, <input> в карте GetltemNum используетформат N4N для ограничения ввода пользователем от одного до пяти числовыхсимволов (N4N означает, что один числовой символ обязателен, остальные четыре-по необходимости).
После ввода пользователем номера товара и его описания приложение загружаетдеку CatalogShip.wml, исходный код которой приведен ниже:
<?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" forua="true"/>
</head>
<card id="OrderShip">
<do type="accept" label="Edit"> <noop /> </do>
<do type="options" label="Next"> <go href="CatalogBill.wml" /> </do>
<p align="left" mode="nowrap">
Shipping information
<select>
<option onpick="#GetShipName"& gtShip to: $(ShipName)</option> <option onpick="#GetShipAddr1">Address: $(ShipAddr1)</option> <option onpick="#GetShipAddr2">Address: $(ShipAddr2)</option> <option onpick="#GetShipCity">City: $(ShipCity)</option> <option onpick="#GetShipState">State: $(ShipState)</option> <option onpick="#GetShipZip">Zip Code: $(ShipZip)</option> <option onpick="#GetShipPhone">Phone: $(ShipPhone)</option>
</select>
</p>
</card>
<card id="GetShipName">
<do type="accept"> <go href="#OrderShip" /> </do>
<p align="left">
Ship to: <input name="ShipName" maxlength="15" format="M14M" />
</p>
</card>
<card id="GetShipAddr1">
<do type="accept"> <go href="#OrderShip" /> </do>
<p align="left">
Address: <input name="ShipAddr1" maxlength="20" format="M19M" />
</p>
</card>
<card id="GetShipAddr2">
<do type="accept"> <go href="#OrderShip" /> </do>
<p align="left">
Address: <input name="ShipAddr2" maxlength="20" format="M19M" />
</p>
</card>
<card id="GetShipCity">
<do type="accept"> <go href="#OrderShip" /> </do>
<p align="left">
City: <input name="ShipCity" maxlength="15" format="M14M" />
</p>
</card>
<card id="GetShipState">
<do type="accept"> <go href="#OrderShip" /> </do>
<p align="left">
State: <input name="ShipState" maxlength="2" format="AA" />
</p>
</card>
<card id="GetShipZip">
<do type="accept"> <go href="#OrderShip" /> </do>
<p align="left">
Zip Code: <input name="ShipZip" maxlength="5" format="5N" />
</p>
</card>
<card id="GetShipPhone">
<do type="accept"> <go href="#OrderShip" /> </do>
<p align="left">
Phone: <input name="ShipPhone" maxlength="14" format="(NNN)-NNN-NNNN" />
</p>
</card>
</wml>
Дека CatalogShip.wml не сильно отличается от деки Catalogltem.wml, за исключением того, что в ней используется немногим больше карт, которые увеличивают
размер исходного кода внутри элемента <select>. Каждый раз, когда пользователь производит ввод, например названия города, приложение передает управление определенной локальной карте.
В пределах локальной карты используютсяэлемент <input> для получения данных от пользователя.
После ввода пользователем адреса отправки товара, приложение загружает декуCatalogBill.wml, содержимое которой очень похоже на содержимое описаннойвыше деки. Далее приложение загружает деку CatalogCredit.wml для полученияинформации о кредитной карте пользователя. Исходный код декиCatalogCredit.wml приведен ниже:
<?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" forua="true"/>
</head>
<card id="CatalogCredit">
<do type="accept" label="Edit"> <noop /> </do>
<do type="options" label="Next"> <go href="CatalogDone.wml" /> </do>
<p align="left" mode="nowrap">
Credit Card
<select>
<option onpick="#GetCardType">Card: $(CardType)</option> <option onpick="#GetCardNum">Number: $(CardNum)</option>
</select>
</p>
</card>
<card id="GetCardType">
<do type="accept"> <go href="#CatalogCredit" /> </do>
<p align="left" mode="nowrap">
<select name="CardType">
<option value="AmEx">American Express</option> <option value="Discover">Discover</option> <option value="MasterCard">Master Card</option> <option value="Visa">Visa</option>
</select>
</p>
</card>
<card id="GetCardNum">
<do type="accept"> <go href="#CatalogCredit" /> </do>
<p align="left">
Number: <input name="CardNum" maxlength="19" format="NNNN-NNNN-NNNN-NNNN" />
</p>
</card>
</wml>
Дека использует элемент <select> для предоставления пользователю возможности выбрать тип его кредитной карты или номер кредитной карты. Если пользователь желает определить тип его кредитной карточки, приложение обращаетсяк локальной карте GetCardType, которая использует <select> для отображениясписка кредитных карт. Аналогично, если выбран ввод номера карточки, приложение обращается к локальной карте GetCardNum, в которой используется элемент <input> для предоставления пользователю возможности ввода номера кредитной карточки. Заметьте, что в элементе <input> присутствует поле format.Использованием тире в поле формата приложение позволяет пользователю вводить номер карточки только стандартным способом. Для упрощения исходногокода в деке не предлагается вводить дату истечения срока действия кредитнойкарточки. Однако реализовать это можно точно так же, как в карте GetCardNum, стем лишь исключением, что формат вводимой информации в элементе <input>должен иметь вид NN-NN.
После определения пользователем информации о кредитной карте приложениезагружает деку CatalogDone.wml, которая передает информацию о сделанном заказе сценарию языка Perl для обработки. Дека CatalogDone.wml имеет следующийисходный код: <?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" forua="true"/>
</head>
<card id="CatalogDone">
<do type="options" label="Reset"> <go href="CatalogItem.wml" /> </do>
<do type="accept" label="Order">
<go method="post" href="../waplibcgi/CatalogOrderWML.pl"> <postfield name="ItemNum" value="$(ItemNum)&"/> <postfield name="ItemDesc" value="$(ItemDesc)&"/> <postfield name="ShipName" value="$(ShipName)&"/> <postfield name="ShipAddr1" value="$(ShipAddr1)&"/> <postfield name="ShipAddr2" value="$(ShipAddr2)&"/> <postfield name="ShipCity" value="$(ShipCity)&"/> <postfield name="ShipState" value="$(ShipState)&"/> <postfield name="ShipPhone" value="$(ShipPhone)&"/> <postfield name="BillName" value="$(BillName)&"/> <postfield name="BillAddr1" value="$(BillAddr1)&"/> <postfield name="BillAddr2" value="$(BillAddr2)&"/> <postfield name="BillCity" value="$(BillCity)&"/> <postfield name="BillState" value="$(BillState)&"/> <postfield name="BillPhone" value="$(BillPhone)&"/> <postfield name="CardType" value="$(CardType)&"/> <postfield name="CardNum" value="$(CardNum)"/> </go>
</do>
<p align="left" mode="nowrap">
Order form complete
</p>
</card>
</wml>
Для запуска сценария CatalogOrderWML.pl приложение использует элемент <до> с методом POST. Как вы видите, для передачи параметров сценарию используется элемент postfield, который позволяет приложению определить имя изначение.
Подробнее о сценарии языка Perl CatalogOrderHDML.pl
Подробнее о сценарии языка Perl CatalogOrderHDML.pl
Как и приложение формата WML, приложение формата HDML использует сценарий языка Perl для анализа введенной информации о заказе. Эту информациюсценарий получает из деки CatalogDone.hdml. После того, как будут проанализированы полученные данные, сценарий создает исходный код формата HDML,отображающий информацию о заказе. Исходный код сценарияCatalogOrderHDML.pl приведен ниже:
#!/usr/bin/perl
read (STDIN, $Buffer, $ENV{'CONTENT_LENGTH'});
@data = split(/&/, $Buffer);
$ItemNum = $data[0]; $ItemDesc = $data[1]; $ShipName = $data[2]; $ShipAddr1 = $data[3]; $ShipAddr2 = $data[4]; $ShipCity = $data[5]; $ShipState = $data[6]; $ShipZip = $data[7]; $ShipPhone = $data[8]; $BillName = $data[9]; $BillAddr1 = $data[10]; $BillAddr2 = $data[11]; $BillCity = $data[12]; $BillState = $data[13]; $BillZip = $data[14]; $BillPhone = $data[15]; $CardType = $data[16]; $CardNum = $data[17];
#Do processing here...
$Deck = "Content-type: text/x-hdml
<HDML Version=3.0 Markable=True TTL=0>
<Display>
<Action Type=Accept Task=GO Dest=../CatalogOrder/CatalogItem.hdml>
Input data:<br><br>
\$ItemNum<br> \$ItemDesc<br><br> \$ShipName<br> \$ShipAddr1<br> \$ShipAddr2<br> \$ShipCity<br> \$ShipState<br> \$ShipZip<br> \$ShipPhone<br> \$BillName<br> \$BillAddr1<br> \$BillAddr2<br> \$BillCity<br> \$BillState<br> \$BillZip<br> \$BillPhone<br> \$CardType<br> \$CardNum
</Display>
</HDML>";
print $Deck;
Для проведения анализа данных, полученных с использованием функции $ENV,сценарий считывает всю информацию о переданных параметрах в переменную$Buffer. Далее, используя функцию разделения split (), переписывает параметры в массив (помните, что дека формата HDML поместила между параметрамисимвол &, который функция разделения использует для распознавания каждогоотдельного параметра). После этого значения элементов массива просто присваиваются соответствующим переменным. Строка внутри сценария, котораягласит Do processing here (Здесь происходит обработка) представляет область,где вы должны поместить исходный код для взаимодействия с существующимиприложениями для электронной коммерции вашей компании.
Подробнее о сценарии языка Perl CatalogOrderWML.pl
Подробнее о сценарии языка Perl CatalogOrderWML.pl
В реальном приложении сценарий языка Perl CatalogOrderWML.pl должен инициировать серию операций, таких, как подтверждение действительности номеракредитной карты, проверка списка базы данных (чтобы убедиться, что товардоступен), размещение текущего заказа в базе данных компании и так далее. Другими словами, сценарий должен взаимодействовать со средствами электроннойкоммерции компании. Таким образом, для большинства компаний создание подобного приложения, поддерживающего протокол WAP, заключается просто впостроении основанной на WML интерфейсной части для своего программногообеспечения электронной коммерции.
Сценарий CatalogOrderWML.pl просто анализирует переданные ему приложениемдля электронной коммерции параметры, создает новую деку формата WML, которую браузер использует для отображения транзакции. Исходный код сценарияCatalogOrderWML.pl приведен ниже:
#!/usr/bin/perl
require 'DeckUtils.pl';
%cgiVars = &AppUtils::ParseCGIVars();
$ItemNum = $cgiVars{"ItemNum"}; $ItemDesc = $cgiVars{"ItemDesc"}; $ShipName = $cgiVars{"ShipName"}; $ShipAddr1 = $cgiVars{"ShipAddr1"}; $ShipAddr2 = $cgiVars{"ShipAddr2"}; $ShipCity = $cgiVars{"ShipCity"}; $ShipState = $cgiVars{"ShipState"}; $ShipZip = $cgiVars{"ShipZip"};; $ShipPhone = $cgiVars{"ShipPhone"}; $BillName = $cgiVars{"BillName"}; $BillAddr1 = $cgiVars{"BillAddr1"}; $BillAddr2 = $cgiVars{"BillAddr2"}; $BillCity = $cgiVars{"BillCity"}; $BillState = $cgiVars{"BillState"}; $BillZip = $cgiVars{"BillZip"}; $BillPhone = $cgiVars{"BillPhone"}; $CardType = $cgiVars{"CardType"}; $CardNum = $cgiVars{"CardNum"};
#Do processing here...
$Deck = "Content-type: 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>
<head>
<meta http-equiv=\"Cache-Control\" content=\"max-age=0\" forua=\"true\"/>
</head>
<card>
<do type=\"accept\"> <go href=\"../CatalogOrder/CatalogItem.wml\" /> </do>
<p align=\"left\" mode=\"nowrap\">
Input data:<br/><br/>
\$ItemNum<br/> \$ItemDesc<br/> \$ShipName<br/> \$ShipAddr1<br/> \$ShipAddr2<br/> \$ShipCity<br/> \$ShipState<br/> \$ShipZip<br/> \$ShipPhone<br/> \$BillName<br/> \$BillAddr1<br/> \$BillAddr2<br/> \$BillCity<br/> \$BillState<br/> \$BillZip<br/> \$BillPhone<br/> \$CardType<br/> \$CardNum
</p>
</card>
</wml>";
print $Deck;
Первая строка сценария представляет собой комментарий, сообщающий интерпретатору командной строки, где находится интерпретатор языка Perl. Втораястрока сообщает интерпретатору языка, что сценарий использует в своей работедругой сценарий языка Perl DeckUtils.pl, в котором определены процедуры дляанализа параметров. После анализа параметров сценарий создает и печатаетпростую деку формата WML, перехватывая которую браузер отображает итоговуюинформацию по сделанному заказу. Как минимум, сценарий должен проверить,введены ли пользователем имя, адрес, номер товара, номер кредитной карты итак далее. Для выполнения этих действий он просто проверяет переменные наналичие нулевого значения, и если значение какой-либо из переменных равнонулю, передает управление обратно соответствующей карте, открывая и выводядеку формата WML:
Приглашение к вводу адресадля отправки товара
Рисунок 15.2. Приглашение к вводу адресадля отправки товара
Приглашение к вводу данныхкредитной карты
Рисунок 15.3. Приглашение к вводу данныхкредитной карты
Приглашение к вводу номератовара и его описания
Рисунок 15.1. Приглашение к вводу номератовара и его описания
