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.

€41.99
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
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m
€41.99
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
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m
eBook
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
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
Estimated delivery fee Deliver to Slovakia

Premium delivery 7 - 10 business days

€25.95
(Includes tracking information)

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 Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR

Contact Details

Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to Slovakia

Premium delivery 7 - 10 business days

€25.95
(Includes tracking information)

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
€18.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
€189.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 €5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
€264.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 €5 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 €22.99
  • Paperback Paperback €41.99
€22.99 €32.99
€41.99
Vaadin 7 Cookbook
Vaadin 7 Cookbook
Read more
Apr 2013 404 pages
Full star icon 4.3 (9)
eBook
eBook
  • eBook eBook €22.99
  • Paperback Paperback €41.99
€22.99 €32.99
€41.99
Stars icon
Total € 83.98
Vaadin 7 UI Design By Example: Beginner's Guide
€41.99
Vaadin 7 Cookbook
€41.99
Total € 83.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
Virtual Filmmaking with Unreal Engine 5
Virtual Filmmaking with Unreal Engine 5
Read more
Feb 2024 480 pages
Full star icon 4.9 (17)
eBook
eBook
  • eBook eBook €22.99
  • Paperback Paperback €41.99
€22.99 €32.99
€41.99
Mastering PostgreSQL 15
Mastering PostgreSQL 15
Read more
Jan 2023 522 pages
Full star icon 4.9 (7)
eBook
eBook
  • eBook eBook €21.99
  • Paperback Paperback €38.99
€21.99 €31.99
€38.99
Odoo Development Cookbook
Odoo Development Cookbook
Read more
May 2024 774 pages
Full star icon 4.2 (10)
eBook
eBook
  • eBook eBook €20.98
  • Paperback Paperback €37.99
€20.98 €29.99
€37.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 €20.98
  • Paperback Paperback €37.99
€20.98 €29.99
€37.99
Mastering QuickBooks 2024
Mastering QuickBooks 2024
Read more
Dec 2023 570 pages
Full star icon 4.6 (19)
eBook
eBook
  • eBook eBook €13.99
  • Paperback Paperback €26.99
€13.99 €20.99
€26.99
Programming Microsoft Dynamics 365 Business Central
Programming Microsoft Dynamics 365 Business Central
Read more
Oct 2024 466 pages
eBook
eBook
  • eBook eBook €17.99
  • Paperback Paperback €33.99
€17.99 €26.99
€33.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 €19.99
  • Paperback Paperback €24.99
€19.99 €28.99
€24.99 €35.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 €20.98
  • Paperback Paperback €37.99
€20.98 €29.99
€37.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 €15.99
  • Paperback Paperback €20.98
€15.99 €23.99
€20.98 €29.99
Mastering PyTorch
Mastering PyTorch
Read more
May 2024 558 pages
Full star icon 4.7 (18)
eBook
eBook
  • eBook eBook €21.99
  • Paperback Paperback €26.99
€21.99 €31.99
€26.99 €38.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 €17.99
  • Paperback Paperback €33.99
€17.99 €26.99
€33.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 €20.98
  • Paperback Paperback €37.99
€20.98 €29.99
€37.99
Mastering PostgreSQL 15
Mastering PostgreSQL 15
Read more
Jan 2023 522 pages
Full star icon 4.9 (7)
eBook
eBook
  • eBook eBook €21.99
  • Paperback Paperback €38.99
€21.99 €31.99
€38.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 €17.99
  • Paperback Paperback €33.99
  • Audiobook Audiobook €31.99
€17.99 €26.99
€33.99
€31.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 €20.98
  • Paperback Paperback €37.99
€20.98 €29.99
€37.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 the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact [email protected] with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at [email protected] using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on [email protected] with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on [email protected] within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on [email protected] who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on [email protected] within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela