flex component lifecycle overview
DESCRIPTION
Preso about Flex Components Lifecycle (April, 12, 2008, Saint Petersburg, Russia) by Pavel Kozhin.TRANSCRIPT
Жизненный цикл компонентов
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