Discussions, Ideas and Examples of Flex components and applications

Posts in Category "Uncategorized"

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.

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:

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.

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:

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:

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).

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.

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

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.