Рубрика: Маленькие хитрости

Определение версии AIR runtime

AIR Logo (Final Version)Иногда надо узнать, какая версия AIR runtime стоит на вашей машине. Это может понадобиться, например, чтобы написать баг-репорт.

Думаю, все умеют ее узнавать, но на всякий случай поделюсь своим способом, который работает на Windows XP (думаю, что на Висте не будет принципиальных отличий).

Для этого вам надо просто найти Adobe AIR в списке Add or Remove Programs (не знаю, как это по русски :D )

Adobe AIR в списке установленных приложений
Adobe AIR в списке установленных приложений

После этого нажимаем на “Click here for support information” и видим номер версии:

Информация о номере версии Adobe AIR runtime
Информация о номере версии Adobe AIR runtime

Надеюсь, что кому-нибудь пригодится :)

Bookmark this article at …

  Russian (RU)  
  Теги: adobe air, how to

Отлов событий из Item Renderer'ов

Многие знают, что ячейки таких компонент, как List и DataGrid могут быть представлены не только в стандартном виде, но и в произвольном, определённом пользователем. Достигается это с помощью item renderer’ов. Но не освещение темы item renderer’ов как таковых меня интересует сейчас, а некоторые конкретные случаи работы с ними. Те же, кто хочет узнать про рендереры, могут это сделать самостоятельно.

Основная задача item renderer’а - представить произвольный визуальный способ отображения и редактирования данных. То есть если речь идет об изменении данных, то renderer это делает самостоятельно. Замечу об отличии item renderer’а от item editor’а с точки зрения редактирования данных: item editor предоставляет механизм некой сессии редактирования данных, обладающей сложным устройством и возможностью отмены редактирования. Но это тоже отступление от нашей генеральной мысли об орехах.

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

Как перехватить это событие? Сложный вопрос. В общем, есть разные варианты. Например, используя ключевые слова parent или owner. Но реально это не очень спортивный способ. Ибо сильно завязан на структуру объектов.

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

Итак, будем основываться на примере с List’ом и item renderer’е с кнопкой. Будем использовать простейший XML в качестве data provider’а:

XML:

<mx:XMLList xmlns="">
    <testDataElement id="1" name="test 1" label="Delete" />
    <testDataElement id="2" name="test 2" label="Delete" />
    <testDataElement id="3" name="test 3" label="Delete" />
    <testDataElement id="4" name="test 4" label="Delete" />
    <testDataElement id="5" name="test 5" label="Delete" />
    <testDataElement id="6" name="test 6" label="Delete" />
</mx:XMLList>

Тогда наш простой рендерер будет выглядеть так:

XML:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
    xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Label
        width="100%"
        text="{data.@name}" />
    <mx:Button
        click="dispatchEvent(new Event ('insideRendererButtonClick', true))"
        label="{data.@label}" />
</mx:HBox>

При нажатии на кнопку мы генерим событие с бабблингом. Но как это использовать?

Есть два основных способа:

  • Простой способ, не требующий модификации List’а.
  • Более комфортный для использования, но требующий модификации List’а.

Первый способ прост. Мы ловим бабблинг снаружи обрабатываем его:

This text is replaced by the Flash movie.

Можно посмотреть в отдельном окне (исходники доступны по правой кнопке).

Пример прост: при нажатии на кнопку в первом List’е удаляется соответствующая строка. Во втором же List’е меняется метка на кнопке (и это, теоретически, вполне можно сделать изнутри рендерера).

Как мы видим, главный класс приложения прост. Но он требует от нас двух вещей: подписываться на события с помощью addEventListener (декларативный синтаксис не работает потому что мы не указали соответствующих метаданных события в List’е) и на всякий случай вызывать stopPropagation для нашего события (чтобы где-то наверху кто-то неожиданно его не поймал). Также мы не можем послать стандартный ListEvent так как заполнение его полей требует знания о List’е, что опять же требует owner’ов/parent’ов.

Кстати, способ с бабблингом требует одного условия: имя события (тип) не должно совпадать ни с одним из имен событий нашего List’а.

Приложение, реализующее второй способ, выглядит аналогично. Также по правой кнопке доступны исходники. Рендерер мы оставили без изменений. Мы лишь добавили простой кастомный класс события и соответствующую константу для нашего события в нем. Это событие отражено в метаданных нашего расширенного List’а. Оно не перекрывается с именем события, которое «пузырит» наш рендерер.

