Using baseColor to Style Components in Flex 4
Line Break
Author: Arjan (34 Articles) - Author Website
Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.
Flex 3 was a great product, but to be fair….changing default application appearance was a pain in the ass. I’m not a designer by any means so I was always a bit frustrated when I was trying to do something different with the appearance. Luckily for me and all you programmers out there…Flex 4 offers a nice little solution to change the defaults a bit by setting only one attribute on your application or your components: baseColor.
Check out the sample application I’ve created below followed by the complete source. It’s not that interesting….only a couple of standard UI components to show you the effect of setting the baseColor of your application.
As I mentioned earlier, you can set the baseColor on Application level or on component level. That way, you can get a red and a blue CheckBox if that’s your cup of tea. In my example, I am showing this by setting the baseColor of the Button component to red (#FF00000), all the other components just inherit the baseColor from the Application.
Note: In the final Flex 4 SDK that is shipped with Flash Builder, the baseColor property is not available anymore….just found that out today. When I find the alternative way to do this, I will post that here.
Note2: found the solution, goto this article
Complete source code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" baseColor="{colorPicker.selectedColor}" xmlns:s="library://ns.adobe.com/flex/spark" initialize="init()" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="400" minHeight="400" viewSourceURL="srcview/index.html"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var dataProvider:ArrayCollection; private function init():void{ var obj:Object = new Object(); dataProvider = new ArrayCollection(); for( var i:int=1; i<=20; i++) { obj = new Object(); obj.Name = "Sample "+i; dataProvider.addItem(obj); } pb.setProgress( 50, 100 ); } ]]> </fx:Script> <s:VGroup width="100%" height="100%" paddingLeft="10" paddingTop="10"> <s:HGroup verticalAlign="middle"> <s:Label fontWeight="bold" fontSize="14" text="Pick a baseColor:"/> <mx:ColorPicker id="colorPicker" selectedColor="0xFFE000"/> </s:HGroup> <mx:HRule width="100%"/> <s:Button label="Button" baseColor="0xFF0000"/> <s:CheckBox label="CheckBox"/> <s:RadioButton label="RadioButton"/> <mx:DateChooser/> <mx:ProgressBar id="pb" mode="manual" labelPlacement="center"/> <s:DropDownList dataProvider="{dataProvider}" labelField="Name"/> <mx:DataGrid width="400" height="250" dataProvider="{dataProvider}"> <mx:columns> <mx:DataGridColumn headerText="Name" dataField="Name"/> </mx:columns> </mx:DataGrid> <s:HGroup verticalAlign="middle"> <s:Label text="TextInput"/> <s:TextInput width="200"/> </s:HGroup> </s:VGroup> </s:Application> |
Related posts:
- Flex 4 / Flash Builder 4: baseColor changed to chromeColor
- Style AdvancedDataGrid depending on data example
- Style Flex Tree Label Example
- How to make a magnetic button in Flex 4
- Using States in Flash Builder
Written by · Filed Under Examples
Was this post useful to you?
(3 votes, average: 5.00 out of 5)
Loading ...Comments
One Response to “Using baseColor to Style Components in Flex 4”
[...] baseColor property on the s:Application tag to give it a default color, just like I explained in this example. I noticed however, that Flash Builder gave an error that it didn’t recognize the [...]