Flex pattern: Aggregate sub-component styles into parent

Scenario: A lot of times, certain children components share certain properties among them (the values should be all the same for this group of children for this instance of parent component) and yet it would be inappropriate to set them as Static. For example, if you are creating a 3D carousel, the radius of the carousel, the angle between one carousel item to the one next to it, etc. should be the same (ok, the angle could be different for your carousel. So let’s assume it is for mine).

Pattern: Parent creating children . One pattern in Flex, when you create sub-components, you have your parent component does the creation job. In our 3D carousel example, you can have a Carousel component and a CarouselItem component. One of the jobs for Carousel is it becomes a factory of creating contained CarouselItem instances.

Pattern: Aggregating subcomponent styles into parent component. Another pattern in Flex is you can aggregate the styles of your child component into your parent component, even though your parent component does not actually “use” those styles. They are there since it’s convenient and they are automatically passed through to the contained subcomponent.

How: We do this by defining those styles in metadata in the parent component, which assigns itself as the styleName for the subcomponent instances, which makes these instances inherit all the style values defined on the parent component.

//these are the code inside Carousel class

[Style(name=”threeDRadius”), type=”Number”]

override protected function commitProperties():void



for(var i:int=0; i<_dataProvider.length; i++)
var c:CarouselItem = new CarouselItem();

c.styleName = this;


See “Tutorial: DisplayShelf component”


2 Responses to “Flex pattern: Aggregate sub-component styles into parent”

  1. How to Get Six Pack Fast Says:

    The style of writing is very familiar . Did you write guest posts for other blogs?

    • maohao Says:

      Nah. I guess my style (if there is any) is probably “inspired” by the other bloggers you read. Thanks for the attention.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: