Vaadin 7 UI Design By Example: Beginner's Guide

Vaadin 7 UI Design By Example: Beginner's Guide

Overview of this book

Vaadin is a mature, open-source, and powerful Java framework used to build modern web applications in plain Java. Vaadin brings back the fun of programming UI interfaces to the web universe. No HTML, no CSS, no JavaScript, no XML. Vaadin lets you implement web user interfaces using an object oriented model, similar to desktop technologies such as Swing and AWT. Vaadin 7 UI Design By Example: Beginner's Guide is an engaging guide that will teach you how to develop web applications in minutes. With this book, you will Develop useful applications and learn basics of Java web development. By the end of the book you will be able to build Java web applications that look fantastic. The book begins with simple examples using the most common Vaadin UI components and quickly move towards more complex applications as components are introduced chapter-by-chapter. Vaadin 7 UI Design By Example: Beginner's Guide shows you how to use Eclipse, Netbeans, and Maven to create Vaadin projects. It then demonstrates how to use labels, text fields, buttons, and other input components. Once you get a grasp of the basic usage of Vaadin, the book explains Vaadin theory to prepare you for the rest of the trip that will enhance your knowledge of Vaadin UI components and customization techniques.

Vaadin 7 UI Design By Example Beginner's Guide

Credits

About the Author

Acknowledgement

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

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

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

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

Chapter 1, Writing Your First Vaadin-powered Application

Chapter 2, Using Input Components and Forms – Time to Listen to Users

Chapter 3, Arranging Components into Layouts

Chapter 4, Using Vaadin Navigation Capabilities

Chapter 5, Using Tables – Time to Talk to Users

Chapter 6, Adding More Components

Chapter 7, Customizing UI Components – Time to Theme it

Chapter 8, Developing Your Own Components

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Time for action – using split panels

Let's add a split panel to our application.

Change the lowerSection's type to HorizontalSplitPanel:
```
public class MainLayout extends VerticalLayout {

  ...

  private HorizontalSplitPanel lowerSection =
      new HorizontalSplitPanel();

  ...
}
```
Tip
Additional to HorizontalSplitPanel there is a VerticalSplitPanel class. We can infer the difference from the class name.
You could run the application right now and you will see a split panel instead of the previous horizontal layout. But let's make a little change before running the application. Add this line somewhere in the constructor of MainLayout:
```
lowerSection.setSplitPosition(30);
```
OK, you can run the application now.

What just happened?

Oh yeah, the application is looking good:

We have switched from HorizontalLayout to HorizontalSplitPanel and we've adjusted the splitter position using the setSplitPosition method with a value of 30 percent for the left component.

setSplitPosition is overloaded.

Method signature...

Vaadin 7 UI Design By Example: Beginner's Guide

Vaadin 7 UI Design By Example: Beginner's Guide

Overview of this book

Related Content you might be interested in

Current Title:

Vaadin 7 UI Design By Example: Beginner's Guide

Time for action – using split panels

Tip

What just happened?