You are previewing Vaadin 7 UI Design By Example Beginner's Guide.
O'Reilly logo
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