Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
I'm back with again with yet another tech preview component.
The idea is to separate the tabs from the TabSheet. The main problem with the TabSheet is that the tabs and the presented layout underneath create a large box that's reserved only for the tabs.
So, doing a layout as shown at the bottom of this post (I don't know how to attach the image where I want in this post, sorry) is not possible with the traditional TabSheet, but it is with the DetachedTabs.
It all works because the tabs and the canvas are two separate components, which you may place wherever and however you want.
The source can be found, as usual, at GitHub. There is a jar also to be used as a Vaadin add-on. A live demo can be found at http://henrik.virtuallypreinstalled.com/DetachedTabs. As might be obvious, the component has mostly been done as a proof-of-concept, and I'm no graphics guy, so the looks are pretty gruesome, compared to the real TabSheet. I'll see whether I can give it a coat of shine until the release version.
Also note that the same need can be filled with the standard TabSheet by using CSS to move other components over the tab area. I know at least one project that has done this.
Henri Muurimaa: Also note that the same need can be filled with the standard TabSheet by using CSS to move other components over the tab area. I know at least one project that has done this.
Can be done also using the AbsoluteLayout component.
Still, this component nicely abstracts tabs so we can build more customized views easily. Kudos for that!