RIA crumbs.

Blog about RIA development. ActionScript, JavaScript and more.

Archive for the ‘Flex’ Category

Новые обучающие статьи и видео уроки по AIR.

2 comments

Mike Chambers собрал массу полезных ссылок с интересными статьями и видео демками связанных с AIR.

Вот некоторые статьи которые могут быть полезны:

ps. тоже решил поучавствовать в Blogowar :) 308d5a602fdeafba6d72b44913b17ba0

Written by reijii

October 19th, 2007 at 12:27 pm

Posted in AIR,Flex

Tagged with , , , , ,

Поиск описаний ошибок.

5 comments

Набрел тут на одно замечательное Flex приложение от автора Judah Frangipane, за что ему от меня респект.

Приложение приятно облегчает жизнь тем кто хочет узнать о том куда его послали, введя код ошибки :) Так же есть ссылки на Error Wiki, Runtime Errors и Compiler Errors. Пользуйтесь на здоровье.

Written by reijii

October 16th, 2007 at 5:01 pm

Posted in AIR,Flex

Tagged with , , , , ,

Интерьвю с Эдом Финклером (Ed Finkler).

leave a comment

Эд Финклер создатель AIR Spaz Twitter Client и победивший на AIR Developer Derby в номинации “Best HTML Community Application”. Дал интервью для arc technica, в интервью Эд рассказывает почему он выбрал AIR, и с чем он столкнулся в процессе разработки. Также Эд рассказывает о нововведениях Beta 2 при работе с HTML / JavaScript Security.

Текст легко читабелен, надеюсь кому-то будет полезен.

Written by reijii

October 15th, 2007 at 12:12 pm

Делаем процесс “скинования” проще. [Часть 2]

2 comments

Продолжаю обзор Flex Skin Design Extension, на этот раз буду повествовать об extension под Adobe Photosop CS3. Часть первая, об extension в целом и его версии под Adobe Flash CS3, находится тут.

Flex Skin Design Extension под Photoshop представляет собой набор PSD шаблонов и два скрипта (экспорт скина и мастер создания скина).

Установка крайне простая, копируем содержимое архива в папку “\Program Files\Adobe\Adobe Photoshop CS3\Presets“. Теперь можно запускать Photoshop и начинать зверский акт вандализма над стандартными скинами :)

Запускаем Photoshop и запускаем мастер создания скина (File -> Scripts -> New Flex Skin…). Первое отличие от extension под Flash – это наличие выбора создания скина для нескольких компонент или для одного выбранного компонента. При выборе опции создания скина для единичного компонента активируется возможность выбрать диапазон применимости скина (для всех виджетов этого типа в приложении или только для тех, у кого заданный styleName ;) ).

PS - New Flex Skin

Рассмотрим создание скина для кнопки, у которой styleName=”customButton”. После выбора нужных значений и ввода styleName в мастере создание скина жмем Ок и получаем новый документ с импортированными в него заготовками для состояний кнопок (названия слоев и папок заданы в виде Button_customButton_overSkin и т.д., по состояниям виджета), а также хитрая папка с фоновым декором и пояснениями к шаблону (ее нужно скрывать перед экспортом скина, она так и называется – “_HIDE BEFORE EXPORTING”, но об этом потом).

PS - New Flex Skin Edit

После того, как вдоволь поиздевались над скином, прячем папку с названием _HIDE BEFORE EXPORTING и запускаем скрипт экспорта (File -> Scripts -> Export Flex Skins…). Скрипт попросит вас указать, куда будем создавать скины, и после нажатия OK начинаются танцы с бубнами, т.е. сохранение скина. (Фотошоп желательно оставить в покое, так как скрипт устраивает всяческие махинации с создаванием документов и т.д.)

После того, как скрипт закончит злодеяния, заходим в выбранный каталог для экспорта и смотрим, что создалось. А создалось, вопреки ожиданиям на чудо, css или что-то в этом духе – папка assets с четырьмя PNG-24 файлами. Теперь настал час “Ч” – импортировать весь этот artwork в Flex приложение.

Запускаем импорт нашего скина (File -> Import -> Skin Artwork…). Выбираем нашу папку со скином, в качестве значения для поля Folder or Bitmaps, и проект, внешний вид которого мы хотим изменить (также можно выбрать папку, куда все будет свалено, и название CSS файла; по умолчанию стоят названия assets). Next. Выведется список из доступных PNG, в котором можем выбрать, что будет импортироваться, а что – нет. Дополнительно в списке указывается название состояния виджета, на которое будет влиять PNG.

