Archive for April, 2006

Programmatic Skinning in Flex 2 Beta 2

This example application shows how to skin components using programmatic skins. These are skins which are written in ActionScript. The other type of skins, graphic skins, are images. You can combine the two skins as well as use them separately.

If you open the main application file, SkinningExample.mxml, you will see the <mx:Style> section. When you create skins you typically want all of the controls to have the same look. You may, for example, want only LinkButtons to have your special look, or, as in this example, you want many components to have your look.

You can run the application from this URL:

This application works only with Flex 2 Beta 2 and the Flash Player 8.5 that goes with that release. The source is available from a right-click on the application once you have launched it. I used the application source packaging feature of Flex Builder 2.

Continue reading…

Updated Flickr PhotoSearch for Flex 2 Beta 2

It has been awhile since I last updated the Flickr PhotoSearch application. This new version, for Flex 2 Beta 2, is essentially the same as the previous version, but I changed the experience a little.

In the last version, clicking a thumbnail opened a dialog box with the enlarged image. In this version the gallery of thumbnails resizes to make room for the enlarged image. I also updated the search capabilities to include search by date. You will also have to click the Search button (magnifying glass) after clicking a row in the search history grid. I decided that you might want to add additional tags or other search options before launching the search. Of course once you take the source you can change it back if you wish.

I included with the Favorites panel a slide-show view. There is a small slide icon on the lower left corner of the Favorites panel. When you click it the Gallery turns into a slide viewer.

Once again I made heavy use of states and transitions. If you are having problems with them, take a look throughout the code to see working examples.

In the original Flex 1.5 version of this application I used a Tile with Repeater to build the Gallery and Favorites panels. In the first Flex 2 Alpha 1 version of this application I switched to using a TileList and a renderer. For this version I have switched back to the Tile and Repeater. I found that since I am only grabbing enough images to fill the screen (and not all the images), the performace of the Tile and Repeater were better than the TileList. This was especially true when using a Resize effect during the transition from the full Gallery state to the enlarged image state.

Finally, if you are unsure of what something does, hover your mouse over it and a toolTip should appear.

The source and zip file are now available directly from the program. I used Flex Builder 2’s source code packaging tool. Once the application has started, right click and pick View Source.

Launch the application from this URL: from a browser with the Flash Player 8.5 from the Flex 2 Beta 2 site at Adobe Labs

I will try to keep this application more up-to-date as Flex 2 evolves.

This application is compatible only with Flex 2 Beta 2 and the Flash Player 8.5 that accompanies that release. If you have any other version of Flex 2 you will need to recompile (and possibly change) the source code to work with your Flash Player 8.5

A List itemRenderer using States and Transitions

Here’s a little demo of how to expand a list item in place. This demo uses CheckBoxes for the itemRenderer, but when you click a box, the list item grows larger revealing more data.

The itemRenderer is actually a Canvas with a CheckBox for a child. The itemRenderer uses states. The initial state contains this CheckBox. The “expandedState” contains a List. A transition is used to hide and show the list by using a Resize effect.

The List must have variableRowHeight set to true, otherwise this won’t work.

Compatable with Flex 2 Beta 2 Public release. Bear in mind that Flex 2 is in beta and changes will occur before the final release.

Continue reading…