Vaadin 7 UI Design By Example: Beginner's Guide - Alejandro Duarte - E-Book

Vaadin 7 UI Design By Example: Beginner's Guide E-Book

Alejandro Duarte

0,0
39,59 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

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.

Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:

EPUB
MOBI

Seitenzahl: 218

Veröffentlichungsjahr: 2013

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Table of Contents

Vaadin 7 UI Design By Example Beginner's Guide
Credits
About the Author
Acknowledgement
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Time for action – heading
What just happened?
Pop quiz – heading
Have a go hero – heading
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Writing Your First Vaadin-powered Application
Creating and running Vaadin applications in Eclipse
Installing Eclipse
Time for action – downloading and installing Eclipse
What just happened?
Installing the Vaadin plugin for Eclipse
Time for action – installing the plugin
What just happened?
Installing Run Jetty Run plugin
Time for action – installing Jetty
What just happened?
Creating a new Vaadin project in Eclipse
Time for action – creating a new Vaadin project
What just happened?
Deploying and running Vaadin applications in Eclipse
Time for action – deploying and running
What just happened?
Creating and running Vaadin applications in NetBeans
Installing NetBeans
Time for action – downloading and installing NetBeans
What just happened?
Creating a new Vaadin project in NetBeans
Time for action – creating a new Vaadin project
What just happened?
Deploying and running Vaadin applications in NetBeans
Time for action – deploying and testing
What just happened?
Creating and running Vaadin applications using Maven
Vaadin 7 Maven archetype
Time for action – creating a new Vaadin project
What just happened?
Deploying and running Vaadin applications with Maven
Time for action – deploying and running
What just happened?
Generated application explained
Buttons
Labels
Have a go hero – display some HTML text
Layout margin
A more interesting "hello world" application
Text fields
Time for action – using text fields
What just happened?
Notifications
Have a go hero – show notifications
Pop quiz – Vaadin fundamentals
Summary
2. Using Input Components and Forms – Time to Listen to Users
The Time It application
Time for action – separating business classes from UI classes
What just happened?
UI components as class members
Time for action – adding components as class members
What just happened?
Time for action – adding some infrastructure
What just happened?
Comboboxes
Time for action – adding a combobox
What just happened?
Responding to value changes
Getting and setting the value of input components
Tooltips
Immediate mode
Error indicators
Time for action – validating user input
What just happened?
Layout spacing
Time for action – adding input component into the layout
What just happened?
Checkboxes
Removing components from layouts
Time for action – running the test set
What just happened?
Have a go hero – add a validation to Time It
Time for action – showing the results
What just happened?
Thinking in Vaadin
Servlets and GWT
UI components hierarchy
Component
Vaadin's data model
Time for action – binding data to properties
What just happened?
Items
Containers
More input components
Text area
Have a go hero – disable word wrap
Rich text area
Option groups
Time for action – fixing the OptionGroup example
What just happened?
Have a go hero – improve the OptionGroup example
Twin column selects
Date/time pickers
Time for action – using an InlineDateField component
What just happened?
Uploading files
Pop quiz – thinking in Vaadin
Summary
3. Arranging Components into Layouts
Horizontal layouts
Time for action – the main layout
What just happened?
Components size
Time for action – visualizing borders
What just happened?
Time for action – setting layouts size
What just happened?
Expand ratio
Time for action – expanding components
What just happened?
Split panels
Time for action – using split panels
What just happened?
Implementing a button-based menu
Time for action – adding menu options
What just happened?
Have a go hero – add a public method to set the header
Grid layouts
Time for action – using grid layouts
What just happened?
Have a go hero – open their eyes
Have a go hero – expand components in GridLayout
Absolute layouts
Time for action – using absolute layouts
What just happened?
Click listeners
Time for action – adding click listeners
What just happened?
Have a go hero – get more data from click events
Form layouts
Time for action – using FormLayout
What just happened?
Panels
Time for action – using panels
What just happened?
Tab sheets
Accordions
Have a go hero – find the disobedient line of code
Windows
Pop quiz – mastering layouts
Summary
4. Using Vaadin Navigation Capabilities
Getting request information
Path info
Time for action – developing a simple website
What just happened?
Parameters
Time for action – reading request parameters
What just happened?
Fragments
Have a go hero – take a look at the Vaadin API documentation
Changing the browser title
Navigators and views
Time for action – using navigators
What just happened?
Time for action – navigating programmatically
What just happened?
Keeping state after refresh
Time for action – preserving application state
What just happened?
User session
Menus
Shortcut keys
Shortcuts for buttons
Time for action – a tedious application
What just happened?
Have a go hero – improve user experience
Shortcuts for Window and Panel
Pop quiz – navigation capabilities
Summary
5. Using Tables – Time to Talk to Users
Tables
Time for action – my first table
What just happened?
Headers
Clicking on headers
Footers
Clicking on footers
Boxwords game
Time for action – implementing the game UI
What just happened?
Page length
Selecting items in tables
Time for action – listening to clicks
What just happened?
Reading data from tables
Time for action – finishing the game
What just happened?
Editable tables
Table field factories
Time for action – using a custom field factory
What just happened?
Understanding generated columns
Collapsing and reordering columns
Have a go hero – activate column reordering powers
Pop quiz – mastering tables
Summary
6. Adding More Components
Trees
Time for action – my first tree
What just happened?
Tree events
Tree tables
Time for action – a file browser
What just happened?
Have a go hero – use TreeTable or Tree interchangeably
Progress indicators
Icons
Time for action – adding icons
What just happened?
Images, Flash, video, audio, and other web content
Time for action – render web content
What just happened?
Sliders
Color picker
Have a go hero – experiment with ColorPicker
File download
Context menus
Drag-and-drop
Have a go hero – study a drag-and-drop example
Pop quiz – more components
Summary
7. Customizing UI Components – Time to Theme it
Vaadin themes
Time for action – changing themes
What just happened?
Introduction to CSS and Sass
Variables
Nesting
Mixins
Introducing Firebug and Chrome inspector
Time for action – inspecting HTML
What just happened?
Creating new themes
Time for action – creating a new Vaadin theme
What just happened?
Styling labels
Time for action – creating a new Vaadin theme
What just happened?
Adding CSS classes to components
Styling text fields
Styling buttons
Styling panels
Styling menus
Styling tables
Pop quiz – Vaadin themes
Summary
8. Developing Your Own Components
Custom components
Time for action – creating a custom component
What just happened?
Client side applications
Time for action – creating a client side application
What just happened?
Have a go hero – check that the app is purely client side
Widgets
Time for action – creating a widget
What just happened?
Remote procedure calls
Extensions
Time for action – creating an extension
What just happened?
Have a go hero – experiment with GWT handlers
Custom JavaScript
Calling JavaScript from the server
Calling the server from JavaScript
JavaScript components
Time for action – creating a JavaScript component
What just happened?
JavaScript extensions
Have a go hero – implement a JavaScript extension
Pop quiz – CustomComponents
Summary
A. Pop Quiz Answers
Chapter 1, Writing Your First Vaadin-powered Application
Pop quiz – Vaadin fundamentals
Chapter 2, Using Input Components and Forms – Time to Listen to Users
Pop quiz – thinking in Vaadin
Chapter 3, Arranging Components into Layouts
Pop quiz – mastering layouts
Chapter 4, Using Vaadin Navigation Capabilities
Pop quiz – navigation capabilities
Chapter 5, Using Tables – Time to Talk to Users
Pop quiz – mastering tables
Chapter 6, Adding More Components
Pop quiz – more components
Chapter 7, Customizing UI Components – Time to Theme it
Pop quiz – Vaadin themes
Chapter 8, Developing Your Own Components
Pop quiz – custom components
Index

