PacktLib: Vaadin 7 UI Design By Example: Beginner’s Guide

Vaadin 7 UI Design By Example Beginner's Guide

Credits

About the Author

Acknowledgement

About the Reviewers

www.PacktPub.com

Preface

Writing Your First Vaadin-powered Application

Creating and running Vaadin applications in Eclipse

Time for action – downloading and installing Eclipse

Time for action – installing the plugin

Time for action – installing Jetty

Time for action – creating a new Vaadin project

Time for action – deploying and running

Creating and running Vaadin applications in NetBeans

Time for action – downloading and installing NetBeans

Time for action – creating a new Vaadin project

Time for action – deploying and testing

Creating and running Vaadin applications using Maven

Time for action – creating a new Vaadin project

Time for action – deploying and running

Generated application explained

A more interesting "hello world" application

Time for action – using text fields

Summary

Using Input Components and Forms – Time to Listen to Users

The Time It application

Time for action – separating business classes from UI classes

Time for action – adding components as class members

Time for action – adding some infrastructure

Time for action – adding a combobox

Time for action – validating user input

Time for action – adding input component into the layout

Time for action – running the test set

Time for action – showing the results

Thinking in Vaadin

Time for action – binding data to properties

More input components

Time for action – fixing the OptionGroup example

Time for action – using an InlineDateField component

Summary

Arranging Components into Layouts

Horizontal layouts

Time for action – the main layout

Components size

Time for action – visualizing borders

Time for action – setting layouts size

Expand ratio

Time for action – expanding components

Split panels

Time for action – using split panels

Implementing a button-based menu

Time for action – adding menu options

Grid layouts

Time for action – using grid layouts

Absolute layouts

Time for action – using absolute layouts

Click listeners

Time for action – adding click listeners

Form layouts

Time for action – using FormLayout

Panels

Time for action – using panels

Tab sheets

Accordions

Windows

Summary

Using Vaadin Navigation Capabilities

Getting request information

Time for action – developing a simple website

Time for action – reading request parameters

Navigators and views

Time for action – using navigators

Time for action – navigating programmatically

Keeping state after refresh

Time for action – preserving application state

User session

Menus

Shortcut keys

Time for action – a tedious application

Summary

Using Tables – Time to Talk to Users

Tables

Time for action – my first table

Headers

Footers

Boxwords game

Time for action – implementing the game UI

Page length

Selecting items in tables

Time for action – listening to clicks

Reading data from tables

Time for action – finishing the game

Editable tables

Time for action – using a custom field factory

Understanding generated columns

Collapsing and reordering columns

Summary

Adding More Components

Trees

Time for action – my first tree

Time for action – a file browser

Progress indicators

Icons

Time for action – adding icons

Images, Flash, video, audio, and other web content

Time for action – render web content

Sliders

Color picker

File download

Context menus

Drag-and-drop

Summary

Customizing UI Components – Time to Theme it

Vaadin themes

Time for action – changing themes

Introduction to CSS and Sass

Introducing Firebug and Chrome inspector

Time for action – inspecting HTML

Creating new themes

Time for action – creating a new Vaadin theme

Styling labels

Time for action – creating a new Vaadin theme

Adding CSS classes to components

Styling text fields

Styling buttons

Styling panels

Styling menus

Styling tables

Summary

Developing Your Own Components

Custom components

Time for action – creating a custom component

Client side applications

Time for action – creating a client side application

Widgets

Time for action – creating a widget

Remote procedure calls

Extensions

Time for action – creating an extension

Custom JavaScript

JavaScript components

Time for action – creating a JavaScript component

Summary

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Pop Quiz Answers

Index