Вот вопрос: что если я скажу вам, что вы можете написать свою собственную версию Word, используя что-то вроде HTML и JavaScript? Что если я добавлю, что вы можете запускать на жестком диске или запускать его прямо с веб-сервера и использовать его для обновления содержимого вашего сайта? Я знаю, это звучит немного надуманно, но это прямо здесь, прямо сейчас — и это называет себя «Zool».
Вот что будет рассказано в этой серии из трех частей:
- Революция XUL: кто такой Zool?
- Снова в школу: время стереть этот JavaScript…
- Зоология: читаем, чтобы запустить ваше первое приложение XUL
- Просмотр 3D с XUL: прямо в глубине.
- Отчаянно Ищу: поиск окончен.
- Меню на вынос: с картошкой фри, пожалуйста!
- Но никто не использует Mozilla: назад к обнаружению браузера.
- Повышение богатого клиента: будущее XUL.
Революция XUL
В одном из самых спокойных уголков Интернета, mozilla.org , произошла революция. Новый формат XML, названный XUL (расширяемый язык пользовательского интерфейса), произносится как «Zool», находится на пути к тому, чтобы изменить то, что мы знаем как об Интернете, так и о настольных приложениях. Возможно, смелое утверждение — но как только вы закончите читать это, вы можете просто согласиться.
Концептуальный скачок, который происходит в Mozilla, заключается в том, чтобы думать не только о веб-браузере, а о том, что он просто инструмент для просмотра веб-страниц, и вместо этого смотреть на него как на структуру — среду выполнения для выполнения приложений, так же как вы можете запускать программы в среды выполнения Java и .NET.
В то время как мы все наблюдали за тем, как .NET и Java борются за него для разработчиков и корпораций, «делятся мнениями», Mozilla незаметно заставила свою революцию произойти без особой шумихи или внимания; прямо сейчас поиск в Google по запросу «XUL» дает, например, только 103 000 результатов.
Конечно, проекты с открытым исходным кодом редко имеют деньги на рекламу, и Mozilla (ну, на самом деле, Netscape) приходится преодолевать дополнительное клеймо быть проектом, который «проиграл» войнам браузеров. Но если вы посмотрите на XUL сегодня, вы удивитесь тому, как мало об этом говорят. Что-то подсказывает мне, что настоящее веселье только начинается …
Что удивительно в XUL и его родственной технологии XPCom ( межплатформенная объектная модель компонентов), так это то, что они имеют все отличительные признаки .NET и Java:
- библиотека «виджетов» для создания приложений (как с .NET WinForms и Java’s Swing)
- отделение логики представления от логики приложения, логика представления обрабатывается JavaScript
- поддержка протоколов обмена сообщениями XML, таких как SOAP и XML-RPC
- поддержка нескольких языков для создания компонентов «кода позади», включая C ++, Python и Ruby , с Perl в разработке — хотя, к сожалению, PHP пока нет (!).
- действительно кроссплатформенный; везде, где вы можете запустить Mozilla, вы можете запускать свои приложения XUL / XPCom.
Но на этом все не заканчивается — написание приложения на XUL похоже на написание веб-страницы с использованием DHTML, за исключением того, что ваше приложение XUL будет работать, а ваше DHTML может … XUL предоставляет разметку, которую будет легко понять любому, имеющему опыт работы с HTML, и обладает всеми преимуществами языка текстовой разметки, например, возможностью генерировать его «на лету» с помощью PHP.
Более того, XUL позволяет использовать существующие технологии, такие как CSS, для изменения внешнего вида ваших приложений XUL и SVG, чтобы добавить немного визуального изящества. Вы также можете смешивать HTML с XUL — вы можете собрать гибридные страницы, например, чтобы оживить скучную HTML-страницу с помощью некоторых XUL-виджетов. Не ожидайте найти XUL в списке на w3.org, однако, это полностью идея Mozilla.
Все, что вам нужно для запуска приложений XUL, — это наличие Mozilla, верно? Ну, почти. Существует ряд проектов, направленных на внедрение XUL в другие среды выполнения и среды, такие как проект Blackwood от Mozilla, Luxor XUL , jXUL и XULUX , каждый из которых каким-то образом переводит XUL в Java. Также возможно встраивать Gecko , что может привести XUL к таким устройствам, как мобильные телефоны и КПК.
Не то чтобы вам нужно было беспокоиться о любом из них сегодня; все, что вам нужно для запуска приложений XUL, — это Mozilla (или браузер на основе Mozilla, например, последняя версия AOL или Netscape).
«Все очень хорошо, — скажете вы, — но это выглядит так, как будто это будет просто еще одна плохо реализованная технология, которая не будет ничего, кроме напрасной траты моего времени».
Хорошо, как об этом: ActiveState уже выпустил Komodo , IDE, которая была написана с использованием базы кода Mozilla, и использует преимущества XUL. Вы найдете много небольших проектов, перечисленных на mozdev.org . Кто-нибудь для игры в XULMine ? Вы можете запустить его прямо с сайта (разумеется, вам понадобится Mozilla)! Заметьте, как это выглядит как любое другое оконное приложение? И посмотрите, как быстро он загружается …?
Теперь, когда у вас есть приблизительное представление о том, что такое XUL, пришло время почистить эти запыленные знаки «Лучше всего смотреть с…» из последних войн браузеров и вернуть их на свой веб-сайт. Пришло время заняться XUL …
Обратно в школу
Одной из вещей, которая может сделать XUL успешным, является тот факт, что он использует существующие технологии и определяет новые элементы и функции только тогда, когда действительно нет альтернативы. С точки зрения тех из нас, кто только начинает работать с технологиями, это хорошая новость! Все, что нам нужно сделать, это освоить разметку XUL и библиотеку XPCom. Тем не менее, для создания полноценных приложений ваши знания этих технологий могут быть расширены.
Вот несколько вспомогательных персонажей, которые вы, вероятно, найдете в XUL:
- CSS
Большая часть работы по настройке внешнего вида приложения XUL может быть выполнена CSS. Если вы не разработали стратегию для поддержания вашего CSS организованным, сейчас самое время. Разработайте четкое соглашение об именах и заметки о том, что вы сделали и где, в противном случае вы быстро потеряете себя и получите неожиданно технически окрашенный веб-сайт. SitePoint предлагает много полезной информации о CSS . Обратите внимание, что то, что вы не можете сделать с помощью CSS, вы можете сделать с помощью оверлеев. - XML
XUL — это формат XML, поэтому вам, безусловно, нужно быть счастливым, работая в нем. Если вы не уверены, прочитайте Введение в XML — это просто текст … - Пространства имен XML
Вам нужно знать, как работают пространства имен XML, хотя вам не нужно быть гуру. Попробуйте XML Namespaces Explained , для повышения квалификации. - JavaScript
Реализация XUL-приложения достигается с помощью JavaScript. Если вы не в курсе, убедитесь, что вы читали библиотеку JavaScript SitePoint, особенно серию JavaScript 101 Кевина Янка, серию объектно-ориентированного программирования JavaScript Райана Фришберга и приблизительное руководство по DOM . Знаете ли вы, что JavaScript поддерживает наследование и обработку Java-подобных исключений? - Определения типов документов XML (DTD)
Хотя вам не нужно использовать DTD, они могут оказаться чрезвычайно полезными для разделения для элементов XUL определенной информации о вашем приложении, где эта информация отображается. Например, текст, который появляется на кнопке, может быть определен в документе DTD ENTITY. Это может быть полезно, например, когда вы хотите «интернационализировать» свое приложение и выбрать другой файл DTD для другого языка. Концептуально это похоже на использование файла CSS для хранения информации о внешнем виде приложения, с той разницей, что DTD позволяет вам хранить отдельные части контента отдельно. - Кроме того, может пригодиться прикосновение к Xlink , и знание RDF также может оказаться хорошей идеей, поскольку это один из дополнительных источников данных для приложений XUL.
Другими словами, вам нужно знать о многих вещах, но если вы когда-нибудь играли с DHTML и разочаровались из-за плохой реализации браузера, XUL — это ваш шанс выбрать то, на чем остановился. Так что не паникуйте (пока) — чтобы использовать XUL для улучшения веб-страницы, все, что вам нужно, это знание нескольких виджетов XUL и немного JavaScript.
Здесь я покажу вам несколько простых примеров, которые не обременят мозг. Не ожидайте, что станете экспертом к концу этой статьи — вам многое придется открыть для себя: например, объяснение того, как создать собственную версию Word с XUL, лишь немного выходит за рамки эта статья!
Предупреждение: сейчас нет большого количества материала, чтобы помочь вам начать работу с XUL. Лучший источник, который я нашел, — « Создание приложений с помощью Mozilla» от O’Reilly, он доступен для чтения в Интернете в формате HTML и, к счастью, превосходен. Я предложил дальнейшее чтение в конце этой серии. Конечно, это означает, что у вас есть прекрасная возможность создать собственный ресурсный сайт XUL…
Зоол-Ology
Как я уже упоминал в начале этой статьи, XUL позволяет создавать как настольные, так и браузерные приложения. Здесь я собираюсь сузить круг вопросов до браузера — как вы можете «XULify» веб-страницу. Для работы приведенных здесь примеров вам понадобятся две вещи:
Mozilla 1.0+ или Netscape 7.0+ — я использовал последнюю версию Mozilla для этих примеров: Mozilla 1.3 Beta. Хотя XUL и XPCOM сейчас довольно стабильны, работа еще продолжается, поэтому дважды проверьте версию, которую вы используете.
PHP — я буду использовать PHP для «запуска» XUL-приложений. Если вам нужна копия для Windows, отличным местом для начала является Firepages phpdev , который позволит вам установить Apache, PHP и MySQL за одну простую установку. В файле php.ini убедитесь, что у вас есть « short_open_tag=Off », чтобы PHP не принял ваши XML-теги за PHP-теги. Также может быть хорошей идеей сказать Apache обрабатывать файлы XUL с помощью PHP, чтобы вы могли поместить код PHP в файл .xul. Однако ничто не мешает вам просто использовать .php — пока вы сообщаете Mozilla тип MIME, который вы используете (я скоро к этому вернусь).
Вот файл .htaccess, который должен решить ваши проблемы одним махом. Просто поместите это в веб-каталог, из которого вы хотите запустить XUL (предполагается, что у вас есть AllowOverride All в httpd.conf для Apache):
php_flag short_open_tag Off <files *.xul> ForceType application/x-httpd-php </files>
Еще одна вещь, которую вы захотите иметь под рукой — это справочник элементов XUL Planet , который сейчас является лучшим местом для получения справочной информации по XUL и XPCom.
Просмотр 3D с XUL…
Вместо того, чтобы медленно строить свое первое XUL-приложение, давайте сразу же углубимся в глубокий конец!
<?php header ( 'Content-type: application/vnd.mozilla.xul+xml' ); ?> <?xml version="1.0"?> <!-- example1.xul --> <?xml-stylesheet href="example1.css" type="text/css"?> <window title="XUL in Action" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tabbox orient="vertical" flex="1"> <tabs> <tab label="PHP & MySQL Interviews, News and Views" /> <tab label="PHP & MySQL Tips and Tutorials" /> <tab label="PHP & MySQL Apps and Reviews" /> </tabs> <tabpanels flex="1"> <browser src="http://www.sitepoint.com/subcat/97"/> <browser src="http://www.sitepoint.com/subcat/98"/> <browser src="http://www.sitepoint.com/subcat/99"/> </tabpanels> </tabbox> </window>
Что это делает? Откройте example1.xul из архива кода, чтобы увидеть его в действии — и держитесь за свое место!
Ты все еще здесь? Не упали в обморок? Попробуйте нажать на некоторые ссылки в каждой вкладке и посмотрите, что произойдет …
Для тех, кто не просматривает файл с помощью Mozilla , вы просто упустили дополнительные сенсорные возможности в Интернете. Если ваше любопытство одолеет вас, вы знаете, что делать …
ОК — это не 3D просмотр, а три «вкладки», каждая из которых выступает в роли независимого браузера. Дело в том, что все это находится под вашим контролем: веб-мастер — вы можете предоставить посетителям индивидуальный макет, специально предназначенный для просмотра вашего сайта.
Давайте рассмотрим приведенный выше пример подробно. Во-первых, я использовал функцию header() PHP, чтобы application/vnd.mozilla.xul+xml браузеру (Mozilla), что MIME-тип этого документа — « application/vnd.mozilla.xul+xml », так что браузер знает, как с ним работать. Это единственная работа, выполняемая PHP (на данный момент), и может быть легко воспроизведена с помощью Perl, JSP и ASP (.NET).
Далее идет обычное объявление, что для любого XML-документа требуется <?xml version="1.0"?> . Предыдущая строка — это просто комментарий, поэтому вы знаете, какой это файл (и не волнуйтесь — все они предоставлены вам в этом загружаемом ZIP-файле ).
Следующая строка определяет таблицу стилей CSS, которая будет использоваться с этим документом XUL. Это немного отличается от формата HTML для включения таблицы стилей, где у вас будет
<link rel="stylesheet" type="text/css" href="example1.css" />
Я посмотрю на таблицу стилей через минуту.
Следуя таблице стилей, у вас есть ваш первый настоящий элемент XUL (!): Window . Помимо атрибута title в <window /> объявлены два пространства имен, по умолчанию используется пространство имен XUL, а дополнительное пространство имен для HTML определяется с помощью xmlns:html . Хотя в этом примере я не использовал пространство имен HTML, я буду объявлять его во всех примерах «на всякий случай». Элемент window является одним из пяти корневых элементов в документе XUL, и, вероятно, тот, который вы будете использовать чаще всего. Другие наложения , диалоги , страницы и мастера .
Далее идет элемент tabbox . Это «контейнер» для элементов «вкладка», немного похожий на шкаф для хранения документов, куда вы помещаете висячие папки с вкладками. Атрибут « orient » указывает ориентацию поля вкладок, в то время как flex элемент используется для того, чтобы вкладка заполняла доступное пространство в окне.
Flex определяется элементом XUL , который является «родительским» элементом для многих других элементов XUL. Если вы сталкивались с объектно-ориентированным программированием или DOM, XUL имеет похожую иерархию, которая определяет все элементы как потомки родительских узлов, а «дедушка» — это узел .
Далее идут вкладки , которые представляют собой контейнер для определения элементов вкладок . Каждая вкладка имеет атрибут « label », который определяет текст, который появляется на вкладке.
Под элементом tabs находится вкладка , где я могу определить элементы, которые соответствуют вкладкам. Я использовал элемент browser , который похож на элемент iframe в HTML, чтобы указать три веб-страницы для отображения. Чтобы немного запутать, в XUL также есть собственный элемент iframe, который используется более или менее так же, как если бы вы использовали элемент iframe в HTML.
Документ example1.css выглядит следующим образом.
window { background-color: navy; } tab { font-family: verdana; font-size: 13px; font-weight: bold; color: navy; }
Это очень просто…!