Robert Bak – Notes

Some programming tips – updated sometimes

Spell checking in Flex (with support for multiple languages)

A while ago the way to go, if you needed spell checking in Flash or Flex was Grant Skinners Spelling Plus Library (which still has a lot to offer, especially for Web applications, as it’s much smaller than the Adobe library). But, for a while now, Adobe has been working on their own project, called Squiggly, which I’m going to use.

The Squiggly library

You can download the library files from Adobe Labs. After uncompressing the .zip file you’ll find three files in the libs folder. The one you need for this tutorial is “AdobeSpellingUIEx.swc” – it’s the Flex 4 version for simple integration, so just put it in your libs folder. The “AdobeSpellingUI.swc” is what you would use if your target would be a Flex 3 application. You should use only one of them as putting both in your libs might cause troubles. The third file is used when working with more advanced options given by the library.


Getting additional dictionaries

While it’s nice to be able to spell check English words it doesn’t solve the issue for everyone. Although Adobe seems to discourage using the library with most languages, I’ve had a really good experience while using it with Polish language. So let’s take a look on how to install, and use, additional dictionaries.

First thing you need to do is get the new dictionary. There are many places that can provide you with dictionary files, I usually go to the dictionary listing on Open Office wiki 1. There’s sometimes more than one set of files available for a given language, but what you’re looking for is usually just the spelling part, which consists of two files – one with a .aff extension and one with .dic. The rule is that the first part of the file names will be the language code, so for English spellchecker you might need “en_US.aff” and “en_US.dic” and for Polish it would be “pl_PL.aff” and “pl_PL.dic“. In my project I’m going to use both, so I’ll just put them in some directory. Here’s how it looks:

Creating a dictionary configuration file

The structure of the configuration file is fairy simple, and more ore less, only points to the files downloaded above, it’s included in the project but just for reference, here’s how to define the support for two languages.

<?xml version="1.0" encoding='UTF-8'?>
<SpellingConfig>
  <LanguageResource language="English"
                    languageCode="en_US"
                    ruleFile="assets/dict/en_US/en_US.aff"
                    dictionaryFile="assets/dict/en_US/en_US.dic"/>
  <LanguageResource language="Polski"
                    languageCode="pl_PL"
                    ruleFile="assets/dict/pl_PL/pl_PL.aff"
                    dictionaryFile="assets/dict/pl_PL/pl_PL.dic"/>
</SpellingConfig>

Full project structure

Now we have all the files ready, and can start coding. Here’s how my project looks:

As you can see the project is using the new Flex SDK version named “Hero”, but it was also tested with SDK 4.1. The project downloadable at the end of this article has been created in the new version of Flash Builder “Burrito”, which includes the new SDK, and which you can download from Adobe Labs

The code

To get basic spellchecking to work you don’t need to do a whole lot. I’ll paste the whole code first, and than explain what happens.

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
               xmlns:s="library://ns.adobe.com/flex/spark"                 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="creationCompleteHandler()">
    <!-- VIEW -->
    <s:TextArea id="myTextArea" bottom="50"  top="0"
                                left="0" right="0" />
    <s:HGroup  height="50" bottom="0">
        <s:Button label="Switch to pl_PL"  
                  click="polishButton_clickHandler()" />
        <s:Button label="Switch to en_US"
                  click="englishButton_clickHandler()" />
    </s:HGroup>
    <fx:Script>
        <![CDATA[
            import com.adobe.linguistics.spelling.SpellUI

            protected function polishButton_clickHandler():void
            {              
                SpellUI.disableSpelling(myTextArea);
                SpellUI.enableSpelling(myTextArea,"pl_PL");
            }

            protected function englishButton_clickHandler():void
            {              
                SpellUI.disableSpelling(myTextArea);
                SpellUI.enableSpelling(myTextArea,"en_US");
            }


            protected function creationCompleteHandler():void
            {
                SpellUI.spellingConfigUrl = "assets/dict/SpellingConfig.xml";              
            }

        ]]>
    </fx:Script>
</s:Application>

The first thing you need to do is configure the spell checker by providing it with an XML configuration you have created. That’s what happens in the creationCompleteHandler. After that you just need to call the enableSpelling function with two parameters: first is the id of a component which should be spell checked, and the second one specifies the language which should be used. The disableSpelling function removes the spell checking, I’ve noticed you need to call it before setting a new language, otherwise it will not change. With just this few lines of code you get a fully functional spell checker. Here’s how it looks when switching languages:


If you look at code, you might also notice that the you don’t need to create a new object of class SpellUI, all the functions are static.

Final notes

A modern spell checking library would not be complete without a way to suggest proper spelling, and this also works out of the box, you just need to right click on an underlined word to get them.

But there are some things to keep in mind when starting to use this library. First, it’s still in development an a lot can change, including the way you use the library. Second, there are some issues with efficiency, the dictionaries are quite big (the Polish one is 4MB, the en_US around 600kB) and even after downloading them the parsing process freezes the application for a noticeable time. But still, a long needed addition to the Flex ecosystem is here, and it’s really easy to use.


Download source code.

Notes:

  1. Please remember that dictionaries have different licenses, so you want to check them carefully before using them in any commercial software.

2 thoughts on “Spell checking in Flex (with support for multiple languages)

  • Tushar says:

    Hi Robert,

    I am facing problem in creating Spell Check functionality for SAP FLash Islands, wherein we integrate Flash within SAP Web Applications.
    On stand alone machine Spell Check works fine but same Flex SWF file is added in SAP it gives an error related to locating AdobeSpellConfig.xml file also issue with locating Rule & Dictionary files. Can you please let me know if any kind of special handling needs to be done in this case.
    I am not sure but do I need to embed all resources into SWF file.
    I am not a flex developer, I am into SAP but at same time working on this small tool for integrating with SAP.
    Please share your inputs.

    Thanks.
    Tushar

    • admin says:

      Hey, sorry but I haven’t used this in years and can’t really remember anything I could tell you that would help.

Leave a Reply

Your email address will not be published. Required fields are marked *