Custom layout and table

Vaadin 6 / 7 / 8 Framework UI
1

Hi all!

I started to use vaadin week ago, so it is kind of new for me. I have web developer background, so I know basics about xhtml, css, javascript and web design. Now I have few questions about the vaadin, like defining your own layout’s and so on.

Background for questions:
I have data from database. I have to present that in table. Tables layout isn’t basic vaadin layout, I have to modify
the table layout a lot. Lets say that layout should be like this http://vaadin.com/forum/-/message_boards/category/11558 (vaadin forum), with image and button. Overall in my project, I have basicly overwrite all the vaadin css themes.
What are the best solutions for that.

Questions:

  1. Modifying Table ui element? Adding static(on the java side, layout is static) widths and heights for columns, headers and so. Is there some way to show browsers original right click?

  2. Making the table by Custom Layout. Is data binding easy to do?

  3. Start using gwt, and making own widget? Project time is quite a short, so no time to start learing new technigues.

  4. Other solutions.

Thanks for answers
Pete

2

Hi, Pete !

Why do you want to tweak the layouts, doesn’t Vaadin’s built-in widget Table meet your requirements ?

3

Hi Dmitri!

I have my on graphical desing on project, and Table have to look like that, thats way I have to tweek it. Basically it is like website look, and I think Vaadins own look is like application? What do you think? Any hints for tweeking?

Pete

4

You can tweak table’s widget CSS to fit your design. Create your empty theme which inherits “reindeer” one, then add overrides for original table’s CSS selectors.

If you could show an example on how your table should look, we can say if this can be done by CSS-ing it or something else is also needed.

5

I am on iPhone now, so i can’t send sample, but in the first message I said that it looks like vaadin Forum post list.

6

The VaadinTunes layout demo does some table theming that might be a little similar to what you want (alternating colors for the rows, some header customization, removing the table body border).

See
VaadinTunes
 and
its theme sources
.

It is based on the older runo theme, though, so some changes might be required to make it work with reindeer.

7

Thanks for the answer, it could be solution. By the way is there any way to add static widths for the columns and headers in Java side, and how can you turn on browsers rightClick?

Pete

8

Pete, yes, you can set column widths explicitly from java code.

Under browser’s right click - you mean to be able to popup a native browser’s menu (view source, etc…) ?

9

Yeah I ment that popup a native browser’s menu (view source, etc…)

10

native right click already works when clicked on a table header (just tested with my app). Regarding the table body, did not tried this ever, so probably Vaadin guys will answer on this possibility in more details.

BTW, for what operation do you need the native right click on a table ? The “view source” will not work with Vaadin or plain GWT, as you’ll only the boot html page with a small JS snipped and nothing else, and cannot not remember another thing which could be done with the native popup menu.

11

I don’t need it, but I was wondering it. =)

Thanks for answer.

12

Ah, I see now :wink:

regarding the table theming - you can also look inside vaadin.jar, into the reindeer theme css files for table - reindeer theme also contains several styles for a table - see the substyles demo:
http://demo.vaadin.com/ReindeerTheme