Быстрые и простые приложения AIR с Dreamweaver CS3

Расширение Adobe AIR для Dreamweaver CS3 упрощает создание, упаковку и предварительный просмотр приложений Adobe AIR с помощью Adobe Dreamweaver CS3. Вы можете использовать свои существующие веб-навыки и навыки разработки Ajax для создания приложений AIR, которые взаимодействуют с рабочим столом так, как веб-приложения не могут.

Из этого туториала Вы узнаете, как создать простое приложение To Do List с пользовательским Chrome. Это также объясняет функциональность приложения. Приложение основано на одной HTML-странице и JavaScript. Поскольку он также построен на AIR, он может сохранять и открывать списки дел с использованием локальной файловой системы. Он будет использовать XML как для запоминания данных, так и для сохранения в локальной файловой системе для создания списков, которыми можно обмениваться.

Требования

Чтобы максимально использовать эту статью, вам понадобится следующее программное обеспечение и файлы:

Необходимые знания

Базовые знания по разработке Dreamweaver, HTML и Ajax. Если вы не использовали расширение Adobe AIR для Dreamweaver CS3 еще, вы также можете обратиться к Скотт Fegette в демо о том , как установить и настроить Adobe Dreamweaver CS3 для создания, развертывания и предварительного просмотра приложений Adobe AIR.

Начиная с

Примечание: Обязательно загрузите и установите Adobe AIR среды выполнения и расширение Adobe AIR для Dreamweaver CS3 , прежде чем начать этот проект.

Как и в случае с большинством сред разработки, вы начинаете с определения своего проекта. В Dreamweaver это означает, что вы создаете новый сайт для своего проекта AIR.

Примечание . Образцы ZIP-файла, прилагаемого к этой статье, включают готовые файлы сайта и ресурсы для этого проекта, а также готовое приложение AIR (todoit.air). Вы можете импортировать готовые файлы сайта (to_do_list) в Dreamweaver, если хотите следовать этому руководству, не создавая файлы с нуля.

Запустите Dreamweaver и выберите «Сайт»> «Управление сайтами», чтобы открыть диалоговое окно «Управление сайтами».
Нажмите кнопку «Новый» и выберите «Сайт». Откроется диалоговое окно «Определение сайта».
Укажите имя для вашего проекта сайта (например, to_do_list).
Укажите локальную корневую папку. Щелкните значок папки рядом с полем ввода, чтобы найти папку в вашей системе.
Нажмите кнопку ОК, чтобы закрыть диалоговое окно. Нажмите «Готово» в диалоговом окне «Управление сайтами».

Следующим шагом является создание пользовательского интерфейса с использованием HTML-документа по умолчанию. Позже вам необходимо настроить проект AIR, но я считаю, что быстрее сначала создать HTML-документ по умолчанию.

Чтобы создать стандартный HTML-документ для пользовательского интерфейса приложения, выберите «Файл»> «Создать»> «Основная страница»> «HTML» и нажмите «Создать», чтобы отредактировать документ. Выберите «Файл»> «Сохранить» и укажите имя файла для документа. Это интерфейс по умолчанию, который будет использоваться при открытии приложения.

Я назвал документ по умолчанию ui.html, но вы можете назвать его как угодно. Этот документ будет первым (и, вероятно, единственным) документом, который AIR загружает для вашего приложения.

Вот основная структура HTML для проекта:

<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>To Do List</title>
  <link type="text/css" href="todo.css" rel="stylesheet" />
  <script type="text/javascript" src="assets/AIRAliases.js"></script>
  
  <script type="text/javascript" src="assets/todo.js"></script>
  </head>
  
  <body>
  
  
  
  </body>
  </html>

Начиная с HTML по умолчанию, вы добавляете заголовок (To Do List) и ссылку на ресурсы, необходимые для приложения; для этого приложения вы используете следующие три ресурса:

<link type="text/css" href="todo.css" rel="stylesheet" />
<script type="text/javascript" src="assets/AIRAliases.js"></script>
<script type="text/javascript" src="assets/todo.js"></script>

Таблица стилей todo.css контролирует внешний вид приложения, а также базовую обратную связь, такую как изменение цвета при наведении мыши на кнопку. Файл todo.js предоставляет интерактивную часть вашего приложения, включая ответы на события, обработку файлов и внутреннюю работу с данными. Файл AIRAliases.js предоставлен компанией Adobe, чтобы разрешить ярлыки для большей части API-интерфейса AIR. Это сэкономит ваше время при наборе длинных имен объектов.

