Recently in Flex 3 Category

I just recently discovered that there are several undocumented commands for fcsh, the command line compiler shell.

If you don't know what fcsh is... it's a simple shell environment for compiling Flex apps and libraries from the command line. Basically, it speeds up the compilation significantly. You can read more about it here:

http://livedocs.adobe.com/flex/3/html/help.html?content=compilers_32.html

The undocumented commands (and by "undocumented", I mean they aren't in the help system's doc on fcsh or listed in the fcsh online "help" command output) are:

• cp (copy)
• mv (move)
• touch (change timestamp)
• rm (delete/remove)

The syntax is pretty straightforward, but if you want to spend a few minutes documenting them, we'll happily add a link to your blog or web site from the Adobe help.

matt

Working with text in Flex 3 can be difficult. Especially if you want to scale text to fit an area (a task I recently discovered was not intuitive at all). Should you scale the text control? Convert the contents to a bitmap and resize it? Set the fontSize and test it's width against the parent container?

The cleanest solution I found was to use was to compare the textWidth property of the Label against the parent container's width (the available area), and then scale the Label component based on that comparison.

Here's the running example (the default font size is 36 pts, but you can see that the second and third labels are scaled according to how much text is in the Label):

There's a bit of a caveat to this, which is that in general, this will not be a "UI best practice". A list of text items, where the text varies in size for each item in the list, is not the most readable or user friendly way to present information.

The main app and custom component files are below, but here's a few lines to show you how it's done.

In the Label tag, trigger a function on the creationComplete event:

    <mx:Label id="myLabel"
        x="101" y="22"
        fontSize="36" 
        text="{title}"
        width="100%" truncateToFit="false"
        creationComplete="scaleLabelToFit()"
    />

You should also set truncateToFit to false so that a Label whose text comes close to the edge does not get truncated.

The scaleLabelToFit() function calculates the ratio of the main component's width to the width of the Label's text (textWidth):

    var ratio:Number = ((this.width - myImage.width) - 10) / myLabel.textWidth; 

This line subtracts the width of the image and an additional 10 pixels to account for padding.

Then, if the ratio is less than 1, scale the text control. If the ratio were greater than 1, you would not want to scale the text up, so just ignore that case.

    if (ratio < 1) {
        myLabel.scaleX = ratio;
        myLabel.scaleY = ratio;                 
    }

That's it. Here's a ZIP of the entire app, including images:

ScaleLabelSizes.zip

Today, the Flex SDK team pushed the 3.4 milestone build live and you can get it from the Flex 3 SDK Downloads page. Simultaneously, we pushed the Flex 3.4 Language Reference live, overwriting the 3.3 version.

Did you know...

• DataGrid is the most popular search term.


• ArrayCollection is the second most popular Flex search term, although Array and XML are second and third, respectively.


• UIComponent is the most viewed page.


• DataGrid, AdvancedDataGrid, and ComboBox are the second, third, and fourth most viewed pages, respectively.


• If you happen to land on a language reference page for an old version, you can use the version pod to navigate to the correct version. The version pod displays towards the top right of each page and you can hide it by clicking the right arrow icon.

In the weeks to come, I hope to write a series of posts that cover the kinds of things our group is doing to improve the overall experience with Adobe learning content.

I want to tell you about Blueprint, which we released on Adobe Labs last week and just last night updated to include support for Mac, Windows, Flex Builder 3, and Flash Builder 4.

Blueprint is an innovative code-centric search application, initially delivered as an Eclipse plug-in. It is a custom search tool that searches only for code (for now, it searches just for MXML and ActionScript). So, for example, if you search for DataGrid, it returns a set of code examples that use the Flex DataGrid control. But what's really cool is that you can easily highlight, copy, and paste chunks of code right into your application, all without leaving Flex/Flash Builder.

For more information, see the Blueprint page on Adobe Labs

New specifications for Gumbo, the next version of Flex, are now available. Go to the Gumbo page of the Flex Open Source site to read, and comment on, the plans for Gumbo.

Of particular interest is the Skinning and SkinnableComponent spec, which is a must read for those interested in the new Gumbo framework. There also have been modifications to the Gumbo Architecture whitepaper.

Other new specs that are available include those for TrackBase, Range, Slider, and ScrollBar.