Статья: Создание WAP сайта По метериалам из журнала ][акер WAP (Wireless Application Protocol) - это протокол, разработанный специально для мобильных устройств. Именно через него происходит передача WML-страниц. WML - технология создания WAP-контента. Является разновидностью языка разметки XML, со всеми вытекающими отсюда последствиями. Если ты раньше кодил на XML или HTML, то ничего нового ты тут не увидишь, за исключением, пожалуй, тэгов организации блочных структур и вставок кода на WMLScript. Единственное надо запомнить, что все тэги в WML должны быть закрытыми. Если ты имеешь дело с тэгами, которые не имеют закрывающего партнера, например <br>, то следует писать <br/> (самозакрывающийся тэг). Исходя из того, что WML - разновидность XML, первая строчка кода мобильной паги будет указанием на стандарты w3.org: Вышеуказанная строка является обязательной, и именно с нее должна начинаться любая wap-страница. Далее идет непосредственно тэги самого языка. Рассмотрим следующий код: Code: <wml> <card id="home" title="Welcome"> <p align="сепtеr">Содержимое нашей страницы выровненное по центру<br/> <img src="logo.wbmp" alt="home"/xbr/> <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="#card27></do> <do type="prev" label="back"><prev/></do> </wml> Первый тэг <wml> указывает, что данная страничка разработана с использованием именно этого языка разметки. Замечу, что этот тэг является обязательным и опускать его не следует. Далее идет тэг <card>. Как известно, мобильные устройства обладают небольшой пропускной способностью и, следовательно, заставлять каждый раз пользователя ждать загрузки страниц - дело нехорошее. Поэтому в WML есть возможность загрузить сразу одну большую страничку и разделить ее с помощью тэгов <card> на маленькие, по которым уже будет перемещаться пользователь. Злоупотре[мат] этими тэгами нельзя, так как память у телефона не резиновая, и твоя страница может попросту не поместиться, или загружаться так долго, что пользователь предпочтет соседний проект. Так что не повторяй ошибку новичков - не пихай в одну страницу весь сайт. К слову, об объемах. Старайся размещать информацию так, чтобы финальный размер страницы не превышал 1,4 кб. Если необходимо запихнуть какой-либо текст, то максимально сократи его, так как читать с маленького экрана и все время листать вниз - просто неудобно. Для тэга <card> справедливы следующие события: Onenterbackward - срабатывает при выборе элемента "prev" Onenterforward - при вызове карты Ontimer - по истечении времени у элемента "timer". Теперь давай рассмотрим атрибуты этого тэга. id - это идентификатор блока сайта. Он нужен для перехода из одной части документа в другую. Ссылка на карточку состоит из символа "#" и значения ее атрибута id (#card123). Атрибут title указывает на заголовок сайта (может появиться в списке ранее посещенных страниц, а также в любом другом месте по усмотрению браузера мобильного телефона). Он выполняет те же функции, что и одноименный тэг в языке HTML. У тэга <card> есть еще два атрибута: new/context, который может быть использован для того, чтобы сбросить состояние деки (дека, она же колода - в нашем случае страничка, состоящая из карточек), и ordered, который сообщает мобильному браузеру, принадлежит ли эта карта к упорядоченному списку карт или нет. Разработчики могут использовать последний атрибут по своему усмотрению и разрабатывать либо деку с последовательным просмотром карточек, либо состоящую из одной большой карточки. Следующая строчка в комментариях, по-моему, не нуждается, так как все понятно. Вывод текста по центру с переводом на новую строку: <р align="center">Taler's HP<br/>. Кстати, о комментариях. В языке WML они обозначаются так же, как и в HTML: <!-Текст комментария ->. Вслед за выводом текста наша wml-страничка выведет на экран картинку в формате wbmp: <img src="logo.wbmp" alt="home"/xbr/>. Пояснять атрибуты, я думаю, не стоит, так как все и так понятно: src="logo.wbmp указывает на расположение картинки, а атрибут alt - на текст-описание, так что все, как в HTML. Другой вопрос - графика. Формат wbmp (Wireless BMP) разработан специально для использования в приложениях, предназначенных для беспроводных устройств. Этот графический формат имеет всего два цвета (черный и белый). В Интернете можно достать несколько дюжин программ для создания картинок в формате wbmp. Далее идет конструкция <do type="accept" label="next"xgo href="#card1"/> </do></p>. Тэг <do> означает, что надо делать, когда пользователь произведет определенные действия. Он комплектуется несколькими атрибутами: type - указывает мобильному браузеру назначение кнопки. В WML определяется девять типов, но в подавляющем большинстве случаев используются accept и options. label - атрибут, значение которого используется для замены названия кнопки. Это помогает кастомизировать приложения. Количество символов на кнопке ограничено возможностями устройства. name - атрибут, установка которого дает возможность разработчику воспользоваться преимуществами иерархической структуры WML-доку-мента. Элемент do с именем one унаследует свойства, определенные элементу с таким же именем в элементе template этой деки. optional - указывает мобильному браузеру на необязательность показа этой кнопки в случае, если атрибуту присвоено значение true. Тэг <do> содержит информацию о том, на какую карту следует перейти после выполнения <do> (это переход на карту, содержащую метку #card1). Тэг <do> имеет следующие атрибуты (параметры тэга): href - URL. sendreferer - этот атрибут необходим серверу в списках контроля доступа. Его значение указывает браузеру на то, что необходимо отослать на сервер URL минимально возможной длины. method - может принимать значение либо post, либо get. Значение аналогично HTML (post и get - это методы передачи параметров). accept-charset - указывает кодировку, в которой браузер мобильника должен будет посылать ссылку. Так что все предельно просто. Наш первый wap-сайт, наша колода состоит всего из двух карт. Но это далеко не предел - ты можешь создать документ, необходимой тебе структуры, и единственное, что тебя ограничивает, - рамка в полтора килобайта веса финальной страницы. Основные WML-конструкции Если ты хочешь в совершенстве знать язык разметки для мобильных устройств, то должен освоить язык XML или HTML. Соблюдая нормы этих языков, с учетом поправок стандарта WML, ты сможешь создавать правильные WAP-сайты. Далее представляю твоему вниманию основные конструкции языка, особенности которых надо учитывать во избежание ошибок. СОБЫТИЯ Понятие о событиях, я думаю, ты уже имеешь. События есть практически в каждом языке программирования - это действия, производимые в зависимости от определенных условий, - клика пользователя по ссылке и т.д. Например, в языке WML есть элемент Onevent, который обладает атрибутом type. В этом атрибуте задается одно из четырех возможных событий: onenterbackward - срабатывает при выборе элемента prev. onenterforward - при вызове карты onpick - при выборе опции в списке элемента select ontimer - по истечении времени у элемента timer. Вот пример кода с использованием событий: Code: <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.com/DTD/wmL1.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="three"/> </do> <onevent type="onenterbackward"> <!- описание события --> <prev/> </onevent> <p>Choose Accept</p> </card> <card id="three"> <do type="accept"> <prev/> </do> <p>Choose Accept.</p> </card> </wml> СТРУКТУРА В языке WML есть такое понятие, как структура. При помощи структур ты можешь запретить или разрешить юзеру зайти на определенные страницы или даже сайты. В самом сайте делается это с помощью элемента Access, который имеет следующие атрибуты: domain - имя домена для запрета доступа. Мобильный браузер будет просматривать и сравнивать со значением этого атрибута все имена доменов, встречающихся в документе. К примеру, встретив строку "<access domain="motorola.com"/>", браузер сможет зайти на www.motorola.com, но не сможет зайти на www.rola.com или на www.motorola.net. path - путь для сравнения. Работает так же, как и атрибут домена. Так, если "<access path="/internal"/>" путь "/internal/wml" пройдет проверку, то "/internal-wml" - нет. Элемент Access с примерно такими атрибутами: "<access domain="motorola.com" path="/spin"/>" разрешит ссылку на деку только со следующих адресов: http://www.motorola.com/spin/getuid.cgi https://www. motorola.com/spin/index.wml http://www.motorola.com/spin/********** А с этих запретит: http://www.mot.com/spin/getuid.cgi http://www.motorola.com/internal/spin/getuid.cgi В качестве примера использования структур приведу более сложную, чем раньше, деку: Code: <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUIW/DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wmL1.1 .xml"> <wml> <head> <access domain="motorola.com" 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="0kay Card"> <do type="accept" name="accept1" label="0kay"> <go href="#accept2"/> </do> <p> Card Accept </p> </card> <card id="accept2" title="OK Card" > <do type="accept" > <go href="#start" /> </do> <p> Card Accept2 </p> </card> </wml> WMLScript Если ты хочешь создать что-то реально хорошее, то тебе не обойтись без библиотек, встроенных в спецификацию протокола WAP 1.1. Всего библиотек шесть: преобразование булевых, целых и обычных переменных (LANG); операции с плавающей точкой (FLOAT); операции со строками (STRING); манипуляции с абсолютными и относительными URL (URL); взаимодействие с WML-браузером (WMLBrowser) и пара основных функций интерфейса пользователя (DIALOGS). Давай разберемся с тем, как работать с этими библиотеками в процес- се создания несложной игры magic square, в которой игрок помещает целые числа в квадратную матрицу, следя за тем, чтобы сумма чисел в столбцах равнялась сумме в строках. Итак, создадим WML-документ и назовем его magic.wml. Он будет содержать весь интерфейс пользова- теля и логику игры. А также создадим второй файл magic. wmls, в кото- ром будут содержаться все вычисления. Для начала мы должны описать взаимодействие между основными эле- ментами пользовательского интерфейса и функциями WMLScript (то есть функциями наших библиотек). Создадим деку. Она сначала будет спрашивать у игрока позицию и зна- чение целого числа, которое будет помещено в массив, а затем будет вызывать функцию для того, чтобы положить этот элемент в массив. Ни- же я привожу пример кода деки, вызывающей функцию. Обрати внима- ние, что когда игрок нажмет кнопку ОК, чтобы ввести значение, наша дека вызовет функцию FormRow, находящуюся в /magic.wmls. Code: <wml> <card id="start"> <do type="accept" label="Start"> <go href="#GetPosition"> <setvar name="col" value=11" /> <setvar name="value" value="" /> <setvar name="row1" value="1 ,2,3,4,5" /> <setvar name="disrow1" value="> 0 0 0 0| 0" /> </go> </do> Прикольный текст </p> </card> <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-документе "на лету". Следующий модуль объявляет внешнюю функцию, которая получает переменные из деки (в нашем случае - magic.wml), устанавливает переменную для деки дисплея, указывая на отображаемую на дисплее деку, и затем обновляет дисплей пользователя. Обрати внимание, что операторы в WML-деке - все в нижнем регистре: <setvar name="col" value /> Присваивать значение переменной через WMLBrouser нужно следующим образом: WMLBrowser.setVar("col",""); Теперь, когда мы увидели основные взаимодействия, давайте добавим к функции манипулирование со строками. Спецификация WMLScript включает библиотеку String, которая, среди других особенностей, позволяет обрабатывать переменную, как одномерный массив строки. Все, что надо сделать, - это обозначить текстовый разделитель, чтобы выводить строку на дисплей в форматированном виде. В конечном счете, нужно вставить значение, введенное игроком, в массив, и при том, чтобы в массиве оно содержалось именно в той позиции, которую задал игрок. Следующий кусок кода показывает, как мы будем вычислять индекс в массиве, и помещать туда нужное значение. Пока мы пропустим преобразование в колонке, просто будем вносить значения в массив элементов, начиная с нулевого. Вот код финального приложения. Code: extern function FormRow () ( var col = WMLBrowser.getVar ("col"); var val = WMLBrowser.getVar ("value"); var rowlvals = WMLBrowser.getVar ("rowl"); var localdisrow; var localrowvals; rowlvals = String.insertAt(row1vals, val, 0,","); WMLBrowser.setVar ("disrowl", rowlvals); WMLBrowser.setVar ("rowl", rowlvals); WMLBrowser.go ("magic.wml#DisplayResult" WMLBrowser.refresh(); } ===== Ссылки по теме: http://www.wapteam.ru - Клуб WAP мастеров
