Drag area in Flex HGroup is smaller than the group itself - actionscript-3

Question

I have an HGroup that I want to drag elements onto. In order to style the HGroup, it's really a Group with a Rect and an HGroup within it.
The drag area in this code is only as large as the elements that are currently in the group (that's why I put a button in there to test it). As you can see, I've manually set the width of the Group and HGroup. Everything reports itself to be 300 wide, as it should be, but the drag area remains only as large as the number of elements in the HGroup. This makes me think the HGroup isn't actually what it's reporting to be (it reports 300 from accessing the .width property after its been set). The Rect is properly 300 wide, so I can see what the drop zone should be.
I feel like I must be doing something very obviously wrong, but I can't see it. Any ideas would be very appreciated!
EDIT: I wonder if there is some sort of masking issue. Adding a drag enter event on the rectangle (which I know is the right size, as I can see it) also doesn't result in the enter event firing. How could I find this out?
package components
{
import mx.core.IUIComponent;
import mx.events.DragEvent;
import mx.graphics.SolidColor;
import mx.managers.DragManager;
import spark.components.Group;
import spark.components.HGroup;
import spark.components.VGroup;
import spark.primitives.Rect;
public class TestVerticalConstraintExpression extends Group
{
private var expressions:VGroup;
private var topExpression:Group;
private var locked:Boolean = false;
public function TestVerticalConstraintExpression()
{
super();
this.width = 300;
expressions = new VGroup();
expressions.width = 300;
this.addElement(getBackground());
topExpression = new HGroup();
expressions.addElement(topExpression);
this.addElement(getBackground());
this.addElement(expressions);
topExpression.width = 300;
topExpression.height = 50;
topExpression.addElement(new ConstraintButton());
// Setup listeners for when things are dropped onto the expression group
topExpression.addEventListener(DragEvent.DRAG_ENTER,
dragEnterHandler);
}
protected function getBackground():Rect
{
var bg:Rect = new Rect();
bg.fill = new SolidColor(Math.round(Math.random()*0xFFFFFF));
bg.left = 0;
bg.right = 0;
bg.top = 0;
bg.bottom = 0;
bg.percentWidth = 100;
bg.percentHeight = 100;
return bg;
}
protected function dragEnterHandler(event:DragEvent):void {
DragManager.acceptDragDrop(event.currentTarget as IUIComponent);
}
}
}

Answer 1

A Group is essentially just a layout container. It has no graphic elements whatsoever, hence it is completely transparent except where you've put your ConstraintButton, which is why you can only drop onto that ConstraintButton and nowhere else in the HGroup.
So you must create a "hitzone" with a graphic element that has the same size as your HGroup. It may have its alpha property set to 0 so that you don't see it, but still can interact with it. The two simplest ways I can think of:
convert your HGroup to a BorderContainer with an Horizontallayout
put the HGroup in a Group together with a background Rect; something like this:
.
<s:Group id="topExpression">
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor alpha="0" />
</s:fill>
</s:Rect>
<s:HGroup id="yourOldTopExpression" left="0" right="0" top="0" bottom="0" />
</s:Group>
That said, why do you want to write a "view" in ActionScript? It makes the code so much more verbose (i.e. more work) and harder to read. Not to mention you make mistakes, like adding the background Rect twice to the main Group, which you would have spotted immediatley if your code were written in MXML.
And perhaps more importantly: because you put the subcomponent creation code in the constructor of your main class, your code will actually result in performance loss. You have to know and understand the Flex component lifecycle if you want to write components in pure ActionScript. MXML handles all this nitty-gritty for you.
If you're worried about mixing up MXML and ActionScript, you should read up on the Spark skinning architecture. (For an example of that, you could check out this answer which uses Spark skinning: Custom Composite Control not rendering correctly for only 0.5-1 sec after being added back into a VGROUP).