flowLayout

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

flowLayout

pol2095
Hello,

is-it possible to use a flowLayout with spark components ?

Thanks



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: flowLayout

Olaf Krueger
>is-it possible to use a flowLayout with spark components ?

It's been a while but IIRIC, you need to implement it by yourself.
Did you checked out this?:

http://saturnboy.com/2009/10/flow-layout/
http://evtimmy.com/2009/06/flowlayout-a-spark-custom-layout-example/

Maybe this helps,
Olaf





--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: flowLayout

pol2095
This post was updated on .
I used the evtimmy sample, it seems working with some modifications

package layouts
{
        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 = 6;

                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 = 6;

                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
                {
                        _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 = 0;
                        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;

                        // 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 < count)
                                {
                                        element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowEnd +
1) :
                                                                                                 layoutTarget.getElementAt(rowEnd + 1);
                                       
                                        // Since we haven't resized the element just yet, get its preferred
size
                                        elementWidth = element.getPreferredBoundsWidth();
                                        elementHeight = element.getPreferredBoundsHeight();

                                        // Can we add one more element to this row?
                                        if (rowWidth + hGap + elementWidth > containerWidth)
                                                break;

                                        rowWidth += hGap + elementWidth;
                                        rowHeight = Math.max(rowHeight, elementHeight);
                                        rowEnd++;
                                }
                               
                                x = 0;
                                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);

                                        // Position the element
                                        element.setLayoutBoundsPosition(x, y + elementY);

                                        x += hGap + elementWidth;
                                }

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

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

                        // 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);
                        layoutTarget.invalidateSize();
                }
               
                override public function measure():void
                {
                        var layoutTarget:GroupBase = target;
                        if (!layoutTarget)
                                return;
                       
                        // Use Math.ceil() to make sure that if the content partially occupies
                        // the last pixel, we'll count it as if the whole pixel is occupied.
                        layoutTarget.measuredWidth = Math.ceil(layoutTarget.contentWidth);    
                        layoutTarget.measuredHeight = Math.ceil(layoutTarget.contentHeight);    
                }
        }
}




--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/