Update quick start with Aura screenshots and improvements from the DX test

Author: peholmst

articles/getting-started/quick-start/images/fifth-view.png

@@ -60,28 +60,17 @@ public class MainView extends VerticalLayout { // <3>
 
 == Run the Application
 
-You can run the application <<../dev-environment/run#,directly from your IDE>> or from the command line. To run it from the command line, open a terminal in the project directory and run the following command:
+To get the best development experience, run your application from your IDE with *hotswap* enabled. Hotswap automatically applies your code changes to the running application without restarting it, which saves a lot of time during this tutorial.
 
-[.example]
---
-.Terminal
-[source,terminal,subs="+attributes"]
-----
-<source-info group="macOS / Linux"></source-info>
-./mvnw
-----
+To enable hotswap, install the *Vaadin plugin* for your IDE and use it to start the application. You can find IDE-specific instructions here:
 
-.PowerShell
-[source,terminal,subs="+attributes"]
-----
-<source-info group="Windows"></source-info>
-mvnw
-----
---
+* <<../dev-environment/run/intellij#,IntelliJ IDEA>>
+* <<../dev-environment/run/vscode#,Visual Studio Code>>
+* <<../dev-environment/run/eclipse#,Eclipse IDE>>
+* <<../dev-environment/run/netbeans#,NetBeans>>
 
-.Command Line Limitations
-[TIP]
-When you run the project from the command line, you have to restart the application every time you make a change to the code. If you run the application <<../dev-environment/run#,from your IDE>> you can use *hot swapping*, which automatically applies changes to your running application without restarting.
+[IMPORTANT]
+Even if you are already familiar with your IDE, follow the instructions above. Running the application with hotswap requires the *Vaadin plugin*, which you may not have installed yet.
 
 The first startup may take a while as Maven and npm download the required dependencies.
 
@@ -96,7 +85,7 @@ It should look like this:
 [.device]
 image::images/first-view.png[The first Vaadin view displaying a greeting message]
 
-The [guilabel]*}>* button in the bottom-right corner is the *Copilot menu*, which is visible when running in development mode. You'll learn more about it later.
+The toolbar in the bottom-right corner is the *Copilot toolbar*, which is visible when running in development mode. See the <</tools/copilot#,Copilot documentation>> for details.
 
 
 == Add Functionality
@@ -113,7 +102,7 @@ import com.vaadin.flow.component.button.Button;
 // end::snippet[]
 import com.vaadin.flow.component.html.H1;
 // tag::snippet[]
-import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.html.Paragraph;
 // end::snippet[]
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.PageTitle;
@@ -125,21 +114,21 @@ public class MainView extends VerticalLayout {
     public MainView() {
         add(new H1("Hello, Vaadin!"));
 // tag::snippet[]
-        add(new Button("Say Hello", event -> add(new Span("Hello, Vaadin!")))); // <1>
+        add(new Button("Say Hello", event -> add(new Paragraph("Hello, Vaadin!")))); // <1>
 // end::snippet[]
     }
 }
 ----
-<1> This line creates a new Button with the label "Say Hello". When clicked, it triggers a lambda function that adds a new `Span` with the message "Hello, Vaadin!" to the view. A span corresponds to the HTML `<span>` element, which is an inline container for text.
+<1> This line creates a new Button with the label "Say Hello". When clicked, it triggers a lambda function that adds a new `Paragraph` with the message "Hello, Vaadin!" to the view.
 
 This programming model is typical for Vaadin applications. You construct the UI from components, and define behavior using event listeners. If you have used Swing or JavaFX before, this should feel familiar.
 
-If you started the application from your IDE with <<../dev-environment/run#,hotswap (automatic code reload) enabled>>, the changes should be reflected automatically. If not, restart the application and refresh the browser. Click the button to see what happens:
+If you set up hotswap as instructed earlier, the changes are applied automatically. Just switch to the browser and click the button to see what happens:
 
 [.device]
 image::images/second-view.png[The updated Vaadin view with a button and a text span]
 
-The text is added to the end of the view, below the button. If you click multiple times, new texts are added each time.
+The paragraph is added to the end of the view, below the button. If you click multiple times, new paragraphs are added each time.
 
 
 == Add Input
@@ -153,7 +142,7 @@ package com.example;
 
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.html.H1;
-import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.html.Paragraph;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 // tag::snippet[]
 import com.vaadin.flow.component.textfield.TextField;
@@ -172,14 +161,14 @@ public class MainView extends VerticalLayout {
 // end::snippet[]
         add(new Button("Say Hello", event ->
 // tag::snippet[]
-            add(new Span("Hello, %s!".formatted(nameField.getValue()))) // <2>
+            add(new Paragraph("Hello, %s!".formatted(nameField.getValue()))) // <2>
 // end::snippet[]
         ));
     }
 }
 ----
 <1> Creates a `TextField` component with a label prompting the user for their name.
-<2> Adds a new `Span` with a personalized greeting message to the view.
+<2> Adds a new `Paragraph` with a personalized greeting message to the view.
 
 Now the browser view should look like this:
 
@@ -195,7 +184,7 @@ Vaadin takes care of input sanitization and escaping to prevent security vulnera
 
 == Update a Component
 
-The problem with the current implementation is that each time you click the button, a new text is added. Instead, you want to add a single `Span` and update its content on every click. Modify the `MainView` class as follows:
+The problem with the current implementation is that each time you click the button, a new paragraph is added. Instead, you want to add a single `Paragraph` and update its content on every click. Modify the `MainView` class as follows:
 
 .MainView.java
 [source,java]
@@ -204,7 +193,7 @@ package com.example;
 
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.html.H1;
-import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.html.Paragraph;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.textfield.TextField;
 import com.vaadin.flow.router.PageTitle;
