Customizing Flex Apps

2,618 views
2,580 views

Published on

Preso at Russian Internet Technologies Conference (RIT-2008) in Moscow about customizing Flex applications

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

No Downloads
Views
Total views
2,618
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
72
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Customizing Flex Apps

    1. 1. Кастомизация пользовательских интерфейсов во Flex-приложениях Константин Ковалев http://riapriority.com/ [email_address]
    2. 2. Flex <ul><li>Декларативный MXML </li></ul><ul><li>Data binding </li></ul><ul><li>Компоненты & лэйауты </li></ul><ul><li>Опенсорсный </li></ul><ul><li>Кроссплатформенный </li></ul>Flex Builder Flex Framework MXML Компиляция ActionScript CSS Flex SDK
    3. 3. Как выглядит Flex- приложение? Скучно?
    4. 4. Как насчет?
    5. 5. Или…
    6. 6. И даже? Легко!
    7. 7. Арсенал В чем разница? Styling Skinning
    8. 8. Skinning vs Styling Ron Perlman Aeon
    9. 9. Styling Blade II Smoke
    10. 10. Skinning Hellboy Obsidian
    11. 11. Как это делается? CSS Level 1
    12. 12. Селекторы типов <ul><li>Alert </li></ul><ul><li>{ </li></ul><ul><li>backgroundAlpha: 0.90; </li></ul><ul><li>backgroundColor: #869CA7; </li></ul><ul><li>borderAlpha: 0.90; </li></ul><ul><li>borderColor: #869CA7; </li></ul><ul><li>buttonStyleName: &quot;alertButtonStyle&quot;; </li></ul><ul><li>color: #FFFFFF; </li></ul><ul><li>paddingBottom: 2; </li></ul><ul><li>paddingLeft: 10; </li></ul><ul><li>paddingRight: 10; </li></ul><ul><li>paddingTop: 2; </li></ul><ul><li>roundedBottomCorners: true; </li></ul><ul><li>} </li></ul>Alert { background -a lpha: 0.90; background -c olor: #869CA7; border -a lpha: 0.90; border -c olor: #869CA7; button -s tyle -n ame: &quot;alertButtonStyle&quot;; 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. 13. Селекторы классов <ul><li>.myButton </li></ul><ul><li>{ </li></ul><ul><ul><li>color: #FFCC99; </li></ul></ul><ul><li>} </li></ul><Button styleName=“ myButton ” /> ИСПОЛЬЗОВАНИЕ:
    14. 14. Включение CSS <ul><li>В аттрибутах: <Button color=“ #FFCC99 ” /> </li></ul><ul><li>В блоке <Style> <mx:Style> Panel { font-family: Times, &quot;_serif&quot;; } </mx:Style> </li></ul><ul><li>Внешний файл: <Style source=“my.css” /> </li></ul><ul><li>При компиляции </li></ul>
    15. 15. Природа CSS во Flex Flex Builder Flex SDK Flex Framework MXML Компиляция AS CSS
    16. 16. Виды скинизации Designer-developer workflow Графическая Программная
    17. 17. Скинизация <ul><li>Тоже CSS : Button { up-skin: E mbed(&quot;../assets/orb_up_skin.gif&quot;); } Button { up-skin: ClassReference(&quot;ButtonUpSkinAS&quot;); } </li></ul>
    18. 18. Designer/developer workflow + Flex Skin Design Extensions http://adobe.com/go/flex3_skinning +
    19. 19. Flex Builder
    20. 20. http://scalenine.com /
    21. 21. Что не вошло? <ul><li>Темы </li></ul><ul><li>Подгружаемые CSS </li></ul><ul><li>Stateful скины </li></ul><ul><li>И многое другое </li></ul><ul><li>http://adobe.com/go/flex/ </li></ul>
    22. 22. Что дальше? <ul><li>Эффекты </li></ul><ul><li>Переходы </li></ul><ul><li>L10n и i18n </li></ul>
    23. 23. Q&A Константин Ковалев http://riapriority.com/ [email_address]

    ×