Примечание. Вы можете найти файлы todo.css и todo.js в папке assets примеров файлов сайта to_do_list. Файл AIRAliases.js включен в расширение Adobe AIR для Dreamweaver CS3 — он будет автоматически создан при создании проекта Adobe AIR в Dreamweaver CS3.

Создание и стилизация пользовательского интерфейса

Интерфейс для приложения To Do List прост. Он имеет текстовое поле для ввода элементов списка, две кнопки сверху и две кнопки снизу. Кнопки сверху заменяют виджеты интерфейса, обычно встречающиеся в настольном приложении, то есть кнопки свертывания и закрытия. Кнопки внизу предназначены для добавления новых элементов в список и для сохранения списка в файл.

В документе HTML по умолчанию определите текстовое поле, кнопки и элемент документа для хранения элементов следующим образом:

<div id="nav">
     <button id="btnmin"><img src="assets/min.jpg" /></button>
     <button id="btnclose"><img src="assets/close.jpg" /></button>
</div>
<div id="dataentry">
     <input id="itemtext" type="text" />
     <input id="btnadd" type="submit" value="Add" />
     <input id="btnsave" type="submit" value="Save" />
</div>
<div id="items"></div>

Поскольку приложение To Do List основано на HTML-документе, вы можете использовать обычный CSS, чтобы он выглядел и чувствовал себя так, как вам хочется. Создание приложения на AIR обеспечивает еще большую гибкость. Механизм рендеринга Adobe AIR HTML основан на WebKit, который имеет ряд расширений CSS, включая радиусы границ и несколько фонов, которые могут упростить разработку пользовательского интерфейса без сложной разметки.

Это приложение использует -webkit-border-radiusдля придания приложению округлого ощущения без использования графики. Он также использует фоновый рисунок для простого градиента элементов entry и item. Вы можете предотвратить мозаичный фон, установив -webkit-background-sizeв 100%, который растягивает градиент до размера элемента.

#nav {
       text-align:right;
       padding-right:5px;
       position:absolute;
       right:0;
       top:-4px;
}
#nav button {
    color:#999;
    background-color:#555;
    -webkit-border-radius: 3px;
    border:1px inset #777;
    border-width:0 1px 1px;
    padding:6px 6px 3px;
    line-height:1;
    cursor:pointer;
}

#dataentry {
    background:url(bg.png) repeat-x 0 0;
    padding:19px 5px 5px;
    -webkit-background-size: 100%;
    -webkit-border-radius: 5px;
    text-align:center;
}

input[type=text] {
    -webkit-border-radius: 5px;
    font-size:14px;
    width:95%;
    padding:5px;
}

input[type=submit] {
    color:#FFF;
    background-color:#333;
    border: 1px outset #999;
    -webkit-border-radius: 9px;
    width:50px;
    border-color: #999 #000 #000 #999;
}

input[type=submit]:hover {
    color:#FFF;
    background-color:#912A2A;
} 
 .item {
     margin:0 5px;
     overflow:hidden;
     padding:5px;
     background:url(bg.png) repeat-x 0 0;
     -webkit-background-size: 100%;
 }

Чтобы придать кнопкам ощущение «кнопки», border-colorнаряду с border-styleправилом создается иллюзия ободка со светло-серым на верхнем и левом краях и черным на правом и нижнем краях. Вы также можете увидеть использование селекторов атрибутов для ваших правил CSS. Если вы не знакомы с селектором атрибутов, он позволяет стилизовать элементы на основе значения определенного атрибута. Например, input[type=submit]будет стилизовать любой ввод, где typeатрибут равен submit, то есть <input type="submit" value="Save">.

Работа в изолированной среде, такой как AIR, может быть чрезвычайно полезной, поскольку вы можете воспользоваться этими современными функциями CSS, не беспокоясь о кросс-браузерной поддержке. Вы также можете чувствовать себя хорошо, зная, что ваше приложение должно выглядеть одинаково в Windows, Mac OS X и Linux. Только не расстраивайтесь, когда возвращаетесь в мир браузеров!

Добавление интерактивности

Приложение To Do List является относительно простым, а расширенная функциональность, предоставляемая AIR и WebKit, позволяет легко и быстро собрать его вместе.

Приложение структурировано с единственным объектом с именем ToDo(определенным в todo.js), который содержит все методы, необходимые приложению. Кроме того, следующие две вспомогательные функции были добавлены для упрощения разработки:

var ToDo = { }
  
// Shortcut function to retrieve elements by ID
function $(id){
     return document.getElementById(id);
}
  
// bind function for binding objects to function calls
Function.prototype.bind = function(o, args){
     var fn = this;
     return function(){
     fn.apply(o, args || arguments);
     }
}

Приложение имеет только несколько точек взаимодействия: добавить, сохранить, свернуть приложение, закрыть приложение и удалить элемент. Когда приложение открывается впервые, init()функция ToDoобъекта добавляет обработчики событий для этих событий.

init:function(){
     // perform any event bindings
     $('btnadd').onclick = ToDo.addEvent.bind(ToDo);
     $('btnsave').onclick = ToDo.save.bind(ToDo);
     $('btnclose').onclick = ToDo.close.bind(ToDo);
     $('btnmin').onclick = ToDo.minimize;
        
air.NativeApplication.nativeApplication.addEventListener(air.InvokeEvent.INVOKE,ToDo.open.bind(ToDo));
     window.nativeWindow.addEventListener(air.Event.CLOSING,ToDo.close.bind(ToDo))
  
     // initialize XML which auto-creates ITEMS root node
          ToDo.items = document.implementation.createDocument("","items", null);
     
     // add event handling to handle moving the application
          document.body.onmousedown = function(e){
       if(e.target.tagName != 'INPUT')
        nativeWindow.startMove();
     };
     ToDo.fixAppSize();
}

Далее, init()функция добавляет две важных обработчиков событий , которые обрабатывают INVOKEи CLOSINGсобытие. INVOKEСобытие происходит каждый раз , когда пользователь щелкает файл .todo , чтобы открыть его. Событие привязано к open()методу ToDoобъекта. CLOSINGСобытие происходит каждый раз , когда пользователь пытается закрыть приложение с помощью комбинации клавиш или панель задач. Приложение фиксирует это событие, чтобы оно могло предложить пользователю сохранить несохраненные изменения до закрытия окна.

init()Функция также создает документ XML для хранения элементов списка. createDocumentМетод принимает три параметра. Первое — это пространство имен XML, которое вам не нужно. Второе имя корневого узла; в этом случае это items. Последний параметр предназначен для определения пользовательского определения типа документа, который нам также не нужен.

Добавлен onmousedownобработчик событий, который позволяет пользователю перетаскивать приложение.

Наконец, init()вызовы fixAppSize()для настройки размера собственного окна в соответствии с размером документа HTML. Когда элементы добавляются или удаляются из списка, HTML-документ будет менять размер. nativeWindowДолжны меняться вместе с ним , чтобы сохранить HTML — документ от получения обрезается.

fixAppSize:function(){
     // set the height to the length of the HTML
     nativeWindow.height = document.body.offsetHeight;
}

Добавление предмета

Добавление элемента в список вызывает add()обработчик события.

add:function(txt){
     var id = 'a' + (new Date()).va   lueOf();
     if(txt == '') return false;
     
     // create a new item shell
     var item = document.createElement('div');
     item.className = 'item';
     item.id = id ;
     
     var closeWidget = document.createElement('div');
     closeWidget.className = 'close';
     closeWidget.onclick = ToDo.remove.bind(ToDo);
     item.appendChild(closeWidget);
     
     var itemText = document.createElement('div');
     itemText.className = 'text';
     itemText.innerHTML = txt;
     item.appendChild(itemText);
     
     $('items').appendChild(item);
     
     // create the XML node
     var xmlItem = document.createElement('item');
     xmlItem.setAttribute('id', id );
     xmlItem.appendChild( document.createTextNode(txt) );
     ToDo.items.getElementsByTagName('items')[0].appendChild( xmlItem );
     
     // reset the text box
     $('itemtext').value = '';
     ToDo.hasChanged = true;
     ToDo.fixAppSize();
     }

add()Обработчик событий делает две вещи. Сначала он добавляет новые элементы DOM в документ HTML, а затем добавляет новый узел itemsXML в объект XML. При сохранении списка дел это внутреннее представление списка дел записывается в файл.

