Differences in MXML & Script class attributes

[meddlingwithfir]

It seems there are attributes available to me in Flex that I cannot use inside my .AS classes.

For example, take the Button class. If I add a button via MXML:


<mx:Canvas id="myCanvas">
<mx:Button
id="myButton"
icon="@Embed('assets/myButtonImage.jpg')"
/>
</mx:Canvas>


That will compile just fine. But when I attempt to create a Button object via AS3 inside my <script> tag, the same set of attributes no longer exists:


var test:Button = new Button();
test.icon = "assets/myButtonImage.jpg";
myCanvas.addChild(test);


I get a compile time error:

1119: Access of possibly undefined property icon through a reference with static type mx.controls:Button.

So it's not liking my attempt to assign an icon dynamically. I am also confused as to why it states mx.controls.Button is a "static type"? Button isn't a static class, nor do I think I am trying to call a static attribute of Button.

Looking through the Button class in the API, I can see that "icon" attribute is of type "Class":


icon
Type: Class
CSS Inheritance: no
Name of the class to use as the default icon. Setting any other icon style overrides this setting. The default value is null."


But it doesn't tell me which class it is expecting -- is it a DisplayObject, a Sprite, what?

[senocular]

icon is a style, not a property of button. When editing the tag in code, the code hints provide icons that help you distinguish between what are direct properties, styles, events, etc. This should help you out in determining the difference between what is set how in MXML vs AS (note use setStyle in AS for icon).

[meddlingwithfir]

Ahh, thanks! So what's the "down & dirty" difference between attributes and styles? Attributes can be changed via a direct call, but styles need some extra tuning?

(oof, was going to check the livedocs and check some things myself, but the seem to be down at the moment...)

[meddlingwithfir]

Incase anyone else is wondering, here's a neat little demo on how to do this :)

http://www.udayms.com/flex/cbutton/

Here's the gist of it:

[Embed("imgs/btn_save.png")] private var saveIcon:Class;

var myButton:Button = new Button();
myButton.setStyle("icon",saveIcon);

[senocular]

well its not really a difference between attributes and styles. Anything can be defined in an attribute - that being an MXML tag property. Those attributes, however, reference different things. Some reference direct class properties, some styles, others other things.

The property x, for example, is a direct property of the Button class in ActionScript. This is defined within Button.as or inherited by a class it extends. If you have a Button instance in ActionScript, you can access it directly using buttonInstance.x because its a property of the Button class.

Styles like icon, on the otherhand, are separated from class properties. Many (if not all) styles could even have been defined as class properties much like the x property. However, by making it a style rather than a property, developers can now use CSS to set the value and have greater control over applying the same value to many instances at one time, this all thanks to the underlying style framework. To work with that framework, though, styles need to use style methods like setStyle() as they won't work as basic class properties.

The flexibility of MXML allows you to define all properties and styles (and events and transitions and... etc) as simple MXML attribute values. This makes it easier on your end without having to do all the complicated ActionScript which takes all the many forms it doe (instance.property, instance.addEventListener(event, handler), instance.setStyle("style", value), etc).

[meddlingwithfir]

However, by making it a style rather than a property, developers can now use CSS to set the value and have greater control over applying the same value to many instances at one time, this all thanks to the underlying style framework. To work with that framework, though, styles need to use style methods like setStyle() as they won't work as basic class properties.


Thank you! I think that's exactly what I needed to learn :)