This blog isn't maintained anymore. Check out my current project, an agile/scrum management tool.

Sunday, May 06, 2007

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:

  1. top
  2. left
  3. right
  4. bottom
  5. horizontalCenter
  6. verticalCenter
You could also specify the styles in a css sheet, or by adding them to an already existing style.

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: , ,

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 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 Anonymous, At 5/07/2007 10:02 AM  

  • Whoops, that should say:
    someComponent.setStyle("horizontalCenter", 0);

    By Anonymous Anonymous, At 5/07/2007 10:03 AM  

Post a Comment

Subscribe to Post Comments [Atom]



<< Home