Flex HBox, VBox and Box with background and border gradients Happy New Year 2009 !
Dec 12

Yesterday I published an article on new components with background and border gradients of colors, extending HBox, VBox and Box. These components were directly inspired by the GradientCanvas that I created a few month ago.

Directly inspired and even exactly the same… as only the parent class changed  :roll: . So I wanted to refactor the code in order to share the 98% of common code. I have done this using include statements. This worked well and I tried to do more…

And the result of this is a set of container components that I call GradientComponents. All these components are just composed by the mandatory constructor and 3 includes :

  1. the imports that are necessary to build the gradients
  2. the styles that are used to configure the different gradients
  3. the "body", containing all functions and overrides.

I don’t know if the use of the include statement is considered as smart but it is very simple and seems to work well. It’s the first time I use it.

As a result, you will be able to download below a set of GradientComponent including:

  • Box, Hbox, Vbox
  • DividedBox, HDividedBox, VDividedBox
  • Canvas (the famous one)
  • Form, FormItem, FormHeading
  • Panel
  • Tile, TileList, ViewStack
  • Accordion
  • RichTextEditor, TextInput, TextArea

in a "gradient version" of the original Flex components.

I have quickly modified the GradientHBox Style Explorer to use some of these new GradientComponents. The result is not perfect and I will probably refine it later but the primary goal was just to test and to demonstrate the components with their new backgrounds and borders.

Here is the demo :

Demo of GradientComponent



This component is free for use, modification and distribution under the following condition: Just mention the name and the url of the author in a part of your product that is visible to the user (about section, documentation…)


Version History:

Version 2.3

Added the property positioning.

Version 2.1.2

Return to the version number of the last GradientCanvas

Fixed a bug when the component has only one borderColor

Version 1.0

First release based on the GradientCanvas v2.1.1

Known issues:

Download GradientComponents Version 2.3

Downloaded a total of 7537 times

Have fun

Flattr this


Related posts

Written by Arnaud
Creative Commons License
Tags: , , , ,


Help me improve my blog by rating this post or sending a comment.

not goodquite goodgoodvery goodexcellent (4 votes, average: 5 out of 5)
Loading ... Loading ...

Comments are closed.