WML - Создание WAP страниц

Автор: Бешкенадзе А.Г.
Источник: softtime.ru

Введение

В последнее время огромную популярность приобретают различные беспроводные устройства доступа в Internet. Достаточно упомянуть, что 2/3 населения Российской Федерации владеют сотовыми телефонами и потенциальная аудитория посетителей Internet с мобильных устройств шире, чем обычных посетителей, пользующихся компьютерами. В отличие от классического браузера, который общается с сервером по протоколу HTTP, мобильные устройства используют протокол WAP (Wireless Application Protocol). Протокол WAP определяет набор правил, которому должны следовать как WAP-приложения, так и мобильные устройства.

В настоящий момент для создания WAP-страниц (аналог HTML-страниц для мобильных устройств) используется либо язык разметки WML (Wireless Markup Language), либо xHTML. Оба языка разметки основаны на XML и подчиняются правилам форматирования XML-документа. xHTML поддерживается не всеми сотовыми телефонами, поэтому в данной статье будет рассмотрен WML.

Здесь не будут описываться стандартные теги, особенно те которые не отличаються от тэгов, используемых при создании обычных HTML-страниц. Будет рассмотрена структура WML документа, и взаимодействие PHP-скриптов с WML.

Глава 1 "Структура WML документа"

Вся информация в WML содержится в так называемых деках. Дек — это минимальный блок данных, который может быть передан сервером. В деках находяться карты (<card>) в одной деке всегда должна быть хоть одна карта, но может быть и несколько - ограничений нет.

Простая wml страница взятая с wap.siemens.com.

<?xml version="l.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="Siemens">
<p>
<a href="http://communication-market.siemens.de/wap">Games and more</a><br/>
<a href="http://communication-market.siemens.de/wap/countries.asp?content=rtlo">Sounds and graphics</a><br/>
<a href="/content/index.php?a=a_this&amp;r=">This is Siemens</a><br/>
<a href="/content/index.php?a=a_ff_kf_kffy2004&amp;r=">Key Figures</a><br/>
<a href="/content/index.php?a=a_journal&amp;r=">Siemens Journal</a><br/>
<a href="/contact/index.php">Contact</a><br/>
<img src="http://server-uk.imrworldwide.com/cgi-bin/wapcount?" alt=""/>
</p>
</card>
</wml>

<?xml version="l.0"?> - содержит стандартную инструкцию, указывающую, что перед нами XML-документ. Этот тэг так же указывает на версию языка XML, необходимую для будующих расширений языка.

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> - объявляет тип документа — WML и адрес, по которому расположен файл с DTD. DTD (Document Type Definition) - это файл с описанием типа документа, отделённое от главного XML-документа и определяющий набор правил для XML-документа в котором стоит на него ссылка. Эти две строки предваряют собственно элементы языка и должны содержаться в каждом WML-файле.

WML - открывающий тэг, аналогичен по смыслу тегу HTML в HTML-документах.

CARD - собственно тэг начинающий карту, соответствуюет тэгу BODY в HTML-документе, но в отличие от BODY может поторяться в документе несколько раз.

Примечание

Новая строка начинается с тэга <br/>. Важно отметить, что слеш в конце тэгов, не имеющих завершающего тэга обязателен в XML документах, иначе анализатор сообщает об ошибке. Все дополнительные данные закрываються двойными ковычками (title="Hello!").

Дека - <wml></wml>

Карта - <card></card>

Пример страницы с несколькими картами:

<?xml version="l.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="card1">
<a href="#card2">Go to card2</a><br/>
</card>
<card title="card2">
<a href="#card1">Return card1</a><br/>
</card>
</wml>

Как видно ничего сложного! Однако следует помнить, что имеется ограничение на общий размер WML страницы около 5~10 кб, в зависимости от модели телефона и оператора сотовой связи. Поэтому количество карт не должно превышать разумного предела.

Глава 2 "Динамическая генерация". Конфигурирование серверов. MIME тип.

Для того, чтобы обычный Web-сервер, например, Apache, превратить в WAP-сервер, необходимо в конфигурационном файле httpd.conf отыскать секцию AddType и добавить следующую директиву

AddType text/vnd.wap.wml .wml.

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

<?php
# Отсылаем заголовок который "обьясняет" клиенту ,что это wml документ
header("Content-type: text/vnd.wap.wml");
?>

Так сформировать WML страницу при помощи PHP можно примерно следующим образом

<?php
# Отсылаем заголовок который "обьясняет" клиенту ,что это wml документ
header("Content-type: text/vnd.wap.wml");
#Выводим саму страницу
print  '
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
';
print  '
<wml>
<card id="id1" title="Card1">
Hello! People This is My first wml  page!
</card>
</wml>
';
?>

Результаты работы WML-страниц можно просматривать при помощи следующих браузеров: Opera, WinWAP, Klondike Wap Browser.

Глава 3. WML - Элементы управления форм

Эта глава является продолжением глав, посвящённых основам создания WAP-страниц при помощи языка разметки WML (Wireless Markup Language).

Для создания форм управления в WML, аналогично HTML, используется несколько специальных тэгов, соответствующих различным элементам управления:

• <input>
• <select>
• <option>

Остановимся по подробнее на каждом теге.

input

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

• name — имя переменной.
• type — по умолчанию "text", может быть так же "password".
• value — значение переменной.
• format — задает маску ввода, по умолчанию "*M" (форматы масок рассмотрим ниже).
• emptyok — устанавливает может ли поле быть пустым. Испульзеться булево значение по умолчанию emptyok="false".
• size и maxlength — задет ширину поля в символах и максимальное число символов соответственно. По умолчанию число символов не ограничено.

Спецификаторы маски

Примечание

Следует помнить, что все одиночные теги закрываются слэшем (/). Пример: <input />,<br />, <img />.

select

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

• name — имя переменной.
• value — значение переменной.
• title — заголовок списка.

Приведённый список атрибутов содержит лишь наиболее распространённые элементы.

option

Данный тэг содержит следующие атрибуты:

• value — значение переменной.
• title — заголовок списка.

Пример формы

Отправить данные из формы можно двумя путями. Первый из них продемонстрирован в листинге ниже:

<anchor>Ok
<go href="/wap/mod/guestbook/insert_db.php" method="post">
<postfield name="name" value="$(name)"/>
</go>
</anchor>

Здесь тэг <anchor> указывает текст после нажатия на которых происходит отправка данных. В отличие от тэга <a> текст не подчёркивается. Следует помнить, что такой способ отправки данных не поддерживаться старыми браузерами. Тэг <go> указывает адрес обработчика формы, которому отправляются данные (аналог form), postfield имеет следующие атрибуты: name - имя параметра, value - значение параметра, записывается ввиде $(value).

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

<do label="Ok" type="accept">
<go href="/wap/mod/guestbook/insert_db.php" method="post">
<postfield name="name" value="$(name)"/>
<postfield name="mess" value="$(mess)"/>
<postfield name="trans" value="$(trans)"/>
</go>
</do>

Здесь do указывает кнопку название которой задаётся параметром label, type - указывает тип кнопки и может принимать три значения: accetp, prev, help.

Примечание

Рекомендуется использовать оба способа отправки данных, так как часть браузеров в сотовых телефонах поддерживает только один из предложенных выше способов отправки данных.

В завершение статьи рассмотрим пример формы отправки заказа с мобильного устройства:

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd" >
<wml>
<card title="Buy Product">
name <input name="name" size="10" format="m" />
<br/>
second name <input name="sname" size="10" format="m" />
<br/>
Select Product <select name="product">
<option value="paper"> Paper </option>
<option value="pen">Pen</option>
<option value="table">Table</option>
</select>
<br/>
<anchor>Ok
<go href="product.php" method="post">
<postfield name="name" value="$(name)"/>
<postfield name="sname" value="$(sname)"/>
<postfield name="product" value="$(product)"/>
</go>
</anchor>
<br/>
<do label="Ok" type="accept">
<go href="product.php" method="post">
<postfield name="name" value="$(name)"/>
<postfield name="sname" value="$(sname)"/>
<postfield name="product" value="$(product)"/>
</go>
</do>
</card>
</wml>

Для обработки используем листинг product.php:

<?php
header("Content-type: text/vnd.wap.wml;charset=windows-1251");
echo '<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">';
echo '<wml>
<card title="Product">';
echo "Name: $name";
echo "Second Name: $sname";
echo "Select Product: $product";
echo "</card></wml>";
?>

Вот и все. Следует заметить, что некоторые теги, которые использовались нами подходят не только для отправки форм, о чём будет рассказано в следующих статьях.