Внедрение объектов в документ HTML

Для выполнения апплета на клиентском компьютере, как уже говорилось, необходима среда Java Runtime Environment (JRE). Для разработки и компиляции апплетов (и других Java-приложений) необходим Java Development Kit (JDK), также распространяемый бесплатно. Когда JDK установлен, то для компиляции, например, файла примера "AppletExample.java" достаточно выполнить такую команду:

"C:\Program Files\Java\jdk1.6.0_18\bin\javac.exe" AppletExample.java

( номер версии JDK в пути к компилятору, конечно, должен соответствовать установленному ).

При этом компилятор создаст файл AppletExample.class, который можно подключать к HTML-документу одним из показанных ранее способов.

Удобнее, конечно, работать не в командной строке, а в интегрированной среде разработки (IDE). Для этого вместе с JDK (по желанию пользователя) может быть загружена NetBeans IDE.

Среда JRE включает в себя компоненты самого широкого назначения, поэтому возможности апплетов практически не ограничены (за исключением, конечно, соображений безопасности). Сюда входит и графика (в том числе трехмерная!), и пользовательские формы, и доступ к данным, и разнообразные вычисления.

Если вы проделали предыдущее упражнение, то почувствовали, что "рисование" не очень-то похоже на рисование - на самом деле это чистое программирование. При таком подходе либо дизайнер должен уметь программировать в рамках той или иной технологии, либо программист обладать тонким художественным вкусом: разделение труда пропадает. Такое положение дел давно уже не считается нормальным, и все продвинутые информационные технологии обязательно предоставляют средства разделения содержания, представления и поведения, а также разделения труда соответствующих специалистов. Так разделены HTML, CSS и Javascript. Аналогичные разделения существуют и во всех рассматриваемых в данной лекции технологиях - как правило, это основанная на XML разметка + CSS-подобные стили + программный код.

Рассмотрим еще одну Java-платформу, имеющую прямое отношение к данному курсу: JavaFX - программная платформа для создания RIA.

Программа, написанная на JavaFX Script, компилируется специальным компилятором в байт-код и подключается к HTML-документу как апплет.

Приведем небольшой пример.

1 package javafxapplication1;
 2 
 3 import javafx.stage.Stage;
 4 import javafx.scene.Scene;
 5 import javafx.scene.text.Text;
 6 import javafx.scene.text.Font;
 7 import javafx.scene.shape.Ellipse;
 8 import javafx.scene.paint.Color;
 9 import javafx.scene.paint.Stop;
10 import javafx.scene.paint.LinearGradient;
11 
12 Stage {
13     title: "Здравствуй, мир!"
14     width: 600 height: 400
15     scene: Scene {
16         content: [
17             Ellipse {
18                     centerX: 120, centerY: 60
19                     radiusX: 100, radiusY: 40
20                     fill: 
21                     LinearGradient {
22                         startX : 0.0 startY : 0.0
23                         endX : 1.0 endY : 0.0
24                         stops: [
25                             Stop { color : Color.BISQUE offset: 0.0 },
26                             Stop { color : Color.BLUE offset: 1.0 },
27                         ]
28                     }
29                 }
30                 Text { fill:Color.MAGENTA
31                     font : Font { size: 24 }
32                     x: 70, y: 60
33                     content: "Java FX"
34                 }
35         ]
36     }
37 }

Этот код, напоминающий JSON (нотацию объектов Javascript) описывает рабочую область 600*400 пикселов с эллипсом и надписью. Интересно то, что декларативная нотация JavaFX Script позволяет единообразно описывать графические элементы, элементы ввода данных и анимацию. Вводить код в NetBeans IDE помогает палитра компонентов; окно предварительного просмотра отображает результат. Предусмотрена возможность генерировать разметку графических объектов из чисто графических приложений - Adobe Photoshop, Illustrator и SVG-редакторов (через вспомогательный конвертер). Поддерживаются таблицы стилей.

К недостаткам JavaFx можно отнести невозможность распространения таких приложений без подключения к Интернет. По этой причине мы не включаем сюда работающий пример, а вместо этого даем ссылку на первоисточник: .

Adobe Flash и Scalable Vector Graphics

Adobe Flash

Еще одна хорошо известная платформа для веб-приложений. После Java-апплетов понять Flash-приложения довольно легко: это тоже программы, компилируемые в байт-код (файл swf) и запускаемые на клиентском компьютере виртуальной машиной - Flash Player. Аналогия полная. Разница в том, что Flash-приложения - это именно веб-приложения, т.е. они более специализированы. Возможно, поэтому размер дистрибутива Flash Player примерно на порядок меньше размера дистрибутива JRE.

Проигрывая апплетам в универсальности, Flash выигрывает с точки зрения типичных, первоочередных потребностей веб-разработчиков и пользователей Интернет. Пользователям нужно, чтобы веб-приложение запускалось быстро, а если для этого нужен какой-то плагин, то желательно, чтобы он загружался и устанавливался тоже быстро. Во всем этом Flash превосходит более тяжеловесную Java. Нужны и гарантии безопасности клиентской машины от вредоносных приложений - Flash более ограничен и, соответственно, безопасен. Разработчикам нужна, во-первых уверенность в том, что их приложения не останутся незамеченными из-за отсутствия у клиента необходимого плагина. Flash Player установлен в настоящее время примерно у 99% пользователей Интернет, JRE - у несколько меньшего количества пользователей (80-90% по разным оценкам). Кроме того, для быстрой разработки приложений очень нужен полноценный WYSIWYG-редактор - таким является Adobe Flash Professional. Для Java-приложений, конечно, существует целый ряд профессиональных IDE, которые предоставляют много полезных возможностей разработчикам. Однако веб-приложения презентационного и интерактивного характера, которые мы привыкли уже видеть на Flash, на JavaFx создавать пришлось бы старым, невизуальным способом - полноценного редактора для таких задач пока нет.

Впрочем, нельзя сравнивать коммерческую среду разработки Adobe Flash Professional с бесплатными NetBeans и Eclipse. Для работы с Flash-технологией вообще нет бесплатной среды разработки, содержащей хотя бы отладчик. Бесплатный SDK, однако относительно недавно появился - это Adobe Flex SDK, который позволяет теперь строить Flash-приложения на основе XML-подобной разметки (MXML) с поддержкой CSS-стилей и программного кода на объектно-ориентированном языке ActionScript.

Ниже показан пример разметки, включающей Flash-содержимое в HTML-документ и диаграмма (рис 19.3), описывающая развертывание необходимых для работы Flash-приложения артефактов на клиентском компьютере.

<object type="application/x-shockwave-flash" data="FlashExample.swf" 
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
         swflash.cab#version=6,0,0,0" width="400" height="300">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="FlashExample.swf" />
  <param name="loop" value="false" />
  <param name="menu" value="false" />
  <param name="quality" value="high" />
  <param name="play" value="false" />
  <p style="text-align: center;">
    <a href="http://www.macromedia.com/go/getflash/">Загрузить Flash Player</a>
  </p>
  <noscript>
    Ваш браузер не поддерживает воспроизведение Flash.
  </noscript>
</object>

Говоря о Flash, нельзя не добавить, что эта технология в настоящее время переросла рамки веб-приложений, и позволяет создавать кроссплатформенные приложения, выполняемые за пределами браузера - при помощи среды Adobe Integrated Runtime (AIR). Аналогия с Java продолжается.

Scalable Vector Graphics (SVG)

Язык разметки векторной графики был разработан консорциумом WWW и появился в виде спецификации в 2001 году. Этот язык, основанный на XML, позволяет описывать двумерные изображения, содержащие элементы анимации и интерактивности. Поддерживаются стили CSS и сценарии Javascript.

Привлекательность SVG - в простоте создания графики и ее включения в HTML-документ.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg  version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="#F60" />
      <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
  </defs>
  <ellipse  cx="250" cy="200" rx="200" ry="200" fill="url(#MyGradient)"/>
  <text id="Text" x="150" y="200" font-family="Verdana" stroke-width="2" 
font-size="50" stroke="red" fill="blue" > Здравствуй, мир! </text>
</svg>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Размещение SVG в HTML-странице</title>
</head>
<body>
  <object type="image/svg+xml" data="SvgExample.svg" width="600" height="400">
    <p>
      Для отображения SVG необходимо
      <a href="http://www.adobe.com/svg/viewer/install/auto/">загрузить плагин</a>.</p>
  </object>
</body>
</html>

Как видно из примера 19.3, SVG-документ представляет собой XML-документ с соответствующим ОТД. В корневой элемент документа svg вложены определения градиента, эллипса и текстового блока, представляющие собой элементы, напоминающие элементы XHTML. Этот код можно написать в обычном текстовом редакторе, а можно воспользоваться и WYSIWYG-редактором векторной графики: большинство таких редакторов поддерживает экспорт в SVG, и существуют специализированные SVG-редакторы (в том числе бесплатные).

