Vaadin 7 UI Design By Example Beginner's Guide

Book description

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.

  • 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

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.

Table of contents

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

Product information

  • Title: Vaadin 7 UI Design By Example Beginner's Guide
  • Author(s): Alejandro Duarte
  • Release date: July 2013
  • Publisher(s): Packt Publishing
  • ISBN: 9781782162261