Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Checkout

Change country

Modal Close icon
Country selected Country selected
country flag Germany
Country selected
country flag Slovakia
Country selected
country flag Canada
Country selected
country flag Brazil
Country selected
country flag Singapore
Country selected
country flag Hungary
Country selected
country flag Philippines
Country selected
country flag Mexico
Country selected
country flag Thailand
Country selected
country flag Ukraine
Country selected
country flag Luxembourg
Country selected
country flag Estonia
Country selected
country flag Lithuania
Country selected
country flag Norway
Country selected
country flag Chile
Country selected
country flag United States
Country selected
country flag Great Britain
Country selected
country flag India
Country selected
country flag Spain
Country selected
country flag South Korea
Country selected
country flag Ecuador
Country selected
country flag Colombia
Country selected
country flag Taiwan
Country selected
country flag Switzerland
Country selected
country flag Indonesia
Country selected
country flag Cyprus
Country selected
country flag Denmark
Country selected
country flag Finland
Country selected
country flag Poland
Country selected
country flag Malta
Country selected
country flag Czechia
Country selected
country flag New Zealand
Country selected
country flag Austria
Country selected
country flag Turkey
Country selected
country flag France
Country selected
country flag Sweden
Country selected
country flag Italy
Country selected
country flag Egypt
Country selected
country flag Belgium
Country selected
country flag Portugal
Country selected
country flag Slovenia
Country selected
country flag Ireland
Country selected
country flag Romania
Country selected
country flag Greece
Country selected
country flag Argentina
Country selected
country flag Malaysia
Country selected
country flag South Africa
Country selected
country flag Netherlands
Country selected
country flag Bulgaria
Country selected
country flag Latvia
Country selected
country flag Australia
Country selected
country flag Japan
Country selected
country flag Russia
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Home > Business & Other > UI Development > Vaadin 7 UI Design By Example: Beginner's Guide
Vaadin 7 UI Design By Example: Beginner's Guide
Vaadin 7 UI Design By Example: Beginner's Guide

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.

Free Trial
Full star icon Full star icon Full star icon Full star icon Half star icon 4.5 (11 Ratings)
Paperback Jul 2013 246 pages 1st Edition
eBook
NZ$44.99 NZ$64.99
Paperback
NZ$80.99
Subscription
Free Trial
Free Trial
Full star icon Full star icon Full star icon Full star icon Half star icon 4.5 (11 Ratings)
Paperback Jul 2013 246 pages 1st Edition
eBook
NZ$44.99 NZ$64.99
Paperback
NZ$80.99
Subscription
Free Trial
eBook
NZ$44.99 NZ$64.99
Paperback
NZ$80.99
Subscription
Free Trial

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Vaadin 7 UI Design By Example: Beginner's Guide

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

You must be feeling eager to get more of Vaadin. What if we take a look at some of the input components Vaadin has to offer? In this chapter, we will take a closer look at the main components for retrieving and processing all the data that users want your application to be aware of. Read this chapter and you will be able to develop a lot of new useful rich Internet applications using Vaadin.

This chapter will cover the following topics:

  • Separating business classes from UI classes

  • Responding to value changes in input components

  • Getting and setting the value of input components

  • Tooltips and error indicators

  • Underlying Vaadin technologies

  • UI components hierarchy

  • Vaadin's data model

  • Comboboxes, checkboxes, text areas, option groups, twin column selects, and date/time pickers

  • File uploading

It's time to have some fun. Keep reading.

The Time It application

