Flex 4 Rename week is complete

We have completed the scrubbing of our Flex 4 classes and completed the rename. Moving forward, no APIs should be renamed unless someone gives up their first born child and does a little jig on top of Mt. Kilamanjaro.

If you are interested in what was checked in during this rename, check out our open source site at:

http://opensource.adobe.com/wiki/display/flexsdk/Rename+List

By the way, the final rename that went in today was that the flex4.swc was renamed to spark.swc. (This might affect a few folks, so, I thought I’d call it out.)

Flex 4 List of Renames and API Changes

We have posted a list of API changes that we’ve been making to the Flex 4 API (this week) on the open source site at:

http://opensource.adobe.com/wiki/display/flexsdk/Rename+List

I will be updating this list as things change or get added. These API changes should not change, add or remove functionality,  in general. All of the changes fall into one of the following categories:

1) Direct rename of APIs, classes or package names

2) Removing properties or methods that are redundant with other methods or properties.

3) Moving some API from protected to private or vice versa.

4) Moving some properties or methods to base classes.

5) Changing the type of some properties.

You can grab these latest builds on the open source site, but, as I said in my last post, I wouldn’t recommend it until at least Monday when these renames should be over.

A messy week of renames for the Flex SDK

In case you are watching the SVN commits of the Flex SDK team, you might notice a lot of “renames” going in this week. This is actually a week reserved for the final “renames” of our Flex 4 (Gumbo) API. After this week, we are trying to NOT change the API for any reason before Flex 4 goes out.

But, in the meantime, this week is messy. I wouldn’t recommend grabbing one of our builds this week. Most of the documentation and many samples out in the wild have not caught up with these renames, so, you’ll have a tough time figuring out what changed to what unless you go and read all the SVN diffs and logs.

As the week comes to a close, we should finish our renames and I’ll publish a list of changes.

An easy vertical Spark ButtonBar skin

The default skin for the Spark ButtonBar was not really created for a vertical layout. It is suited for a horizontal layout where the first button and the last button look mildly different. The middle buttons will be all the same. Therefore, when you use a Spark ButtonBar and assign a VerticalLayout:

<s:ButtonBar dataProvider=”{myData}”>

<s:layout> <s:VerticalLayout /> </s:layout>

</s:ButtonBar>

your components doesn’t look that great. You will get something like this:

Notice that the first button has rounded corners on the left side and the last button has rounded corners on the right.

For a vertical ButtonBar, you probably actually want all of your buttons to look identical. In this case, you would create a custom skin and remove the optional skin parts for ‘firstButton’ and ‘lastButton’. The skin part ‘middleButton’ is required. The ‘middleButton’ is used for all of the buttons in a ButtonBar if no ‘firstButton’ or ‘lastButton’ exist.

Here is the code for my custom vertical ButtonBar skin:
<?xml version=”1.0″ encoding=”utf-8″?>

<s:Skin xmlns:fx=”http://ns.adobe.com/mxml/2009″ xmlns:s=”library://ns.adobe.com/flex/spark” alpha.disabled=”0.5″>

<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.default.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.ButtonBar")]
]]>
</fx:Metadata>

<s:states>
<s:State name=”normal” />
<s:State name=”disabled” />
</s:states>

<fx:Declarations>
<!– There is no skin part declared for firstButton or lastButton –>
<fx:Component id=”middleButton” >
<s:ButtonBarButton skinClass=”CustomButtonSkin” left=”0″ right=”0″ >
<s:filters>
<s:GlowFilter color=”0xFFFF66″ strength=”5″ />
</s:filters>
</s:ButtonBarButton>
</fx:Component>

</fx:Declarations>

<!—
@copy spark.components.SkinnableDataContainer#dataGroup
–>
<s:DataGroup id=”dataGroup” width=”100%” height=”100%” />

</s:Skin>
The differences in this custom skin are:

1) There is no firstButton and lastButton skin part.

2) I have chosen to use a custom skin for my middleButton ButtonBarButton because I wanted to change the cornerRadius of the buttons.

3) I’ve added a yellow glow to each button using a GlowFilter.

4) I’ve removed the layout assignment in the DataGroup of this skin.

Here is the resulting vertical ButtonBar. All of the buttons have a cornerRadius of 10 and a yellow glow.

Run the sample: ButtonBarExample.swf

Download the application and custom skins: VerticalButtonBar.zip

Note, I’ve customized the colors on the buttons of the ButtonBar using Advanced CSS (pseudo selectors and descendant selectors).

Tour de Flex now includes Spark Samples

Some beginner Flex 4 samples were pushed to Tour de Flex today.  These were all written by our the Flex SDK QA team. They should help you get started with Flex 4 now that the public beta has been released. There should be a sample for all of the Spark components, effects, 3D layout, Advanced CSS and the various FXG (graphic primitive) classes.

If you don’t have the Tour de Flex application yet, you can download it here:

http://www.adobe.com/devnet/flex/tourdeflex/

If you do have Tour de Flex, the samples should get pushed down to you automatically. Look for the “Flex 4 Preview” section.

Flex 4 Public Beta Released – It’s Alive!!!

Flex 4’s first public beta has now posted. This includes everyone’s first look at Flash Catalyst and Flash Builder (previously known as Flex Builder).

Have fun everyone, you can download them here:

http://labs.adobe.com/technologies/flex/ (Labs)

http://opensource.adobe.com/flex/

Matt Chotin wrote an article on what is new in Flex 4 and it can be found here:

