Simeon Says

Just a reminder that while the world is running out and updating to flash player 10 on its release date, we developers need a little more. If you do the standard upgrade and then try to debug an application from flex builder you might just see this run little message.

In order to be able to debug your applications you need to make sure you get the Debug version of the player. Its not currently listed on the download page, but the main download link there will get you what you need. But just in case you can’t find it or if you need to roll back, Adobe has a technote which includes current and past versions of Flash Player.

I posted last week about how the namespaces had been altered in Flex 4 using the gumbo components. The problem with posting detailed information about a product that is so early in its life-cycle is that large changes can be made in the wink of an eye.

An example of this is that while the earlier version of the sdk separated the language namespace and component namespace, those items have now been combined. So just like with flex 3 you must only specify the language URI to access all of the components in the language, halo, and gumbo namespaces.

My previous example has been updated below.

1
2
3
4
5

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009" >
	<FxButton label="Gumbo Button"/>
	<Button label="Halo Button" />
</Application>

As you can see with the namespace prefixes removed there was a class name conflict between the Buttons in halo and gumbo. As a solution all of the gumbo components have now been named Fx[classname]. FxButton or FxCheckbox for example.

I hope this may help clear up some confusion around my previous post. It appears my timing could not have been better. No sooner had I written my post about the namespaces… they changed.

If you have started working with Flex 4 you may have gotten frustrated by the problems with layouts. At first glance I thought there was something wrong, I placed it as a work in progress bug and moved on. But then I started looking at the actual error I was presented with when I used layout=”Vertical”

“Initializer for ‘layout’: values of type flex.layout.LayoutBase cannot be represented in text.”

So I thought about it for a minute, and realizing that the layout tools have been re-factored to allow for new types of layouts beyond the standard three (Vertical, Horizontal, Absolute), I thought maybe it wanted a reference to a class. So I set the layout value equal to “{flex.layout.VerticalLayout}” knowing that was the package path to the vertical layout class. Which got me the following error:

“1067: Implicit coercion of a value of type Class to an unrelated type flex.layout:LayoutBase.”

This made me feel like I was getting closer. But I was passing a class and it really wanted an object. So then i sent in a new instance of VerticalLayout using layout=”{new flex.layout.VerticalLayout()}” And finally I had success!

The layout property of the ItemsComponent object ( which Application and Group are sub-classed) expects and Object. A real instantiated object with properties and all. So knowing that little tid be we have 2 options at this point. We can declare the layout using the ActionScript I described above, or we can use a nested node attribute.

I have provided an example of both below. The Application tag uses the ActionScript implementation and the Group element uses the node attribute method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?xml version="1.0" encoding="utf-8"?>
<Application layout="{new mx.layout.VerticalLayout()}" 
	xmlns="http://ns.adobe.com/mxml/2009" >
 
	<Declarations>
		<SolidColorStroke id="redStroke" color="0xFF0000" />
		<SolidColor id="whiteFill" color="0xFFFFFF" />
		<SolidColor id="blackFill" color="0x000000" />
	</Declarations>
	<Group>
		<layout>
			<HorizontalLayout />
		</layout>
		<Rect width="200" height="50" stroke="{redStroke}" fill="{whiteFill}" />
		<Rect width="200" height="50" stroke="{redStroke}" fill="{whiteFill}" />
	</Group>
	<Group>
		<layout>
			<HorizontalLayout />
		</layout>
		<Rect width="200" height="50" stroke="{redStroke}" fill="{blackFill}" />
		<Rect width="200" height="50" stroke="{redStroke}" fill="{blackFill}" />
	</Group>
 
</Application>

So that is the trick with working with layouts in Flex 4 Gumbo. Go forth and play your heart out. And if you ware wondering what the Declarations tag is then tune in again soon for my post on the new language namespace changes in gumbo and how to assemble your components.

I grabbed the KINK Live 11 album at my local Starbucks last week. The album is a set of acoustic studio recordings from artists that have played in the KINK Live Lounge. I bought the album because it had some of my favorite songs and I love acoustic music. But I have also really enjoyed several of the songs on the album I was not familiar with. Specifically “Car Crash” by Matt Nathanson. Now you might be thinking that the title of that song sounds pretty dreary, but if you listen it’s even worse :) But for some reason I have attached myself to the lyrics of this song as if they are a metaphor for my current life, and its become my theme song.

As I have mentioned on my blog before, I am transitioning from full time employment to running my own business. My conversion to full-time freelancing should be complete before the year is over. This is a scary and exciting time for me. I get such a rush every time I have a small succcess, be that an application that the client loves, or even just securing a new lead. The song starts off with the lyrics “I’m wide awake and so alive. Ringing like a bell” And when I hear this I can’t help but feel like its talking about me, I am so alive with excitement about the prospects in front of me that I can hardly keep still sometimes. The song continues “Tell me this is paradise. And not someplace I fell. ‘Cause I keep on fallin’ down” which outlines my fears about running my own business. Is this really as great as it seems? or am I just missing the signs that should alert me to oncoming disaster. And god knows I have seem my share of mistakes and mishaps.

