|
div.main {margin-left: 20pt; margin-right: 20pt}
Введение в WML
Цель этой статьи - представить базовые возможности 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 tasks/events. Но,
похоже, я не одинок - имеющиеся в сети материалы страдают схожими
проблемами.
Краеугольный камень WML-дизайна - колода игральных карт - набор
показываемых по отдельности карточек (экранов), хранящихся в памяти.
То есть, если для обычного сайта единицей является Web-page, то
единица WML - это т. н. deck, состоящая из одной или нескольких
card, составляющих вместе WML-документ (wml-файл).
Как только wml-файл загружен в устройство с сервера, пользователь
может листать экраны, переходить к следующему или возвращаться к
предыдущему, не ожидая загрузки с сайта, что, конечно, выгодно по
скорости.
WML колода из одной карты <wml>
<card>
<p>Welcome</p>
</card>
</wml>
Нетрудно заметить, что структура языка во многом родственна HTML:
теги <wml>...</wml> начинают и завершают документ, а
тело карт заключается в <card>...</card>.
Впрочем,
пример выше еще не вполне завершен. WML - это ветвь XML, а любой
XML-документ сначала должен пройти проверку на соответствие своему
DTD (Document Type Definition). Следовательно, в любом wml-файле,
как документе, необходимо указать полный путь к WML DTD.
В полном примере ниже DTD-ссылка указывает на сайт http://www.wapforum.org/
координирующий сегодня WAP-разработки, и это DTD описывает все
обязательные элементы стандарта WML, интерпретируемые всеми
микро-броузерами. Впрочем, если кому-то не так важно, что это такое,
и не суть важны сторонние расширения, которыми тоже можно
пользоваться на предмет правильности разметки, то можно просто
копировать эту типовую декларацию, особо не задумываясь.
WML колода из трех карт <?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="home" title="Welcome">
<p align="center">Taler's HP<br/>
<img src="logo.wbmp" alt="home"/><br/>
<do type="accept" label="next"><go href="#card1"/></do></p>
</card>
<card id="card1" title="Page 1">
<p>This is the first card.</p>
<do type="accept" label="next"><go href="#card2"/></do>
<do type="prev" label="back"><prev/></do>
</card>
<card id="card2" title="Page 2">
<p>This is the second card.</p>
<do type="accept" label="home"><go href="#home"/></do>
</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 можно условно
разделить на четыре категории: форматирование, навигация, ввод
данных и управление действиями/событиями. Далее показан ряд
конструкций языка с примерами - подчеркну, что здесь могут оказаться
не все атрибуты. За дополнительной информацией нужно обращаться к
документации.
Поскольку на экран выводится по одной карте, то в элементе
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" - название карточки, имеющее смысл, в
частности, для закладок. <anchor>List of Tales
<go href="tales.wml"/></anchor>
<anchor>Previous page<prev/></anchor>
<a href="story.wml">goto Story</a><br/>
В примере выше ссылки устанавливаются при помощи 'якоря' anchor и
традиционного тега <a>. У anchor два атрибута: "href"
определяет объект, на который мы ссылаемся, и "title" - экранная
надпись, идентифицирующая связь, которую броузер может опционально
показывать.
Элементы ввода
Безусловно, всю мощь идея переменных приобретает при возможности
что-то получить от пользователя. Для этого предусмотрен комплект
тегов ввода, достаточно близких к своим HTML аналогам:
Поле input предназначено для ввода данных пользователем
select/option - поле выбора из заранее заданного
списка.
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="false"/><br/>
Type: <select name="type" value="double" title="Type:">
<option value="single">Single CD</option>
<option value="double">Double CD</option>
</select>
</p>
</card>
<card id="add" title="Add CD">
CD: <input name="CD" size="18" type="text" /><br/>
Price: <input name="Price" size="8"/><br/>
</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= "GO"><go href="#card2"/></onevent>, мы назначим
кнопке GO переход непосредственно в меню. Вариант <do type="accept" label="Search">
<go href="table.asp?srch=$varsearch"/></do>
иллюстрирует другой вариант переназначения стандартного меню
телефона и способ передачи переменных в сервер-ориентированные
скрипты. Значение параметра 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"/>
</anchor><br/>
Для конвертирования в формат 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="center">example<br/>
<img src="GRAPH.asp" alt="problem"/><br/></p>
<do type="prev" label="prev"> <prev/> </do>
</card>
</wml>
Если вы пользуетесь имитатором, необходимо тщательно
протестировать страницы на реальном телефоне, потому что многие
имитаторы плохо поддерживают графические файлы. Желательно проверить
все в реальных условиях - это единственный способ застраховаться от
неприятностей.
Советы по разработки WML приложений
Устройства WAP ограничены по возможностям из-за памяти,
процессора, скорости передачи т. д., однако кое-что все-таки можно
делать, зная об этих ограничениях. А технологии совершенствуются, и
появляются новые улучшенные решения.
Приложения необходимо проектировать, исходя из принципа
'колоды карт'. Так как она загружается целиком, это уменьшает
обмен данными с сервером. Любой запрос на другую колоду инициирует
новое соединение с сервером, что потребует дополнительного времени
- так устроена WAP-технология.
Из-за малого размера экрана особое внимание нужно уделить
читабельности текста. Размер "страницы" лучше ограничить 4- 5-ю
экранами.
Для удобной навигации и быстрого управления предпочтительнее
теги select/option (выбор из списка), чем какие-то другие
средства.
Из-за маленькой памяти стоит избегать графики.
Не следует пренебрегать 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 http://www.bim.f2s.com/
|
