Easy Flex

Wahoo!!! GridBag in Flex! 😉

-James

Hi Evtim,

i’am running into several errors with the public FB4 Beta build.
Did you check this with the actual sdk?
I can only use the class on groups but not with list demoed in your example.

Thanks for any help!

Cheers, Sven

Hi Evtim,

yes you can! 😉

Thanks for the update!

Cheers, Sven

Nice job! Pretty work!

Bonjour Evtim!

Do you have an idea why adding the ‘ dragEnabled=”true” dropEnabled=”true” dragMoveEnabled=”true” ‘ properties on the list don’t seem to work correctly? (while it does work when using a normal TileLayout)

I guess there are some more methods that should be overwritten to make this work though I have no idea how to find out which ones.

Kind regards,

Jochen

ps: Thanks a lot for the interesting articles in this blog! Appreciate your effort a lot.

Hi Jochen,

I am having different issues with the TileLayout, I have a few list’s ontop of each other and there is a huge gap between each list as if the content in the list is not measuring the height correctly, this only happens when the list Orientation is TileOrientation.Rows, have you had the same problems?

Thanks

(using SDK build 10485)

Hi Evtim, I will do thanks

Posted: http://forums.adobe.com/thread/565055

I noticed a peculiar measurement bug when I decided to use this on a DropDownList skin’s datagroup.

I don’t suppose anyone else has run into it. But, if you can tell me why a VerticalLayout wouldn’t have this problem when the FlowLayout does, I can try to work a fix into it.

Here is a version with vertical spacing and a ‘vertical compress’ horizontal alignment option for those times when you can’t have white space:

package components
{
import mx.core.ILayoutElement;

import spark.components.supportClasses.GroupBase;
import spark.layouts.supportClasses.LayoutBase;

public class FlowLayout extends LayoutBase
{
//—————————————————————
//
// Class properties
//
//—————————————————————

//—————————————————————
// horizontalGap
//—————————————————————

private var _horizontalGap:Number = 10;

public function set horizontalGap(value:Number):void
{
_horizontalGap = value;

// We must invalidate the layout
var layoutTarget:GroupBase = target;
if (layoutTarget)
layoutTarget.invalidateDisplayList();
}

//—————————————————————
// verticalGap
//—————————————————————

private var _verticalGap:Number = 20;

public function set verticalGap(value:Number):void
{
_verticalGap = value;

// We must invalidate the layout
var layoutTarget:GroupBase = target;
if (layoutTarget)
layoutTarget.invalidateDisplayList();
}

//—————————————————————
// verticalAlign
//—————————————————————

private var _verticalAlign:String = “bottom”;

public function set verticalAlign(value:String):void
{
_verticalAlign = value;

// We must invalidate the layout
var layoutTarget:GroupBase = target;
if (layoutTarget)
layoutTarget.invalidateDisplayList();
}

//—————————————————————
// horizontalAlign
//—————————————————————

private var _horizontalAlign:String = “left”; // center, right

public function set horizontalAlign(value:String):void
{
if (_verticalAlign != “compress”)
{
_horizontalAlign = value;
}

// We must invalidate the layout
var layoutTarget:GroupBase = target;
if (layoutTarget)
layoutTarget.invalidateDisplayList();
}

//—————————————————————
//
// Class methods
//
//—————————————————————

override public function updateDisplayList(containerWidth:Number,
containerHeight:Number):void
{
var element:ILayoutElement;
var layoutTarget:GroupBase = target;
var count:int = layoutTarget.numElements;
var hGap:Number = _horizontalGap;
var vGap:Number = _verticalGap;

// The position for the current element
var x:Number = 10;
var y:Number = 0;
var elementWidth:Number;
var elementHeight:Number;
var vAlign:Number = 0;

switch (_verticalAlign)
{
case “middle” : vAlign = 0.5; break;
case “bottom” : vAlign = 1; break;
}

// Keep track of per-row height, maximum row width
var maxRowWidth:Number = 0;

// variables used for compressed layout
var firstRow:Boolean = true;
var elementsPerRow:int = 1;

// loop through the elements
// while we can start a new row
var rowStart:int = 0;
while (rowStart < count)
{
// The row always contains the start element
element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowStart) :
layoutTarget.getElementAt(rowStart);

var rowWidth:Number = element.getPreferredBoundsWidth();
var rowHeight:Number = element.getPreferredBoundsHeight();

// Find the end of the current row
var rowEnd:int = rowStart;
while (rowEnd + 1 containerWidth)
break;
//
if (firstRow)
{
elementsPerRow ++;
}
//
rowWidth += hGap + elementWidth;
rowHeight = Math.max(rowHeight, elementHeight);
rowEnd++;
}

x = 10;
switch (_horizontalAlign)
{
case “center” : x = Math.round(containerWidth – rowWidth) / 2; break;
case “right” : x = containerWidth – rowWidth;
}

// Keep track of the maximum row width so that we can
// set the correct contentSize
maxRowWidth = Math.max(maxRowWidth, x + rowWidth);

// Layout all the elements within the row
for (var i:int = rowStart; i <= rowEnd; i++)
{
element = useVirtualLayout ? layoutTarget.getVirtualElementAt(i) :
layoutTarget.getElementAt(i);

// Resize the element to its preferred size by passing
// NaN for the width and height constraints
element.setLayoutBoundsSize(NaN, NaN);

// Find out the element's dimensions sizes.
// We do this after the element has been already resized
// to its preferred size.
elementWidth = element.getLayoutBoundsWidth();
elementHeight = element.getLayoutBoundsHeight();

// Calculate the position within the row
var elementY:Number = Math.round((rowHeight – elementHeight) * vAlign);

// Compress the vertical space between elements in the same column
if (_verticalAlign == "compress" && !firstRow)
{
var elementAbove:ILayoutElement = layoutTarget.getElementAt(i – elementsPerRow);
y = elementAbove.getLayoutBoundsY() + elementAbove.getPreferredBoundsHeight() + vGap;
}
// Position the element
element.setLayoutBoundsPosition(x, y + elementY + vGap);

x += hGap + elementWidth;
}

// Next row will start with the first element after the current row's end
rowStart = rowEnd + 1;
firstRow = false;

// Update the position to the beginning of the row
x = 10;
y += vGap + rowHeight;
}

// Set the content size which determines the scrolling limits
// and is used by the Scroller to calculate whether to show up
// the scrollbars when the the scroll policy is set to "auto"
layoutTarget.setContentSize(maxRowWidth, y);
}
}
}

we cant able to view the source code.
Please check this

great approach, but how could i implement rowHeight and a variable width? the items should be scaled to fits the rowHeight.

Hi Jochen,

I was wondering if you (or anyone else!) got any further with your quest to add drag drop functionality to a custom layout.
I have created my own custom layout similar to a tile layout except a list item can have different widths according to a setting within the list, based on the column count.

For example, an item with a ‘cellAllocation’ of 2 will take up 2 columns whereas an item with ‘cellAllocation’ set to 1 will take up 1. If the column count is set to 3, they will all fit on one line.

This has all worked well up till now where I have to be able to move the ‘pods’ around on screen and so I was wondering if you could post an example of how you overcame this problem.

Anybody else who could help would be a life saver!

Thanks!

it doesn’t work with AdvancedDataGrid itemRenderer.
im trying to fix bug now.

Is there a way to have the height of the box grow or shrink to match the content size?