Также в нашем List’е мы видим отключение дальнейшего бабблинга события от рендерера (чтобы оно никому уже не помешало) с использованием stopImmediatePropagation.

Иллюстрация метода stopImmediatePropagation ()

А также можно увидеть формирование валидного события. Все просто. И, как следствие, упростился код главного класса приложения и стал много нагляднее.

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

Примерно так. Можно задавать вопросы, делиться своими способами, критикой приведенных итд. Милости прошу в комменты.

Ну и напоследок предлагаю скачать готовый проект приведённого примера (Flex Builder 3 beta 3).

Ссылки по теме раз и два.

Now playing: Аквариум - Немое кино

Bookmark this article at …

  Russian (RU)  
 

Еще о событиях в ActionScript

Поток событий для визуальных объектов в ActionScript 3

Если кто-то помнит, на первой встрече Русскоязычной Группы Пользователей Flash-платформы (RAFPUG) я рассказывал о событиях в ActionScript 3. Как краевед могу сказать, что тема событий в ActionScript далеко не так тривиальна, как это может показаться на первый, второй и третий взгляд. Работая с ними довольно долго, можно тем не менее иногда обнаружить что-то новое, сделать новые выводы и найти применения старым вещам. В частности, в том докладе я сказал некоторую лажу и во всем зале меня никто не поправил :( Поправлю себя сам.

Там я сказал, что event flow (поток событий) работает только для визуальных объектов и только для интерактивных событий мыши и клавиатуры, генерируемых Flash-плеером. На основании этого я продемонстрировал пример с искусственным бабблингом (фазой пузырька). И сделал слегка неверные выводы.

На самом деле, на практике все гораздо проще. И мой тот пример вполне работоспособный, но более актуальный для невизуальных объектов, либо для того, чтобы объекты генерировали целевую фазу (target phase) и фазу пузырька (bubbling phase) одновременно. Речь идет о делегировании события.

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

В изначальном утверждении про визуальные объекты и поток событий все правильно если рассматривать под потоком событий все три фазы (capture, target и bubbling). Но фаза пузырька (bubbling) работает и так, сама по себе.

Рассмотрим пример:

This text is replaced by the Flash movie.

Пример сделан в виде просто AS-проекта для наглядности. Исходники можно посмотреть тут. Скачать проект можно тут.

Что мы видим на данном примере. Есть корневой Sprite, в котором лежит простой компонент ParentSprite (внешний серый квадрат), в нем лежит компонент ChildSprite, при клике на внутренний квадрат которого наш компонент генерит событие, которое ловится внешним Sprite‘ом безо всякого участия ParentSprite:

  1. private function onInsideChildClick (event:MouseEvent):void
  2. {
  3.     dispatchEvent(new Event ("ourTargetEvent", true));
  4. }

Обработка события видна в текстовом поле. Весь секрет в волшебных пузырьках во втором параметре конструктора класса Event (он установлен в true). Это и есть бабблинг. И ParentSprite автоматом бабблит его. Безо всякого кода.

Естественно, это просто иллюстрация. В реальности неплохо бы сделать кастомный класс события, соответствующие константы итд.

Гарантирую, что это может сильно облегчить вам жизнь.

Now playing: Аквариум - Пустые места

Bookmark this article at …

  Russian (RU)  
 

Мои любимые плагины для Eclipse

Eclipse LogoМногие пользуются Eclipse в каждодневной разработке. И все знают, что сила Eclipse в плагинах. В этом посте я хочу описать несколько своих любимых плагинов. Возможно, они вам пригодятся. Сразу замечу, что все обозреваемые плагины бесплатны и свободно доступны. Итак:

  • Winamp plugin. Плагин добавляет в Eclipse панельку с кнопками и соответствующее меню:

    Winamp Plugin bar

    Смысл понятен. При запущенном Winamp’е можно управлять проигрыванием песен. Для работы плагина необходимо скопировать {Eclipse installation}/plugins\org.jeneag.winamp_1.0.2\cpp\winamp.dll в папку с dll-ками вашей jre.

    Мне данный плагин нравится :)

  • AnyEdit tools plugin for Eclipse. Об этом плагине я уже подробно писал ранее.

  • Eclipse Colorer. Плагин позволяет просто и быстро редактировать файлы множества разных форматов, осуществляет в них подсветку кода, поддерживает folding, и word wrapping. Также очень интересной особенностью является возможность генерации HTML-файла с раскрашенным в выбранной цветовой схеме кодом. Поддерживает более 150 типов файлов, среди которых js, java, xml, as, php, html, Ruby (в разделе Rare languages) и многое другое :)

  • Subclipse. Всем известный плагин для работы с Subversion.

  • EditorPosition. Запоминает положение курсора в редактируемом файле. Если вы закрываете Eclipse, то при его последующем открытии восстанавливаются не только открытые закладки-файлы, но и место, где вы закончили их редактировать.

