Форум АНТИЧАТ - WML (Wireless Markup Language)

Цель этой статьи - представить возможности WML (Wireless Markup Language) - языка разметки для работы в Интернет беспроводных устройств (WAP), основанный на XML. Назначение WML - описание контента и пользовательского интерфейса для особого класса узкополосных устройств, типа Palm Pilot, сотовых телефонов и пейджеров.
WML специально "заточен" (и продолжает "затачиваться") с ориентацией на ограничения подобных устройств, а именно: малоформатный экран, узкую полосу пропускания канала связи, малую собственную память и ограничения на "вычислительные" способности. По этой причине, и из-за острой нужды в стандартизации, в языке "визуальной разметки" для WAP устройств свое законное место заняла идея хорошо структурированных данных - WML наследует синтаксис XML.
Трудно ожидать, что кто-то будет подключать к сотовому телефону мышь, поэтому модель "point-and-click" для WAP не годится (по крайней мере, видимо так считает группа разработчиков языка), и большая роль в WML отводится другим механизмам событий. Доводы здесь те, что у пользователя должен быть шанс на управление голосом, либо еще какие-то варианты, кроме кнопочных. Экраны WAP устройств выглядят достаточно по-разному, встречаются вертикальные и горизонтальные, но объединяет их все то, что они предельно малоформатны.
Сам WML выглядит как "HTML для бедных", но с чуть более жесткими требованиями к парности тегов, использованию регистра и обрамлению атрибутов кавычками. Используемые компоненты синтаксиса в WML - это символьные сущности, элементы, атрибуты, комментарии, переменные и секции CDATA.

Начало страницы может быть простеньким, вот таким например

Цитата:

<wml>
<card>
<p>Welcome to Antichat</p>
</card>
</wml>

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

Цитата:

<?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 to Antichat">
<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>

Тут сайт разбит на 3 карты (части)
id - это идентификатор блока сайта.
title - указывает на заголовок сайта.
<p align="center">12345<br/> - тут содержание вашей страницы.
<img src="logo.wbmp" alt="home"/><br/>. - распологается картинка, но не обычная а специальная в формате wbmp.
alt - текстовое описание.

<do> необходим для обозначения что надо делать когда посетитель делат что-то. С ним комплектуются:
1) label - атрибут значение котрого используется для замены названия кнопки
2) type - указывает мобильному браузеру назначение кнопки - помогает костамизировать приложения(количество символов ограничено возможностями устройства)
3) name - дает возможность пользоваться возможностями иерархической структуры
4) optional - указывает на неоюязательность показа этой кнопки в случае, если атрибуту присвоено значение true .Тег <go> содержит информацию о том, на какую карту слудует перейти после выполнения <do> - переход на карту с меткой #card1

Атрибуты тега <go>
1) href - url
2) sendreferer - этот атрибут необходим для серверу в списках контроля доступа. Его значение указывает браузеру на то, что необходимо отослать на сервер url минимально возможной длины.
3) method - может принимать значение лобо post, либо get. Значение аналогично html
4) accept-charset - указывает кодировку, в которой браузер мобильного должен будет посылать ссылку.

Идем далее...
СоБыТиЯ - действия производимые в в зависимости от определенных условий, клика например.
Например в языке wml есть элемент Onevent, который обладает атрибутом type. в этом атрибуте задется одно из четырех следующих событий:
1) onenterbackward - срабатывает при выборе элемента prev
2) onenterforward - при вызове карты
3) ontimer - при истечении времени у элемента timer
Пример кода с событиями:

Цитата:

<?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="start">
<do type="accept">
<go href="two"/> <!- Переход к метке two -->
</do>
<p>Choose Accept</p>
</card>
<card id="two"> <!-сама метка two -->
<do type="accept">
<go href="there"/>
</do>
<onevent type="onenterbackward"> <!-описание события -->
<prev/>
</onevent>
<p>Chooce Accept</p>
</card>
<card id="there">
<do type="accept">
<prev/>
</do>
<p>Choose Accept.>
</card>
</wml>

СтРуКтУрА - при помощи структуры можно запретить или разрешить пользователю зайти на определенные страницы или даже сайты..Это делается с помощью элемента access, с этими атрибутами :
1) domain - имя домена для запрета доступа.Этот атрибут необходим для того чтобы браузер просматривал и сравнивал со значением все имена доменов, встречающихся в документе.Если апример будет такая строчка <acces domain="antichat.ru"/> ? ,браузер только сможет зайти на www.antichat.ru , но не на www.antichat.com например
2) path - это путь для сравнения. Например если будет такая строчка <acces domain="antichat.ru" path="/spin"/> то юзер сможет зайти только если www.antichat.ru/spin/blahblah или www.antichat.ru/spin/123123 но не сможет зайти например сюда www.antichat.ru/spin/blahblah/qwerty
вот пример с использованием структур

