Кастомизация пользовательских интерфейсов во Flex-приложениях

Константин Ковалевhttp://riapriority.com/

constantiner@riapriority.com

Flex• Декларативный

MXML• Data binding• Компоненты&лэйауты• Опенсорсный• Кроссплатформенный

Flex Builder

Flex SDK

Flex Framework

MXML

Компиляция

ActionScript CSS

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

Скучно?

Как насчет?

Или…

И даже?

Легко!

Арсенал

Styling Skinning

В чем разница?

Skinning vs Styling

Ron Perlman

Aeon

Styling

Blade II

Smoke

Skinning

Hellboy

Obsidian

Как это делается?

CSSLevel 1

Селекторы типов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-alpha: 0.90;background-color: #869CA7;border-alpha: 0.90;border-color: #869CA7;button-style-name: "alertButtonStyle";color: #FFFFFF;padding-bottom: 2;padding-left: 10;padding-right: 10;padding-top: 2;rounded-bottom-corners: true;

}

ИЛИ

Селекторы классов.myButton

{color: #FFCC99;

}

<Button styleName=“myButton” />

ИСПОЛЬЗОВАНИЕ:

Включение CSS• В аттрибутах:<Button color=“#FFCC99” />

• В блоке <Style><mx:Style>

Panel {font-family: Times, "_serif";

}</mx:Style>

• Внешний файл:<Style source=“my.css” />

• При компиляции

Природа CSS во FlexFlex Builder

Flex SDK

Flex Framework

MXML

Компиляция

AS CSS

Виды скинизации

Графическая Программная

Designer-developer workflow

Скинизация• Тоже CSS:Button {

up-skin:Embed("../assets/orb_up_skin.gif");}Button {

up-skin: ClassReference("ButtonUpSkinAS");}

Designer/developer workflow

+Flex Skin Design Extensions

http://adobe.com/go/flex3_skinning

+

Flex Builder

http://scalenine.com/

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

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

Q&A

Константин Ковалевhttp://riapriority.com/

constantiner@riapriority.com