But for now, she’s not getting hold of the device, because I want to try several things out. And one of those things is the real cross-device development using the Flash Platform. In my case, that means Flex of course. That’s what I’ve be doing for the past couple of days and I must say it’s really working once you get the procedure down. That’s the tricky bit for now, so let me take you through my struggles and maybe I can save you from making the same endeavors as I needed in order to get it working.

Setting up the development environment

This is the first part you’ll have to go through. Blackberry has issued a tablet OS SDK, which is a plugin for Flash Builder that allows you to compile applications for the PlayBook directly from within Flash Builder. While this all sounds great, the latest releases of that plugin do not support Flex Mobile applications. That means you cannot use that SDK to compile your Flex Mobile application. You can only work with ActionScript Mobile application.

A second issue is the fact that the SDK is installed on top of an existing Flex 4.5 SDK and without giving away too much information, it is not compatible with all Flex 4.5 SDKs, so compiling and packaging the application from within Flash Builder is not possible with the latest versions. Hopefully BlackBerry will release another version of their SDK this is compatible soon.

Taking these two issues into accounad the fact that as a Flex developer I want to use a Flex Mobile project, I’ll have to package the application using the command line.

Compiling and packaging the application

Since the option of compiling directly for the playbook is not possible with the latest builds, I’ve used a little shortcut to get the release build of my application. I mean, if you’re working on a Flex mobile application and you compile using Flash Builder, you can only opt for the Android APK file. There is no release build that gives you the release version of the SWF file.

So that’s exactly what I’ve done. Then I unzipped the APK file and searched for the release version of my SWF file and used that to package my BAR file. The command to do the packaging is as follows

blackberry-airpackager -package <BAR file> <application>-app.xml <application>.swf blackberry-tablet.xml <assets required by the application>

Signing the application

Once you have the BAR file ready you have come to the trickiest part: signing the application. This is best done via command line again, but hopefully this will be included in the Flash Builder plugin once it’s updated to work with the latest builds and with Flex Mobile projects.

First, you need to be registered as a vendor with BlackBerry in order to obtain you code signing key. This is done only once per developer or company, depending on how you want to register yourself. Obtaining the key is done by filling out this form.

The key you receive will be a CSJ file. It all starts with that file, because now you have to register that CSJ file as well as create a keystore to communicate with the BlackBerry signing authority. So, we’ll start by setting up that keystore, which is done via the following command

blackberry-signer -csksetup -cskpass <create a password>

Then you need to register the CSJ file by using the following command

blackberry-signer -register -csjpin <PIN> -cskpass <csk password from previous step> <CSJ file>

The last thing to get you set up is to generate a coding certificate, a .p12 file that is not unlike the certificate you create for regular AIR applications. This is done by executing the following command:

blackberry-keytool -genkeypair -keystore <certificate.p12> -storepass <create a password> -dname “cn=<company name>” -alias author

Once you have this set up, you are all set to start signing your application. When signing an application for the BlackBerry App World you actually have to sign it twice. Once for the code signing itself and a second time to add the author data to the BAR file. This can be done by executing these two statements in this particular order.

blackberry-signer -verbose -cskpass <csk password> -keystore <p12 certificate> -storepass <certificate password> <application>.bar RDK

blackberry-signer -keystore <p12 certificate> -storepass <certificate password> <application>.bar author

If you go through this signing process several times, make sure that you increase the application versionNumber in the <application>-app.xml file every single time. Otherwise you will get the error message that the application was already signed.

Deploying the application on the device

At this point your application is ready to be submitted to the BlackBerry App World. However, you might want to install it on your own device already and not wait for approval. This can be done via command line too and it can only be done with the signed BAR file. Unsigned applications can be installed using a debug token that expires after 30 days, but the following command is not suited for that type of deployment. It will only work with signed BAR files.

blackberry-deploy – installApp -device <device IP> -password <device password> <application>.bar

When you execute this command the application will be installed on your BlackBerry PlayBook and you can run it as if you installed it through the App World.

This might not be the best way to get your Flex Mobile application on the PlayBook, but it sure has worked for me and as far as I know it is the only way to do this with my current setup of Flash Builder and PlayBook SDK.

If someone has a better way of doing this, please let me know as I find this not an easy process to do (what should be) a simple task

BlackBerry announced the fact that they are going to produce a tablet rival for the iPad. It will be called the PlayBook and it’s a 7″ tablet with a screen resolution of 1024×600 and 1GB of RAM, which is a hell of a lot more that that iPad-thingie. Now in itself not that shocking, right? Wrong, because the interesting fact is that the PlayBook will have full Adobe AIR support.

And the news gets even better. BlackBerry is having a developer promotion that will get you a free PlayBook when you develop an application for the device and get it published on the BlackBerry App Store. And it doesn’t have to be a pure ActionScript project; you can even use Flex to create your app. Isn’t that awesome?

Now, there’s just one small glitch. Even though BlackBerry has released the SDK to allow developers to start creating nice apps, the actual device is not yet in production. But don’t let that hold you back, because Michaël Chaize has a very nice tutorial on how to install the PlayBook simulator and get started on your first PlayBook app.

So get cracking at an awesome AIR app and get your free PlayBook. I know I’m thinking of something to develop…

Now, the ColdFusion User Group has always been meant to be community driven. However, it seems a bit hard to convince you guys to step up and talk about the things you do with ColdFusion. So, for this meeting we thought we’d set an example and do some sessions ourselves:

	Statler (aka Cyril Hanquez) will give you an overview of AIR 2 and it’s new features. It will help you get familiar with the technology and show you some cool stuff you can do with it.
	Waldorf (aka Steven Peeters) is going to take it from there and digg a litle deeper into the realm of using AIR with ColdFusion by walking you through an application that uses the ColdFusion ORM feature on the client side with an SQLite database to have automatic online/offline synchronisation.

PROGRAM:

19h00: AIR 2 overview – presentation by Cyril Hanquez.
20h00: Using ColdFusion’s ORM in AIR – presentation by Steven Peeters.
21h00: Free drinks and networking

The event is free of charge, but seats are limited. Make sure you register quickly!

Cyril and Steven, CFUG managers

This one works over the internet as well, since it simply downloads a CVS file every 10 minutes to automatically update the application. The design was made in Illustrator, brought into Flash Catalyst to get the arrow working and finally I took it to Flash Builder to attach the HTTPService that fetches the data. You can read the full implementation in my book "Flash Builder and Flash Catalyst: The New Workflow" as well, since it’s one of the many examples in there.

The second application is a remote control for my BTicino domotics system. I’ve been wanting to do this for a very long time now. But up until now I just couldn’t do it, because you couldn’t create this thing in Flash Lite 3. But now, with AIR on Android (and soon on other mobile platforms as well) I could create a socket connection to my MH200 controller and feed it directly with my input to control the shutters and lights. Naturally, the possibilities are only limited by your imagination.

Both applications are Flex 4 applications, which proves that, despite the fact that the Flex framework isn’t optimised for these mobile devices and Slider (special Flex framework for mobile) isn’t yet available, the application still works pretty damn well. Loading times are not that bad either. Imagine what an optimised Flex framework will be able to perform then…

Peter Elst was up first and he talked about the basic stuff in AIR. Since the audience was divided into people already familiar with AIR and people who had no experience at all, this was a realy good start to get everyone up-to-speed. Topics ranged from basic AIR APIs like file access and drag-and-drop functionality to URL monitoring and basic SQLite access.

That’s where I stepped in and turned the volume up just a notch, because my session was entirely about working with the SQLite local database. Starting with the basics on accessing the database synchronously or asynchronously, I moved on to using the ColdFusion 9 ORM capabilities on the client side. That means that you don’t have to write any SQL statements to create or update the database. The cool thing about this specific ORM implementation is the fact that you can use that feature to synchronise your local database with a remote server as well. Unfortunately, during the workshop, the internet connection dropped and I could show it actually working, so you guys have to believe me that this is awesome stuff. You can find my slides from the session below.

Before having everyone falling asleep, I let Lee Brimelow take the stage and he went on about multitouch on devices. He talked about the new possibilities with multitouch and gestures in AIR and how you can test it on devices (laptops) that are not multitouch enabled.

Finally, Weyert De Boer took the stage and he had some great stuff to tell about using AIR’s socket server capabilities to create a custom HTTP server application. This was really impressive stuff.

At the end we had a small Q&A session and that was a wrap for us. So now, I would just like to thank everyone who attended the workshop and hopefully you’ve taken along some great new insights.

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.

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…

I’m trying to develop a Flex application that uses a Text component which will take an html rendered text. So far, no problem there. However, I would like to use more than 1 font (regular, bold, italic) in this text component and I’m not sure if the fonts are all on the user’s computer. What’s the best way of tackling this problem?

Solution:

If you don’t know for sure the fonts are installed on the user’s computer (because it’s some exotic font or some typical OS dependant font, the best way of dealing with that would be to embed the font in your Flex application (or any Actionscript application). Now, how do you do this exactly when you want to embed multiple fonts for a single component? Well, I’ll show you.

There are actually 3 ways of embedding your fonts in an application:

1. embed fonts in your Actionscript code
2. embed fonts directly in CSS
3. embed fonts in CSS using a SWF file that has (part of) the fonts embedded

1. Embed your fonts directly in Actionscript

To embed a font in Actionscript, you’ll have to assign it to some static variable to be able to incorporate it in the compilation of your application. Just before that variable definition, you specify a metadata tag “Embed” (just like you would if you were to embed an image). The properties for this metadata tag are:

• source: the location of your font file
• fontName: the name you want to use in the application for your font. I’ve chosen to use myFont to indicate it can be anything you like. But you could also choose the font name itself if you prefer it like that
• fontStyle: italic if it is an italic font (can be in combination with fontWeight)
• fontWeight: bold if it is a bold font (can be in combination with fontStyle)
• mimeType: e.g. application/x-font-truetype if it’s a truetype font

Repeat this step for all the different fonts you want to embed, but make sure that the fontName property is exactly the same for all of them. So, when for example you want to embed a Verdana font in regular, bold, italic and boldItalic, your code would look something like this:

[Embed(source="C:\\Windows\\Fonts\\Verdana.ttf",
       fontName="myFont",
       mimeType="application/x-font-truetype")]
public static const VerdanaTTF:String;
 
[Embed(source="C:\\Windows\\Fonts\\VerdanaBold.ttf",
       fontWeight="bold",
       fontName="myFont",
       mimeType="application/x-font-truetype")]
public static const VerdanaBoldTTF:String;
 
[Embed(source="C:\\Windows\\Fonts\\VerdanaItalic.ttf",
       fontStyle="italic",
       fontName="myFont",
       mimeType="application/x-font-truetype")]
public static const VerdanaItalicTTF:String;
 
[Embed(source="C:\\Windows\\Fonts\\VerdanaBoldItalic.ttf",
       fontWeight="bold",
       fontStyle="italic",
       fontName="myFont",
       mimeType="application/x-font-truetype")]
public static const VerdanaBoldItalicTTF:String;

2. Embed your font directly in CSS

Now, you can do exactly the same using only an external CSS file. The embedding part itself is a little bit different though. You would have to use the @font-face style for each of the separate font styles you want to incorporate in the resulting SWF file and provide it with the following attributes:

• src: the location of your font file.
• fontFamily: the name you want to use in your application for your font. Again, I’ve chosen to use myFont to indicate it can be anything you like. But you could also choose the font name itself if you prefer it like that
• fontStyle: italic if it is an italic font (can be combined with fontWeight)
• fontWeight: bold if it is a bold font (can be combined with fontStyle)

The src style attribute can either point to a file on the local file system or to a file somewhere on the web or another location. For embedding a font which resides on the local file system, you would specify local(“<font name>”) . The font name will remain the same for all the variations you want to embed, because it’s the style attributes that will make up the difference here. You’ll probably use this local specification most of the time, because you’ll probably want to embed a font that you have on your own computer. However, if you were to incorporate a font file which resides somewhere on a remote location, you would use url(“<path to font file>”). This path can either be a relative or absolute path.

Of course you need to repeat the @font-face style for every font variation you want to embed. Again, make sure that the fontFamily property is exactly the same for all of them, because you will use that name in the fontFamily attribute of the style you are going to apply on the component in order to use the different font styles.

For the same Verdana font definitions, your code should look like this:

@font-face {
	src: local("Verdana");
	fontFamily: myFont;
}
 
@font-face {
	src: local("Verdana");
	fontFamily: myFont;
	fontWeight: bold;
}
 
@font-face {
	src: local("Verdana");
	fontFamily: myFont;
	fontStyle: italic;
}
 
@font-face {
	src: local("Verdana");
	fontFamily: myFont;
	fontWeight: bold;
	fontStyle: italic;
}

3. Use a SWF file with partially embedded fonts

These first 2 methods work just fine. However, they do add several hundreds of kilobytes to your SWF file size. And this is only for 1 specific font, so imagine what it would do to a SWF file that compiles a couple of fonts into your application. This is due to the fact that a font is more than just alphabetical characters. Most of the time you don’t need all of those characters, but just the basic ones like digits, lowercase and uppercase letters and punctuation signs.

Fortunately, there is also another solution that allows you to limit the number of glyphs (this is what the individual font signs are called) to incorporate in your application. To be able to do this, we are going to have to take our development out of Flex Builder (or Flash builder of course) and bring it into Flash.

So, in Flash, you start by creating a new ActionScript 3 Flash file. On the stage, you place a text field and type some text. In the properties of that text field, you have to set it to Dynamic Text. In the Character subframe of the properties panel, you then select the font you want to embed as well as the style (regular, bold, italic or bold italic).

At the bottom of that same properties panel, you also see a button labeled “Character Embedding”. Just click on that one and you’ll get a dialog box which allows you to select the glyphs you want to embed in the Flash file. Select the uppercase, lowercase, numerals and punctuation glyphs and click ok to embed them in the SWF.

Now, perform the same procedure for the other font styles you want to embed, so you’ll eventually end up with 4 different dynamic text fields that all include a different style of your font.

The next step is then to compile your SWF file, so you can use it in your Flex or AIR application. To do that, you’ll first have to go to the Publish Settings, which you can find in the File menu. In the Format tab of the settings dialog, make sure that only Flash type is selected and then click on Publish. A SWF file will now be generated and that file will contain all the characters from the different font styles that you’ve just indicated.

Go back to Flex Builder (or Flash Builder of course) and add a fonts directory to your project. In this directory you place the SWF file that you have just generated. Now, to actually use the embedded fonts from the SWF file, we have to rely again on CSS. This is quite similar to the second method I’ve explained. However, this time the fontFamily property must be exactly the same as the actual font that you have included. So, in my example here, it has to be “Verdana”. You cannot choose the fontFamily name you want to use in your application freely anymore.

So, enter the different @font-face styles that match the embedded fonts from the SWF file in the same way as you would do when using the second method, bearing in mind that the font name is fixed now. Your code should look like this:

@font-face {
	src: url("../fonts/Verdana.swf");
	fontFamily: Verdana;
}
 
@font-face {
	src: url("../fonts/Verdana.swf");
	fontFamily: Verdana;
	fontWeight: bold;
}
 
@font-face {
	src: url("../fonts/Verdana.swf");
	fontFamily: Verdana;
	fontStyle: italic;
}
 
@font-face {
	src: url("../fonts/Verdana.swf");
	fontFamily: Verdana;
	fontWeight: bold;
	fontStyle: italic;
}

When you take a closer look at the generated SWF file, you will certainly notice a big difference in file size between the first 2 methods and this last one. This is because now, not all glyphs are embedded in the SWF file.

All you have to do now, is just set the fontFamily for the necessary components to the name you’ve just used in your CSS or Actionscript style embedding of the fonts, make sure you use the htmlText property and you’re all set to go.