Vaadin 7 UI Design By Example: Beginner’s Guide


Vaadin 7 UI Design By Example: Beginner’s Guide
eBook: $29.99
Formats: PDF, PacktLib, ePub and Mobi formats
$23.99
save 20%!
Print + free eBook + free PacktLib access to the book: $79.98    Print cover: $49.99
$49.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Reviews
Support
Sample Chapters
  • 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

Book Details

Language : English
Paperback : 246 pages [ 235mm x 191mm ]
Release Date : July 2013
ISBN : 1782162267
ISBN 13 : 9781782162261
Author(s) : Alejandro Duarte
Topics and Technologies : All Books, Application Development, Beginner's Guides, Open Source

Table of Contents

Preface
Chapter 1: Writing Your First Vaadin-powered Application
Chapter 2: Using Input Components and Forms – Time to Listen to Users
Chapter 3: Arranging Components into Layouts
Chapter 4: Using Vaadin Navigation Capabilities
Chapter 5: Using Tables – Time to Talk to Users
Chapter 6: Adding More Components
Chapter 7: Customizing UI Components – Time to Theme it
Chapter 8: Developing Your Own Components
Appendix: Pop Quiz Answers
Index
  • Chapter 1: Writing Your First Vaadin-powered Application
    • Creating and running Vaadin applications in Eclipse
      • Installing Eclipse
    • Time for action – downloading and installing Eclipse
      • Installing the Vaadin plugin for Eclipse
    • Time for action – installing the plugin
      • Installing Run Jetty Run plugin
    • Time for action – installing Jetty
      • Creating a new Vaadin project in Eclipse
    • Time for action – creating a new Vaadin project
      • Deploying and running Vaadin applications in Eclipse
    • Time for action – deploying and running
    • Creating and running Vaadin applications in NetBeans
      • Installing NetBeans
    • Time for action – downloading and installing NetBeans
      • Creating a new Vaadin project in NetBeans
    • Time for action – creating a new Vaadin project
      • Deploying and running Vaadin applications in NetBeans
    • Time for action – deploying and testing
    • Creating and running Vaadin applications using Maven
      • Vaadin 7 Maven archetype
    • Time for action – creating a new Vaadin project
      • Deploying and running Vaadin applications with Maven
    • Time for action – deploying and running
    • Generated application explained
      • Buttons
      • Labels
      • Layout margin
    • A more interesting "hello world" application
      • Text fields
    • Time for action – using text fields
      • Notifications
    • Summary
    • Chapter 2: Using Input Components and Forms – Time to Listen to Users
      • The Time It application
      • Time for action – separating business classes from UI classes
        • UI components as class members
      • Time for action – adding components as class members
      • Time for action – adding some infrastructure
        • Comboboxes
      • Time for action – adding a combobox
        • Responding to value changes
        • Getting and setting the value of input components
        • Tooltips
        • Immediate mode
        • Error indicators
      • Time for action – validating user input
        • Layout spacing
      • Time for action – adding input component into the layout
        • Checkboxes
        • Removing components from layouts
      • Time for action – running the test set
      • Time for action – showing the results
      • Thinking in Vaadin
        • Servlets and GWT
        • UI components hierarchy
          • Component
        • Vaadin's data model
      • Time for action – binding data to properties
        • Items
        • Containers
    • More input components
      • Text area
      • Rich text area
      • Option groups
    • Time for action – fixing the OptionGroup example
      • Twin column selects
      • Date/time pickers
    • Time for action – using an InlineDateField component
      • Uploading files
    • Summary
      • Chapter 3: 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
        • Chapter 4: Using Vaadin Navigation Capabilities
          • Getting request information
            • Path info
          • Time for action – developing a simple website
            • Parameters
          • Time for action – reading request parameters
            • Fragments
            • Changing the browser title
          • 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
            • Shortcuts for buttons
          • Time for action – a tedious application
            • Shortcuts for Window and Panel
          • Summary
          • Chapter 5: Using Tables – Time to Talk to Users
            • Tables
            • Time for action – my first table
            • Headers
              • Clicking on headers
            • Footers
              • Clicking on 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
              • Table field factories
            • Time for action – using a custom field factory
            • Understanding generated columns
            • Collapsing and reordering columns
            • Summary
            • Chapter 6: Adding More Components
              • Trees
              • Time for action – my first tree
                • Tree events
                • Tree tables
              • 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
              • Chapter 7: Customizing UI Components – Time to Theme it
                • Vaadin themes
                • Time for action – changing themes
                • Introduction to CSS and Sass
                  • Variables
                  • Nesting
                  • Mixins
                • 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
                • Chapter 8: 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
                    • Calling JavaScript from the server
                    • Calling the server from JavaScript
                  • JavaScript components
                  • Time for action – creating a JavaScript component
                    • JavaScript extensions
                  • Summary
                  • Appendix: Pop Quiz Answers
                    • Chapter 1, Writing Your First Vaadin-powered Application
                    • Chapter 2, Using Input Components and Forms – Time to Listen to Users
                    • Chapter 3, Arranging Components into Layouts
                    • Chapter 4, Using Vaadin Navigation Capabilities
                    • Chapter 5, Using Tables – Time to Talk to Users
                    • Chapter 6, Adding More Components
                    • Chapter 7, Customizing UI Components – Time to Theme it
                    • Chapter 8, Developing Your Own Components

                    Alejandro Duarte

                    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 alejandro.d.a@gmail.com or through his personal blog http://www.alejandrodu.com. If you are feeling social, you can follow him on Twitter at @alejandro_du.

                    Code Downloads

                    Download the code and support files for this book.


                    Submit Errata

                    Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                    Errata

                    - 4 submitted: last submission 25 Mar 2014

                    Errata type: code | Page number: 65 | Errata date: November 15, 2013
                    
                    public MainLayout() {
                      upperSection.addComponent(new Label("Header"));
                      menuSection.addComponent(new Label("Menu"));
                      contentSection.addComponent(new Label("Content"));
                    
                      lowerSection.addComponent(menuLayout);
                      upperSection.addComponent(contentLayout);
                    
                      addComponent(upperSection);
                      addComponent(lowerSection);
                    }
                    
                    must be as follows:
                    
                    public MainLayout() {
                       upperSection.addComponent(new Label("Header"));
                       menuLayout.addComponent(new Label("Menu"));
                       contentLayout.addComponent(new Label("Content"));
                    
                       lowerSection.addComponent(menuLayout);
                       lowerSection.addComponent(contentLayout);
                    		
                       addComponent(upperSection);
                       addComponent(lowerSection);
                    }

                    Errata type: technical | Page number: 97 | Errata date: November 25, 2013

                    For example, we could modify our previous application to show Page 1 or Page 2 according to the fragment
                    specified, so the user can access Page 1 at http://localhost:8080/website2/#1,
                    and Page 2 at http://localhost:8080/website2/#1.

                    should be:

                    For example, we could modify our previous application to show Page 1 or Page 2 according to the fragment
                    specified, so the user can access Page 1 at http://localhost:8080/website2/#1,
                    and Page 2 at http://localhost:8080/website2/#2.

                    Errata type: Technical | Page number 181 | Errata date: March 25, 2014

                    The sentence is:

                    This makes all the content of  chameleon.csss available in  cool.scss.

                    This should be:

                    This makes all the content of  chameleon.scss available in  cool.scss.

                    Errata type: Typo | Page number 163 | Errata date: March 25, 2014

                    The sentence is:

                    FileDownloader is an Extension. En  Extension is an interface that allows adding
                    functionality to a component.

                    It should be:

                    FileDownloader is an Extension. An  Extension is an interface that allows adding
                    functionality to a component.

                    Sample chapters

                    You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                    Frequently bought together

                    Vaadin 7 UI Design By Example: Beginner’s Guide +    PhoneGap 3.x Mobile Application Development Hotshot =
                    50% Off
                    the second eBook
                    Price for both: €31.20

                    Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                    What you will learn from this book

                    • 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

                    In Detail

                    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.

                    Approach

                    This book is a hands-on Beginner’s Guide for developers who are new to Vaadin and/or Vaadin UI components. The book will teach readers through examples to use each of the exciting components to build and add various aspects of the user interface to their web apps.

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

                    Code Download and Errata
                    Packt Anytime, Anywhere
                    Register Books
                    Print Upgrades
                    eBook Downloads
                    Video Support
                    Contact Us
                    Awards Voting Nominations Previous Winners
                    Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                    Resources
                    Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software