Документ представляет собой руководство по кастомизации пользовательских интерфейсов в flex-приложениях, охватывая темы, такие как декларативный MXML, компоненты и использование CSS. В нем объясняется, как применять стили и скины к элементам интерфейса, а также описываются принципы работы с Flex Builder и SDK. Также затрагиваются темы рабочего процесса между дизайнерами и разработчиками, а также предоставляются ссылки для дальнейшего изучения.

1. Кастомизация пользовательских интерфейсов во Flex-приложениях Константин Ковалев http://riapriority.com/ [email_address]

2. Flex Декларативный MXML Data binding Компоненты & лэйауты Опенсорсный Кроссплатформенный Flex Builder Flex Framework MXML Компиляция ActionScript CSS Flex SDK

3. Как выглядит Flex- приложение? Скучно?

4. Как насчет?

5. Или…

6. И даже? Легко!

7. Арсенал В чем разница? Styling Skinning

8. Skinning vs Styling Ron Perlman Aeon

9. Styling Blade II Smoke

10. Skinning Hellboy Obsidian

11. Как это делается? CSS Level 1

12. Селекторы типов Alert { backgroundAlpha: 0.90; backgroundColor: #869CA7; borderAlpha: 0.90; borderColor: #869CA7; buttonStyleName: "alertButtonStyle"; color: #FFFFFF; paddingBottom: 2; paddingLeft: 10; paddingRight: 10; paddingTop: 2; roundedBottomCorners: true; } Alert { background -a lpha: 0.90; background -c olor: #869CA7; border -a lpha: 0.90; border -c olor: #869CA7; button -s tyle -n ame: "alertButtonStyle"; color: #FFFFFF; padding -b ottom: 2; padding -l eft: 10; padding -r ight: 10; padding -t op: 2; rounded -b ottom -c orners: true; } ИЛИ

13. Селекторы классов .myButton { color: #FFCC99; } <Button styleName=“ myButton ” /> ИСПОЛЬЗОВАНИЕ:

14. Включение CSS В аттрибутах: <Button color=“ #FFCC99 ” /> В блоке <Style> <mx:Style> Panel { font-family: Times, &quot;_serif&quot;; } </mx:Style> Внешний файл: <Style source=“my.css” /> При компиляции

15. Природа CSS во Flex Flex Builder Flex SDK Flex Framework MXML Компиляция AS CSS

16. Виды скинизации Designer-developer workflow Графическая Программная

17. Скинизация Тоже CSS : Button { up-skin: E mbed(&quot;../assets/orb_up_skin.gif&quot;); } Button { up-skin: ClassReference(&quot;ButtonUpSkinAS&quot;); }

18. Designer/developer workflow + Flex Skin Design Extensions http://adobe.com/go/flex3_skinning +

19. Flex Builder

20. http://scalenine.com /

21. Что не вошло? Темы Подгружаемые CSS Stateful скины И многое другое http://adobe.com/go/flex/

22. Что дальше? Эффекты Переходы L10n и i18n

23. Q&A Константин Ковалев http://riapriority.com/ [email_address]