Book Image

Vaadin 7 Cookbook

Book Image

Vaadin 7 Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Vaadin 7 Cookbook
Apr, 2013 | 404 pages
No titles found
Table of Contents (19 chapters)
Vaadin 7 Cookbook
Vaadin 7 Cookbook
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Creating a Project in Vaadin
Creating a Project in Vaadin
Introduction
Creating a project in Eclipse IDE
Generating a Vaadin project in Maven archetype
Building a Vaadin application with Gradle
Using Vaadin with Scala
Running Vaadin on Grails
2
Layouts
Layouts
Introduction
Creating an adjustable layout using split panels
Creating a custom layout
Controlling components over the CSS layout
Using CSS layouts for mobile devices
Binding tabs with a hard URL
Using Navigator for creating bookmarkable applications with back-forward button support
Aligning components on a page
Creating UI collections of components
Dragging-and-dropping between different layouts
Building any layout with AbsoluteLayout
3
UI Components
UI Components
Introduction
Viewing details of items in ListSelect
Inserting a button to remove a table row
Creating a line chart with Flot
Creating a pie chart with Highcharts
Drag-and-drop from the desktop
Using DateField with Joda-Time DateTime
Zooming with the slider
Restricting buttons in Rich text area
Styling components with CSS
4
Custom Widgets
Custom Widgets
Introduction
Creating a TextField with counter
Creating a TextField only for digits
Creating a chroma-hash password field
Creating a tri-state checkbox using JavaScript
Styling widgets
Speeding up widget set compilation
5
Events
Events
Introduction
Responding immediately to an event in TextArea
Changing Label to TextField by double-clicking
Lazy loading in a table
Reordering columns and rows in a table
Customizing shortcuts
Adding click listener to the Link component
Creating a custom context menu
Updating messages in the menu bar using the ICEPush add-on
Updating the noticeboard using the Refresher add-on
6
Messages
Messages
Introduction
Showing validation messages
Styling system messages
Showing a login form in pop-up view
Customizing tray notifications
Making a confirmation window
Showing a rich tooltip with an image
Informing about file transfers by a progress bar
Waiting for an indeterminate process
Showing information about browsers
7
Working with Forms
Working with Forms
Introduction
Creating a simple form
Generating fields from a bean
Binding fields to a bean
Using field validation
Using bean validation
Creating a custom validation
Creating a CRUD form
Filtering items using ComboBox
8
Spring and Grails Integration
Spring and Grails Integration
Introduction
Setting up a Vaadin project with Spring in Maven
Handling login with Spring
Accessing a database with Spring
Internationalizing Vaadin applications with Spring
Vaadin and Spring injector
Internationalizing Vaadin in Grails
Using Grails ORM for Vaadin application
Using Grails services in Vaadin
Adding a Vaadin add-on into Grails project
9
Data Management
Data Management
Introduction
Binding property to a component
Binding items to a component
Binding a container to a component
Creating a complex table – CRUD II
Filtering data in the table
Using converters
Storing the last selected tab name in cookies
10
Architecture and Performance
Architecture and Performance
Introduction
Building the core
The Login form with Model View Presenter
Model View Presenter for a view with two panels
Unit testing in an MVP pattern
Improving the application's startup time
Avoid sluggish UI – lazy loaded tables
Avoid sluggish UI – paged tables
Optimizing Vaadin applications for search engines
11
Facilitating Development
Facilitating Development
Introduction
The basics of test-driven development in Vaadin
The basics of mocking in Vaadin
Testing a table with a container
Testing the UI with TestBench
Recompiling widgetsets in Maven
Auto-reloading changes in Maven
Blocking uncaught exceptions in the production mode
12
Fun
Fun
Introduction
Magic tricks
Can you raed tihs?
Goodbye, world!
Index
Index

Using CSS layouts for mobile devices

Another nice feature of the CSS layout is that components are wrapped when they reach the width of the layout. This feature can be used to create layouts for small displays, for example, mobile phones or some tablets. We will create a simple layout with a header, two menus, and content in the middle of them.

As we can see in the following screenshot, if the user opens our application on a wide screen, components are displayed side by side. Except the header that takes up the whole width of the page.

If the user opens our application on a narrow screen, for example, on a mobile device, then all components will be aligned into the one column.

How to do it...

Carry out the following steps to create an application with a flexible layout for mobile devices:

  1. Create a project with the main UI class called, for example, Demo.

    public class Demo extends UI {…}

  2. We create a MobileLayout class that extends CssLayout.

    public class MobileLayout extends CssLayout {…}

  3. At first...

Previous Section
End of Section 6
Next Section