Vaadin 7 UI Design By Example Beginner's Guide

Vaadin 7 UI Design By Example Beginner's Guide

Copyright © 2013 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: July 2013

Production Reference: 1190713

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78216-226-1

www.packtpub.com

Cover Image by Jarek Blaminsky (<[email protected]>)

Credits

Author

Alejandro Duarte

Reviewers

Martin Cremer

Max Matveev

Henri Muurimaa

Michael Vogt

Acquisition Editor

Martin Bell

Lead Technical Editor

Arun Nadar

Technical Editors

Mrunmayee Patil

Pragati Singh

Hardik B. Soni

Project Coordinator

Shiksha Chaturvedi

Proofreader

Mario Cecere

Indexer

Monica Ajmera Mehta

Graphics

Ronak Dhruv

Production Coordinators

Arvindkumar Gupta

Kirtee Singhan

Cover Work

Arvindkumar Gupta

About the Author

Alejandro Duarte learned how to program at age 13 using the Basic language on a black screen with a blinking cursor. He used to spend hours thinking of ideas for software that would be good to have and even more hours bringing these ideas to life. Alejandro graduated from National University of Colombia with a BS in Computer Science and has been involved in many Java-related software development projects. He first started working with Struts 2 and quickly switched to more RIA friendly frameworks such as Grails, jQuery, GWT, and Vaadin. Alejandro is the author of the Enterprise App for Vaadin add-on and InfoDoc Pro, both open source projects based on the Vaadin framework. He currently works as a developer for several companies and customers mainly in Colombia, Chile, India, Kenya, and the UK.

When not writing code, Alejandro splits his free time between his family, his beautiful girlfriend, and his passion for the electric guitar. You can contact him at <[email protected]> or through his personal blog http://www.alejandrodu.com. If you are feeling social, you can follow him on Twitter at @alejandro_du.

Acknowledgement

I would like to thank the entire team from Packt Publishing, Ashvini, Martin, Shiksha, and Arun, thanks for trusting me. I thank all the technical reviewers and proofreaders for providing me with valuable feedback from which I have learned a lot. Thanks to Mario Pérez and Camilo Gonzáles from National University of Colombia for introducing me as a professional to the world of software development. Thanks to Colombitrade and all Enterprise App for Vaadin users for their support and confidence. A special thanks to the Vaadin team and community for providing such a terrific framework and knowledge base with tons of articles and useful resources. Hope this book reciprocally contributes back to the community.

I can't thank my parents enough for being so helpful and supportive. I would never have written this book without their constant support and exemplary way of teaching. There's no better teacher than a good parent. A special thanks to my brothers, Juan and Edgar, and my cousins, Marcelo, Camilo, and Jonathan, with whom I took my first steps in programming and created a fictional software development company when we were children, DPA Software. Thanks to my sister for her amusing company while writing this book. Last but not least, thank you Viviana for your encouragement when reaching deadlines and for all those beautiful moments you have gave me.

About the Reviewers

Martin Cremer is working as an architect for a company in the financial sector. His work focuses on maintaining and developing reference architecture for web-based enterprise applications with Vaadin as well as supporting developers in their daily work.

Max Matveev is a software development expert with 12 years of expertise in software development. Originally from Khabarovsk, Russia, he is currently living in Zurich, Switzerland and working for one of the largest Swiss banks as the Technical Lead.

With main focus on Enterprise Java, he is experienced in all areas of enterprise software development ranging from backend data processing to modern rich UI web applications.

Always looking for the best user experience possible he is one of those who allowed Vaadin to become one of the bank's standard frameworks for building UI.

In addition to his main work, Max is also author of some popular (with over one million downloads) indie iOS applications. Data processing requirements for the huge user base allowed him to become one of the main pre-production tester of Jelastic SaaS platform during the platform's beta period.

Michael Vogt started in 2000 at Apple, Germany as a WebObjects developer. Since then, he worked in many different companies and countries, mostly as a freelancer on GWT projects. Currently he works in the services department of Vaadin.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.

Why Subscribe?

Fully searchable across every book published by PacktCopy and paste, print and bookmark contentOn demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Preface

Vaadin is an open source framework to ease development of Java web applications that provides a programming model close to Swing or AWT. Vaadin is licensed under the Apache License, is well documented, comes with out-of-the-box theming facilities, and is supported by a committed company and a vibrant community contributing to the framework through forums and hundreds of add-ons.

Vaadin allows developers to write web applications using only Java. Of course, HTML, CSS, and JavaScript are building blocks of web application development, however, by using Vaadin, developers will be maintaining Java code most of the time. The UI layer is implemented using the object-oriented paradigm. This allows developers to bring all the object-oriented knowledge out there directly to their UI layers. Developers missing the joy of using Swing or AWT to build desktop applications when creating web applications usually love Vaadin.

This book will teach you how to develop Java web applications in minutes. Starting from chapter one, you will begin with simple examples and quickly move towards more complex applications covering UI components, themes, custom components, and client-side applications.

What this book covers

Chapter 1, Writing Your First Vaadin-powered Application, explains how to set up your development environment and create your first Vaadin project.

Chapter 2, Using Input Components and Forms – Time to Listen to Users, explains basic usage of input components and the Vaadin data model.

Chapter 3, Arranging Components into Layouts, covers layout components, panels, pop-up windows, tab sheets, and accordions.

