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
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.
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 VerDashLayout
Do 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)
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.
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
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:
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…)
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.
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.
In order to help Jouni find the bug/problem, I’ve created a little maven based demo app where the problem is visible.
In addition, I’ve uploaded also 2 images. The first is showing the problem and the second illustrates how it should be. It’s only necessary to change two lines in the code (replace a VerDashLayout with a VerticalLayout.).
Thanks Andreas, I promise I will take a look at the problem in near future. And I will at least push out a version where the IE9 bug is fixed. Thanks to Tomas for debugging the source of the problem.
Hopefully I’ll manage to fix some other issues as well, I feel a bit bad how unmaintained this layout component has become. Somehow I feel like I should try to merge my efforst between the DashLayout, WeeLayout and SimpleLayout, since they all try to address the same problems but from slightly different perspectives. I think it might easy some of the trouble I’ve had with the DashLayout if I just eased the DOM element count restriction a bit and allowed one extra wrapper per child component, like in WeeLayout. This would take the alignment calculations out of the picture and simplify the logic at least a bit.
I guess I could also try to use the CSS3 flex-box for the DashLayout, since it is now quite ready for use in all but IE6/7/8 and Opera.
DashLayout is a great we using it in our vaadin 6 project, but is thier any upgraing to Vaadin 7 for this Add-on
many Thanks to Jouni for this good work
)
