Tonight I got one of the “coolest” emails you can get: I’ve been invited to give a session at gotoAndSki(); Switzerland on January 26th, 27th and 28th, 2012, which is really awesome. Unfortunately I haven’t been to this conference before, but I’ve heard very nice things about it and let’s face it, skiing during the day and conferences with diner at night is not your typical conference setup. So I’m really looking forward to it.

Now, about my session, it’s going to be titled “Database Driven Mobile Applications: the power of ORM”. Now, some of you may think “what the hell is ORM?”. Well let me reassure you that it is not magic, but it does some really magical stuff.

ORM allows you to create database driven applications by writing virtually no SQL statements.Normally, this type of feature is restricted to the server side of your application, but now you can use this server-side feature on the client-side in an AIR application.

This session will talk you through the basics of using ORM in AIR and how to “automagically” synchronise your local data with a remote server. Whether that’s a PHP, Java or ColdFusion, it doesn’t matter. That’s not all: we’ll go one step further and take that ability to create database driven applications onto the mobile platform as well. Just like that!

If you are digging this and the other topics presented at gotoAndSki(); make sure you get your tickets in time to enjoy the conference and the gorgeous surroundings of the Swiss Alps. I hope to see you there: switzerland.gotoandski.com

Now, the problem with these validators is that they are geared towards validating one single visual component, such as a TextInput, TextArea, ComboBox, List etc. But what about compound components, such as a DateField combined with a TextInput field for the time? Or, as I will explain in this post, a RadioButtonGroup, which is a non-visual component, but actually comprises the different RadioButton components?

Before I go into how I solved that problem, let me explain a bit about the Flex Validator class. This is the base class for all the different validators and can only check on a field being required or not. This also means that we are going to inherit from this component to create our own validator classes. Of course, you can extend other validator classes as well, but for my purpose of checking to see if a RadioButton in the list has been selected, the Validator base class will be just fine.

<mx:Validator source="{componentToCheck}" property="propertyToCheck" 
              trigger="{componentToMonitor}" triggerEvent="eventToMonitor" 
              required="true(default)|false" 
              requiredError="errorMessage"/>

As you can see in the code sample above there are a couple of important properties in the base class we have to keep in mind when developing our own validator class. First of all, the componentToCheck will be an instance of RadioButtonGroup and the propertyToCheck will be the selection property. You can use the trigger and triggerEvent properties to determine when the validation needs to take place. Leaving out the trigger property and explicitly setting the triggerEvent to an empty string will make sure that the Flex framework will never trigger the validation by itself. That means that we have to do that manually at the exact time that we want the validation to happen.

In the code below you can clearly see the usage of these properties in both <co:RadioGroupValidator/> instances. For all good purposes I’ve also made both a Spark and Halo form to show you the RadioGroupValidator works with both Spark and Halo components.

<fx:Declarations>
	<s:RadioButtonGroup id="rbgSpark"/>
	<mx:RadioButtonGroup id="rbgHalo"/>
	<co:RadioGroupValidator id="vRbgSpark" source="{rbgSpark}" property="selection" triggerEvent=""/>
	<co:RadioGroupValidator id="vRbgHalo" source="{rbgHalo}" property="selection" triggerEvent=""/>
</fx:Declarations>
 
<s:Form defaultButton="{btnSubmitSpark}">
	<s:FormHeading label="Spark form"/>
	<s:RadioButton label="Choice 1" group="{rbgSpark}"/>
	<s:RadioButton label="Choice 2" group="{rbgSpark}"/>
	<s:RadioButton label="Choice 3" group="{rbgSpark}"/>
	<s:RadioButton label="Choice 4" group="{rbgSpark}"/>
	<s:Button id="btnSubmitSpark" label="Submit" click="sparkSubmitHandler(event)"/>
</s:Form>
 
<mx:Form defaultButton="{btnSubmitHalo}">
	<mx:FormHeading label="MX form"/>
	<mx:RadioButton label="Choice 1" group="{rbgHalo}"/>
	<mx:RadioButton label="Choice 2" group="{rbgHalo}"/>
	<mx:RadioButton label="Choice 3" group="{rbgHalo}"/>
	<mx:RadioButton label="Choice 4" group="{rbgHalo}"/>
	<mx:Button id="btnSubmitHalo" label="Submit" click="haloSubmitHandler(event)"/>
</mx:Form>

As for the RadioGroupValidator class itself, the only thing we need to do there is to override the validate method to see wether or not the validation succeeded. If the validation failed we need to loop over all the RadioButton components that belong to this group and set their errorString to the proper message, as you can see in the code below.

import mx.events.ValidationResultEvent;
import mx.validators.Validator;
 
public class RadioGroupValidator extends Validator {
	public function RadioGroupValidator() {
		super();
		requiredFieldError = "Please choose an option from the list."
	}
 
	override public function validate(value:Object=null, suppressEvents:Boolean=false):ValidationResultEvent {
		var result:ValidationResultEvent = super.validate(value, suppressEvents);
 
		for(var i:uint = 0; i < this.source.numRadioButtons; i++) {
			if(result.type == ValidationResultEvent.INVALID) { 
				this.source.getRadioButtonAt(i).errorString = result.message;
			} else {
				this.source.getRadioButtonAt(i).errorString = null;
			}
		}
 
		return result;
	}
}

Now, as you can see I’ve also set the errorString in the constructor to a specific message. This doesn’t mean that you can’t provide your own specific message anymore in the instance declaration. The reason for this is that setting a property in MXML actually uses the implicit setter method and that one is executed after the constructor has initialized the object, which means it will simply overwrite the default value.

P.S.: If you test the forms, you will see that the Spark form doesn’t show the red error indicator as well as the MX form. Maybe that’s a glitch in the framework, maybe not. I’m still hunting that little sucker down, but no luck so far. I will update this example when I solved this problem.

So, now it’s finally here, the moment we’ve all been waiting for for quite some time now: Molehill has launched in a public beta version. You can download it from the brand new Incubator subsite on labs.adobe.com. Wait, what? Molehill, Incubator? What are you talking about?

Allright, so you don’t know about the Molehill codename of the latest and upcoming Flash Player version? What planet have you been living on lately? But anyway, let me explain what it is. “Molehill” is the code name for a new set of low-level, GPU-accelerated 3D APIs that will enable advanced 3D experiences across screens through the Adobe Flash Platform runtimes. These new low-level APIs will provide advanced 3D and 3D engine developers the flexibility to leverage GPU hardware acceleration for significant performance gains. If you want to learn more about using these 3D APIs, you should read up on this blog post from the Flash platform blog.

While we have been waiting on a public beta of Molehill since MAX last year, it’s completely understandable that you haven’t heard of the Incubator site, because this is completely new. What can you expect from this subsite? The Incubator is a new place on Adobe Labs for Adobe to share with developers features that are under development or under consideration for inclusion in future versions of the runtimes. The major difference with the beta releases is the fact that the features and capabilities of these Incubator releases may or may not make it into the final release versions.

This is really an exiting time for 3D game developers, because now the Flash technology will enable you to create 3D games that work cross-platform with a single runtime. I sure wish I was more into games after seeing the capabilities of this Molehill release…

A couple of weeks ago I was lucky enough to be invited to present at Flash Israel on February 22-23. There were a lot of topics I could choose from, but looking at the list of speakers that were already selected, such as Ben Forta, Lee Brimelow, Grant Skinner, … I knew I had to come up with something mind blowing.

So, after doing some soul searching I reached back to my experience with Phidgets and Arduino. Over the past year I’ve been experimenting with both and found out I love playing around with electronics. Now the great thing about these two brands is that their components can be accessed through Flash technology.

This is exactly what I’ll be talking about, showing some actual real-world applications as well; even using the mobile phone to control these devices. I can’t tell you exactly what I’ll be doing because that would ruin the scoop of my main demo. But I can tell you there’s a laser involved! So if you happen to be in the neighborhood of Tel Aviv, Israel next week, be sure to come over and enjoy all the awesome speakers.

Well, there are 2 options you may choose from. The first one involves using ActionScript to attach an event listener. Upon initialisation of your View component, you write the following code:

private function initView():void {
    addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);
}

The good thing about this method is the fact that it is exactly the same in plain ActionScript or Flash Professional projects. The second option can only be done in Flex applications and it is actually a little bit easier to implement. In fact, you just capture the gestureSwipe event on the View tag, as shown below.

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            gestureSwipe="onSwipe(event)"/>

So, that’s all there is to it for capturing the swipe on a touch enabled device, such as mobile phones, tablets or even large touch screens. But you only have one single swipe event, so how do you distinguish between a swipe left and swipe right? For that, you are going to have to use the event’s properties to determine the swipe direction. and more particularly, you’ll need the offsetX property for a horizontal swipe and the offsetY property for a vertical swipe.

private function onSwipe(event:TransformGestureEvent):void {
    // A swipe to the left means the offsetX property will be -1
    // A swipe to the right means the offsetX position will be 1
    if(event.offsetX == -1) {
        doSwipeLeft();
    } else if(event.offsetX == 1) {
        doSwipeRight();
    }
 
    // The same principle applies to the vertical swipe gesture, so
    // a swipe to the top means the offsetY position will be -1
    // A swipe to the bottom means the offsetY position will be 1
    if(event.offsetY == -1) {
        doSwipeTop();
    } else if(event.offsetY == 1) {
        doSwipeBottom();
    }
}

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.

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.