Затем обработчик событий очищает текстовое поле ввода, подготавливая его для принятия следующего элемента списка. Обработчик устанавливает для hasChangedсвойства значение « true. Когда приложение закрыто», это свойство используется, чтобы определить, нужно ли пользователю запрашивать сохранение изменений.

Удаление предмета

Удалить элемент из списка просто. remove()Обработчик события просто удаляет элемент из HTML DOM и из DOM XML.

remove:function(evt){
     // grab the event target and then go to its parent, the Item
     var id = evt.target.parentNode.getAttribute('id');
     evt.target.parentNode.parentNode.removeChild(evt.target.parentNode);
     var xmlNode = ToDo.items.evaluate("//item[@id='"+ id +"']", ToDo.items).iterateNext()
     xmlNode.parentNode.removeChild( xmlNode );
  
     ToDo.hasChanged = true;
     ToDo.fixAppSize();
}

Удаление узла из XML DOM отличается от ожидаемого. Вы используете XPath для извлечения элемента из документа, где idатрибут соответствует. Затем вы удаляете этот узел, используя removeChildметод parentNode. В терминах XML idатрибут не имеет какого-либо особого значения, как в XHTML, где он используется в качестве уникального идентификатора. По этой причине getElementByIdне будет работать, и вы получите ошибку Node not found . XPath позволяет вам обращаться к частям XML-документа.

Открытие файла

Когда пользователь дважды щелкает файл .todo, запускается приложение «Список дел», если оно еще не открыто, и open()вызывается метод.

open:function(evt){
     if( evt.arguments.length == 1 )
     {
     if(evt.currentDirectory)
     {
     ToDo.currentDirectory = evt.currentDirectory;
     }
     ToDo.currentFile = evt.arguments[0];
     var file = new air.File(ToDo.currentFile);
     if(file.exists)
     {
     var fileStream = new air.FileStream();
     var byteData = new air.ByteArray();
     fileStream.open(file, air.FileMode.READ);
     fileStream.readBytes(byteData, 0, file.size);
     fileStream.close();
     
     if(byteData.length > 0)
     {
         var s = byteData.readUTFBytes(byteData.length);
         var parser=new DOMParser();
         var doc=parser.parseFromString(s,"text/xml");
         var items = doc.getElementsByTagName('item');
         for(var i=0;i<items.length;i++)
         {
             ToDo.add(items[i].childNodes[0].data);
         }
     }
     }
     }
     ToDo.hasChanged = false;
     
}

Когда приложение запускается двойным щелчком по существующему файлу .todo, fileобъект файла .todo передается в качестве аргумента open(). Если файл действительно существует, open()для чтения в файле используются объекты FileStream и ByteArray API-интерфейса AIR. После загрузки документа DOMParserкласс (из WebKit) используется для анализа строки в объекте XML. Оттуда код перебирает элементы, добавляя их в список.

Поскольку add()метод устанавливает hasChangedсвойство в значение true, open()необходимо явно установить его обратно falseпосле добавления элементов.

Сохранение файла

Сохранение файла выполняется в два этапа. Первый отображает диалоговое окно просмотра, которое позволяет пользователю указать, где сохранить файл. Это стандартное диалоговое окно ОС, над которым у вас нет особого контроля.

save:function(){
var fileFilter = new air.FileFilter("To Do Lists", "*.todo");
ToDo.currentDirectory.addEventListener(air.Event.SELECT, ToDo.fileSaved.bind(ToDo) );       
ToDo.currentDirectory.browseForSave("Save To-do List");
}

Когда пользователь указывает файл, fileSavedвызывается обработчик события.

fileSaved:function(evt){
     var newFile = evt.target;
         
     var serializer = new XMLSerializer();
     var packet = serializer.serializeToString(ToDo.items);
     
     var fileStream = new air.FileStream();
     var bytes = new air.ByteArray();
     bytes.writeUTFBytes(packet);
     fileStream.open(newFile, air.FileMode.WRITE);
     fileStream.writeBytes(bytes, 0, bytes.length);
     fileStream.close();
     ToDo.hasChanged = false;
     if(ToDo.closeAfterSave) ToDo.close();
     }

Обработчик событий использует класс WebKit XMLSerializerдля преобразования внутреннего представления списка в XML в строку, которую можно записать в файл. Если обработчик событий был вызван из-за того, что пользователь нажал кнопку «Закрыть», приложение закроется.

