среда, июня 27, 2007

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

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

пятница, июня 08, 2007

Flex 3 - баги DeepLinking в Firefox

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

понедельник, июня 04, 2007

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

Почти все браузеры, кроме 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-скриншоты приложения без помощи сервера.

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