![Закрыть [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Последнее направление в web-разработке - это использование опыта разработки расширенных клиентских приложений в интернете. Технология Asynchronous JavaScript and XML (Ajax) расширила диапазон способов разработки и идентичный пользовательскому взгляд на интернет, преобразуя их в такую форму, которая скоро заменит стандартные полнофункциональные клиенты для настольных компьютеров. И все же Ajax (и современная технология браузеров) терпит неудачу в нескольких областях:
- обеспечение интерфейса пользователя с большим объемом анимации;
- несложное обеспечение стандартного представления в различных браузерах, в том числе и старых версий;
- простая реализация определенных классов приложений, в том числе таких приложений, которые создаются на лету.
Но это как раз и есть те области, в которых OpenLaszlo демонстрирует превосходство. Прежде, чем углубиться в архитектуру, давайте потратим часть времени и рассмотрим, что же представляет собой OpenLaszlo.
Laszlo, язык, который использует OpenLaszlo - это декларативный подход к созданию виджетов или целых приложений при помощи XML и JavaScript. Этот сплав языка разметки и языка сценариев похож на современную комбинацию HTML/JavaScript. Вместо того, чтобы интерпретировать язык на стороне клиента при помощи браузера, Laszlo преобразуется в формат Macromedia Flash на стороне сервера. Это практически автоматом обеспечивает поддержку различных браузеров, поскольку Flash обеспечивает стандартный рабочий цикл. Так как Flash - это векторный формат, он также обеспечивает очень гибкие и подвижные компоненты интерфейса пользователя, которые можно многократно использовать в широком смысле слова.
Однако это еще не все, что доступно OpenLaszlo. OpenLaszlo поддерживается дополнительным контейнером на стороне сервера, OpenLaszlo Server, который обеспечивает расширенную интеграцию и поддержку удаленных вызовов процедур, Web-сервисов и сервисов перекодировки (которые позволяют выполнять такие услуги, как потоковая передача длинных MP3 файлов пользователю). Laszlo как язык также использует существующие концепции и методологии проектирования, которые позволяют создавать компоненты действительно многократного использования буквально за минуты. Выполненные вами компоненты будут также чрезвычайно привлекательными на вид и понятны пользователям. Рисунок 1 показывает пример в виде пользовательского интерфейса (UI) для приложения бегущей ленты о курсах акций, созданной в OpenLaszlo.
Рисунок 1. Простой пользовательский интерфейс OpenLaszlo
Знание Flash не является необходимым условием для чтения этой статьи; однако следует иметь основное представление о JavaScript и о том, чем этот язык отличается от традиционных объектно-ориентированных языков программирования. Кроме того, статья принесет больше пользы, если вы знаете основы объектно-ориентированного программирования, а также разработку традиционных пользовательских интерфейсов--Swing, Standard Widget Toolkit (SWT), Microsoft Foundation Classes (MFC) и так далее.
Компоненты: гибкие и расширяемые
В настоящее время создание гибких и расширяемых компонентов интерфейса пользователя для web ложится на разработчиков. Многие технологии (пользовательские библиотеки тэгов, абстракции PHP и так далее) созданы для борьбы с общей проблемой: часто разработчикам приходится комбинировать много тэгов HTML, чтобы создать комплексные компоненты, которые требуются для современных web-приложений. Не секрет, что объектно-ориентированные технологии являются полезными, поэтому язык Laszlo содержит много парадигм объектно-ориентированного программирования. Рассмотрим некоторые основные компоненты, которые нам доступны.
Каждое приложение Laszlo составляется из XML-файлов[которые содержат декларативную информацию об интерфейсе пользователя (UI) и код JavaScript], а также файлов ресурсов (изображений, внедренного Flash-содержимого и аудио), которые OpenLaszlo комбинирует, чтобы создать окончательные материалы. Корневой контейнер - это тэг
<canvas>. <canvas> в некоторых отношениях похож на тэг <body> в HTML-документе. Он может включать несколько атрибутов, в том числе ширину, высоту и цвет фона. <canvas> в исходном файле - это просто тэг XML, но каждый тэг представляет собой компонент или класс, а это означает, что он может иметь ассоциированные методы, анимацию и т. п. Позже мы подробнее поговорим об особенностях компонентов; а сейчас вы можете использовать этот тэг и объект <statictext> декларативным способом для создания канонического примера "Hello, World!", который показан в листинге 1.
Листинг 1. Пример "Hello, World!" на Laszlo
<canvas width="300" height="200" bgcolor="white">
<statictext>Hello, World!</statictext>
</canvas>
|
Пока я опущу подробности того, как это преобразуется и размещается в формате Flash, но достаточно сказать, что OpenLaszlo берет на себя всю основную работу. Еще один важный момент, который полезно знать о компонентах OpenLaszlo - это то, что они обычно поддерживаются Flash-ресурсами. Это означает, что они могут быть векторными, и следовательно, можно разработать общие компоненты, которые будут использоваться при различных разрешениях. Многие основные компоненты можно использовать без предварительной настройки. Такие объекты, как <button>, <checkbox>,
<list>, <menu> и <tree> знакомы каждому, кто работал с графическим интерфейсом пользователя (GUI).
Как и следовало ожидать, можно предоставить собственные наглядные ресурсы для многих из этих базовых компонентов. В качестве примера рассмотрим использование стандартного компонента <basebutton>, определяющего такие события, как onmouseover, для создания своей пользовательской кнопки. Чтобы создать простой ролловер, можно просто воспользоваться файлами PNG или JPG, хотя на самом деле это не так интересно. Самое замечательное - это то, что в качестве ресурса можно использовать файл Flash, и благодаря этому создавать масштабируемые и анимированные кнопки. В результате в Flash-ресурсе не размещается логика (например, ActionScript), но зато можно использовать все принципы Flash-анимации. Раньше для того, чтобы создать полнофункциональное приложение на Flash, нужно было знать многие аспекты программирования; теперь, если вы занимаетесь разработкой на OpenLaszlo, вам больше не нужно об этом задумываться. Безусловно, система OpenLaszlo берет на себя заботу о том, чтобы объединить все ваши Flash-ресурсы в один файл Flash для разработки; подробнее об этом будет рассказано позже, в разделе "Разработка: SOLO или проксированные приложения".
Как и любые хорошие объектно-ориентированные компоненты, компоненты OpenLaszlo обрабатывают события (такие как onmouseover), которые могут быть объявлены внутритекстовым образом (как <button onclick="buttonClicked()">); можно также описать обработчики событий метода в отдельном компоненте или экземпляре компонента, как в листинге 2. Это позволит программировать естественно и привнесет в процесс разработки на OpenLaszlo принцип анонимных внутренних функций. Техника становится предельно эффективной в сочетании с тем фактом, что любой компонент является расширяемым, а следовательно, настраиваемым.
Листинг 2. Событие, описанное в экземпляре <view>
<canvas>
<view bgcolor="0xcccccc" width="50" height="50">
<method event="onmouseover">
// Keyword this is used in the familiar JavaScript sense.
// Most of JavaScripts scoping
// concepts apply directly to Laszlo
this.setAttribute('bgcolor', 0x000000);
</method>
<method event="onmouseout">
this.setAttribute('bgcolor', 0xcccccc);
</method>
</view>
</canvas>
|
Программный код листинга 2 может быть полезным в небольшом количестве случаев, где нет необходимости в многократном использовании компонентов, но как быть в остальных случаях? К счастью, можно расширить любой существующий компонент, чтобы создать новый. Все, что нужно сделать - это использовать тэг <class> для определения нового класса, примерно так:
<class name="customView" extends="view"> |
По умолчанию, все пользовательские классы расширяют тэг <view>, который очень похож на тэг HTML <span> в том отношении, что он служит, главным образом, в качестве контейнера. Даже простое расширение может оказаться полезным, поскольку можно использовать атрибуты, чтобы настроить компонент для конкретных потребностей; некоторые основные примеры по характеру почти аналогичны CSS, предоставляя размеры по умолчанию, цвета фона и так далее. Конечно, на этом развлечение не заканчивается: в компоненты можно включать методы, анимацию, свойства конструктора и многое другое. Представим себе смесь полностью объектно-ориентированного подхода к интерфейсу пользователя, как, например, Swing, с легкой и быстрой разработкой функций HTML.
Ограничения: Эффективное взаимодействие
Одной из главных задач полнофункционального интерфейса пользователя явялется управление макетом. Laszlo поддерживает (через компоненты макета) многие стандартные подходы. Например, можно использовать объект <simplelayout>, который имеет два главных атрибута. Атрибут axis позволяет задать ориентацию макета по оси x или по оси y, тогда как атрибут spacing позволяет управлять интервалами между компонентами. Для контейнера можно объявить несколько макетов, для того чтобы сочетать как вертикальные, так и горизонтальные интервалы. Как и все в языке Laszlo, это просто принцип, но хорошо продуманный. Laszlo содержит также сетевые макеты и макеты, которые изменяются, чтобы заполнить область, но не это больше всего восхищает в Laszlo. То, что заслуживает восхищения - это функция условной модели constraint model, и то, насколько изящно она может осуществлять управление интерфейсом пользователя и эффектами анимации.
Заместитель для большинства событий
При каждом изменении атрибута в компоненте Laszlo запускается событие. События могут быть ожидаемыми, как описано в разделе "События и наследование." Это замечательная функция -- она устраняет необходимость добавлять слушатели и т. п. для каждого атрибута - но при этом приводит к большому количеству избыточного кода. Как хорошо было бы, если бы элементы могли использовать эти изменения атрибутов более удобным способом, примерно так, как применяются зависимости в электронной таблице? Именно этого можно добиться при помощи условий. Любому атрибуту в Laszlo вместо стандартного значения можно присвоить условное выражение. Условное выражение начинается с символа доллара ($) и имеет следующий формат:
$when{ConstrainedExpression}
|
Здесь
when
- это либо always, либо
once, либо immediately. Если
when
пропущено, то значением по умолчанию будет always, что означает, что при каждом изменении зависимости ContrainedExpression условие будет переоцениваться. Выбор значения once полезно в том случае, если условие инициализируется статически только один раз, поскольку тогда оно будет оценено только один раз, а эффективность увеличится. Еще одно значение, immediately, можно использовать для оценки условия, если задан вложенный элемент, а условие не зависит от других объектов
Давайте начнем с простого примера. Что делать, если вы хотите, чтобы элемент мог изменять размеры, но при этом внутри него был всегда размещен другой элемент? В листинге 3 показано, как этого добиться. В этом листинге для управления размером описывающего прямоугольника используется стандартный компонент Laszlo slider.
Листинг 3. Компонент slider, управляющий размером прямоугольника, который влияет на размер внутреннего прямоугольника
<canvas>
<slider id="sliderItem" y="20" x="10" minvalue="50" maxvalue="300"
value="50"/>
<view y="$once{sliderItem.y + sliderItem.height + 5}"
x="$once{sliderItem.x}" bgcolor="0xff0000"
width="${sliderItem.value}" height="${width}">
<view bgcolor="0x0000ff"
width="${parent.width / 5}" height="${width}"
x="${(parent.width / 2) - (width / 2)}"
y="${(parent.height / 2) - (height / 2)}"/>
</view>
</canvas>
|
Как можно заметить, поскольку x - это просто атрибут <view>, можно задать значение с использованием условия. В Laszlo используется иерархический подход к идентификации объектов, при котором родительский объект всегда относится к охватывающему элементу управления. Используя этот синтаксис, можно пройти через всю структуру, но можно также задать атрибуты name и id. Разница между этими двумя атрибутами заключается в том, что id iидентифицирует конкретный элемент (и следовательно может использоваться в документе только один раз), что позволяет использовать его как глобальный (как в листинге 3, где идентификатор id был использован для элемента управления slider а затем этот же id использовался в условии: ${sliderItem.value}).
Обратите внимание на использование в этом примере параметра once для условия, которое задает позиции x и y цветного прямоугольника. На рисунке 2 показан вывод кода листинга 3.
Рисунок 2. Вывод листинга 3
Условия хорошо подходят для замены простых событий, а также для условий моделирования макета, но они предлагают и много других функций. Поскольку можно задать любое произвольное значение атрибута (да, сюда входят и значения, которые задаются вами) для условного выражения или использовать его в условии, то здесь существует много возможностей. В следующем разделе мы используем условие в сочетании с системой анимации Laszlo, чтобы добиться эффективных результатов, которые будут изящными и легкими.
Одной из наиболее критических деталей представления в современной разработке интерфейса является анимация. Анимация придает особый стиль, а также предоставляет наглядные ключи от интерфейса для пользователя. Кроме того, это действительно сильная сторона Macromedia Flash и, если смотреть более широко, языка OpenLaszlo. Анимация также представляет собой одну из немногих технологий, которая не может быть в настоящее время выполнена эффективно для любых браузеров без разработки специальных расширений для каждого из них.
В Laszlo есть два элемента, которые могут помочь ускорить разработку анимации: Элемент <animator> - это базовый компоновочный блок любой анимации, а элемент <animatorgroup> - контейнер для элементов <animator>. Анимация в Laszlo - это не что иное, как возможность изменить значение атрибута по истечении определенного промежутка времени и в сложных сочетаниях. С этими простыми принципами и компоновочными блоками возможно все.
Элемент <animator> имеет обязательный атрибут, который называется attribute (как же еще?). Он определяет атрибут, над которым будет работать аниматор. Этот элемент имеет также обязательный атрибут to , который принимает численные значения и представляет окончательное значение анимируемого атрибута. Последний из обязательных атрибутов - это duration; он определяет время данной фазы анимации в миллисекундах. Для удобства элемент <animator> имеет также необязательный атрибут from, который задает исходную точку для значения атрибута. Используя только эти атрибуты, вы можете сконструировать простую программу, которая анимирует изменения ширины представления, как в листинге 4.
Листинг 4. Простой пример анимации: Изменение ширины представления
<canvas>
<view bgcolor="#ff0000" width="50" height="${width}">
<animator attribute="width" to="200" duration="1000"/>
</view>
</canvas>
|
В этом примере появится красный квадрат, который в течение одной секунды расширится до размера 200 на 200 пикселей. Если вы попробуете выполнить этот пример, то можете заметить, что движение не является линейным. Причина этого в том, что значение по умолчанию для атрибута motion - easeboth. Если использовать значения easein, easeout или easeboth, то движение будет замедляться соответственно в начале, конце или в начале и в конце анимации. Последнее значение, которое может принимать атрибут motion - это linear, которое поддерживает скорость анимации постоянной. Обратите внимание, что анимация начинается сразу же; это поведение можно изменить при помощи атрибута start, значение которого по умолчанию - true. И наконец, доступны еще несколько атрибутов, один из которых управляет числом повторений каждой фазы (repeat), а также различные события -- onstart, onfinish и т. д.-- , которые поддерживают возможность добавить пользовательскую логику после того, как фаза завершена.
Сложная анимация с элементом <animatorgroup>
Как уже говорилось, элемент <animatorgroup> - это всего лишь контейнер для элементов <animator> и других элементов <animatorgroup>. Однако при добавлении этого типа контейнеров открывается много новых возможностей. Элемент <animatorgroup> может определять все те же атрибуты, что и элемент <animator>, а также новый атрибут: process. Любой из упоминавшихся ранее атрибутов образует каскад, если применить его к элементу <animatorgroup>. Новый атрибут, process, управляет порядком, в котором выполняются потомки группировки. Если значение равно sequential, то объекты будут выполняться один за другим, пока не будет выполнена вся группа. Еще один вариант - simultaneous.
При помощи этих двух параметров становятся возможными очень захватывающие и интересные эффекты. Например, можно создать объект, который перемещается по всему экрану и одновременно изменяется в размере. А благодаря тому, что группа может содержать другие группы, вы на самом деле можете начать создавать превосходные структуры и строить свою анимацию.
Условия и пользовательские атрибуты, которые способствуют получению выразительных результатов
После того, как вы прочитали вывод, сделанный выше, процесс создания анимации может показаться достаточно упрощенным и ограниченным. Возможно, вам интересно, как выполнить анимацию, которая требует более сложных расчетов. Самый общий ответ - использовать пользовательские свойства и условия. В качестве примера предположим, что вы имеете объект, который должен перемещаться по круговой орбите по периметру окна. Естественно, вы не можете анимировать атрибуты x и y таким способом. Но вы можете задать условие, что позиция x и y должна быть функцией от пользовательского атрибута, который вы анимируете в некоторых пределах. Как видно из листинга 5, расположить орбиту представления по круговому пути очень просто, если использовать условия.
Листинг 5. Совместное использование условий и анимации
<canvas>
<view bgcolor="#ff0000" width="20" height="$once{width}"
x="${radius + (radius * Math.cos(animCnt))}"
y="${radius + (radius * Math.sin(animCnt))}">
<attribute name="animCnt"/>
<attribute name="radius" value="30"/>
<animator attribute="animCnt" from="0" to="$once{Math.PI * -2}"
duration="1000" motion="linear" repeat="Infinity"/>
</view>
</canvas>
|
С помощью этих методов можно создавать очень выразительные анимации. Вам никогда не придется беспокоиться о количестве кадров в секунду и других подобных расчетах, поскольку все эти детали вас не касаются. Кроме того, поскольку условия могут задействовать несколько компонентов, то анимация одного компонента может изменять состояние другого.
Огромное преимущество OpenLaszlo - это возможность без лишних сложностей рисовать пользовательские фигуры. Эти фигуры могут быть статическими или динамическими, что позволяет отвечать на действия пользователя или даже создавать графические приложения. Пользовательское рисование выполняется в компоненте <drawview>, который играет роль холста. Хотя рисование может быть декларативным, по характеру оно все же очень процедурное. После того, как вы овладеете рисованием, очевидно, что вы сможете применить свои навыки к динамическим или статическим вариантам использования.
Элемент <drawview> в действительности имеет четыре пользовательских атрибута. Эти атрибуты являются глобальными и управляют свойствами, заданными по умолчанию для сегментов, нарисованных на холсте, в том числе: fillStyle, globalAlpha, lineWidth и strokeStyle. Все эти атрибуты можно изменять при помощи десяти пользовательских процедур, которые специфичны для элемента <drawview>.
Интерфейс рисования определяется десятью процедурами. Эти процедуры перемещают карандаш (pen), который в конце концов создает путь (path); к этому пути затем можно применить обводку или заливку (если он замкнут) с градиентом и цветом.
Исходная точка для карандаша - 0,0. При помощи метода moveTo(x, y) карандаш можно переместить в другую точку. Этот метод также создает новый путь. Путь - это не что иное, как последовательность точек, которой впоследствии можно придать контур или заливку. Чтобы добавить подпуть к текущему пути и положение карандаша в заданной точке, можно применить метод lineTo(x, y). Существует также аналогичный метод quadraticCurveTo(cpx, cpy, x, y), который берет координату и координату контрольной точки кривой, но во всем остальном не отличается от lineTo().
После построения пути следует сделать его видимым, для чего необходимо придать ему контур или заливку. Вызов метода stroke() использует текущее значение атрибута strokeStyle (цвет в шестнадцатеричном формате, например, 0x000000) а также атрибут lineWidth, чтобы определить, как именно обводить контур. Метод fill() замыкает любой подпуть, а затем выполняет заливку каждого подпути по очереди, используя атрибут fillStyle (который может быть цветом или, как говорилось ранее, объектом градиент) чтобы определить, как именно прорисовывать заливку. В листинге 6 показан простой пример, в котором несколько квадратов обводятся и получают заливку разными способами.
Листинг 6. Простой пример рисования
<canvas width="115" height="95">
<drawview width="200" height="200" x="5" y="5">
<method event="oninit">
// Draw a black square
this.strokeStyle = 0x000000;
this.moveTo(0, 0);
this.lineTo(25, 0);
this.lineTo(25, 25);
this.lineTo(0, 25);
this.closePath();
this.stroke();
// Reset the path and draw a square with red fill
// and a black outline
this.beginPath();
this.fillStyle = 0xff0000;
this.moveTo(40, 0);
this.lineTo(65, 0);
this.lineTo(65, 25);
this.lineTo(40, 25);
this.closePath();
this.fill();
// Draw a square with a square filled with a gradient
// from white to gray
this.beginPath();
// Create the gradient, adding color 'stops' (where
// the color shifts)
var gradient = this.createLinearGradient(80, 0, 105, 25);
gradient.addColorStop(0, 0xffffff);
gradient.addColorStop(1, 0x000000);
this.fillStyle = gradient;
this.moveTo(80, 0);
this.lineTo(105, 0);
this.lineTo(105, 25);
this.lineTo(80, 25);
this.closePath();
this.fill();
this.stroke();
</method>
</drawview>
</canvas>
|
Рисунок 3 показывает, как вывод листинга 6 будет выглядеть в окне браузера:
Рисунок 3. Вывод листинга 6
В примере используется метод oninit(), который доступен для всех объектов. Он вводит методы beginPath() и closePath() которые могут быть использованы для управления путем. Он также вводит градиенты, которые в Laszlo доступны в двух формах: линейный и радиальный. Каждый градиент отображается на пространство координат как прямоугольник или круг. Чтобы задать цвет, используется метод addColorStop(), который позволяет поместить цвет на промежутке от 0 до 1. Цвет на конце 0 будет началом градиента, а 1 помещается на другом конце. До задания конечных цветов можно изменить свойство globalAlpha, чтобы придать частичную прозрачность цветам градиента.
Сочетание рисования и анимации
В этом разделе описываются все основные средства для рисования, предоставляемые OpenLaszlo. Возможно, вам интересно, как можно использовать средства анимации, описанные в разделе "Анимация и рисование" при помощи API процедурного рисования. Один из способов - это добавление пользовательских атрибутов к элементу <drawview>. Например, если вы хотите получить динамически изображаемый круг, а также анимировать размер радиуса, то вы можете создать атрибут radius, выполнить анимацию свойства (обычным способом), а потом описать обработчик события для события изменения радиуса (<method event="onradius">), которое будет повторно прорисовывать элемент. При помощи этой стратегии можно сделать почти все.
Самые нетерпеливые из читателей, возможно, уже перешли к разделу Ресурсы , чтобы посмотреть, какие приложения OpenLaszlo доступны. Но если вы дочитали статью до этого места, не заглядывая в раздел "Ресурсы", нетрудно представить себе вашу озадаченность тем, как превратить файлы Laszlo в то, что можно разместить в интернете. В этом разделе рассматривается как раз эта тема, а также разрешаются сомнения по поводу того, какая модель размещения лучше подойдет именно вам, с проксированием или без него (SOLO).
Размещение SOLO (то есть автономный вывод OpenLaszlo) поддерживается на любом web-сервере, который может обслуживать Flash-файлы. Чтобы преобразовать приложения Laszlo в Flash-файлы, следует вызвать компилятор (например, lzc file.lzx -- .lzx - это расширение файлов Laszlo), иэ создать файл вывода, который можно будет воспроизводить любой входящей в обязательный минимум версией Flash. Это довольно просто: разместите созданный файл на web-сервере и включите его в тело HTML-документа; все, можно начинать работу. Компилятор OpenLaszlo берет на себя всю грязную работу (объединение ресурсов, генерирование кода и т.п.). Впрочем, существуют ограничения на функции, которые допустимы при размещении SOLO, и некоторые из весьма эффективных функций не доступны при этом варианте размещения (например, вызовы web-сервисов, RPC и некоторые виды передачи потокового аудио/видео).
Размещение с проксированием: все функции
При размещении с проксированием вы получаете все, что может предложить система OpenLaszlo. Но и здесь есть одно препятствие: Для использования этой модели размещения необходимо, чтобы на вашем сервере был установлена среда OpenLaszlo Server. Эта серверная среда представляет собой web-приложение, которое располагается поверх сервера приложения или контейнера сервлета J2EE и обрабатывает все запросы для файлов .lzx. Одна из замечательных функций сервера OpenLaszlo Server заключается в том, что при простом размещении файла Laszlo на сервер с установленным компонентом Laszlo Server вы можете перейти на страницу и просмотреть результат, поскольку файл компилируется сервером на лету и помещается в кэш. Еще одно заметное преимущество OpenLaszlo Server заключается в том, что он находится между размещаемым приложением и другими ресурсами, в которых может нуждаться приложение, выполняя любые необходимые преобразования. Это позволяет Laszlo поддерживать (в конфигурации с проксированием) такие технологии, как XML-RPC.
У большинства пользователей OpenLaszlo Server не должна вызвать сложностей, поскольку он поставляется в установочном архиве вместе с сервером Tomcat. Для тех, кто использует IBM WebSphere® для других серверов приложений J2EE архив web-приложения доступен в разделе Ресурсывместе с рекомендациями по настройке среды. Хотя в данной статье администрирование сервера не рассматривается, много полезных ресурсов можно найти в разделе Ресурсы.
Когда следует использовать размещение с проксированием
Поскольку медиа-запросы не проксируются при автономном размещении (SOLO), приложения SOLO поддерживают только такие медиатипы, как Flash, JPG, и MP3. Кроме того, поскольку в этой конфигурации отсутствует проксирование данных, такие элементы, как RPC, SOAP и устойчивые соединения с сервером не поддерживаются при размещении SOLO.
Хотя в этой статье приводится только краткий обзор размещения с проксированием и SOLO, все же она дает представление об эффективности сервера OpenLaszlo Server. В последнем разделе будут рассмотрены связывание данных и поддерживаемые Laszlo функции RPC, некоторые из которых могут выполняться по-другому или присутствовать только при размещении в режиме с проксированием.
Функции связывания данных и RPC
Когда дело доходит до отображения очень больших объемов данных в Laszlo, то функции связывания данных, предоставляемые языком, оказываются очень удобными. Связывание данных позволяет отобразить значения конкретных компонентов на существующую структуру данных без дополнительного программирования. Связывание данных первоначально использовалось для создания макетов на основе форм, когда большое количество объектов вставляется в визуальный шаблон. Можно связать текстовые поля интерфейса пользователя и другие материалы с внешними хранилищами данных, а эти данные можно использовать для заполнения виджетов, например, полей со списком или полей выбора.
Источником данных обычно служит XML-документ, статически скомпилированный в приложении OpenLaszlo или динамически запрашиваемый. У вас есть возможность разрабатывать менее автоматизированные решения при помощи API по типу XMLHttpRequest, но использование связывания данных уменьшит количество времени, затрачиваемого на разработку. В OpenLaszlo вы определяете те элементы в HTML-документе, которые следует связать, добавлением выражения XPath в атрибут datapath. В листинге 7 показан простой пример связывания некоторой контактной информации с определенными текстовыми областями.
Листинг 7. Простое связывание данных контактной информации
<canvas>
<dataset name="contactInfo">
<contacts>
<contact>
<name>John Doe</name>
<phone>555-2000</phone>
<DOB>16-01-1973</DOB>
<role>Developer</role>
</contact>
<contact>
<name>Jane Doe</name>
<phone>555-3000</phone>
<DOB>27-02-1974</DOB>
<role>Manager</role>
</contact>
</contacts>
</dataset>
<view datapath="contactInfo:/contacts/">
<simplelayout axis="y" />
<view datapath="contact/">
<simplelayout axis="x" />
<text datapath="name/text()" />
<text datapath="phone/text()" />
<text datapath="DOB/text()" />
<text datapath="role/text()" />
</view>
</view>
</canvas>
|
Приведенный выше пример вводит другой важный принцип связывания данных: наследование XPath. Как ясно из примера, внешнее представление связано с корневым узлом XML-документа (<contacts>), а вложенное представление связано с отдельным узлом <contact>. Еще один интересный момент, который стоит отметить, это то, что отображаются обе записи, как видно на рисунке 4.
Рисунок 4. Вывод листинга 7
Это поведение по умолчанию, если только вы не определили конкретный узел контактов (например, datapath="contact[1]"). Используя поведение по умолчанию, LzReplicationManager реплицирует соответствующие элементы <view> по мере необходимости.
Впрочем, при помощи связывания данных можно делать не только это, ведь объекты <dataset> могут быть описаны как удаленные. Кроме того, они могут динамически обновляться, при этом уровень связывания данных делает всю основную работу. Безусловно, можно использовать связывание данных несколькими способами, как и большинство функций Laszlo. Метод applyData() может быть отменен для элементов, объявленных в атрибуте datapath, для пользовательского форматирования данных. Событие ondata объекта <dataset> может быть использовано аналогичным образом для выполнения другого пользовательского обновления. Кроме этих простых отмен, Laszlo включает много более сложных интерфейсов и объектов (в том числе, элементы <datapointer>), которые могут заинтересовать более квалифицированных разработчиков на Laszlo.
Хотя полное описание принципов RPC в данной статье не приводится, мне представляется важным рассказать о способах поддержки этой функции OpenLaszlo. При размещении с проксированием OpenLaszlo поддерживает три типа RPC: JavaRPC, SOAP и XML-RPC. Все эти методы имеют специфические компоненты, относящиеся к ним, но наследуют от компонента OpenLaszlo RPC <rpc>. К тому же, для RPC необходим сервер OpenLaszlo Server. Он обрабатывает маршаллинг данных и проксированные запросы к удаленным серверам.
Используя JavaRPC (или любой другой метод RPC), вам не придется изменять существующую логику на стороне сервера, чтобы добиться совместимости с OpenLaszlo. Это является преимуществом данной среды по сравнению с решениями на базе Ajax, которые часто требуют дополнительной настройки или установки сторонних программ для отображения характерных для Ajax запросов на модель JavaRPC. Кроме того, поскольку OpenLaszlo создает прокси-суррогаты вместо программиста (при помощи Laszlo Delegates), разработчику остается меньше работы. Вследствие того, что методы RPC в OpenLaszlo весьма просты по сравнению с их более традиционными конкурентами, разработчики, знакомые с RPC смогут сразу погрузиться в работу с ними. Те, кто не имеет опыта в RPC, могут отдохнуть, зная, что поддержка RPC делает возможной очень тесную интуитивную связь с логикой на стороне сервера.
Как вы могли убедиться, в OpenLaszlo очень много замечательных функций. Эта среда представляет собой изящное и завершенное решение, позволяющее решить множество вопросов в будущем. Автор надеется, что, благодаря этой статье, читатели вкратце познакомились с некоторыми из этих уникальных функций, а также получили достаточно базовой информации, чтобы подготовиться к использованию OpenLaszlo для разработки проектов. Советую вам углубиться в документацию и примеры, перечисленные в разделе Ресурсы этой статьи. Думаю, что после их изучения вы обнаружите, что разработка на OpenLaszlo очень быстрый и плодотворный процесс.
Научиться
-
Оригинал статьи Web clients fatten up with OpenLaszlo;
-
Комплексный взгляд на OpenLaszlo вы найдете в официальной документации OpenLaszlo;
-
Примеры приложений можно найти в библиотеке примеров Laszlо;
- Побродите по технической библиотеке раздела Web Architecture zone и выберите статьи и практические руководства по всем темам, которые вас интересуют.
Получить продукты и технологии
-
Попробуйте загрузить файлы OpenLaszlo, включающие исходные тексты и инструкции по установке;
- Просмотрите страницу IDE for Laszlo проект Eclipse;
- Познакомьтесь с проектом alphaWorks Faces for Laszlo, который объединяет Laszlo и JavaServer Faces;
-
Сайт developerWorks предлагает все виды новых технологий и продуктов для загрузки; загружаемые файлы по Web-архитектуре для разработчиков.
Обсудить
- Примите участие в обсуждении материала на форуме.
- Примите участие в форуме по XML;
-
Блоги OpenLaszlo: здесь можно найти новости а также советы и приемы по разработке на Laszlo;
-
Энциклопедия OpenLaszlo содержит много информации общего характера, а также ссылки на другие полезные материалы;
-
Блоггеры сайта developerWorks держат руку на пульсе отраслевых технологий.
Содержание
Теги
КнопкаПопулярные теги отображает самые распространенные теги для данной области контента (например: Java, Linux, WebSphere).
Кнопка Мои теги отображает Ваши теги для данной области контента (например: Java, Linux, WebSphere).
Популярные теги статьи |
Мои теги статьиПерейти к списку тегов
Популярные теги статьи |
Мои теги статьи