Цитата:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/dtd/wml_1.1.xml">
<wml>
<head>
<acces domain="antichat.ru" path="/spin"/>
</head>
<template>
<do type="accept" name="accept1" label="OK">
<go href="#accept"/>
<do>
</template>
<card id="start" title="Start Here">
<p>
Start Here
</p>
</card>
<card id="accept" title="Okey card">
<do type="accept" name="accept1" label="Okay">
<go href="accept2"/>
</do>
<p>
Card Accept
<card id="accept2" title="Ok Card" >
<do type="accept" >
<go href="#start" />
</do>
<p>
Card Accept2
</card>
</p>
</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="card1" title="Tutorial">
<do type="accept" label="Answer">
<go href="#card2"/>
</do>
<p>
<select name="name">
<option value="HTML">HTML Tutorial</option>
<option value="XML">XML Tutorial</option>
<option value="WAP">WAP Tutorial</option>
</select>
</p>
</card>

<card id="card2" title="Answer">
<p>
You selected: $(name)
</p>
</card>
</wml>

будет это выглядеть примерно так

<pre>----- Tutorial ----------

HTML Tutorial <input type="radio" name="a" checked="checked" />
XML Tutorial <input type="radio" name="a" />
WAP Tutorial <input type="radio" name="a" />

Answer</pre></form></td></tr></table>
<p>
Следующая карта будет вяглядеть примерно так:</p>

<pre>----- Answer ----------

You Selected: HTML

</pre></td></tr></table>
<br />

Вот пример парагрофа и "разрушительной линии"

Цитата:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="Paragraphs"> <p>
Это параграф
</p>
<p>
Это другой<br/>с разрушительной линией
</p></card>
</wml>

... и будет это выглядеть примерно так
</p>

<pre> ------ Paragraphs ------

This is a paragraph

This is another
with a line break
</pre>
</td></tr></table>
можно также форматировать текст

Цитата:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="Formatting">
<p>
нормальный<br/>
<em>курсивом </em><br/>
<b>размашестый</b><br/>
<i>курсив</i><br/>
<u>подчеркнутый</u><br/>
<big>большой</big><br/>
<small>маленький</small>
</p>
</card>
</wml>

...и будет примерно вот так

<pre>----- Formatting -----</pre>
<br />
нормальный<br />
<b>размашестый</b><br />
<i>курсив</i><br />
<u>подчеркнутый</u><br />
<big>большой</big><br />
<small>маленький</small>
</td></tr></table>

Таблицы...

Цитата:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="Table"><p>
<table columns="3">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</p></card>
</wml>

будет это в телефоне примерно так
------ Table ------

Cell 1 Cell 2 Cell 3

Пример полей для ввода

Цитата:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="Input">
<p>
Имя: <input name="Имя" size="15"/><br/>
Возраст: <input name="Возраст" size="15" format="*N"/><br/>
Пол: <input name="Пол" size="15"/>
</p>
</card>
</wml>

в телефоне будет так

</p>
<table width="200" border="1" bgcolor="#cccccc"><tr><td>
<form action="">
<pre>----- Input ----------
Имя: <input type="text" name="Имя" size="15" />
Возраст : <input format="*N" type="text" name="Возраст" size="15" />
Пол : <input type="text" name="Пол" size="15" />
</pre>
</form>
</td></tr></table>
<br />
Рассмотрин некоторые теги, начнем с <anchor>[QUOTE] Он устанавливает что делать когда юзер выберет линк. В этом примет юзер должен нажать на Next page и перейти тем самым на test.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 title="Anchor Tag"><p>
<anchor>Next page
<go href="test.wml"/>
</anchor>
</p></card>
</wml>

Тег <a> всегда выполняет "go" задание, без переменных.

Цитата:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="A Tag"><p>
<a href="test.wml">Next page</a>
</p></card>
</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 title="Image"> <p>
Памелла Андерсон
<img src="/img/pamella.wbmp" alt="stickman" />
in a paragraph
</p></card>
</wml>

таймер...Единица времени сдесь.... время это 1/30 .т.е секунда будет 10, две секунды 20 и тд.Пример

