To apply a custom skin to the ActionBar you first have to define a [...]]]> It took me a bit to figure out how to skin the ActionBar in a mobile AIR application so here a short tutorial. There are also two small bugs when you want to skin the ActionBar but there are decent workarounds for now.

To apply a custom skin to the ActionBar you first have to define a skin for the MobileApplication itself.

In the ApplicationSkin.mxml you have to define a ViewNavigator component with the id navigagor:

The ViewNavigatorSkin.mxml contains the push and pop transition, the ActionBar component and the content group.
Due to a small bug in the SlideViewTransition.as you have to set the direction to right on creationComplete:

Finally we can create the ActionBarSkin. There is another small bug so for now you have to define an empty Group at the 1st position.

So right now you have to create 4 different skins to change the dimensions and look of the ActionBar. From an architectural standpoint this looks very clean but having to create 4 skins to just change the height is kind of overkill.
MobileApplication should expose a style to define the dimensions of the ActionBar and should support to set the actionBarSkin right away.

You can download the example project here. The example uses compile-time FXG for the ActionBar background. More on that in a later post.

Since 1.5.3 the publisherID works differently so [...]]]> Now that Adobe 2.0 is released it’s time to update some older apps to use the new APIs.
The process to update seems kind of complicated and definitely worth a blog post. In my special case I am upgrading from an self signed 1.5.2 app to a self signed 2.0 app.

Since 1.5.3 the publisherID works differently so you have to add the publisherID to the XML descriptor like also described here. If you are not using EncryptedLocalStore you might be fine by now but otherwise you get this error when you debug the application: EncryptedLocalStore may not use publisher IDs passed in from ADL

A quick search lead me to add the publisherID to the debug configuration but then you get the error that the publisherID can’t be passed anymore by ADL since 1.5.3, damn.

More research brought me to this forum thread. So it looks like this bug is in the AIR 2.0 final so the only solution is to remove the publisherID from the descriptor while debugging the application. Before packaging the app you then have to add it to not break the update for your users who still have the older version of your app.

Ok, I removed the publisherID and finally could run my app with AIR 2.0, not! My next runtime exception is TypeError: Error #1034: Type Coercion failed: cannot convert flashx.textLayout.formats::TextLayoutFormat@184eb041 to flashx.textLayout.formats.TextLayoutFormatValueHolder.

Solution is to change TextLayoutFormat to TextLayoutFormatValueHolder like here:

var cfg : Configuration = TextFlow.defaultConfiguration;
var normalTLF : TextLayoutFormat = new TextLayoutFormat( cfg.defaultLinkNormalFormat );
cfg.defaultLinkNormalFormat = normalTLF;

to

var normalTLF : TextLayoutFormatValueHolder = new TextLayoutFormatValueHolder( cfg.defaultLinkNormalFormat );

Now I can finally run the app with AIR 2.0 without any runtime exceptions or other errors, uhh!
The TextArea default height seems to have changed though but that’s for another time.

This is still basic functionality but since it’s open source someone may fork and extend it. [...]]]> I have build a little Twitter AS3 library which handles Twitter OAuth authentication and let’s you update your Twitter status. The lib basically uses the OAuth AS3 lib and should be a good example how to use the actual OAuth lib.

This is still basic functionality but since it’s open source someone may fork and extend it. To get a simple idea of the current feature-set have a look at the ITwitter interface.

Further I have build a simple Flex 4 example AIR app which shows things in action. The only thing you need to do upfront is registering a Twitter app to obtain an OAuth consumer key and secret which you have to add to the example:

BTW: You maybe have already granted access to your Twitter account for some apps which you can check here.

Source and Download

Today I am happy to announce that the public beta of FlairLoc is available.

Features

I have build a little AIR client as an example application. Check my YouTubeAS3 project on github for the source code. The example of course uses the Swiz framework.

The meat [...]]]> Today YouTube finally released an ActionScript 3 API. Maybe this was accelerated by the move of Vimeo because they came up with an AS3 API last week.

I have build a little AIR client as an example application. Check my YouTubeAS3 project on github for the source code. The example of course uses the Swiz framework.

The meat is the Player class and the IPlayer interface which wraps the YouTube proxy object. The Player extends UIComponent and implements IVisualElement so it works decent with Flex 4. The original SWFProxy object extends Sprite which is fine for Flash but not for Flex.

If you are to lazy to study the API docs like me this screenshot might help:

Uploaded with plasq‘s Skitch!

The example is still pretty small but I’ll try to extend it when I find some time in the future.

This is quite easy to [...]]]> Recently FlexUnit 4 beta 1 was released. To get started I recommend FlexUnit 4 in 360 seconds and the feature overview. If you are using the Swiz framework and want to apply some changes to provide a patch file you could run the unit tests to be sure to break no features.

