Введение в WML

Авторские права Andy Taler httpwww.bim.f2s.com

Цель этой статьи - представить базовые возможности WML (Wireless Markup Language) - языка разметки для работы в Интернет беспроводных устройств (WAP), основанный на XML. Назначение WML - описание контента и пользовательского интерфейса для особого класса узкополосных устройств, типа Palm Pilot, сотовых телефонов и пейджеров.

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

Трудно ожидать, что кто-то будет подключать к сотовому телефону мышь, поэтому модель point-and-click для WAP не годится (по крайней мере, видимо так считает группа разработчиков языка), и большая роль в WML отводится другим механизмам событий. Доводы здесь те, что у пользователя должен быть шанс на управление голосом, либо еще какие-то варианты, кроме кнопочных. Экраны WAP устройств выглядят достаточно по-разному, встречаются вертикальные и горизонтальные, но объединяет их все то, что они предельно малоформатны.

Сам WML выглядит как HTML для бедных, но с чуть более жесткими требованиями к парности тегов, использованию регистра и обрамлению атрибутов кавычками. Используемые компоненты синтаксиса в WML - это символьные сущности, элементы, атрибуты, комментарии, переменные и секции CDATA.

WML скуп на возможности представления - набор поддерживаемых тегов невелик, и язык основан на нетипичной метафоре колоды карт, хотя сильных аргументов в защиту этого построения из просмотренных источников у меня не сложилось. Нельзя сказать, что особым успехом увенчались и попытки осознать до конца модель WML tasksevents. Но, похоже, я не одинок - имеющиеся в сети материалы страдают схожими проблемами.

Метафора игральных карт
Краеугольный камень WML-дизайна - колода игральных карт - набор показываемых по отдельности карточек (экранов), хранящихся в памяти. То есть, если для обычного сайта единицей является Web-page, то единица WML - это т. н. deck, состоящая из одной или нескольких card, составляющих вместе WML-документ (wml-файл).

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

WML колода из одной карты

wml
card
pWelcomep
card
wml

Нетрудно заметить, что структура языка во многом родственна HTML теги wml...wml начинают и завершают документ, а тело карт заключается в card...card.
Впрочем, пример выше еще не вполне завершен. WML - это ветвь XML, а любой XML-документ сначала должен пройти проверку на соответствие своему DTD (Document Type Definition). Следовательно, в любом wml-файле, как документе, необходимо указать полный путь к WML DTD.

В полном примере ниже DTD-ссылка указывает на сайт W@PForum, координирующий сегодня WAP-разработки, и это DTD описывает все обязательные элементы стандарта WML, интерпретируемые всеми микро-броузерами. Впрочем, если кому-то не так важно, что это такое, и не суть важны сторонние расширения, которыми тоже можно пользоваться на предмет правильности разметки, то можно просто копировать эту типовую декларацию, особо не задумываясь.

WML колода из трех карт

xml version=1.0
!DOCTYPE wml PUBLIC -WAPFORUMDTD WML 1.1EN
httpwww.wapforum.orgDTDwml_1.1.xml

wml
card id=home title=Welcome
p align=centerTaler's HPbr
img src=logo.wbmp alt=homebr
do type=accept label=nextgo href=#card1dop
card

card id=card1 title=Page 1
pThis is the first card.p
do type=accept label=nextgo href=#card2do
do type=prev label=backprevdo
card

card id=card2 title=Page 2
pThis is the second card.p
do type=accept label=homego href=#homedo
card
wml


В Web есть программы-имитаторы, с помощью которых wml-файлы можно видеть даже без реального устройства, а просто на базе имеющегося броузера. К примеру, это посредник M3Gate (Dubna, Numeric Algorithm Lab) для платформы PC-Windows (1,4mb).

Для того, чтобы все выглядело по настоящему, я реально поместил свой пример по адресу {home.wml}. И сейчас, если обратиться к этому адресу при установленном, скажем, M3Gate, вы увидите нечто, аналогичное рисунку справа.

Примечание размер загружаемых в WAP-устройства файлов ограничен - не более что-то около 1.4k (1397, 1492, .. байт - граница зависит от устройства).




Переменные
В WML есть глобальные переменные, в которых можно запоминать информацию на уровне текущего сеанса. Их присутствие в языке вызвано уменьшением обмена с сервером, и это отличается от традиций HTML.
Если присвоить в одной карте переменной $myname значение Andy, а в другой карте есть текст Welcome $myname, то он будет выведен как Welcome Andy. Простенько и со вкусом!




Основные типы тегов WML
Строительные блоки и функциональные средства WML можно условно разделить на четыре категории форматирование, навигация, ввод данных и управление действиямисобытиями. Далее показан ряд конструкций языка с примерами - подчеркну, что здесь могут оказаться не все атрибуты. За дополнительной информацией нужно обращаться к документации.

Форматирование
Поскольку на экран выводится по одной карте, то в элементе card предусмотрен атрибут id - внутренний идентификатор для переходов, а также видимый на экране заголовок title. Для форматирования текста, почти аналогично HTML, используются такие элементы, как



p для параграфов, В p можно указывать атрибуты align и mode. align принимает значения right, center или left, а mode задает, будет ли текст на экране с авто-переносом (wrap) или нет (nowrap).
em и I - для выделения курсивом,
strong - для полужирного начертания.
u - для подчеркивания,
big - для текста большего размера
small - для текста маленького размера.
table для таблиц, с привычными tr и td
br - для перехода на новую строку,
img для графики.





Навигация
Для навигации и установки гиперссылок предусмотрены теги

anchor
и a


Семантика a повторяет HTML, а в элементе anchor используется либо подэлемент go с атрибутом href, задающим адрес ссылки, либо prev - вернуться к предыдущему экрану.

Вызвав страницу, мы получаем первую карточку. Чтобы перейти к следующей, необходимо как-то адресоваться к картам, для чего служит id тега card - уникальный идентификатор карты. Обратите внимание также на title - название карточки, имеющее смысл, в частности, для закладок.

anchorList of Tales
go href=tales.wmlanchor

anchorPrevious pageprevanchor

a href=story.wmlgoto Storyabr

В примере выше ссылки устанавливаются при помощи 'якоря' anchor и традиционного тега a. У anchor два атрибута href определяет объект, на который мы ссылаемся, и title - экранная надпись, идентифицирующая связь, которую броузер может опционально показывать.

Элементы ввода
Безусловно, всю мощь идея переменных приобретает при возможности что-то получить от пользователя. Для этого предусмотрен комплект тегов ввода, достаточно близких к своим HTML аналогам

Поле input предназначено для ввода данных пользователем
selectoption - поле выбора из заранее заданного списка.
postfield - аналог скрытых input в HTML-формах. На самом деле, это даже более мощная вещь, так как имея переменные, в postfields сейчас можно собирать и перегруппировывать информацию.
Атрибуты name тегов input и select хранятся как переменные на всем пространстве колоды и выступают параметрами в переходах по go и a. Посредством других атрибутов input, типа type, format и maxlength, можно управлять форматным вводом. Пользуясь тегом fieldset, можно задавать некоторые стили оформления.

Пример input и select

wml
card id=search title=search
p align=left
CD input name=band title=JazzBand size=18
value=Rolling Stones emptyok=falsebr
Type select name=type value=double title=Type
option value=singleSingle CDoption
option value=doubleDouble CDoption
select
p
card

card id=add title=Add CD
CD input name=CD size=18 type=text br
Price input name=Price size=8br
card
wml

Здесь атрибут name - имя переменной, куда заносится значение, type - тип формы (текст или число), value - значение по умолчанию (до ввода), a emptyok показывает, допустима ли в качестве значения пустая строка.

Управление действиями
Действия (tasks, do) используются для структур типа меню и для описания отдельных действий, например, для выбора новой картыссылки. Типовые исполнительные теги действий - это go, prev, refresh (перечитать текущую карту) или noop (ничего не делать). Действия на уровне конкретной карты описываются в тегах do, а на уровне всей колоды - в элементе template.

При помощи тега timer и атрибута ontimer тега card можно, например, на время 'заморозить' страницу. На практике часто применяется ontimer=url, говорящий, что некое время карта должна отображаться, а затем должен загрузиться ресурс с адреса url. Время в value выражается в 0,1 сек.

wml
card id=variable title=Variable ontimer=WMLScript.wml
timer value=5
p align=left Wait for 5 seconds ... p
card

!-- Card and deck linking --
card id=input1 title=Input
do type=Next input properties
go href=#input2 do
do type=Task properties
go href=Task.wml do
...
card
wml

Согласно WML-спецификации, у элементов do должны быть уникальные name, но если какое-либо из имен опущено, то подразумевается, что оно берется из type. В таких случаях различные элементы do легко могут начать пересекаться по именам, что может стать источником трудно диагностируемых ошибок.

do type=accept name=yeah label=Menu
go href=Menu.asp#menu
do
do type=accept name=blah label=Back
prev
do

В WML есть также возможность назначать клавиши навигации. Тег onevent type=buttonдействиеonevent позволяет приписать к одной из кнопок телефона (зависит от модели) пользовательское событие. В качестве действия обычно используется go href=url. Так, добавив к карте строку onevent type= GOgo href=#card2onevent, мы назначим кнопке GO переход непосредственно в меню. Вариант

do type=accept label=Search
go href=table.aspsrch=$varsearchdo

иллюстрирует другой вариант переназначения стандартного меню телефона и способ передачи переменных в сервер-ориентированные скрипты. Значение параметра type показывает, какая именно клавиша будет переопределена (в данном случае кнопка, соответствующая OK). Префикс $ перед именем переменной говорит о том, что будет использовано значение переменной, а не само слово varsearch.

Графика
В настоящее время в WML поддерживается графический формат, называемый WBMP (Wireless BMP type 0) - монохромные (двуцветные) изображения. Формат WBMP type 0 имеет следующие характеристики

No compression
One bit color (white=1, black=0)
One bit color deep (monochrome)
Для вставки в wml картинки предназначен тег img , где, как в HTML, для ссылки на источник картинки используется атрибут src. Типичные параметры img

img alt= src=url localsrc=icon
align= height= width= vspace= hspace= .

Назначение атрибутов большей частью очевидно. Пояснения требует лишь localsrc, позволяя, как замену src, указать в качестве источника внутреннюю пиктограмму броузера. Атрибут align задает выравнивание картинки с опциями top, bottom и middle.

WBMP в качестве ссылки

anchor title=Home
img alt=Home src=url localsrc=house Home
go href=default.wml
anchorbr

Для конвертирования в формат WBMP лучше всего выбирать маленькие контрастные изображения.

Максимальный размер картинки в байтах зависит от устройства, но не должен превышать ограничений на размер карты (как упоминалось выше, около 1,4k). Соответственно, предельный размер в пикселах для, скажем, Nokia 7110 составляет около 96 x 65 (width, height), хотя физический экран (без скроллинга) еще меньше и ограничен 96 x 44 (4 строки по 11 пикселов), а к примеру, для Ericsson R320 - 101x52 (строка в 13 пикселов). Следует учитывать, что пикселы отдельных устройств не всегда квадратные.

Список ресурсов для работы с WBMP можно найти, например, здесь.



Небольшой плагин UnWired plug-in фирмы RCP Distributed Systems. Позволяет сохранять в виде WBMP рисунки из Photoshop 5.x или Paintshop Pro на платформе Windows (в команде меню Save As появится пункт UnWired.wbmp).
Q Why doesn't the UnWired filter appear in the Filters menu
A The plug-in is NOT a filter. It is a File Format plug-in. You will then be able to save any two colour bitmap image as a UnWired wbmp file.
Wapaint.dll (от Wapaint.com) - ActiveX Server module, предназначенный для работы в ASP-скриптах на сервере и удобный для генерации динамических картинок (типа статистических диаграмм и пр.).
Присмотритесь также к редактору изображений из Nokia SDK.


WML для вызова динам. картинок через ASP и Wapaint.dll

wml
card id=home title=example
REM GRAPH.asp is the image to construct

p align=centerexamplebr
img src=GRAPH.asp alt=problembrp

do type=prev label=prev prev do
card
wml

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

Советы по разработки WML приложений
Устройства WAP ограничены по возможностям из-за памяти, процессора, скорости передачи т. д., однако кое-что все-таки можно делать, зная об этих ограничениях. А технологии совершенствуются, и появляются новые улучшенные решения.



Приложения необходимо проектировать, исходя из принципа 'колоды карт'. Так как она загружается целиком, это уменьшает обмен данными с сервером. Любой запрос на другую колоду инициирует новое соединение с сервером, что потребует дополнительного времени - так устроена WAP-технология.
Из-за малого размера экрана особое внимание нужно уделить читабельности текста. Размер страницы лучше ограничить 4- 5-ю экранами.
Для удобной навигации и быстрого управления предпочтительнее теги selectoption (выбор из списка), чем какие-то другие средства.
Из-за маленькой памяти стоит избегать графики.
Не следует пренебрегать alt для изображений (альтернативный текст для случаев, когда броузер не поддерживает картинок) - если среди Internet-броузеров отсутствие такой поддержки является анахронизмом, то в WAP это распространенное явление.
WAP стандарты не фиксируют соглашений о навигации, типа back, forward и home, как это принято в Internet-броузерах. Проработка этих вопросов остается на усмотрение дизайнера.


Вместо заключения в настоящее время в поисковой системе Pinpoint.com , предназначенной для индексирования сайтов с использованием WML, уже более 1,5 миллионов веб-страниц.

За полным описанием последней спецификации на WML можно обратиться на W@PForum [текущая версия Feb 2000 WML 1.3 в pdf-формате, 531k].

Сссылки
[1] WAP будущее или настоящее Б. Вакулюк, Компьютерное обозрение #9, 8 - 14 марта 2000
[2] Mobile commerce and WML by Kimmo Rytkonen, July 2000
[3] Demystifying WML by V. Vaswani, H. Melonfire, 5 July 2000

Авторские права Andy Taler httpwww.bim.f2s.com