WML (Wireless Markup Language)

Discussion in 'Статьи' started by Tikson, 3 Jan 2006.

  1. Tikson

    Tikson Elder - Старейшина

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

    Начало страницы может быть простеньким, вот таким например
    Пример выше еще не вполне завершен. WML - это ветвь XML, а любой XML-документ сначала должен пройти проверку на соответствие своему DTD (Document Type Definition). Следовательно, в любом wml-файле, как документе, необходимо указать полный путь к WML DTD.
    Тут сайт разбит на 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
    Пример кода с событиями:
    СтРуКтУрА - при помощи структуры можно запретить или разрешить пользователю зайти на определенные страницы или даже сайты..Это делается с помощью элемента 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
    вот пример с использованием структур
    В следующей деке мы будем вводить данные...
    будет это выглядеть примерно так

    <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 />

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

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

    This is a paragraph

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

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

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

    Cell 1 Cell 2 Cell 3

    Пример полей для ввода
    в телефоне будет так

    </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>
     
    2 people like this.
  2. Tikson

    Tikson Elder - Старейшина

    Joined:
    9 Oct 2005
    Messages:
    263
    Likes Received:
    42
    Reputations:
    14
    Wireless Markup Language 2

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

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

    Теперь , когда мы увидели основные взаимодействия, давайте добавим к функции манипулирование с строками. Спецификация WMLScript включает библиотеку String которая, среди других особенностей, позволяет Вам обрабатывать переменную как одномерный массив строки. Всё, что надо сделать - это обозначить текстовый разделитель, чтобы выводить строку на дисплей в форматированном виде. Более детальное опасание функций библиотеки String здесь.
    В конечном счёте, нам нужно вставить значение, введённое игроком, в массив, и при том, чтобы в массиве это значение содержалой именно в той позиции, значение которой задал игрок. Следующий кусок кода показывает - как мы будем вычислять индекс в массиве и помещать туда нужное значение. Пока мы пропустим преобразование в колонки, и просто будем вносить значения в массив элементов, начиная с нулевого значения. А вот преобразовывать будем в следующей статье, посвящённой библиотеке Lang.
    -----------------
    Самое важное что нужно усвоить при написании 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 В статье использовались материалы из МнОгИх источников\сайтов. Особо я бы хотел отметить то что я использовал некоторые части статьи из журнала ][ ... та статья была написана хорошо, но написано там ИМХО маловато поэтому я решил узнать о вап побольше и... это все вылилось вот в эту статью )
     
    1 person likes this.