This is quite easy to do with the following steps:

• Create a new Flex AIR project: SwizTestRunner
• Download latest FlexUnit 4 and copy the SWCs into the SwizTestRunner libs directory
• Add the Swiz test class path: /../Swiz/src/test/flex
• Add your compiled Swiz.swc as a library
• Copy-n-paste the following into the SwizTestRunner.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	applicationComplete="applicationCompleteHandler()" width="1200" height="640"
	xmlns:flexUnitUIRunner="http://www.adobe.com/2009/flexUnitUIRunner">
 
	<mx:Script>
		<![CDATA[
			import org.swizframework.service.ServiceTestSuite;
			import org.swizframework.autowire.AutowireTestSuite;
			import org.swizframework.factory.FactoryTestSuite;
			import org.swizframework.util.ExpressionTestSuite;
			import org.flexunit.listeners.UIListener;
			import org.flexunit.runner.FlexUnitCore;
 
			private var core:FlexUnitCore;
 
			private function applicationCompleteHandler():void
			{
				core = new FlexUnitCore();
				core.addListener(new UIListener(uiListener));
				core.run(AutowireTestSuite, ServiceTestSuite, ExpressionTestSuite, FactoryTestSuite);
				move(50, 50);
			}
 
		]]>
	</mx:Script>
 
	<mx:TraceTarget fieldSeparator="->" includeCategory="true" includeTime="true" includeLevel="true" />
 
	<flexUnitUIRunner:TestRunnerBase id="uiListener" width="100%" height="100%" />
 
</mx:WindowedApplication>

Now you can run the application and you should see the unit tests being executed:

Uploaded with plasq‘s Skitch!

To get started just have a look at the Swiz unit tests we have build so far. FlexUnit 4 is metadata driven so you should feel home when you use Swiz. We are continually extending our unit test suites but if you find a bug and can prove it with a failed test case you have provided this would be pretty awesome!

You may have followed the [...]]]> For Flex skinning I have usually used Flash with the Flex skinning extension. This is called the stateful approach because you can also add transitions between the states. This worked out fine and the workflow was ok and you ended up in Flex to define the skin via CSS like this:

.myButton{
	skin: ClassReference("MyButton_skin");
}

You may have followed the discussion in March that this approach is CPU intensive because the Button subclasses mx.flash.UIMovieClip which has an enterFrame event listener which decreases the performance of your application.
Bam! What? So the apps I have written in the past could be faster if I would avoid Flash for Flex skinning? Damn! I first tried to use another base class like explained here. However this did not change much so I decided to switch over to stateless skins because they are obviously the fastest solution.

Ok, the app I wanted to refactor had about 15 different buttons and a bunch of other skinned components and almost all need a scale-9 grid to resize decently. Scale-9 grid is easy to define in Flash because you get kind of rulers which you can drag to the right position. For stateless skins you have to define them by setting the numeric value for scaleGridTop, scaleGridBottom, scaleGridLeft and scaleGridRight so you end up with an Embed directive for a toggle button like this:

.myButton {
	up-skin: Embed(source='/../assets/default_up.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	over-skin: Embed(source='/../assets/default_over.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	down-skin: Embed(source='/../assets/default_down.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	disabled-skin: Embed(source='/../assets/default_disabled.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	selected-up-skin: Embed(source='/../assets/default_selected_up.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	selected-over-skin: Embed(source='/../assets/default_selected_over.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	selected-down-skin: Embed(source='/../assets/default_selected_down.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
	selected-disabled-skin: Embed(source='/../assets/default_selected_disabled.png', scaleGridLeft='15', scaleGridRight='134', scaleGridTop='15', scaleGridBottom='43');
}

Yeah, this look looks like a hell of fun to measure and write! Not!

So long story short, this is where FlairSkin comes into play.
FlairSkin is a little pet project I have been working on in my spare time to create stateless Flex skins in a more decent way. This is the first release so expect new features soon. Besides generating embed directives I also implemented a little font browser which also outputs the CSS needed by Flex.
Thanks to Inara for the logo and design!

Install it here:

Screenshots:

Watch a screen video here:

FlairSkin from Sönke Rohde on Vimeo.

After refactoring my app to stateless skins with FlairSkin the performance improvement was very significant so bye bye Flash for Flex skinning at least for now!
One thing I am missing though is that in Flash I can define the registration point meaning around which point a graphic would rotate. In Flash you can simply move the graphic to the right position and I think there is no way to do this with stateless skins so you need to calculate it programatically which can be a pain. So it would be nice if the Embed metadata would support something like this:

Embed(source="foo.png" centerX="20" centerY="10")

where default would be 0,0

Additional Links

• Scale9 in FXG (Flex 4)
• Flex Language Reference