Vaadin 7 Cookbook

Vaadin 7 Cookbook

Buy this Book

Vaadin 7 Cookbook

Buy this Book

Overview of this book

Vaadin 7 Cookbook

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Creating a Project in Vaadin

Introduction

Creating a project in Eclipse IDE

Generating a Vaadin project in Maven archetype

Building a Vaadin application with Gradle

Using Vaadin with Scala

Running Vaadin on Grails

Layouts

Introduction

Creating an adjustable layout using split panels

Creating a custom layout

Controlling components over the CSS layout

Using CSS layouts for mobile devices

Binding tabs with a hard URL

Using Navigator for creating bookmarkable applications with back-forward button support

Aligning components on a page

Creating UI collections of components

Dragging-and-dropping between different layouts

Building any layout with AbsoluteLayout

UI Components

Introduction

Viewing details of items in ListSelect

Inserting a button to remove a table row

Creating a line chart with Flot

Creating a pie chart with Highcharts

Drag-and-drop from the desktop

Using DateField with Joda-Time DateTime

Zooming with the slider

Restricting buttons in Rich text area

Styling components with CSS

Custom Widgets

Introduction

Creating a TextField with counter

Creating a TextField only for digits

Creating a chroma-hash password field

Creating a tri-state checkbox using JavaScript

Styling widgets

Speeding up widget set compilation

Events

Introduction

Responding immediately to an event in TextArea

Changing Label to TextField by double-clicking

Lazy loading in a table

Reordering columns and rows in a table

Customizing shortcuts

Adding click listener to the Link component

Creating a custom context menu

Updating messages in the menu bar using the ICEPush add-on

Updating the noticeboard using the Refresher add-on

Messages

Introduction

Showing validation messages

Styling system messages

Showing a login form in pop-up view

Customizing tray notifications

Making a confirmation window

Showing a rich tooltip with an image

Informing about file transfers by a progress bar

Waiting for an indeterminate process

Showing information about browsers

Working with Forms

Introduction

Creating a simple form

Generating fields from a bean

Binding fields to a bean

Using field validation

Using bean validation

Creating a custom validation

Creating a CRUD form

Filtering items using ComboBox

Spring and Grails Integration

Introduction

Setting up a Vaadin project with Spring in Maven

Handling login with Spring

Accessing a database with Spring

Internationalizing Vaadin applications with Spring

Vaadin and Spring injector

Internationalizing Vaadin in Grails

Using Grails ORM for Vaadin application

Using Grails services in Vaadin

Adding a Vaadin add-on into Grails project

Data Management

Introduction

Binding property to a component

Binding items to a component

Binding a container to a component

Creating a complex table – CRUD II

Filtering data in the table

Using converters

Storing the last selected tab name in cookies

Architecture and Performance

Introduction

Building the core

The Login form with Model View Presenter

Model View Presenter for a view with two panels

Unit testing in an MVP pattern

Improving the application's startup time

Avoid sluggish UI – lazy loaded tables

Avoid sluggish UI – paged tables

Optimizing Vaadin applications for search engines

Facilitating Development

Introduction

The basics of test-driven development in Vaadin

The basics of mocking in Vaadin

Testing a table with a container

Testing the UI with TestBench

Recompiling widgetsets in Maven

Auto-reloading changes in Maven

Blocking uncaught exceptions in the production mode

Fun

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Using Vaadin with Scala

Scala is a multi-paradigm language integrating object-oriented and functional programming. Read more about Scala on http://www.scala-lang.org.

Getting ready

Scala installation is quite easy. Just go to http://www.scala-lang.org/downloads, download Scala, and set up system variables as follow:

Linux/Mac

SCALA_HOME=/Users/John/Installations/scala
export SCALA_HOME
export PATH=$PATH:$SCALA_HOME/bin

Windows

%SCALA_HOME% = c:\Scala
%PATH% = %PATH%;%SCALA_HOME%\bin

We have to maintain our project anyhow and we are going to utilize Gradle.

Tip

There is also another way to manage Scala projects. It is called Typesafe and more info is on http://typesafe.com.

How to do it...

Carry out the following steps in order to create a new Scala project:

Make the project structure so we have folders where we can put our project files.
```
mkdir -p vaadin-in-scala/src/main/{scala/app,webapp/WEB-INF}
```

Make build.gradle in the project root. It is going to be just a few lines that are necessary for running the project.

apply plugin: 'war'
apply plugin: 'jetty'
apply plugin: 'scala'
    
repositories {
  mavenCentral()
}
    
dependencies {
  scalaTools 'org.scala-lang:scala-compiler:2.10.0'
  scalaTools 'org.scala-lang:scala-library:2.10.0'
  compile 'org.scala-lang:scala-library:2.10.0'
  compile group:'com.vaadin', name:'vaadin-server', version:'7.0.4'
  compile group:'com.vaadin', name:'vaadin-client', version:'7.0.4'
  compile group:'com.vaadin', name:'vaadin-client-compiled', version:'7.0.4'
  compile group:'com.vaadin', name:'vaadin-themes', version:'7.0.4'
  compile group:'com.vaadin', name:'vaadin-client-compiler', version:'7.0.4'
}

Create a new Scala class MyVaadinUI that we place into the MyVaadinUI.scala file in the folder src/main/scala/app.

package app

import com.vaadin.ui._
import com.vaadin.server.VaadinRequest

class MyVaadinUI extends UI {
  def init(request: VaadinRequest) = {
    val layout = new VerticalLayout()
    layout.setMargin(true)
    setContent(layout)
    layout.addComponent(new Label("Hello Vaadin user."))
    }
}

Add the web.xml file to the src/main/webapp/WEB-INF folder.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>Vaadin Web Application</display-name>
  <context-param>
    <description>Vaadin production mode</description>
    <param-name>productionMode</param-name>
    <param-value>false</param-value>
  </context-param>
  <servlet>
    <servlet-name>Vaadin Application Servlet</servlet-name>
    <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
    <init-param>
      <description>Vaadin UI to display</description>
      <param-name>UI</param-name>
      <param-value>app.MyVaadinUI</param-value>
    </init-param>
  </servlet>
  <servlet-mapping>
    <servlet-name>Vaadin Application Servlet</servlet-name>
    <url-pattern>/*</url-pattern>
  </servlet-mapping>
</web-app>

We are done and we can run the application.

gradle jettyRun

The following output should be displayed:

:compileJava UP-TO-DATE
:compileScala UP-TO-DATE
:processResources UP-TO-DATE
:classes UP-TO-DATE
> Building > :jettyRun > Running at http://localhost:8080/vaadin-in-scala

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

How it works...

We have made a Gradle project in which we have applied the scala plugin. The Scala plugin inside the Gradle build script ensures that all the .scala files inside the src/main/scala source folder will be compiled. Scala files are compiled to .class files that are then deployed on the Jetty webserver.

The deployment descriptor (web.xml file) defines one servlet. When users access the URL with the /* pattern, which is mapped to the Vaadin servlet, MyVaadinUI is shown in the browser.

The important thing we need to check is the init-param element of the Vaadin servlet. It needs to point exactly to the UI class, which represents our application. The path to the UI class must be the full name of the class together with the package, for example, app.MyVaadinUI.

Vaadin 7 Cookbook

Vaadin 7 Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

Vaadin 7 Cookbook

Using Vaadin with Scala

Getting ready

Tip

How to do it...

Tip

How it works...

See also