Hi list,
As I don't have my act together enough to have the qooxdoo contrib thing
sorted out, I thought as the Flow.js class is so simple, I'd just post
it along for anyone to take a look at if they so desire.
I've cleaned out the cruft -- its a very simple layout class, and might
give others an idea of building their own layouts.
I'm going to spend a bit of time this weekend and see if I can add
alignX to the concept. Being able to 'flow' children and have them align
Left, Center or Right, would already be a potentially usable addition.
Should be fairly simple to figure out, and I'll drop the next version
into an email and post it along as well (am looking into setting up a
proper contrib project in SVN, but am sure it'll take me a bit to figure
that all out).
Have a nice weekend!
-Chris
---------------------------------
Rename Flow.txt to Flow.js and stick in with the other layout classes in
framework qx.ui.layout
Add the following to a test project to give the Flow.js a try:
main : function()
...snip...
/*
-------------------------------------------------------------------------
Below is your actual application code...
-------------------------------------------------------------------------
*/
var container = new qx.ui.container.Composite( new
qx.ui.layout.Flow() );
var button1 = new qx.ui.form.Button("1. First Button",
"custom/test.png");
container.add(button1);
var button2 = new qx.ui.form.Button("2. Second longer
Button...", "custom/test.png");
container.add(button2);
var button3 = new qx.ui.form.Button("3rd really, really, really
long Button", "custom/test.png");
button3.setHeight(100); // tall button
container.add(button3);
var button4 = new qx.ui.form.Button("Number 4", "custom/test.png");
container.add(button4);
var button5 = new qx.ui.form.Button("20px Margins around the
great big 5th button!");
button5.setHeight(100); // tall button
button5.setMargin(20);
container.add(button5);
var button6 = new qx.ui.form.Button("Number 6", "custom/test.png");
container.add(button6);
var button7 = new qx.ui.form.Button("7th a wide, skinny button",
"custom/test.png");
button7.setMaxHeight(20); // short button
container.add(button7);
this.getRoot().add(container, {edge: 0});
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
http://www.dihedrals.com
Copyright:
2008 Dihedrals.com
License:
LGPL: http://www.gnu.org/licenses/lgpl.html
EPL: http://www.eclipse.org/org/documents/epl-v10.php
See the LICENSE file in the project's top-level directory for details.
Authors:
* Chris Banford [chris at dihedrals dot com]
* Borrowed liberally from Basic.js and HBox.js
************************************************************************ */
/**
* A basic layout, which supports positioning of child widgets in a 'flowing'
* manner, starting at the container's top/left position, placing children left
to right
* (like a HBox) until the there's no remaining room for the next child. When
* out of room on the current line of elements, a new line is started, cleared
* below the tallest child of the preceeding line -- a bit like using 'float'
* in CSS, except that a new line wraps all the way back to the left.
*
*/
qx.Class.define("qx.ui.layout.Flow",
{
extend : qx.ui.layout.Abstract,
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
members :
{
/*
---------------------------------------------------------------------------
LAYOUT INTERFACE
---------------------------------------------------------------------------
*/
// overridden
verifyLayoutProperty : qx.core.Variant.select("qx.debug",
{
"on" : function(item, name, value)
{
this.assert( false, "The property '"+name+"' is not supported
by the flow layout!" );
},
"off" : null
}),
// overridden
renderLayout : function( availWidth, availHeight )
{
var children = this._getLayoutChildren();
var child, size, props, left, top;
var currLeft = 0, currTop = 0;
var tallestHeightInLine = 0;
var marginL, marginR, marginT, marginB;
// Flow Render children
for ( var i=0, l=children.length; i<l; i++ )
{
child = children[i];
size = child.getSizeHint();
props = child.getLayoutProperties();
// Calc Widths.
marginL = child.getMarginLeft()
marginR = child.getMarginRight();
// Check if we need to start a new 'row' ie, wrap down
& left.
// The first child is always on the 1st Line, that's
why we check if 'i' is zero.
if ( i > 0 && (currLeft + marginL + size.width +
marginR) > availWidth )
{
// -- Starts a new Line --
// get the current Top plus tallest of last
line's children.
currTop += tallestHeightInLine;
tallestHeightInLine = 0;
currLeft = 0;
}
// Calc Heights.
marginT = child.getMarginTop()
marginB = child.getMarginBottom();
// Initialize Tallest in Row for first pass on each row.
// Needs to start off with the height of the first
child.
if ( i === 0 )
{
tallestHeightInLine = (marginT + size.height +
marginB);
}
// Save this child's height, if its taller than last.
if ( (marginT + size.height + marginB) >
tallestHeightInLine )
{
tallestHeightInLine = (marginT + size.height +
marginB);
}
//child.renderLayout(currLeft, currTop, size.width,
size.height);
child.renderLayout( (currLeft + marginL), (currTop +
marginT), size.width, size.height);
// Save the current left position to add children at
currLeft += (marginL + size.width + marginR);
}
},
// overridden
// Don't need hints for a Flow box (I think)
// Sebastian's tip is to return null, but that's yakking, so returning
0 instead.
_computeSizeHint : function()
{
return {
width : 0,
height : 0
};
}
}
});
-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