FX - Widget states skin selection

Finish. В папке проекта создается каталог assets, в который скопировались картинки, и в корне создался assets.css, в котором прописан стиль для нашей кнопки, а также в main MXML файл подключили наш CSS.

Fin.

Впечатления: все хорошо, но:

  • В версии для Flash не хватает мультивыбора компонент и указания styleName для единичного компонента, и довольно грязный импорт во Flex: помимо скина там в списке еще масса всякого хлама; хорошо, что все, что относится к скину, выбрано по умолчанию, а остальное отключено;
  • В версии для Photoshop не очень удобно редактировать скины, особенно полупрозрачные градиентные заливки;
  • В версии для Photoshop есть один большой минус: дизайнеру нельзя задать параметры для Scale-9 (это можно будет сделать только в коде, то есть подправить ручками CSS) и результат растровый;

Вроде все перечислил. Если что забыл, пишите, обновлю пост.

Written by reijii

October 12th, 2007 at 5:48 pm

Posted in Flex,UI

Tagged with , , , , , , ,

Cairngorm WYSIWYG редактор.

2 comments

Появился ресурс, который будет полезен для фанатов и начинающий путешественников по тропам Cairngorm. Cairngorm Creator, пока правда Beta, от Tyler Beck, помогает облегчить жизнь, путем визуального создания структуры, или ее части вашего приложения, основанного на Cairnrogm.

Заявленные фишки:

  • Настраиваемые имена пакетов;
  • Настраиваемые имена папок;
  • Настраиваемые build файлы;
  • Сохранение и загрузка структур (XML);
  • Редактируемый XML;
  • Превью классов / файлов, которые будут генерироватся;
  • Возможность скачать все содеянное в zip;

 

Cairngorm Creator - File Preview Cairngorm Creator - Start

Written by reijii

October 11th, 2007 at 12:09 pm

Posted in Flex

Tagged with , , , , ,

Условная компиляция в Flex 3 beta 2 ‘Moxie’

leave a comment

Adobe Flex Doc Team, заявляет о том, что Moxie поддерживает условную компиляцию. Которая позволяет включать или исключать определенный код при компилировании приложения.

Советуют пользоваться этим в основном при дебаге или при финальном релизе. Для того чтобы не включать какие-то части кода, классы, или библиотеки, которые использовались при разработке, но не должны попасть в релиз.

Документация по этой полезной особенности не вошла в Beta 2, так что все дружно качаем PDF (40 kb).

Written by reijii

October 10th, 2007 at 6:47 pm

Posted in Flex

Tagged with , , , ,

Есть ли Zink на Mac’e ?

2 comments

Решил поделиться рецептом для осуществления копирования большого количества файлов в связке Flex + MDM Zink под Mac OS.

Проблема с копированием большого количества файлов, используя MDM Zink API для работы с файловой системой, скажем, с CD на винт, и расфасовке их по папкам под Mac OS заключается в том, что MDM Zink Flex projector просто-напросто переставал копировать, не выдавая при этом никаких признаков того, что процесс копирования умер и ждать собственно нечего, плюс ко всем этим прелестям он копирует довольно долго даже сравнительно не большие файлы до 100 kb.

Служба поддержки у MDM Zink говорила в ответ на запрос, что, мол, таки да, но пока ничего поделать не будем.

Не помогало и разделение операций по формированию путей к файлам (откуда копируем и куда копируем), создавание структуры каталогов для копирования, реализация копирования файлов поштучно по таймеру или по событию от API. Удавалось лишь изредка увеличивать количество успешно скопированных файлов.

В результате всех этих неуспешных попыток настало время кардинальных методов; в начале пробовал реализовать копирование файлов посредством AppleScript (только для Mac OS), благо в API у MDM Zink заложена такая возможность. Но снова решение не совсем удалось, во-первых, из-за того, что AppleScript обладает не совсем привычным синтаксисом, и с первого раза не “раскуришь” все тонкости “языка яблок”, простенький пример, который считает количество файлов в папке “Applications”:

[code lang="applescript"]
tell application "Finder"
if folder "Applications" of startup disk exists then
return count files in folder "Applications" of startup disk
else
return 0
end if
end tell
[/code]