Здесь я перечислил лишь основной набор, который подходит всем разработчикам, работающим в Eclipse. То есть плагины не привязаны к конкретному языку программирования.

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

И напоследок полезный совет, которым многим известен, а некоторым - нет. Если в окне навигатора щелкнуть на проекте или папочке правой кнопкой и выбрать Go Into, то данная папочка станет корневой в данном навигаторе. Это позволит вам убрать на время ненужный мусор и сконцентрироваться на главном. Вернуться назад просто: достаточно нажать стрелку “назад” в меню навигатора.

Удачи! :)

Bookmark this article at …

  Russian (RU)  
 

Аспекты наследования во Flex

Flex LogoЕсли кто-то занимался исследованием кода компонент Flex-фрэймворка, мог заметить некоторые особенности реализации метода createChildren() практически во всех классах:

  1. override protected function createChildren():void
  2. {
  3.     super.createChildren();
  4.  
  5.     if (!titleBar)
  6.     {
  7.         titleBar = new UIComponent();
  8.         ...
  9.         rawChildren.addChild(titleBar);
  10.     }
  11.  
  12.     if (!titleTextField)
  13.     {
  14.         titleTextField = new UITextField();
  15.         ...
  16.         titleBar.addChild(titleTextField);
  17.     }
  18.     ...
  19. }

Примерно в таком духе.

Не очень понятно, зачем проверять существование создаваемых GUI-элементов, если метод createChildren() вызывается из конструктора, и именно в нем создаются контролы? Думаю, что многие знают, для остальных смысл объясняется ниже.

Предположим мы хотим создать вариант класса mx.controls.Alert, который может отображать текст с HTML-форматированием. Задача может показаться сложной, но описанное выше дизайнерское решение создателей Flex-фрэймворка существенно облегчает нам задачу, делая ее очень легкой.

Рассмотрим место в коде mx.controls.Alert, которое нас интересует:

  1. override protected function createChildren():void
  2. {
  3.     super.createChildren();
  4.     ...
  5.     if (!alertForm)
  6.     {   
  7.         alertForm = new AlertForm();
  8.         alertForm.styleName = this;
  9.         addChild(alertForm);
  10.     }
  11. }

Именно поле alertForm содержит экземпляр класса mx.controls.alertClasses.AlertForm, в котором и находится наше текстовое поле. Идея простая: нам надо создать свой класс AlertForm и попробовать создать его экземпляр в методе createChildren() класса com.riapriority.controls.HTMLAlert, который мы хотим получить.

Логично предположить, что наш класс com.riapriority.controls.HTMLAlertForm будет наследоваться от оригинального AlertForm. И тогда благодаря проверке на существование alertForm мы преспокойно можем написать наш метод createChildren():

  1. override protected function createChildren():void
  2. {
  3.     alertForm = new HTMLAlertForm();
  4.     alertForm.styleName = this;
  5.     addChild(alertForm);
  6.    
  7.     super.createChildren();
  8. }

Итак, идея понятна. Если же мы хотим дать возможность и другим проделывать ту же операцию, то лучше написать так:

  1. override protected function createChildren():void
  2. {
  3.     if (!alertForm)
  4.     {
  5.         alertForm = new HTMLAlertForm();
  6.         alertForm.styleName = this;
  7.         addChild(alertForm);
  8.     }
  9.    
  10.     super.createChildren();
  11. }

