The Space For App Developers

Beyond Plain Old HTML Objects

AS3TextArea – simple AS3 syntax coloring Flex/Spark component

with 11 comments

Last week I released the as3term project, which is a simple AS3 Terminal application. This week as part of my work on as3term 2.0 I’m publishing this simple AS3 syntax coloring Flex/Spark component. Actually I was inspired by my colleague Anirudh Sasikumar and his powerful as3syntaxhighlight library. My initial thought was to use the library, but for as3term I needed something really simple, so I thought that I would write it myself using a few RegExp statements ;)

This component can be used to colorize source code of other programing languages. I defined multiple types of language keywords that should be recognized and styled. For each type you can specify your own styling as well.

  • .default styles all keywords that don’t have style specified
  • .text styles non-keyword text
  • .var exceptional var styling
  • .function exceptional function styling
  • .strings exceptional string styling
  • .asDocComment multiline comments /** comment **/
  • .comment single and multiline comments: /* comment */ and // comment
  • .accessModifiers styles: public, private, protected, internal
  • .classMethodVariableModifiers styles: class, const, extends, final, function, get, dynamic, implements, interface, native, new, set, static
  • .flowControl styles: break, case, continue, default, do, else, for, for\ each, if, is, label, typeof, return, switch, while, in
  • .errorHandling styles: catch, finally, throw, try
  • .packageControl styles: import, package
  • .variableKeywords styles: super, this, var
  • .returnTypeKeyword styles: void
  • .namespaces styles: default xml namespace, namespace, use namespace
  • .literals styles: null, true, false
  • .primitives styles: Boolean, int, Number, String, uint

Below is a demo application that actually colors the syntax of its own logic. You can also checkout the source code over here.

UPDATE 09.09.2010 – I submitted the source code to the github.

You can paste or type in your own AS3 code into it and it will do coloring as you type.

This movie requires Flash Player 10

And this is how as3term will look very soon:

Written by Piotr Walczyszyn

September 7th, 2010 at 12:53 pm

Posted in Examples,Releases

Tagged with , ,

«
»

11 Responses to 'AS3TextArea – simple AS3 syntax coloring Flex/Spark component'

Subscribe to comments with RSS or TrackBack to 'AS3TextArea – simple AS3 syntax coloring Flex/Spark component'.

  1. Nice! What use-cases do you expect?

    Maxim Kachurovskiy

    7 Sep 10 at 1:04 pm

  2. Whenever you want to display/edit colorized source code of any programing language. By overwriting or setting keyword arrays you can use it for other languages as well.

    Piotr Walczyszyn

    7 Sep 10 at 1:08 pm

  3. Wow, very nice work !

    Fabien

    Adobe Flex Tutorial

    7 Sep 10 at 4:10 pm

  4. [...] AS3TextArea – simple AS3 syntax coloring Flex/Spark component + Démo Autres Tutoriaux Flex liés: Adobe et Facebook s'associent pour créer une librairie AS3 pour Facebook Platform [...]

    Flex Library – Coloration syntaxique pour code ActionScript 3 et MXML, en AS3 - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3

    8 Sep 10 at 11:20 pm

  5. Here is a quick article about it (in french):
    http://www.flex-tutorial.fr/2010/09/08/flex-library-coloration-syntaxique-pour-code-actionscript-3-et-mxml-en-as3/
    The async feature of the as3syntaxhighlight is pretty cool tho as it lags a bit when you edit the code in the demo

    Fabien

    Adobe Flex Tutorial

    8 Sep 10 at 11:22 pm

  6. [...] wasn’t really happy with the performance of my AS3 syntax coloring component AS3TextArea. That is why I took some time to investigate TLF (Text Layout Framework) further and I managed to [...]

    AS3TextArea improved at Space of Flex/AIR technologies

    10 Sep 10 at 1:48 pm

  7. @Fabien the current/updated version has been improved and the experience is much better in terms of performance. I’m looking for few other improvements and it may not require async feature. Actually this version of AS3TextAre also is async as well.

    Piotr Walczyszyn

    10 Sep 10 at 4:34 pm

  8. [...] AS3TextArea – simple AS3 syntax coloring Flex/Spark component TextArea ami AS3 szintaxis szerint színezi a tartalmát. [...]

    Swf.hu 2.0 – flash és webfejlesztés » Heti link gyűjtemény

    13 Sep 10 at 2:21 am

  9. You should definitely include HTML syntax coloring for those of us who are trying to develop applications that uses an HTML editor

    Mark Entingh

    26 Sep 11 at 5:54 am

  10. How do I get the syntax highlighting to ignore a CDATA block?
    Thanks

    Daniel James

    16 Nov 11 at 11:09 pm

  11. Cute… whatever it takes to get the kids moving!

    Gregory Heist

    2 Dec 11 at 12:47 am

Leave a Reply