Включение объекта в HTML-документ также происходит обычным образом - при помощи универсального элемента object. Некоторые браузеры поддерживают непосредственную интеграцию SVG-разметки в HTML-документ.

Самая большая проблема SVG - отсутствие поддержки браузером IE. Для отображения SVG в IE используется либо плагин (например, Adobe SVG Viewer), либо апплет (проект Batik), либо Flash-приложение (проект SVGWeb).

AJAX (Асинхронный Javascript с XML)

Идея этой технологии чрезвычайно проста и продуктивна: браузер может отправлять запрос серверу не только синхронно (отправил - дождался ответа - показал на экране), но и асинхронно (отправил, не прерывая работу в текущем режиме - получил ответ - показал на экране). Простой жизненный пример асинхронного запроса привести легко. Например, вы говорите попутчику: "Разбуди, когда прибудет поезд". После этого вы не будете ждать, пока он начнет вас будить, а спокойно ляжете спать. Пример синхронного запроса в жизни (т.е. когда вызывающая сторона не предпринимает ничего, пока не получит ответа) придумать сложнее - видимо, асинхронность более естественна для нас.

Примеры веб-приложений, где асинхронные запросы не заменимы синхронными:

Приведем простой пример: на веб-странице требуется отобразить информацию о курсе валют. Немного усложним задачу тем, что пользователь может пожелать узнать курс не только на сегодняшнюю, но и на любую прошедшую дату - это позволит лучше проиллюстрировать AJAX.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Получение курсов валют</title>
 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
 
  <link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />
 
  <script type="text/javascript">
    window.onload = function() {
      $("#datepicker").datepicker({
        onSelect: GetData,
        dateFormat: 'dd/mm/yy'
      });
    };
 
    function GetData(date) {
      $.get("http://www.cbr.ru/scripts/XML_daily.asp", { date_req: date },
      function(data) {
        var result = data.text.replace(/\w+ \w+ 1/g, '<br />1');
        $('#Valutes').html(result);
      });
    }
 
  </script>
 
</head>
<body>
  <p>
    Выберите дату:
    <input id="datepicker" type="text" /></p>
 
  <div id="Valutes">
  </div>
 
</body>
</html>

Код примера лаконичен. В теле HTML-документа присутствует поле ввода для даты datepicker и пустой контейнер Valutes для результатов запроса.

Разбор скрипта легче начать с функции GetData(date), которая запускается в тот момент, когда дата выбрана. Что нужно сделать в этот момент? Отправить асинхронный запрос по определенному Интернет-адресу (в данном примере использована веб-служба Центробанка РФ), передав в качестве параметра выбранную дату. Когда будет получен ответ - отобразить его в секции Valutes.

Вся эта работа выполняется при помощи функции $.get библиотеки JQuery (можно было бы проделать все и на "чистом" Javascript, без дополнительных библиотек, но код стал бы на порядок более громоздок и менее очевиден).

Первый параметр функции $.get - URL, по которому следует сделать запрос (по умолчанию запрос - асинхронный).

Второй параметр - объект, объединяющий параметры запроса. В данном примере это дата, а имя параметра - date_req (так установила техническая служба Центробанка).

Последний параметр особенно интересен: это функция обратного вызова ( callback function ). Это и есть способ уведомить клиента о том, что сервер прислал ответ. В жизни есть масса примеров, когда мы назначаем кому-либо функцию обратного вызова по окончании продолжительного действия. "Вспомнишь - позвони": здесь функция обратного вызова - "телефонный звонок". "Приедем - разбуди": функция обратного вызова - "пробуждение", и т.п.

В качестве последнего параметра указано определение функции, принимающей параметр data (это ответ сервера), делающей небольшое улучшение формата текста ответа ( data.text ) и выводящей его в секцию Valutes.

Для удобства выбора даты в данном примере использован объект datepicker (календарь) библиотеки JQuery UI (еще в ней имеется масса полезных визуальных компонентов, которые легко встраиваются в HTML-документы). Примечательно, что с календарем связано еще две функции обратного вызова. Во-первых, команда window.onload = function() {...} равносильна следующему указанию для браузера: когда содержимое данного окна полностью загрузится, сделай вот что: ... . И далее идет команда привязки объекта datepicker к полю ввода. Во-вторых, объект datepicker имеет событие onSelect ("дата выбрана"). Присваивая ему значение GetData, мы тем самым вновь устанавливаем обратный вызов: "Когда пользователь выберет дату, надо будет вызвать функцию GetData ".

