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

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

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

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

Minimal components

Minimal Components

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

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

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

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

UIComponent extends Sprite / MovieClip

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

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

МЕНЕДЖЕР СВОЙСТВ
static public const ISIZE :uint = 0x01;
static public const ISTYLE :uint = 0x02;
…….
protected varinvalidHash :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 varinstanceStyles:Object;
protected function getStyleValue(name:String):Object {
return (instanceStyles[name] == null) ? StyleManager.getStyleValue(name, _classDef) : instanceStyles[name];
}
protected function getDisplayObjectInstance(skin:Object):DisplayObject {
varclassDef: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 (varobj :* in _instances) invalidateStyle(obj == 'null' ? null : obj);
}

МЕНЕДЖЕР Стилей
public static function registerInstance(instance :UIComponent) :void
{
varclassDef :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;
vardefaultStyles :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();
}

СКИНЫ

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

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

http://fpug.org.ua	115
http://flash-ripper.com	35
http://www.fpug.org.ua	4
http://www.slideshare.net	4

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

by Lerika on Oct 30, 2009

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 158

Statistics

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