Файл: book-of-vaadin.pdf

Integrating with the Server-Side

depends="compile-server-side, compile-javadoc"> <jar jarfile="${target-jar}" compress="true">

First, you need to include a manifest that defines basic information about the add-on. The implementation title must be the exact title of the add-on, as shown in the Vaadin Directory title. The vendor is you. The manifest also includes the license title and file reference for the add-on.

<!-- Manifest required by Vaadin Directory --> <manifest>

<attribute name="Vaadin-Package-Version" value="1" />

<attribute name="Vaadin-Widgetsets" value="${widgetset}" />

<attribute name="Implementation-Title" value="My Own Addon" />

<attribute name="Implementation-Version" value="${version}" />

<attribute name="Implementation-Vendor" value="Me Myself" />

<attribute name="Vaadin-License-Title" value="Apache2" />

<attribute name="Vaadin-License-File" value="http://www.apache.org/licenses/LICENSE-2.0" />

</manifest>

The rest of the package-jar target goes as follows. As was done in the JavaDoc compilation, you also need to exclude any test or demo code in the project here. You need to modify at least the emphasized parts for your project.

<!-- Include built server-side classes --> <fileset dir="build/result/classes">

<patternset>

<include name="com/example/myaddon/**/*"/> <exclude name="**/client/**/*"/>

<exclude name="**/demo/**/*"/> <exclude name="**/test/**/*"/> <exclude name="**/MyDemoUI*"/>

</patternset>

</fileset>

<!-- Include widget set sources --> <fileset dir="src">

<patternset>

<include name="com/exaple/myaddon/**/*"/> </patternset>

</fileset>

<!-- Include JavaDoc in the JAR --> <fileset dir="${result-dir}/javadoc" includes="**/*"/>

</jar>

</target>

You should now be ready to run the build script with Ant.

16.11. Migrating from Vaadin 6

The client-side architecture was redesigned almost entirely in Vaadin 7. In Vaadin 6, state synchronization was done explicitly by serializing and deserializing the state on the serverand clientside. In Vaadin 7, the serialization is handled automatically by the framework using state objects.

Integrating with the Server-Side

In Vaadin 6, a server-side component serialized its state to the client-side using the Paintable interface and deserialized the state through the VariableOwner interface. In Vaadin 7, these are done through the ClientConnector interface.

On the client-side, a widget deserialized its state through the Paintable interface and sent state changes through the ApplicationConnection object. In Vaadin 7, these are replaced with the ServerConnector.

In addition to state synchronization, Vaadin 7 has an RPC mechanism that can be used for communicating events. They are especially useful for events that are not associated with a state change, such as a button click.

The framework ensures that the connector hierarchy and states are up-to-date when listeners are called.

16.11.1. Quick (and Dirty) Migration

Vaadin 7 has a compatibility layer that allows quick conversion of a widget.

1.Create a connector class, such as MyConnector, that extends LegacyConnector. Implement the getWidget() method.

2.Move the @ClientWidget(MyWidget.class) from the server-side component, say

MyComponent, to the MyConnector class and make it

@Connect(MyComponent.class).

3.Have the server-side component implement the LegacyComponent interface to enable compatibility handling.

4.Remove any calls to super.paintContent()

16.12.Integrating JavaScript Components and Extensions

Vaadin allows simplified integration of pure JavaScript components, as well as component and UI extensions.The JavaScript connector code is published from the server-side. As the JavaScript integration does not involve GWT programming, no widget set compilation is needed.

16.12.1. Example JavaScript Library

There are many kinds of component libraries for JavaScript. In the following, we present a simple library that provides one object-oriented JavaScript component. We use this example later to show how to integrate it with a server-side Vaadin component.

The example library includes a single MyComponent component, defined in mylibrary.js.

// Define the namespace

var mylibrary = mylibrary || {};

mylibrary.MyComponent = function (element) { this.element = element; this.element.innerHTML =

"<div class='caption'>Hello, world!</div>" + "<div class='textinput'>Enter a value: " + "<input type='text' name='value'/>" + "<input type='button' value='Click'/>" + "</div>";