Flex Property Bag Class – Cascading Property Sheets v2.0.1

Santa has brought you a Christmas gift. The Property Bag class.

If you’ve ever had numerous components on your stage that all shared the same styles using CSS really saved you time. One of things CSS does well is apply styles. But what if many of the components shared the same properties? A property on many components is rowHeight. This is not a style but a property. So you cannot use a style sheet to set it. So what if in your app you had ten list components that all had the same properties. For example, width=150 and rowHeight=18. You would have to apply these properties to each component instance. Its a little extra work. But if you only do it once its not so bad. Now what if you were told to change one of those properties across the board. Now all of a sudden you have to change it in 9 different places. It is slowly starting to eat up much of your development time.

Enter the Property Bag class. This class will allow you to set properties in style sheets like you set styles in style sheets. You define a class selector with properties in it and those properties get applied to your component. This has save me loads of time already. View the Demo.

To use it you add the PropertyBag.as class into your project.

In a style sheet class selector in your Application file define your properties.

.myProperties {
	rowHeight:18;
	verticalAlign:"middle";
	verticalScrollPolicy:"off";
	width:200;
	x:20;
}

Note: You can mix in styles but you should use a separate class selector if you have a lot of them.

Apply them to your component in the initialize event.


The first parameter is the event object. This is used to get a reference to the Component instance. The second parameter is the name of the class selector (minus the starting period). View the Demo. Right-click on the demo to view the source code and zip file.

These are not really “cascading” in application but neither are 90% of styles. The name is merely to convey an understanding. I hope you enjoy.

PS This Christmas gift is brought to you courtsey of Michael Schmalle and myself. Be sure to thank him as well. :)

This entry was posted in Flex. Bookmark the permalink.

4 Responses to Flex Property Bag Class – Cascading Property Sheets v2.0.1

  1. JabbyPanda says:

    Nice small utility, great thinking

    I loved this single line from PropertyBag.as:
    Line 48: instance[name] = value,

    I thought for some reason that the days of variables of the kind like this[“str”+ i] were gone with AS2.

    And one correction although, accordingly to Flex 2 livedocs verticalAlign is a style, not a property:
    http://livedocs.macromedia.com/flex/2/langref/mx/controls/listClasses/ListBase.html#style:verticalAlign

  2. Judah says:

    You are correct. I had misapplied that. Thanks. I updated the article to reflect the new improved changes. This is now version 2.0.1 of “Flex Property Bag” article. Much improved.

  3. [NikO] says:

    Hey

    Really great utility :)

    What do you think about extending the flex css parser to enable more css selector like :

    .myCustomButton {
    color:red;
    }

    MyCustomComponent.myCustomButton {
    color:yellow;
    }

  4. Judah says:

    That would be awesome

Leave a Reply

Your email address will not be published. Required fields are marked *

Wrap your code before posting! Click the links below:

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">