Customizing UI Components – Time to Theme it | Vaadin 7 UI Design By Example: Beginner's Guide

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Vaadin 7 UI Design By Example: Beginner's Guide

4.5 (11)

Vaadin 7 UI Design By Example: Beginner's Guide

4.5 (11)

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

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

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

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

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

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

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

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

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

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 create a new Vaadin theme:

Open the themes example application on your IDE.
Create a new VAADIN/themes/cool/ folder besides your WEB-INF folder:
Create a new file styles.scss in the newly created directory and let your fingers type this into the new file:
```
@import "cool.scss";

.cool {
  @include cool;
}
```
Create a new file cool.scss in the newly created directory and allow your fingers to type this into the new file:
```
@import "../chameleon/chameleon.scss";

@mixin cool {
  @include chameleon;
}
```

Use the theme in ThemesUI:

@Theme("cool")
public class ThemesUI extends UI {

  // ...

}

Run the application and make sure that it's using the chameleon theme.

What just happened?

We've just created a new theme with the name cool. Configuring @Theme("cool") will make Vaadin search for a cool directory inside VAADIN/themes/. More precisely, Vaadin will load the file VAADIN/themes/cool/styles.scss.

The first line of syles.scss imports another file...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Vaadin 7 UI Design By Example: Beginner's Guide

Search

Your notes and bookmarks