How to integrate Vaadin with javascript – add JavaScript Connector?

How to integrate Vaadin with javascript – add JavaScript Connector?

package_js.jpg

  1. JSIntegrationComp.java ( – to viewing our components & call the javascript method from java – MyComponent.java)
import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
import com.vaadin.ui.CssLayout;

@SuppressWarnings("serial")
public class JSIntegrationComp  extends CssLayout implements View{
	MyComponent mycomponent = new MyComponent();
	
	public JSIntegrationComp() {

		// Process a value input by the user from the client-side
		mycomponent = new MyComponent();    
		addComponent(mycomponent);
		
	}
}

2. MyComponent.java

import com.vaadin.ui.AbstractJavaScriptComponent;

@SuppressWarnings("serial")
@JavaScript({"mylibrary.js", "mycomponent-connector.js"})
public class MyComponent extends AbstractJavaScriptComponent {
	 @Override
     protected MyComponentState getState() {
         return (MyComponentState) super.getState();
     }
}

3. MyComponentState.java

public class MyComponentState extends JavaScriptComponentState {
     private static final long serialVersionUID = 1L;
}

 4. mycomponent-connector.js (javascript)

window.net_fndong_js_MyComponent =
function() {
    var mycomponent = new mylibrary.Comp(this.getElement());

    this.onStateChange = function(e) {};

};

5. mylibrary.js (javascript)

var mylibrary = mylibrary || {};

mylibrary.Comp = function(element) {
    element.innerHTML = "hello";};

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s