Adding spell checking to Adobe Flex

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

If you are anything like me you can't live without that squiggly red line under your spelling errors. Most web browsers have incorporated some form of spell checking for web forms, but there is no native solution for spell checking Flex applications. Thankfully there are 3rd party solutions available.

In this tutorial we will see how to add spell checking to a Flex TextArea.

The spell checking code used in this tutorial have come from flex:SpellCheck project. I have made some modifications to enable the dictionary to be embedded into the final SWF file (the original library, beta version 2.1, only allowed dictionaries to be loaded from a web server).

The spell checking library works by adding the spell checking functionality to existing controls like a TextArea, as opposed to defining new controls. So first up we need to add a TextArea, making sure to give it an id so we can reference it from our ActionScript code later.

<mx:TextArea left="10" right="10" top="10" bottom="10" id="textinput"/>

Add the following attribute to the Application element.

applicationComplete="appComplete()"

This sets the appComplete function to be called when the Flex application has initialised.

Add a Script element to the Application element. It is here that we will write the ActionScript code.

<mx:Script>

<![CDATA[

//code goes here

]]>

</mx:Script>

Import the following packages.

import com.flextendibles.spellcheck.*;

import mx.core.ByteArrayAsset;

The spell checking library has been modified slightly to allow an embedded dictionary to be used. Here we are embedding the compiled dictionary (as indicated by the cdic extension), but you can use a standard text file that lists each dictionary word on a separate line. The compiled dictionary offers better performance though.

[Embed(source="../dictionary/dictionary.cdic", mimeType="application/octet-stream")]

private var Dictionary:Class;

The appComplete function is called when the Flex application has been loaded and initialised. Here we convert the embedded dictionary file into a string, and then pass that string, along with a reference to the TextArea, to the appSpellCheck function.

Calling this one function is all we need to do to enable spell checking in a text control like the TextArea. At this point spell check is automatically enabled, using the same red squiggly red line that has become synonymous with spell checkers.

private function appComplete():void

{

var byteArray:ByteArrayAsset = ByteArrayAsset(new Dictionary());

var dictionary:String = byteArray.readUTFBytes(byteArray.length);

com.flextendibles.spellcheck.SpellCheck.addSpellCheck(this.textinput, dictionary);

}

The spell checker saves custom words in the Flash local storage, so the first time you run the application you will be prompted to allow the application access to the storage area. This prompt should only appear once though.

Using the supplied library, adding spell checking to a Flex application is quite simple, and it allows you to offer you users a function that most take for granted.

Return to the Tutorial Index