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

Client-Side Vaadin Development

Figure 13.1. GWT Widget Base Class Hierarchy

For example, we could extend the Label widget to display some custom text.

package com.example.myapp.client;

import com.google.gwt.user.client.ui.Label;

public class MyWidget extends Label {

public static final String CLASSNAME = "mywidget";

public MyWidget() { setStyleName(CLASSNAME); setText("This is MyWidget");

}

}

The above example is largely what the Eclipse plugin generates as a widget stub. It is a good practice to set a distinctive style class for the widget, to allow styling it with CSS.

The client-side source code must be contained in a client package under the package of the descriptor file, which is covered later.

13.5.2. Using the Widget

You can use a custom widget just like you would use any widget.

public class MyEntryPoint implements EntryPoint { @Override

public void onModuleLoad() { // Use the custom widget

final MyWidget mywidget = new MyWidget(); RootPanel.get().add(mywidget);

}

}

13.6. Debugging Client-Side Code

Vaadin includes two application execution modes for debugging client-side code.The Development Mode compiles the client-side module when you load the page and runs it in the browser, using a browser plugin to communicate with the debugger. The "SuperDevMode" allows debugging the code right in the browser, without even need to install a plugin.

Client-Side Vaadin Development

13.6.1. Launching Development Mode

The Development Mode launches the application in the browser, compiles the client-side module (or widget set) when the page is loaded, and allows debugging the client-side code in Eclipse. You can launch the Development Mode by running the com.google.gwt.dev.DevMode class. It requires some parameters, as described later.

The Vaadin Plugin for Eclipse can create a launch configuration for the Development Mode. In the Vaadin section of project properties, click the Create development mode launch button. This creates a new launch configuration in the project. You can edit the launch configuration in

Run Run Configurations.

-noserver -war WebContent/VAADIN/widgetsets com.example.myproject.widgetset.MyWidgetSet -startupUrl http://localhost:8080/myproject -bindAddress 127.0.0.1

The parameters are as follows:

-noserver

Normally, the Development Mode launches its own Jetty server for hosting the content. If you are developing the application under an IDE that deploys it to a server, such as Eclipse, you can disable the Development Mode server with this option.

-war

Specifies path to the location where the JavaScript is to be compiled.When developing a pure client-side module, this could be the WebContent (in Eclipse) or some other folder under it. When compiling widget sets, it must be

WebContent/VAADIN/widgetsets.

-startupUrl

Specifies the address of the loader page for the application. For server-side Vaadin applications, this should be the path to the Vaadin application servlet, as defined in the deployment. For pure client-side widgets, it should be the page where the application is included.

-bindAddress

This is the IP address of the host in which the Development Mode runs. For debugging on the development workstation, it can be just 127.0.0.1. Setting it as the proper IP address of the host enables remote debugging.

13.6.2. Launching SuperDevMode

The SuperDevMode is much like the regular Development Mode, except that it does not require a browser plugin. Compilation from Java to JavaScript is done incrementally, reducing the compilation time significantly. It also allows debugging JavaScript and even Java right in the browser (currently only supported in Chrome).

You can enable SuperDevMode as follows:

1. You need to set a redirect property in the .gwt.xml module descriptor as follows:

<set-configuration-property name="devModeRedirectEnabled" value="true" />

In addition, you need the xsiframe linker. It is included in the com.vaadin.DefaultWidgetSet as well as in the com.vaadin.Vaadin module. Otherwise, you need to include it with:

Client-Side Vaadin Development

<add-linker name="xsiframe" />

2.Compile the module (that is, the widget set), for example by clicking the button in Eclipse.

3.If you are using Eclipse, create a launch configuration for the SuperDevMode by clicking the Create SuperDevMode launch in the Vaadin section of the project properties.

a.The main class to execute should be com.google.gwt.dev.codeserver.CodeServer.

b.The application takes the fully-qualified class name of the module (or widget set) as parameter, for example, com.example.myproject.widgetset.MyprojectWidgetset.

c.Add project sources to the class path of the launch if they are not in the project class path.

The above configuration only needs to be done once to enable the SuperDevMode. After that, you can launch the mode as follows:

1.Run the SuperDevMode Code Server with the launch configuration that you created above. This perfoms the initial compilation of your module or widget set.

2.Launch the servlet container for your application, for example, Tomcat.

3.Open your browser with the application URL and add ?superdevmode parameter to the URL (see the notice below if you are not extending DefaultWidgetSet).This recompiles the code, after which the page is reloaded with the SuperDevMode. You can also use the ?debug parameter and then click the SDev button in the debug console.

If you make changes to the client-side code and refresh the page in the browser, the client-side is recompiled and you see the results immediately.

The Step 3 above assumes that you extend DefaultWidgetSet in your module. If that is not the case, you need to add the following at the start of the onModuleLoad() method of the module:

if (SuperDevMode.enableBasedOnParameter()) { return; }

Alternatively, you can use the bookmarklets provided by the code server. Go to http://localhost:9876/ and drag the bookmarklets "Dev Mode On" and "Dev Mode Off" to the bookmarks bar

Debugging Java Code in Chrome

Chrome supports source maps, which allow debugging Java source code from which the JavaScript was compiled.

Open the Chrome Inspector by right-clicking and selecting Inspect Element. Click the settings icon in the lower corner of the window and check the Scripts Enable source maps option. Refresh the page with the Inspector open, and you will see Java code instead of JavaScript in the scripts tab.

Chapter 14

Client-Side

Applications

This chapter describes how to develop client-side Vaadin applications.

This topic is new in the book. Unfortunately, because of pressing release schedules, we were unable to give as much detail as the topic demanded. The Vaadin features for client-side development are also evolving rapidly, so some of the content may already be outdated. The chapter will be expanded in the future with more up-to-date information.

14.1. Overview

Vaadin allows developing client-side modules that run in the browser. Client-side modules can use all the GWT widgets and some Vaadin-specific widgets, as well as the same themes as server-side Vaadin applications. Client-side applications run in the browser, even with no further server communications. When paired with a server-side service to gain access to data storage and server-side business logic, client-side applications can be considered "fat clients", in comparison to the "thin client" approach of the server-side Vaadin applications. The services can use the same back-end services as server-side Vaadin applications. Fat clients are useful for a range of purposes when you have a need for highly responsive UI logic, such as for games or for serving a huge number of clients with possibly stateless server-side code.

Client-Side Applications

Figure 14.1. Client-Side Application Architecture

A client-side application is defined as a module, which has an entry-point class. Its onModuleLoad() method is executed when the JavaScript of the compiled module is loaded in the browser.

Consider the following client-side application:

public class HelloWorld implements EntryPoint { @Override

public void onModuleLoad() { RootPanel.get().add(new Label("Hello, world!"));

}

}

The user interface of a client-side application is built under a HTML root element, which can be accessed by RootPanel.get().The purpose and use of the entry-point is documented in more detail in Section 14.2, “Client-Side Module Entry-Point”. The user interface is built from widgets hierarchically, just like with server-side Vaadin UIs. The built-in widgets and their relationships are catalogued in Chapter 15, Client-Side Widgets. You can also use many of the widgets in Vaadin add-ons that have them, or make your own.

A client-side module is defined in a module descriptor, as described in Section 13.3, “Client-Side Module Descriptor”. A module is compiled from Java to JavaScript using the Vaadin Compiler, of which use was described in Section 13.4, “Compiling a Client-Side Module”. The Section 14.3, “Compiling and Running a Client-Side Application” in this chapter gives further information about compiling client-side applications. The resulting JavaScript can be loaded to any web page, as described in Section 14.4, “Loading a Client-Side Application”.

The client-side user interface can be built declaratively using the included UI Binder.

The servlet for processing RPC calls from the client-side can be generated automatically using the included compiler.