Научная статья на тему 'Особенности языка fdl v. 1. 0 для описания фронтенда веб-приложений'

Особенности языка fdl v. 1. 0 для описания фронтенда веб-приложений Текст научной статьи по специальности «Компьютерные и информационные науки»

CC BY
92
44
i Надоели баннеры? Вы всегда можете отключить рекламу.
Ключевые слова
ДЕКЛАРАТИВНЫЙ ЯЗЫК / ЯЗЫК ОПИСАНИЯ ПОЛЬЗОВАТЕЛЬСКИХ ИНТЕРФЕЙСОВ / РАЗРАБОТКА ВЕБ-ПРИЛОЖЕНИЙ

Аннотация научной статьи по компьютерным и информационным наукам, автор научной работы — Братин Даниил Юрьевич

Описан микроязык на базе XML, созданный для декларативного описания фронтенда веб-ресурса. Язык даёт возможность описывать структуру ресурса, функциональные возможности программной части и шаблоны страниц. Показано, что его отличием является удобная модель абстракции от реализации приложения и наглядные средства обращения к её компонентам.

i Надоели баннеры? Вы всегда можете отключить рекламу.
iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.
i Надоели баннеры? Вы всегда можете отключить рекламу.

The article describes the dialect based on XML, designed for declarative description frontend web resource. Language makes it possible to describe the structure of the resource capabilities of the software and page templates. It is shown that his distinction is a convenient model of abstraction from the implementation of applications and visual aids to access its components.

Текст научной работы на тему «Особенности языка fdl v. 1. 0 для описания фронтенда веб-приложений»

Сеть, предлагающая решения для изменения объектов управления. Данная сеть представляет собой однослойный персептрон с числом нейронов, равным числу способов изменения объектов управления интерфейса. На вход подается временная разность между эталонным временем выполнения задания на конкретном интерфейсе и реальным. Улучшение требуется, только если реально затраченное время больше эталонного. На выходе окажется вектор, который показывает преобразования, рекомендуемые для данного элемента. Для обучения сети будет использоваться метод обучения с подкреплением. В качестве среды, которая станет поощрять или наказывать, выступит нейронная сеть, имитирующая работу интерфейса. Таким образом,

сеть будет постоянно обучаться. Если добавится несколько способов изменения объектов управления, то структура сети также должна измениться. Сигнал улучшения будет подаваться, если предложенное решение успешно, и напротив, если решение привело к замедлению времени распознавания, веса соответствующих нейронов будут уменьшены. Данный метод похож на метод обучения с учителем с той лишь разницей, что в качестве учителя выступает среда (нейронная сеть).

В статье рассмотрен метод оценки человеко-машинного интерфейса при помощи нескольких нейронных сетей, который позволяет более объективно оценить качество интерфейса.

СПИСОК ЛИТЕРАТУРЫ

1. Нейрокомпьютерная техника: Теории и практика / Ф. Уоссерман. / Пер. на рус. яз. Ю.А. Зуева, В А. Точенова. 1992.

2. Нейроинформатика / А.Н. Горбань, В.Л. Ду-нин-Барковский, А.Н. Кирдин и др. Новосибирск: Наука; Сибирское предприятие РАН, 1998. 296 с.

3. ГОСТ Р ИСО/МЭК 9126-93. Информационная технология. Оценка программной продукции. Характеристики качества и руководства по их применению.

УДК 332.04:621

Д.Ю. Братин

ОСОБЕННОСТИ ЯЗЫКА FDL V. 1.0 ДЛЯ ОПИСАНИЯ ФРОНТЕНДА ВЕБ-ПРИЛОЖЕНИЙ

Веб-ресурс и течение своего жизненного цикла очень быстро видоизменяется и расширяется, а вместе с ним - и веб-приложение, обеспечивающее работоспособность ресурса. Также очень часто кроме программистов в работу включены верстальщики веб-страниц - специалисты по компоновке текстовых, графических и навигационных компонентов веб-страниц. Их работа заключается только в придании страницам ресурса нужного вида. Вследствие этого важнейшими задачами при разработке веб-приложения становится предоставление средств для отделения работы верстальщика от работы над программным кодом и обеспечение максимального повторного использования компонентов приложения при его расширении.

Проект FDI [1] представляет решение этих проблем путём разделения приложения на фрон-тенд и бэкенд. Бэкенд представляет собой фасад над реализацией бизнес-логики приложения и предоставляет доступ к его возможностям в виде команд, а фронтенд - интерпретатор для языка описания пользовательских интерфейсов, с которым работают верстальщики. В этой статье дано описание языка, используемого в FDI (FDL-Frontend Description Language).

FDL — это декларативный микроязык на базе XML. Он включает три подъязыка, предназначенных для описания составляющих частей фронтснда и интерфейса с бэкендом: язык описания карты разделов ресурса;

язык описания шаблонов страниц; язык описания поставщиков данных. Навигация по ресурсу и его внешний вид формируются на базе документов, составленных на первых двух языках (карта сайта и шаблоны). На языке описания поставщиков данных даётся формальное описание API бэкенда, которое служит справочником для верстальщика и источником данных для контроля за корректностью взаимодействия фронтенда и бэкенда.

Схема поставщиков данных

Создание шаблонов страниц — основная работа верстальщика веб-страниц. По сути, она заключается в задании правил форматирования динамических данных. Другими словами -в задании правил подстановки значений динамических данных в значения элементов страницы. Очень редко данные, подлежащие подстановке в страницу, представляют собой простое строковое значение, чаще всего это целые таблицы значений. Чтобы отформатировать массив значений, верстальщику необходимо точное и, желательно, формальное описание его структуры.

Схема поставщиков данных (далее для краткости "схема ПД" или "схема поставщиков"), с одной стороны, - справочник для верстальщика по командам бэкенда и структуре данных, которые они возвращают, с другой — она декларирует программисту необходимый для реализации интерфейс. Также схема ПД снабжает интерпретатор данными для контроля за корректностью

обращений к бэкенду и корректностью возвращаемых им данных.

В процесс шаблонизации (см. рисунок) вовлечены два интерпретатора: интерпретатор шаблонов страниц и интерпретатор схемы ПД. Стрелка от документа Шаблон страницы к документу Схема поставщиков данных означает, что в шаблоне страницы обращения к поставщикам данных оформляются в виде ссылок на сущности из схемы поставщиков.

Данные

1

Интерпретатор шаблонов

Поставщики данных

WEB-страница

Шаблон странииы

Интерпретатор

схемы ПД

Схема поставщиков данных

Схема процесса шаблонизации

Семантика н синтаксис. Документ схемы состоит из двух частей: описания моделей поставщиков данных и описания структур возвращаемых ими типов данных.

<dps:modcl name="news">

<descripti0n>H0B0CTnaH fleHTa</description>

<dps:request name="getList" uri="dp:cms/geiList?type=news">

<dps:parameter name="Iength" datatype="integer">5</dps:parameter> <dps:parameter name="page" datatype="integer">l</dps:parameter> <dps:parameter name="order" datatype="enum(asc,desc)">desc</dps:parameter> <dps:parameter name="order_field" datatype="date-time">date</dps:parameter> <dps:result datatype="newslist"/> </dps: request >

<dps:request name="getltem" uri="dp:cms/gctltem?type=news"> <dps:parameier name="id" datatype="integer"/> <dps:result datatype="newsitem"/> </dps:requesi> </dps:modeI>

Листинг I: Пример модели в схеме ПД

Модель — условная структурная единица документа, объединяющая некоторые запросы в группу. Примером модели может быть группа запросов, предназначенная для работы с лентой новостей.

В листинге 1 приведён пример модели "Новостная лента", состоящей из двух запросов:

"получить список новостей" (getList) и "получить новостную статью" (getltem). Для каждого запроса перечисляется набор его параметров с указанием типа и при необходимости — значения по умолчанию. Дополнительно указывается тип результата запроса с помощью элемента dps:result и его атрибута datatype:

<dps:data-type name="newslist"> <dps:collection>

<dps:objcct>

<dps:field name="id" datatype="integer"/> <dps:field name="date" datatype="date-time"/> <dps:fleld name="iitle" datatype="string"/> <dps:field name="intro" datatype="string"/> </dps:object> </dps:collection> </dps:data-type>

Листинг 2: Пример описания типа данных

В схеме ПД предусмотрены базовые типы данных, таких, как integer, float, string, date-time и пр. Сложные типы данных, которые возвращают запросы, описываются с помощью коллекций обьектов и полей этих объектов. В листинге 2 приведён пример описания коллекции новостей, которые возвращает запрос getList из модели news. Запросы могут возвращать не только коллекции, но и одиночные объекты. В этом случае в описании типа не употребляется элемент dpsxollection. Поля объектов также могут иметь сложный тип. В этом случае в атрибуте datatype указывается имя объявленного в этом же документе типа данных.

Адресация пост авщиков данных и компонентов приложения

Все три типа документов, описывающих работу фронтенда (карта, шаблоны, схема ПД), содержат обращения к компонентам веб-приложения и к элементам друг друга. Например, шаблон содержит обращения к элементам схемы ПД. Как видно из примера описания модели в схеме поставщиков (см. листинг 1), запрос (элемент dps:request) в атрибуте uri содержит идентификатор компонента, который исполняет его. Данный идентификатор соответствует формату URI [2]. В этом формате задаются запросы ко всем компонентам веб-приложения.

Интерпретация URI-запросов происходит по схеме:

<имя компонента>:<запрос>

Схема интерпретации запроса не унифицирована и зависит от компонента. Для обращения из документов доступны следующие компоненты:

layout — вызов шаблона страницы интерпретация: <файл шаблона>?<имя парамет-ра>=<значение>&...;

