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

Содержание

ЗАЧЕМ ЭТО НУЖНО? Виджеты Примеры кода Собственное обучение

Слайд 1АРХИТЕКТУРА МИНИМАЛЬНЫХ UI КОМПОНЕНТ
Виталий Хить (well)


Слайд 2ЗАЧЕМ ЭТО НУЖНО?
Виджеты
Примеры кода
Собственное обучение


Слайд 3ГОТОВЫЕ КОМПОНЕНТЫ
Flex
Flash
Minimal Components (bit-101.com)


Слайд 6MINIMAL COMPONENTS


Слайд 7MINIMAL COMPONENTS


Слайд 8СТРУКТУРА КОМПОНЕНТА
Компонент
Мышка

Отображение

Клавиатура

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


Слайд 9МЕНЕДЖЕР КЛАВИАТУРЫ
Менеджер
«ТAB»
Экземпляр компонента

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


Ввод с клавиатуры
Активный компонент



Слайд 10МЕНЕДЖЕР ОТОБРАЖЕНИЯ (СТИЛИ)
Менеджер
Параметры класса
Класс
Экземпляр

Экземпляр


Класс


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


Слайд 11СТРУКТУРА КЛАССА КОМПОНЕНТА
Компонент
Менеджер отображения
Скин экземпляра

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


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

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


Слайд 12UICOMPONENT EXTENDS SPRITE / MOVIECLIP


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


Слайд 14UICOMPONENT CТРУКТУРА МЕНЕДЖЕРА СВОЙСТВ
Изменение большого количества свойств между интервалами ENTER_FRAME
Установление флага

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

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


Слайд 16UICOMPONENT ОГРАНИЧИВАЮЩИЙ ПРЯМОУГОЛЬНИК
x, y -> _x, _y, move()
width, height -> _width,

_height, setSize()
scaleX, scaleY

Слайд 17UICOMPONENT СТИЛИ КЛАССА
static private const defaultStyles:Object = {
color :0xffffff,
defaultLabel

: “Label”,
disabledSkin : “Label_DisabledSkin”
};
public static function getStyleDefinition():Object {
return defaultStyles;
}

Слайд 18UICOMPONENT МЕНЕДЖЕР СТИЛЕЙ
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;
}

Слайд 19МЕНЕДЖЕР СТИЛЕЙ
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);
}

Слайд 20МЕНЕДЖЕР СТИЛЕЙ
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();

}


Слайд 21СКИНЫ


Слайд 22[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",





Слайд 23ЧИСТКА FLASH КОМПОНЕНТОВ
Удалить acsessibility составляющую
Удалить FocusManager и сопутствующие классы
Упростить Style Manager
Удалить

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

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


Для правообладателей

Яндекс.Метрика