anchor.diff:  The example code creates one [classname]#TextField# to allow the user to input her name and a [classname]#Button# whose click listener dynamically adds a new [classname]#Label# component to the main layout.
   In the end of the [methodname]#init()# method, we just configure the main layout and place components into it and set it to be the content of [classname]#MyUI#.
   
  +<<<<<<< HEAD
   To test your first Vaadin application, right-click on the project and choose "Debug as > Maven build...".
   The debug mode is slightly slower than the basic run mode, but it often helps you to figure out what is happening in your application.
  +=======
  +[[figure.framework.tutorial.debug-as-maven-build]]
  +.Starting the server using a Maven target
  +image::img/debugAsMavenBuild.jpg[]
  +>>>>>>> Tutorial navigation and formatting
   
   .Starting the server using a Maven target
   image::debugAsMavenBuild.jpg[]
   
  +<<<<<<< HEAD
   In the dialog, type `Run in jetty` to the [guilabel]#Name# input and `jetty:run` to the [guilabel]#Goals# input.
   
   .Generating a Maven launch for `jetty:run` target
   image::debugAsMavenBuild2.jpg[]
  +=======
  +[[figure.framework.tutorial.jetty-run]]
  +.Generating a Maven launch for jetty:run target
  +image::img/debugAsMavenBuild2.jpg[]
  +>>>>>>> Tutorial navigation and formatting
   
   Before clicking debug, to make sure debugging works properly, add your Java
   project to the source lookup path from the [guilabel]#Source# tab, as it is being done in <<figure.tutorial.creating.add-sources>>.
   
  +<<<<<<< HEAD
   [[figure.tutorial.creating.add-sources]]
   .Adding sources for debugging
   image::debugAsMavenBuildAddSources.jpg[]
  +=======
  +[[figure.framework.tutorial.add-sources]]
  +.Adding sources for debugging
  +image::img/debugAsMavenBuildAddSources.jpg[]
  +>>>>>>> Tutorial navigation and formatting
   
   Now click [guibutton]#Debug# to continue.
   This will download a small Java web server (if not cached to your local Maven repository), and use it to host your application.
  
positive.code: 
  To get back to the _Java EE Perspective_, an Eclipse mode designed for editing Java web app code, click the [guibutton]#Java EE# button in the toolbar.
  
  == Adding a demo "backend"
  
  Before getting more into real Vaadin development, let us introduce some domain objects and a "fake backend".
  
negative.code: title: Vaadin Tutorial
  order: 1
  layout: page
  subnav_auto_list_numbers: true
  subnav:
    - title: Overview
      href: '#framework.tutorial.overview'
      subnav:
        - title: Installing the Development Tools
          href: '#framework.tutorial.overview.tools'
    - title: Creating a project using an archetype
      href: '#framework.tutorial.archetype'
    - title: Adding a demo "backend"
      href: '#framework.tutorial.backend'
    - title: Listing entities in a Grid
      href: '#framework.tutorial.grid'
    - title: Creating live filtering for entities
      href: '#framework.tutorial.filtering'
    - title: Creating a form to edit Customer objects
      href: '#framework.tutorial.form'
      subnav:
        - title: Creating a form using Vaadin Designer
          href: '#framework.tutorial.form.designer'
          subnav:
            - title: Installing Vaadin Designer
              href: '#framework.tutorial.form.designer.install'
            - title: Creating the form design
              href: '#framework.tutorial.form.designer.create'
        - title: Creating a form using plain Java
          href: '#framework.tutorial.form.java'
    - title: Connecting the form to the application
      href: '#framework.tutorial.form-connection'
    - title: It works! What next?
      href: '#framework.tutorial.next'
  ---
  :sectnums:
  
  [[framework.tutorial]]
  = Vaadin Tutorial
  
  This tutorial gives you an overview of how you can use https://vaadin.com/framework[Vaadin Framework] to build single-page web UIs for your Java application.
  All you need to start with it is JDK 8 and an https://en.wikipedia.org/wiki/Integrated_development_environment[IDE], such as Eclipse.
  While this tutorial is written for Eclipse users, you can use your IDE of choice.
  No extensive knowledge of Java is needed, only basic programming skills are required.
  
  [[framework.tutorial.overview]]
  == Overview
  
  In this tutorial, we build a simple customer management system.
  It is not a real application; we use an in-memory "back-end", so that you can understand how to hook it to an existing Java based back-end.
  We cover the basic Vaadin development and you can use the result as a basis for more experiments with Vaadin, such as using add-ons, your own custom look-and- feel (aka. theme), adding new views, or optimizing the result for mobile support.
  
  [[figure.framework.tutorial.final-ui]]
  .UI to be built in the tutorial
  image::img/finalUI.jpg[]
  
  You need about 20 to 60 minutes to complete the tutorial, depending on your existing experience.
  Naturally, you can just do the beginning of the exercise or pick any of the steps you want.
  To start from a specific step, we have prepared the example code after each step to be downloaded as a zip file.
  If do not want to do the exercise at all, you can also just https://github.com/vaadin/tutorial/[download the final application] and play around with it.
  
  [[framework.tutorial.overview.tools]]
  === Installing the Development Tools
  
  The tutorial uses Java 8, so please ensure that you have an up-to-date JDK 8 installed.
  