Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Кастомизация пользовательских интерфейсов во Flex-приложениях  Константин Ковалев http://riapriority.com/ [email_address]
Flex <ul><li>Декларативный  MXML </li></ul><ul><li>Data binding </li></ul><ul><li>Компоненты & лэйауты </li></ul><ul><li>О...
Как выглядит  Flex- приложение? Скучно?
Как насчет?
Или…
И даже? Легко!
Арсенал В чем разница? Styling Skinning
Skinning vs Styling Ron Perlman Aeon
Styling Blade II Smoke
Skinning Hellboy Obsidian
Как это делается? CSS Level 1
Селекторы типов <ul><li>Alert </li></ul><ul><li>{ </li></ul><ul><li>backgroundAlpha: 0.90; </li></ul><ul><li>backgroundCol...
Селекторы классов <ul><li>.myButton </li></ul><ul><li>{ </li></ul><ul><ul><li>color: #FFCC99; </li></ul></ul><ul><li>} </l...
Включение  CSS <ul><li>В аттрибутах: <Button color=“ #FFCC99 ” /> </li></ul><ul><li>В блоке  <Style> <mx:Style> Panel { fo...
Природа  CSS  во  Flex Flex Builder Flex SDK Flex Framework MXML Компиляция AS CSS
Виды скинизации Designer-developer workflow Графическая Программная
Скинизация <ul><li>Тоже  CSS : Button   { up-skin: E mbed(&quot;../assets/orb_up_skin.gif&quot;); } Button { up-skin: Clas...
Designer/developer workflow + Flex Skin Design Extensions http://adobe.com/go/flex3_skinning +
Flex Builder
http://scalenine.com /
Что не вошло? <ul><li>Темы </li></ul><ul><li>Подгружаемые  CSS </li></ul><ul><li>Stateful  скины </li></ul><ul><li>И много...
Что дальше? <ul><li>Эффекты </li></ul><ul><li>Переходы </li></ul><ul><li>L10n  и  i18n </li></ul>
Q&A Константин Ковалев http://riapriority.com/ [email_address]
Upcoming SlideShare
Loading in …5
×

Customizing Flex Apps

2,706 views

Published on

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

Published in: Technology, Business
  • Be the first to comment

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]

×