Логин:   Пароль:






Новости
Рассылки
Форум
Поиск


Java
- Апплеты
- Вопрос-ответ
- Классы
- Примеры
- Руководства
- Статьи
- IDE
- Словарь терминов
- Скачать

Мобильная Java
- Игры
- Примеры
- Статьи
- WAP, WML и пр.

JavaScript
- Вопрос-ответ
- Примеры
- Статьи

Веб-мастеринг
- HTML
- CSS
- SSI

Разминка для ума
Проекты
Книги
Ссылки
Программы
Юмор :)




Rambler's Top100
Rambler's Top100

Мобильная Java: WAP, WML и прочееВведение в WML. Часть 1

Введение в WML. Часть 1

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

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

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

WAP device

Сам 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

Строительные блоки и функциональные средства 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)
Siblings

Для вставки в wml картинки предназначен тег <img />, где, как в HTML, для ссылки на источник картинки используется атрибут "src". Типичные параметры img:

<img alt=  src="url"  localsrc="icon" 
  align=  height=  width=  vspace=  hspace= />.

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

<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


Оригинал статьи был опубликована 10 июля 2000г. на сайте http://www.bim.f2s.com/
Автор:  A. Taler.




Warning: mysql_connect() [function.mysql-connect]: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) in /pub/home/javaport/javaportal/books/show2b.php on line 11

Warning: mysql_db_query() [function.mysql-db-query]: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) in /pub/home/javaport/javaportal/books/show2b.php on line 19

Warning: mysql_db_query() [function.mysql-db-query]: A link to the server could not be established in /pub/home/javaport/javaportal/books/show2b.php on line 19

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /pub/home/javaport/javaportal/books/show2b.php on line 30
Узнай о чем ты на самом деле сейчас думаешь тут.


[an error occurred while processing this directive]



Warning: mysql_connect() [function.mysql-connect]: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) in /pub/home/javaport/javaportal/news/worldnews.php on line 91

Warning: mysql_db_query() [function.mysql-db-query]: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) in /pub/home/javaport/javaportal/news/worldnews.php on line 93

Warning: mysql_db_query() [function.mysql-db-query]: A link to the server could not be established in /pub/home/javaport/javaportal/news/worldnews.php on line 93

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /pub/home/javaport/javaportal/news/worldnews.php on line 95