Monthly Archives: May, 2009

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.

AI

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

yoga_poses

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

Using Flex Builder 3 with the Flex 4 SDK

At Flex 360, someone asked me where they could find out how to use our Flex 4 SDKs with Flex Builder 3 because Builder 4
isn’t available to the public. This is pretty easy thanks to the multiple SDK support in Builder. So, as promised to a customer,
here are the instructions for using Flex Builder 3 with the Flex 4 Gumbo SDK.

1) Download the Gumbo SDK – Go to opensource.adobe.com.

2) Unzip the flex_sdk_4.zip to some location on your hard drive. For the purposes of this tutorial, we’ll download it to
C:/Flex4/trunk/7069

3) Open up Flex Builder 3 and create a new Flex project.

4) Right-click on the project and select the ‘Properties’ option. This should open the Properties panel.

5) From the left hand menu, select ‘Flex Compiler’ to view the Flex Compiler properties

6) In the Flex Compiler properties view, click on the link ‘Configure Flex SDKs…’
ConfigureSDK

7) You should be in the ‘Installed Flex SDKs’ view. click on the button ‘Add’.

8) In the resulting dialog, browse to the location that you installed the SDK (from step #2). Then, click ‘OK’.

addSDK

The Flex 4 Gumbo SDK should now be added to the list of SDKs available for you to use for this project.

9) Press ‘OK’ in the “Installed Flex SDKs” dialog bringing you back to the main ‘Flex Compiler’ properties
dialog.

10) In the ‘Flex Compiler’ dialog, select the radio button for ‘Use a specific SDK’ and
select the Flex 4 SDK that you added.

11) In the ‘Flex Compiler’ dialog, for ‘Require Flash Player version:’, enter 10.0.0. Flex 4
will only support Flash Player 10 content. If you compile to player 9, you will get an error.

requiredVersion

12) Press ‘OK’ to close your dialog.

13) Note that when you create new mxml files for this project, the default tags will still be the tag
with the old namespace. You will need to manually change the mxml to use our new Spark Application tag and the new namespaces.

To get started with your first spark application. Feel free to use the sample below which is a simple spark application using the
3 new namespaces and some spark components (s:) along with halo components (mx:).

Note: If you try to compile a Flex 3 application with Flex 4, be aware of some of the migration issues that you’ll face that I mentioned
in a previous post.

Have fun playing with Spark!

Download Sample Spark AppfirstSample4App.mxml

Custom ItemRenderers Slides From Flex 360 Indy

Ryan Frishberg and I are giving a presentation today at 4:00 PM regarding using Custom ItemRenderers. Most of the presentation talks about Flex 3, but, we are also discussing Flex 4 and changes to the itemRenderer usage and architecture in Gumbo. If you missed it, you can find our slides here.

Download Slides

I will post our sample code in subsequent postings.

Flex 360 Indy – Day 1 – Bugquash

After an evening of beer and White Castle burgers in Indianapolis, I was actually to able to wake up at 9:00 AM this morning to attend the Flex Bugquash.  The day started a bit slow when the Adobe connect information was not immediately posted, however, it ended up being a pretty successful opportunity where Flex SDK bugs were indeed quashed. Vera Carr, associate product manager gave the a talk to start off the bug quash. She talked about how many bugs have been fixed in the community, what the process is and motivation for everyone to get involved. I was surprised to learn that only 40% of patches submitted get accepted by the SDK team. I thought our number was much higher. Vera pointed out the main reasons that patches get rejected which included reasons like:

1) The fix would bloat the code and only be relevant for 20% of the community (or less) while hindering the other 80%.

2) The fix is too narrow and doesn’t think about other scenarios.

3) The fix breaks backwards compatibility

4) The fix doesn’t follow good coding standards.

They will likely post the slides from Vera’s talk on the bugquash site in no time at all.

During the day, we only had about 10-15 people in the room in Indy and another 10+ developers online, but, we actually accepted a good number of patches. Our dev team accepted seven patches today and still have a handful to review that were submitted today. I think that is pretty awesome. Luckily, we had a decent number of developers on hand to help people set up their environments and learn the best coding practices. I didn’t do too much except run tests on some patch builds.

I think that all of the people who had accepted patches today were pretty awesome. The developers who had patches accepted today included:

Matt Couch (3)

Nate Beck

Abdul Qabiz (2)

Marcus Christie

Nice job!

FlashCamp Announced May 29, 2009

Mike Chambers announced that registration is now open for FlashCamp on May 29, 2009. If you look at the sessions available, you’ll see that this is geared for people wanting to know what’s new in the upcoming version of Flex Builder. There will be demos for Catalyst, Flash Builder 4 and various Flex SDK features.  I have the unfortunate time of presenting Advanced CSS at 9:30 PM that night. I hope some of you will still be awake and not drunk from the free beer. Well… actually, I don’t really care if you are drunk as long as you pretend like you are listening to my quick 15 min. preso. 🙂

Register soon…this event always fills up quickly because its free.

Register here:http://flashcampsf.eventbrite.com/

What : FlashCamp  – one night mini conference for Flex developers interested in learning about and getting started with the next generation of the Flex SDK and tools.

When : Friday, May 29th, 2009. 5 PM PST – 10:30 PM PST

