Archive for August 27th, 2007

27
Aug

Charting in Flex Builder 3 (public beta 1 edition)

I’ve seen this come up on a few lists, and it is something I’ve struggled with, so I thought I’d do a brief post on it. Curious Flexers ask “How do I create charts in Flex 3?” (or “How do I use the AdvancedDataGrid in Flex 3?” also comes up).

Well, the answer is you have to download the public Flex Builder beta from http://labs.adobe.com/ and manually add the appropriate SWC to the compiler arguments. In earlier versions of Flex Builder, the charting components were in a file named “charts.swc” (see “C:\Program Files\Adobe\Flex Builder 3\sdks\2.0.1\frameworks\libs\”, for example) but in Flex Builder 3 the file is now named “datavisualization.swc” and it lives in “C:\Program Files\Adobe\Flex Builder 3\sdks\moxie\frameworks\libs\” (as of the Adobe Labs public beta 1, this path may change in future releases).

Anyways, long story short, the easiest way I’ve found to create a Flex 3 application that uses charts is to create a new Flex 3 project, set the compiler to “Flex Moxie M2″ (the default that came with the Adobe Labs Flex Builder public beta 1 — it seems my newer nightly build has some conflicts), and then add the “datavisualization.swc” into the Flex project’s library path. How do you do that, you may be asking yourself? Well, right-click on your project in Flex Builder and select “Properties” from the context menu. Next, select the “Flex Build Path” item from the list on the left, then click on the “Library path” tab. Click the “Add SWC” button, and navigate to “C:/Program Files/Adobe/Flex Builder 3/sdks/moxie/frameworks/libs/datavisualization.swc” and click “Open”, then “OK”. Click OK again to dismiss the project properties dialog box and return to the Flex Builder workspace. Now, you should be fine to create a charting or AdvancedDataGrid component application. Whew!

And just to prove that this little “Flexperiment” works, the following example creates a simple HLOC chart (High Low Open Close) which plots the historical Adobe stock price for the month of August 2007.

Full code after the jump.

Continue reading ‘Charting in Flex Builder 3 (public beta 1 edition)’

27
Aug

Changing the Accordion container’s easing duration and easing functions

The following example shows how you can control the easing duration and easing function that the Accordion container uses when changing the visible child container.

Full code after the jump.

Continue reading ‘Changing the Accordion container’s easing duration and easing functions’

27
Aug

Highlighting the Accordion container’s currently selected header

The following example shows how you can set the Accordion container’s selectedFillColors style to highlight the currently selected header.

Full code after the jump.

Continue reading ‘Highlighting the Accordion container’s currently selected header’

27
Aug

Resizing a Flex Accordion container to fit its contents

The following example demonstrates how you can make an Accordion container adjust its width to match the contents of the currently selected child.

Full code after the jump.

Continue reading ‘Resizing a Flex Accordion container to fit its contents’

27
Aug

Adding icons to a Flex Accordion control

The following example demonstrates how you can add embedded icons to a Flex Accordion container.

Full code after the jump.

Continue reading ‘Adding icons to a Flex Accordion control’