Author Archive: Matthew J. Horn

“Live” data for charting examples

This is not a major announcement, but it’s got a touch of cool factor and represents an improvement to about 200 doc examples. The charting examples in Flex documentation have been updated to use real-time data served up from a MySQL database. They connect to the database via an HTTPService tag, and then use the results as the data provider for the charts.

The server that hosts the data is located at:
aspexamples.adobe.com

The following list provides links to the new example data. The link in parentheses provides the XML output of the request. The best way to view the source data as it is used by Flex is to click the XML link, and then select View > Source in your browser:

To use these URLs as data sources in your apps, you can do something like the following:

<mx:HTTPService
id="srv"
url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"
/>

Be sure to call the service’s send() method when your app is finished loading (in the creationComplete event handler):

creationComplete="srv.send()"

And then set the value of the chart’s dataProvider property to something like this:

dataProvider="{srv.lastResult.data.result}"

The updated examples won’t appear in the Flex documentation until the next time it is generated for the public. This will likely be for the Flex 4 (“Gumbo”) beta. But the data is available now for your testing.

Learning Paths provides help content according to role

There’s a new web site that guides new users through the process of learning Flex. It organizes a variety of examples and tutorials based on the role that you select. You can choose a learning path for developers, designers, managers, or architects. Each path leads you to a series of tutorials, videos, code samples, and documentation links.

Here’s the URL:
http://www.adobe.com/devnet/flex/learn/

While this site might not have alot of new content, it provides a new way of exploring existing content. It ties together information from Adobe resources such as the standard Flex docs, DevNet, and The Edge newsletter, plus outside web sites such as InsideRIA.com and OnFlex.org.

The folks who put together Learning Paths are eager for your feedback, too. Check out the Flex Learning Paths forums, and tell them what you like and don’t like about the experience.

Flex 3.2: Loading sub-apps

The Flex 3.2 SDK has just been released. This release includes many bug fixes, but also one major new feature: improved support for loading sub-applications. Not only can your main app load and interact with sub-apps that are both inside and outside of its security sandbox, but you can also load sub-apps that were compiled with different versions of the Flex compiler (known as multi-versioning).

A sub-application is any application SWF file that is loaded into a main application SWF file. You load sub-apps if you have a portal web site or a form manager or dashboard that uses content from other sites. Sub-apps are like modules in many ways, except they can be loaded locally or cross-domain.

You might not have control over the the source code, or even the version of the compiler, that is being used to compile that sub-app. When you load the sub-app, you get to choose what level of trust your main app will have with it. This is a very important consideration, because if you don’t have complete control over the source of a sub-app, you should seriously consider loading that sub-app into a separate security sandbox, rather than loading it into the same security sandbox as the main application.

Of course, there are trade-offs. What the new functionality lets you do depends on the level of trust you have between the main application and the sub-application.
If you load a sub-app into the same sandbox as the main app, then you can have a greater level of data sharing and interaction between the two apps. In separate sandbxoes, the apps have less interoperability (but some is still possible).

To load sub-apps, you still use the SWFLoader control. For multi-versioning support, the class has a new property: loadForCompatibility. Set this property to true to indicate that the sub-application might be compiled with a different version of the compiler.

You can get all the links to info about the Flex 3.2 release here:
http://www.adobe.com/devnet/flex/articles/sdk32_fb302.html

The documentation for the loading sub-applications feature is here:
http://www.adobe.com/go/learn_flex_loading_applications_en

New Community Help blog

There’s a new Community Help blog at Adobe. It’s a good place to get news about new Community Help features, as well as provide feedback about stuff you like, dislike, or absolutely despise.

You can see the blog here: http://blogs.adobe.com/communityhelp/

Seeking feedback on Labs

Some Adobe folks are asking for feedback to help drive improvements to Adobe Labs. Since Flex was one of the earliest releases on the Labs site, I figure some of the readers of this blog might want to participate in the discussion.

There’s an open-ended thread in the online forums:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=586&threadid=1384250&enterthread=y

We are trying to get as much feedback as possible by in late-August/early-September.

Customizing the layout of legend items

This question came up in a recent forum posting:

You can make the LegendItems in a Legend display horizontally in a long line or vertically in a long list, but how do I customize the layout of these LegendItems?

The answer took me a little while to figure out, so I’ll post it here so others can benefit from it… Yes, the answer is also posted as a response in the forums, but I can put running examples here so you can see what I mean.

First, an app that shows the problem. The ColumnChart control in the following app has 7 separate series, each with a separate entry in the legend. If you lay out the LegendItems vertically, you get a lot of extra white space to the right of the legend, below the chart, as the following example shows:

If you lay the LegendItems out horizontally, you get scroll bars at the bottom of the application, as the following example shows:

There’s no way (that I could figure out) to eliminate those scroll bars without clipping the LegendItems.

One solution, which can be adapted to any number of layout techniques, is to build the list of LegendItems in ActionScript and add them to a dynamic grid layout. I did this in a single loop that takes into account the preferred number of items per row:

for (var j:int = 0; j < numRows; j++) {
var gr:GridRow = new GridRow();
myGrid.addChild(gr);
for (var k:int = 0; k < rowSize; k++) {
if (z < myChart.series.length) {
var gi:GridItem = new GridItem();
gr.addChild(gi);
var li:LegendItem = new LegendItem();
// Apply the current series' displayName to the LegendItem's label.
...
// Get the current series' fill.
...
// Apply the current series' fill to the corresponding LegendItem.
...
// Add the LegendItem to the GridItem.
gi.addChild(li);
// Increment any time a LegendItem is added.
z++;
}
}

Before you do any of this, you have to remove all the existing GridRows and GridItems. You do this with a call to the removeAllChildren() method, like this:

myGrid.removeAllChildren();

There are a couple of gotchas in this approach: you have to be sure to grab the right labels so that your dynamic LegendItems match the series’ display names that show up in the chart. You do this by accessing the chart’s series array’s displayName property, as the following example shows:

li.label = myChart.series[z].displayName;

You also have to get the color (actually, it’s the “fill” property) from the series, and apply it to the corresponding LegendItem’s fill, as the following example shows:

var sc:SolidColor = myChart.series[z].getStyle("fill");
li.setStyle("fill", sc);

Here’s a running example that lays out the LegendItems in the selected number of rows. I also took the opportunity to apply some styles to make the LegendItems a little more attractive. They are of uniform width and their background colors are the same as the marker color, as the following example shows:

li.setStyle("textIndent", 5);
li.setStyle("labelPlacement", "left");
li.setStyle("fontSize", 9);
gi.setStyle("backgroundAlpha", "1");
gi.setStyle("backgroundColor", sc.color);
gi.width = 80;

Here’s the running example:

Here’s the source code:
Download ZIP (9K)

Plugins for Ion search

If you use the http://community.adobe.com/ion/ search engine for finding Flex information fast, then you might find the following useful: A plugin for FireFox and a Google Toolbar custom button for IE that give you instant access to the search engine from within you browser.

FireFox plugin for Ion

  1. Download the ion.xml file.
  2. Save this as ion.xml in your {Mozilla}\searchplugins directory (for
    example, “c:\Program Files\Mozilla FireFox 3 Beta 5\searchplugins”)
    and it should show up in your list of search plugins.

Goole Toolbar custom button for IE

  1. Go to the Ion home page: http://community.adobe.com/ion.
  2. Select Flex from the product drop down list.
  3. Right-click on the text input in the Ion search and click “Generate
    Custom Search…”.

    The Google Toolbar Custom Button Generator dialog appears.

    You can replace “community.adobe” in the first text input with any
    name you want to appear in the toolbar. In the second text input, you
    can replace “Adobe Community Help – Search Results” with any
    description you want.

  4. Click the Replace button and click OK.

That’s it. You can now select “community.adobe” (or whatever string
you specified) from the toolbar, and then execute a search directly.

Alternatives to using the Fade effect with text

Someone recently asked if there were any ways to fade text out in a Flex app without having to embed the font for that text. Currently, if you want to appkly the Fade effect to any controls that contain text in a Flex app, you have to embed the font so that Flash Player can do the fading properly.

This question led to an interesting thread that revealed a couple of alternatives to fading text without embedding the font. The result is that the SWF file size is smaller because it doesn’t contain any font symbols.

First, here’s code that embeds a font and defines a fadeIn and fadeOut effect:

[Embed("assets/MyriadWebPro.ttf", fontName="MyMyriad")]
public var myriad_font:Class;
...
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>

<mx:Label id="label1" text="Hello World"
fontFamily="MyMyriad" fontSize="24"
hideEffect="{fadeOut}" showEffect="{fadeIn}"/>

Here’s the running example:

This app is 190K. It works very well because the Fade effect is applied directly to the control that uses an embedded font to render the text.

If you didn’t embed the font, then the Fade effect would appear to fail: instead of a slow fade, you’d get a single instant where the text disappears. Non-embedded fonts don’t include bitmap information for the Player to apply a Fade effect to.

Here’s a running example that shows the failing fade on non-embedded text:

Now for the alternatives.

The first alternative is really clever: Apply the BlurFilter to the text before attempting to fade it in and out. When you apply a BlurFilter to text, Flash Player converts the text to a bitmap. Once the text is a bitmap, it can be faded in and out with the Fade effect. So instead of actually blurring the text with the BlurFilter, you just apply the BlurFilter with some dummy settings (0,0,0), and then you can fade the text with the Fade effect.

Here’s the code that applies a BlurFilter to the text when the app initializes:

private function addBlurFilter():void {
var bf:BlurFilter = new BlurFilter(0,0,0);
var myFilters:Array = new Array();
myFilters.push(bf);
label3.filters = myFilters;
}

When you toggle the checkbox, the Fade effect now appears to work seamlessly. Here’s the running example:

The SWF file size is 165K. Adding the BlurFilter does not increase the SWF file size because you don’t have to embed the font symbols. It might increase runtime memory usage because Flash Player now has to keep bitmap data in memory for that text, but it’s still a damn clever trick, I think.

The second alternative is to use the Dissolve effect rather than the Fade effect. The Dissolve effect actually creates a rectangle over the target area, and applies a dissolve to the rectangle so that the underlying content appears to fade in and out.

Dissolve effects are set up and applied just like Fade effects:

<mx:Dissolve id="dissolveOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>

<mx:Label id="label4" text="Hello World" fontSize="24"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>

Here’s a running example:

As with the Blur effect, using the Dissolve effect does not increase the SWF file size because you don’t have to embed the font symbols.

This ZIP file (2KB) contains the complete source MXML files for the three working examples in this blog entry.

New “Community Help” features for Flex

The Adobe web team is rolling out new functionality to help Flex coders find the help resources they need.

Currently, the “Ion” project consists of a customized search engine that is populated with the best of the Flex-related resources on the web. You can access this new search feature directly at http://community.adobe.com/ion/. You can also search it by using the “Community-Powered Search” input on the Flex DevNet site.

Also part of Ion is the back end for commenting on Livedocs and DevNet articles. Prior to this, there was no commenting on DevNet articles, and the Livedocs commenting engine was much more restrictive.

This is just the beginning of the Ion project.

Extracting data visualization source code

All users have access to the Flex 3 SDK source code. You can view the ActionScript source files for classes like Button and DataGrid. The source code is in the frameworks\projects\framework\src directory of your Flex installation. The source code for the data visualization projects does not come pre-installed, however. If you have a Flex Builder Professional license key, you can extract the data visualization source code, which include the charting controls, the AdvancedDataGrid classes, the OLAP classes, and the automation classes. To view your Flex Builder license key, select Manage Flex Licenses from the Help menu.

To extract the data visualization source code, you use the DMV-source.jar file. This file is located in the SDK’s lib directory. If you are using Flex Builder, the lib directory is located at {Flex Builder 3}\sdks\3.0.0\lib.

The syntax to extract the data visualization source code is as follows:

> java -jar DMV-source.jar {license-file-location} {output-location}

The first argument is the location of the license.properties file. This file must contain a valid Flex Builder 3 Professional license key. The second parameter is the location that you want the data visualization source code to be extracted to.

If you installed Flex Builder 3 Professional, then the license.properties file is located at the following locations, depending on your operating system:

  • Windows: C:\Documents and Settings\All Users\Application Data\Adobe\Flex\
  • Mac OS: /Library/Application Support/Adobe/Flex/
  • Linux: ~/.adobe/Flex/

The following example extracts the data visualization source code to the c:\temp\dataviz_source directory on Windows:

java -jar c:\Flex Builder 3\sdks\3.0.0\lib\DMV-source.jar
"C:\Documents and Settings\All Users\Application Data\Adobe\Flex\"
c:\temp\dataviz_source

If you have a valid Flex Builder 3 Professional license key but did not install Flex Builder, then you can create a license.properties file anywhere, and point to it when you use the DMV-source.jar file. The syntax of the license.properties file is as follows:

flexbuilder3={license_key}