I have *already* created a full-featured "Layout Manager" (called UI.Layout). It is currently written as a jQuery plug-in, but will be ported to the UI API *soon* (and renamed ui.layout.js at that time).

This widget can create very complex layouts by nesting one within another. It also has built-in header/footer functionality within *each* layout region ('panes'). It generates a comprehensive set of classes for every element (following ui naming conventions) that provide 100% CSS control.

It has too many features to list, so check out the website:

Website: http://layout.jquery-dev.net
Demos: http://layout.jquery-dev.net/demos.html
Documention: http://layout.jquery-dev.net/documentation.html

Project: http://plugins.jquery.com/project/Layout
Group: http://groups.google.com/group/jquery-ui-layout

I created Layout specifically for use with UI widgets. I've even submitted updates for some UI widgets so they integrate better. For example, I added a 'resize' method for ui.accordion, and suggested the same for ALL ui widgets that require 'manual resizing': SEE http://layout.jquery-dev.net/demos/accordion.html

I released the plug-in a few weeks ago - it is now at version 1.1.3
SEE http://layout.jquery-dev.net/downloads.html#changelog

I wish there was a flashy demo with lots of nesting, widgets and graphics to show its full power and flexibility - but my time is taken up by updating the code base instead ;)

I will be *starting* to rewrite the code for the UI API soon. If there is interest in this widget, then it would be beneficial if experienced UI developers would browse the code and suggest how I could leverage the ui.core. The code is fairly well documented and a JavaDoc could be generated. If there is a reason, I can also improve/complete the code documentation.

PS: Need to make these comment input boxes bigger! :)

Hey Kevin - First off, welcome and your layout plugin looks great. We've taken a look and it looks really slick. I've been pushing to make sure all plugin widgets flow to fit their parent containers by being careful with how we structure our css so they will work well in a layout system like yours with minimal scripting needed. More tech-oriented team members can follow up on the script, but definitely check out the new CSS framework documentation and icon sprite to see if you can start migrating your code into this style system because it's a really useful plugin. Even if it takes a while to get this into and "official" release, having it be ThemeRoller compatible will be helpful for people to use this plugin. The icon sprite has a few useful icons intended for splitter panes so you might find everything you need.

Thanks Todd. I put a request to add 4 'pin button' sprites that will be useful for the layout theme I want to create. Having themeroller integration would be a bonus. (How about adding 'resizer bar' graphics?)

I've been reviewing ALL the API docs, including the CSS framework, because I just started migrating Layout to UI API format. This will take a while because I'm pretty busy right now, and I'm doing a lot of refactoring, and I'm adding new functionality (like state-management). It's a lot of work, but most efficient to do it all simultaneously.

Once complete, this will become version 2.0, and the filename will change from jquery.layout.js to ui.layout.js. I'll post an update here when the new version is ready and you guys can take a fresh look. I've already restructured a lot of the code, so it will be easier for you to review and suggest refinements after I complete the initial conversion.

In the meantime, feel free to ask questions or request features on the 1.x version. The widget is pretty flexible, so most things can either already be accomplished, or be added quickly.

I'm posting an update on the UI Layout widget because I have been swamped for the past few months, so have not yet converted Layout to UI widget format as promised earlier. I remain swamped, so probably will not find time until at least mid-summer. Before starting that, I still want to finish an update to make auto-sizing more intelligent and to implement some minor bug fixes.

However I have added more demos and instructions for integrating UI widgets with Layout:

UI Tabs Demo
http://layout.jquery-dev.net/demos/tabs.html

UI Accordion Demo
http://layout.jquery-dev.net/demos/accordion.html

UI Draggable/Droppable/Sortable Demo
http://layout.jquery-dev.net/demos/droppable.html

UI Date-Picker Demo
http://layout.jquery-dev.net/demos/datepicker.html

I've collected ALL integration information into a topic on our 'Tips' page...

http://layout.jquery-dev.net/tips.html#UI_Widgets

Some widgets, like tabs and accordions, work BETTER with Layout because they auto-size (accordion) and scroll (tabs) more intelligently - without any custom Javascript or CSS. Layout's built-in auto-sizing functionality compliments these widgets nicely.

