Any clue as to how this could be achieved with the spark architecture?
Thx

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);
}
}
}

Hey – quick question – I’m having some trouble with a Flex 4 layout that I want to be liquid, 100% width AND height. Trouble is, I’m having a hard time getting my containers to clip properly when I resize the browser window, while the outermost container resizes correctly, the inner ones (where I have a scroller attached) seem to ignore the resizing and don’t clip properly.

Has anyone dealt with this issue and have a solution? Of course I could just do a fixed height, but that wouldn’t be ideal.

Very very good work of your WheelLayout. Regarding to usability of the wheel, please also refer to the effect of the following link:

http://theflashblog.com/flash/clickcarousel.swf,

but that is not an open source work. Please check.

Thanks.

tom flex :
Why don’t you use instead of changing yourself the state and playing an effect ?

sorry :
Why don’t you use S:TRANSITION instead of changing yourself the state and playing an effect ?

Interesting idea – basically adding sort of touch interaction? I may give it a try when I find the time.

Thanks,
Evtim