• UI Components
        Accessible, Beautiful, Consistent
      • Flow Framework
        UI in 100% Java
      • Hilla Framework
        Full-stack React for Java
      • Copilot
        AI-powered UI Editor
      • Acceleration Kits
        Enterprise Building Blocks
      • Modernization Toolkit
        Migrate Legacy Apps
      • Control Center
        Application management
      • Add-ons
      • Roadmap
      • Showcase
  • Docs
      • Forum
        Ask questions, find answers
      • Blog
        Latest Vaadin news and tips
      • Webinars
        New and on-demand webinars
      • Events
        Meetups and conferences
      • Vaadin Create
        The conference for Vaadin developers
      • UI Training & Certification
        Free training for your team
      • White papers
      • Customer stories
      • Support
        Direct line to Vaadin experts
      • Maintenance
        Up to 15 years per version
      • Upgrading Vaadin Apps
        Get more from your applications
      • Expert services
      • Design services
      • App modernization
      • Vaadin company
      • Services catalog
  • Why Vaadin?
  • Pricing
Contact us Create app
Contact us
Sign in
Edit Profile
Subscription
Multiple
My Page
0 unread
My Account My Certifications My Components
Toggle admin panel
Log out
Create app

Docs

Documentation versions (currently viewingVaadin 24)V24
  • Vaadin 24
  • Vaadin 23
  • Vaadin 14
  • Vaadin 10
  • Vaadin 8
  • Vaadin 7
  • Flow
  • Fusion
  • Design System
  • Collaboration Engine
  • Tools
  • Upgrading
  • Contributing to Projects
  • Contributing to Documentation
  • API Reference

Docs

  • Flow
  • Fusion
  • Design System
  • Collaboration Engine
  • Tools
  • Upgrading
  • Contributing to Projects
  • Contributing to Documentation
  • API Reference
  • Overview
  • Designer
    • Overview
    • Tutorial
      • Getting Started
      • Build your main view
      • Build your contact form
      • Get your application up and running
      • Connecting your Main View to Java
      • Connecting your Contact Form to Java
      • Wrap up
    • Using Designer
      • Designing
      • Connect to Java
      • Previewing
      • Laying Out Views
      • Theming
      • Frequently Asked Questions
    • Product page
  • TestBench
    • Overview
    • Getting Started
    • Installing Web Drivers
    • Creating Tests
    • Creating Maintainable Tests using Page Objects
    • Low Level Element Interactions
    • Taking and Comparing Screenshots
    • Advanced Testing Concepts
    • Making Tests Reliable
    • Behavior-Driven Development
    • Running Tests with Maven
    • Running Tests on a CI Server
    • Running Tests on Multiple Browsers in a Grid
    • Setting up your Own Test Grid
    • Migrating to Vaadin 10
    • Product page
    • TestBench Core API
    • Vaadin Component API for TestBench
    • Example project using TestBench
  • Multiplatform Runtime
    • Overview
    • Step by Step Guide
      • pom.xml configuration for Vaadin 7
      • pom.xml configuration for Vaadin 8
      • Removing Legacy Servlets
      • Converting Legacy UIs
      • Running a Spring Boot application
      • Running a Vaadin Legacy CDI application with MPR and Flow
      • Navigation using Navigator
      • Converting a UI when not using other frameworks
      • Converting UI parameters
      • Adding legacy components to Flow layouts
    • Configuration and advanced topics
      • Adding Legacy Components in a Flow Layout
      • Legacy theme in MPR
      • Custom widgetset and MPR
      • Limitations of MPR
      • Setting up production mode
      • Push and MPR
      • Using sessions with MPR
      • Using a custom legacy UI class
      • Creating V7 and V14+ CDI applications side-by-side
  • Design System Publisher
    • Overview
    • Getting Started
    • Development Build
    • Editing Content
    • Site Customization
    • Custom Theme
    • Adding UI Examples
    • Production Setup
    • Updating
    • Troubleshooting
  1. Docs
  2. Tools
  3. Designer
  4. Tutorial

Tutorial

Getting Started
Build your main view
Build your contact form
Get your application up and running
Connecting your Main View to Java
Connecting your Contact Form to Java
Wrap up

Updated 2021-04-13