Integrating with the Server-Side

// Style it

this.element.style.border = "thin solid red"; this.element.style.display = "inline-block";

//Getter and setter for the value property this.getValue = function () {

return this.element. getElementsByTagName("input")[0].value;

};

this.setValue = function (value) { this.element.getElementsByTagName("input")[0].value =

value;

};

//Default implementation of the click handler this.click = function () {

alert("Error: Must implement click() method");

};

//Set up button click

var button = this.element.getElementsByTagName("input")[1]; var component = this; // Can't use this inside the function button.onclick = function () {

component.click();

};

};

When used in an HTML page, the library would be included with the following definition:

<script type="text/javascript" src="mylibrary.js"></script>

You could then use it anywhere in the HTML document as follows:

<!-- Placeholder for the component --> <div id="foo"></div>

<!-- Create the component and bind it to the placeholder --> <script type="text/javascript">

foo = new mylibrary.MyComponent( document.getElementById("foo"));

foo.click = function () {

alert("Value is " + this.getValue());

}

</script>

Figure 16.5. A JavaScript Component Example

You could interact with the component with JavaScript for example as follows:

<a href="javascript:foo.setValue('New value')">Click here</a>

16.12.2. A Server-Side API for a JavaScript Component

To begin integrating such a JavaScript component, you would need to sketch a bit how it would be used from a server-side Vaadin application. The component should support writing the value as well as listening for changes to it.

final MyComponent mycomponent = new MyComponent();

A Server-Side API for a JavaScript Component

379

Integrating with the Server-Side

//Set the value from server-side mycomponent.setValue("Server-side value");

//Process a value input by the user from the client-side mycomponent.addValueChangeListener(

new MyComponent.ValueChangeListener() { @Override

public void valueChange() {

Notification.show("Value: " + mycomponent.getValue());

}

});

layout.addComponent(mycomponent);

Basic Server-Side Component

A JavaScript component extends the AbstractJavaScriptComponent, which handles the shared state and RPC for the component.

package com.vaadin.book.examples.client.js;

@JavaScript({"mylibrary.js", "mycomponent-connector.js"}) public class MyComponent extends AbstractJavaScriptComponent {

public interface ValueChangeListener extends Serializable { void valueChange();

}

ArrayList<ValueChangeListener> listeners = new ArrayList<ValueChangeListener>();

public void addListener(ValueChangeListener listener) { listeners.add(listener);

}

public void setValue(String value) { getState().setValue(value);

}

public String getValue() {

return getState().getValue();

}

@Override

protected MyComponentState getState() {

return (MyComponentState) super.getState();

}

}

Notice later when creating the JavaScript connector that its name must match the package name of this server-side class.

The shared state of the component is as follows:

public class MyComponentState extends JavaScriptComponentState { private String value;

public String getValue() { return value;

}

public void setValue(String value) { this.value = value;

}

}

You can also have just public member variables, but if you do have setters and getters, as above, the member variables may not be public.

380	A Server-Side API for a JavaScript Component