Архитектура минимальных ui компонент
DESCRIPTION
Докладчик - Виталий ХитьTRANSCRIPT
![Page 1: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/1.jpg)
АРХИТЕКТУРА МИНИМАЛЬНЫХ UI КОМПОНЕНТ
Виталий Хить (well)
![Page 2: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/2.jpg)
ЗАЧЕМ ЭТО НУЖНО?
Виджеты Примеры кода Собственное обучение
![Page 3: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/3.jpg)
ГОТОВЫЕ КОМПОНЕНТЫ
Flex Flash Minimal Components (bit-101.com)
![Page 4: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/4.jpg)
FLEX
Плюсы Минусы
Большое количество на все случаи жизни
Тяжелая swf
Хорошая документация Тормоза
Постоянные обновления mxml
Индустриальный стандарт Большое количество вспомогательных классов
![Page 5: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/5.jpg)
FLASH
Плюсы Минусы
Облегченная swf Коммерческая версия
Хорошая документация Безобразный код
Минимальное количество классов Заточены под Flash
Удобство скинирования Базируются на MovieClip
![Page 6: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/6.jpg)
MINIMAL COMPONENTS
![Page 7: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/7.jpg)
MINIMAL COMPONENTS
Плюсы Минусы
Очень маленький объем swf Версия не дошла до 1
Встроенный шрифт Спорное проектирование базовых классов
Неплохой дизайн Отсутствие скинов
Минимальное количество классов Минимальная документация
![Page 8: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/8.jpg)
СТРУКТУРА КОМПОНЕНТА
Компонент Мышка
Отображение
Клавиатура
МенеджерМенеджер
![Page 9: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/9.jpg)
МЕНЕДЖЕР КЛАВИАТУРЫ
Менеджер
«ТAB»
Экземпляр компонента
Экземпляр компонента
Ввод с клавиатуры
Активный компонент
![Page 10: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/10.jpg)
МЕНЕДЖЕР ОТОБРАЖЕНИЯ (СТИЛИ)
Менеджер
Параметры класса
Класс
Экземпляр
Экземпляр
Класс
Глобальные параметры
![Page 11: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/11.jpg)
СТРУКТУРА КЛАССА КОМПОНЕНТА
Компонент
Менеджер отображения
Скин экземпляра
Менеджер отображения
Менеджер мышки
Менеджер свойств
![Page 12: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/12.jpg)
UICOMPONENT EXTENDS SPRITE / MOVIECLIP
Sprite MovieClip
«Один кадр» «Много кадров»
Легкий Тяжелый
Flex Flash
![Page 13: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/13.jpg)
UICOMPONENT СВОЙСТВА
Координаты Размеры Состояния
Visible Enabled Мышка (up, over, down) Значения
Стили Стили экземпляра компонента Глобальные стили (класс, глобальные)
![Page 14: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/14.jpg)
UICOMPONENT CТРУКТУРА МЕНЕДЖЕРА СВОЙСТВ
Изменение большого количества свойств между интервалами ENTER_FRAME
Установление флага об изменении свойств и установка листенера на ENTER_FRAME
Изменение видимого отображения компонента на следующем ENTER_FRAME
![Page 15: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/15.jpg)
МЕНЕДЖЕР СВОЙСТВ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();}
![Page 16: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/16.jpg)
UICOMPONENT ОГРАНИЧИВАЮЩИЙ ПРЯМОУГОЛЬНИК
x, y -> _x, _y, move() width, height -> _width, _height,
setSize() scaleX, scaleY
![Page 17: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/17.jpg)
UICOMPONENT СТИЛИ КЛАССА
static private const defaultStyles:Object = { color :0xffffff, defaultLabel : “Label”, disabledSkin : “Label_DisabledSkin”};public static function getStyleDefinition():Object {
return defaultStyles;
}
![Page 18: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/18.jpg)
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;}
![Page 19: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/19.jpg)
МЕНЕДЖЕР СТИЛЕЙ
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); }
![Page 20: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/20.jpg)
МЕНЕДЖЕР СТИЛЕЙ
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(); }
![Page 21: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/21.jpg)
СКИНЫ
Flash Flex
Библиотечные символы Embeded классы
Имя класса указывается при экспорте
Имя класса генерируется компилятором
По умолчанию скин MovieClip По умолчанию скин SpriteAsset
Swf «чистая» Добавляются вспомогательные классы из Flex SDK
![Page 22: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/22.jpg)
[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",
![Page 23: Архитектура минимальных Ui компонент](https://reader036.vdocuments.site/reader036/viewer/2022062514/557f8b93d8b42a522c8b45a3/html5/thumbnails/23.jpg)
ЧИСТКА FLASH КОМПОНЕНТОВ
Удалить acsessibility составляющую Удалить FocusManager и сопутствующие классы Упростить Style Manager Удалить из UIComponent
Связь с фокус менеджером Связь со средой разработки Flash (?) Изменение scale составляющей
Исправить ошибки в дочерних классах Изменить названия скинов (если используется
flex)