С точки зрения пользователя асинхронность запроса к веб-службе означает, что, пока запрос выполняется, можно продолжать работу со страницей - ее чтение или заполнение формы. Можно заметить, что в HTML-коде примера нет тэга <object>. В основе технологии AJAX лежит объект XMLHttpRequest, который всегда создается из Javascript-кода. Подробное рассмотрение этого объекта выходит за рамки лекции. Достаточно сказать, что он "умеет" отправлять запрос серверу, отслеживать состояние запроса и делать обратный вызов по завершении запроса. Библиотека JQuery делает работу с XMLHttpRequest более лаконичной и независимой от браузера.

Microsoft Silverlight

Если история Flash уходит корнями в середину 1990-х, то технология Microsoft Silverlight появилась совсем недавно - в 2007 году и во многом учитывает недостатки своих предшественников в области RIA-технологий. Идея, в целом, та же: специальный плагин выполняет приложение, интегрированное в веб-страницу при помощи элемента object. В реализации основное отличие, пожалуй, следующее: для разработки Silverlight-приложения используются языки достаточно широкого назначения. Кроме того, в Silverlight решена задача отделения содержания от поведения: для определения первого используется разметка (XAML), а для второго - код на языке программирования из семейства .NET (в первую очередь, C# или Visual Basic).

XAML ( Extensible Application Markup Language - расширяемый язык разметки приложений) - еще один язык разметки,основанный на XML. XAML используется для создания графических интерфейсов нового поколения Windows-приложений, основанных на WPF ( Windows Presentation Foundation ).

Семейство языков .NET интересно тем, что оно включает современные объектно-ориентированные языки с массой усовершенствований по сравнению с классическими C++ и Java. Также впечатляет количество библиотек, входящих в .NET Framework, которая бесплатно поставляется Microsoft и выполняет роль каркаса, берущего на себя компиляцию, запуск и обеспечение .NET-приложений необходимыми функциями.

Silverlight-приложения тоже имеют доступ ко многим библиотекам .NET (которые поставляются в урезанном виде вместе с плагином Silverlight), что позволяет разработчику использовать массу преимуществ этой технологии. В результате Silverlight-разработчик получает платформу для своих приложений не менее эффективную, чем Flash, и, хотя не столь универсальную, как Java, но довольно продвинутую в этом отношении.

На рис. 19.5 показано, какие компоненты взаимодействуют при работе Silverlight-приложения. Как видно из рисунка, HTML-страница должна включать элемент object с типом содержимого application/x-silverlight-2 (номер версии может меняться). Объект реализует некоторую разновидность пользовательского элемента управления ( UserControl ) и хранится в скомпилированном виде в файле SilverlightApp.xap (имя файла, разумеется, может быть произвольным, лишь бы оно было указано в значении параметра элемента object с именем source).

Для разработки Silverlight-приложений предназначен, в первую очередь, пакет Microsoft Expression, включающий приложение Microsoft Expression Blend (рис. 19.6).

Пользователь Microsoft Expression Blend имеет возможность визуально в окне конструктора формировать интерфейс WPF- или Silverlight-приложения, создавая объекты, настраивая их свойства и определяя анимации. Интерфейс описывается XAML-разметкой, которую Blend формирует автоматически (или наоборот, если написать XAML-код в окне исходного кода, то в окне конструктора отобразятся соответствующие объекты). С каждым файлом XAML связан файл кода на Visual Basic или C#, в котором могут содержаться методы, манипулирующие объектной моделью приложения. Изучение C# выходит за пределы данного курса, однако дизайнер может создавать относительно простые Silverlight-приложения и не зная этого языка, и поэтому мы предлагаем познакомиться с этой перспективной технологией более подробно, проделав лабораторную работу.

Подводя итоги лекции, следует ответить на естественно возникающий вопрос: какую же технологию следует брать на вооружение начинающему веб-дизайнеру? Несомненно то, что в рамках любой из рассмотренных технологий можно достичь интересных результатов, равно как и то, что области применения апплетов, Flash-приложений, SVG-графики, AJAX-страниц и приложений Silverlight далеко не совпадают. Нельзя, однако отрицать значение такого фактора как обилие справочной информации, литературы (в том числе на русском языке) и доступных версий программного обеспечения - здесь в настоящее время лидируют технологии Microsoft.

Вопросы