env —доступ к переменным среды приложения интерпретация: <пространство имён>[<имя переменной^;

доступные пространства имён: request — переменные из HTTP запроса, layout — переменные из запроса к шаблону, section — атрибуты текущего раздела;

dp — доступ к поставщикам данных интерпретация: <модель>/<команда>?<имя па-раметра>=<значение>&.„;

dps — доступ к поставщикам данных посредством схемы поставщиков данных интерпретация: <файл схемы ПД>?<модель>:-<запрос>;

index — доступ к индексу сущностей в текущем шаблоне интерпретация:

<имя элемента>:<индекс>/<вл. элемент 1>/<вл. элемент 2>...;

context — доступ к родительскому элементу интерпретация: ,/<вл. элемент I >/<нл. элемент 2>...;

nav — доступ к элементам карты ресурса интерпретация: xpath:<Bbipa>KeHHe xpath>, рхраЛ^шаблон выражения xpath>;

file — доступ к файлам в специальной папке нелокальном диске;

http -доступ к документам по НIIР-протоколу,

ftp —доступ кдокументам по FTP-протоколу. Структура ресурса и шаблоны страниц

Основные задачи фронтенда — это интерпретация шаблонов страниц и обеспечение навигации по страницам веб-ресурса. Навигация

<root пате='Тлавная" id="l" layout="layout:default.xml?content=main"> <main паше="Главная" id="l" layout="layout:default.xml?content=main"> <blog пате="Блог разработчиков" id="2" layout="layout:default.xml?content=blog..."> <article id="21" layout="layout:default.xml?content=article&amp;model=blog"/> <comment id="22" action="dps:cms.xml?cms:postComment" redirect="21 ?..."/> </blog>

<news паше="Новости проекта" id="3" layout="]ayout:default.xmI?content=bIog..."> <article id="31" layout="layout:default.xmI?content=articlelist..."/>

</news> </main>

<overview пате="Концепиия" id="4" layout="layout:default.xml?content=overview"/> <download пате~"Скачать" layout="layout:default.xml?content=download" id="7"/> <bagtrack пате="Сообщить об ошибке" id="6" Iayout="layout:default.xml?content=bugtrack"/>

</root>

Листинг 3: Пример карты веб-ресурса

Навигация веб-ресурса формируется на базе карты — иерархической структуры разделов, описанной в виде XML-дерева. Каждый элемент карты (листинг 3) является разделом. Он имеет обязательные атрибуты id, name и layout. Id — это уникапьный идентификатор раздела вдокумен-те карты. Name — имя раздела, используемое для формирования пунктов навигационных меню. Layout - ссылка на шаблон, по которому формируется страница раздела. В атрибуте layout чаще всего указывается запрос к интерпретатору шаблонов, как в примере. Но там также могут быть употреблены обращения к статичным XML/ HTML файлам, доступным на локальном диске ил и по сети через http или ftp.

Разделы, указываемые в карте, не всегда служат для отображения страницы. Иногда они ис-

пользуются для выполнения какого-то интерактивного действия, например для добавления комментария в блоге. В этом случае вместо атрибута layout указываются два атрибута action, в который записывается запрос к схеме ПД, и redirect — переход вдругой раздел после выполнения.

Использование шаблонов. Шаблоны являются описаниями правил подстановки динамических данных в страницу и их форматирования. Элемент, с помощью которого выполняется подстановка значений в документ, — это fdl:value. Он имеет один обязательный атрибут uri, в котором указывается URI идентификатор значения: <title><fdl:valueuri="env:section[namc]"/X/title>

В этом фрагменте шаблона в значение элемента title подставляется имя раздела, с которым связан шаблон.

<fd!:template applyto="index:request:mainmenu/collection/object">

<button class="menuitem">

<state><fdl:value uri="context:./state"/X/state>

<link><fdl:link section="context:./id"/X/link>

<caption><fdl:value uri="contcxt:./name"/X/caption>

</button>

</fdl:template>

Листинг 4: Обход коллекции объектов и форматирование их значений

<fdI:data-output>

<fdl:request index="mainmenu" uri="dps:website.xml?navigation:main"/> <fdI:on-ok>

<fdl:template applyto="index:request:mainmenu/collection/object">

<button class="menuitem">

<state><fdl:value uri="context:./state"/></state>

<link><fdl:link section="context:./id"/X/link>

<caption><fdl:value uri="context:./narne"/X/caption>

</button>

</fdl:template>

</fdl:on-ok>

<fdl:on-empty>

<header>CaüT OÄHOCTpaHH4Hbm</header>

</fdl:on-empty>

<fdl:on-error>

<header>np0H30iiina ouiH6Ka</header>

<p><fdl:value uri="index:request:sitemap/error/message"/X/p>

</fdl:on-error>

</fdl:data-output>

Листинг 5: Пример формирования меню навигации

Для обхода коллекций объектов, которые могут возвращать команды бэкенда, предусмотрен элемент fdktemplate. В его атрибуте applyto указывается ссылка на коллекцию объектов.

iНе можете найти то, что вам нужно? Попробуйте сервис подбора литературы.

Коллекции объектов и объекты, содержащие динамические данные, поставляются вдокумент с помощью элемента fdl:request. В его обязательном атрибуте uri содержится ссылка на запрос, описываемый в схеме поставщиков данных. Также обязателен атрибут index, с его помощью fdl:template идентифицирует данные, подлежащие форматированию.

Для того чтобы можно было отслеживать результаты выполнения запроса к бэкенду, объявляемого элементом fdlrrequest, и решать, что подставить в страницу, существует элемент fld:data-output. Он имеет обязательные дочерние элементы fdl:request, fdl:ok-ok, fd!:on-empty, fdl:on-error.

Три элемента fdl:ok-ok, fdl:on-empty, fdl:on-error определяют фрагменты шаблонадля случаев успешного выполнения, пустого результата и ошибки соответственно.

Чтобы обеспечить большую гибкость процессу отображения веб-страницы, её формирование производят в два этапа: строят промежуточную XML-страницу и преобразуют её посредством XSLT в HTML/XHTML страницу. Теги промежуточной страницы используют только для разметки блоков, на которые разбивается страница, и схематичного форматирования значений динамических данных.

В FDL нет спецификаций элементов промежуточной страницы. Их семантика и синтаксис полностью зависят от XSLT-шаблонов, которые индивидуальны для каждого проекта, поэтому формат промежуточной страницы оставлен открытым для разработки.

FDL по сути представляет собой язык описания пользовательских интерфейсов [3] наподобие UIМ L[4], XUL и т. д. Наиболее близким родственником является XML Sapience [5J, так как он тоже ориентирован на создание интерфейсов веб-при-ложений. Главное отличие FDL от XML Sapience втом, что он оперирует в основном привычными для каждого веб-разработчика понятиями: карта сайта, шаблон страницы. Из новых понятий вводится только схема поставщиков данных, которое довольно просто для понимания. URL — вещь, знакомая всем пользователям Интернета, поэтому обращение к компонентам приложения в форме URI тоже не должно вызывать затруднений в освоении, так как URL - частный случай URI.

FDL обладает очень высоким уровнем визуализации устройства фронтенда, так как документы, управляющие его работой, для выполнения большинства возложенных на них задач ссылаются друг надрута: карта на шаблон, шаблон — на запросы из схемы ПД. Правила составления этих ссылок очень просты, мы можем убедиться в этом, посмотрев на список компонентов, доступных для обращения изXMLдoкyмcнтoв.

Существует много исследовательских работ, посвященных разработке пользовательских интерфейсов веб-приложений с помощью языков графического описания [6, 7]. В них приложение моделируется с помощью диаграмм состояний и переходов (класс диаграмм в языке иМЬ). Преимущество такого подхода заключается в использовании широко распространённых стандартов моделирования и интуитивной понятности графической модели. Однако для него отсутствуют надёжные инструменты, позволяющие связать модель с реализацией и реализацию с моделью. В контексте разработки инструментов графического моделирования ИОЬ можно рас-

сматривать как связующее звено между графической моделью и реализацией. Графическая визуализация сущностей документов, связей между ними и возможность редактировать их даст нам инструмент для выполнения задач прямого и обратного моделирования.

При изучении РЭЬ могут возникнуть проблемы с пониманием взаимодействия элементов ГсИтеяиеБ! и Гс11:1етр1а1е. К сожалению, это языковое средство ещё не очень хорошо проработано.

В целом, Р01 сравнительно компактное и простое в изучении средство разработки визуальной части веб-ресурса.

СПИСОК ЛИТЕРАТУРЫ

1. Веб-сайт проекта FDI <http://fdi.bratin.ru>.

2. RFC 3986 Uniform Resource Identifier (URI) <http://tools.ietf.org/html/rfc3986>.

3. Шейко Д. Языки описания пользовательских интерфейсов. <http://www.codenet.ru/ webmast/html/ui_langs.php>.

4. ЛЬ rams S., Phanouriou С., Batongbacal A.L. et al. UIML: An appliance independent XML user interface language // Proc. of the eighth Intern, world wide web conf. (WWW8). Toronto. May 1999.

5. Спецификации XML Sapience <http:// xmlsapiens.org>.

6. Горшкова E.A., Новиков Б.А. Использование диаграмм состояний и переходов для моделирования гипертекста // Программирование. 2004. № 1. С. 64-70.

7. Tkirine M.A.S., de Oliveira M.C.F., Masiero P.C.

A statechart-bascd model for modeling hyper-media applications. ACM Transactions on Information Systems, 2001.

i Надоели баннеры? Вы всегда можете отключить рекламу.