Да и не очень удобно было производить отладку, так как в начале приходилось писать код на Mac’e, в его чудном редакторе ScriptEditor, потом переносить в MDM Zink под Win, так как проект собирался на Flex + MDM Zink под Windows, где он не всегда компилировался. В итоге я не нашел консенсуса с “языком яблок” и принялся искать другое решение.

Финальная часть “марлезонского балета”: ситуация спасена благодаря тому, что MDM Zink API предусмотрел возможность работы с MacShell, он же bash. Посредством команд MacShell мы успешно копируем файлы.

[code lang="actionscript"]

// file это наш типизированный объект в котором идет нужая нам инфа
private function doCopy ( file:CopyTarget ) : void
{
// преобразовываем пути в макосъедобные, на случай если они у вас в win формате
var macFromPath : String = mdm.FileSystem.nativePathToUnixPath( file.copyFrom );
var macToPath : String = mdm.FileSystem.nativePathToUnixPath( file.copyTo );

// устраняем лишний слеш, если его нет, то устранять не нужно :)
macFromPath = macFromPath.slice( 0, macFromPath.length - 1 );
macToPath = macToPath.slice( 0, macToPath.length - 1 );

// оборачиваем все в кавычки "
macFromPath = '"' + macFromPath + '"';
macToPath = '"' + macToPath + '"';

// составляем shell команду
var shellScript : String = 'cp ' + macFromPath + ' ' + macToPath;

// запускаем, подчеркивания убрать поставил из-за того что WordPress отказывался сохранять пост
mdm_._Mac_Shell_._exec_( shellScript );

// тут вызов рекурсии по таймеру, чтобы дальше копировать и отображаем прогресс копирования
setTimeout( processCopyFiles, 600 );
}

[/code]

Итого, алгоритм действий, которые позволяют решить проблему с копированием большого количества файлов из MDM Zink под Mac OS:

  1. Подготавливаем заранее пути для создания каталога/ов и для копирования файлов (откуда и куда; путь, куда копировать, нужен еще для того, что иногда хочется файл переименовать). Времени много не отберёт, но разгрузит нагрузку под Mac OS и упростит создание дерева каталогов, во время подготовки путей для каталогов можно отсеять дубликаты.
  2. Создаём каталоги, это можно реализовывать через MDM Zink API, методом mdm.FileSystem.makeFolder();
  3. Копируем файлы поштучно, используя MacShell, с небольшой задержкой (я ставил 600 мс);
  4. Радуемся жизни.

Помимо всего, выигрышем в использовании MacShell является возможность радовать глаз пользователя такой замечательной вещью, как прогресс копирования файлов, чего никак нельзя сделать, если мы делаем какие-либо операции с файловой системой, используя MDM Zink API. Потому что он просто посылает Flex приложение в глубокий нокаут до завершения своих злодеяний, и на примере прогресса копирования счастливый пользователь увидит только состояние в 100%. Также мы легко можем сделать паузу/отмену копированию. В общем, сплошная радость.

Бонусный рецепт для тех, кто дочитал до конца :) . Рецепт, как закрыть ваше MDM Zink приложение, работающее под Mac OS, да еще и в fullscreen режиме. При попытке закрыть приложение путем MDM Zink API (mdm.Application.exit()), приложение бывает просто уходит в ступор и жалобно просит “force quit”, то есть “снять задачу”.

MDM Zink сапорт, когда-нибудь напишу про него отдельную статью, лаконично ответил: “А вы не юзайте fullscreen”.

Но выход есть, немного грубо, но работает, просто запускаем, через mdm.MacShell.exec(), чудную команду – “killall mdm-static”.

Fin.

На первый раз я думаю рецептов хватит, но если у кого есть альтернативные решения данных проблем, милости просим.