A couple of years ago I was working with some friends on a personal Java project. We used to meet every Saturday to review what we had done before building the entire system. Let me introduce you to my friends: Susan Obstinate and Mark Nowsitall (weird last names, aren't they?).

"I've spent the entire week writing this code, but it's ready now," said Susan with an embittered tone.

"Let me see how you handled that," replied Mark suspiciously. Though they didn't seem to be, they were a couple.

So Susan proudly showed us her piece of code:

// some nasty code was here (censored for respect of the reader)
public String getUglyUrl(long total) {
    String url = "http://localhost/app/someservice?code=";
    
    for(long i = 0; i < total; i++) {
        url += someTrickyMath(i);
    }
    
    return url;
}

public String someTrickyMath(long i) {
    // (censored)
}

"We can use an int object type instead of long for the loop in your getUglyUrl method," instantly affirmed Mark...

Time for action – separating business classes from UI classes

Vaadin is mostly about UI. Vaadin's motto thinking of U and I is not in vain. I said mostly because you can additionally find a bunch of useful add-ons to deal with server-side technologies. Even Vaadin itself ships with some data components.

Note

There are lots of integration add-ons for Vaadin. For instance, you can integrate with technologies such as Groovy, Spring Framework, SQL, JPA, Hibernate, Lucene, Google App Engine Datastore, Quartz, JasperReports, JFreeChart, OpenLayers, Google Maps, OpenID, and even Twitter! All this with one hand tied behind your back. Visit https://vaadin.com/directory.

Most, if not all, applications have some kind of business logic. That is, something to do with the application's data. If you are an experienced developer you will agree with me that separating business logic from UI logic makes a lot of sense. For the "Time It" application, we will use two Java packages to separate business logic from...

Time for action – adding components as class members

To add UI components as class members, edit your TimeItUI class by adding these variables to it:

private static final TestSet[] testSets = new TestSet[] {
  new LongVsInt(),
  new StringVsStringBuffer(),
  new ShortCircuitVsNoShortCircuit()
};

private VerticalLayout layout = new VerticalLayout();
private ComboBox combo = new ComboBox("Test");
private final TextField textField = new TextField("Number of
                                    iterations", "1000");
private CheckBox checkBox = new CheckBox("Keep previous results");
private Button button = new Button("Time it!");
private VerticalLayout resultsLayout = new VerticalLayout();

What just happened?

The first thing you see, testSets, is just an array of business objects, specifically, an array containing instances of TestSet (take a look at the TestSet interface in the book's source code). Think of TestSet as a single scenario from which we want to obtain timing results. For example, the...

Time for action – adding some infrastructure

Edit the init method of your TimeItUI class to match the following:

@Override
protected void init(VaadinRequest request) {
  initCombo();
  initButton();
  initLayout();
}

What just happened?

Here we are breaking up the functionality to initialize our UI components in a more suitable way by implementing smaller methods. Now that we have the required infrastructure, we can start adding input components.

Comboboxes

A combobox is an input component that allows users to select an option from a drop-down list. It looks like the following screenshot:

You must be thinking "yeah right, but how do you put those options in there?" This is easy:

ComboBox c = new ComboBox("Select an option");
c.addItem("Option one");
c.addItem("Option two");
c.addItem("Option three");

If you have the options in a Java Collection class, you can pass the Collection instance to the constructor like this:

ArrayList<String> options = new ArrayList<>();
options.add("Option...

Time for action – adding a combobox

Implement the initCombo method of your TimeItUI class as shown in the following code snippet:

private void initCombo() {
  for(TestSet testSet : testSets) {
    combo.addItem(testSet);
    combo.setItemCaption(testSet, testSet.getTitle());
  }
  
  combo.addValueChangeListener(new ValueChangeListener() {
    @Override
    public void valueChange(ValueChangeEvent event) {
      TestSet testSet = (TestSet) combo.getValue();
      textField.setValue("" + testSet.getDefaultTimes());
      button.setDescription(testSet.getDescription());
    }
  });
  
  combo.setImmediate(true);
}

What just happened?

It's not that complicated. If we isolate the for portion of the previous code, we'll get this:

for(TestSet testSet : testSets) {
  combo.addItem(testSet);
  combo.setItemCaption(testSet, testSet.getTitle());
}

For each TestSet instance in our array, we add a TestSet instance and then we say, "Okay, Vaadin for this testSet array I just added, please show what testSet...

Time for action – validating user input

We can run a TestSet instance only if the user selects one. Follow these steps to add a proper validation:

  1. Implement your initButton method to match this code:

    private void initButton() {
  button.addClickListener(new ClickListener() {
    @Override
    public void buttonClick(ClickEvent event) {
      if(isValid()) {
        runSelectedTest();
      }
    }
  });
}

  2. Now implement your validate method. Here is how we validate:

    public boolean isValid() {
  combo.setComponentError(null);
  textField.setComponentError(null);
  
  boolean isValid = true;
  
  if(combo.getValue() == null) {
    combo.setComponentError(
        new UserError("Select a test from the list."));
    isValid = false;
  }
  
  if(textField.getValue().toString().isEmpty()) {
    textField.setComponentError(new UserError(
        "You must introduce the number of iterations to execute"));

    isValid = false;
  }
  
  return isValid;
}

What just happened?

For the button listener, it's...

Time for action – adding input component into the layout

Implement your initLayout method using the following snippet of code:

private void initLayout() {
  layout.setMargin(true);
  layout.setSpacing(true);
  layout.addComponent(combo);
  layout.addComponent(textField);
  layout.addComponent(checkBox);
  layout.addComponent(button);
  layout.addComponent(resultsLayout);
  
  setContent(layout);
}

What just happened?

We let the layout to have an appropriate margin and spacing. This last one adds some space between components instead of having them bonded inside the layout. Following that, we add combo, textField, checkBox, button, and a VerticalLayout component to put some labels for showing the results of the test case execution. Finally, the last statement sets layout as content of the page.

Checkboxes

Everyone knows checkboxes. Have you ever accepted license agreements during software installations? Just in case, this is a checkbox:

We have already created our checkbox:

private CheckBox checkBox...

Time for action – running the test set

Implement your runSelectedTest method. This method will be called when the user presses the Time it! button:

public void runSelectedTest() {
  Long times = Long.parseLong(textField.getValue());
  Collection<String> results = TestSetExecutor.execute(
      (TestSet) combo.getValue(), times);
  showResults(results);
}

What just happened?

Here, we're converting the string stored in the text field to a Long number using Long.parseLong (a potential exception, NumberFormatException, pokes its head).

Once we have the Long value, we execute the results using a helper class in the biz package (TestSetExecutor). This helper class has an execute method that expects the TestSet to execute and the number of iterations to perform for each test in the TestSet. The execute method returns all the results as a collection of strings that we can proudly show to the user. As proudly as Susan when she presented her code.

Have a go hero – add a validation to Time It

When...

Time for action – showing the results

The default behavior of the application is to show only the results of the last execution. We need to remove all the results that have been previously added to the resultsLayout component if the user has not checked Keep previous results. To do that, implement your showResults method:

private void showResults(Collection<String> results) {
  if(!checkBox.getValue()) {
    resultsLayout.removeAllComponents();
    
  } else if(resultsLayout.getComponentCount() > 0) {
    resultsLayout.addComponent(new Label("--"));
  }
  
  for(String result : results) {
    resultsLayout.addComponent(new Label(result));
  }
}

What just happened?

If the checkbox is not checked, we can remove all the components in resultsLayout (not in layout, we don't want baffled users here):

resultsLayout.removeAllComponents();

If we don't have to remove previous results, we add a separator and iterate over the results to add each one using a label.

Tip

You can remove single components...

Thinking in Vaadin

Your brain must have started to feel comfortable using UI components such as labels, text fields, comboboxes, buttons, vertical layouts, and notifications. You know how to respond to events on these components by implementing click listeners and value change listeners. You can get the introduced (or selected) values from input components, and you can wire all this up inside a custom class extending Vaadin's UI.

The rest of the trip in this book is about learning more components, how to respond to events on components, and how to make them look as we want them to look. To prepare your brain for this trip, we will right now cover some basic theory about Vaadin. So relax, close your IDE for a little while, and let your fingers have a rest while we learn some nuts and bolts of Vaadin.

Servlets and GWT

How can Vaadin render all those nice widgets on the browser using only an instance of a class (the one that extends UI)? Let's expose Vaadin's magic.

We can easily think of the browser...

Time for action – binding data to properties

There's no better way to learn than practice. Follow these steps to see how binding works in real life:

  1. Create a new project named binding using your IDE. A Vaadin one, of course.

  2. Don't hesitate and delete all the content in the generated BindingUI class.

  3. Create a new local instance of TextField and turn immediate mode on:

      @Override
  protected void init(VaadinRequest request) {
    TextField textField = new TextField("Data");
    textField.setImmediate(true);
  }

  4. Create a new local instance of Label:

        Label label = new Label();

  5. Add the TextField and Label components to a new VerticalLayout and set it to be the content of the UI:

    VerticalLayout layout = new VerticalLayout();
layout.addComponent(textField);
layout.addComponent(label);
setContent(layout);

  6. Nothing new so far, so create a new instance of the ObjectProperty class:

    ObjectProperty<String> property =
                     new ObjectProperty<String>("the value");

  7. Wow, that was new...

More input components

It's time to continue with our trip. Vaadin has several built-in input components (or fields as they implement directly or indirectly the Field interface). All these components extend from AbstractField or AbstractSelect. Let's take a look at some of them.

Text area

TextArea is quite similar to TextField. The difference is that the user can enter multiline texts. Take a look at this sample application:

public class TextareaUI extends UI implements ValueChangeListener {

  @Override
  protected void init(VaadinRequest request) {
    // our TextArea component
    TextArea textArea = new TextArea(
        "Enter some multi-lined text and press TAB:");
    textArea.addValueChangeListener(this);
    textArea.setImmediate(true);

    VerticalLayout layout = new VerticalLayout();
    layout.addComponent(textArea);
    setContent(layout);
  }

  @Override
  public void valueChange(ValueChangeEvent event) {
    String userText = event.getProperty().getValue()
        .toString...

Time for action – fixing the OptionGroup example

It's time for our good deed of the day. OptionGroup has a very simple method to turn on a multiple selection mode: setMultiSelect.

  1. Open or import the optiongroup example in your IDE.

  2. Add og.setMultiSelect(true) after instantiating og.

  3. Deploy and run the example.

What just happened?

Take a look at the new interface:

As you can see, now the component is displayed as an assortment of checkboxes and the getValue method (of both OptionGroup and Property) returns a Java Collection (actually a Set). This happens when we activate multiselect mode.

Note

We are not talking about Java EE, but just in case, the correct answers are:

Session beans and Message-driven beans

Have a go hero – improve the OptionGroup example

Try changing the OptionGroup example application to show a message informing whether the answer is correct or not. Here is a quick hint: cast the value to a Java Set instance.

Twin column selects

Instead of the OptionGroup component we can use TwinColSelect...

Time for action – using an InlineDateField component

Let's change the DateField example a little bit:

  1. Open or import the datefield example in your IDE.

  2. Replace DateField with InlineDateField in DateFieldUI.java.

  3. Deploy and run the example.

What just happened?

This is the result you get:

You cannot type the year now, you have to select it from the component.

Uploading files

Study this simple example that displays (in the console) the content of a text file uploaded by the user:

public class UploadUI extends UI implements Receiver {
  @Override
  protected void init(VaadinRequest request) {
    Upload upload = new Upload(
        "Select a text file and look at the console",
        this);

    VerticalLayout layout = new VerticalLayout();
    layout.addComponent(upload);
    setContent(layout);
  }

  @Override
  public OutputStream receiveUpload(String filename,
      String mimeType) {
    return new OutputStream() {
      @Override
      public void write(int b) throws IOException {
        System...

Summary

This was a big chapter. Look at what we have covered:

  • We learned how to create Vaadin applications that communicate with business classes.

  • We took a look at the underlying technologies that make it possible to write web applications entirely in Java.

  • We got to know the Vaadin data model and its core concepts: properties, items, and containers.

  • We saw a simplified version of the UI components hierarchy.

  • We learned the common functionality for UI components and we saw that this functionality is defined in the Component interface paired with the AbstractComponent class.

  • We have learned how to use most of the input components available in Vaadin.

So far, our applications have had a boring layout (VerticalLayout). In the next chapter we will start making more appealing applications by learning a lot about layouts in Vaadin. See you there.

Left arrow icon

Page 1 of 16

Right arrow icon

Key benefits

  • 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

Description

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.

Who is this book 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.

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

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jul 26, 2013
Length: 246 pages
Edition : 1st
Language : English
ISBN-13 : 9781782162261
Category :
Business & Other
Languages :
Java
Concepts :
UI Development
Tools :
Vaadin

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Jul 26, 2013
Length: 246 pages
Edition : 1st
Language : English
ISBN-13 : 9781782162261
Category :
Business & Other
Languages :
Java
Concepts :
UI Development
Tools :
Vaadin

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
START FREE TRIAL
BUY NOW
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just NZ$7 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just NZ$7 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Frequently bought together

Vaadin 7 UI Design By Example: Beginner's Guide
Vaadin 7 UI Design By Example: Beginner's Guide
Read more
Jul 2013 246 pages
Full star icon 4.5 (11)
eBook
eBook
  • eBook eBook NZ$44.99
  • Paperback Paperback NZ$80.99
NZ$44.99 NZ$64.99
NZ$80.99
Vaadin 7 Cookbook
Vaadin 7 Cookbook
Read more
Apr 2013 404 pages
Full star icon 4.3 (9)
eBook
eBook
  • eBook eBook NZ$44.99
  • Paperback Paperback NZ$80.99
NZ$44.99 NZ$64.99
NZ$80.99
Stars icon
Total NZ$ 161.98
Vaadin 7 UI Design By Example: Beginner's Guide
NZ$80.99
Vaadin 7 Cookbook
NZ$80.99
Total NZ$ 161.98 Stars icon
Banner background image

Table of Contents

8 Chapters
Writing Your First Vaadin-powered Application Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
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

Recommendations for you

Left arrow icon
Power Apps Tips, Tricks, and Best Practices
Power Apps Tips, Tricks, and Best Practices
Read more
Nov 2024 430 pages
eBook
eBook
  • eBook eBook NZ$36.99
  • Paperback Paperback NZ$65.99
NZ$36.99 NZ$52.99
NZ$65.99
Information Theory
Information Theory
Read more
Nov 2024 294 pages
eBook
eBook
  • eBook eBook NZ$9.99
NZ$9.99 NZ$14.99
Workflow Automation with Microsoft Power Automate, Second edition
Workflow Automation with Microsoft Power Automate, Second edition
Read more
Aug 2022 424 pages
Full star icon 4.3 (36)
eBook
eBook
  • eBook eBook NZ$40.99
  • Paperback Paperback NZ$73.99
NZ$40.99 NZ$58.99
NZ$73.99
Odoo Development Cookbook
Odoo Development Cookbook
Read more
May 2024 774 pages
Full star icon 4.2 (10)
eBook
eBook
  • eBook eBook NZ$40.99
  • Paperback Paperback NZ$73.99
NZ$40.99 NZ$58.99
NZ$73.99
Tools and Skills for .NET 8
Tools and Skills for .NET 8
Read more
Jul 2024 778 pages
Full star icon 5 (12)
eBook
eBook
  • eBook eBook NZ$38.99
  • Paperback Paperback NZ$48.99
NZ$38.99 NZ$56.99
NZ$48.99 NZ$70.99
Mastering QuickBooks 2024
Mastering QuickBooks 2024
Read more
Dec 2023 570 pages
Full star icon 4.6 (19)
eBook
eBook
  • eBook eBook NZ$27.99
  • Paperback Paperback NZ$51.99
NZ$27.99 NZ$40.99
NZ$51.99
Mastering Microsoft Dynamics 365 Business Central
Mastering Microsoft Dynamics 365 Business Central
Read more
Mar 2024 684 pages
Full star icon 4.9 (17)
eBook
eBook
  • eBook eBook NZ$40.99
  • Paperback Paperback NZ$73.99
NZ$40.99 NZ$58.99
NZ$73.99
Programming Microsoft Dynamics 365 Business Central
Programming Microsoft Dynamics 365 Business Central
Read more
Oct 2024 466 pages
eBook
eBook
  • eBook eBook NZ$36.99
  • Paperback Paperback NZ$65.99
NZ$36.99 NZ$52.99
NZ$65.99
Microsoft 365 and SharePoint Online Cookbook
Microsoft 365 and SharePoint Online Cookbook
Read more
Feb 2024 640 pages
Full star icon 5 (22)
eBook
eBook
  • eBook eBook NZ$31.99
  • Paperback Paperback NZ$40.99
NZ$31.99 NZ$46.99
NZ$40.99 NZ$58.99
Mastering PyTorch
Mastering PyTorch
Read more
May 2024 558 pages
Full star icon 4.7 (18)
eBook
eBook
  • eBook eBook NZ$41.99
  • Paperback Paperback NZ$52.99
NZ$41.99 NZ$60.99
NZ$52.99 NZ$75.99
Right arrow icon

Customer reviews

Top Reviews
  • Top Reviews
  • Most Recent
Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.5
(11 Ratings)
5 star 54.5%
4 star 36.4%
3 star 9.1%
2 star 0%
1 star 0%
Filter icon Filter
Top Reviews
  • Top Reviews
  • Most Recent

Filter reviews by

Quam P-R Dec 26, 2013
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Voici un bon bouquin qui mêle pratique et théorie !!!Génial pour débutants et ceux qui connaissent Java qui ont envie d'aborder le développement Web avec un framework sans trop se prendre la tête.Excellent. Je le conseille vivement.
Amazon Verified review Amazon
JM Sep 15, 2013
Full star icon Full star icon Full star icon Full star icon Full star icon 5
When I started with Vaadiin 6 I was looking for a step by step guide, There are a lot of guides for do something in a blog, or in the help, but nothing like this book. A easy step by step guide, with screens, tips, comments. I really liked this book. I Just learned a lot of stuff I missed in my transition to Vaadin 7 with this book. You must have it.
Amazon Verified review Amazon
mauro@dogma Jun 21, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Very useful guide to start development UI with Vaadin.Many examples guide the reader and provide tricks for start developing fast and be productive in 1 day!Thx
Amazon Verified review Amazon
Jan Krabbenbos Sep 29, 2013
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Very nice introduction into this Java framework for web based applications. It gives a good introduction, but you need some experience with J2EE.
Amazon Verified review Amazon
Michael Mar 25, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Best for start, even if u dont know java. Just read before about Observer patern. Cons: no info about connection to data base.
Amazon Verified review Amazon

People who bought this also bought

Left arrow icon
Learn Blender Simulations the Right Way
Learn Blender Simulations the Right Way
Read more
Nov 2022 368 pages
Full star icon 4 (14)
eBook
eBook
  • eBook eBook NZ$36.99
  • Paperback Paperback NZ$65.99
NZ$36.99 NZ$52.99
NZ$65.99
Mastering Microsoft Dynamics 365 Business Central
Mastering Microsoft Dynamics 365 Business Central
Read more
Mar 2024 684 pages
Full star icon 4.9 (17)
eBook
eBook
  • eBook eBook NZ$40.99
  • Paperback Paperback NZ$73.99
NZ$40.99 NZ$58.99
NZ$73.99
Mastering PostgreSQL 15
Mastering PostgreSQL 15
Read more
Jan 2023 522 pages
Full star icon 4.9 (7)
eBook
eBook
  • eBook eBook NZ$41.99
  • Paperback Paperback NZ$75.99
NZ$41.99 NZ$60.99
NZ$75.99
101 UX Principles – 2nd edition
101 UX Principles – 2nd edition
Read more
May 2022 454 pages
Full star icon 4.7 (60)
eBook
eBook
  • eBook eBook NZ$36.99
  • Paperback Paperback NZ$65.99
  • Audiobook Audiobook NZ$61.99
NZ$36.99 NZ$52.99
NZ$65.99
NZ$61.99
Workflow Automation with Microsoft Power Automate, Second edition
Workflow Automation with Microsoft Power Automate, Second edition
Read more
Aug 2022 424 pages
Full star icon 4.3 (36)
eBook
eBook
  • eBook eBook NZ$40.99
  • Paperback Paperback NZ$73.99
NZ$40.99 NZ$58.99
NZ$73.99
Right arrow icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.