Programatically add constraints through Actionscript
Flex Builder has that great "Constraints" UI that allows you to anchor components to their parent that I'm sure everyone has used.

But what happens if you create an object in actionscript and then you want add constraints to it? There is no "top" property you can set to anchor the component to the top. It turns out the constraint system is entirely based on Flex's style system and can be used as follows:
var someComponent:SomeComponent = new SomeComponent();
var style:CSSStyleDeclaration = new CSSStyleDeclaration();
style.setStyle("top", 0);
style.setStyle("horizontalCenter", 0);
someComponent.styleDeclaration = style;
And BAMN, someComponent will be anchored to the top, center of it's parent (assuming it's parent is a container that supports anchors.) Available style selectors are:
Edit...
As a commenter has posted you can also use the setStyle method in addition to the various other methods I mentioned. So the following would also work:
someComponent.setStyle("top",0);
But what happens if you create an object in actionscript and then you want add constraints to it? There is no "top" property you can set to anchor the component to the top. It turns out the constraint system is entirely based on Flex's style system and can be used as follows:
var someComponent:SomeComponent = new SomeComponent();
var style:CSSStyleDeclaration = new CSSStyleDeclaration();
style.setStyle("top", 0);
style.setStyle("horizontalCenter", 0);
someComponent.styleDeclaration = style;
And BAMN, someComponent will be anchored to the top, center of it's parent (assuming it's parent is a container that supports anchors.) Available style selectors are:
- top
- left
- right
- bottom
- horizontalCenter
- verticalCenter
Edit...
As a commenter has posted you can also use the setStyle method in addition to the various other methods I mentioned. So the following would also work:
someComponent.setStyle("top",0);
Labels: Actionscript, development, flex
3 Comments:
The UIComponent Class has a setStyle method which you can call directly.
Take a look at:
http://livedocs.adobe.com/flex/201/html/styles_069_23.html#253161
By
Anonymous, At
5/07/2007 1:57 AM
Styles can be set in any number of ways in Flex - through an CSS stylesheet, in an mx:Style block, through the style manager and also with the setStyle() method provided on every UIComponent. So your example can be simplified even further to:
var someComponent:SomeComponent = new SomeComponent();
someComponent.setStyle('top', 10);
style.setStyle("horizontalCenter", 0);
and voila, your component will relayout anchored appropriately.
Deepa Subramaniam
Adobe Flex SDK
By
Anonymous, At
5/07/2007 10:02 AM
Whoops, that should say:
someComponent.setStyle("horizontalCenter", 0);
By
Anonymous, At
5/07/2007 10:03 AM
Post a Comment
Subscribe to Post Comments [Atom]
<< Home