Button.MouseOver

Hi,

i have a simple question : why vaadin not implement many other javascript event and listener for example with a button i can add Button.ClickListener but not the mouseover, mouseout etc.

Thanks

Walid

There will be something like it in the 6.2 version. See
http://dev.vaadin.com/ticket/3234
for (too) detailed discussion on the topic.

While this will be easier to implement with 6.2, I doubt that it’ll be of any good use because of the server/network lag. Of course with a local intranet or similar things might work ok…

i use vaadin-6.2.0.pre1.jar i don’t have any other listener in Button than onClick, yes it’s not useful with latency but in my case users want to add bubble like snagit and they will be patient to wait the result, the buttons represent customers and they like to wait + visualize informations + pass to the next with simple mouse move, instead of click the button, have a modal + click to the close button

Serverside MouseOverButton:

@com.vaadin.ui.ClientWidget(com.example.eventlistenertest.widgetset.client.ui.VMouseOverButton.class)
public class MouseOverButton extends Button {

    public MouseOverButton(String caption) {
        super(caption);
    }

    @Override
    public void changeVariables(Object source, Map variables) {
        super.changeVariables(source, variables);

        if (variables.containsKey("mouseOver")) {
            // Change this to something useful!
            getWindow().showNotification("Mouse over");
        }
    }

}

Client side VMouseOverButton:

public class VMouseOverButton extends VButton implements MouseOverHandler {

    public VMouseOverButton() {
        addMouseOverHandler(this);
    }

    @Override
    public void onMouseOver(MouseOverEvent event) {
        super.client.updateVariable(super.id, "mouseOver", true, true);

    }

}

Use the plugin, do a new “Vaadin Widget” and something like the above, remember to compile…

HTH, ymmv :wink:

Best Regards,
Marc

Here my eclipse solution for Embedded MouseOver.
It creates an image with a MouseOver/MouseOut events that manipulates the DOM to show/hide video preview.
[b]

  1. create a widget
    [/b]
    In your eclipse project do new->other…
    Expand ‘Vaddin’ and choose ‘Vaddin widget’
    Chose your package and name the class: MouseOverEmbedded


2. write code

open the file VMouseOverEmbedded (you should find it under .client.ui
and paste the following code:


import com.google.gwt.dom.client.Element;
import com.google.gwt.event.dom.client.MouseOutEvent;
import com.google.gwt.event.dom.client.MouseOutHandler;
import com.google.gwt.event.dom.client.MouseOverEvent;
import com.google.gwt.event.dom.client.MouseOverHandler;
import com.google.gwt.user.client.DOM;
import com.vaadin.terminal.gwt.client.ui.VEmbedded;

/**
 * Client side widget which communicates with the server. Messages from the
 * server are shown as HTML and mouse clicks are sent to the server.
 */

public class VMouseOverEmbedded extends VEmbedded implements MouseOverHandler,
		MouseOutHandler {

	String id = "eliatst";

	public VMouseOverEmbedded() {
		addMouseOverHandler(this);
		addMouseOutHandler(this);

	}

	public void onMouseOver(MouseOverEvent event) {
		Element t = DOM.getElementById(id);
		t.removeClassName("hideme");
		t.addClassName("showme");
		int y = event.getClientY() + 10;
		int x = event.getClientX() + 10;
		t.setAttribute("style", "top:" + y + "px;left:" + x + "px;");
		play(t);

	}

	private native void play(Element t) /*-{
										t.play();
										}-*/;

	private native void pause(Element t) /*-{
											t.pause();
											}-*/;

	public void onMouseOut(MouseOutEvent event) {
		Element t = DOM.getElementById(id);
		t.removeClassName("showme");
		t.addClassName("hideme");
		pause(t);
	}

}

opend the file MouseOverEmbedded
and paste the following code (make sure to change the path of the @com.vaadin.ui.ClientWidget(com.example.helloelia.mouseoverbutton.client.ui.VMouseOverEmbedded.class) according to your package) :



import com.vaadin.terminal.ExternalResource;
import com.vaadin.ui.Embedded;

/**
 * Server side component for the VMouseOverButton widget.
 */
@SuppressWarnings("serial")
@com.vaadin.ui.ClientWidget(com.example.helloelia.mouseoverbutton.client.ui.VMouseOverEmbedded.class)
public class MouseOverEmbedded extends Embedded { 



   public MouseOverEmbedded(String caption, ExternalResource externalResource) {
	   super(caption, externalResource);
   }


}


3. CSS

This code expect the following CSS:

  
.hideme {display:none;}
.showme {display:block;
position: absolute;
top:100px;
}

please refer to Vaadin book - Theme chapter for instruction on how to create a CSS file for a Vaadin proj.


4. Make it show

Use the following code from within our application to make it show


        Video tooltip = new Video( "video" );
        tooltip.setSources( new ExternalResource( "http://jonatan.virtuallypreinstalled.com/media/big_buck_bunny.mp4" ),
                new ExternalResource( "http://jonatan.virtuallypreinstalled.com/media/big_buck_bunny.ogv" ) );
        tooltip.setWidth( "640px" );
        tooltip.setHeight( "360px" );
        tooltip.setDebugId("eliatst");
        tooltip.setStyleName("hideme");
        addComponent(tooltip);
        
        MouseOverEmbedded button = new MouseOverEmbedded("hover me",new ExternalResource("http://www.google.co.il/images/srpr/logo3w.png"));//, tooltip
        addComponent(button);


5. Notes

  1. The code uses DOM/JSNI to find the video component and play it,
    It all happens on the Client browser…
    I don’t know how to do a Mouse over for embedded that calls a server code… any ideas?

  2. It heavily dependent on the CSS, is there a better way to do it?

  3. The Id of the video is hard coded in the VMouseOverEmbedded, this is a bad codding,
    What is the best way to communicate information from the MouseOverEmbedded to the VMouseOverEmbedded ???

  4. make sure you use the Theme with the CSS by calling
    setTheme(“demo”);
    from your application (change the theme name to yout theme)

Enjoy Elia.

I need to implement Button.Mouseover in vaadin 7.Can anyone help me to do this

Can any one help me on this

Check out the tutorials
here
and
the book
. The tutorials on client side development, custom widgets and especially extending components are the relevant ones for you.

Most likely, you’d want to do a tiny Extension that you can register for any component, sending RPC calls to the server when the mouseover status changes.