Vaadin component visible event - vaadin

Is there an event, or some other way, to know when a vaadin component becomes visible in the browser? This is not for hidden components. I mean when the component is off canvas, like in a different tab that is not selected. Or may be way down the page.

It may be late but i started to create a Vaadin add-on that wraps the jQuery Waypoints library so that You can listen to Vaadin components becoming visible by scrolling.
You can find an experimental release here:
https://vaadin.com/directory#!addon/waypoints-add-on

I haven't done it but maybe you can use jQuery Waypoints.

Related

Vaadin 23.3 close tooltip by clicking on the text

I'm upgraded to Vaadin 23.3 Preview because of Tooltip component. Works and looks great. Only one question - I use the tooltip as a toggletip. I added an icon to my textfield and manually open tooltip by clicking it. In order to close the tooltip, I have to click the icon one more time. Is it possible somehow to close the tooltip by clicking the tooltip text also?
That's not supported, as the Tooltip feature is not intended to be used for anything interactive. As the docs say:
Tooltips only support plain text content. They aren’t focusable and
can’t contain interactive elements.
Due to technical (and especially accessibility) reasons, interactive popups like that need a different implementation. There are some vague plans to add such a feature to the Vaadin platform in the future, however.
One component in the Vaadin's Directory that can be considered better suited for the task is Popup.

Context menu plugin and how to make a right click availble on tablets?

We are using a great context menu plugin https://vaadin.com/directory/-/directory/addon/vaadin-context-menu in our Vaadin based app. Now we are trying to figure out, how to make it usable on tablets (touch devices in general). Is there a way how to 'simulate' right click on tablets? Is there anyone who solved this for VAADIN context menu plugin?
AFAIK there is no such implementation for the long tap listener.
You probably have to create your own custom component or create a vaadin component extension with a client side counter part. GWT has the support for touch events and Vaadin got some helper classes you need (like hooking pointer events).

How to fit Sencha GXT table in to the Div it contains

Hi I am new to Sencha GXT. I would like to know, How can I style a GXT grid.
I want to know this because I am currently integrating the sencha GXT grid into a Vaadin widget. I have successfully done that but, the problem is with the styling. Is there any documentation we can prefer.
Major problem is the grid works perfectly when I manually give it a width and a height but, What want is a to fit in to DIV it is in and re size the grid when the browser resizes.
Thank you.
http://docs.sencha.com/gxt-guides/3/concepts/appearance/Appearance_3.html
Here's a link to the docs, basically it follow the GWT paradigm, if you've seen it before.
But since you want to integrate GXT Grid in a Vaadin widget I'd like to ask about your needings.
I know the standard Vaadin seems a little.."poor"..but I encourage you to check out the new Grid widget in Vaadin 7.4-beta (est release Feb.): it rocks!

JQuery mobile, is there a way to prevent the SELECT box from becoming a dialog page?

SO I have a select box that I fill dynamically. I discovered that once the SELECT gets longer than the page, it automatically becomes a dialog listview.... which is TERRIBLE!
When this happens, the page refreshes when the dialog is closed and my whole page starts over....
Has anyone experienced that and do you know how to shut it off?
Thanks!
Todd
You could use the native look and feel?
http://jquerymobile.com/demos/1.0.1/docs/forms/forms-all-native.html
Native form elements & buttons Although the framework automatically enhances form elements and buttons into touch input
optimized controls to streamline development, it's easy to tell jQuery
Mobile to leave these elements alone so the standard, native control
can be used instead.
Adding the data-role="none" attribute to any form or button element
tells the framework to not apply any enhanced styles or scripting. The
examples below all have this attribute in place to demonstrate the
effect. You may need to write custom styles to lay out your form
controls because we try to leave all the default styling intact.

Dynamic Splitter Panes

How would I go about implementing dynamic/docking splitter panes in a vb.net app similar to visual studio?
Check out the following demo at ZettaCube, their WebDock component seems to have functionalities close to VS.NET, especially docking and auto-hide.
http://www.zettacube.com/
DockPanel is one painless & open source way to do it.
DockPanel is for WinForms only. Seems that the WebDock from zettacube above is the only solution for now.
Not easily is the short answer.
A high level idea would be to define some regions using divs or a table and using your js framework of choice make these elements resizeable. that gets you the splitter aspect.
The docking will have to use absoluting positioned elements that you can drag and drop and if you are currently over a docking element, reposition the element to be docked to inside the docking element and change it's position back to normal. When you want to drag it out you will change it's positioning back to absolute
Also, this is not easy to do and will take a long time and still probably not work correctly. Sorry to sound pessimistic though.
I would say use some of the already available controls out there.
I use the control library from Janus Controls, but there are dozens out there to choose from.
http://www.janusys.com/controls/
Agree with Nick, this is not something you just throw together yourself.

Resources