Ch1-4 Introduction, getting started, architecture

Ch1. Introduction

Enough to know Vaadin has excellent web interface and is server centered.

Server side API start point

import com.vaadin.server.VaadinRequest;

import com.vaadin.ui.Label;

import com.vaadin.ui.UI;

@Title("My UI")

@Theme("valo")

public class HelloWorld extends UI {

    @Override

    protected void init(VaadinRequest request) {

        // Create the content root layout for the UI

        VerticalLayout content = new VerticalLayout();

        setContent(content);

        // Display the greeting

        content.addComponent(new Label("Hello World!"));

        // Have a clickable button

        content.addComponent(new Button("Push Me!",

            new ClickListener() {

                @Override

                public void buttonClick(ClickEvent e) {

                    Notification.show("Pushed!");

                }

            }));

    }

}

UI:

• An application can has multiple UIs in the same page (in portals) or in different windows or tabs
• a UI is associated with a user session for each user
• page title defined with annotation

Pure client-side application

public class HelloWorld implements EntryPoint {

    @Override

    public void onModuleLoad() {

        RootPanel.get().add(new Label("Hello, world!"));

    }

}

Support of Eclipse IDE

• create new Vaadin projects
• create custom themes
• create custom client-side widgets
• easily upgrading to newer version of library

Vaadin Designer

• Commercial plugin for visual editing UIs and composites

Ch2. Installing the Development Toolchain

Just follow instructions

Ch. 3 Creating a Vaadin Application

3.1 Overview

• recommended way to create Vaadin project: Maven archetype
• alternative: Eclipse IDE plugin creating a normal Eclipse web project using Ivy dependency manager

3.2 Vaadin Libraries (not read as Maven manages it)

3.3 Maven Archetypes

• application : single module project for simple applications, good for
  • quick demos and trying out
  • want to build all aspects of application myself
• application-multiplemodule : complete setup, separate production / development profiles
• application-example : example CRUD application using the multi-module setup
• widget : multi-module project for a new add-on, two modules: one for add-on and one for demo application
• touchkit
• liferay-portlet

3.4 Creating and running in Eclipse

Follow Maven instruction: File -> New -> Project -> Vaadin -> Vaadin 7 Project (Maven), select archetype, give Group Id / Artifact Id / Version / Package

In the single module project:

• UI class skeleton
• widget set (select "Compile Widgetset and Theme" from menu

Ch.4 Architecture

two development models: for client-side (browser) and server side.

Server side - more powerful

• com.vaadin.ui.UI
  • create initial user interface
  • can be loaded in browser using an URL, or
  • embedded to any HTML page
• component
  • each server side component has a client side counterpart, a widget
  • component relay events of widget to application logic
  • Field components have a value, allows view / edit, can be bound to data source
• Vaadin Servlet (VaadinServlet)
• Server Push (server initiated UI update)

Client side -

• used to program widgets, and to be mixed with server,
• share themes, widgets, etc with server;
• Vaadin Compiler compiles Java to Javascript
• an extension really

Client side have

• Engine
• Themes

Events

• First processed on the client side by widgets
• Then passed through the HTTP server, VaadinServlet, components, to event listeners

Date Binding

Client-side applications

• for highly responsive UI logic (games, stateless server-side, off-line mode, etc.)