Минимизация приложения

Минимизировать приложение просто. Как уже упоминалось выше, вы добавили обработчик событий к кнопке минимизации, чтобы запустить функцию минимизации. Функция минимизации запускает метод минимизации nativeWindowобъекта.

minimize:function(){
    window.nativeWindow.minimize();
}

Закрытие приложения

Последний кусочек этой головоломки — это закрытие приложения.

close:function(evt){
     if(ToDo.hasChanged)
     {
     var shouldSave = confirm("Do you want to save your changes?");
     if(shouldSave)
     {
         ToDo.closeAfterSave = true;
         evt.preventDefault();
         ToDo.save.call(ToDo);
         return;
     }
     }
     
     air.NativeApplication.nativeApplication.exit();
     
}

Когда пользователь закрывает приложение, close()проверяет, были ли внесены какие-либо изменения. Если нет, он просто закрывает приложение. Если изменения были внесены, он предлагает пользователю использовать стандартное диалоговое окно подтверждения JavaScript. Если пользователь нажимает кнопку «ОК», приложение предотвращает действие по умолчанию — не позволяя приложению закрыться сразу — чтобы завершить процесс сохранения. Как только сохранение завершено, close()функция вызывается снова fileSaved(). На этот раз изменений нет, и приложение немедленно закрывается.

Указание параметров приложения AIR и установщика

Теперь, когда документ HTML создан и готов к работе, следующим шагом является настройка приложения AIR. Выберите «Сайт»> «Настройки приложения AIR», чтобы открыть диалоговое окно «Настройки приложения AIR и установщика» (см. Рис. 2).

Хотя требуются только поля, отмеченные звездочкой (*), есть несколько других, которые вы, вероятно, захотите отредактировать.

Текстовое поле идентификатора может быть в любом формате, но многие разработчики используют обратное доменное имя с добавлением имени приложения в конце. Например, приложение «Список дел» будет использовать «com.example.todoit» в качестве идентификатора.
Сведения о версии, которые также могут быть в любом формате, представляют собой идентификатор, который сообщает пользователям, какую версию приложения они устанавливают и используют.
Кнопка Выбрать значок изображения позволяет вам включать пользовательские изображения для вашего приложения.
Любые файлы, которые вы добавляете в свой проект, должны быть добавлены через раздел Включенные файлы этого диалогового окна. Вы можете указать папку для включения в ваш проект, щелкнув значок папки и выбрав, где хранятся ваши активы. Для этого проекта следующие файлы будут помещены в папку ресурсов:
- AIRAliases.js: предоставляет ярлыки для API-интерфейса AIR.
- bg.jpg: эта графика будет использоваться в качестве фона для интерфейса ввода и для каждого элемента в списке.
- close.jpg и min.jpg: это графика для кнопок закрытия и минимизации.
- todo.css: это таблица стилей для приложения. Внешний вид приложения определяется с помощью CSS.
- todo.js: это файл JavaScript, который заставляет приложение делать то, что вы хотите.
Поскольку приложение «Список дел» использует пользовательский Chrome, выберите «Пользовательский Chrome» (прозрачный) в качестве стиля окна. Доступны два варианта стиля: непрозрачный и прозрачный. Прозрачность требуется для пользовательских форм, используемых в этом приложении.

Самое главное, вам нужно указать цифровой сертификат для приложения. Каждое приложение должно иметь цифровую подпись для идентификации лица или компании, которые его создали. Чтобы указать цифровую подпись, нажмите кнопку «Цифровая подпись: установить» в диалоговом окне «Настройки приложения и установщика AIR». Откроется диалоговое окно «Цифровая подпись» (см. Рисунок 3).

Примечание. Подписание приложения важно для обеспечения доверия, так же как сертификат SSL для веб-сервера обеспечивает безопасность веб-сайтов и вселяет доверие к пользователям, предоставляющим личную информацию, например информацию о своей кредитной карте. Люди будут чувствовать себя более комфортно при установке приложения, если оно получено из источника, которому они доверяют. Для получения дополнительной информации о получении цифровых сертификатов см. « Цифровая подпись приложений Adobe AIR» Тодда Прекаски .

Если у вас еще нет сертификата, вы можете создать самозаверяющий сертификат, нажав кнопку «Создать» в диалоговом окне «Цифровая подпись» (см. Рис. 4).

