Flex 4

I am starting to get excited about Flex 4. I wasn't excited a couple weeks ago when I saw a demo of some of the features of Flex 4. They had a bunch of code that was generated by Flash Builder. It looked way too easy and the code generated was a few lines of code. I was bummed since our application right now is bloated. I was like if we migrate to Flex 4 do we have to junk all the code we wrote? Well it turns out the migration won't be too bad. The Flex 3 code should work seamlessly with the Flex 4 sdk - this is from the Adobe guys - we'll see if that's true or not :-). I haven't read the following article yet but it helps explain the differences between flex 3 and 4 and how to go about transitioning to Flex 4.

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

Display hand cursor for display object

Just saying useHandCursor=true doesn't do the trick. You have to say buttonMode = true and mouseChildren=false to make this work. I learnt this the hard way.

Images as item renderers

I noticed while creating an image as an item renderer the image was looking a little distorted in the data grid. I thought setting scaleContent to false would help as the default value is true. But that did not help until I set maintainAspectRatio to true. And maintainAspectRatio is true by default but I had to set it anyways. Seems like a bug to me.

I found similar discussion on this here - http://www.mail-archive.com/flexcoders@yahoogroups.com/msg15759.html - they claim it is not a bug.

Tree navigation with view stack

I've been prototyping navigation using Flex tree and view stack. You can do this easily with a ToggleButtonBar, LinkButtonBar by using the ViewStack as the data provider. I haven't seen many examples with a Flex Tree. It turns out that on an itemClick event you can switch views by assigning the selectedChild or selectedIndex of the view stack by doing the following - where the view attribute is an id of a container within the view stack.

public function navigateView(event:ListEvent):void {
var xmlList:XMLList = event.currentTarget.selectedItem.@view;
viewStack.selectedChild= this[xmlList.toString()];
}

Flex Styles

I am reading up on Flex styles tonite for work. Flex has a precedence for the application of styles. From greatest to least

Instance style set with setStyle
Inline style
Class selector set with StyleManager
Class selector set with stylesheet
Type selector set with StyleManager
Type selector set with stylesheet
global styles

You should be able to control styles entirely using css files using class and type selectors.

Flex supports both hyphenated (traditional css) and camel case style property names in css - it converts hyphenated style property to camel case behind the scenes). This should help with having a common css for a hybrid app.

Flex application/component lifecycle

I am amazed by how little documentation there is on this topic. A lot of Flex books hardly touch this subject. I found the O'Reilly book - Programming Flex 3 (http://oreilly.com/catalog/9780596516215/cover.html) - touches on this topic in "Building Custom Components" and "Framework Fundamentals" chapters. I also found a white paper which I thought was useful to get my head around this. The paper can be found here - http://www.developmentarc.com/site/articles/

I like the white paper as it compares the life cycle of Flex components to that of our biological lifecycle - birth, growth, maturity and finally death. I like that they ask you to look at the code in the sdk while reading it. There is also a mention of the "elastic racetrack" concept - the first time I heard about this was when I watched Deepa Subramaniam's talk on Creating new components with Flex 3 and beyond at the MAX conference last year. You can watch it here - http://tv.adobe.com/MAX-2008-Develop/Creating-New-Components-in-Flex-3-by-Deepa-Subramaniam.html#vi+f15384v1002

There are references to Ted Patrick and Sean Christmann's update on this concept in the white paper. I think it is a great read.