19. Внедрение объектов в документ html
Возможности и недостатки динамических HTML-страниц. Применение технологий Java, Flash, SVG, AJAX, Silverlight (обзор)
Содержание
Технология JAVA
Adobe Flash и Scalable Vector Graphics
Adobe Flash
Scalable Vector Graphics (SVG)
AJAX (Асинхронный Javascript с XML)
Microsoft Silverlight
Вопросы
Как было показано в предыдущих лекциях, динамический HTML (под которым обычно подразумевают комплексную технологию работы с объектной моделью HTML-документа при помощи Javascript и CSS) позволяет превратить статические веб-страницы в интерактивные приложения. Можно "на лету" создавать и изменять любые элементы документа, можно реагировать на любые действия пользователя с документом. Теперь рассмотрим то, чего достичь средствами DHTML не удастся:
-
работать с графикой - создавать и изменять векторные (или точечные) изображения;
-
работать с медиа-контентом - воспроизводить аудио и видео (существующие решения используют посторонние по отношению к DHTML и браузеру технологии);
-
сохранять данные в файловой системе пользователя для последующего использования приложением (за исключением весьма ограниченных по своим возможностям cookies);
-
поддерживать непрерывную связь с сервером (что, в принципе, достижимо средствами Javascript и iframe, но, как правило, осуществляется при помощи технологий, описываемых далее).
Однако тенденция сделать приложения, выполняемые в браузере, полноценными, весьма сильна. С одной стороны, браузер для пользователя - это окно в информационный мир, и желательно, чтобы вид из него был максимально реалистичным и в то же время насыщенным разнообразными удобствами ИТ-цивилизации (виртуальный полет над Землей - хороший пример). С другой стороны, поскольку браузеры становятся все более сложными программами и в перспективе, вероятно, станут поддерживать огромное разнообразие форматов приема и выдачи информации, то для разработчиков становится удобным ориентироваться именно на браузер как средство взаимодействия с пользователем.
Существует и специальный термин для определения таких приложений - Rich Internet Applications (переведем это как "роскошные интернет-приложения"), сокращенно RIA.
В этой лекции мы рассмотрим, какие средства существуют для преодоления указанных недостатков за рамками HTML и CSS, а в следующей - как будут эволюционировать сами эти две технологии для преодоления собственных недостатков в ближайшем будущем.
Вообще, технологий расширения возможностей браузера создано очень много, и едва ли кто-нибудь сможет перечислить все: развитие не всегда шло централизованно, несмотря на существование консорциума WWW. Рассмотрим из них лишь самые основные, ключевые, имеющие практическую ценность на сегодняшний день.
Технология java
Правильнее говорить о мире технологий Java: разработчики шутят, что, составив любую трехбуквенную аббревиатуру на J, вы с высокой вероятностью получите название одной из технологий, основанных на языке Java. Но здесь пойдет речь только о тех, которые запускаются в браузере, а это, в первую очередь, Java-апплеты.
Сам язык Java появился в начале 90-х годов прошлого века внутри компании Sun Microsystems, занимающейся, в частности, разработкой программного обеспечения. Целью его авторов было создание альтернативы C++ - языку, бескомпромиссному по эффективности работы программ, но и требующему чрезвычайно аккуратной работы программиста, что не всегда оправдано. Язык Java берет за основу проверенные временем приемы объектно-ориентированного программирования в C++, исключая те языковые механизмы, которые дают возможность программистам допускать наиболее разрушительные и трудноуловимые ошибки (в первую очередь это арифметика указателей, явное управление памятью и множественное наследование). Была добавлена языковая поддержка многопоточности и распределенных вычислений, созданы многочисленные библиотеки. С 1996 года поддержку Java включила в свой (тогда - самый популярный) браузер компания Netscape. В настоящее время "Java - повсюду" - в бытовой электронике, мобильных устройствах и, конечно, в веб-приложениях - как на серверной, так и на клиентской стороне.
Java-апплет - это программа, которая выполняется виртуальной машиной Java и отображается в окне браузера. С понятием "виртуальная машина" связана одна из ключевых идей Java: программа, написанная на этом языке, компилируется не в набор инструкций какого-либо конкретного процессора, а в специальный байт-код. Для запуска байт-кода на компьютере (или другом устройстве с вычислительными возможностями) должна быть установлена операционная среда (Java Runtime Environment), которая компилирует байт-код уже в "родные" (native) инструкции локального процессора. Главная привлекательная особенность такого подхода заключается в том, что программисту не нужно заботиться о кроссплатформенности своего приложения - эту заботу берет на себя операционная среда, реализованная для всех популярных платформ (Windows, Mac, Linux и т.д.). Операционная среда Java Runtime Environment распространяется бесплатно и используется для всех видов Java-приложений (а не только веб-приложений), поэтому она распространена достаточно хорошо.
Чтобы вставить апплет в веб-страницу, нужно применить еще один особый механизм HTML. Основная точка расширения HTML -это внедрение в документ объектов. Здесь "объект" - абстракция: он означает "все что угодно, если браузер сможет обработать это - возможно, при помощи дополнительной программы". В частности, Java-апплеты обрабатываются Java-плагином и виртуальной машиной Java.
Старый, но простой и неплохо работающий способ вставки апплета - использование элемента applet:
<applet code="AppletExample.class" width="600" height="400"></applet>
Браузер, обрабатывая такой элемент, создаст для апплета в документе прямоугольник 600*400 точек и запустит файл "AppletExample.class" (где находится байт-код) при помощи Java-плагина.
Элемент applet, однако, признан устаревшим, и взамен его стандартом HTML 4 рекомендован более универсальный элемент object (пригодный в принципе для любого содержимого, а не только для Java-апплетов). Правда, в его интерпретации между современными браузерами имеются разночтения - в первую очередь, разнится способ идентификации типа объекта (classid):
<!--[if !IE]> Для всех браузеров, кроме IE -->
<object classid="java:AppletExample.class"
type="application/x-java-applet">
<!--<![endif]-->
<!-- специально для MSIE -->
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
codebase="http://java.sun.com/update/1.5.0/jinstall-1_5_0-windows-i586.cab" >
<param name="code" value="AppletExample" />
<strong>Плагин Java не установлен.
<br />
<a href="http://java.sun.com/products/plugin/downloads/index.html">Его можно загрузить здесь.</a></strong>
</object>
<!--[if !IE]> -->
</object>
<!--<![endif]-->
Приведенная сравнительно громоздкая конструкция действительно неизбежна, если мы хотим следовать стандарту и в то же время не игнорировать нестандартное поведение браузера Internet Explorer. В примере элемент object вложен в другой элемент object. Дело в том, что, согласно стандарту, браузер, если он не в состоянии отобразить объект, то отображает его вложенное содержимое. В данном случае, если внешний объект отобразить не удается, то отображается внутренний; а если же и это невозможно, то отображается текст со ссылкой на страницу загрузки JRE.
Кстати, байт-код может быть размещен в Java-архиве (jar), и в этом случае разметка несколько изменится.
Приведем здесь пример простейшего апплета. Не ставя перед собой цели научить программировать на Java или Flash, мы все же считаем, что начинающий веб-разработчик должен быть сразу верно сориентирован в многообразном и запутанном мире интернет-технологий - необходимо иметь представление о ключевых технологиях, их возможностях и знать, как начать путь по их изучению и что ждет на этом пути.
1 import java.applet.*;
2 import java.awt.*;
3 import java.awt.geom.Ellipse2D;
4
5 public class AppletExample extends Applet {
6 @Override
7 public void paint(Graphics g) {
8 Graphics2D g2 = (Graphics2D) g;
9 g2.setPaint(new GradientPaint(0, 100, Color.WHITE, 300, 600, Color.RED));
10 g2.fill(new Ellipse2D.Double(0, 100, 600, 200));
11
12 g2.setColor(Color.BLUE);
13 g2.setFont(new Font("Arial", Font.ITALIC, 60));
14 g2.drawString("Здравствуй, мир!", 140, 210);
15 }
16 }
Листинг 19.1. Файл "AppletExample.java" (html, txt)
Нетрудно видеть, что непосредственно функционирование апплета описано в строках 9 - 14. Код апплета устанавливает для заливки двухцветный градиент - от белого в точке (0; 100) до красного в точке (300; 600), затем заполняет им эллипс, вписанный в прямоугольную область с левым верхним углом в (0; 100), шириной 600 и высотой 200 пикселов. И наконец, выводит надпись "Hello, World!" начиная с точки (140; 210) синим курсивом гарнитуры Arial и кеглем высотой 60 пунктов.
С точки зрения же структуры приведенного Java-кода (он должен быть сохранен в файле "AppletExample.java"), мы имеем пользовательский класс AppletExample, расширяющий стандартный класс Applet. В нем переопределяется (@Override) метод paint, т.е. метод рисования на экране. Метод принимает в качестве входного параметра объект типа Graphics, играющий роль холста для рисования и интерпретирует его как объект типа Graphics2D (который умеет больше, чем более старый класс Graphics - в частности, делать градиентную заливку и регулировать толщину линий). Используемые библиотеки перечислены в директивах import в самом начале кода.
Рис. 19.1. Развертывание апплета JAVA на клиентском компьютере
Для выполнения апплета на клиентском компьютере, как уже говорилось, необходима среда 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 включает в себя компоненты самого широкого назначения, поэтому возможности апплетов практически не ограничены (за исключением, конечно, соображений безопасности). Сюда входит и графика (в том числе трехмерная!), и пользовательские формы, и доступ к данным, и разнообразные вычисления.
Упражнение. Загрузите последнюю версию JDK с 19.http://java.sun.com/javase/downloads/index.jsp . Создайте, скомпилируйте и включите в HTML-страницу апплет, рисующий еще несколько простых фигур. Примеры см. на 19.http://java.sun.com/docs/books/tutorial/2d/index.html.
Если вы проделали предыдущее упражнение, то почувствовали, что "рисование" не очень-то похоже на рисование - на самом деле это чистое программирование. При таком подходе либо дизайнер должен уметь программировать в рамках той или иной технологии, либо программист обладать тонким художественным вкусом: разделение труда пропадает. Такое положение дел давно уже не считается нормальным, и все продвинутые информационные технологии обязательно предоставляют средства разделения содержания, представления и поведения, а также разделения труда соответствующих специалистов. Так разделены 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-редакторов (через вспомогательный конвертер). Поддерживаются таблицы стилей.
Рис. 19.2. Разработка JavaFX-приложения в среде NetBeans
К недостаткам JavaFx можно отнести невозможность распространения таких приложений без подключения к Интернет. По этой причине мы не включаем сюда работающий пример, а вместо этого даем ссылку на первоисточник: http://javafx.com/ru/about/overview/.
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-приложения артефактов на клиентском компьютере.
Рис. 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>
Листинг 19.2. Элемент object, определяющий включение Flash-приложения в HTML-документ (html, txt)
Говоря о 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 и включение SVG-объекта в HTML-документ (результат - на рис. 19.4) (html, txt)
Рис. 19.4. Пример HTML-страницы с SVG
Как видно из примера 19.3, SVG-документ представляет собой XML-документ с соответствующим ОТД. В корневой элемент документа svg вложены определения градиента, эллипса и текстового блока, представляющие собой элементы, напоминающие элементы XHTML. Этот код можно написать в обычном текстовом редакторе, а можно воспользоваться и WYSIWYG-редактором векторной графики: большинство таких редакторов поддерживает экспорт в SVG, и существуют специализированные SVG-редакторы (в том числе бесплатные).
Включение объекта в HTML-документ также происходит обычным образом - при помощи универсального элемента object. Некоторые браузеры поддерживают непосредственную интеграцию SVG-разметки в HTML-документ.
Самая большая проблема SVG - отсутствие поддержки браузером IE. Для отображения SVG в IE используется либо плагин (например, Adobe SVG Viewer), либо апплет (проект Batik), либо Flash-приложение (проект SVGWeb).