Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Vaadin 7 UI Design By Example: Beginner's Guide
  • Table Of Contents Toc
Vaadin 7 UI Design By Example: Beginner's Guide

Vaadin 7 UI Design By Example: Beginner's Guide

4.5 (11)
Buy this Book
close
close
Vaadin 7 UI Design By Example: Beginner's Guide

Vaadin 7 UI Design By Example: Beginner's Guide

4.5 (11)
Buy this Book

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.
Table of Contents (17 chapters)
close
close
close
Vaadin 7 UI Design By Example Beginner's Guide
Icon
Vaadin 7 UI Design By Example Beginner's Guide
Credits
Icon
Credits
About the Author
Icon
About the Author
Acknowledgement
Icon
Acknowledgement
About the Reviewers
Icon
About the Reviewers
www.PacktPub.com
Icon
www.PacktPub.com
Preface
Icon
Preface
Lock Free Chapter
1
Writing Your First Vaadin-powered Application
Icon
Writing Your First Vaadin-powered Application
Icon
Creating and running Vaadin applications in Eclipse
Icon
Time for action – downloading and installing Eclipse
Icon
Time for action – installing the plugin
Icon
Time for action – installing Jetty
Icon
Time for action – creating a new Vaadin project
Icon
Time for action – deploying and running
Icon
Creating and running Vaadin applications in NetBeans
Icon
Time for action – downloading and installing NetBeans
Icon
Time for action – creating a new Vaadin project
Icon
Time for action – deploying and testing
Icon
Creating and running Vaadin applications using Maven
Icon
Time for action – creating a new Vaadin project
Icon
Time for action – deploying and running
Icon
Generated application explained
Icon
A more interesting "hello world" application
Icon
Time for action – using text fields
Icon
Summary
2
Using Input Components and Forms – Time to Listen to Users
Icon
Using Input Components and Forms – Time to Listen to Users
Icon
The Time It application
Icon
Time for action – separating business classes from UI classes
Icon
Time for action – adding components as class members
Icon
Time for action – adding some infrastructure
Icon
Time for action – adding a combobox
Icon
Time for action – validating user input
Icon
Time for action – adding input component into the layout
Icon
Time for action – running the test set
Icon
Time for action – showing the results
Icon
Thinking in Vaadin
Icon
Time for action – binding data to properties
Icon
More input components
Icon
Time for action – fixing the OptionGroup example
Icon
Time for action – using an InlineDateField component
Icon
Summary
3
Arranging Components into Layouts
Icon
Arranging Components into Layouts
Icon
Horizontal layouts
Icon
Time for action – the main layout
Icon
Components size
Icon
Time for action – visualizing borders
Icon
Time for action – setting layouts size
Icon
Expand ratio
Icon
Time for action – expanding components
Icon
Split panels
Icon
Time for action – using split panels
Icon
Implementing a button-based menu
Icon
Time for action – adding menu options
Icon
Grid layouts
Icon
Time for action – using grid layouts
Icon
Absolute layouts
Icon
Time for action – using absolute layouts
Icon
Click listeners
Icon
Time for action – adding click listeners
Icon
Form layouts
Icon
Time for action – using FormLayout
Icon
Panels
Icon
Time for action – using panels
Icon
Tab sheets
Icon
Accordions
Icon
Windows
Icon
Summary
4
Using Vaadin Navigation Capabilities
Icon
Using Vaadin Navigation Capabilities
Icon
Getting request information
Icon
Time for action – developing a simple website
Icon
Time for action – reading request parameters
Icon
Navigators and views
Icon
Time for action – using navigators
Icon
Time for action – navigating programmatically
Icon
Keeping state after refresh
Icon
Time for action – preserving application state
Icon
User session
Icon
Menus
Icon
Shortcut keys
Icon
Time for action – a tedious application
Icon
Summary
5
Using Tables – Time to Talk to Users
Icon
Using Tables – Time to Talk to Users
Icon
Tables
Icon
Time for action – my first table
Icon
Headers
Icon
Footers
Icon
Boxwords game
Icon
Time for action – implementing the game UI
Icon
Page length
Icon
Selecting items in tables
Icon
Time for action – listening to clicks
Icon
Reading data from tables
Icon
Time for action – finishing the game
Icon
Editable tables
Icon
Time for action – using a custom field factory
Icon
Understanding generated columns
Icon
Collapsing and reordering columns
Icon
Summary
6
Adding More Components
Icon
Adding More Components
Icon
Trees
Icon
Time for action – my first tree
Icon
Time for action – a file browser
Icon
Progress indicators
Icon
Icons
Icon
Time for action – adding icons
Icon
Images, Flash, video, audio, and other web content
Icon
Time for action – render web content
Icon
Sliders
Icon
Color picker
Icon
File download
Icon
Context menus
Icon
Drag-and-drop
Icon
Summary
7
Customizing UI Components – Time to Theme it
chevron up
Icon
Customizing UI Components – Time to Theme it
Icon
Vaadin themes
Icon
Time for action – changing themes
Icon
Introduction to CSS and Sass
Icon
Introducing Firebug and Chrome inspector
Icon
Time for action – inspecting HTML
Icon
Creating new themes
Icon
Time for action – creating a new Vaadin theme
Icon
Styling labels
Icon
Time for action – creating a new Vaadin theme
Icon
Adding CSS classes to components
Icon
Styling text fields
Icon
Styling buttons
Icon
Styling panels
Icon
Styling menus
Icon
Styling tables
Icon
Summary
8
Developing Your Own Components
Icon
Developing Your Own Components
Icon
Custom components
Icon
Time for action – creating a custom component
Icon
Client side applications
Icon
Time for action – creating a client side application
Icon
Widgets
Icon
Time for action – creating a widget
Icon
Remote procedure calls
Icon
Extensions
Icon
Time for action – creating an extension
Icon
Custom JavaScript
Icon
JavaScript components
Icon
Time for action – creating a JavaScript component
Icon
Summary
1
Pop Quiz Answers
Icon
Pop Quiz Answers
Icon
Chapter 1, Writing Your First Vaadin-powered Application
Icon
Chapter 2, Using Input Components and Forms – Time to Listen to Users
Icon
Chapter 3, Arranging Components into Layouts
Icon
Chapter 4, Using Vaadin Navigation Capabilities
Icon
Chapter 5, Using Tables – Time to Talk to Users
Icon
Chapter 6, Adding More Components
Icon
Chapter 7, Customizing UI Components – Time to Theme it
Icon
Chapter 8, Developing Your Own Components
2
Index
Icon
Index

Styling text fields

Text fields have the v-textfield CSS class. However, sometimes we need to do some tricks in order to accomplish our styling purposes. For example, if we want to make the text field have some rounded borders and a little icon inside the field, we could think of doing just this:

  
.v-textfield {
    border: 1px solid #4455aa;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background:#FFFFFF url("search.png") no-repeat 5px 2px;
    padding-left: 22px;
  }

That won't work when extending any of the default themes. The reason is that the themes are defining more specific rules for input elements. You can use Firebug or Chrome DevTools to inspect the element and see that the new rule is listed, but the theme selector comes first in the CSS order, so the extended theme rule has precedence. To change this, we need to override the rule for input elements:

  
input.v-textfield {

    /* ... */

  }

But there are several input components...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 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
End of Section 7
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon