The following example demonstrates how you can create a Flex DataGrid control with a transparent background by setting the backgroundAlpha style to 0.0, and the alternatingItemColors style to an empty array.
Full code after the jump.
Continue reading ‘Creating a Flex DataGrid control with a transparent background’
The following example demonstrates how you can enable/disable sortable columns in a Flex DataGrid control using the DataGrid class’s sortableColumns property, as well as toggling specific column’s sortability using the DataGridColumn class’s sortable property.
Full code after the jump.
Continue reading ‘Toggling sortable columns in a Flex DataGrid control’
The following example shows how you can set custom status messages in a Flex Panel container by setting the aptly named status property.
Full code after the jump.
Continue reading ‘Setting custom status messages in a Flex Panel container’
The following example demonstrates how you can enable/disable draggable columns in a Flex DataGrid control using the DataGrid class’s draggableColumns property, as well as toggling specific column’s dragability using the DataGridColumn class’s draggable property.
Full code after the jump.
Continue reading ‘Toggling draggable columns in a Flex DataGrid control’
The following example demonstrates how you can enable/disable resizable columns in a Flex DataGrid control using the DataGrid class’s resizableColumns property, as well as toggling specific column’s resizability using the DataGridColumn class’s resizable property.
Full code after the jump.
Continue reading ‘Toggling resizable columns in a Flex DataGrid control’
The following example shows how you can easily create a drop shadow effect on a TextInput control using the dropShadowEnabled style (instead of creating a DropShadowFilter), as well as control the drop shadow effect’s color, direction, and distance (using the dropShadowColor, shadowDirection, and shadowDistance styles, respectively).
Full code after the jump.
Continue reading ‘Creating drop shadows on the Flex TextInput control’
The following example shows how you can use the navigateToURL() method in the flash.utils package to open new browser windows, or replace the content in the current window.
Full code after the jump.
Continue reading ‘Launching new browser windows from Flex’
The following example shows you how to toggle the header row in a Flex DataGrid control using the showHeaders property.
Full code after the jump.
Continue reading ‘Toggling a Flex DataGrid control’s header row’
The following example demonstrates a very simple Flex application which listens for the mouseWheel event (represented here by the MouseEvent.MOUSE_WHEEL constant) and updates a Label control on the display list.
Full code after the jump.
Continue reading ‘Detecting the mouse scroll wheel in a Flex application’
The following example demonstrates how you can customize the Flex 3 DataGrid control by specifying a custom skin for the horizontalSeparatorSkin and verticalSeparatorSkin styles.
These styles were added in Flex 3 and will not work with Flex 2.0.1.
Full code after the jump.
Continue reading ‘Styling the Flex DataGrid control using a custom separator skins’
The following example shows how you can customize the appearance of a Flex Button control by using an embedded font and removing the Button’s default skin.
Full code after the jump.
Continue reading ‘Styling a Flex Button control using embedded fonts’
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)’
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’
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’
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’