Цитата:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card ontimer="test.wml"><timer value="30"/>
<p>прошло 3 секунды</p>
</card>
</wml>

<prev> представляет действие предыдущей перехода на предыдущую карту

Цитата:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card>
<p>
<anchor>
Предыдущая страничка
<prev/>
</anchor>
</p>
</card>
</wml>

<refresh> - тег с помощью которого можно обновить все, что находится на странице

Цитата:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card>
<p>
<anchor>
Обновить
<go href="thispage.wml"/>
<refresh>
<setvar name="x" value="30"/>
</refresh>
</anchor>
</p>
</card>
</wml>

В этом примере используется добавление линка "Back" в карту.Когда юзер нажмет "Back" он прейдет на предыдущую карту .Но тег <noop> препядствует этой операции; когда юзер кликнет "Back" с линкон ничего не случится

Цитата:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card>
<p>
<do name="back" type="prev" label="Back">
<noop/>
</do>
</p>
</card>
</wml>

Еще раз напомню теги и разделю их на группы
Начальные теги
<access> Определяет информацию о доступе к деке
<card> Определяет карту в деке
<head> Содержится информация о документе
<meta> Определяет встречную информацию о документе
<template> Определяет код template'а для карт в деке
<wml> Начало документа
<!--> Коментарий

Текстовые элементы
<br> Определяет линию разрушения (я точно непонял зачем и что это)
<p> Определяет параграф
<table> Определяет таблицу
<td> Определяет таблицу
<tr> Определяет таблицу ряда

Теги форматирования текста
<b> Определяет жирный шрифт
<big> Определяет большой шрифт
<em> Определяет хз что ...)) (возможно наклонный текст)
<i> Текст курсивом
<small> Определяет маленкий шрифт
<strong> Определяет сильный шрифт ))
<u> Определяет подчеркивание

Элементы действия
<a> Определяет линк.Всегда выполняет "go" задание, без переменных
<anchor> Определяет линк.Устанавливает что делать когда юзер выберет линк

Картинки
<img> Определяет картинку

Событие элементов
<do> Активируется кода юзер кликает на слово\выражение на экране
<onevent> Содержит код исполняемый когда один из элементов следует собтия : onenterbackward, onenterforward, onpick, ontimer
<postfield> Содержит информацию о посланном серверу по тегу <go>

Элементы задания
<go> Представляет действие переключения на новую карту
<noop> Говорит что ничего не следует делать.
<prev> Представляет действие перехода назад на предыдущу карту
<refresh> Представляет обновление страницы

Вводные элементы
<fieldset> Использует вместе групу расказываеющую об элементах карты
<input> Определяет поля для ввода
<optgroup> Определяет группу опцый в выбранном листе
<option> Определяет опцию выбранного листа
<select> Определяет выбранный лист

Непостоянные элементы
<setvar> Направление непостоянного элемента точно определяет значение в <go>, <prev>, или <refresh>
<timer> Определяет время карты

И подконец расскожу о самом главном.Библиотеки WMLScript.
Если действительно делать что-то стоещее то без них не обойтись...прийдётся использовать библиотеки, встроенные в спецификацию WAP 1.1
В WAP 1.1 встроено шесть стандартных библиотек:
Преобразование булевских, целых и обычных переменных (LANG)
Операции с плавающей точкой (FLOAT)
Операции со строками (STRING)
Манипуляции с абсолютными и относительными URL (URL)
Взаимодействие с WML броузером (WMLBrowser)
Пара основных функций интерфейса пользователя (DIALOGS).
Давайте разберемся как работать с этими библиотеками на примере magic square, в которой игрок помещает целые числа в квадратную матицу, следя за тем , чтобы сумма чисел в столбцах равнялась сумме в строках.Итак, создадим WML- документ и назовем его magic.wml.Он будет содержать весь интерфейс пользователя и логику игры.А также сздадим всторой фаил, в котором будут вычисляться все вычисления.
Для начала мы должны описать взаимодействие между основными элементами пользовательского интерфейса и функциями WMLScript.
Создадим дэку. Она сперва будет спрашивать у игрока позицию и значение целого числа, которое будет помещено в массив, а затем будет вызывать функцию, для того, чтобы положить этот элемент в массив. Обратите внимание, что когда игрок нажмёт кнопку "OK", чтобы ввести значение, то наша дэка вызовет функцию FormRow , находящуюся в "./magic.wmls". Здесь пример кода дэки, вызывающей функцию.

Цитата:

<wml>
<card id="start">
<do type="accept" label="start">
<go href="#getposition">
<setvar name="col" value="" />
<setvar name="value" value="" />
<setvar name="col" value=""/>
<setvar name="row1" value="1,2,3,4,5"/>
<setvar name="disrow1" value="> 0 0 0 0| 0" />
</go>
</do>
<p>
текст
</p>

<card id="getposition">
<do type="accept" label="ok">
<go href="#getvalue">
</do>
<p>
Column (1-4):
<input name="col" format="N" />
</p>
</card>

<card id="getvalue">
<do type="accept" label="ok">
<go href="./magic.wmls#FormRow()" />
</do>
<p>
Value (1-100)
<input name="value" format="*N">
</p>
</card>
</wml>

Теперь нам нужно создать собственно саму функцию. Файл magic.wmls должен находиться в той же директории, что и основной magic.wml. Объявляем в magic.wmls функцию FormRow типа external. Как раз из этой функции мы и будем взаимодействовать с WML дэкой посредствам библиотеки WMLBrouser. Библиотека позволяет нам получать и устанавливать значения переменных в WML документе прямо из функции. Полный список функций WMLBouser можно посмотреть здесь.
Следующий модуль объявляет внешнюю функцию, которая получает переменные из дэки (в нашем случае magic.wml), устанавливает переменную для дэки дисплея , указывая на отоброжаемую на дисплее дэку, и затем обновляет дисплей пользователя. Код модуля здесь. Обратите внимание, что операторы в WML дэке - все в нижнем регистре:

Цитата:

Присваивать значение переменной через WMLBrouser нужно следующим образом:

Цитата:

WMLBrowser.setVar("col", "");

Теперь , когда мы увидели основные взаимодействия, давайте добавим к функции манипулирование с строками. Спецификация WMLScript включает библиотеку String которая, среди других особенностей, позволяет Вам обрабатывать переменную как одномерный массив строки. Всё, что надо сделать - это обозначить текстовый разделитель, чтобы выводить строку на дисплей в форматированном виде. Более детальное опасание функций библиотеки String здесь.
В конечном счёте, нам нужно вставить значение, введённое игроком, в массив, и при том, чтобы в массиве это значение содержалой именно в той позиции, значение которой задал игрок. Следующий кусок кода показывает - как мы будем вычислять индекс в массиве и помещать туда нужное значение. Пока мы пропустим преобразование в колонки, и просто будем вносить значения в массив элементов, начиная с нулевого значения. А вот преобразовывать будем в следующей статье, посвящённой библиотеке Lang.

Цитата:

extern function FormRow () {

var col = WMLBrowser.getVar ("col");
var val = WMLBrowser.getVar ("value");
var row1vals = WMLBrowser.getVar ("row1");
var localdisrow;
var localrowvals;

row1vals = String.insertAt(row1vals, val, 0, ",");

WMLBrowser.setVar ("disrow1", row1vals);
WMLBrowser.setVar ("row1", row1vals);

WMLBrowser.go ( "magic.wml#DisplayResult" );
WMLBrowser.refresh();

}

-----------------
Самое важное что нужно усвоить при написании wap сайтов это:
1)САЙТЫ НУЖНО СТРОИТЬ ИСХОДЯ ИЗ КОЛОДЫ КАРТ
2)РАЗМЕР СТРАНИЦЫ ЛУЧШЕ ОГРАНИЧИТЬ 4-5 ЭКРАНАМИ
3)ПЕРДПОЧТИТЕЛЬНЫ ТЕГИ select/option , ЧЕМ ЧТО-ТО ДРУГОЕ
4)ПОМЕНЬШЕ РИСУНКОВ
5)РИСУНКИ ДОЛЖНЫ БЫТЬ В СПЕЦИАЛЬНОМ ФОРМАТЕ "WBMP"
5) РАЗМЕР САЙТА НЕ БОЛЕЕ 1.4 КБ (а может и меньше, все зависит от конкретного телефона)

Сылки по теме:
http://www.softlinks.ru/scripts/s147p1.php
http://www.softportal.com/downloadsubsection/77 - софт
http://wapmaker.net/?m=host - это тому кто не верил что вап ИнОгДа предостовляется как отдельная услуга
http://www.wmaster.ru/xml/wmlfaq.htm - все для чайников

PS В статье использовались материалы из МнОгИх источников\сайтов. Особо я бы хотел отметить то что я использовал некоторые части статьи из журнала ][ ... та статья была написана хорошо, но написано там ИМХО маловато поэтому я решил узнать о вап побольше и... это все вылилось вот в эту статью )