So even though this widget won't be in UI format for months, it is already fully functional, and compatible with all existing UI widgets as far as I know.

I'll let you know when I finally get it converted to UI widget format.

Hi Kevin - This is a really nice plugin and I look forward to getting this into the UI widget format and CSS framework because I cna see this being useful to a lot of people. Is this already checked into the UI SVN or are you planning on doing a revision before contributing?

My plan is to do one more major release in its current format - Layout 1.3 - to refine the sizing/limits for layout-panes. I have this 60% done, but need to find a good block of time to finish it (hard to come by these days). As soon as that's done, I'll work on reformatting the widget code. I've already started this as well, but put it aside when I decided to do a 1.3 update first.

I was not planning to contribute Layout it until after I convert it to UI widget format. I thought that made the most sense.

Hey @Kevin Dalman,

great stuff! I am honestly baffled by the sheer features of that layout manager.

However, I would rather like it to be renamed to for example panel manager, one that for example could be attached to a given window or some similar construct. That way, even, toolbars, ribbons etc. could be integrated as panels and would automatically benefit from for example auto hiding etc. This would leverage the other plugins by a lot and would could down their code requirements by some numbers.

As for general content layout, I would use a different layout manager, that is less obstrusive and does simply render layouted content, for example forms etc. in user defined ways.

As for the general content layout manager i would like it to support different layouts, for example FormLayouts (see for example ext-gwt), FlowLayouts, GridLayouts (just like in your layout manager, Kevin), AbsoluteLayouts (user places content using absolute or relative positioning) etc.

@Kevin: does your layout manager support dragging panels from one location to another? See for example Eclipse or similar such UIs where you can drag a given panel, say the Outline view panel to a different location in the workspace window. Are you able to also make them free floating, i.e. by pressing a button one would make the panel free floating and by pressing it once again, it would dock into the position where it originated from, reorganizing the panel layout as required?

please do not make the general layout manager a widget, instead make it an utility that can be attached to any of the other widgets representing layout containers, i.e. say you have a div that includes three other divs

<div id="main">
<div/>
<div/>
<div/>
</div>

now, when adding a layout to the main div

$( "#main" ).layout( new FlowLayout() ).options( ... );

or some similar approach.

@Carsten: Re: "That way, even, toolbars, ribbons etc. could be integrated as panels and would automatically benefit... auto hiding etc."

Layout already does all of this. ANY block element can be a 'pane, including iframes, ULs, etc. Auto-sizing options allow panes to size-to-fit toolbars, ribbons, etc.

"As for the general content layout manager i would like it to support different layouts, for example FormLayouts, FlowLayouts, GridLayouts, AbsoluteLayouts, etc."

Each of these is a major project of its own, so we need to start with the greatest need and expand from there. FYI, the reason I didn't call my widget a 'border-layout' is because I designed it to be much more versatile that than. You can put a layout inside *any container*, and nest layouts as deeply as needed to create very complex layouts. You can even put layouts inside other widgets, like a dialog...

http://layout.jquery-dev.net/demos/layout_inside_dialog.html

I can see the Layout widget *eventually* becoming a multi-function component, where additional capabilities are separated into different JS files, like the Effects utility. New components can continue to be added, with a number of 'base' utilities that all share to reduce code duplication.

I also have ideas for widgets to enhance Layout. For example, I'd like a 'panel' widget that could be used inside layout-panes. These would be collapsible, resizable, sortable, movable and detachable. These could be used for many purposes, but would be ideal in a layout where you want to stack multiple panels in a sidebar. This is very common is desktop apps.

@Carsten: Re: "does your layout manager support dragging panels from one location to another?"

Not at this time, but it would be very easy to add a method call that 'swaps' a pane from east to west or north to south. I could probably add this in an hour because it is just a matter of copying data from one key to another and then calling resizeAll() to update the layout.

@Carsten: Re: "Are you able to also make them free floating, i.e. pressing a button would make the panel free floating and pressing it again would dock into the position where it originated from, reorganizing the panel layout as required?"

No, but this also would be relatively simple. I'd just add a new logic var like "isFloating" and updating the sizing logic. Panes can already be 'hidden', so the logic to remove and re-add a panes already exists. All that is needed is to make it 'draggable'. They could be made resizable while floating too.

However, I won't be adding any major new features for a while. I already have added many new features and refinements to version 1.3 (these are not in the documentation yet) - more than I planned. I have a release candidate version available in the forum and will post a final 1.3.0 version soon. After this, I'll only be doing patches and minor updates because...

Layout 1.3.x will be the LAST version of Layout in its current form. The next version will be rewritten in UI widget format, which will include substantial refactoring. But I am swamped with work so this will likely take a few months! I won't start any new features until after this is done. As indicated above though, you can do a lot by utilizing Layout's callbacks. Even the floating functionality you asked about could be accomplished with the existing version of Layout using callbacks and a little custom code.

@Carsten: Re: "make it an utility that can be attached to any of the other widgets representing layout containers, i.e. say you have a div that includes three other divs...
$( "#main" ).layout( new FlowLayout() ).options( ... );"

This is already easily done:

$("#main").layout({ [options] });

The only difference is that Layout requires that each pane be identified so that it knows 'where' to position each container. I could *assume* a specific order of elements, but I chose to force a 'selector' option - the defaults are classnames...

<div class="ui-layout-north"></div>
<div class="ui-layout-center"></div>
<div class="ui-layout-south"></div>
etc.

If the layout namespace is later extended to handle 'more layout types', then a 'type' option would handle this, just as it does in the extJS layout component...

$("#main").layout({ type: 'grid' });
$("#main").layout({ type: 'flow' });
$("#main").layout({ type: 'form' });

If you have any questions that are *specific to my widget*, feel free to ask in the Layout forum.

http://groups.google.com/group/jquery-ui-layout/topics

I don't want to fill up this page with discussion about my widget because it is not the official LayoutManager - yet ;)

I was working on a solution using the new position utility, the last two days I was able to come up with a mockup of how it work work. Currently it supports border layouts (applicaton and nested), hbox and vbox layouts. Heres a quick demo of a sample application structure:

http://www.ready.ca/layout/layout.html

There are two top regions, one south, an east (vbox),west (hbox), center (nested border layout with offsets)


Like I said it was quickly put together so its not perfect, but basically its a extendable layout system, you can add different types of layouts through the $.ui.layout.addLayoutType(name,obj) different type of "panels" through the $.ui.layout.addPanelType(name,obj)

I haven't implemented any events, resizing, closing etc yet. Let me know what you think?

Cheers,

Jay

put together a sample application here:

http://www.ready.ca/layout/app.html

If someone wants to run with this code and get it production ready feel free, my time is limited and I've spent too much on this already. Will get it as far as I need it for my Appcelerator.com application and then update it as I need to with more features.

Cheers,

Jay

Heres a different implmentation that supports resizable, closable, slidable etc integrated with Accordion, Tabs if someone wants to take this further :D

http://ready.ca/layout2/app.html

Hi All,

I will soon finish the final jQuery-plugin version of UI Layout (1.3.0) and start on an all-new UI-Widget version. Based on all I have learned about layout logic and broadly varying user requirements, *the new version will work much differently*. I thought I'd share the general concepts here because it is a more versatile layout widget than what is currently spec'd out here...

The current Layout plugin was created as a classic "border layout" tool, ie: north, south, east, west & center panes (only center is required). But internally the logic handles this as if it were really 2 layouts - a north, center, south layout (N-C-S) that contains a west, center, east layout (W-C-E) in the outer-center pane. This outer-center pane is 'virtual' in the current widget - only the inner-center pane element is a physical object (div, iframe, form, etc). This 'virtual layout' causes a lot of extra complexity internally, so the new version will eliminate this.

In real world use, it is rare that users want only a single, full-pane border-layout. Layouts are commonly 'nested' to create more complex layouts, sometimes 4 or 5 layers deep. Often these are within UI Tabs, UI Dialogs, popups, or other widget container-elements. So "page layout" is really just one of many ways it's used.

Resizing of nested layouts must be triggered from the outermost layout inward, because each 'layout container' must be resized before the inner elements can be. This cascade of resizing means performance of the layouts is critical, because there may be many layouts resizing in sequence. This means the internal logic needs to minimize DOM interactions, which is easier when the internals are simpler.

continued...