The chorus of the song continues “I wanna feel the car crash”. When I say this out loud it sounds crazy. But I see this more of wanting to accept the disaster that is right in front of me. And in these times of economic trials, what could be more of a disaster than giving up a full-time job with great benifits? “I wanna feel the capsize” defines that I am ready to accept the gravity of my self imposed disaster. And “I wanna feel the bomb drop, the earth stop. Til I’m satisfied” describes that I have accepted what this “disaster” could bring, but that I am ready to feel it and get it done with. “I wanna feel the car crash. Cause I’m dyin’ on the inside” I have been employed by the same company for 5 years, and I have been working on the same projects for nearly 9 years. During that time I feel like desire to solve the same types of problems over and over has waned. I feel like if I am not excited to be getting it done every day then I am slowly letting myself go. I am very excited by the prospect of working on new projects with different companies. “I wanna let go and know. That I’ll be alright, alright” I am ready to let go of the saftey and security of my day job and having already survived the “bomb drop” feeling, I will know that I am alright. I am very excited about the opportunity to work as a freelance developer, consultant and trainer. I want to share what I have learned and I want to help as many as I can.

The next verse I will summarize in whole “Just push me ’til I have to fly. I’ve shed my skin, my scars. Take me deep out past the lights. Where nothing dims these stars. Nothing dims these stars” I am ready to take on the challenges that will cause me to really test myself and push my limits. There are obstacles I will have to overcome, but I think I can really shine. I am ready to make a name for myself and become a player in the community at large. Building a business for myself benefits the entire developer ecosystem. I am ready to fly.

I suppose anyone can take what they want from a song or a poem. I just feel so charged every time I hear this song and I wanted to share this experience with you. Thanks for letting me talk about my personal trials and challenges here on this blog. Please enjoy the song via the imeem player below.

[UPDATE: Much of what I discuss here is still relevant but in a recent update to the sdk the namespaces have all been combined. Please follow up this post with the update. Please don't try to run the code from this post. View the updated code here.]
In a previous post I showed you how to get Flex Builder set up for building applications using Flex 4 (Gumbo). With your development environment ready, there are some fundamental changes to the namespaces used in developing flex applications that you should be aware of. And while these changes are all for the better, they do add some tricky complexity to the task at hand: building flex applications with gumbo.

When developing applications with the Flex 3 the standard namespace has always been “http://www.adobe.com/2006/mxml” used with a prefix of mx. While it appeared the purpose of this was to allow us to specify the version of flex to the compiler, this was not what was really happening was behind the scenes. While this is not completely wrong, the compiler used that string (not really a url) to look up the correct manifest file. The manifest file provided a one-to-one mapping of tag names to component implementations. There was a problem with this however, because not all tags used in mxml documents have a corresponding ActionScript implementation. Tags like < mx :MetaData />, < mx :Binding /> and < mx :Model /> are tags that are language tags. These tags represent items that need to be handled in a specific way by the compiler. Because the tags used in the language namespace and the component namespace were combined in Flex 3 you may never have known there was any difference between the two. And you really did not need to for normal Flex 3 development.

One of the primary goals of the Flex 4 SDK is backwards compatibility with the existing Flex 3 applications. What this means is that while there are many improvements already begun and more in the pipeline, none of those can break existing functionality. Because some of the new code updates existing classes (Button for example), we need to separate the component namespace from the language namespaces. Because while we can use multiple component namespaces at the same time ( mx and your custom component namespace for example in flex 3) you can only have one language namespace declared.

Because of this change you can now declare the language namespace for flex 4 as “http://ns.adobe.com/mxml/2009″ and then use the new library URI’s to reference the halo (flex 3) and gumbo (flex 4) component frameworks as “library:adobe/flex/halo” and “library:adobe/flex/gumbo” respectively. For convenience sake the gumbo library is also included in the mxml 2009 language namespace.

1
2
3
4
5

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009" xmlns:gu="library:adobe/flex/gumbo" xmlns:mx="library:adobe/flex/halo">
	<gu:Button label="Gumbo Button"/>
	<mx:Button label="Halo Button" />
</Application>

So if the gumbo component namespace is included in the language namespace for flex 4 why would you include it separately? Well the first reason is a matter of clarity. Since you can use either halo or gumbo and you can mix and match, then specifying your component namespace serves to disambiguate those components in question. This also allows the developer to see a clear line between what components are implemented in ActionScript and which are provided for compile time tools. The second reason is actually purely for the developer. If you specify the gumbo namespace then Flex Builder will provide code completion for your tags. While your code will compile and run, Flex Builder will not provide code completion for the components when you only specify the language namespace for mxml 2009.

The separation of the language namespace and the component namespaces also allows for upgrades of the two separately, which may seem unnecessary, but so did release flash player without the Flash IDE at one point. But now we know that the separate entities can prosper on their own, and this opens the doors for external tools to work in the language namespace with much greater freedom.

Tune in soon for another post on the new elements in the language namespace and how they effect the development of your applications.

In order to start playing with the code in gumbo, you need to get the source for the framework from the Adobe Open Source Website. From there you can add it as an available Flex SDK in Flex Builder and start to play with the code.

Mike Chambers has a good blog post on how to set this up, but I have also prepared a screencast to show you how to set this up.

Full Size Video Here

The final code for this demo looks like this.

1
2
3
4
5

< ?xml version="1.0" encoding="utf-8"?>
<application xmlns="http://ns.adobe.com/mxml/2009" xmlns:mx="library:adobe/flex/halo" >
	<mx :Button label="Halo Button" />
	<button label="Gumbo Button" />
</application>

Note. The Application and Button tags above should be upper case, but every time I save wordpress lowercases them. Show Just know that < Application /> and < Button /> are references to classes.