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
 
Thanks for sharing your wealthy information. It is very beneficial for us.
This is one of the excellent posts which I have seen.
I go through your all of your blog, but this blog is the best one!! You've done really a great work dear keep it up!
windveil blue metallic
 
It isn't feasible to have more than one container increased at the equal. click at the field increasing the clicked field and shrinking the formerly elevated box. shift + click shrinking the expanded field. fish collagen | bovine collagen | collagen peptide suppliers
 
This blog is what I was looking for. This piece of content will really help me. Thanks for sharing it.
 
Post a Comment



<< Home

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