'

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

Понравилась презентация – покажи это...





Слайд 0

Архитектура минимальных UI компонент Виталий Хить (well)


Слайд 1

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


Слайд 2

Готовые компоненты Flex Flash Minimal Components (bit-101.com)


Слайд 3

Flex


Слайд 4

Flash


Слайд 5

Minimal components


Слайд 6

Minimal Components


Слайд 7

Структура компонента Менеджер Менеджер


Слайд 8

Менеджер клавиатуры


Слайд 9

Менеджер отображения (СТИЛИ)


Слайд 10

Структура Класса компонента


Слайд 11

UIComponent extends Sprite / MovieClip


Слайд 12

UIComponent свойства Координаты Размеры Состояния Visible Enabled Мышка (up, over, down) Значения Стили Стили экземпляра компонента Глобальные стили (класс, глобальные)


Слайд 13

Uicomponent cтруктура менеджера свойств


Слайд 14

МЕНЕДЖЕР СВОЙСТВ 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(); }


Слайд 15

UICOMPONENT Ограничивающий прямоугольник x, y -> _x, _y, move() width, height -> _width, _height, setSize() scaleX, scaleY


Слайд 16

UIComponent Стили класса static private const defaultStyles:Object = { color :0xffffff, defaultLabel : “Label”, disabledSkin : “Label_DisabledSkin” }; public static function getStyleDefinition():Object { return defaultStyles; }


Слайд 17

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; }


Слайд 18

МЕНЕДЖЕР Стилей 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); }


Слайд 19

МЕНЕДЖЕР Стилей 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(); }


Слайд 20

СКИНЫ


Слайд 21

[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",


Слайд 22

Чистка Flash компонентов Удалить acsessibility составляющую Удалить FocusManager и сопутствующие классы Упростить Style Manager Удалить из UIComponent Связь с фокус менеджером Связь со средой разработки Flash (?) Изменение scale составляющей Исправить ошибки в дочерних классах Изменить названия скинов (если используется flex)


×

HTML:





Ссылка: