Flex 4 Skin – BackgroundGradientColors

An article by Stefan Horochovec    2 Comments

Hello

In this post I will talk a little about using a gradient background color. In Flex 3 this was possible through implementation of a property called backgroundGradientColors that was available in the styles of the Application object and now in version 4 of Flex is necessary to implement a Skin to apply the gradient to the background of the application.

The Adobe Flex 4 SDK has changed a lot in relation to Adobe Flex 3. One big change is the extensive use Skins to build our components and applications.

Roughly one can evaluate these changes in a negative way, since the learning curve became higher in relation to Flex 3, however that a more robust implementation of these features allows us more flexibility and new possibilities in our implementations.

Confronted with the new Flex SDK, the developer quickly realizes that there was a significant clustering of properties in “Styles” in your Flex Properties, but even with this increase some properties no longer exist.

Today, we speak of “BackgroundGradientColors”. A property that allowed us to pass an array of colors for the same application and applied as a background color gradient between the informed.

To demonstrate this, we will create a new “Flex Project” in our Flash Builder BackgroundGradientColor named as the image below:

Once created, we will add a “MXML Skin” in our application. To do this, go to File, New, MXML Skin, and will open a screen to create the file. On this screen, we set the Name and Host Component of our skin, as shown below:

Some considerations on the creation of a Skin that we just did. The given name is the name that will receive the Skin class in our project. The HostComponent metadata is used to tell which component Skin SDK will make its implementation. When informing the metadata and exit the field, the “create a copy of” shall be filled automatically with the class used by the component in HostComponent informed.

After opening the file created, we will see that he has all the information about the design and colors of the component spark.components.Application. We also realize that there is a great use of States.

We seek the following block of code inside the ApplicationSkin.mxml. He should be in line 47.

1
2
3
4
5
6

<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
	<s:fill>
		<!--- @private -->
		<s:SolidColor id="bgRectFill" color="#FFFFFF"/>
	</s:fill>
</s:Rect>

We will make our changes in that code block, which contains the rectangle that covers the whole area of our application.

We realize that within the rectangle SolidColor there is an object containing the initial color of our Application. This object will be removed to add the object LinearGradient mx.graphics.package.*. And to define the colors of the gradient, we use objects GradientEntry that will contain the colors of the gradient to be applied, as follows:

1
2
3
4
5
6
7
8
9

<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
	<s:fill>
		<!--- @private -->
		<s:LinearGradient rotation="90">
			<s:GradientEntry color="#000000" />
			<s:GradientEntry color="#999999" />
		</s:LinearGradient>
	</s:fill>
</s:Rect>

After that, we can return to our main application and we will add the property skinClass the class corresponding to the skin of our application, as follows:

1
2
3
4
5
6
7
8
9

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   skinClass="ApplicationSkin">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:Application>

After this change, we will order the “Design” and we can see in the actual implementation of the Builder Flash Skin by our application as the image below:

The possibility of working with Skin opens even more doors for creativity within the Flex 4 SDK. Now’s our creativity to better use of layouts, colors and shapes in our applications.

Example source? Click here.

Cheers, until next time!