Vaadin 7 UI Design By Example: Beginner’s Guide

Do it all with Java! All you need is Vaadin and this book which shows you how to develop web applications in a totally hands-on approach. By the end of it you’ll have acquired the knack and taken a fun journey on the way.

Vaadin 7 UI Design By Example: Beginner’s Guide

Beginner's Guide
Alejandro Duarte

Do it all with Java! All you need is Vaadin and this book which shows you how to develop web applications in a totally hands-on approach. By the end of it you’ll have acquired the knack and taken a fun journey on the way.
$10.00
$49.99
RRP $29.99
RRP $49.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

+ Collection
Free Sample

Book Details

ISBN 139781782162261
Paperback246 pages

About This Book

  • Learn how to develop Vaadin web applications while having fun and getting your hands dirty
  • Develop relevant and unique applications following step-by-step guides with the help of plenty of screenshots from the start
  • The best available introduction to Vaadin with a practical hands-on approach and easy to read tutorials and examples

Who This Book Is For

If you have experience with the Java language and want to create web applications that look good without having to deal with HTML, XML, and JavaScript, this book is for you. Basic Java programming skills are required, but no web development knowledge is needed at all.

Table of Contents

Chapter 1: 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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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

What You Will Learn

  • Create Vaadin applications using Eclipse, Netbeans, and Maven
  • Use input components such as text fields, buttons, combo boxes, check boxes, and more
  • Use layouts, panels, and windows to arrange UI components
  • Incorporate navigation capabilities to Vaadin applications
  • Use tables and trees to present complex data
  • Use advanced components such as progress indicators, context menus, sliders, and drag-and-drop capabilities
  • Include custom HTML, Flash, and other web content in Vaadin applications
  • Customize UI components by using CSS
  • Develop your own components

In Detail

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.

Authors

Table of Contents

Chapter 1: 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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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

Book Details

ISBN 139781782162261
Paperback246 pages
Read More

Recommended for You