Posts in Category "Custom Components"

New Doc on Creating Flex Gumbo Components in ActionScript

Here is new documentation on creating Flex Gumbo components in ActionScript. This document is for those who want to override commitProperties(), partAdded(), partremoved(), or getCurrentSkinState(), or want to create custom states in their skin classes.

Download the PDF: Advanced Spark Visual Components in ActionScript

 

Stephen Gilson
Flex Doc Team

Creating ASDocs for Custom Adobe AIR Components

The Flex ASDoc tool parses one or more ActionScript class definitions to generate API reference documentation for all public and protected methods and properties, and for all [Bindable], [DefaultProperty], [Event], [Style], and [Effect] metadata tags. By default, the ASDoc tool links in all of the Flex SWC files required to compile custom Flex components. However, to use ASDoc to generate documentation for custom Adobe AIR components, you must link in the necessary AIR SWC files.

For example, you create a custom component named MyAirComboBox that extends the AIR mx.controls.FileSystemComboBox component. The directory location of your custom component file is:

C:\myApplication\myComponents\MyAirComboBox.as

Use the following ASDoc command to generate API reference documentation for MyAirComboBox:

..\bin\asdoc -doc-sources C:\myApplication\myComponents\MyAirComboBox.as -library-path+=..\frameworks\libs\air -main-title "My AIR API Documentation" -window-title "My AIR API Documentation" -output air-asdoc

This command assumes the following:

  • You run the command from the directory C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\asdoc in your Flex Builder installation directory structure. If you are using the Flex SDK, or have installed Flex Builder on another operating system, modify the paths in this command as necessary.
  • The AIR SWC files are installed in the directory C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\libs\air. This is the default directory location for a Flex Builder installation.This command uses the library-path option to the ASDoc tool to specify the directory location of the AIR SWC files. The”+=” operator to the -library-path option specifies to append the AIR SWC files to the Flex SWC files.
  • The ASDoc tool writes the output to the directory C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\asdoc\air-asdoc.

If you have created multiple AIR components, you can use the following ASDoc command to generate documentation for an entire package:

..\bin\asdoc -doc-sources C:\myApplication\myComponents -library-path+=..\frameworks\libs\air -main-title "My AIR API Documentation" -window-title "My AIR API Documentation" -output air-asdoc

See the Flex 3 documentation for more information on the ASDoc tool.

 

Stephen Gilson
Flex Doc Team

Using the Flex Component Kit for Flash CS3 to Create Flex Containers

You use the Flex Component Kit for Flash CS3 to create Flex controls, containers, skins, and other assets in Flash CS3 Professional, and then import those assets into your Flex application. The documentation that is currently shipping with Flex Builder does not contain the information on how to create Flex containers. This article contains a documentation update with this information.

This documentation will also be included in the next beta release of Flex Builder.

Download the PDF: Importing Flash CS3 Assets into Flex

Creating Resizable and Draggable Flex Components

I wanted users of a Flex application to be able to move and resize components at runtime so that the user could lay out the components however they wanted. This application lets the user move, resize, and minimize Panel containers much in the way you can in any windowing environment. While this application uses Panel containers, you could generalize it to for any Flex components.

To use it:

– Click down in the header area of a Panel to drag it around the application. Release the mouse when it is where you want it.

– Click down on the lower-right corner of the Panel to resize it. Release the mouse when it is the size you want. You can not set it to a size smaller than 50 pixes high and 150 pixels wide.

– Click the Minimize/Restore icons to hide/show the body area of the Panel.

The following application shows this functionality:

This application uses three files:

* CanvasDD.mxml – Main app that handles the drag/drop and resizing events. Resizing works for any component that dispatches a ‘resizeButtonClicked’ event; there is nothing in the Panel needed to resize it except the logic to determine when to dispatch the ‘resizeButtonClicked’ event.

* myComponents/DragPanel.as – Custom Panel component that adds the minimize/restore functionality, and dispatches a ‘resizeButtonClicked’ event to the main app to handle resizing.

* myComponents/RubberBandComp.as – Custom UIComponet that draws the rubber band on top of a Panel during resizing.

You can download the source code for these examples.