http://www.adobe.com/devnet/flex/articles/flex4sdk_whatsnew.html

And, for shameless self promotion… I wrote an article for dev net regarding what you’ll run into in Flex 4 coming from Flex 3:

http://www.adobe.com/devnet/flex/articles/flex3and4_differences.html

Once you get comfortable in Flex 4, check out the new effects. Chet Haase wrote up an article on some of the new Effects classes. Part I can be found here:

http://www.adobe.com/devnet/flex/articles/flex4_effects_pt1.html

We look forward to hearing your feedback on this public beta! File bugs!

Slides from FlashCamp SF – Advanced CSS

At FlashCamp last Friday, I did a quickie 15 min. intro of our new Advanced CSS support in Flex 4. The new support includes:

1) Descendant Selectors

2) ID Selectors

3) Multiple class selectors

4 ) Pseudo / State Selectors

5 ) Mixing and matching all these selectors. So, you can now mix Type + class selectors, Type+pseudo selectors etc.

If you are interested in the Slides I used from FlashCamp, here they are:

FlashCamp Slides: Advanced CSS in Flex 4.pdf

I would also post the beer demo that I used, but, I probably used some images that I don’t own and someone copyrighted at some point… I don’t want to get myself into any trouble

360Flex Sample: Building a Performant itemRenderer by extending UIComponent

In our 360 Flex itemRenderer talk, Ryan showed an example of building a performant itemRenderer. He built an editable star rating itemRenderer that looks similar to what you would see on the netflix website.

In a sample use case, he showed an application that would display several hundred itemRenderers using this ‘StarRating’ itemRenderer.

Ryan showed two different implementations for the same resulting application. In the first implementation, the itemRenderer extending the HBox class. Since the HBox already lays out children for you, the itemRenderer only needed to create and add children to the container. In the second implementation, the itemRenderer extended UIComponent. For this itemRenderer, you needed to do your own measurement and placement of the children. Its a little more work, but, in the end, the itemRenderer built on top of UIComponent was much more performant. In this use case which only included 5 children in the itemRenderer, you saved about 25% on the startup time.

Containers in Flex are pretty heavy weight. They include logic for scrolling, placement of children and a lot of measure code. Therefore, if you are worried about performance when you are displaying data, you should base itemRenderers off of UIComponent instead.

When basing an itemRenderer off of UIComponent, remember to do the following:

1) implement IDataRenderer

2) implement IDropInListItemRenderer and IListItemRenderer if you want to reuse this itemRenderer in multiple columns

3) create and add your children in the createChildren method.

4) define the sizing of your itemRenderer and its children in the measure() method.

5) define the placement of your itemRenderer’s children in the updateDisplayList() method.

For examples on how to do this, download the sample files from our talk here: StarRating.zip

Description of Sample Files:

RatingExample5.mxml – Main application using an itemRenderer based off of HBox

RatingExample6.mxml – Main application using an itemRenderer based off of UIComponent

StarRatingRenderer5.as -ItemRenderer based off of HBox

StarRatingRenderer6.as – ItemRenderer based off of UIComponent

360Flex Sample: Using a Slider as an itemRenderer

Again, this is a sample that Ryan and I showed at our 360Flex talk on custom itemRenderers. In this example, a Flex Slider is used as a renderer and an editor for a column. What makes using a Slider different from a Button, DateField or some of the other Flex components is that a Slider does not implement IDropInListItemRenderer or IDataRenderer. Therefore, by default, you cannot use it as a drop-in itemRenderer.

For the sample, I have subclassed a Flex HSlider and implemented both IDropInListItemRenderer and IDataRenderer. When implementing IDataRenderer, you need define a setter and getter for the data property. When implementing IDropInListItemRenderer, you need to define a setter and getter for the listData property.

Also, if you want the Slider to act as a renderer and editor (affecting your data), be sure to do the following:

1) Set editable=true on your DataGrid
2) Set rendererIsEditor on your DataGridColumn
3) Set editorDataField on your DataGridColumn that is using the Slider.

View the Sample Here: AmericanIdol.swf (press the button in the app to get the data to fill in the DataGrid)
Download the Source Here: SliderRenderer.zip

360Flex Sample: Implementing IDropInListItemRenderer to create a reusable itemRenderer

This is one of the samples that Ryan and I showed at our Flex 360 presentation for building custom itemRenderers. In this sample, I am using the same itemRenderer for 3 of the four columns. This itemRenderer has an Image and Label inside of a Canvas.

To re-use this itemRenderer, you need to use the listData property on the itemRenderer to figure out which column the itemRenderer is sitting in. The listData property is of type DataGridBaseListData which gives you the ‘dataField’ of that column.

To use the listData property, your itemRenderer must implement the interface mx.controls.listClasses.IDropInListItemRenderer. To implement this interface, the only necessary code is to add a getter and setter for the listData property. The listData property is always set before the data property, therefore, in the function where your data property gets set, you can get the value of the listData.dataField property to figure out what column you are in. Here is a snippet of the code from the itemRenderer used in this example. In this data setter, we determine what the source of the Image should be as well as the Label text:

override public function set data(value:Object):void { if(value != null)  { super.data = value;//Determine the column that this renderer is displaying var dataField1:String = DataGridListData(_listData).dataField; // Set the source for the Image and text for the Label that this // renderer is displaying. image1.source = value[dataField1].url; label1.text=value[dataField1].name; } }

Source: src.zip