То же самое проделываем в классе com.riapriority.controls.HTMLAlertForm:

  1. override protected function createChildren():void
  2. {
  3.     if (!textField)
  4.     {
  5.         textField = new UITextField();
  6.            
  7.         textField.styleName = this;
  8.         textField.htmlText = Alert(parent).text;
  9.         textField.multiline = true;
  10.         textField.wordWrap = true;
  11.         textField.selectable = true;
  12.            
  13.         addChild(textField);
  14.     }
  15.    
  16.     super.createChildren();
  17. }

Единственная проблема в том, что статический метод show() класса mx.controls.Alert придется продублировать в нашем HTMLAlert: статические методы не наследуются. Итоговый класс com.riapriority.controls.HTMLAlert:

  1. package com.riapriority.controls
  2. {
  3.     import flash.display.Sprite;
  4.    
  5.     import mx.controls.Alert;
  6.     import mx.core.Application;
  7.     import mx.core.mx_internal;
  8.     import mx.events.CloseEvent;
  9.     import mx.managers.PopUpManager;
  10.  
  11.     use namespace mx_internal;
  12.  
  13.     public class HTMLAlert extends Alert
  14.     {
  15.         public function HTMLAlert()
  16.         {
  17.             super();
  18.         }
  19.  
  20.         override protected function createChildren():void
  21.         {
  22.             if (!alertForm)
  23.             {
  24.                 alertForm = new HTMLAlertForm();
  25.                 alertForm.styleName = this;
  26.                 addChild(alertForm);
  27.             }
  28.            
  29.             super.createChildren();
  30.         }
  31.  
  32.         public static function show(text:String = "",
  33.                             title:String = "",
  34.                             flags:uint = 0x4 /* Alert.OK */,
  35.                             parent:Sprite = null,
  36.                             closeHandler:Function = null,
  37.                             iconClass:Class = null,
  38.                             defaultButtonFlag:uint = 0x4 /* Alert.OK */):Alert
  39.         {
  40.             var modal:Boolean = (flags & Alert.NONMODAL) ? false : true;
  41.  
  42.             if (!parent)
  43.                 parent = Sprite(Application.application);
  44.  
  45.             var alert:Alert = new HTMLAlert();
  46.  
  47.             if (flags & Alert.OK||
  48.                 flags & Alert.CANCEL ||
  49.                 flags & Alert.YES ||
  50.                 flags & Alert.NO)
  51.             {
  52.                 alert.buttonFlags = flags;
  53.             }
  54.  
  55.             if (defaultButtonFlag == Alert.OK ||
  56.                 defaultButtonFlag == Alert.CANCEL ||
  57.                 defaultButtonFlag == Alert.YES ||
  58.                 defaultButtonFlag == Alert.NO)
  59.             {
  60.                 alert.defaultButtonFlag = defaultButtonFlag;
  61.             }
  62.  
  63.             alert.text = text;
  64.             alert.title = title;
  65.             alert.iconClass = iconClass;
  66.  
  67.             if (closeHandler != null)
  68.                 alert.addEventListener(CloseEvent.CLOSE, closeHandler);
  69.  
  70.             PopUpManager.addPopUp(alert, parent, modal);
  71.  
  72.             alert.setActualSize(alert.getExplicitOrMeasuredWidth(),
  73.                                 alert.getExplicitOrMeasuredHeight());
  74.  
  75.             return alert;
  76.         }
  77.     }
  78. }

Итоговый класс com.riapriority.controls.HTMLAlertForm:

  1. package com.riapriority.controls
  2. {
  3.     import mx.controls.Alert;
  4.     import mx.controls.alertClasses.AlertForm;
  5.     import mx.core.UITextField;
  6.     import mx.core.mx_internal;
  7.    
  8.     use namespace mx_internal;
  9.    
  10.     public class HTMLAlertForm extends AlertForm
  11.     {
  12.        
  13.         override protected function createChildren():void
  14.         {
  15.             if (!textField)
  16.             {
  17.                 textField = new UITextField();
  18.    
  19.                 textField.styleName = this;
  20.                 textField.htmlText = Alert(parent).text;
  21.                 textField.multiline = true;
  22.                 textField.wordWrap = true;
  23.                 textField.selectable = true;
  24.    
  25.                 addChild(textField);
  26.             }
  27.            
  28.             super.createChildren();
  29.         }
  30.     }
  31. }

Использование стандартное - HTMLAlert.show (...). Но в тексте теперь можно задавать HTML-форматирование.

Не так много кода, не правда ли?

Bookmark this article at …