Posts in Category "Flex 3"

Flex 3.x Examples Source Code

Previously, I blogged with a link to a ZIP file for the 4.5 samples code that is used in the core documentation. This blog entry was pretty popular and a lot of folks downloaded the ZIP file. However, many users are still using Flex and Flash Builder 3.x, so here is a link to a ZIP file that contains the source code and assets for the Flex 3.x examples:

Flex36CodeExamples.zip (8.9MB)

As with the 4.5 examples, this includes the *.mxml and *.as files, as well as the stylesheets, images, videos, audio files, and other assets that they use. This ZIP file does not include the compiled SWF files for these examples, but it should be useful to you if you like to search for and look at source code for the Flex 3.x examples.

The ZIP file is organized into 4 main groups:

  • devapps: Core examples including the MX component set and containers, effects, validators, and item renderers.
  • buildapps: Examples that focus on topics such as logging, deploying, and optimizing apps.
  • createcomps: Examples that focus on custom component development.
  • datavis: Data visualization examples including the charting examples as well as the OLAPDataGrid and AdvancedDataGrid components.

NOTE: If you found this blog post but are actually looking for the Flex 4.5 examples, you can get them here:
flex45_using_examples_source (30MB)

-Matthew J. Horn
Flex docs

Add Chrome Search Extension for the ActionScript® 3.0 API Reference (ASDoc)

Use the ActionScript® 3.0 Reference as the API reference for many Adobe products, including Flash Player, AIR, Flex, and LiveCycle. To improve searching of the reference in Chrome, install the “ActionScript 3.0 Search” extension:

ActionScript 3.0 Search

 

Stephen Gilson
Flex Doc Team

New Features Added to Adobe ActionScript API Reference (ASDoc)

Use the ActionScript® 3.0 Reference for the Adobe® Flash® Platform as the API reference for many Adobe products, including Flash Player, AIR, and Flex. The new release of the ActionScript Reference (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/) contains several new features:

  • Support for a quick search added to the Packages and Classes lists.The quick search lets you filter the content of the Packages and Classes lists as you type. This feature is not supported on IE 7 and IE 8.
  • When displaying all classes in the Classes list, selecting a class name in the list continues to display all classes.In the previous release, selecting a class name in the Classes list while displaying all classes changed the Classes list to display only the classes in the package of the selected class.
  • Added a Home link to the top of all pages.The Home link lets you navigate back to the index.html page from anywhere in the reference.
  • Fixes for issues associated with localization and translation.

 

Stephen Gilson
Flex Doc Team

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

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

The Flex 3.4 ActionScript Language Reference is live

Today, the Flex SDK team pushed the 3.4 milestone build live and you can get it from the Flex 3 SDK Downloads page.

Note (updated 8/10/10): As of Flex 4, the most up-to-date Flex class documentation is available from the Platform Reference: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3

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.

The Blueprint Eclipse plug-in is live on Adobe Labs (for Flex Builder 3 and Flash Builder 4)

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

More Specs Available for Gumbo (the Next Version of Flex)

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.

Learn About Gumbo: The Next Version of Flex

Gumbo is the code name of the next version of Flex. New information about Gumbo has been made available on the Gumbo page of the Flex Open Source site.ᅠ

Highlights of the new information about Gumbo include the following:

1. Themes of the Release
Gumbo is being planned around three primary themes:

  • Design in Mind
    A framework for continuous collaboration between designer and developer.
  • Developer Productivity
    Improve compiler performance and add productivity enhancements.
  • Framework Evolution
    Take advantage of the new Flash Player capabilities and add features required by common use-cases.

2. Recorded Presentations

3. White Paper: An Introduction to the Gumbo Component Architecture
This white paper provides a comprehensive look into our plans for the next version of Flex.

4. Gumbo Feature Specifications
Read, and comment on, the recently published specifications for Gumbo. Currently, there are eight specs available, with more on the way.

The Security Sandbox in Flex Builder 3

We recently received a question from a user about Flex Builder security sandbox settings. I thought the answer to this question would be of general interest.

Question: In Flex Builder 2, the security sandbox settings for both debug mode and release mode was local-trusted. In Flex Builder 3, why is release mode now local-with-network?

Short Answer: Whether a given SWF, when run locally in a non-trusted location, is local-with-filesystem or local-with-network is a compilation setting. This setting is stored as a flag in the SWF header and is the only compiler flag. The default is local-with-network and has not changed in Flex Builder 3.

What is new with Flex Builder 3 is that we no longer put the release SWF inside the trusted debug output folder by default. The advantage to the developer is that the release SWF will run in the same security sandbox in which it will be deployed. Thus you get accurate application behavior instead of the more permissive local-trusted, which is only available to the developer.

Detailed Answer: In Flex Builder 2 we put the release SWF alongside the debug SWF, which was inside an output folder that we configured the flash player to trust for the following reason:

You could click, debug, and launch your application and have it access network services without first configuring the project to host the SWF on a web server (and thus have to launch it with a proper http:// URL). Basically, you can launch your application from the file system using file:/// URLs.

The problem with this approach is that when testing the release SWF, even if you edited the launch URLs to use http://, you would be running the application out of local-trusted instead of the actual deployment sandbox (remote).

There are other problems with this arrangement, such as facilitating the accidental deployment of both debug and release SWFs in the output folder.

So, for Flex Builder 3 we separated the notion of the Run button from the release SWF. The Run button merely launches the debug-capable SWF with debugging turned off. The Export Release Wizard creates the actual release SWF. Flex Builder 3 encourages you to put the release SWF somewhere other than your debug output folder. Thus, to test the release version, you must launch and test it as an end user would using a browser and web server (that is, unless you actually want the end user to try to run it locally).

Note: Use the custom compiler option, use-network=false, if you want to override the Flex Builder default compiler option. This would change the settings to local-with-filesystem.