Наткнулся на любопытный обзор языков описания интерфейсов на сайте www.raleigh.ru. Обзор, правда, не первой свежести, но все еще вполне актуальный.

1. Пользовательские интерфейсы и веб.

Что такое пользовательский интерфейс? По логике вещей, это то с чем мы сталкиваемся каждый день в повседневной жизни: столовые приборы, дверные ручки, пульты управления телевизором и т.д. Сложилось так, что в мире информационных технологий пользовательский интерфейс, прежде всего, ассоциируется с GUI операционной системы. Это неудивительно, ведь ныне элементы управления компьютерными программами нам столь же привычны, как и тумблеры бытовых электроприборов. Пользовательские интерфейсы неотъемлемая часть любого веб-приложения. Любой сайт, к которому мы можем обратиться посредством Интернет, является пользовательским интерфейсом для доступа к информации. Однако в настоящее время задача программирование пользовательских интерфейсов для веб несколько иное, нежели в случае настольных программ. Современная операционная система базируется на устоявшемся стандарте пользовательского интерфейса для всех, взаимодействующих с нею программ. Соответственно имеется определенная модель, которой подчиняются любые интерфейсные решения в программах для данной операционной системы. А раз так, то создание пользовательского интерфейса сводиться к использованию функций стандартных библиотек. Например, это могут быть функции Win32 API или объекты MFC для программ MS Windows. Подобный подход имеет одно замечательное свойство. Если пользователь научился пользоваться хотя бы одной программой, он быстро освоится с любой другой для той же операционной системы. Но такое положение вещей не может быть отнесено к веб-приложениям. Каждый новый сайт – это новый информационный и графический дизайн, а также новый пользовательский интерфейс. В данном случае едва ли применимы программные библиотеки для какого-то одного определенного стандарта пользовательского интерфейса. И до сих пор чаще всего при разработке сайтов используется «ручное» программирование, что подразумевает внесистемное задание оформления и программных реакций, для каждого элемента пользовательского интерфейса и для каждого его состояния. В случае крупного полнофункционального решения подобный подход означает «начало конца». Но давайте обратимся к существующим и перспективным стандартам в области описания пользовательских интерфейсов.

2. Язык пользовательских интерфейсов UIML.

В 90х годах HTML обрел огромную популярность и, прежде всего за счет свой простоты. Для того, чтобы создать небольшой сайт не требовалось особых навыков в программировании и специальных инструментальных средств. Любой желающий мог это сделать и почти каждый попробовал. Однако прародитель HTML язык SGML подразумевал структуризацию документов, а это значительно более глубокая модель нежели простое оформление внешнего вида данных. Изначальная идея упорядоченной структуры распределенных данных вернулась вместе с XML и породила эпоху мета описания абстрактных составляющих веб-ресурсов. На этом фоне четко вырисовывалась задача вынесения разметки UI из программного кода приложений. Кроме того, появилась технология каскадных таблиц стилей (CSS), что открыло путь к созданию настраиваемого под конкретное устройство оформления интерфейсов. Эти обстоятельства явились предпосылками созданию языка UIML (User Interface Markup Language). Первая спецификация UIML была представлена компанией Harmonia в январе 1998 года. Ныне доступна спецификация 3.0 на сайте проекта www.uiml.org.

Что представляет собой UIML? В общих чертах это концепция, в которой путь данных от приложения до физического устройства отображения данных пролегает через абстрактные области логики, интерфейса и представления. Область интерфейса, включает описание структуры, стилей, содержания и поведения элементов. Задача языка UIML эффективно реализовать область интерфейса.

Если взглянуть глубже, то выясниться, что UIML определяет следующее:

составные элементы пользовательского интерфейса;
каким образом будут представлены элементы пользовательского интерфейса (визуально/вербально/тактильно);
какого рода содержание будет использовано в пользовательском интерфейсе (текст, изображения, звуки и т.д.);
какова будет реакция элементов пользовательского интерфейса на действия пользователя;
каким образом будет производиться контроль событий пользовательского интерфейса (Java Swing classes или теги HTML);
с каким внешним API будет взаимодействовать пользовательский интерфейс.

