More Flex 4 and the Boy Who Cried EPIC FAIL!
In my last post I demonstrated how easy it is to migrate a Flex 3 application to Flex 4, but it seems that a few people weren’t satisfied – well, maybe just one person. Aral was kind enough to comment on my post, and amongst the fun and games he reminded me that I need to add spark components to my application. Thanks Aral. I guess I did promise that after the migration people would be able to use all the cool new features and components, but I didn’t go into a lot of details. However Aral’s blog does have information on what I might expect when I start to use spark components.
Simply compiling a Flex 3 app with the Flex 4 SDK is not migration. Refactoring your Flex 3 application so that you can enhance it with Spark components is not trivial and that’s the definition of migration that we need to adopt as that’s the real-world use case for migration (it doesn’t matter whether or not you can compile your Flex 3 app with the Flex 4 SDK if the first Flex 4 feature you’re going to use is going to require a far more extensive refactoring of your codebase to migrate it to a Flex 4 project utilizing both libraries.)
Ouch, looks like I got called out! To summarize, if I were to enhance the migrated Flex 3 application from my previous post with Spark components I should begin to feel the pain of Aral’s real-world migration. In fact I’m promised that the task is not trivial and that the first Flex 4 feature I use will require far more extensive refactoring than the previous demo. Sounds scary. Let’s see.
Setup
Taking the application from my previous post, I’m just going to add some mock data for the TestControl to use. Notice that nothing else changes in the application file throughout the demos.
SparkTest.mxml
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:test="com.test.controls.*" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
]]>
</mx:Script>
<mx:Style source="//assets/css/global.css" />
<test:TestControl left="0" right="0" top="0" bottom="0"
data="{new ArrayCollection(['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5'])}" />
</mx:Application>
Spark Components
I read in the online documentation that all the spark components are in the namespace “library://ns.adobe.com/flex/spark”. I think that’s pretty handy because I get code hinting and I’m not left to guess at what the new stuff is (especially if it’s named inconsistently), but I’ll let you try it out and see what you think.
The plan is to declare the namespace and then use a new spark component just like I would with any other library. I’m going to try out the List component first, because I’m really excited to see how the layouts work.
TestControl.mxml
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:spark="library://ns.adobe.com/flex/spark">
<spark:List dataProvider="{data}" horizontalCenter="0" verticalCenter="0" />
<mx:Button label="Flex 4 Rules!" right="10" bottom="10" />
</mx:Canvas>
So, I just recompile and wait for the trail of errors and namespace hell which is promised to ensue – and… and my app runs. It doesn’t just compile, but it functions with the Spark List component running as advertised. That’s because FLEX 4 (SPARK) COMPONENTS WORK IN YOUR FLEX 3 CODE! I’m starting to think it’s not my definition of the word migration that needs help, but my understanding of the word trivial. I should keep digging though – just in case.
Flex 3 States and Spark Components
At this point I’m totally outside of the namespaces argument, but a lot of Aral’s migration headaches seem to revolve around the idea that you need to port all of your Flex 3 states to the new Flex 4 state syntax. I’ll try to recreate this requirement by adding states to my custom component and seeing what breaks. I’m even adding a Spark transition just for fun.
TestControl.mxml
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:spark="library://ns.adobe.com/flex/spark">
<mx:states>
<mx:State name="vertical" />
<mx:State name="horizontal" enterState="animation.play()" >
<mx:SetProperty target="{list}" name="layout">
<mx:value>
<spark:HorizontalLayout />
</mx:value>
</mx:SetProperty>
</mx:State>
</mx:states>
<spark:Resize id="animation" target="{list}" widthTo="500" />
<spark:List id="list" dataProvider="{data}" horizontalCenter="0" verticalCenter="0" />
<mx:Button label="Flex 4 Rules!" click="this.currentState = 'horizontal';" right="10" bottom="10" />
</mx:Canvas>
You know the routine – but wait, I’m sure it only works now because the root tag is a halo component. Maybe if I tried to use the old state syntax inside of a spark component I would find hours of torturous migration pain.
Flex 3 States IN Spark Components
I’ll use the new Group component as my container instead of Canvas. I have to put my child components in the mxmlContent property since I’m still using the old mx namespace to compile language features (such as states). I also added a “data” Object since Group doesn’t normally have that property.
TestControl.mxml
<spark:Group xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:spark="library://ns.adobe.com/flex/spark">
<spark:states>
<mx:State name="vertical" />
<mx:State name="horizontal" enterState="animation.play()" >
<mx:SetProperty target="{list}" name="layout">
<mx:value>
<spark:HorizontalLayout />
</mx:value>
</mx:SetProperty>
</mx:State>
</spark:states>
<mx:Object id="data" />
<spark:Resize id="animation" target="{list}" widthTo="500" />
<spark:mxmlContent>
<spark:List id="list" dataProvider="{data as IList}" horizontalCenter="0" verticalCenter="0" />
<mx:Button label="Flex 4 Rules!" click="this.currentState = 'horizontal';" right="10" bottom="10" />
</spark:mxmlContent>
</spark:Group>
Still working! Wow. So, I can use all the Spark components and Effects anywhere without changing the state syntax. What feature’s left that would require me to change my state syntax? Well as far as I know the only feature that requires the new state syntax is the new state syntax. So, ummm.. If you want to change your component to use the new state syntax, then you do have to change your component to use the new state syntax. You don’t have to do it throughout your application all at once though. Just like in this example you can try it out in a single component and leave the rest of your application just as it was. Your call.
Flex 4 States
To use Flex 4 states I’ll need to change the language namespace to “http://ns.adobe.com/mxml/2009″. After the language namespace change I’ll have to put non-component declarations in the “Declarations” tag, and child components are assigned to the mxmlContent property automatically. Notice that I can still use the “library://ns.adobe.com/flex/halo” namespace to use all my standard Halo components just like I would before.
TestControl.mxml
<spark:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:spark="library://ns.adobe.com/flex/spark"
xmlns:halo="library://ns.adobe.com/flex/halo">
<spark:states>
<spark:State name="vertical" />
<spark:State name="horizontal" enterState="animation.play()" />
</spark:states>
<fx:Declarations>
<fx:Object id="data" />
<spark:Resize id="animation" target="{list}" widthTo="500" />
<spark:HorizontalLayout id="horizontal" />
</fx:Declarations>
<spark:List id="list" dataProvider="{data as IList}"
layout.horizontal="{horizontal}" horizontalCenter="0" verticalCenter="0" />
<halo:Button label="Flex 4 Rules!"
click="this.currentState = 'horizontal';" right="10" bottom="10" />
</spark:Group>
Conclusion
Let’s review. FLEX 4 (SPARK) COMPONENTS WORK IN YOUR FLEX 3 CODE! Flex 3 (Halo) components work in your Flex 4 code. Flex 3 states work in your Flex 4 Code. Flex 4 states actually work in your Flex 3 code. Everything kind of works everywhere. There is no need to “port” your code to start using spark components. Again, I just don’t know how else to say it – but you don’t have to take my word for it. Download the latest Flash Builder 4 Beta and try it out for yourself!
Tags: FX Prefix
Ben Stucki
BenStucki on Twitter
Ben Stucki on XBox
Subscribe to RSS
mail@benstucki.net
Great post! Really shows how much time was spent making sure Flex 4 is backwards compatible with Flex 3.
Instead of Aral just complaining that “namespaces are hard” he needs to put in the same amount of effort and show some real examples to back up his rants. Especially if he is going to go as far to say that Flex 3 to Flex 4 migration is an epic fail.
Really great post Ben.
I would second Ryan’s comment above too!
I really cant see Aral’s argument. Perhaps he was just having a bad day.
Thanks, Ben. Nice to see Flex 4 is going to be an easy transition (err, migration!). Very curious to see what Aral is all worked up over. Perhaps this is something along the lines of SWX (much ado about nothing?).
I’m really interested in how much adding say one Spark control to an existing Flex 3 application will affect SWF size, and things among this nature. That’s even more important to me than this dealing with states.
You should add some styles for the Spark List too. I think one of Aral’s big problems was related to namespaces in stylesheets. It should be easy though. Give the Spark components a separate css file, and if I remember correctly, each file can have its own default namespace.
I think its probably worth mentioning for those that don’t know, that for a little while (and not that long ago), it really was impossible to migrate. I made a post in the pre-release forum about a month ago that expressed my serious concern about it being impossible to port most of my Flex 3 projects over to Flex 4… I got error after error until it finally crapped out with an “internal build” error of type “unknown”; or, more often than not, it wouldn’t even accept the project as a legitimate Flex project at all! The only consistency between these projects was that they all used either a component or a library that was built in Flex 3 (eg. efflex, Doug McCune’s 3dcarousel, etc…). It wasn’t until the namespace issues changed back from prefix to namespace that these problems pretty much went away. So in Aral’s defense, and knowing that he spent a lot of time on the pre-release, I could personally understand how it could have been really easy to “vent” as soon as something went wrong if it was perceived at first that the past issues were still unresolved.
Furthermore, nobody seems to have acknowledged the fact that the debate took a significant turn, and I’d strongly suggest reading through all of the comments on the initial post and then looking at the post that was made afterward.
Nice Ben
Ben, thank you for this write up. Regardless of anything else, this post and the previous one should prove good references for anyone migrating to Flex 4.
That said, I actually find your example to be a perfect example of the additional complexity in Flex 4. In this simple example alone, you go from one language namespace to another, change from mx:Object to fx:Object, add a Declarations tag, use spark:mxmlContent and potentially create two separate ways of using states in your application (if you happen to migrate to the new syntax at some point). All this is easy to follow when presented logically in a blog post with a sample application that has only several lines of code but even here there are actually quite a number of manual changes being applied. Personally, I still fail to see how this is a trivial migration process and how this is going to help with the maintainability of the app. And I also fail to see how having a tool to migrate existing Flex 3 apps to Flex 4 can be seen as a bad thing.
All that aside, I’m happy that you’ve written up these posts as – our playground horse-play aside – they are very useful references.
@Troy: Thanks for saying that SWX is “much ado about nothing”. It’s always good to have such positive comments about community-run open source applications that some of use donate our time to. I’m sure that people who have successfully used it to create their Flash Lite and Flash apps will disagree with your sentiment.
@Aral Isn’t the point of this blog post that you can use the spark components in Flex 3? That there isn’t much migration problems from Flex 3 to Flex 4…
[...] library of your choice. However the beauty of this is that MXML 2006 and MXML 2009 languages can be intermixed when using the Flex 4 SDK. The primary note to take away with theme 1 is the version of the framework you use is no longer as [...]
Hi Ben,
Thank you for these posts. I have loaded up FB4 and want to use it but a couple of questions came to mind. I am about to import my Flex 3 project. It is a Flex 3 project, uses SVN (Subclipse), has project references to other Flex 3 library projects.
Here are my thoughts on it,
- If I import my Flex 3 project into FB4 will FB3 be able to open my project again if I need it to?
- If that works will it mess up my workspace settings?
- If I make a copy of my Flex 3 project and import the copy into FB4 it could in my mind still corrupt the original project since the .project and workspace files contain absolute paths?
What I’m trying to get at is how would you bring your Flex 3 projects into FB4 and how would you create a backup?
EPIC WIN OP!
The Adobe Labs page answers some of these questions:
You can install a separate copy of Flash Builder 4 standalone and it will remain separate from any Flex Builder 2 or 3 installations. Also, workspaces created in Flex Builder 2 or Flex Builder 3 are not supported by Flash Builder 4. Lastly, Flash Builder 4 can import existing Flex Builder projects, but a project that has its settings modified by Flash Builder 4 will no longer open in Flex Builder 3 or Flex Builder 2.
I had downloaded it distro from the beta so I didn’t see this information before. I’d still be curious to know how you setup your workspace and migrate your projects. For example, if you’d create a new FB4 workspace and import the original FB3 project, a copy of the project or if you create a new one and copy the MXML page content manually. I was going to say copy and paste the MXML files but apparently you can’t paste mxml files into the new package explorer. (Copy in Finder and Paste in FB4 Package Explorer)
Since no one else is saying it… A “confidential” Flex 4 Features and Migration guide is NOT located at this URL, http://livedocs.adobe.com/flex/gumbo/flex_4_featuresandmigration.pdf . Do NOT follow that link because nothing is there. :P
Linked to from here,
http://labs.adobe.com/wiki/index.php/Flash_Builder_4:Release_Notes
[...] There has been some debate about whether the migration to Flex 4 is an epic fail or a breeze. As often, the truth is somewhere between. Here is my experience with porting BlocStac.com, an [...]
Great post!
I´m just glad to get to know new things and that is already very good. Thanks for the info, thanks also to the other posts, thay have already clear up my doubts.
I’m sharing Aral’s concerns. I’m not saying that it is impossible to migrate code from Flex 3 to Flex 4 nor that it is impossible to mix Halo and Spark components. But I tried and I’m still trying…
I’m probably a crappy coder but I find that lots of thing changed, not only you have to adapt many parts of your existing code (for example replacing layout=”" attributes by , changing events name like the ‘change’ event who disappeared from dropdownlist by ‘close’, the RadioButtonGroup which has to be in a part ) but I banged my head against the wall on some issues : borderMetrics no more available in spark’s Panel, setChildIndex method which has to be replaced by setElementIndex but then addChild, numChildren method/properties are useless and the code has to be rewritten…
To sum up, it seems to me that I will have to start over my application from scratch using spark components. Again I’m surely a bad coder but as bad as I may be, migration from Halo to Spark wasn’t just about switching namespaces and in my case it’s gonna a be a pain in my crack.