Давно не появлялось чего-то новенького об ExtJS, видимо все готовятся к анонсированной конференции (я уже писал об этом), а те, что останется в уютных домашний креслах — к анонсу ExtJS 3.0. Но сегодня заглянув в официальный блог компании, я нашел интереснейшую заметку. Как уже известно, в последние версии ExtJS начали активно внедрять поддержку платформы Adobe AIR, что не может не радовать, ведь именно симбиоз этих двух потрясающих инструментов может дать, в умелых руках, конечно, просто отличные результаты.

В Flash 10, а значит и в Adobe AIR 1.5 в его именно флешевую часть была внедрена интересная технология, по сути, полного управления всем отображаемым на экране — PixelBender. При помощи специального языка программирования GLSL (OpenGL Shading Language) разработчик может описывать операции над пикселями, при этом программа может быть применена не только к картинке, а к любому флеш-объекту, в том числе и целому окну или веб-странице. Кстати да, вы не ослышались, речь идет именно об OpenGL, а это нас приближает вплотную к возможности создать серьезные графические приложения, оперируя только обычными для веб-разработки инструментами. Если кто разбирается в 3D, то эта технология очень близка к пиксельным шейдерам, которые также программируются на своих языках.

А как, простите, это связано с ExtJS? Да очень просто! Если вы при помощи специального инструментария создадите описание собственной функции PixelBender, то впоследствии можете очень просто применять ее к объектам созданным в ExtJS (пакет Ext.air.*). Для демонстрации совместной работы обоих технологий, выпущен Pixel Bender Explorer, демонстрирующий ряд эффектов, которые применяются к видео, графике или окну, создаваемому силами ExtJS. Вы можете гибко изменять параметры эффектов и просматривать их результат в реальном времени.

Эффекты могут быть совершенно различные, в предлагаемом демонстрационном пакете их несколько десятков, как производства самой Adobe, так и творчество других разработчиков. Интересно взять именно третий из предлагаемых вариантов — Demo with Browser, тогда будет создано новое окно (заметьте, средствами ExtJS), в котором будет открыта заглавная страница Google. А дальше — дальше просты выбирайте любой эффект в списке и смотрите, что произойдет с окном, при этом обратите внимание, что трансформируется именно все окно полностью, а не только его содержимое! Но даже исказив до почти неузнаваемости, страница все равно работоспособна, в окне можно ввести текст, нажимать на кнопки и даже работать. Это значит, что операция именно визуальная и происходит после полного формирования страницы, оставляя всю функциональность на месте.



А пример реализации такого очень прост (для знакомых с Ext):

var win = new Ext.air.NativeWindow({
file: '../html/browser.html',
transparent: true,
chrome: 'none',
width: 640,
height: 480
});
win.animFn({
paramName: 'amount',
reset: true,
startValue: 5,
endValue: 0,
duration: 1,
mode: 'easeOutStrong',
url: 'app:/kernels/smudger.pbj'
});
win.bend();



Для чего можно применить такой инструментарий? Ну, самый простой пример — красивый splash-screen при старте вашего AIR-приложения, хотя это слишком поверхностный пример. Возможность гибко управлять каждым пикселем может быть использована для разработки различных графических приложений, развлекательных (альбомы с переходами и т.п.), а уж какие перспективы открываются в игровых проектах, просто дух захватывает. Так что ребята с ExtJS молодцы, что пытаются максимально раскрыть и утилизировать мощь платформы Adobe AIR!

Кстати, для разработчиков есть замечательный ресурс, Pixel Bender Exchange, где можно скачать или купить нужные фильтры, ведь эта технология начала свою работу намного раньше AIR, пройдя обкатку в таких профессиональных пакетах обработки мультимедии, как After Effects и Photoshop. Кстати, мне очень и очень сильно хочется ответить да на вопрос — а не таким ли способом можно сделать «on-line Photoshop»?..