Book Image

Vaadin 7 UI Design By Example: Beginner's Guide

Book Image

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.

Related Content you might be interested in

Current Title:

Small book image
Vaadin 7 UI Design By Example: Beginner's Guide
Jul, 2013 | 246 pages
No titles found
Table of Contents (17 chapters)
Vaadin 7 UI Design By Example Beginner's Guide
Vaadin 7 UI Design By Example Beginner's Guide
Credits
Credits
About the Author
About the Author
Acknowledgement
Acknowledgement
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Writing Your First Vaadin-powered Application
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
2
Using Input Components and Forms – Time to Listen to Users
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
3
Arranging Components into Layouts
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
4
Using Vaadin Navigation Capabilities
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
5
Using Tables – Time to Talk to Users
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
6
Adding More Components
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
7
Customizing UI Components – Time to Theme it
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
8
Developing Your Own Components
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
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
Index

Time for action – creating a new Vaadin theme

Follow these steps to change the way labels look:

  1. Open the themes example application on your IDE.

  2. Edit the cool mixin (in cool.scss) to include one rule for labels:

    @mixin cool {
  @include chameleon;

  .v-label {
    color: #fff;
    background-color: #4455aa; 
    font: 16px Verdana, Arial;
    padding: 5px;
    margin-bottom: 10px;
  }
  
}

  3. Run the application.

What just happened?

Well, this happened:

We defined a rule to be applied to labels. The CSS class v-label is automatically added to every label element.

Tip

How to know which CSS classes are added by Vaadin? The fastest way to get this information is by inspecting the HTML in your browser. You can also find this information in the Book of Vaadin, the official Vaadin reference. For example, if you are interested in the CSS classes used for Label, you can take a look at (https://vaadin.com/book/vaadin7/-/page/components.label.html).

Previous Section
End of Section 10
Next Section