Chapter 4, Using Vaadin Navigation Capabilities, deals with using Vaadin to build more website-like applications.

Chapter 5, Using Tables – Time to Talk to Users, covers one of the most useful and powerful UI components in Vaadin: the table component.

Chapter 6, Adding More Components, introduces several UI components such as trees, progress indicators, icons, sliders, color pickers, images, web content, and drag and drop.

Chapter 7, Customizing UI Components – Time to Theme it, covers Vaadin theme creation using CSS and Sass.

Chapter 8, Developing Your Own Components, introduces the strategies to develop pure client-side applications and custom components.

What you need for this book

To run the examples and follow the tutorials in this book, you will need Java SDK installed. You will need also Eclipse, NetBeans, or Maven.

Who this book is for

This book is ideal for developers with a good knowledge of Java willing to build rich-Internet applications using Vaadin. Basic understanding of HTML and CSS is useful but not required to understand the content of the book.

Conventions

In this book, you will find several headings appearing frequently.

To give clear instructions of how to complete a procedure or task, we use:

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <[email protected]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.

Chapter 1. Writing Your First Vaadin-powered Application

So you want to start creating cool web applications in Java? Well, you've come to the right place. Vaadin is a mature, powerful Java framework to build modern web applications leveraging your Java programming skills, and understanding of concepts such as listeners, components, and other well-known constructions acquired from the desktop APIs such as Swing and AWT.

First things first. Downloading, installing, and configuring your development environment are the first steps to get started with Vaadin. In this chapter we will cover the following topics:

Creating and running Vaadin applications in EclipseCreating and running Vaadin applications in NetBeansCreating and running Vaadin applications using MavenGenerated application explainedButtonsLabelsText fieldsNotifications

We will cover the details of configuring your development environment using Eclipse, NetBeans, and Maven. Feel free to jump straight to the section explaining your favorite IDE and skip those covering the other ones.

Let's get our hands dirty!

Creating and running Vaadin applications in Eclipse

If you are using NetBeans, another IDE, or no IDE at all, you can safely skip this section.

Installing Eclipse

Just in case you haven't already done so, you will need to download and install Eclipse, the preferred IDE for developing Vaadin applications.

Time for action – downloading and installing Eclipse

Steps to download and install Eclipse are as follows:

Go to http://eclipse.org/ and download the latest (or your favorite) version of Eclipse for Java EE Developers.Extract the downloaded file to the directory you would like Eclipse to be installed in.Execute eclipse.exe or eclipse according to your operating system flavor.

What just happened?

Guess what? We've just downloaded and installed Eclipse. Seriously, that was the very first step; now we need to install the Vaadin plugin for Eclipse.

Installing the Vaadin plugin for Eclipse

In this section we will see how to install the Vaadin plugin for Eclipse.

Time for action – installing the plugin

Steps to install the Vaadin plugin for Eclipse are as follows:

In Eclipse, go to Help | Eclipse Marketplace….Type Vaadin in the Find field inside the Search tab and press Enter.Click on the Install button besides the Vaadin Plugin for Eclipse heading.Eclipse will calculate some requirements and dependencies. Once it does, make sure the Vaadin Plugin for Eclipse is checked and click on Next.Read and accept the terms of the license agreement and click on Finish to start installing the plugin.

Tip

I always keep processes like this running in the background. This helps me to be more productive because I can read or write some code, change configuration, deploy to a server, or perform any other IDE related action while having the background process moving forward.

The installation process can take some minutes. You will be prompted to accept installing software that contains unsigned content. Click on OK when asked to and let Eclipse continue with the installation.Finally, Eclipse will ask you if you want to restart the IDE. Do it. Once you restart Eclipse, you'll see a little reindeer logo on the toolbar, that's the Vaadin logo and means that the plugin is ready.

What just happened?

We've just prepared Eclipse to start hacking! Using the Vaadin Plugin for Eclipse we'll be able to create new Vaadin projects, custom components, and themes. But before that, we will have to install a web server to deploy our Vaadin applications.

Note

You might have noted that the Vaadin Plugin for Eclipse installed an additional plugin: IvyDE. Ivy is a tool for managing dependencies, usually all the JAR files that your project needs. Don't worry too much if you don't know Ivy, just go through the following steps and we will get some fun in a couple of minutes, I promise.

Installing Run Jetty Run plugin

Although we can deploy to most Java