Discussing the nuts and bolts of software development

Monday, April 27, 2009

 

FlexDock

FlexDock is a custom component which allows to have a number of "expandable boxes" placed in horizontal direction. It is not possible to have more than one box expanded at the same. Click on the box expanding the clicked box and shrinking previously expanded box. Shift + Click shrinking the expanded box.

The component which is actually our "box" is called CanvasBox. For expanding the boxes I prefer to use Caurina Tweener, it is also possible to use built-in mx.effects.Resize, but I prefer Caurina Tweener's one:

private var _rollOverTween:Object = {width:200, height:200, time:0.45, transition:"easeOutBack", onComplete:onRollOver};
private var _rollOutTween:Object = {width:90, height:90, time:0.2, transition:"linear", onComplete:onRollOut};

When the user clicks on the button the Tweener.addTween( this, _rollOverTween); method is called, it is possible to change the content of the box in the click handler, but if you want your UI not to be broken it is better to do those changes in the onComplete handler of the tween.

Besides the CanvasBox component we also need to have a component which will hold the boxes. It is called BoxHolder and it is template component. It has _content field which is storing the boxes, pay attention at [ArrayElementType("CanvasBox")]:

// An array which stores the UI components
// of our content
[ArrayElementType("CanvasBox")]
private var _content:Array;

Every time you click on a box, the closeOthers method is called which is shrinking previously expanded box.

private function closeOthers(event:MouseEvent):void
{
   for each(var component:CanvasBox in _content)
   {
      if(component != event.currentTarget)
      {
         component.roolOut();
      }
   }
}

DEMO | SOURCE

Comments:
Nice! I didn't know about ArrayElementType. Very informative.
 
It will be useful for you to learn more about college education in any case. You can use it in order to achieve success in your career.
 
I was very happy to find this site. I really enjoyed reading this article today and think it might be one of the best articles I have read so far. I wanted to thank you for this excellent reading !! I really enjoy every part and have bookmarked you to see the new things you post. Well done for this excellent article. Please keep this work of the same quality.
Data Science Course in Bangalore
 
Post a Comment



<< Home

This page is powered by Blogger. Isn't yours?