Skinnable custom component

[Barry Gold <Ba...@ca.rr.com>]

The most complex piece of visual design in my project is the custom 
buttons.  I'm attaching the code for them so you can see how I 
approached it.

Basically, each button is a partly transparent (50%) horizontal bar with 
lettering in the center and a border around it.  The right side of the 
bar extends some distance, gradually fading to 0% via a LinearGradient. 
  The button changes color when hovered over.

The ButtonStyles object is just a wrapper around an array of parameters, 
that specify the dimensions, color, margin, etc. of the buttons, so that 
I can have several different kinds of buttons, all drawn by the same 
base class.

But I've been reviewing the book I'm learning from, and it talks about 
custom and skinnable components.  And I'm wondering if I really need all 
this code.  Maybe I can do all this with a skinnable custom component 
instead?  Then I can statically "draw" the main menu and list of options 
in MXML.  That's one of my goals: to make as much of the layout/visual 
component of the project static as possible.

What do people think?  Is this doable?  Is it any simpler than the class 
I wrote?  Or does it make things more complex instead of simpler?

Re: Skinnable custom component

[OmPrakash Muppirala <bi...@gmail.com>]

On Tue, Feb 25, 2014 at 11:10 PM, Barry Gold <Ba...@ca.rr.com> wrote:

> On 2/25/2014 3:21 PM, Mark Line wrote:
>
>> See here for a really basic example:
>> https://dl.dropboxusercontent.com/u/9000077/SparkCustomComponentExample/
>> SparkCustomComponentExample.html
>>
>
> Could you provide the Flex source for that example?
>
>
It is available via Right click > View Source.


>
>  Flex 4 brought a lot of improvements which means you can split the logic
>> (component class HBarButton) and the design (Skin class HBarButtonSkin).
>>
>
> Okay, that sounds good.
>
>
>  You may find a buttonbar is already a good fit for your component though.
>> Maybe just use that with your own skin?
>>
>
> No, my "buttons" are horizontal bars, stacked vertically with a few pixels
> of space between them.
>

RE: Skinnable custom component

[Maurice Amsellem <ma...@systar.com>]

>No, my "buttons" are horizontal bars, stacked vertically with a few pixels of space between them.

So you can change the layout of your buttons to use VerticalLayout, in your buttonbar custom skin:

https://github.com/apache/flex-sdk/blob/develop/frameworks/projects/spark/src/spark/skins/spark/ButtonBarSkin.mxml

You will also change the skin of each single ButtonBarButton in that same skin to be the horizontal bar.

Everything can be done in pure mxml skins:

You have plenty of mxml skins in the SDK to be inspired from (see below). Yours seems to be much simpler.

https://github.com/apache/flex-sdk/blob/develop/frameworks/projects/spark/src/spark/skins/spark/ButtonBarMiddleButtonSkin.mxml

Take the time to get familiar with Flex4 spark: (skins, states, decoupled layouts). It's really powerful, and will save you hours...

Maurice

-----Message d'origine-----
De : Barry Gold [mailto:BarryDGold@ca.rr.com] 
Envoyé : mercredi 26 février 2014 08:10
À : users@flex.apache.org
Objet : Re: Skinnable custom component

On 2/25/2014 3:21 PM, Mark Line wrote:
> See here for a really basic example:
> https://dl.dropboxusercontent.com/u/9000077/SparkCustomComponentExampl
> e/SparkCustomComponentExample.html

Could you provide the Flex source for that example?

> Flex 4 brought a lot of improvements which means you can split the 
> logic (component class HBarButton) and the design (Skin class HBarButtonSkin).

Okay, that sounds good.

> You may find a buttonbar is already a good fit for your component though.
> Maybe just use that with your own skin?

No, my "buttons" are horizontal bars, stacked vertically with a few pixels of space between them.

Re: Skinnable custom component

[Barry Gold <Ba...@ca.rr.com>]

On 2/25/2014 3:21 PM, Mark Line wrote:
> See here for a really basic example:
> https://dl.dropboxusercontent.com/u/9000077/SparkCustomComponentExample/SparkCustomComponentExample.html

Could you provide the Flex source for that example?

> Flex 4 brought a lot of improvements which means you can split the logic
> (component class HBarButton) and the design (Skin class HBarButtonSkin).

Okay, that sounds good.

> You may find a buttonbar is already a good fit for your component though.
> Maybe just use that with your own skin?

No, my "buttons" are horizontal bars, stacked vertically with a few 
pixels of space between them.

Re: Skinnable custom component

[Mark Line <ma...@gmail.com>]

Hi Barry,

I think you might be trying to run before you can walk here in the Flex
world. Although kudus for trying to create an abstract class in
actionscript.

I'm slightly worried about your HBarButton class as you appear to be
extending the Sprite class. I wouldn't recommend this unless you are doing
it for an reason as you will miss out on all the performance and benefits
of the Flex component lifecycle.

I personally would recommend using extending SkinnableContainer for the
HBarButton. If you really need to hard code the skin class you could do it
in the commitproperties function. Although a better way to do this would be
to set it via CSS for all HBarButton components.

See here for a really basic example:
https://dl.dropboxusercontent.com/u/9000077/SparkCustomComponentExample/SparkCustomComponentExample.html

Flex 4 brought a lot of improvements which means you can split the logic
(component class HBarButton) and the design (Skin class HBarButtonSkin).

You may find a buttonbar is already a good fit for your component though.
Maybe just use that with your own skin?

Hope it helps, good luck learning








On 25 February 2014 21:28, Barry Gold <Ba...@ca.rr.com> wrote:

> The most complex piece of visual design in my project is the custom
> buttons.  I'm attaching the code for them so you can see how I approached
> it.
>
> Basically, each button is a partly transparent (50%) horizontal bar with
> lettering in the center and a border around it.  The right side of the bar
> extends some distance, gradually fading to 0% via a LinearGradient.  The
> button changes color when hovered over.
>
> The ButtonStyles object is just a wrapper around an array of parameters,
> that specify the dimensions, color, margin, etc. of the buttons, so that I
> can have several different kinds of buttons, all drawn by the same base
> class.
>
> But I've been reviewing the book I'm learning from, and it talks about
> custom and skinnable components.  And I'm wondering if I really need all
> this code.  Maybe I can do all this with a skinnable custom component
> instead?  Then I can statically "draw" the main menu and list of options in
> MXML.  That's one of my goals: to make as much of the layout/visual
> component of the project static as possible.
>
> What do people think?  Is this doable?  Is it any simpler than the class I
> wrote?  Or does it make things more complex instead of simpler?
>