Monthly Archives: June, 2009

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:

verticalButtonBar1

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&#8243; 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.

verticalButtonBar2

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.

tourdeflex

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.

starRenderer

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