ps. сорри за битый пост, была проблема с wordpress и code snippet плагином, чтото не дает сохранить пост с кодом :(

Written by reijii

October 9th, 2007 at 10:43 pm

Делаем процесс “скинования” проще. [Часть 1]

3 comments

Тед Патрик недавно написал о различных новостях от Adobe, в том числе и о Flex Skin Design Extension. Которое должно облегчить жизнь дизайнерам при создании скинов для Flex приложений. Плагин идет под Photoshop, Flash, Illustrator и под FireWorks.

Общая логика – это предоставление набора шаблонов базового внешнего вида Flex компонент, взятых из стандартной темы AeonGraphical, поставляемой с Flex 3, которые путем простого редактирования можно превратить в кастомные скины.

Попытаюсь кратко рассказать про extension под Photoshop и Flash (все CS3).

Итак, начнем с Flash. Extension поставляется в виде mxp файла, установка которого не составляет больших проблем. Благо инсталлируя продукты линейки CS3 помимо самих продуктов, мы получаем еще кучу нужных и не очень штук, в числе нужных – Adobe Extension Manager.

После запуска Flash CS3 на splash screen в разделе “Create From Template” появляется выбор Flex Skins. В котором можно выбрать скин по видам виджетов.

FL splash

Выбрав интересующий скин, создается новый Flash CS3 документ, в котором уже все готово для редактирования, и все довольно приятно разнесено по папочкам в библиотеке. Осталось только изменить то что нам требуется. Scale-9 учтен.

FL edit

Итогом работы станет SWC , содержащий измененый нами скин. При паблише есть галочка Export SWC, выбрана по умолчанию. Импортируем нашу SWC в проект (File->Import..->Skin Artwork), мы получаем уже отскинованые компоненты. То есть, в нашем случае скролбары будут выглядеть, так как мы над ними поиздевались, без указания стилей и прочего.

Обзор как все сделать используя Flex Skin Design Extension и Photoshop будет во второй части.

Written by reijii

October 9th, 2007 at 12:46 pm

Posted in Flash,Flex,UI

Mozilla vs SWF

8 comments

Всем столкнувшимся с проблемой передачи фокуса своему Flash/Flex приложению в Mozilla (FF) посвящается.

Недавно захотелось, чтобы приложение сходу, после запуска в браузере, без “стартового” клика по нему, “отлавливало” события мышиного колеса, к примеру.

В ходе детальных экспериментов и мучительных поисков, выяснилось, что в IE, как это ни странно, реализовать это очень просто. Достаточно просто-напросто при помощи JavaScript передать фокус вашей флешке, и все сразу счастливы:
[code lang="javascript"]
$("#MyFxApplication").focus();
[/code]
Но тут и вступает в игру FireFox, в котором фокус и события упорно игнорируют ваше приложение. На просторах Гугла и Яндекса нашлось много интересного, но все сводится к тому, что по-хорошему работать ничего не будет. Есть варианты, которые “лечат” эту болезнь у FireFox, но порождают болезни у Flex, отключение мультиселекта и fullscreen.

Такой вариант заключается в том, что приложению ставится wmode=”transparent” или wmode=”opaque”, а фокус передается тем же JavaScript, но с небольшим изменением, перед передачей фокуса приложению, даем его нашему body:
[code lang="javascript"]
$().focus();
$("#MyFxApplication").focus();
[/code]
Метод хорош, но мы теряем важные для большинства, как мне кажется, людей функциональности, причем fullscreen теряется как в IE, так и в FF.

Ответ Mozilla, по поводу этой проблемы, взято отсюда:

Mozilla hired a contractor to do the work, who stopped before finishing. Now
it’s too late in the release cycle to take the change, especially since there is
no one available and qualified to do the work.

I will push hard to get Mozilla Corporation to put someone on it after Firefox 3.

- Aaron

Есть варианты, где люди предлагают передавать события клавиатуры и мышки, в Flash/Flex через ExternalInterface. Чем-то это решение и хорошо, но при большом приложении можно немного затеряться при “расфасовке” входящих событий из JavaScript. И все равно остаётся проблема автофокуса.

Итого, будем ждать и надеяться, что в FireFox 3 все будет хорошо, и все им дружно будут пользоваться, или …

Но, есть еще метод от _etc, который предлагает зайти со стороны AS2. Главными идеями метода, являются:

  • Подписываться на глобальные события мыши, как в AS2, везде и всюду, в любом классе;
  • Не иметь привязки ни к какому InteractiveObject, необходимости наследования, отрисовки чего-либо;
  • Захват скролла мыши от браузера (в AS3 скролл продолжает работать в самом браузере).

Более подробно почитать и взять на вооружение этого решения можно здесь.

ps. Если кому удалось решить данную проблему, просьба поделится со страждущими :)

pss. В JavaScript примерах использовался синтаксис суперзамечательной библиотеки jQuery, о которой мне рассказал Майкл Клишин. За что ему большое человеческое спасибо.

Written by reijii

October 9th, 2007 at 12:41 am

Posted in Flex,Integration