Improvements on my new LayoutManager experiment

[gcsolaroli]

I am happy to report that I have been able to achieve some positive result with my new LayoutManager. In the process have understood a little better the relationship between the layout manager, the layout region and the content panel that was not very clear to me when I have started coding the first version (http://www.clipperz.com/files/example/layout/index.html)

An example of the new version in action is here:
http://www.clipperz.com/files/example/layout2/index.html

The page consist of an outer-most BorderLayout (with a north, center and south regions).
The first panel of the borderLayout's center region (labeled "records") is filled with the IBLayoutManager: in this inner layoutManager are configured 4 different regions.

The layout constraints for each region are expressed assigning values to the following properties:
top, right, bottom, left, width, height.

Possible values for these properties are:
- a constant value (expressed in pixels);
- 'auto';
- '<name of another region>.<side> + <offset from the side>'

Example:
{
top:'auto',
right:'auto',
bottom:0,
left:'directLinks.right + 4',
width:250,
height:150
}

The region configured with these values will have a fixed width and height; will be stuck to the bottom, and its left side will be 4px offset from the right side of the 'directLinks' region.

I have been able to fit a grid in one of the regions. :-)

Hope you enjoy it. Any comment and/or suggestion is very welcome.

PS: if someone is able to put the top tabs ("records", "account", "data": they have a different look, but are "original" YUI-ext tabs!) aligned on the right side of the window tweaking only the CSS (obviously, without breaking anything else :-) ) I will be very happy to know how you have done it.

[qiuyl]

Sounds great but I cannot open the example file. In IE6 it has a javascript error : tag is null or not an object. Can you please check it?

[tryanDLS]

Please host the yui libs yourself - that link is not meant for public use.

Try a search for vertical tabs - I think that was asked before. Not sure if it was a possible future enhancement, or a 'maybe, but it would be a lot of work' response. Off the top of my head I would think it's not simple CSS as their is a lot of layout calc/positioning that would need to happen.

[brian.moeskau]

I can confirm the IE script error. I just see a big blank page.

[gcsolaroli]

tryanDLS: I will move the reference to the library.

As far as IE is concerned, I can use it only with Parallels Virtual Machine, and it is not very convenient. I will let you know when/if I can fix the problem for IE.

[gcsolaroli]

Trying to use a local version of the yui-ext script I have broken something badly.
I will let you know when I have fixed it, and possibly moved all the example somewhere else.

[gcsolaroli]

Moved the example here:
http://www.solaroli.it/files/clipperz/example/layout2/index.html

This version uses a local version of the yui-ext script, and I have also found an error (an extra comma in a DomHelper config parameter) that caused the error in IE.

Now IE shows the page fine, but if you switch between the tabs, the inner layout is not redisplayed correctly when you return to the first tab.

[gcsolaroli]

tryanDLS, about the right alignment, I have asked it already, but I don't need a vertical alignment.

I would like to have a plain horizontal layout (just like now), but with the tabs stacking from right to left, instead of from left to right (as it is now).

You can achieve this result using something like this:
div#main table.ytab-strip {
float:right;
}

but this will alter the rendering of the BorderLayout central region, reporting a wrong height for the container element.

[brian.moeskau]

I'm on IE 6 -- I see the layout now, but the details panel is empty except for the text 'record detail' even after clicking in the grid. I don't see any tabs anywhere, so I assume that the detail panel is not rendering correctly? The layout looks nice. Not sure what is supposed to be in the left-most west panel though -- it's kind of skinny and just says 'Direct links' (wrapped and clipped).

[gcsolaroli]

bmoeskau, this is just a test for an application I am working on, not the full application yet. :-)

The right side panel currently contains only the "Record detail" label, nothing else. Putting the detail of the selected record is my next step, now that the layout manager works.

On the right side, the "direct links" panel is also empty. I would like to implement a component similar to Jack own NavBar that he was using on the previous version of his blog. But it is only sketch at the moment, so I have left it out.

For me, the interesting stuff here is the flexibility that the region configuration allows you to achieve very easily.
With the previous version of the layout manager (now moved here: http://www.solaroli.it/files/clipperz/example/layout/index.html ) I have tried a more complex layout. The old implementation is very wrong, but the idea on how to achieve such a layout are still fine.