Flex Component Lifecycle Overview

6,025 views

Published on

Preso about Flex Components Lifecycle (April, 12, 2008, Saint Petersburg, Russia) by Pavel Kozhin.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,025
On SlideShare
0
From Embeds
0
Number of Embeds
314
Actions
Shares
0
Downloads
84
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Flex Component Lifecycle Overview

  1. 1. Жизненный цикл компонентов Component Lifecycle Overview Павел Кожин [email_address] Exigen Services
  2. 2. Что такое жизненный цикл и для чего он нужен <ul><li>Создание </li></ul><ul><li>Конфигурация </li></ul><ul><li>Присоединение </li></ul><ul><li>Инициализация </li></ul><ul><li>Инвалидация </li></ul><ul><li>Взаимодействие </li></ul><ul><li>Удаление </li></ul><ul><li>Сборка мусора </li></ul><ul><li>Construction </li></ul><ul><li>Configuration </li></ul><ul><li>Attachment </li></ul><ul><li>Initialization </li></ul><ul><li>Invalidation </li></ul><ul><li>Interaction </li></ul><ul><li>Detachment </li></ul><ul><li>Garbage Collection </li></ul>
  3. 3. Единая концепция Управление Детализация Переопределение createChildren() commitProperties() measure() updateDisplayList()
  4. 4. Фаза 1
  5. 5. Инстанциирование <ul><li>Подписка на события </li></ul><ul><li>Применение стилей </li></ul><ul><li>Создание дочерних элементов </li></ul><local:MyCopm/> var comp:MyComp = new MyCopm(); comp.setStyle(“…”, “…”); public function MyCopm { super(); addEventListener( MouseEvent.CLICK, clickHandler); } Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора 1
  6. 6. Конструктор <ul><li>systemManager, stage, root </li></ul><ul><li>getStyle() ( ждём createChildren()) </li></ul><ul><li>Повторное выполнение кода </li></ul>Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора <my:CustomBtn/> var btn:CustomBtn = new CustomBtn(); btn.setStyle(“…”, “…”); public function CustomBtn { super(); addEventListener( MouseEvent.CLICK, clickHandler); } 1
  7. 7. get/set методы <ul><li>Выполняются до инициализации </li></ul><ul><li>Максимально быстрые! </li></ul><ul><li>Использовать валидацию </li></ul>Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора var foo:Array = [“Hello”, “World!”]; public function set data(val:Array):void{ _data = val; dataChanged = true; invalidateProperties(); } 1
  8. 8. Фаза 2
  9. 9. Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора parentComponent.addChild(instance); 2 addChild() / addChildAt() initialize() Вызов вручную для не визуальных компонентов
  10. 10. Фазы инициализации <ul><li>1. Событие “preinitialize” </li></ul><ul><li>2. createChildren() </li></ul><ul><li>initialize() </li></ul><ul><ul><ul><li>Дети </li></ul></ul></ul><ul><ul><ul><li>Родители </li></ul></ul></ul><ul><li>4. Валидация </li></ul><ul><li>Событие “creationComplete” </li></ul><ul><ul><ul><li>Committed </li></ul></ul></ul><ul><ul><ul><li>Measured </li></ul></ul></ul><ul><ul><ul><li>Updated </li></ul></ul></ul>Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора 2
  11. 11. createChildren() <ul><li>Переопределение </li></ul><ul><li>Перманентных подкомпоненты </li></ul><ul><li>«Создание – Конфигурация – Присоединение» </li></ul><ul><li>super.createChildren() </li></ul><ul><li>Динамику отложим до валидации! </li></ul>Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора 2
  12. 12. Пример переопределения 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
  13. 13. Отложенная валидация <ul><li>Отложить обработку изменений </li></ul><ul><li>Сохранить высокую производительность </li></ul><ul><li>Функции инвалидации </li></ul><ul><ul><li>invalidateProperties() </li></ul></ul><ul><ul><li>invalidateSize() </li></ul></ul><ul><ul><li>invalidateDisplayList() </li></ul></ul>Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора 2
  14. 14. Валидация: роль LayoutManager Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора 2 LayoutManager invalidatePropertiesQueue invalidateSizeQueue invalidateDisplayListQueue validateProperties() validateSize() validateDisplayList()
  15. 15. commitProperties() <ul><li>Обработка динамических данных </li></ul><ul><li>Используем флаги! </li></ul>Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора 2 invalidateProperties() validateProperties() commitProperties()
  16. 16. Пример commitProperties() public function set historyManagementEnabled(value:Boolean) : void{ if (value != _historyManagementEnabled){ _historyManagementEnabled = value ; historyManagementEnabledChanged = true; invalidateProperties(); } } Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора 2
  17. 17. measure() <ul><li>Предпочтительный размер </li></ul><ul><li>measuredWidth / measuredHeight </li></ul><ul><li>measuredMinWidth / measureMinHeight </li></ul><ul><li>Вызывается автоматически </li></ul><ul><li>Не вызывается при explicitWidth / explicitHeight </li></ul>Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора 2 invalidateSize() validateSize() masure()
  18. 18. Пример 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
  19. 19. updateDisplayList() <ul><li>Дочерние елементы </li></ul><ul><ul><li>Позиционирование </li></ul></ul><ul><ul><li>размер </li></ul></ul><ul><li>Drawing API </li></ul><ul><li>Актуальный размер выставляется здесь! </li></ul>Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора 2 invalidateDisplayList() validateDisplayList() updateDisplayList()
  20. 20. Пример 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
  21. 21. Размеры <ul><li>Measured (measuredWidth) </li></ul><ul><ul><ul><li>Предпочтительный размер </li></ul></ul></ul><ul><ul><ul><li>Вычисляется measure() </li></ul></ul></ul><ul><li>Explicit (explicitWidth) </li></ul><ul><ul><ul><li>Присваивается пользователем </li></ul></ul></ul><ul><ul><ul><li><mx:Button width=“100”/> </li></ul></ul></ul><ul><li>Percentage (percentWidth) </li></ul><ul><ul><ul><li>Присваивается пользователем </li></ul></ul></ul><ul><ul><ul><li>Вычисляется родителем </li></ul></ul></ul><ul><ul><ul><li><mx:Button width=“100%”/> </li></ul></ul></ul><ul><li>Actual setActualSize() </li></ul><ul><ul><ul><li>Присваивается в updateDisplayList() родителем </li></ul></ul></ul>Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора 2
  22. 22. Фаза 3
  23. 23. Отдельная тема Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора 3
  24. 24. Фаза 4
  25. 25. Уборка <ul><li>Методы удаления </li></ul><ul><ul><li>removeChild() </li></ul></ul><ul><ul><li>removeChildAt() </li></ul></ul><ul><ul><li>removeAllChildren() </li></ul></ul><ul><li>visible=false для постоянных элементов </li></ul><ul><li>Сборщик мусора </li></ul><ul><ul><li>Ссылки на объект </li></ul></ul><ul><ul><ul><li>Обработчики событий </li></ul></ul></ul><ul><ul><ul><li>binding </li></ul></ul></ul><ul><ul><ul><li>Dictionary </li></ul></ul></ul>Создание Конфигурация Присоединение Инициализация Инвалидация Взаимодействие Удаление Сборка мусора 4
  26. 26. Сравнение цикла MX(AS2) и Flex destroyObject(id:String) removeChild invalidateSize invalidateDisplayList redraw commitProperties redraw measure draw / size updateDisplayList invalidate invalidateProperties removeChildAt createChildren createChildren init initialize createObject / createClassObject addChild/addChildAt
  27. 27. Вопросы? Павел Кожин [email_address] Exigen Services

×