Archive for October, 2009

Stupid Flex tricks: undocumented fcsh commands

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

New doc: Text controls

Below is the latest documentation on using text controls in Flex 4.

This PDF includes information on creating and maniupating TextFlows, a powerful new class for working with text in the TLF-based text controls.

The topic also includes documentation on using the following new Spark text controls:

  • Spark Label, TextInput, and TextArea
  • RichText
  • RichEditableText

Please let me know if you have any questions, comments, or updates.

Here’s the new documentation: Text controls

Scaling Label text size to fit available area

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

More about Flex 4 Beta 2 documentation and learning resources

NOTE: Flex 4 shipped on March 22, 2010. Click here to read a blog post that describes the documentation set. Also, I suggest that you bookmark the Flex Developer Center Documentation tab for quick access to all Flex Learning Resources.
-Randy

Flex 4 Beta 2 documentation live

NOTE: Flex 4 shipped on March 22, 2010. Click here to read a blog post that describes the documentation set. Also, I suggest that you bookmark the Flex Developer Center Documentation tab for quick access to all Flex Learning Resources.
-Randy