Updated embedded videos (#9043)

* Updated to new videos for Vaadin 8

* Update tutorial.adoc

1 files changed, 14 insertions, 23 deletions

diff --git a/documentation/tutorial.adoc b/documentation/tutorial.adoc
index 7306a28356..ad41044bfc 100644
--- a/documentation/tutorial.adoc
+++ b/documentation/tutorial.adoc
@@ -39,8 +39,6 @@ subnav:
 [[framework.tutorial]]
 = Vaadin Tutorial
 
-WARNING: Please keep in mind that some of the videos and screenshots in this tutorial were built with Vaadin Framework 7 and Designer 1.0. There are some small differences if you use the latest versions.
-
 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.
@@ -63,7 +61,7 @@ image::img/finalUI.jpg[]
 
 If you 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.
 
-TIP: In addition to this written tutorial, we have recorded the steps as https://www.youtube.com/playlist?list=PLcRrh9hGNalkIgvImLRO9u3D0YpmEWuqo[a series of videos]. You can just watch all the videos or watch the video of each step before you do the same step yourself.
+TIP: In addition to this written tutorial, we have recorded the steps as https://www.youtube.com/playlist?list=PLcRrh9hGNalkZx921iMqZ-jXR0C72eIPR[a series of videos]. You can just watch all the videos or watch the video of each step before you do the same step yourself.
 
 [[framework.tutorial.overview.tools]]
 === Installing the Development Tools
@@ -79,9 +77,9 @@ Eclipse is available in various packages; be sure to download the *Eclipse IDE f
 [[framework.tutorial.archetype]]
 == Creating a Project from an Archetype
 
-You can get an overview of this step with the following video, which first shows how to install Eclipse, then how to create a Vaadin application using Maven, and finally how to run it:
+The following video shows how to do this step of the tutorial:
 
-video::o93ofXBIkf8[youtube, width="640", height="400"]
+video::sMGHSK_97NI[youtube, width="640", height="400"]
 
 As the starting point for the application, we use a Maven archetype called `vaadin-archetype-application`.
 Archetypes are project stubs that have some example code and a basic Maven build script.
@@ -238,10 +236,6 @@ history/Debug history > Run in Jetty".
 
 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.
 
-The following video shows how to implement a _Hello World_ application from scratch:
-
-video::9-qwPfpSHWc[youtube, width="640", height="400"]
-
 [[framework.tutorial.backend]]
 == Adding a demo "backend"
 
@@ -250,11 +244,9 @@ TIP: Starting from this step directly? https://github.com/vaadin/tutorial/archiv
 Before getting more into real Vaadin development, let us introduce some domain objects and a "fake backend".
 In a real-world application, you will most likely have something similar, implemented with, for example, JPA and EJB or a Spring-based service.
 
-The following video covers steps 3 and 4 (<<framework.tutorial.grid>>) of this tutorial:
-
-WARNING: This video is built with Vaadin Framework 7. There are some small differences if you use the latest version.
+The following video shows how to do this step of the tutorial:
 
-video::0W0frepDKWI[youtube, width="640", height="400"]
+video::qF31jkBFbR0[youtube, width="640", height="400"]
 
 Copy the following three classes from github to your project.
 Class names point to the classes hosted in Github.
@@ -283,6 +275,10 @@ thing you want to do is to list your data from your back-end.
 There are several components and ways in Vaadin to do this.
 In this example, we will use the Grid component for tabular presentation of our customers.
 
+The following video shows how to do this step of the tutorial:
+
+video::EBCm-Vf_fUs[youtube, width="640", height="400"]
+
 We start by introducing a [classname]#Grid# to the [classname]#MyUI# class.
 We could of course just introduce the Grid as a variable in the [methodname]#init()# method, but we most likely want to refer to it later.
 Also, let us get a reference to the [classname]#CustomerService#.
@@ -399,9 +395,7 @@ the Customer listing we created in the previous step.
 
 The following video shows how to do this step of the tutorial:
 
-WARNING: This video is built with Vaadin Framework 7. There are some small differences if you use the latest version.
-
-video::fAeC_mZH_7w[youtube, width="640", height="400"]
+video::kyMaJLUtz3g[youtube, width="640", height="400"]
 
 We'll start by introducing a [classname]#TextField# component as a field to our [classname]#UI# class:
 
@@ -632,10 +626,9 @@ constructor:
 save.setClickShortcut(KeyCode.ENTER);
 ----
 
-To finish our form, we need to create a public API that we will use in the next
-part from MyUI, to pass in a Customer object that the form should edit. We
-will also add some logic to actually save the changes. We'll start by adding a
-_Binder_ as a field to the _CustomerForm_ class:
+To finish our form, we need to create a public API that we will use in the next part from MyUI, to pass in a Customer object that the form should edit.
+We will also add some logic to actually save the changes.
+We'll start by adding a [classname]#Binder# as a field to the [classname]#CustomerForm# class:
 
 [source,java]
 ----
@@ -732,9 +725,7 @@ completed the step using Vaadin Designer, you can proceed to
 
 The following video shows how to create a form using plain Java:
 
-WARNING: This video is built with Vaadin Framework 7. There are some small differences if you use the latest version.
-
-video::OA6-lSxiXO0[youtube, width="640", height="400"]
+video::jOhkclbdwp0[youtube, width="640", height="400"]
 
 Start by creating a new Java class with the name CustomerForm. In Eclipse right
 click on the "my.vaadin.app" package and choose menu:New[Class]. Type in the