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

Component Lifecycle Overview

Павел Кожинkpaul.box@gmail.com

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

Вопросы?

Павел Кожинkpaul.box@gmail.com

Exigen Services