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 визначає наступне:



Рис. 1. Модель крос-платформних користувальницьких інтерфейсів



Але досить теорії, давайте поглянемо на те, як це працює. Нижче наведений приклад UIML документа. Ми визначаємо область застосування за допомогою елемента APP і далі призначаємо групи для його елементів. Усередині груп ми визначаємо елементи користувальницького інтерфейсу. Ми також можемо визначити властивості елементів допомогою контейнера DEFINE.


Приклад 1. Документ UIML

<UIML>
<HEAD>
<TITLE>CMS loosely remind of BCWB</TITLE>
<AUTHOR>Dmitry Sheiko, Red Graphic Systems</AUTHOR>
<DATE>17/02/05</DATE>
<VERSION>0.1</VERSION>
</HEAD>
<APP NAME="CMS" CLASS="App">
<GROUP NAME= "MainFrame" CLASS="frame">
<GROUP NAME="Common" CLASS="menu">
<ELEM NAME="DocEdit" CLASS="menuitem"/>
<ELEM NAME="DocView" CLASS="menuitem"/>
<ELEM NAME="Quit" CLASS="menuitem"/>
</GROUP>
<GROUP NAME="Structure" CLASS="menuortoolbar">
<ELEM NAME="AddItem" CLASS="menuitem"/>
<ELEM NAME="ChangeItem" CLASS="menuitem"/>
<ELEM NAME="DeleteItem" CLASS="menuitem"/>
</GROUP>
<GROUP NAME="Templates" CLASS="menuortoolbar">
<ELEM NAME="AddTemplate" CLASS="menuitem"/>
<ELEM NAME="ChangeTemplate" CLASS="menuitem"/>
<ELEM NAME="DeleteTemplate" CLASS="menuitem"/>
</GROUP>
<ELEM NAME="Desktop" CLASS=" DesktopArea"/>
</GROUP>
</APP>
<DEFINE NAME="Quit">
<PROPERTIES>
<CLASS VALUE="menuitem"/>
<ACTION
VALUE="MainFrame.VISIBLE=false"
TRIGGER= "select"
/>
</PROPERTIES>
</DEFINE>
</UIML>

Треба також зауважити, завдяки активному використанню CSS, документ не здається перевантаженим зайвою інформацією. Стильовий файл для UIML може містити як CSS, так і Java AWT (Abstract Windowing Toolkit).


Приклад 2. Стильовий файл для UIML

/*
<AUTHOR>Dmitry Sheiko, Red Graphic Systems</AUTHOR>
<DATE>17/02/05</DATE>
<VERSION>0.1</VERSION>
*/
APP.App{
+TOOLKIT: jfc;
+RENDERING-PREFIX: java.awt;
}
GROUP.frame {
RENDERING: "java.awt.Frame";
LAYOUT: BorderLayout;
SIZE: "400,400";
FONT-FACE: Serif;
FONT-SIZE: 10;
FONT-STYLE:Plain;
CONTENT: "Error:No Content";
}
GROUP.menu {
RENDERING: "java.awt.Menu";
}
ELEM.menuitem {
RENDERING: "java.awt.MenuItem";
}
GROUP.menuortoolbar {
RENDERING: "java.awt.Menu";
}
ELEM. DesktopArea {
RENDERING: "java.awt.Panel";
ALIGNMENT: Center;
}

Тепер структура і зовнішній вигляд інтерфейсу описані. Досвідчений розробник до цього моменту напевно задумається про формат вмісту елементів користувальницького інтерфейсу. У UIML використовується база даних контенту (Content Database), де і зберігається вміст елементів інтерфейсу.


Приклад 3. База даних контенту

# Record format: Key, Name (from .uiml file), Attribute, Value
#
English QuittingDialog CONTENT Are you sure?!
English QuittingFinishedMsg CONTENT Good-bye!
English DocEdit CONTENT Edit document
English OKButton CONTENT OK

UIML на мій погляд являє собою найбільш вдале рішення саме по частини опису логіки користувальницьких інтерфейсів з нині існуючих. Що цілком закономірно, враховуючи той факт, що його ініціатор компанія Harmonia спеціалізується на користувацьких інтерфейсах. Однак, на відміну від інших мов, що розглядаються в даному огляді, UIML не підтримується якими браузерами. Для виконання UIML-трансформації слід скористатися одним із сторонніх UIML-процесорів на стороні сервера. Втім, за адресою (http://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 намагається розділити подання даних і логіку додатків. Робиться це за допомогою наступних абстрактних шарів:



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


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


Приклад простого інтерфейсу Drag & Drop мовою XUL


Джерело: http://www.xulplanet.com/tutorials/xultu/dragex.html

<window title="Widget Dragger" id="test-window"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src=”http://www.ishodniki.ru/"chrome://global/content/nsDragAndDrop.js"/>
<script src="chrome://global/content/nsTransferable.js"/>
<script src="dragboard.js"/>
<stack id="board"
style="width:300px; height: 300px; max-width: 300px; max-height: 300px"
ondragover="nsDragAndDrop.dragOver(event,boardObserver)"
ondragdrop="nsDragAndDrop.drop(event,boardObserver)">
</stack>
<vbox>
<button label="Button"
elem="button" ondraggesture="nsDragAndDrop.startDrag(event,listObserver)"/>
<button label="Check Box"
elem="checkbox" ondraggesture="nsDragAndDrop.startDrag(event,listObserver)"/>
<button label="Text Box"
elem="textbox" ondraggesture="nsDragAndDrop.startDrag(event,listObserver)"/>
</vbox>
</window>

Приклад інтерфейсу таблиць за допомогою XUL


http://www.devx.com/webdev/Article/9312/0/page/3




Між XUL і Flex


У той час як XUL своєму розпорядженні такими перевагами як взаємодія з різними популярними об’єктно-орієнтованими мовами, повноцінна підтримка XPath і CSS, Flex небезпідставно віщує епоху насичених веб-додатків (RIA). На цьому тлі виникають гібридні технології, такі як ZULU. Це ще одна мова розмітки крос-платформних користувальницьких інтерфейсів, суміщає стандарт XUL і технологічний можливості Flash MX


Посилання по темі:


http://zulu.netspedition.com/zulu/main/overview.shtml


Посилання по темі:



4 “XAML – мова авалонскій”


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


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


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


Приклад завдання атрибутів елементів в XAML

<Border Background="green"
Canvas.Top="100px" Canvas.Left="100px"
Height="100px" Width="100px" />

Додатки, оголошені в XAML, можуть включати безліч сторінок. Елемент управління PageViewer дозволяє розбивати зміст на сторінки і забезпечує навігацію по них. Елемент ContextMenu допомагає в створенні навігаційних меню додатка. Код процедурного мови може бути розміщений безпосередньо у файлі XAML або ж призначений при складанні проекту.


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


Приклад простого інтерфейсу на XAML з 3-ма кнопками, візуалізація однією з яких залежить від наявності її змісту.


Джерело:
http://www.joemarini.com/tutorials/tutorialpages/xamlpropertytriggers.php

<DockPanel xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
Background="#ffffffff"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<DockPanel.Resources>
<Style>
<Button Margin="5"/>
<Style.VisualTriggers>
<PropertyTrigger Property="Button.HasContent" Value="False" >
<Set PropertyPath="Visibility" Value="Collapsed" />
<Set PropertyPath="Margin" Value="0" />
</PropertyTrigger>
</Style.VisualTriggers>
</Style>
</DockPanel.Resources>
<Button Height="30" Width="100">Button One</Button>
<Button Height="30" Width="100">Button Two</Button>
<Button Height="30" Width="100">Button Three</Button>
<Button Height="30" Width="100" IsEnabled="False">Button Four</Button>
</DockPanel>

Приклад користувальницького інтерфейсу XAML, з динамічно змінюваним оформленням


Джерело: http://www.optim.ru/cs/2004/3/Avalon/Avalon.asp


Посилання по темі:


http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnintlong/html/longhornch03.asp


5 Мова насичених веб-додатків MXML


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


Як і робоча група Mozilla, і компанія Microsoft, розробники Flex прагнули створити мову, ефективно поєднуються дві популярних парадигми: мова розмітки та об’єктно-орієнтований програмний мову. MXML дозволяє наочно описати структуру користувальницького інтерфейсу, по якій він буде відтворений клієнтським додатком. ActionScript виконує завдання контролера (програмна реакція на події у середовищі) і забезпечує рівень моделі додатка.


Що варто було б виділити серед переваг Flex


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


Як пам’ятається, одне з основоположних властивостей XML – можливо призначення власних тегів. Flex ефективно успадковує цю ідею. Ми можемо створити додаток, помістити його в окремий файл з ім’ям MyInnerApp.mxml після чого в додатках Flex стане доступним тег , що посилається на вихідний код.


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


Специфіка інтерфейсів від Macromedia в їх інтерактивності, мультимедійної насиченості. Очевидно, що є багата бібліотека спецефектів (бібліотека подій), доступних елементів додатків Flex. Треба відзначити, що і документація до технології Flex виконана в кращих традиціях Macromedia. Особливо вражає інтерактивний тур в технологію http://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 тис. дол


Приклад одного з підходів до поділу шарів структури інтерфейсу і програмного контролера в MXML додатку.


Джерело: http://www.rewindlife.com/archives/000121.cfm

<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
initialize="appController.initialize();">
<TempConverterController view="{this}" id="appController" />
<mx:Label text="Temperature in Farenheit:" />
<mx:TextInput id="farenheit" width="120" />
<mx:Button id="myButton" label="Convert" />
<mx:Label text="Temperature in Celsius:" />
<mx:Label id="celsius" width="120" fontSize="18" />
</mx:Application>

class TempConverterController {
[Inspectable]
public var view;
function initialize() {
view.myButton.addEventListener("click", this);
}
function click(event) {
view.celsius.text=(view.farenheit.text-32)/1.8;
}
}


Приклад електронного магазину


Джерело: http://www.macromedia.com/software/flex/productinfo/brz_overview/



6 Оперна партія веб-додатків


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



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


Приклад: Завдання моделі подій для форми календар (Джерело: http://www.whatwg.org/specs/web-apps/current-work/)

<calendar>
<div class="vcalendar">
<span class="prodid">-//hCalendar//EN</span>
<span class="version">2.0</span>
<p class="vevent">
<a href="http://www.web2con.com/">
<span class="dtstart">20041005</span>-
<span class="dtend">20041007</span>
<span class="summary">Web 2.0 Conference</span>
</a>
</p>
</div>
</calendar>


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 і встановити його на свій сервер.


Порівняльна таблиця мов розмітки для користувача інтерфейсу

















































































Мова розмітки MXML XAML XUL UIML
Готовність В даний час Офіційно очікується в 2006 році В даний час В даний час
Доступність додатків
Платформи Виконується на будь-якій платформі через Flash Player 7 Виконується тільки на Longhorn Виконується на платформах Windows / Unix / Mac через Gecko-базований бразуер Перетворений документ доступний на будь-яких платформах
Пристрої Незалежність в рамках CLR Пристрій-незалежний мову
Серверна частина Flex Presentation Server Longhorn Немає спеціальних вимог Будь-який з UIML-процесорів на стороні сервера
Об’єктно-орієнтований програмний мову ActionScript 2.0 Мови сімейства. NET Javascript, Python, C++ Java, Javascript
Розширені елементи призначеного для користувача інтерфейсу для навігації та контролю даних Відмінно Добре Середньо Немає підтримки
Векторна графіка Відмінно Відмінно Середньо Немає підтримки
Спецефекти елементів призначеного для користувача інтерфейсу Відмінно Добре Середньо Використовує Java AWT
Модель подій (діапазон контрольованих подій, ефективність моделі) Добре Добре Добре Відмінно
Асоціативний рівень сприйняття моделі Добре Середньо Середньо Відмінно
Документація Відмінно Середньо Середньо Добре

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*