Flex Framework
Recently I needed to make changes to two desktop Air applications I have been working on for a major Operating System (more details when I am allowed). The task was to change the TextField datatypes (flash.text.Textfield) to Spark Label (spark.components.Label) and a couple of Spark RichText (spark.components.RichText) components and I thought I would record what I learned to help other developers. I have also included some information about the handy RichEditableText (spark.components.RichEditableText) component.

Page 1


These new components are great and once you have adjusted to how they work they offer some real advantages.
  • Lightweight

    These 3 Spark Text Components are designed so that you avoid components that provide functionality you don't need. This is especially useful if you are developing mobile applications, whether for Android or the iOS/iPhone/iPad, using Flex for Mobile. For example Label has limited styling and RichText cannot be edited, this is provided by the RichEditableText. Adobe recommends you do not use the RichText or RichEditableText components in mobile applications and so Label provides very lightweight text support for mobile apps.

  • Measuring

    The RichText and RichEditableText fields use something called the Text Layout Framework (TFL). This allows super control of text using AS3. If you ever struggled with this type of thing in the bad old AS2 days you would not have never imagined how much better things would get. Take a look at these screen shots of an Air Desktop Application built by the New York Times.

New York Times Reader Air Application Two Column
  • As you can see when comparing the image above and the ones below the same content is presented in many different ways depending on the size of the screen. The first two images are at their original size and the third one has been resized to fit on this page.
New York Times Reader Air Application One ColumnNew York Times Reader Air Application Short
  • Download it and try it for yourself. The layout is fluid and changes as you drag the screen to be a different size. Make no mistake TFL is powerful stuff and capable of handling the many different screen sizes our applications might end up being displayed on.

    The Label Spark Component does not use TFL but it still provides much improved ways of measuring over TextField.

  • Internationalisation

    The reason I had to do this work was because I needed to support Arabic. TextField simply does not render Arabic correctly. Take a look at the two lines of text below.

    Compare Arabic

    The top line is a TextField and the bottom one a Spark Label. The are both attempting to render the same text which should say something like "Missing Images". As you can see they are completely different.

    If you are developing an application that is going to be internationalised or there is any chance that you are going to need to support things like right to left text you will benefit greatly from getting these components into your application from the outset.

  • Aesthetics

    Simple this one. These new components render text beautifully whether you are rendering in a browser, desktop or on your phone. While Flash used to butcher text Flex and Air do not, it looks amazing.