Как можно использовать свойство data у кнопок

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

Делаем кнопки в цикле:

var lb:LinkButton = new LinkButton();
lb.label = dp[i]["name"];

а идентификатор заносим в свойство data:

lb.data = dp[i]["id"];

Теперь эти данные при нажатии на кнопку можно легко выудить через

event.target.data.

Использование Flex Component Kit для Flash CS3

Все мы помним старый пример Питера Энта про шарики и звездочки, где из флекса можно было ими уравлять.



Сейчас, с выходом Flash CS3 и Flex Component Kit взаимодействие между флеш-компонентами и флекс-приложением становиться еще удобнее.

Создание Flash CS3 документа

Для начала необходимо создать новый Flash CS3 документ (star_and_ball.fla). Можно порыться в старых исходниках и вытащить оттуда символы шарика и звездочки, можно нарисовать их самому. Самое главное - чтобы они были отдельными символами с точкой регистрации (0;0). Далее создаем новый символ StarAndBall, помещаем туда наши запчасти на отдельные слои и создаем гайдлайн для движения звездочки вокруг шарика.

Создание Flex компонента

После установки кита (установка проста - загрузили и установили .mxp расширение к флешу.) выбираем символ в библиотеке и в меню команд выполняем новую команду "Make Flex Component". Происходит следующее:
1. Устанавливается фреймрейт в 24fps (чтобы соответствовать флексовому умолчанию).
2. Окно вывода показывает, что UIMovieClip был добавлен и StarAndBall готов к экспорту.

Загляните в свойства символа и посмотрите, что там добавилось.

Публикация

Опубликуем документ, задав в настройках не только компиляцию свф, но и swc: star_and_ball.swf и star_and_ball.swc. Сфка нам сейчас не нужна.

Использование Flash компонента во Flex

Создадим новый флекс-проект, зайдем в его Project Properties и добавим в "Add SWC" нащ star_and_ball.swc.

Флекс сейчас верит, что в star_and_ball.swc находится настоящий флексовый компонент StarAndBall. Чтобы его использовать начните печатать:

<Star

Автокомплит вам подскажет - <local:StarAndBall. Закроем тег и запустим приложение. Вы увидите наш шарик и звездочку!

Сейчас вы можете сказать - зачем сей геморрой, если можно использовать простой SWFLoader? Но нам важно другое - то, что флекс нашел наш символ как класс - и это благодаря UIMovieClip!

Объекты

В старом примере мы могли запускать и останавливать анимацию, вызывать методы с помощью LocalConnection. В предпоследнем примере методы, расположенные на таймлайне, можно было вызывать напрямую.

Сейчас мы сможем вызывать методы, которые принадлежат нашему новому классу!

Вернемся в star_and_ball.fla, откроем свойства символа StarAndBall и увидим, что класс называется StarAndBall. Если нажать кнопочку редактирования рядом, будет сообщено, что класс не существует и он будет создан сейчас же. Тоже самое вы можете сделать и руками.

Итак, в класс StarAndBall.as добавляем наши старые методы:

package {
      import flash.display.MovieClip;
      import mx.flash.UIMovieClip;

      public class StarAndBall extends UIMovieClip
      {
           public function StarAndBall():void
           {
           }

          public function rotateStar( angle:Number ) : void {
               star_mc.rotation = angle;
           }

           public function zoomStar( factor:Number ) : void {
                star_mc.scaleX = factor;
                star_mc.scaleY = factor;
           }

           public function stopPlanet() : void
           {
                stop();
           }

           public function resumePlanet() : void
           {
                play();
           }
      }
}

Очень похоже на флекс-компонент. Заново опубликуем swc.

Назад во флекс

Дадим нашему компоненту имя . Теперь мы можем свободно вызывать методы этого компонента, которые мы только что добавили:

star.stopPlanet();
star.rotateStar(value)
и т.д.

Все исходники лежат здесь.

Спасибо Питеру Энту за полезный пост.

Тестируем производительность на пузырьках

Сайт www.bubblemark.com посвящен сравнению производительности на примере двухмерной анимации пузырьков, исполненной в нескольких RIA технологиях: Java, Flex, Apollo, DHTML, Silverlight. Вот некоторые результаты.

List и дубликаты в датапровайдере

Давно заметил следующую теперь уже наверно фичу:
Сделаем маленький пример:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
[Bindable]
public var listData:Array = ["alpha", "beta", "beta", "gamma", "delta"];
</mx:Script>
<mx:List dataProvider="{listData}"/>
</mx:Application>

В данном случае, если навести мышь на второй элемент, который идентичен третьему, то отработает наведение последний. Я думал, что это баг. Отнюдь. Вычитал из Jira, что List не должен иметь одинаковых элементов - все элементы коллекции должны иметь уникальный id, например,

public var listData:Array = [{label:"alpha", data: "01"}, {label:"beta", data: "04"}, {label:"beta", data: "90"}, {label: "gamma", data: "4"}, {label:"delta", data: "8"}];

