Давно не появлялось чего-то новенького об 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»?..
