Flex Component Lifecycle Overview

Жизненный цикл компонентов

Component Lifecycle Overview

Павел Кожин[email protected]

Exigen Services

Что такое жизненный цикл и для чего он нужен

• Создание

• Конфигурация

• Присоединение

• Инициализация

• Инвалидация

• Взаимодействие

• Удаление

• Сборка мусора

• Construction

• Configuration

• Attachment

• Initialization

• Invalidation

• Interaction

• Detachment

• Garbage Collection

Единая концепция

УправлениеУправлениеДетализацияДетализация

ПереопределениеПереопределение

createChildren()commitProperties()

measure()updateDisplayList()

createChildren()commitProperties()

measure()updateDisplayList()

Фаза 1

Инстанциирование

• Подписка на события

• Применение стилей

• Создание дочерних элементов

<local:MyCopm/>

var comp:MyComp = new

MyCopm();

comp.setStyle(“…”, “…”);

public function MyCopm {

super();

addEventListener(

MouseEvent.CLICK,

clickHandler);

}

Создание

Конфигурация

Присоединение

Инициализация

Инвалидация

Взаимодействие

Удаление

Сборка мусора

1

Конструктор

• systemManager, stage, root

• getStyle() (ждём createChildren())

• Повторное выполнение кода

Создание






Удаление


<my:CustomBtn/>

var btn:CustomBtn = new

CustomBtn();

btn.setStyle(“…”, “…”);

public function CustomBtn {

super();

addEventListener(

MouseEvent.CLICK,

clickHandler);

}

1

get/set методы

• Выполняются до инициализации

• Максимально быстрые!

• Использовать валидацию

Создание






Удаление


var foo:Array = [“Hello”, “World!”];

public function set data(val:Array):void{

_data = val;

dataChanged = true;

invalidateProperties();

}

1

Фаза 2

Создание






Удаление


parentComponent.addChild(instance);

2

addChild() / addChildAt()addChild() / addChildAt()

initialize()initialize()

Вызов вручную для не визуальных компонентов

Фазы инициализации

1. Событие “preinitialize”

2. createChildren()

3. initialize()1. Дети

2. Родители

4. Валидация

5. Событие “creationComplete”1. Committed

2. Measured

3. Updated

Создание






Удаление


2

createChildren()Создание






Удаление


2

• Переопределение

• Перманентных подкомпоненты

• «Создание – Конфигурация – Присоединение»

• super.createChildren()

• Динамику отложим до валидации!

Пример переопределения

protected var closeButon:UIComponent;

override protected function

createChildren():void{

if (!closeButton){

closButton = new Button();

Button(closeButton).label = “x”;

}

addChild(closeButton);

closeButton.addEventListener(

MouseEvent.CLICK, clickHandler);

super.createChildren();

}

Создание






Удаление


2

Отложенная валидация

• Отложить обработку изменений

• Сохранить высокую производительность

• Функции инвалидации– invalidateProperties()– invalidateSize()– invalidateDisplayList()

Создание






Удаление


2

Валидация: роль LayoutManagerСоздание






Удаление


2

LayoutManagerLayoutManager

invalidatePropertiesQueue

invalidateSizeQueue

invalidateDisplayListQueue

validateProperties()validateProperties()

validateSize()validateSize()

validateDisplayList()validateDisplayList()

commitProperties()

• Обработка динамических данных

• Используем флаги!

Создание






Удаление


2invalidateProperties()invalidateProperties()

validateProperties()validateProperties()

commitProperties()commitProperties()

Пример commitProperties()

public function set historyManagementEnabled(value:Boolean):void{

if (value != _historyManagementEnabled){

_historyManagementEnabled = value;

historyManagementEnabledChanged = true;

invalidateProperties();

}

}

Создание






Удаление


2

measure()

• Предпочтительный размер

• measuredWidth / measuredHeight

• measuredMinWidth / measureMinHeight

• Вызывается автоматически

• Не вызывается при explicitWidth / explicitHeight

Создание






Удаление


2invalidateSize()invalidateSize()

validateSize()validateSize()

masure()masure()

Пример measure()

override protected function measure():void {

for (var i:int = 0; i < numChildren; ++i){

var child:UIComponent = UIComponent(getChildAt())

measuredHeight +=

child.getExplicitOrMeasuredHeight() + VERTICAL_GAP;

}

measuredMinWidth = 10;

measuredMinHeight = measuredHeight;

}

Создание






Удаление


2

updateDisplayList()

• Дочерние елементы

– Позиционирование

– размер

• Drawing API

• Актуальный размер выставляется здесь!

Создание






Удаление


2invalidateDisplayList()invalidateDisplayList()

validateDisplayList()validateDisplayList()

updateDisplayList()updateDisplayList()

Пример updateDisplayList()

override protected function updateDisplayList():void{

…

item.data = data;

UIComponentGlobals.layoutManager.validateClient(

item, true);

var w:Number = item.getExplicitOrMeasuredWidth();

item.setActualSize(w, h);

item.move(x, y);

}

Создание






Удаление


2

РазмерыСоздание






Удаление


2

• Measured (measuredWidth)• Предпочтительный размер

• Вычисляется measure()

• Explicit (explicitWidth)• Присваивается пользователем

• <mx:Button width=“100”/>

• Percentage (percentWidth)• Присваивается пользователем

• Вычисляется родителем

• <mx:Button width=“100%”/>

• Actual setActualSize()• Присваивается в updateDisplayList() родителем

Фаза 3

Отдельная темаСоздание






Удаление


3

Фаза 4

УборкаСоздание






Удаление


• Методы удаления– removeChild()– removeChildAt()– removeAllChildren()

• visible=false для постоянных элементов• Сборщик мусора

– Ссылки на объект• Обработчики событий

• binding

• Dictionary

4

Сравнение цикла MX(AS2) и Flex

addChild/addChildAt createObject / createClassObject

initialize init

createChildren createChildren

invalidateProperties

invalidateinvalidateSize

invalidateDisplayList

commitProperties redraw

measure redraw

updateDisplayList draw / size

removeChilddestroyObject(id:String)

removeChildAt

Вопросы?

Павел Кожин[email protected]

Exigen Services

Flex Component Lifecycle Overview

Technology

Transcript of Flex Component Lifecycle Overview