UIML на мой взгляд представляет собой наиболее удачное решение именно по части описания логики пользовательских интерфейсов из ныне существующих. Что вполне закономерно, учитывая тот факт, что его инициатор компания Harmonia специализируется на пользовательских интерфейсах. Однако, в отличие от прочих языков, рассматриваемых в данном обзоре, UIML не поддерживается какими-либо браузерами. Для выполнения UIML-трансформации следует воспользоваться одним из сторонних UIML-процессоров на стороне сервера. Впрочем, по адресу www.uiml.org/tools/index.htm представлен внушительный список open source процессоров UIML.

3. «Нет больше данных, есть только XUL».

В настоящее время весьма популярен язык описания пользовательских интерфейсов XUL (XML User-interface Language). XUL является частью среды разработки кросс-платформенных интерфейсов, известной как XPFE. Это полнофункциональный язык разметки, на объекты приложений, такие как окна, метки и кнопки. Язык соответствует стандарту W3C XML 1.0. Приложения, написанные на XUL, также могут использовать HTML, CSS, DOM, Java-script. И главное, XUL пытается разделить представление данных и логику приложений. Делается это посредством следующих абстрактных слоев:

Содержание (content): объявление окон и элементов пользовательского интерфейса ассоциированных с ними.
Оформление (skin): включение CSS и изображений, определение вида приложения.
Локализация (locale): текст, отображаемый в пределах приложения, распределен по специальным локальным файлам, что обеспечивает переносимость языка.

Теоретически XUL обеспечивает кросс-платформенные интерфейсы (по крайней мере на данный момент он доступен в операционных системах Windows, Unix, Mac). Впрочем, первое яркое впечатление от технологии сразу же омрачает ее жесткая привязка к ядру Mozilla (Gecko).

Кстати говоря, с названием технологии связан один курьезный случай. Так сложилось, что аббревиатура XUL происходит от имени персонажа Зуул из фильма «Охотники за приведениями». Ключевой оказалась фраза из фильма «Нет больше Даны, есть только Зуул» трансформировавшаяся в слоган «Нет больше данных, есть только XUL». Может быть, именно по этому сообщество XUL так усердно следит за корректностью произношения названия языка.

4. «XAML — язык авалонский».

Было бы странно, если бы столь перспективную нишу рынка проигнорировала компания Microsoft. Ныне в активном развитии XAML (eXtemsible Application Markup Language) — язык интерфейсов платформы Windows Longhorn.

