You are Here:Home>>Old Posts>>Component | FlexSpellCheck with source code

Component | FlexSpellCheck with source code

By | 2008-04-02T19:26:35+00:00 Apr 2, 2008|Old Posts|

FlexSpellCheck Component Source Code

Today i’ve find this nice flex component using the google spell checker service API.

Features used in the component

The Flex SpellCheckComponent extends the mx.controls.PopUpButton control. You can use it with a TextInput, TextArea or RichTextEditor control.

The component can be instantiated with MXML or Actionscript, and will use the Google service URL directly if a proxy url is not defined in urlString. (The default Google url will only work from within Flex Builder).

It uses a Menu control as the button popup, which is used to select the language that the spellcheck should use.

When you click on an incorrectly spelt word, it uses a List control to display the list of possible corrections returned from the Google spellcheck service.

A custom skin is used for the information tab that attaches itself to the text area being tested, and the Fade effect to fade the information tab into view.

Public variables use the Inspectable Metadata tag, which expose them as attribute hints in the hints and tag inspector area of Flex Builder.

The component implements the powerful XML-handling standards defined in ECMAScript for XML (E4X) specification. This is used to Search, add and delete nodes and attributes directly on the returned XML string from the Google service.

You can download the component from here. The zip file contains a SWC, documentation and a sample file. I am going to enter this in the Adobe and Builder AU Flex Developer Derby Contest, but I will probably release the component once the contest is finished. I don’t expect to win anything with this cause it’s not “sexy” enough for a Flex entry. It does however use LOTS of Flex features, and was very quick to develop — I just love this Flex stuff!

View the Flex Spell Checker Demo

FlexSpellCheck Component source code.
Some documentation can be found in the original post download here

About the Author:

A father, a husband and a geek... Biitlog Founder, The Tech Labs founder, among other projects.

4 Comments

  1. Campbell April 3, 2008 at 12:05 am - Reply

    Nice dude… Well done!

    Just a few points.

    For the number of errors label try
    label.text = numberOfErrors.toString() + “Error” + (numberOfErrors != 1)? “” : “s”;

    Which should get the label reading right, ie “1 error” or “3 Errors”.

    And are you using the PopUpManager to pop the list of possible spelling changes up? I noticed a depth issue where the list was under the “check spelling” button. If you look into the PopUpButton class in the mx.controls there is some code showing how the Adobe peeps did it.

    Just ideas for you to make it better and help with the Derby entry 🙂

    Cheers

    Cam

  2. ram November 11, 2008 at 11:54 pm - Reply

    Hello Everyone.
    i am new to flex development.I am trying to make the simple application to check the spelling. i downloaded this example and zip file . I am running this application on the flex builder 3.0.
    when i try to run it, it opens on the browser but when i tried to check the spelling it gave me “no error found ” even the words spelling are wrong.
    i followed the documentation but couln’t resolve it .
    plez help me out ..
    thanks in advanced.

    thanks

    this is my simple program :

  3. mpulido March 9, 2009 at 5:22 pm - Reply

    Same problem happends to me… always “no error found” instead of check wrong words

  4. Eric July 16, 2009 at 6:29 pm - Reply

    I have developed a very similar product using the same google api. The only problem is the cross-domain policy, which will not allow it to access the google domain. I am trying to accomplish this directly with actionscript. Let me elaborate… With flash 9 as3 the current domain is where your browser opens your swf files. If one of the actionscipts tries to open another domain, which would be google then a security error occur. #2048. I have yet to find a way around this. Attempted to use a cross-domain policy file and even tried to set the security.allowDomain(‘*’). My component works fine when I use the internal browser of the application I am designing flash. It will not work in IE or FireFox.
    Not sure if you have come across this problem. or this is why your demo is not working. Let me know if you any additional comments.

Leave a Reply