This article describes how to create skins for Adobe Flex applications by using Adobe Flash CS3, Adobe Illustrator CS3, Adobe Photoshop CS3, and Adobe Fireworks CS3, and then import the skins into a Flex Builder project. To create skins, you must install the Flex Skin Design Extensions from Adobe Labs.
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.
The “Using View States” chapter of the Flex Developers Guide has been rewritten to expand the overview, to explain different view-state scenarios, to add more examples, to enhance the description of adding and removing components as part of a change of view state, and to add examples that control the creation policy of components during a change of view state.
The Flex Component Kit for Flash CS3 lets you create interactive, animated content in Flash, and use it in Flex as a Flex component. These components work with Flex features such as view states and transitions, skinning, and tool tips. The content can be used as a child of a Flex container, or as a skin for any Flex component.
You can download and install the Flex Component Kit for Flash CS3, and the associated documentation, from Adobe labs here.
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.
We rewrote the Drag and Drop chapter of the Flex Developer’s Guide. The main changes were:
- Simplified the explanation of the drag/drop operation
- Added many new examples
- Added information and examples on performing a copy operation with the list-based controls (Tree, List, DataGrid) which is not handled by default
- Added information about overriding the default event handlers used by the list-based controls