Чтобы подписать общедоступное приложение AIR, вы должны использовать сертификат таких органов, как Verisign или Thawte, который подтверждает вашу личность для пользователей вашего приложения.

Приложение To Do List использует файлы для сохранения и открытия списков дел. Чтобы настроить сопоставление пользовательских типов файлов для этих файлов, нажмите кнопку «Изменить список» рядом с параметром «Связанные типы файлов», затем нажмите кнопку со знаком «плюс» (+), чтобы добавить тип файла. Введите имя для типа файла и расширение (не включая предшествующую точку), например, todo (см. Рисунок 5).

Вот и все. Вы указали ключевые параметры для своего приложения AIR.

Отладка и упаковка приложения

При разработке приложения вам необходимо протестировать его, чтобы убедиться, что все работает правильно. Обычно это делается периодически во время разработки. Редко был разработчик, который мог бы разработать приложение полностью и запустить его без ошибок, которые могут быть найдены.

В Dreamweaver CS3 вы можете просмотреть приложение двумя способами:

Выберите «Сайт»> «Настройки приложения AIR», а затем нажмите «Просмотр», чтобы протестировать приложение.

Вы можете использовать эту опцию независимо от того, какой документ активен, но на панели результатов не отображаются ошибки.
Выберите «Файл»> «Предварительный просмотр в браузере», а затем выберите «Предварительный просмотр в Adobe AIR».

При использовании этого параметра ошибки JavaScript будут отображаться на панели результатов. Однако вы должны убедиться, что документ HTML из вашего проекта является текущим активным документом.

Еще одним инструментом, который может быть полезен при отладке приложений, является AIR HTML Introspector. Скопируйте AIRIntrospector.js в свой проект и создайте ссылку на него в документе ui.html.

Примечание. Файл AIRIntrospector.js является частью Adobe AIR SDK . Вы можете найти копию файла AIRIntrospector.js в папке активов файлов примеров, которые прилагаются к этой статье. Пакет Adobe AIR SDK также включает в себя все необходимое для использования функции бесшовной установки значков, описанной в статье Дэвида Такера « Развертывание приложений Adobe AIR без проблем с установкой значков» .

<script type="text/javascript" src="AIRIntrospector.js"></script>

The AIR Introspector can be accessed while the application is running using the F12 key. Any error messages thrown from within the application will appear in the Console tab of AIR Introspector. The AIR Introspector also provides functions for inspecting code during the execution process.

You can use the log() method to send objects to the console tab. For example:

var test = "Debug message";
air.Introspector.Console.log(test);

In addition to log(), there are warn(), info(), and error() methods that work like log() but also display a color-coded icon.

You should remove AIRIntrospector.js before distributing a packaged AIR application.

Packaging the application for distribution

The last critical step to the process is packaging the application for distribution.

Here again, the Adobe AIR extension for Dreamweaver CS3 simplifies the process. Choose Site > AIR Application Settings, and then click Create AIR File. You can also choose Site > Create AIR File.

The application is compiled and packaged into a redistributable AIR file (with the .air extension) using the application and installer settings and the certificate you specified.

Note: For more information on deploying your application to the web, including using the badge install feature, see Deploying Adobe AIR applications seamlessly with badge install.

Where to go from here

You’ve gone through the steps of creating a To Do list application using Dreamweaver CS3 along with the Adobe AIR extension for Dreamweaver CS3. You’ve seen how to apply custom chrome, work with opening and saving files to the local file system, and learned how to package your file to share with others.

Don’t stop there, though. There’s plenty more that you can add to this application. You could add a date field to remind yourself when items are due and add alerts to let you know when you’re getting behind. Or take the interface to the next level by adding animation to the add and remove process. You can use the jQuery, Mootools, YUI, and ExtJS libraries to add new functionality quickly and easily. Also be sure to check out Christian Cantrell‘s inspirational experiments with Adobe AIR.

About the author

Jonathan Snook is a freelance developer from Ottawa, Canada. With over a decade of experience on the web, Jonathan continues to design and build web and desktop applications for clients around the world. He’s also author of Accelerated DOM Scripting with Ajax, APIs, and Libraries and co-author of The Art & Science of CSS. Jonathan contributes to magazines online and off such as UK’s .net magazine and Digital Web Magazine. He also contributes regularly to his own blog at Snook.ca.