Excellent idea, +1.
Done, new project source code location is now at
http://github.com/jounikoivuviita/DashLayout/
. Please go ahead and add all issues and wishes to the issue tracker provided by GitHub. Thanks!
Excellent idea, will do.
Jouni, is dash layout provides the same automatic size claculaitons as core V/H ones ?
We’re starting to develop a new web front-end for a customer legacy CRM system, and it seems that UI screens will be a very very rich of components, so Im thinking of transferring most UIs to Css and Dash layouts to give web browsers more air to breath 
Sorry it took a while to get to answering…
Yes, DashLayout works like V/HLayouts, for the most part. Most notable difference is that DashLayout does not clip any of the child components, if they overflow out of their reserved slot. Rounding errors might be handled different as well, but those are really minor differences.
I started working on DashLayout again a week ago, and you should expect a new version in a week or two (I try to stabilize it a bit, currently has some bugs, mostly on IE).
Great, nice to see people using it! And don’t forget to use CustomLayouts as well, they’re offer some invaluable flexibility in many situations 
Don’t worry, Im also overflown of tasks, kind a busy winter and spring this year !
Great, so we’ll give it a try in a main priority. And they should co-exists with V/H perant (or vice-verca) layots as well, right ?
Oh yes, it is our old friend, mostly for the web site style apps but also for some complex forms as well.
By the way, it seems one of our apps are widely open -
http://aas.lib.pu.ru
, is is quite minimalistic visually, but provides access to the digital collection of library catalogue cards of the State University. Yep, it is all in Russian, but you can try direct guest login link
http://aas.lib.pu.ru/#guest
and then try navigating the catalogue tree
and yes, it all build with custom layout
Yes, DashLayout doesn’t make any presumptions about the contained components or its parent, so all existing layouts/components should work like normal.
Hi Jouni,
i tried your dashlayout, but i got a lot of layout problems. maybe i’m missing something
i have something like this:
public void applicationInit()
{
VerDashLayout rootLayout = new VerDashLayout();
Window mainWindow = new Window("Test");
mainWindow.setScrollable(true);
mainWindow.setContent(rootLayout);
setMainWindow(mainWindow);
VerDashLayout header = new VerDashLayout();
header.setWidth(1039, Sizeable.UNITS_PIXELS);
header.setHeight(200, Sizeable.UNITS_PIXELS);
HorizontalLayout logo= new HorizontalLayout();
HorizontalLayout navigation= new HorizontalLayout();
logo.setWidth(1039, Sizeable.UNITS_PIXELS);
rootLayout.addComponent(header);
header.addComponent(logo);
header.addComponent(navigation);
}
After changing the header from VerticalLayout to VerDashLayout, the logo and navigation div get a margin-bottom: 100px; .
<div style="overflow: hidden; float: left; clear: left; height: 100px; width: 1039px; margin-left: 0px; margin-top: 0px; margin-bottom: 100px;" class="v-horizontallayout"><div style="overflow: hidden; margin: 0px; width: 1039px; height: 100px;"><div style="width: 0px; height: 0px; clear: both; overflow: hidden;"></div></div></div>
This is the main cause for the layout problems. I tried setMargin(false), setExpandRation(logo/navigation,1.0F), explicit sizes for logo/navigation and css, but nothing works.
In use vaadin 6.3/6.2.7 and dashLayout 0.1.5, firefox 3.6.3
Thanks
Christian
Thanks for the bug report!
I’ll try to look at it more closely once I get the time to tinker with it again (maybe next week).
In the mean time, would you be so kind and add this bug and a good test case in
the issue tracker
, hosted by GitHub? Thanks again!
Hi,
Interesting tiny layout, I am actually tempted to make use of it as I like the prospect of proper margin and padding calculation plus DOM effficiency quite a lot.
Just one question so far
: Is that by desing/intention that items put in VerDashLayout are being drawn/updated on-by-one at client while being in visible state? That’s pretty annoying effect which gives impression of UI sluggishness. As opposed to standard VerticalLayout which make appearance of window content after all children are initialized and ready to be displayed.
Just imagine form/popup with 10-20 TextField rows organized in vertical fashion that gets their values poping in visually one after other in a time span of second or more.
Tomas
I have a problem which might involve the DashLayout… I have successfully been using the DashLayouts for some time now but since upgrading to Firefox 4 and using the latest Chrome (10.0.648.204) certain views that use DashLayouts take a long time (~10 seconds) to load; and once the view has been loaded the Vaadin loading indicator never goes away (it stays red) and the GUI is completely unresponsive. This behavior doesn’t occur for me on Firefox 3.6.16 and IE 8.
By running with the
?debug
suffix in the URL I was able to see the following error message once the view had been loaded:
I guess the problem is that a stack overflow occurs, and what puzzles me is how I am able to go around it. By doing anyone of these actions no stack error occur:
- Have the JavaScript console active in Chrome, or Firebug active in Firefox, before loading the view.
- Clear the cache in Chrome. However once the view is entered a second time the stack overflow error occurs.
- Exchange the DashLayouts to “normal” layouts, i.e. HorizontalLayout or VerticalLayout.
- Remove a single code line that performs addComponent(…) to one of the layouts used by the view, for example removing the following line makes the stack overflow error go away
bottomBar.addComponent(cancelButton); // bottomBar is a HorDashLayout and member of a VerDashLayoutDo you have any idea how the stack overflow problem can be remedied in a sustainable manner? I also wonder what happens to Firefox and Chrome once Firebug or the JavaScript console is active since the GUI is much more responsive and loads quicker compared to not having Firebug or the JavaScript console active (and it makes the stack overflow error go away! )
(Widgetset built with Vaadin 6.4.6, GWT 2.1.0 and Vaadin maven plugin 1.0.1. I also tried Vaadin 6.5.4 with the same result)
Hi!
I’m having some trouble updating my Vaadin project to 6.6.0 and GWT 2.3.0. Everything works fine in Firefox after compiling widgetsets with gwt-2.3, but IE9 shows only blank white screen and no errors. This happens only with DashLayout-addon, disabling it and using normal Vaadin layouts works just fine in IE9 with new GWT.
Has anyone encountered similar problems?
I can confirm this.
It seems that problem appears at line 182 of VDashLayout.java
It causes native JavaScriptException: (TypeError): Unable to get value of the property ‘toLowerCase’: object is null or undefined
only in IE9
Yep, I am apparently experiencing the same. Haven’t had an opportunity to trace it down properly though.
IE9 in native mode = blank screen
IE9 in IE8 compatiblity mode = works as usual
other obrowsers = works as usual
Thanks for this component, it looked like just the trick. I need borders around a layout, and this seemed like the only way to do it. Unfortunately, as soon as I started using this, my application started acting ‘flaky’. I’m dynamically updating the front end and doing this a lot:
contentPanel.removeAllComponents();
if(component != null){
contentPanel.addComponent(component);
}
where contentPanel was VerDashLayout, and after a few updated of the components I would see a spinning red ‘wait’ icon indicator, and then my app stopped working. I switched back to a regular vertical layout and everything worked fine but then I lost my borders.
Then I tried Panel and it working fine, but this add on does have promise I think (unless you just incorporate it into Vaadin 7 I guess…)
Best,
Mark
Same here.
Any one figure this out ? Our entire app is based on DashLayout.
Hi,
A small tweak of DashLayout’s source code will get you around the IE9 problem.
Class:
[b]
dashlayout-0.1.5-beta.jar
[/b]\com\vaadin\incubator\dashlayout\client\util\css\[b]
CSSRule.java
[/b]
Method
:
private static native JavaScriptObject [b]
searchForRule
[/b]
ToDo:
Close lines 71-78 to if-block to avoid NullPointerException on
r.selectorText.toLowerCase()
expression.
That said, I have no idea why
r.selectorText
may happen to be null / undefined exclusively on IE9. Having the patch applied I haven’t noticed any other side effects.
Cheers,
Tomas
Hi Jouni,
I tried the latest version on a login panel in order to reduce the html complexity. I use several VerticalLayouts together with
outerVLayout.setComponentAlignment(innerVLayout, Alignment.MIDDLE_CENTER);
to accomplish “boxes inside boxes that scale with the browser window”. I hope this is clear enough…
Unfortunately, the DashLayout behaves in my case different than the Vertical/Horizontal Layout components: the DashLayouts are bigger than the browser window and therefore I get scrollbars that I don’t want. The center aligning seems to align to the browser window and not to the parent component. In my example, innerLayout is center aligned in the browser window and not centered inside outerVLayout.
I think my alignment issue could be solved, but I don’t see how. I tried several possibilities and none of them gave a result that came close to my original layout.
Regards
Andreas