Оригинал статьи: Stateful skins in Flex 3, color transitions in buttons now possible
Автор оригинала: Nahuel
Вольный перевод: SHAGGYSMILE

В Flex 3 beta 2 появилось несколько новых возможностей, для скинования. Об этом уже писали Juan и NJ. Но тема нашей статьи - Stateful Skins без Flash :)

Это хорошая вещь в фремворке, так как теперь можно управлять переходами между состояниями (transitions) не покидая Flex Builder.

Итак, создадим кнопку:

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0x3d3d3d" layout="absolute" width="400" height="200">
   <mx:Style source="assets/styles/Main.css"/>
   <mx:Button label="Sexy Flex Button" x="50" y="50" />
</mx:Application>

Как видите, вполне обычная и безобидная кнопка с самым обычным линком на стиль.

Стиль такой:

/* CSS file */
Button{
   skin: ClassReference("skins.ButtonSkin");
   fontSize:16;
   fontWeight:normal;
   paddingLeft:23;
   paddingRight:23;
   paddingTop:10;
   paddingBottom:10;
   color:#ffffff;
   textRollOverColor:#ffffff;
   cornerRadius:5;
   borderThickness:1;
   borderColor:#cccccc;
   borderStyle:solid;
   backgroundColor:#1e83b8;
}

Думаю у многих взгляд остановился на skins.ButtonSkin :) Но обо все по порядку.

Разработчик может спокойно заниматься логикой приложения, не зацикливаясь над тем, как выглядит кнопка (как это кстати часто происходит). После этого, программист или "дизайнлопер" могут добавлять transitions (преходы), цвета и вообще менять внешний вид, не отвлекая разработчика от важных дел.

Ссылка ClassReference в CSS, указывает на класс (например skins.ButtonSkin) где определены различные эффекты, такие как переходы, тени и др. Т.е. процесс программного скинования упрощается в разы.

В Flex2 дела обстояли похуже. При создании программных скинов, мы должны были определять логику скинируемого компонента (например определяя состояния, типа up, over, down и т.д.) непосредственно в основном приложении, на что уходило драгоценное время. Упростить этот процесс естественно можно, используя внешние assets, если в качестве скина использовались картинки или внешние swf.

Но для изменения какого-нибудь эффекта (если в assets swf) приходилось перекомпилировать скин, а тут опять таки - время.

В Flex 3 мы можем создать один класс в котором прописаны основные или базовые состояния кнопки. В этом примере, мы создали MXML компонент, используя Canvas в качестве супер класса (из-за лени автора статьи). Но мы можем использовать любой UIComponent или любой другой класс, поддерживающий IStateClient.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
   xmlns:mx="http://www.adobe.com/2006/mxml"
   creationComplete="init()">
   <mx:Script>
      <![CDATA[
         import mx.controls.Button;
         import mx.core.UITextField;
 
         use namespace mx_internal;
 
         [Bindable]
         private var textField:UITextField;
 
         private function init():void
         {
            var button:Button = (parent as Button);
            textField = button.getTextField();
            filters = [bevel, dropshadow];
         }
 
      ]]>
   </mx:Script>
   <mx:states>
      <mx:State name="up" enterState="fadeColor.play()">
         <mx:SetProperty target="{fadeColor}" name="toValue" value="0x1e83b8"/>
         <mx:SetProperty target="{textField}" name="filters" value="{[textShadow]}"/>
</mx:State>
 
<mx:State name="down">
      <mx:SetProperty target="{this}" name="filters" value="{[bevelDown]}"/>
      <mx:SetProperty target="{glow}" name="color" value="{0xf1c990}"/>
      <mx:SetProperty target="{textField}" name="filters" value="{[glow]}"/>
</mx:State>
 
<mx:State name="over" enterState="fadeColor.play()">
   <mx:SetProperty target="{fadeColor}" name="toValue" value="0xff9600"/>
   <mx:SetProperty target="{textField}" name="filters" value="{[glow]}"/>
   <mx:SetProperty target="{bevel}" name="highlightAlpha" value="0.8"/>
</mx:State>
</mx:states>
 
   <mx:DropShadowFilter id="dropshadow" alpha="0.5" quality="3" blurX="6" blurY="6"/>
   <mx:BevelFilter id="bevel" angle="90" highlightColor="0xffffff"
      shadowAlpha="0" strength="3" quality="3" distance="24" highlightAlpha="0.4"/>
   <mx:BevelFilter id="bevelDown" type="inner" angle="245" shadowAlpha="0.4"
      highlightAlpha="0.4" distance="8" blurX="10" blurY="10" quality="4"/>
   <mx:DropShadowFilter id="textShadow" alpha="0.5" quality="2"
      distance="2" blurX="2" blurY="2" />
   <mx:GlowFilter id="glow" color="#b86113" alpha="0.8" />
 
   <ds:AnimateColor xmlns:ds="com.darronschall.effects.*"
      id="fadeColor"
      target="{this}"
      property="backgroundColor" isStyle="true"
      toValue="559603"
      duration="300" />
 
   <mx:Image source="@Embed(source='assets/images/dec_left.png')"
      left="5" verticalCenter="0"/>
   <mx:Image source="@Embed(source='assets/images/dec_right.png')"
      right="5" verticalCenter="0"/>
</mx:Canvas>

Пример | Исходник

Прим. переводчика: Во время перевода, я возможно погорячился и возможно в порыве восторга допустил ошибки. Прошу отписатся в комментариях, если заметите, что не так. Так что прошу заметить это не оригинальный а вольный перевод, с моими добавлениями.

Popularity: 78% [?]