Where : Adobe San Francisco Office. 601 Townsend St, San Francisco, CA 94103

How Much : Free and open to the public (Limited space and Registration required)
What to Bring : Yourself, Laptop, any Flex apps you might want to get running with Flex 4. We will provide the Beer, Red Bull, Coffee, Pizza, schwag,  knowledge, venue and bits.

Update! (5/7/09) FlashCamp is sold out now. Sorry if you didn’t act fast enough!

Top hiccups when migrating from Flex 3 to Flex 4

I just sent off a draft today of an article about “Differences between Flex 3 and Flex 4”. It should be going out on Adobe’s Dev Net when we release our first public beta of Flex 4. I was supposed to keep the article between 1500 and 3000 words, but, I couldn’t! There was just too much information to cover. Hopefully, the editors don’t end up chopping it up and it gets to all of you in one cohesive piece.

Anyways, I thought I would highlight some of the things you might run into when you try to compile a Flex 3 application in Flex 4. Note, this will not be a complete list, but, hopefully, I’ll get the majority of big items covered.

1) Default theme has changed from Halo to Spark.

Who will this affect? This will affect just about every Flex application that did not compile with its own custom theme.

What’s the difference? See my last post about the differences between the Spark theme and the Halo theme.  Your application will likely size differently from a different default font, styles not working the same and various other changes.

How do I fix this? The Halo theme is included in Flex 4, so, you can compile with the an additional compiler argument “-theme” and point to the halo.swc in the frameworks/themes/Halo directory of the SDK.

2) Type selectors stop working.
Who will this affect? Applications using type selectors to style components in CSS. Here is an example: Button { color: #FFFFFF};

How do I fix this? Add a default namespace from the top of your CSS definition. Here is an example:

<mx:Style>

@namespace “http://www.adobe.com/2006/mxml

Button {

color: #FFFFFF;

}

</mx:Style>

3) The default preloader changed.

Who will this affect? Applications that are not using a custom preloader.

What’s the difference? The default preloader is not mx.preloaders.SparkDownloadProgressBar. The preloader has not “loading…” text. It has no text at all, just a progress bar.

How do I fix this? If you want the old preloader, you just need to add the following to your root tag: preloader=”mx.preloaders.DownloadProgressBar”

4) Flex 4 only supports player 10

Who will this affect? All Applications compiled in Flex 4.

How do I fix this? If you are using Flex Builder 3 with a Flex 4 SDK to create a Flex 4 project, you will need to change your compiler settings in the property panel. Be sure that your minimum player settings is at least 10.0.0. When you create a new project in Flex Builder 3, the minimum player version is 9.

playersetting

There are many other changes that are minor bug fixes that might affect you. If you have questions about compiling a Flex 3 application in Flex 4… post a comment. Thanks and Good luck!

What styles work on Spark skins?

As  you might begin playing with the Flex 4 framework, you will notice that both the new set of ‘Spark’ components and our ‘Halo’ components that were shipped with Flex 3 have a new look. By default, all of the components in Flex 4 use the ‘Spark’ theme. In Flex 3, we shipped with the ‘Halo’ theme, by default.

If you are a Flex 3 developer, you will notice that the Spark skins don’t support many of the styles that you are used to including border altering styles, corner radius, fillColors etc. Instead, the Spark skins only support a handful of global styles. The include the following:

baseColor: The baseColor usually affect the fill of components like Buttons, Tabs, and the headers. It also affects borders of components like List, TextInput, TextArea and a number of other components.

color: The color style is the same as Flex 3 and affects the color of Text in any component.

focusColor: The focusColor affects the color of the focus ring for all components that take focus.

symbolColor: The symbolColor affects components with any type of icon/symbol. For example, the dot for a RadioButton, check for a CheckBox, and the arrows for a NumericStepper, DataGrid header or ScrollBar.

rollOverColor: The rollOverColor acts the same as Flex 3. It only applies to List components when you roll over items.

selectionColor: This style affects the color of an item that is selected in a List. It also affects the color of the highlight when you select text in components like a TextInput and TextArea. The selectionColor only affects text for the new Spark components, not the Flex 4 components due to some enhancements in player 10.

contentBackGroundColor: This style is similar to backgroundColor. For most components that has a ‘backgroundColor’ style, you would use the contentBackgroundColor style with the Spark skins.

To see how these styles affect the new Flex 4 Spark components, check out this application. For each view tab view, you can change a style and see how it affects various components at runtime.

Demo: StylesDemo.swf

Source Code: StylesDemo.mxml

Note: Most text styles like fontFamily, textDecoration, fontStyle, fontWeight, fontSize etc. still work using the Spark skins.

Compiling in Flex 4 with the Halo theme

I’ve mentioned this in a previous post, but, I’m going to post it again because it probably got buried in a longer post.

In the Flex 4 SDK, we automatically use the Spark theme which you might not want. Many styles don’t work in this theme and you might want to go back to the theme from Flex 3. Flex 3 used the “Halo” theme.

This theme can still be found in the SDK under <sdk dir>/frameworks/themes/Halo/halo.swc. To compile an application in Flex 4 with the halo theme, your mxmlc compile statement will look something like this:

>./mxmlc -theme=../frameworks/themes/Halo/halo.swc