One such an improvement is the fact that you can now create your own custom components with skin parts in Flash Builder and use that component in the HUD (Heads-Up Display) in Flash Catalyst. That means that you’re no longer only working from Flash Catalyst towards Flash Builder, but you can go the other way around as well. Let me show you how.

First, you need to create a Flash Catalyst Compatible Project, which is just another option from the File > New menu. In the project you have to create an ActionScript Skinnable Component, which can again be found in the File > New menu. When you do this, make sure that you have the Generate Comments option checked in the popup dialog, because it will help you a lot in creating your first components.

In the ActionScript file, you define a couple of skin states using the [SkinState] metadata tag. In this example, we are going to create an “open” and “closed” state. Then you also need to define the skin parts. This is done by using the [SkinPart] metadata tag. Optionally you can make skin parts required by defining the metadata tag as follows: [SkinPart(required:"true")]. When we define a button, text input field and a label in the skin, the resulting file will look like this.

package
{
	/* For guidance on writing an ActionScript Skinnable Component please refer to the Flex documentation: 
	www.adobe.com/go/actionscriptskinnablecomponents */
 
	import spark.components.Button;
	import spark.components.RichText;
	import spark.components.TextInput;
	import spark.components.supportClasses.SkinnableComponent;
 
 
	/* A component must identify the view states that its skin supports. 
	Use the [SkinState] metadata tag to define the view states in the component class. 
	[SkinState("normal")] */
	[SkinState("open")]
	[SkinState("closed")]
 
	public class MyCustomComponent extends SkinnableComponent
	{
		/* To declare a skin part on a component, you use the [SkinPart] metadata. 
		[SkinPart(required="true")] */
		[SkinPart(required="true")]
		public var input:TextInput;
		[SkinPart(required="true")]
		public var button:Button;
		[SkinPart(required="false")]
		public var label:RichText;
		[SkinPart(required="true")]
		public var resizeButton:Button;
 
		public function MyCustomComponent()
		{
			//TODO: implement function
			super();
		}
 
		/* Implement the getCurrentSkinState() method to set the view state of the skin class. */
		override protected function getCurrentSkinState():String
		{
			return super.getCurrentSkinState();
		} 
 
		/* Implement the partAdded() method to attach event handlers to a skin part, 
		configure a skin part, or perform other actions when a skin part is added. */	
		override protected function partAdded(partName:String, instance:Object) : void
		{
			super.partAdded(partName, instance);
		}
 
		/* Implement the partRemoved() method to remove the even handlers added in partAdded() */
		override protected function partRemoved(partName:String, instance:Object) : void
		{
			super.partRemoved(partName, instance);
		}
 
	}
}

Once you’ve completed the ActionScript Skinnable Component you then have to export the project by choosing Project > Flash Catalyst > Export Flash Catalyst Project. In Flash Catalyst you then have to open the FXP file to work on the project. Then you create some graphics to represent the component. You may end up with something like this.

The next step is where the magic happens, because when you select all of the graphics and you look in the HUD, you’ll notice that you can now convert those graphics into a Skinnable Component. This is the last option in the conversion dropdown. Once you’ve selected that option you’ll get a popup dialog which allows you to choose which component if you have more than one skinnable component available.

In this dialog you also have the option to load an FXPL library project in case the component you want is not yet loaded into the project. But since we’ve created the component inside of the project, we’re already having the component available. So, select that custom component and click OK. Once you’ve done that, you’ll notice that Flash Catalyst indicates that the component still needs some work, since you need to indicate all of the different skin parts you’ve defined earlier in Flash Builder.

Digging into the component, you’ll also notice the two skin states you’ve defined earlier on as well, which allows you to work with these different view states for your custom component. Now, assign the different skin parts and make some changes to the closed state to have two distinct states. For example, you can remove the label, resize the colored rectangle and change the label of the resize button in the closed state. Don’t forget to capture the click on the resize button to change view states at runtime.

As a final step, you just have to save the project and import it again in Flash Builder. You can overwrite the existing project now and when you run it, you’ll notice that the component is fully functioning now, as you can see below. Just hit the resize button to see it in action.

When creating AIR applications, you often create custom components, which you place in separate packages to help organize the structure of your project. And every once in a while you will also create a custom component that extends the WindowedApplication class, for example to create an application that automatically updates itself when a new version becomes available. such a component would look like this:

public class AutoUpdater extends WindowedApplication {
 
  private var appUpdater:ApplicationUpdaterUI;
 
  public function AutoUpdater() {
    super();
    appUpdater = new ApplicationUpdaterUI();
    addEventListener(FlexEvent.APPLICATION_COMPLETE, startAutoUpdate);
  }
 
  private function startAutoUpdate(event:FlexEvent):void {
    appUpdater.configurationFile = new File("app:/updateConfig.xml");
    appUpdater.isCheckForUpdateVisible = false;
    appUpdater.isDownloadUpdateVisible = false;
    appUpdater.isDownloadProgressVisible = false;
    appUpdater.addEventListener(UpdateEvent.INITIALIZED, autoUpdateInitialised);
    appUpdater.initialize();
  }
 
  private function autoUpdateInitialised(event:UpdateEvent):void {
    appUpdater.checkNow();
  }
}

Now, you can simply extend your new application from this AutoUpdater class by declaring it as the root tag of your main application file. However, in Flash Builder 4 this generates an error, as shown in the picture below.

In this screenshot you notice there are two errors, since for my project I also created another custom class which implements the URL monitoring system as well, on top of the automatic updates. Apparently the compiler expects each application to have its own XML configuration file, even though those components are not the actual starting point for your application.

To solve this problem you simply have to go to the project settings dialog. In that dialog you go to the “Flex Applications” part by selecting it on the left side. Within that section you can see each application within your project – yes, a single project can contain more than one applications.

You can notice that the AutoUpdater class (and in my case the MonitoredAutoUpdater class as well) is flagged as an application. Just select that application and click the “Remove” button. This will not remove the file from the project, but instead it just removes the application flag. And because the compiler will no longer recognize it as an actual appliaction, it will not search for that XML configuration file anymore, thus solving your problem.

• Data/Services panel to allow a very easy connection with different kinds of back end technologies such as ColdFusion, Java, PHP and HTTP services.
• Automatic Data Transfer Object (Value Object) creation based on the return types of the services
• Drag & drop attachment of data to visual components
• Enhanced refactoring support
• Code generation of getters and setters
• Network traffic monitoring
• Enhanced memory profiling support
• …

I’ve been working with the prerelease versions for quite some time now and I must say I’m pretty found of the new features they’ve put in there. In short, this is one release you want to upgrade to as soon as possible. So, go ahead and point your browser to http://www.adobe.com/products/flex/ and download the latest version.

As second important release is ColdFusion Builder. In the early days you had ColdFusion Studio, but other than that, there was no real specific ColdFusion IDE available. So developers had to work with Dreamweaver and open source Eclipse plug-ins such as CFEclipse. But now, there is finally another new and improved ColdFusion IDE available and it’s called ColdFusion Builder. It is also based on Eclipse, which means that you can either install it as a stand-alone version or as a plug-in on top of your existing Eclipse installation. That means that you can also write your own extensions for ColdFusion Builder to help you (and other developers) write code a lot easier. You can have extensions for code snippets, templates, query generation etc. You even have an extension to help you write your own extensions!

This is similar to what you can do with Flash Builder as well, so if you’re a Flex developer and you also use ColdFusion as back end technology, you might be better off integrating both development environments into the same IDE. That can save you a lot of time not having to switch tools all the time. Just go ahead and download it at http://www.adobe.com/products/coldfusion/.

The last release of today is the Flash Platform Services for Social Network Integration. Wow, now that’s a term to remember. But what the hell does it mean? Well for starters it means that Adobe is making life simple for people who want to connect their Flash applications to social networks. The Social service has the following benefits:

• One API connects your application with multiple social networks
• The service adapts to social network changes so you don’t need to recompile your application
• Multiple pricing plans available

The social service consists of three parts:

• A simple ActionScript 3 API, which can be implemented in Flash or Flex and aggregates the different social network APIs, including Facebook Connect
• Plug-and-play widgets that use the social API for login, share, invite, select friends and other commands
• Dashboard analytics for reviewing and optimizing your social performance

Now, what does all that mean? Well, it means that you no longer have to worry about the ever changing Facebook or Twitter APIs, because the Social services will take care of the for you. You just write your code against the Social services API and the changes in the network services such as Facebook or Twitter are being monitored by Adobe and Gigya to make sure your applications don’t break when a new API is released. If you want to know more about this, you can always look at http://www.adobe.com/devnet/flashplatform/services/social/.

So, I must say that today is a very big day in my professional life, since I’m working with both Flex and ColdFusion. From now on, life as a Flex developer is going to be a lot easier…

Every once in a while you get the chance to meet with him at some ColdFusion event, but not often in Belgium. Well, here’s your chance now, because on March 9, 2010 he’s coming to Liege/Luik in Belgium. This event will not be about ColdFusion alone. There will alo be presentations on Flash Builder 4 and AIR 2.0. Tickets are free, but seats are limited, so hurry up and secure your seat at http://rialiege.eventbrite.com/.

I hope to see you guys there…

Hey guys,

I know it has been rather quiet on my site lately. The reason for this is the fact that I’m currently writing a book. Now, what is it going to be about? Some of you may know this already by reading my Twitter posts or by following my LinkedIn status messages. For the others, I can say for now that it is about Flash Builder and Flash Catalyst and how those products are going to change the way you work on Flex projects as a developer. As a designer (or interaction designer) you are going to be more closely involved in creating and maintaining Flex 4 applications when using these products.

So, basically, it is not going to be a manual about Flash Builder, nor is it a manual about Flash Catalyst. But it is a guideline with general best practices and designer-developer workflow situations, explained in a very practical way.

You can now already pre-order the book on Amazon.com or by clicking on the cover image. Don’t mind the cover image for now. This is just a preliminary image, which will change by the time it is going to be released. The release date should be somewhere around April 2010.

Hopefully, you’ll like it…