FLEX{er} » Spark

Meet Hero… The Next Flex SDK Release

Andrei Ionescu — Wed, 14 Jul 2010 19:25:58 +0000

The next release of Flex SDK is code-named Hero. It has three main goals:

Multi-Screen Development: Allow developers to build applications that target the web, desktop or mobile devices using a single unified framework.
Spark Maturation: Polish and grow the Spark architecture by adding new Spark components and capabilities.
Large-Application Development: Support developers building large applications by improving fundamental Flex infrastructure pieces.

Previously, Flex for mobile was a separate branch code-named Slider. The rapid increases in performance on smartphone and the optimized performance of Adobe runtimes on these devices, now make it feasible to support Flex framework directly on mobile devices.

You can find out more reading this article on the official Flex team blog.

How to skin a button with icon in Flex 4 SDK – spark

Stelian Crisan — Fri, 12 Jun 2009 13:23:29 +0000

How to skin a container with padding in Flex 4 SDK – Spark
How to skin a button with icon in Flex 4 SDK – spark

It’s recommended to use same SDK version components in same file, so I skin a button in Flex SDK 4 using only Spark components.

In Halo we use to add an icon to a button using icon property:

    <mx:Button width="120"
        icon="@Embed(source='ico/add-blue.gif')" 		
        label="New comment" />

In Spark we have to skin our button in order to put an icon on the button. I made a skin for a button with round corners and an icon that will be changed as well as background color on different states.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"  
    alpha.disabled="0.5"> 
 
     <fx:Metadata> 
        [HostComponent("spark.components.Button")] 
    fx:Metadata> 
 
    <fx:Script> 
        [CDATA[         
            static private const exclusions:Array = ["labelElement"]; 
            override public function get colorizeExclusions():Array
            {
            	return exclusions;
            } 
        ]]>        
    fx:Script> 
 
    <s:states> 
        <s:State name="up" /> 
        <s:State name="over" /> 
        <s:State name="down" /> 
        <s:State name="disabled" /> 
    s:states>  
 
    -- UP SKIN-->
    <s:Rect radiusX="8" radiusY="8" width="120" height="30" includeIn="up" >
    <s:stroke>
    	<s:Stroke color="#999999" alpha="1"/>
    s:stroke> 
         <s:fill> 
              <s:LinearGradient rotation="90"> 
                   <s:entries>  
                        <s:GradientEntry ratio="0" alpha="1" color="#EE9819"/>
                   		<s:GradientEntry ratio="1" alpha="1" color="#FAE38F"/>
                  		<s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                  		<s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/> 
                   s:entries> 
              s:LinearGradient> 
         s:fill> 
    s:Rect>
 
    -- Over SKIN-->
    <s:Rect radiusX="8" radiusY="8" width="120" height="30" includeIn="over" >
    <s:stroke>
    	<s:Stroke color="#999999" alpha="1"/>
    s:stroke> 
        <s:fill> 
              <s:LinearGradient rotation="90"> 
                   <s:entries> 
                        <s:GradientEntry ratio="0" alpha="1" color="#8EB3E7"/>
                    	<s:GradientEntry ratio="1" alpha="1" color="#DCEBFE"/>
                   	 	<s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                    	<s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/> 
                   s:entries> 
              s:LinearGradient> 
         s:fill> 
    s:Rect>
 
    -- DOWN SKIN-->
    <s:Rect radiusX="8" radiusY="8" width="120" height="30" includeIn="down" >
    <s:stroke>
    	<s:Stroke color="#999999" alpha="1"/>
    s:stroke> 
        <s:fill> 
              <s:LinearGradient rotation="-90"> 
                   <s:entries> 
                        <s:GradientEntry ratio="0" alpha="1" color="#8EB3E7"/>
                    	<s:GradientEntry ratio="1" alpha="1" color="#DCEBFE"/>
                   	 	<s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                    	<s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/>  
                   s:entries> 
              s:LinearGradient> 
         s:fill> 
    s:Rect>
 
    -- UP ICON -->
    <s:BitmapImage source="@Embed('ico/add-blue.gif')" 
    	verticalCenter="0" left="5" includeIn="up" />
 
    -- OVER ICON -->
    <s:BitmapImage source="@Embed('ico/add-green.gif')" 
    	verticalCenter="0" left="5" includeIn="over" />
 
    -- DOWN ICON -->
    <s:BitmapImage source="@Embed('ico/add-red.gif')" 
    	verticalCenter="0" left="5" includeIn="down" />
 
    -- Text SKIN-->
    <s:SimpleText id="labelElement" 
             textAlign="center" 
             verticalAlign="middle" 
             lineBreak="toFit" 
             truncation="1" 
             color="0x000099"
             horizontalCenter="0" verticalCenter="1" 
             left="25" right="10" top="2" bottom="2"> 
    s:SimpleText> 
 
s:SparkSkin >

I’m not a good designer but I will make a round button, just as an example, in order to see how to skin a button, and to let you understand the Flex SDK 4 graphic possibilities:

<?xml version="1.0" encoding="utf-8"?> 
<s:SparkSkin 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	minWidth="60" minHeight="60" 
	alpha.disabled="0.5"> 
 
	<fx:Metadata> 
		[HostComponent("spark.components.Button")] 
	fx:Metadata> 
 
	<fx:Script> 
	[CDATA[         
		static private const exclusions:Array = ["labelElement"]; 
		override public function get colorizeExclusions():Array 
		{
			return exclusions;
		} 
	]]>        
	fx:Script> 
 
	<s:states> 
		<s:State name="up" /> 
		<s:State name="over" /> 
		<s:State name="down" /> 
		<s:State name="disabled" /> 
	s:states> 
 
	<s:Ellipse width="100%" height="100%">
 
		<s:stroke>
			<s:Stroke color="#cccccc" alpha="1" weight="1" /> 
		s:stroke> 
 
		<s:fill.up> 
			<s:RadialGradient> 
				<s:entries>  
					<s:GradientEntry color="0x0000AA" 
						ratio="0" alpha=".5"/> 
					<s:GradientEntry color="0xAAAAAA" 
						ratio="0.8" alpha=".5"/> 
				s:entries> 
			s:RadialGradient> 
		s:fill.up>  
 
		<s:fill.over>  
			<s:RadialGradient> 
				<s:entries>  
					<s:GradientEntry color="0xAA0000" 
						ratio="0" alpha=".5"/> 
					<s:GradientEntry color="0xAAAAAA" 
						ratio="0.8" alpha=".5"/> 
				s:entries> 
			s:RadialGradient> 
		s:fill.over>  
 
		<s:fill.down>  
			<s:RadialGradient> 
				<s:entries>  
					<s:GradientEntry color="0x00AA00" 
						ratio="0" alpha=".5"/> 
					<s:GradientEntry color="0xAAAAAA" 
						ratio="0.9" alpha=".5"/> 
				s:entries> 
			s:RadialGradient> 
		s:fill.down> 
 
	s:Ellipse>
 
	<s:SimpleText id="labelElement"  
				  textAlign="center" 
				  verticalAlign="middle" 
				  lineBreak="toFit" 
				  truncation="1" 
				  color="0xFFFFFF"
				  fontWeight="bold"
				  rotation.up="180" rotation.over="0" 
				  rotation.down="0" rotation.disabled="180"    
				  horizontalCenter="0" verticalCenter="1" 
				  left="10" right="10" top="2" bottom="2"> 
	s:SimpleText> 
 
s:SparkSkin>

Please download the project and have a look around.

Previous in series

How to skin a container with padding in Flex 4 SDK – Spark

Stelian Crisan — Thu, 11 Jun 2009 14:42:13 +0000

How to skin a container with padding in Flex 4 SDK – Spark
How to skin a button with icon in Flex 4 SDK – spark

Now Flash Builder 4 and Flex SDK 4 are available, so we can play around in beta version.

As you probably already know there are same changes regarding skinning from Halo to Spark, I search the web, I read the manual and I think that I got some skills .

It will be a series of articles regarding skinning in Flex 4 SDK and for know I’m going to show you a small example about how to skin a container.

<?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/halo" 
    minWidth="450" minHeight="250">
 
    <s:SkinnableContainer 
        horizontalCenter="0" verticalCenter="0"
        minWidth="400" minHeight="200" 
        skinClass="com.flexer.skin.ContainerSkin" > 
 
        <s:BitmapImage 
            source="@Embed('img/fxr.jpg')" 
            width="100%" height="100%"
            horizontalCenter="0" verticalCenter="0" />
 
    s:SkinnableContainer> 
 
s:Application>

As you see there are some changes in name spaces, the Spark components are using “s”, old Halo components are using “mx”. You can have both, Spark and Halo, component in the same project.

SkinnableContainer it’s the skinnable container available in Flex 4 and if you want to change the skin you have to use skinClass in order to tell the component where the skin it’s in the project.

The skinning component it’s looking like this:

<?xml version="1.0" encoding="utf-8"?> 
<s:SparkSkin 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    alpha.disabled="0.5">
 
    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    fx:Metadata> 
 
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    s:states>
 
    <s:Rect 
        left="0" right="0" top="0" bottom="0"  
        radiusX="20" radiusY="20" >
 
        <s:stroke>
            <s:SolidColorStroke color="0x000099" weight="3"/>
        s:stroke>
 
        <s:fill> 
            <s:LinearGradient rotation="-90"> 
                <s:entries> 
                    <s:GradientEntry ratio="0" alpha="1" color="#8EB3E7"/>
                    <s:GradientEntry ratio="1" alpha="1" color="#DCEBFE"/>
                    <s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/>
                    <s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/>  
                s:entries> 
            s:LinearGradient> 
        s:fill> 
 
    s:Rect>
 
    <s:Group id="contentGroup" 
        left="20" right="20" top="20" bottom="20">
 
        <s:layout>
            <s:BasicLayout/>
        s:layout> 
 
    s:Group> 
 
s:SparkSkin>

As you see, it’s much clear than in SDK 3.

HostComponent is the component that we want to change. All states that you have for this component are declared in states tag.

We also have some graphical elements, a rectangle with a border (3px stroke) and gradient fill for background. All future children of this component will be added into contentGroup.

Because for SkinnableContainer you can set padding property, we use a little trick ans use left, right, top and bottom property for content group in order to have the padding that we need.

More to come.

Next in series

FLEX{er} » Spark

Meet Hero… The Next Flex SDK Release

How to skin a button with icon in Flex 4 SDK – spark

Table of contents

How to skin a container with padding in Flex 4 SDK – Spark

Table of contents