Класс ImageSnapshot (Flex SDK 3)

В третьем SDK появился класс ImageSnapshot, который облегчает работу при создании скриншотов UI-компонентов. Класс ImageSnapshot имеет несколько методов для создания снэпшотов компонентов и кодирования их в PNG или JPEG изображения. В дополнение к этому классу появились также PNGEncoder, JPEGEncoder, Base64Encoder и Base64Decoder, которые раньше были в as3corelib.

mx.graphics.codec.JPEGEncoder
mx.graphics.codec.PNGEncoder

mx.graphics.codec.IImageEncoder

Интерфейс IImageEncoder служит для классов, которые перекодируют объекты BitmapData в ByteArray. Два вышеназванных класса (PNGEncoder и JPEGEncoder) имплементируют этот интерфейс. Если вы захотите написать свой перекодировщик, то он должен имплеменировать этот интерфейс тоже.

mx.graphics.ImageSnapshot

Класс ImageSnapshot облегчает работу с захватом снимков Flex-компонентов. Применений этому множество: создание отражений, или, например, сохранение изображений у пользователя.

Если раньше для получения Base64-строки снимка Flex UI-компонента необходимо было сделать так:

private function getBase64String(component:UIComponent):String) {
var bitmapData:BitmapData = new BitmapData(component.width, component.height, true, 0xffffff);
bitmapData.draw(component);

var bytes:ByteArray = PNGEncoder.encode(bitmapData);

var b64encoder:Base64Encoder = new Base64Encoder();
b64encoder.encodeBytes(bytes);

var b64String:String = b64encoder.flush();

return b64String;
}

То теперь нам поможет класс ImageSnapshot:

captureBitmapData
Этот метод возвращает объект BitmapData, ограниченный 2880 px по ширине и высоте.

captureImage
Этот метод возвращает объект ImageSnapshot. В параметре функции можно передать тип кодировки - PNG или JPEG.

После получения объекта ImageSnapshot мы имеем ByteArray изображения, который потом можно использовать по своему усмотрению.

encodeImageAsBase64
Этот метод получает объект ImageSnapshot и кодирует его в Base 64 строку.

Итак, перепишем наш пример:

private function getBase64String(component:UIComponent):String) {
var snapshot:ImageSnapshot = ImageSnapshot.captureImage(component);
var b64String:String = ImageSnapshot.encodeImageAsBase64(snapshot);
return b64String;
}

или в одну строку:

private function getBase64String(component:UIComponent):String) {
return ImageSnapshot.encodeImageAsBase64(ImageSnapshot.captureImage(component));
}

Обход максимального размера в 2880 px
Для захвата компонентов с большим размером есть метод captureAll, который создает несколько объектов BitmapData и объединяет их в один ByteArray. Но здесь есть ограничение - максимум 256Мб для ByteArray.

Итак, ничего нового, просто все приведено в порядок и собрано в одном месте, что позволяет сэкономить пару-тройку строк кода:)

Различия между Flex SDK 2.01 и 3

Все различия данных версиях можно наглядно посмотреть здесь. Страница еле грузится, правда.

Flex 3 - баги DeepLinking в Firefox

Тед Патрик обрадовал диплинкингом, который будет встроен в 3 Флексе. (1 и 2) Но, еще работая с SWFAddress, я заметил следующий баг в Firefox'е: если зайти в адресную строку для ручного изменения адреса, а потом перевести фокус обратно на страницу, то адресная строка перестает редактироваться и весь DeepLinking отрубается, до тех пор, пока не перезайти на эту вкладку с другой. Как говорит автор SWFAddress, это баг Firefox и победить его пока не получилось.

Экспорт изображения без помощи сервера

Почти все браузеры, кроме IE, поддерживают data: URI scheme, то есть для отображения изображения можно в src передавать не ссылку на него, а его код. Например, так выглядит красная точка:

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

Правда, отображать таким образом можно относительно небольшие изображения, зато появляется возможность создавать live-скриншоты приложения без помощи сервера.

Хороший пример с исходным кодом есть у Дуга МакКуна.

Подсветка ActionScript 3

Вышла опенсорсная (BSD) библиотека для подсветки AS3 кода. Вот наглядный примерчик. Скачать библиотеку можно отсюда

Flex 2.0.1 Hotfix 2

Flex 2.0.1 Hotfix 2. Исправлено:

- ошибки в работе Flex Builder и Flex debugger под Flash Player 9 (9.0.45.0) в Мозилле.

- добавлена поддержка ASDoc для Linux, исправлены ошибки запуска ASDoc под Mac и Linux.

- Утечки памяти в Accordion и ViewStack

- RTE из ListBase при клике на датагриде, ошибки неправильного горизонтального скролирования датагрида при скрытии/отображении последней колонки.

- Ошибки твинига дерева при отображении скроллбаров и ошибки отображения данных при удалении нода.

- Изменение compc для использования SourceList.

- Атрибут uri для тега в catalog.xml теперь опционален.

- Пофиксены LineStyle2 и ButtonRecord2.

- unscaledWidth/unscaledHeight теперь public и read/write.

- Нажатие на полосу прокрутки не работает, если она заскинована

- Удален ExcludeClass metadata из AbstractWebService.

Установка стандартная: забэкапить старый SDK и перезаписать на старый новый.

Класс Tweener

Открыл для себя класс Tweener, с помощью которого можно легко создавать программную анимацию и различные эффекты. Он реализован как для AS2, так и для AS3, при этом код менять не надо.
С помощью этого класса и Papervision3d создан прикольный каталог для ITunes.

Вот небольшой пример кода:

Tweener.addTween(UITarget, {x:selectedGoTo.x, y:selectedGoTo.y, z:selectedGoTo.z-bounceAmount+UISpacing, rotationX:0, rotationY:180, rotationZ:0, time:primeTransTime, transition:transEquation});

Прикольно то, что твининг можно задавать в трех измерениях, а также вращать элемент вокруг своих осей.

onReleaseOutside, onDragOut, onDragOver возвращаются

Андре Мишель делится своей реализацией событий onReleaseOutside, onDragOut, onDragOver.

D.eval() - eval() для Flex

D.eval() (Дивал) - библиотека, позволяющая во Flex приложеняих исполнять текстовые строки как ActionScript-выражения. Выглядит он следующим образом:

import com.riaone.deval.D;
var six:int;
six = D.eval("4 + 2") as int;
six = D.evalToInt("var x=0; for(i=1;i<=3;++i)x+=i;return x");
six = D.evalToInt("a * b", {a:2, b:3});
six = D.evalToInt("f(5)", {f:function(x:int):int{return x+1}});
six = D.evalToInt("xml.@size*2", {xml:});
six = D.evalToInt('xml=; return xml.@size*2');

Язык, используемый в D.eval() - это Deval. Он поддерживает все AS3 выражения, включая E4X; он имеет доступ к AS3 классам и функциям, но сам их не задает. Типа, новый шаг в разработке Flex-приложений.

Загрузить можно здесь.

APE - Actionscript Physics Engine

APE - 2d движок для Flash/Flex. Скачать версию 0.3 alpha можно отсюда. Есть небольшое демо, а также можно выполнить урок для начала работы с движком во Flex Builder.

Прикольная демка Papervision/Flex

AS3 String Utils

Класс с расширенными методами управления строками.

API:
afterFirst
adterLast
beginsWith
beforeFirst
beforeLast
between
block
capitalize
contains
countof
editDistance
endsWith
hasText
isEmpty
isNumeric
padLeft
padRight
properCase
quote
remove
removeExtraWhiteSpace
reverse
reverseWords
similarity
stripTags
swapCase
trim
trimLeft
trimRight
wordCount
truncate

Открываем ссылки в новом окне

Современные браузеры зачастую блокируют ссылки, открывающиеся в новом окне. Firefox также не является исключением. При этом (в зависимости от настроек блокировщика) у него появляется маленький крестик внизу, о миссии которого сложно догадаться с первого раза. Так как не все флексовые приложения использую SWFAddress, то открыв ссылку в этом же окне и вернувшись назад мы получаем исходный вид приложения, что является крайне неюзабельным. Поэтому, часто сразу ссылки открывают в новом окне, которое и блокируется. Чтобы этого избежать, некто Сергей Ковалев предлагает открывать окна через жаваскриптовый window.open. Все отлично работает, спасибо за метод борьбы:). Но теперь остается еще одна проблема: во флексе ссылки не открываются из Label. Чтобы решить эту проблему, можно совместить вышеприведенный метод с новым текстовым событием LINK следующим образом:

...
[Bindable] private var str:String = '<a href="event:http://www.ya.ru">www.ya.ru</a>';
...

<mx:Label selectable="true" htmlText="{str}" link="URLUtil.openWindow(event.text)"/>

Теперь все в порядке.

AS3 карты

Даррон Шелл создал на гугл-коде раздел as3cards, который содержит скинуемый движок по созданию карточных игр (например, Klondike).
SVN

FDT 3.0 beta

Powerflasher'ы анонсируют выход беты известного Eclipse-плагина FDT третьей версии с поддержкой конечно же AS3. Стоить сие творение будет 299 евро, а вот апгрейд с 1.5. версии всего 99. Релиз планируется на июль. Из новых фич ничего толком не объявлено: совместимость с флексом, улучшенная производительность и много очень полезных улучшений:)

HTMLRenderer - больше, чем htmlText!

Хотите, чтобы Flex отображал нумерованный список, изображения с всплывающими альтами и цветными бордерами, разукрашенные таблицы со всякими колспанами и роуспанами? И еще, чтобы задано это было простыми html тегами/аттрибутами, обернутыми в конструкции OL, TEXT, IMAGE и GRID? Пожалуйста!



HTMLRenderer далеко не универсален, но всего функционала и впихнешь, а если и впихнешь, то можно получить какой-нибудь браузер:)