Подробнее о приложении 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, который позволяет приложению определить имя изначение.
