Flex 4 and FlashBuilder 4 are available!

The brand new version of Flex and FlashBuilder are now available to the public. You can find more information here and download FlashBuilder 4, which comes packaged with the Flex 4 SDK, here.

The Flex 4 SDK provides a number of amazing features that provide even more flexibility and control for developers. If you are currently using Flex 3 components it is still a good idea to download the Flex 4 SDK and begin compiling your Flex 3 applications using the Flex 4 mxmlc compiler, which has also been improved. Using the compatibility-version feature of the Flex 4 compiler, your Flex 3 applications will not change in appearance.

Flex 3 and Flex 4 components can be used together, and many Flex 4 components provide a greatly improved experience for developers. Implementing custom skins and using states has never been easier, and a large number of other new features will really enhance your applications.

I’d encourage everyone to download FlashBuilder 4 and start using the Flex 4 SDK and feel free to post questions or comments here and I will answer them as quickly as possible.

Using Halo Containers and ItemRenderer with Spark Components

A new functionality has been introduced that allows users who are familiar with the Spark itemRenderer functionality to use a similar approach to create itemRenderer for Halo DataGrid and Tree (since there is not currently a Spark DataGrid or Tree).

This is accomplished using the MXItemRenderer class. For DataGrid, the MXDataGridItemRenderer is used, for Tree, the MXTreeItemRenderer. In both cases, Spark Components can be used in there Halo components in an almost identical manner as they in Spark components. Here is an example of what an MXDataGridItemRenderer looks like:

mxdgirEx2.png

Using Spark Panel with a Scroller

Due to some recent changes to SkinnableContainer, the way in which you add a Scroller to a Spark Panel has changed.

In the past you were able to wrap a Panel in a Scroller and get a scroll bar for the Panel. While this wasn’t the ideal approach, it worked and was a quick and dirty way to add a Scroller. Recently, a change was made such that SkinnableContainer no longer implements IViewPort and as a result, this old approach will no longer work.

The best practice for this scenario is to add a Scroller to the Panel skin. To do so you simply wrap the Panel’s contentGroup with a Scroller. One important thing to remember is that you have to set an explicit size on the Scroller so that it does not auto-resize. An easy way of doing so is either by setting width and height to100% or to use constraints and set top, bottom, left and right all to 0.

For example, to add scroll bars to a Panel you would modify the Panel skin so that it contained something like the following:

panelSkin5.png

Using this approach you will be able to make use of scroll bars on a Spark Panel

Creating a custom skin to add tics and labels to Spark Sliders

There has been some recent discussion over how to get tics and labels on Spark Sliders. Halo Sliders contained built in support for tics and labels, however, this feature does not yet exist for Spark Sliders. While built in support may be added in the future, for the time being the way to get tics and labels for a Spark Slider is to implement a custom skin. With the new Spark skinning architecture, this is relatively easy to do.

For example, to get labels for an HSlider, you could simply copy, rename, and then modify the HSliderSkin.mxml file.

First, copy HSliderSkin.mxml and give it a new name, i.e. CustomHSliderSkin.mxml. When you define the HSlider in your application, use the skinClass style to point to the new skin.

<s:HSlider skinClass=”CustomHSliderSkin”/>

This assumes that the CustomHSliderSkin.mxml file is in the same directory as the application file. If it is in another directory, the full path to the file must be specified. For example, if the CustomHSliderSkin.mxml file were in a sub-directory named “skins”, you would specify it as “skins.CustomHSliderSkin”.

In the CustomHSliderSkin file you can add labels in any number of ways. For this example I will use the SimpleText component, but really anything from a BitmapGraphic to a Rect could be used.

To add a label that displays the string “min” to the left hand side of the HSlider, you can define a SimpleText component as follows:

<s:SimpleText id=”leftLabel” left=”0″ top=”0″ text=”min”/>

Since the SimpleText component above has been positioned flush with the left hand side of the container, the HSlider track needs to be moved over so that they do not overlap. To do so, set the “left” style constraint on the track to a value that gives the label enough room to be displayed and provides the spacing that you find aesthetically pleasing. In this case a value of 30 would be sufficient to display the label “min”.

Using the same approach, a label can be added to the right side of the HSlider. For example:

<s:SimpleText id=”rightLabel” right=”0″ top=”0″ text=”max”/>

Again, space needs to be given to ensure that the HSlider track and the right side SimpleText component do not overlap. In this case, setting the “right” style constraint on the HSlider track to 30 will work as well.

The skin would therefore contain the following:

<!– Defines the left label –>
<s:SimpleText id=”leftLabel” left=”0″ top=”0″ text=”min”/>

<!— Defines the skin class for the CustomHSliderSkin’s track. The default skin class is CustomHSliderTrackSkin. –>
<s:Button id=”track” left=”30″ right=”30″ top=”0″ bottom=”0″ skinClass=”skins.CustomHSliderTrackSkin” />

<!— Defines the skin class for the CustomHSliderSkin’s thumb. The default skin class is CustomHSliderThumbSkin. –>
<s:Button id=”thumb” top=”0″ bottom=”0″ width=”11″ height=”11″ skinClass=”skins.CustomHSliderThumbSkin” />

<!– Defines the right label –>
<s:SimpleText id=”rightLabel” right=”0″ top=”0″ text=”max”/>

By modifying the style constrains used above you can move the labels above or below the HSlider track in whatever way you want. For example, for labels on top of the HSlider, you could simply move the Slider track and thumb down by setting the top style constraint for both to 20, and leaving left and right as 0. In that case, the skin would contain the following:

<!– Defines the top left label –>
<s:SimpleText id=”leftLabel” left=”0″ top=”0″ text=”min”/>

<!— Defines the skin class for the CustomHSliderSkin’s track. The default skin class is CustomHSliderTrackSkin. –>
<s:Button id=”track” left=”0″ right=”0″ top=”20″ bottom=”0″ skinClass=”skins.CustomHSliderTrackSkin” />

<!— Defines the skin class for the CustomHSliderSkin’s thumb. The default skin class is CustomHSliderThumbSkin. –>
<s:Button id=”thumb” top=”20″ bottom=”0″ width=”11″ height=”11″ skinClass=”skins.CustomHSliderThumbSkin” />

<!– Defines the top right label –>
<s:SimpleText id=”rightLabel” right=”0″ top=”0″ text=”max”/>

In this way, labels of any type can be very quickly added to an HSlider, and of course the same approach can be used to VSlider.

To add tics, a similar approach is used.

Like labels, tics can be implemented in any number of ways. The most straight forward way is to simply insert them manually at the desired position on the Slider track.

Anything can be used as a tic – a BitmapGraphic, a Rect, a Line – anything the developer chooses. In keeping with the label example above, the following method can be used to insert tics using a SimpleText component. The hardest part of adding tics is determining where they should be placed. In the example below, the x property is used to specify the location of the tic.

These tics would be useful for an HSlider with the snapInterval property set to 25 since they are positioned in a rough correspondence to multiples of 25 on a HSlider track with a minimum of 0 and maximum of 100, i.e. the HSlider would look like this in the application:

<s:HSlider minimum=”0″ maximum=”100″ snapInterval=”25″ skinClass=”CustomHSliderSkin”/>

CustomHSliderSkin.mxml would then contain the following:

<!– Define tics –>
<s:SimpleText text=”|” x=”34″/>
<s:SimpleText text=”|” x=”66″/>
<s:SimpleText text=”|” x=”99″/>
<s:SimpleText text=”|” x=”131″/>
<s:SimpleText text=”|” x=”164″/>

<s:SimpleText id=”leftLabel” left=”0″ top=”12″ text=”min”/>

<!— Defines the skin class for the CustomHSliderSkin’s track. The default skin class is CustomHSliderTrackSkin. –>
<s:Button id=”track” left=”30″ right=”30″ top=”12″ bottom=”0″ skinClass=”spark.skins.spark.HSliderTrackSkin” />

<!— Defines the skin class for the CustomHSliderSkin’s thumb. The default skin class is CustomHSliderThumbSkin. –>
<s:Button id=”thumb” top=”12″ bottom=”0″ width=”11″ height=”11″ skinClass=”spark.skins.spark.HSliderThumbSkin” />

<s:SimpleText id=”rightLabel” right=”0″ top=”12″ text=”max”/>

With this approach, tics and labels can be manually added to a Slider skin.

Panel with no title

A recent change that people may have missed is that Spark Panel no longer requires the title bar as a skin part. If you want a Spark Panel without a title bar you can modify the skin to remove what is currently listed as layer 4 (the Rect used for the title bar highlight) and layer 5 (the SimpleText component used to display the title).

Renames

Just a quick heads up to anyone who notices issues with custom skins on Spark components. A number of skin parts have been renamed and therefore will need to be updated in any custom skins you may be using. A quick way to fix your Skins is to grab the latest build from the open source site and take a look at the new skin where you’ll notice the name changes. Update the id tag in your custom skin and you should be back up and running.

Formatting the NumericStepper display value

The Spark NumericStepper component has two built in properties that allow a developer to format the NumericStepper value in any way that they choose. For example, if you want to add a “$” to the front of your value, you can do so using these properties. The properties are valueFormatFunction and its companion function, the valueParseFunction. Each of these properties works the same way: you specify the name of a function that you write to perform the desired action. One common mistake is to only use the valueFormatFunction, and then wonder why the NumericStepper no longer works as expected. The reason is that if you convert the value to a string in order to append something to it, you then have to make use of an valueParseFunction to extract the value from the string in order for the NumericStepper to be able to use it again. In most cases these properties should be used together – the valueFormatFunction to specify a function to format the value and the valueParseFunction to specify the function to extract the value. Examples can be found here: valueFormatFunction; valueParseFunction

Is that component really disabled?

When disabling a container, while its children will appear to be disabled, they are not disabled in the manner that they would be if you set the enabled property to false on them directly. When a container is disabled, it will no longer respond to input from the mouse or keyboard and will apply an alpha to itself and all of its contents. However, the children of the container will not in fact be disabled and so they can still be changed programmatically. For example, if a Panel contains a NumericStepper, and outside of the Panel a Button increments and decrements the NumericStepper’s value, disabling the Panel will not prevent the Button outside of the Panel from changing the value of the NumericStepper. Disabling a container is only intended to prevent direct user interaction with the container (and its children) and to modify the appearance in order to indicate that the container is in fact disabled.

Welcome

Welcome to the FlexReport! I started this blog to provide an additional resource that the Flex community can use to learn about the framework. I plan to use this site as a mechanism to discuss ideas and lessons I’ve learned working with Flex and to hopefully provide some new insight into how Spark and Halo components work (as well as how they don’t work). My goal is to focus on some of the less intuitive use-cases and behaviors associated with the SDK so that readers can save time figuring out how various components work and instead focus on other aspects of their Flex projects.

A brief note about me – my name is Jacob; I am a member of the Flex SDK QA team in San Francisco and have been with Adobe since June of 2008.