What is the most efficient way to style your Flex application?

Question

It may be a public opinion poll rather than a question, but here. I have a rather complicated Flex application that uses many different components. I want the application to be able to customize the style and / or skinning. I also want to be sure that the styling approach makes the most efficient use of system resources (memory, processor, network) and that it does not adversely affect performance.

We are currently using a hybrid approach to styling an application that uses CSS and Flash skins created in CS3. It seems strange to me to have a two-pronged approach to styling an application, and ideally I would like to dwell on one approach or another. Can someone outline the advantages and disadvantages of using only CSS or a flash skin? Is there any excuse for using both inside a single application?

Using CSS is exceptionally beneficial because it is available to anyone with a basic understanding of other CSS uses, especially when using Flex 2 Style Explorer. On the other hand, I know that the CS3 skin that we use declares up / over / down / disabled / clicked skins for each component in which these states are necessary, and Flex controls transitions to the corresponding skins when each state (de) activated. However, I got the impression that creating a Flex skin in CS3 requires several specialized skills and tools.

So, what do you recommend for styling your Flex application if performance, customization, and efficient use of resources are important priorities?

Answer 1

-, Flex 4, . Flex 4 .

Flex 4 . , . , CSS, CSS Flex 4. . , ​​, Flex 4 Spark Skins, .

, Flex 4 Skins Styling :

• : , XML
• CSS

. , , CSS . , ColorPalette, : public static const ColorPalette.BRIGHT_RED:uint = 0xff0000; .. Flex 4 Skins , <mx:Button color="{ColorPalette.RED}"/>. , ( ). XML: ( ) XML, . ColorPalette XML ( ColorPalette.ACCENT_COLOR : XML (, - ). .

: Flex 4 Flex 4 Flex 3 (datagrid, accordion ..). , , , 4 2 dropshadows ( 2 ) , , . ColorPalette.BRIGHT_RED ( :)). XML ColorPalette. Flex 4 Skin

CSS. CSS , ColorPalette () CSS. Degrafa CSS Skin .

Palettes CSS - . . , , , <mx:Button color="{ColorPalette.RED}"/>, ( , , , , Adobe Tweens), .

CSS. Flex CSS- (Panel { properties:values... } . , 100 , 100 , 100 ! swf , , . , ( setStyle(property, value) Flex , . 're ( - Flex Style Explorer, ), . setStyle(), .

, , , ( ( )?). , ? (ColorPalette.BRIGHT_RED) .. (<mx:Button color="{ColorPalette.RED}"/>) ( ruby ​​ swfs, ). , <mx:Button color="{ColorPalette.RED}"/> <mx:Button color="0xff0000"/>, .

, , :

• <mx:Button color="0xff0000"/>
• <mx:Button color="{ColorPalette.RED}"/>
• xml <mx:Button color="{myxml.@button_color}"/>

xml . / Flash Flex, , ( ).

• ( )
• xml
• xml

CSS, , , HTML, . ( ) XML.

, , . 3 (myskins, mx, spark). / Flex 3/4 . Scale 9 Skin Project , . ( - ) Flex, . , , XML. , , , CSS (, ). CSS . / //css , , xml ( ), .

CSS.

, .

Answer 2

CSS. , . , , ActionScript, css explorer ( flex 3 http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html, , , flex 2).

Answer 3

, .

: - QuickStart

Adobe:

" , . , Button , Flex , Adobe® Flash®. , ".

" " Adobe LiveDocs.