Custom shape panel/form in Flex

Question

Hello,

What I'm trying to do is to create a fancy custom-shaped login panel. It's functions and containing components should be pretty standard, just like in regular login panel - FormItem, TextInput, Validators, etc. I did some research and found that it is possible to create skins using Fireworks, however this does not solve my problem because it does not allow me to manipulate with panel shape. What would be the best way to do it?

Answer 1

My recommendation would be to use Degrafa framework for something like this. You could programmatically affect the skin of your component at runtime to change its shape.

Another route would be to use a simple canvas with image backgrounds that conform to your needs, but this isn't very flexible.

Answer 2

I would do the following:

1. Export the asset from Fireworks as a PNG with appropriate transparency
2. Embed the asset into your app and supply the appropriate Scale9 coordinates
3. Reference the embedded asset as the "borderSkin" style for your Panel.

Here's an example of doing this to a TitleWindow which is a subclass of Panel, so the same approach should apply:

http://butterfliesandbugs.wordpress.com/2008/02/15/using-a-border-skin-for-a-titlewindow-in-flex-3/

Answer 3

I'd agree with Joel, Degrafa is the way to go for total custom skins etc. Failing that (as it is an extra hurdle to figure out) I'd fudge it be using a Canvas instead of a Panel. Extend the Canvas class and make it look like whatever shape you are trying to do. Set the Canvas's background alpha to 0, then add the shapes you need. Using this approach you may well have to duplicate things that the panel can do that the Cavnas can't but you'll be able to customise the look.