Complex layout possible with Vaadin?

I’ve posted on other threads with specific questions about this but didn’t want to hijack someone’s thread for my use. I’ve created a working mockup of the Flex layout we were looking to convert to a non-Flash web UI. I’ve tried doing this with Vaadin over the last week using both nested Panels, Vertical, Horizontal, and GridLayouts and manually adding rows containing the form fields to a Table. I’ve had some success with both but hit walls with both in achieving the end result. All my attempts thus far to describe the goal in text have failed, so as they say, a picture’s worth a thousand words. Due to patents and work privacy, I had to pull this out of the entire application so there is no working data and I had to obfuscate most of the text. But the layout is identical otherwise and works in sizing and scrolling to demonstrate the point.

Can you go to this link:
Complex Layout
and play around with it, in particular, the Right Pane->Complex tab? You can see the frozen column and row headers that scroll when the “body” scrolls, as well as the footers at the bottom which you can toggle on and off with the “Show/Hide Totals” button. You can resize the browser window to virtually any size and see how it resizes the components itself to always remain visible and usable - within limits, too small and nothing is. You can drag the splitter back and forth and also see the resize happen.

This took me a while to develop originally a few years back as Flex didn’t have a built-in component to behave this way. I wrote it using a combination of VerticalLayouts, Panels, and Grids, with lots of ActionScript to tie it together. Is there a way to do this in Vaadin or is it not feasible since most code is run on the server? Would it be too slow since the client interactions happen at the event level? If there is a recommended way, how?

Thank you!

Hi. Most of the things in the demo are easily doable in Vaadin, but not all.

Panes, TabSheets and SplitPane are trivial - just add them within each other and setSizeFull().

In a table, you can add any UI components to the cells - either in the data source directory or by using generated columns.

There are two things that are not easily doable:

  • First column of the table is fixed - does not scroll with the rest. There is a
    feature request for this
    . This should be heading for the Vaadin 6.4 with estimated release date of Jun. 15.
  • Summary row under the last table row scrolls together with the table columns horizontally. In order to do this, you probably must extend the table implementation on client-side. Should be doable, but requires client-side programming with GWT.

Thanks, Joonas. I’ll be looking forward to 6.4. Those were the 2 items that I hit the wall with in trying to accomplish this with Vaadin the last couple of weeks.

EDIT: As for the locked first column, as I call row headers, it seems GWT may do this? Google Spreadsheets has a feature for you to freeze a number of rows and columns that will stay in view as you scroll the body of a large sheet. Just in case this helps at all with the changes for June.

Google Spreadsheet is not part of GWT (is it even created with GWT?).

If you are adventurous enough to try to add the support to these two features yourself, I would try to do it by:

  • Extending Table both on client and server
  • Sending “lock first column flag” and “info for status row” in paintContents
  • Measure all sizes from the Table first and then draw absolutely positioned divs on top of table with first column and status row info.

If you are familiar with CSS, DOM and GWT, this should be doable in a day or two. If you decide to do that, please share your Table extensions :)