New Layout Component: DashLayout: leaner layouts with flexible styling

Jouni1 · December 11, 2009, 2:13pm

It’s me again with a new Community Friday project!

This one’s been under work for quite some time now (well over nine months), but the result is now ready for public scrutiny.

Without further ado, I present

DashLayout

Available as an add-on in the Directory

DashLayout has two different layouts: VerDashLayout and HorDashLayout, former corresponding to VerticalLayout and latter to HorizontalLayout.

DashLayout has the exact same API as Vertical and Horizontal layouts, since it fulfills the same tasks. The only exception to default Vaadin layouts is that DashLayout does not provide caption support (at least not yet).

These layouts are designed mainly for application level component positioning, not so much for Form type layouts, so missing captions shouldn’t be too bad.

Differences to normal Vertical and Horizontal layouts

Only one DIV element per layout. No extra container elements per child component. This means that the layouts are much leaner for the browser to render.
You can use arbitrary margin/border/padding values for the layout element, even if 100% size is used.
You can use arbitrary margin values for the contained child components, even if 100% sizes are used.

Demo

You can view a
demo
on GAE, it contains the CSS for your viewing also.

As you can see in the demo, you can easily create pretty complex combinations, like overlapping child components (which is impossible with current Vertical and Horizontal layouts).

Get It!

Download the add-on from the Directory

Source code is hosted at GitHub:
http://github.com/jounikoivuviita/DashLayout/

And as I said, API is the same as with Vertical/HorizontalLayout, so you should get started easily.

Lastly, I’d be more than happy to hear your opinions and experiences with this layout, so take it for a spin. Disclaimer: beta software, probable bugs ahead

UPDATE, v.0.1.5-beta

Added min/max-width/height support (only pixel values supported). See
readme.txt
for usage example
Added LayoutClickListener support. Works the same way as with other layouts

joonaslehtinen · December 11, 2009, 3:02pm

The demo looks good.

Please speculate: if there would be full support for captions, what would be the pros and cons of replacing the current VerticalLayout/HorizontalLayout implementations with this implementation? (falsely assuming that the caption support would not affect performance)

jean-francois.lamy · December 21, 2009, 1:59am

I am playing with the 0.1.5 jar under the december 19 nightly for 6.3. In the following image, there are two embedded HorDashLayouts. See http://screencast.com/t/OGNhYTMyNT (for some reason the img tag is broken in the wiki – preview shows me a broken icon under Chrome).

In the inner layout, labels are used to draw a"picture" of the plates on a weightlifting bar, and the divs obey my
setComponentAlignment(plate, Alignment.MIDDLE_CENTER);

However, in the outer HorDashLayout, the “+” button which is set to be aligned to the bottom, doesn’t and drifts up. By changing back to HorizontalLayout things go back to working as expected.

Note that the new layout fixes a bug I was having with HorizontalLayout, where the right half of my “picture” and the button would get clipped for no apparent reason under WebKit.

Jouni1 · December 21, 2009, 8:49am

Hi Jean-François,

Great that you’re testing my new layouts, happy to get feedback and bug reports.

It would help if you could provide a little more info about the setup, i.e. code sample.

I was able to create a working setup of your example, the button is aligned to bottom as it should be. Here’s my code:

        Window w = new Window("200kg");
        w.setStyleName("light");
        w.setWidth("300px");
        w.setHeight("180px");

        // Outer layout, 100% x 100%
        HorDashLayout h = new HorDashLayout();
        h.setSizeFull();
        h.setMargin(true);
        w.setContent(h);

        // Inner layout, undefined size
        HorDashLayout h2 = new HorDashLayout();
        h.addComponent(h2);
        h.setExpandRatio(h2, 1);
        h.setComponentAlignment(h2, "middle center");

        // "Weights"
        Label l = new Label("1");
        l.setSizeUndefined();
        h2.addComponent(l);
        l = new Label("2");
        l.setSizeUndefined();
        h2.addComponent(l);
        l = new Label("3");
        l.setSizeUndefined();
        h2.addComponent(l);

        Button plus = new Button("+");
        h.addComponent(plus);
        h.setComponentAlignment(plus, "bottom");

I only tested it with Safari/OSX. Was your problem apparent in all browsers?

jean-francois.lamy · December 21, 2009, 1:19pm

Code is dead simple, and yields the same results in FF3.6b5 as well.

		top.addComponent(imageArea);
		top.setComponentAlignment(imageArea, Alignment.MIDDLE_CENTER);
		top.addComponent(resizeButton);
		top.setComponentAlignment(resizeButton, "bottom");
		top.setExpandRatio(resizeButton, 0);
        top.setMargin(true);
		top.setWidth("100%");

Resulting inner HTML, courtesy of FireBug is as follows:


<div style="float: left; margin: 0pt; width: 322px; height: 168px;"
	class="v-dashlayout">
	<div
		style="float: left; clear: left; width: 302px; height: 148px; margin-left: 10px; margin-top: 10px;"
		class="v-dashlayout">
		<div
			style="float: left; margin: 0px 39px 0pt; width: 188px; height: 148px;"
			class="v-dashlayout v-dashlayout-loadChart loadChart">
		<div style="float: left; margin-left: 0px; margin-top: 68px;"
			class="v-label v-label-bar bar v-label-undef-w"></div>
		<div style="float: left; margin-left: 0px; margin-top: 58px;"
			class="v-label v-label-barInner barInner v-label-undef-w"></div>
		<div style="float: left; margin-left: 1px; margin-top: 1px;"
			class="v-label v-label-L_25 L_25 v-label-plate plate v-label-undef-w"></div>
		<div style="float: left; margin-left: 1px; margin-top: 1px;"
			class="v-label v-label-L_25 L_25 v-label-plate plate v-label-undef-w"></div>
		<div style="float: left; margin-left: 1px; margin-top: 1px;"
			class="v-label v-label-L_20 L_20 v-label-plate plate v-label-undef-w"></div>
		<div style="float: left; margin-left: 1px; margin-top: 1px;"
			class="v-label v-label-L_15 L_15 v-label-plate plate v-label-undef-w"></div>
		<div style="float: left; margin-left: 1px; margin-top: 37px;"
			class="v-label v-label-S_2_5 S_2_5 v-label-plate plate v-label-undef-w"></div>
		<div style="float: left; margin-left: 1px; margin-top: 55px;"
			class="v-label v-label-C_2_5 C_2_5 v-label-plate plate v-label-undef-w"></div>
		<div style="float: left; margin-left: 0px; margin-top: 65px;"
			class="v-label v-label-barOuter barOuter v-label-undef-w"></div>
	</div>
	<div style="float: left; margin-left: 0px; margin-top: 0px;"
		role="button" class="v-button" tabindex="0">
		<span class="v-button-wrap">
			<span class="v-button-caption"> +</span>
		</span>
	</div>
</div>

One can clearly see the computed margin-top in the container div for the button.

I need to cut a few wires before I can extract just the offending class. Will do so promptly.

jean-francois.lamy · December 23, 2009, 1:58am

http://drop.io/dashlayout
contains a dash.war file. I’ve stripped out just about everything. You will need to add back the gwt jars and vaadin 6.3 12-22 nightly jar which I removed from WEB-INF lib to reduce size. Just run the app.

This is an Eclipse war export, the java classes are next to the .class files in WEB-INF/classes. The offending class is LoadWindow.java

Questions:

why does the + button show at the top
why can’t the window size itself to its content ?
and a bonus ? gwt-dev is a big file – is it really needed

Jouni1 · January 14, 2010, 9:26am

Sorry for the silence, been away on holiday. I’ll try to get a chance tomorrow to see the .war.

Petteri · March 25, 2010, 6:46pm

When this is coming in officially to the vaadin? This would be so so great, because when using vertical and horizontal layouts I end up with div hell, like back in the days those table hells =)

Kim · March 25, 2010, 7:00pm

I doubt this will come to the core product, since these layouts do not support captions. The lack of support for captions actually is what makes the lighter DOM structure possible (iirc, correct me if I’m wrong). Why is this then a problem? Well, by design, all core Vaadin components must support captions and this add-on won’t fulfill those requirements, hence, it cannot be added to the core product.

Petteri · March 26, 2010, 6:50am

ah thats why, okey. I haven’t use those captions in my project.

Petteri · March 30, 2010, 8:38am

We were wondering about those Captions, why it is so important to support captions for components. I can guess that there is only few situation when to use caption, for example in forms, so what makes it so important? What others think about this component dash component. With this component you can build much more flexible components etc.

Pete

Jouni1 · March 30, 2010, 9:16am

My cue to chime in with comments…

About the captions:
Adding them isn’t such a hit on performance, but it’s a hit on my mental sanity. The complexity of all the layout features just make it hard to keep every little thing in mind, and that leads to bugs and anomalities.

The captions would only add one new DIV per child component (plus elements inside that DIV for the icon, caption text and error indicator, whenever needed). So the captions are not the reason for the lighter structure, that’s just me bending the browser engines to my will

The reason I left captions out (in addition to the complexity) is the exact thing Petteri said: captions are not needed that often, when building these kinds of flexible/style-able layouts. Mainly you’re just laying out other components, that are often layouts themselves, which can handle the captions instead.

Adding DashLayout to the core:
I haven’t really had any time to develop this layout further, and it contains a few known bugs ATM, so I guess that’s the main reason it won’t even be considered to be added yet.

But I can promise that I’ll try to include at least similar features to the core layouts in version 7, if not replacing the core Vertical/Horizontal layouts with this implementation.

In the meantime, all bug reports are golden (I know IE has many of them). Should I move the project to either GitHub or Google Code, so we could get issues tracked more easily?

Risto · March 30, 2010, 10:21am

Excellent idea, +1.

Jouni1 · April 1, 2010, 9:01am

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!

joonaslehtinen · April 1, 2010, 10:26am

How about adding a
directory link
to the original post?

Jouni1 · April 1, 2010, 10:56am

Excellent idea, will do.

Dmitri · April 1, 2010, 4:39pm

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

Jouni1 · April 13, 2010, 10:21am

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

Dmitri · April 13, 2010, 11:58am

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

Jouni1 · April 13, 2010, 12:15pm

Yes, DashLayout doesn’t make any presumptions about the contained components or its parent, so all existing layouts/components should work like normal.