Flex Custom Component Appearance

Flex is one of the most popular RIA development technologies today, with its excellent user experience to gain the favor of many users, so it also attracts a lot of programmers into the torrent of Flex learning. One reason why Flex is so popular is that the Flex interface works very well. Flex provides a variety of ways to customize the appearance of your components, making the Flex program interface colorful. This article through a simple and practical program examples (including bubble information balloon, image fillet, dynamic button, grid background), using bitmaps, vector graphics, SWF files to customize the skin, using Mask to create a cover effect, explained several of the custom components of the appearance of the advantages and disadvantages of the method. Through this article, readers can compare the system of the learning component custom appearance method, in the design of Flex UI, I believe this article can provide readers with help.

Introduction

Good flex apps are always gorgeous, some even stunning, and have to compliment Flex's UI effects. The default effect of the Flex component is general, so how are those gorgeous interfaces developed, it depends on the programmer custom Component appearance, the Flex component provides many ways to let the programmer customize the appearance of the way, this article through a specific application example, explained several of the author used the custom component method, It is believed that readers of the first Flex can benefit from this.

Instance implementation

Flex has already been out of Flex 4 version, this article is using Flex 3 version, the implementation section according to the following list in turn.

Development environment Configuration

Dynamic button Bitmap implementation

Dynamic button SWF implementation

Bubble Info Prompt Box

Grid background

Rounded corners of the image

In fact, there is no obvious relationship between the parts, and in addition to the development environment configuration, each of the other sections describes a way to customize the appearance of the component, so that the reader can see the specific section as needed. Annex is the standard Flex Builder 3 project, readers can download after import, in addition to the development environment configuration, the other parts of the above list corresponds to a mxml file, you can directly run the viewing effect. The specific correspondence can view the list in the attachment.

Development environment Configuration

All examples are developed using Flex Builder, which requires more than JDK5.0 support, and the example does not require server support, and Flash Player 9.0 needs to be installed.

Dynamic buttons

The concept of the dynamic button is the mouse hover, mouse click, the mouse left the control, the component presents a different appearance, these three different appearance can be through the background bitmap picture, the background SWF file implementation.