Модель приложений Longhorn включает объект Application. Его набор свойств, методов и событий позволяет объединить веб-документы в связанное приложение. Объект Application контролирует выполнение программы и генерирует события для пользовательского кода. Документы приложения пишутся на XAML. Впрочем, с помощью XAML описывается, прежде всего, пользовательский интерфейс. Логика приложения по-прежнему управляется процедурным кодом (С#, VB и т.д.). XAML может использоваться как для браузер-базированных приложений, так и для локальных настольных приложений.

XAML включает основные четыре категории элементов: панели, элементы управления, элементы, связанные с документом и графические фигуры. Заявлено 7 классов панелей, которые задают принципы отображения вложенных в них элементов. Для задания положения элементов относительно границ родительской панели используются атрибуты на манер свойств в объектно-ориентированных языках. Подобный синтаксис не очень вяжется с рекомендациями CSS, но будет привычен программистам настольных приложений.

Приложения, объявленные в XAML, могут включать множество страниц. Элемент управления PageViewer позволяет разбивать содержание на страницы и обеспечивает навигацию по ним. Элемент ContextMenu помогает в создании навигационных меню приложения. Код процедурного языка может быть размещен непосредственно в файле XAML или же назначен при сборке проекта.

В настоящее время стабильной версии Longhorn нет, но Microsoft выпустила в ноябре 2004 Avalon CTP, позволяющий использовать XAML на платформах Windows XP и Windows Server 2003. Последнюю версию этого пакета можно найти по этому адресу: www.microsoft.com/downloads/details.aspx?familyid=C8F904E1-B4CA-402B-ACCF-AAA2BD60DA74&displaylang=en

5. Язык насыщенных веб-приложений MXML.

Macromedia традиционно выделяется на рынке поставщиков веб-технологий нетипичным подходом. Так скажем, ныне повсеместно используемый Flash столь разительно отличается от прочих технологий доставки информации, что его было бы как-то не ловко даже рассматривать в параллели с теми же языками разметки. Однако в эпоху XML и Macromedia не осталась в стороне от моды на декларативные языки. Ответ компании обозначился технологией Flex, содержащей XML-базированный язык MXML (Macromedia Flex Markup Language).

Как и рабочая группа Mozilla, и компания Microsoft, разработчики Flex стремились создать язык, эффективно сочетающий две популярных парадигмы: язык разметки и объектно-ориентированный программный язык. MXML позволяет наглядно описать структуру пользовательского интерфейса, по которой он будет воссоздан клиентским приложением. ActionScript выполняет задачи контроллера (программная реакция на события в среде) и обеспечивает уровень модели приложения.

Flex помимо стандартных элементов форм ввода данных содержит столь актуальные компоненты пользовательского интерфейса как Tree component (структуризация данных), DataGrid component (управление большими массивами данных), различные навигационные компоненты (TabNavigator, ViewStack, Accordion, и прочее).

Как помнится, одно из основоположных свойств XML — возможно назначения собственных тегов. Flex эффективно наследует эту идею. Мы можем создать приложение, поместить его в отдельный файл с именем MyInnerApp.mxml после чего в приложениях Flex станет доступным тег <MyInnerApp />, ссылающийся на исходный код.

Flex располагает средствами для интеграции приложений. Мы можем воспользоваться протоколом SOAP и передать их Flex-приложения инструкции удаленному сервису, а затем принять от него данные. Это позволяет использовать при разработке приложений FLEX сервис ориентированную архитектуру (SOA).

Специфика интерфейсов от Macromedia в их интерактивности, мультимедийной насыщенности. Очевидно, что имеется богатая библиотека спецэффектов (библиотека событий), доступных элементам приложений Flex. Надо отметить, что и документация к технологии Flex выполнена в лучших традициях Macromedia. Особенно впечатляет интерактивный тур в технологию www.macromedia.com/software/flex/productinfo/brz_overview.

На клиентской стороне приложения Flex устанавливаются на браузерах, располагающих расширением Flash Player 7. Данное обстоятельство обеспечивает приложениям Flex самую широкую поддержку на клиентских устройствах. С другой стороны необходимая серверная поддержка реализуется компонентом Flex Presentation Server, устанавливаемым на сервер приложений J2EE (Macromedia JRun, IBM Websphere, BEA WebLogic, Apache Tomcat и т.д.). Это тот самый механизм, который строит новое поколение насыщенных приложений (RIAs — Rich Internet Applications). Начальная цена Flex Presentation Server составляет 12 тыс. долл.

6. Оперная партия веб-приложений.

Если бы разработчики браузеров в полной мере придерживались одних и тех же стандартов, это очень облегчило жизнь веб-разработчикам. Написав приложения под один из браузеров можно было не беспокоиться о том, что оно иначе поведет себя в другом. Казалось бы о поддержке стандартов W3C заявлено всеми крупными игроками на этом рынке, но не для кого не секрет, что один и тот же HTML-код может по-разному транслироваться браузерами IE, Netscape и Opera, не всегда одинаково воспринимается ими и CSS. А про JavaScript и DOM, полагаю, не стоит даже упоминать. Разработчики браузеров в стремлении привлечь большее внимание к своим продуктам, технологически опережают независимые организации по стандартизации. В результате на рынке множество сопоставимых, но разных технологий, что кроме всего прочего создает жесткую конкуренцию. Когда группа Mozilla шествует по миру под флагами XUL, Microsoft предвещает эру Longhorn/XAML, Opera Sofware просто вынуждена сделать какой-либо ответный шаг. По крайней мере, мне именно в таком свете видеться работа компании над спецификацией Web Applications 1.0 (http://www.whatwg.org/specs/web-apps/current-work/). Данная спецификация не несет в себе каких-либо революционных новаций, но обрисовывает многие актуальные (по крайней мере для браузера Opera) задачи:

управление pop-up меню и контекстными меню;
обслуживание событий сервера в приложении без перегрузки страницы. Удаленный вызов процедур на стороне сервера и манипуляции фрагментами XML-документов;
обслуживание устройство независимых событий DOM;
формы пользовательского интерфейса для отображения динамических деревьев и списков;
предустановленный редактор HTML;
API для Drag&Drop;
API для манипуляций с выделениями в содержании;
API для буфера обмена;

Данная спецификация еще совсем сырая. Ее редакция от 1 марта 2005 буквально пестрит красными пометками «возможно, это будет так, но может быть и иначе…». Завершение ее разработки вероятно обогатит браузер Opera новыми возможностями, но вряд ли это будет заметно на фоне более значимых инноваций конкурентов.

7. Итоги.

Общая картина вырисовывается следующим образом. Microsoft сконцентрировала усилия на то, чтобы стереть грань между браузером и настольными приложениями. Для этого создается платформа Longhorn, включающая язык разметки интерфейсов XAML. В основе Longhorn предусмотрен системный слой CLR, гарантирующий переносимость приложений для различных устройств. В тоже время рабочая группа Mozilla не покушается на стереотипы веб-разработчиков, но, тем не менее, предоставила инструмент XUL, позволяющий писать веб-приложения, по функциональности близкие к настольным. Очевидное преимущество сообщества Mozilla на данный момент в наличии целого ряда уже реализованных приложений, представленных на сайте mozdev.org. В стороне от схватки сообщества open source и софтверной империи Microsoft компания Macromedia успешно продвигает технологию Flex. Решения от Macromedia традиционно отличаются впечатляющим мультимедиа и Flex не исключение из этого правила. Популярность Flash в проектах презентационного характера трудно переоценить, а технологический дуэт MXML и ActionScript 2 открывает Macromedia нишу полнофункциональных бизнес-порталов. Впрочем, эффект от качественных Flex-приложений по-прежнему требует дополнительных трудозатрат, так что, смею предполагать, эта технология не станет основным инструментом большинства веб-разработчиков.

Но спустимся на грешную землю. Типовое техническое задание на веб-проект включает требования поддержки наиболее популярных браузеров. Т.е. автоматически отпадают технологии XAML и XUL. Можно было выбрать Flex, ведь плагин Flash Player, легко интегрируется в различные браузеры. Однако, стоимость Flex Presentation Server ставит под сомнение рентабельность для большинства компаний, занятых в веб-разработке. Кроме того, каждое из заявленных решений влечет язык разметки пользовательского интерфейса. Однако, в каждом из случаев это скорее язык браузера/платформы, нежели концепция описания интерфейса. Именно по этому я включил в обзор язык UIML, не привязанный к какой-либо платформе, но четко разделяющий абстрактные приложения. Таким образом, UIML задает структуру интерфейса, его оформление, его содержание и его поведение. Это модель описания интерфейсов, которая просто-напросто наиболее интуитивно понятна. А так как UIML аполитичен на мировом ИТ-рынке, он с одинаковой легкостью может использоваться для трансляции кода в любые браузеры, на любые устройства. UIML не разрушает привычный технологический процесс веб-разработки, но дополняет его. Разработчик может по-прежнему опираться на выбранные ранее технологии HTML, XHTML, CSS, XSL, WML и т.д. А что касается доступности, то нам остается лишь выбрать на свой вкус один из open source процессоров UIML и установить его на свой сервер.

Оригинал статьи с примерами, иллюстрациями и ссылкам — www.raleigh.ru/a/pub/2005/ui-langs.html.

PS. От себя добавлю, что Web Applications ныне больше известен под названием HTML 5. А в WHATWG, помимо Opera, состоят еще Mozilla и Apple. Соответственно, можно надеятся на поддержку HTML 5, по меньшей мере, тремя браузерами — Firefox, Opera и Safari.

Языки описания интерфейсов