Архитектура минимальных Ui компонент

АРХИТЕКТУРА МИНИМАЛЬНЫХ UI КОМПОНЕНТ

Виталий Хить (well)

ЗАЧЕМ ЭТО НУЖНО?

Виджеты Примеры кода Собственное обучение

ГОТОВЫЕ КОМПОНЕНТЫ

Flex Flash Minimal Components (bit-101.com)

FLEX

Плюсы Минусы

Большое количество на все случаи жизни

Тяжелая swf

Хорошая документация Тормоза

Постоянные обновления mxml

Индустриальный стандарт Большое количество вспомогательных классов

FLASH

Плюсы Минусы

Облегченная swf Коммерческая версия

Хорошая документация Безобразный код

Минимальное количество классов Заточены под Flash

Удобство скинирования Базируются на MovieClip

MINIMAL COMPONENTS

MINIMAL COMPONENTS

Плюсы Минусы

Очень маленький объем swf Версия не дошла до 1

Встроенный шрифт Спорное проектирование базовых классов

Неплохой дизайн Отсутствие скинов

Минимальное количество классов Минимальная документация

СТРУКТУРА КОМПОНЕНТА

Компонент Мышка

Отображение

Клавиатура

МенеджерМенеджер

МЕНЕДЖЕР КЛАВИАТУРЫ

Менеджер

«ТAB»

Экземпляр компонента

Экземпляр компонента

Ввод с клавиатуры

Активный компонент

МЕНЕДЖЕР ОТОБРАЖЕНИЯ (СТИЛИ)

Менеджер

Параметры класса

Класс

Экземпляр

Экземпляр

Класс

Глобальные параметры

СТРУКТУРА КЛАССА КОМПОНЕНТА

Компонент

Менеджер отображения

Скин экземпляра

Менеджер отображения

Менеджер мышки

Менеджер свойств

UICOMPONENT EXTENDS SPRITE / MOVIECLIP

Sprite MovieClip

«Один кадр» «Много кадров»

Легкий Тяжелый

Flex Flash

UICOMPONENT СВОЙСТВА

Координаты Размеры Состояния

Visible Enabled Мышка (up, over, down) Значения

Стили Стили экземпляра компонента Глобальные стили (класс, глобальные)

UICOMPONENT CТРУКТУРА МЕНЕДЖЕРА СВОЙСТВ

Изменение большого количества свойств между интервалами ENTER_FRAME

Установление флага об изменении свойств и установка листенера на ENTER_FRAME

Изменение видимого отображения компонента на следующем ENTER_FRAME

МЕНЕДЖЕР СВОЙСТВstatic public const ISIZE :uint = 0x01;static public const ISTYLE :uint = 0x02;……. protected var invalidHash :uint;……. public function invalidate(property: uint = InvalidationType.ALL, callLater :Boolean = true):void { invalidHash |= property; if (!_inCallLater) { addEventListener(Event.ENTER_FRAME, callLaterDispatcher,false,0,true); _inCallLater = true; }}

protected function validate():void { invalidHash = 0; _inCallLater = false;}

private function callLaterDispatcher(event:Event):void { removeEventListener(Event.ENTER_FRAME,callLaterDispatcher); draw(); }

protected function draw() :void { if (isValid(ISTYLE | ISIZE)) { ... } validate();}

UICOMPONENT ОГРАНИЧИВАЮЩИЙ ПРЯМОУГОЛЬНИК

x, y -> _x, _y, move() width, height -> _width, _height,

setSize() scaleX, scaleY

UICOMPONENT СТИЛИ КЛАССА

static private const defaultStyles:Object = { color :0xffffff, defaultLabel : “Label”, disabledSkin : “Label_DisabledSkin”};public static function getStyleDefinition():Object {

return defaultStyles;

}

UICOMPONENT МЕНЕДЖЕР СТИЛЕЙprotected var instanceStyles:Object;

protected function getStyleValue(name:String):Object { return (instanceStyles[name] == null) ? StyleManager.getStyleValue(name, _classDef) : instanceStyles[name];}

protected function getDisplayObjectInstance(skin:Object):DisplayObject { var classDef:Object = null; if (skin is Class) { return (new skin()) as DisplayObject; } else if (skin is DisplayObject) { (skin as DisplayObject).x = 0; (skin as DisplayObject).y = 0; return skin as DisplayObject; } try { classDef = getDefinitionByName(skin.toString()); } catch(e:Error) { try { classDef = loaderInfo.applicationDomain.getDefinition(skin.toString()) as Object; } catch (e:Error) { // Nothing } } if (classDef == null) { return null; } return (new classDef()) as DisplayObject;}

МЕНЕДЖЕР СТИЛЕЙ

private static var _instances :Dictionary = new Dictionary(true);

private static var _styles :Dictionary = new Dictionary(true);

public static function getStyleValue(name :String, classDef :Class = null) :Object{ var style :Object = _styles[classDef]; return (style && style[name]) ? style[name] : _styles[null][name]; }

public static function setStyle(name :String, value :Object, classDef :Class = null) :void{ if (!_styles[classDef]) _styles[classDef] = {}; _styles[classDef][name] = value; if (classDef) invalidateStyle(classDef); else for (var obj :* in _instances) invalidateStyle(obj == 'null' ? null : obj); }

МЕНЕДЖЕР СТИЛЕЙ

public static function registerInstance(instance :UIComponent) :void { var classDef :Class = getClassDef(instance); if (!classDef) return; if (!_instances[classDef]) _instances[classDef] = new Dictionary(true); _instances[classDef][instance] = true; if (_styles[classDef]) return; var target :Class = classDef; var defaultStyles :Object = null; while (!defaultStyles) { if (target["getStyleDefinition"]) { defaultStyles = target["getStyleDefinition"](); break; } try { target =

instance.loaderInfo.applicationDomain.getDefinition(getQualifiedSuperclassName(target)) as Class; } catch(err :Error) { try { target = getDefinitionByName(getQualifiedSuperclassName(target)) as Class; } catch (e:Error) { defaultStyles = UIComponent.getStyleDefinition(); break; } } } _styles[classDef] = defaultStyles; if (!_styles[null]) _styles[null] = UIComponent.getStyleDefinition(); }

СКИНЫ

Flash Flex

Библиотечные символы Embeded классы

Имя класса указывается при экспорте

Имя класса генерируется компилятором

По умолчанию скин MovieClip По умолчанию скин SpriteAsset

Swf «чистая» Добавляются вспомогательные классы из Flex SDK

[EMBED…

public class fl.controls.Button extends UIComponent {[Embed (source='../skin/skin.swf', symbol='Button_disabledSkin')]static private var disabledSkin :Class;

public class fl.controls.Button_disabledSkin extends SpriteAsset

private static var defaultStyles:Object = {disabledSkin :"fl.controls::Button_disabledSkin",

ЧИСТКА FLASH КОМПОНЕНТОВ

Удалить acsessibility составляющую Удалить FocusManager и сопутствующие классы Упростить Style Manager Удалить из UIComponent

Связь с фокус менеджером Связь со средой разработки Flash (?) Изменение scale составляющей

Исправить ошибки в дочерних классах Изменить названия скинов (если используется

flex)