@@ -218,7 +207,7 @@ public class MainView extends VerticalLayout {
         var nameField = new TextField("What is your name?");
         add(nameField);
 // tag::snippet[]
-        var greeting = new Span(); // <1>
+        var greeting = new Paragraph(); // <1>
         add(greeting);
 // end::snippet[]
         add(new Button("Say Hello", event ->
@@ -229,15 +218,15 @@ public class MainView extends VerticalLayout {
     }
 }
 ----
-<1> Creates a `Span` component to hold the greeting message and adds it to the view above the button.
-<2> Updates the text of the existing `Span` instead of adding a new one.
+<1> Creates a `Paragraph` component to hold the greeting message and adds it to the view above the button.
+<2> Updates the text of the existing `Paragraph` instead of adding a new one.
 
 If you now try the application again, you'll see that there is some extra space between the text field and the button:
 
 [.device]
 image::images/fourth-view.png[The Vaadin view with a button to generate a QR code]
 
-This is because the `Span` component is initially empty but still occupies space in the layout. You can fix that by hiding the `Span` when it has no content. Update the code as follows:
+This is because the `Paragraph` component is initially empty but still occupies space in the layout. You can fix that by hiding the `Paragraph` when it has no content. Update the code as follows:
 
 .MainView.java
 [source,java]
@@ -246,7 +235,7 @@ package com.example;
 
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.html.H1;
-import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.html.Paragraph;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.textfield.TextField;
 import com.vaadin.flow.router.PageTitle;
@@ -259,7 +248,7 @@ public class MainView extends VerticalLayout {
         add(new H1("Hello, Vaadin!"));
         var nameField = new TextField("What is your name?");
         add(nameField);
-        var greeting = new Span();
+        var greeting = new Paragraph();
 // tag::snippet[]
         greeting.setVisible(false); // <1>
 // end::snippet[]
@@ -273,8 +262,8 @@ public class MainView extends VerticalLayout {
     }
 }
 ----
-<1> Hides the `Span` component initially since it has no content.
-<2> Sets the visibility of the `Span` based on whether the `TextField` is empty or not.
+<1> Hides the `Paragraph` component initially since it has no content.
+<2> Sets the visibility of the `Paragraph` based on whether the `TextField` is empty or not. By default, a text field is empty if its value is an empty string.
 
 If you now enter your name and click the button, you'll see that the greeting message updates in place each time you click the button. If you clear the text field and click the button, the greeting message disappears and no extra space is occupied.
 
@@ -312,7 +301,7 @@ import com.vaadin.flow.component.html.H1;
 // tag::snippet[]
 import com.vaadin.flow.component.html.Image;
 // end::snippet[]
-import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.html.Paragraph;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.textfield.TextField;
 import com.vaadin.flow.router.PageTitle;
@@ -329,7 +318,7 @@ public class MainView extends VerticalLayout {
         add(new H1("Hello, Vaadin!"));
         var nameField = new TextField("What is your name?");
         add(nameField);
-        var greeting = new Span();
+        var greeting = new Paragraph();
         greeting.setVisible(false);
         add(greeting);
         add(new Button("Say Hello", event -> {
@@ -338,9 +327,15 @@ public class MainView extends VerticalLayout {
         }));
 // tag::snippet[]
         var qrImage = new Image();
-        add(new Button("Generate QR Code", event ->
-            qrImage.setSrc(generateQrCode(nameField.getValue())) // <1>
-        ));
+        add(new Button("Generate QR Code", event -> {
+            if (nameField.isEmpty()) {
+                nameField.setErrorMessage("Enter a name"); // <1>
+                nameField.setInvalid(true);
+            } else {
+                nameField.setInvalid(false);
+                qrImage.setSrc(generateQrCode(nameField.getValue())); // <2>
+            }
+        }));
         add(qrImage);
 // end::snippet[]
     }
@@ -352,7 +347,7 @@ public class MainView extends VerticalLayout {
                 var qrWriter = new QRCodeWriter();
                 var bitMatrix = qrWriter.encode(text, BarcodeFormat.QR_CODE, 300, 300);
                 downloadEvent.setContentType("image/png");
-                MatrixToImageWriter.writeToStream(bitMatrix, "PNG", out); // <2>
+                MatrixToImageWriter.writeToStream(bitMatrix, "PNG", out); // <3>
             } catch (WriterException e) {
                 throw new IOException(e);
             }
@@ -361,39 +356,32 @@ public class MainView extends VerticalLayout {
 // end::snippet[]
 }
 ----
-<1> The image source can be either a URL or a `DownloadHandler`. Vaadin serves server-generated content using the `DownloadHandler` interface.
-<2> The QR code is generated and written to the output stream as a PNG image.
+<1> Sets an error message on the text field and marks it as invalid, which displays the error to the user.
+<2> The image source can be either a URL or a `DownloadHandler`. Vaadin serves server-generated content using the `DownloadHandler` interface.
+<3> The QR code is generated and written to the output stream as a PNG image.
 
-Because you have added new dependencies to the project, you have to restart the application for the changes to take effect. After restarting, enter a name and click the [guibutton]*Generate QR Code* button. A QR code representing the entered name will be displayed below the button:
+Because you have added new dependencies to the project, you have to stop and restart the application from your IDE for the changes to take effect. After restarting, enter a name and click the [guibutton]*Generate QR Code* button. A QR code representing the entered name is displayed below the button:
 
 [.device]
 image::images/fifth-view.png[The Vaadin view with a button to generate a QR code]
 
+If you click the button with an empty text field, an error message is shown instead.
+
 Having access to the entire Java ecosystem allows you to leverage existing libraries and tools in your Vaadin applications, making development faster and easier.
 
 
 == Make a Production Build
 
 Up to this point, you have been running the application in development mode, which is optimized for fast feedback during development. Before deploying your application to production, you should create a production build that is optimized for performance.
 
-Execute the Maven `package` goal to create a production build. You can do it from the command line like this:
+Execute the Maven `package` goal to create a production build. Stop the application in your IDE, then run the following command from the project directory:
 
-[.example]
---
-.Terminal
-[source,bash,subs="+attributes"]
+[source,terminal]
 ----
-<source-info group="macOS / Linux"></source-info>
-./mvnw clean package
+mvn clean package
 ----
 
-.PowerShell
-[source,powershell,subs="+attributes"]
-----
-<source-info group="Windows"></source-info>
-mvnw clean package
-----
---
+TIP: If you don't have Maven installed, you can use the Maven Wrapper included in the project instead: `./mvnw clean package`.
 
 After the build completes, check the `target` directory in your project. You should find a JAR file named `app-1.0-SNAPSHOT.jar` (assuming your project is named `app`).
 You can run the production build using the following command:
@@ -404,7 +392,7 @@ You can run the production build using the following command:
 java -jar target/app-1.0-SNAPSHOT.jar
 ----
 
-Open your browser and navigate to http://localhost:8080 to see your application running in production mode. You'll notice that the [guilabel]*}>*  button is no longer visible.
+Open your browser and navigate to http://localhost:8080 to see your application running in production mode. You'll notice that the Copilot toolbar is no longer visible.
 
 
 == Next Steps