Tuesday 26 May 2009

ComboBox in TitleWindow Header

I am elaborating this example by using a ComboBox, but any other appropriate component can be added to the header of a TitleWindow ( say Buttons for example)

To add a ComboBox to the TitleWindow, you would need to override the function createChildren() of TitleWindow. Then you would need to add the ComboBox under TitleWindow's titleBar.
Hence write a new class, say ComboTitleWindow and extend TitleWindow.You would need to position the ComboBox according to your convenience. I positioned it such that it would just start after the TileWindow title, but if the title is so long that it would push the ComboBox out of the TitleWindow, it would be positioned over the title.


public class ComboTitleWindow extends TitleWindow
{

public function ComboTitleWindow()
{
super();
}

private var combo:ComboBox=new ComboBox();

override protected function createChildren():void
{
super.createChildren();
this.combo.width=100;
this.combo.height=20;
this.combo.visible=true;
this.combo.includeInLayout=true;
super.titleBar.addChild(this.combo);
positionChildren();
}

public function positionChildren():void
{
this.combo.y = 5;
if(super.titleTextField.measuredWidth+120<this.unscaledWidth-30)
this.combo.x = super.titleTextField.measuredWidth+20;
else
this.combo.x = this.unscaledWidth-130;
}
}

Monday 18 May 2009

Enabling Drag Scrolling in Flex Tree where Custom Drag Drop handlers have been used

First of all, Drag Scrolling is the feature which automatically scrolls a particular window/area while you are dragging certain items and have reached the edge of that window.

If you are using custom Drag drop event handlers (i.e. in every handler event.preventDefault() has been called) in Tree, the Drag Scrolling functionality stops. This is pretty obvious since the default action of the event has been prevented.

Now to have Drag Scrolling in these kinds of scenarios, you would have to call

{Tree Instance}.showDropFeedback(event);

in your "dragOver" Event handler. This will call the necessary flow to have drag scrolling on you Tree. But make sure that you add the below mentioned code in your "dragDrop" Event handler.

{Tree Instance}.hideDropFeedback(event) ;
event.target.mx_internal::resetDragScrolling();

Other wise you may experience sticky drag scrolling.

But this will also show the default "dropIndicatorSkin" of the Tree while you area dragging. In case you want to show your own custom skin please set it in the Style Sheet of your application.
For example :

Tree{
dropIndicatorSkin: Embed(source="image.png");
}

Also if you would like to show no "dropIndicatorSkin" at all, set a 1x1 transparent image for the skin. Setting the skin to
ClassReference(null);
did not work for me which is usually used for setting null skins.