Howto: Pro Support

How do I do kind of that fancy “Pro Support” flag on this site here?



What exactly do you mean by “flag”? If you are referring to a certain page, could you please give an URL?

I think he means the “Support” (Professional support/knowledge base) link on the left side of the forums. By taking a look at the source code, it seems that it is made using the
javascript library.

It says “Pro Support”, just force refresh to clear the cached image :slight_smile:

And I think it’s done with jQuery or similar JavaScript library. That doesn’t mean you can’t make such a thing with Vaadin. To achieve something like that, a custom widget is probably the way to go. Hacks using Absolute/Custom/CssLayout are also possible, but not recommended.

Yeah, right :wink:
I am competely new to Vaadin, but I am suprised and wondering - exactly what I was looking for, for years…
Cant you describe and/or give som samples on widget development, especially how you would design kind of “Pro Support” flag (hanging static on one of the sides, and rolling out on click?


See the Book section on
developing custom widgets

I suppose you can do such a floating side tab in many ways. If you look at the HTML code for the tab (with Firebug for example), it says:

<div id="floating-tab" style="left: -200px;">
    <a href="/support">» Professional Support</a>
    <a href="/knowledge-base">» Knowledge Base</a>

Then there’s just some click event handler that animates the “left” style attribute from -200 to 0. The animation is probably done with a short-interval timer. This requires that the left side gets hidden. It of course gets hidden if it’s stuck to the side of the browser window, but if it’s somewhere in the middle of the UI, you need to use “overflow: hidden” or something like that in the containing element.

You can probably do such a widget easily with GWT. Then you need some integration code to communicate the content and caption from the server-side. Unless you want just HTML content for the tab, you should probably make it a ComponentContainer and have the slide-out content as a root layout, much like in a Panel.

You may want to send the “open” and “close” events to server-side (if in immediate mode), but it’s probably not necessary.