docs: Start update (#3953)

Co-authored-by: Russell J.T. Dyer <[email protected]>
Co-authored-by: Jouni Koivuviita <[email protected]>

articles/tools/start/index.adoc

@@ -1,62 +1,78 @@
 ---
 title: Start
 order: 20
+description: Description of possibilities with Vaadin Start.
 ---
 
 
 = Vaadin Start
 
-image::_images/example-project.png[An example project built with the Vaadin Start online interface]
+The Vaadin Start online interface allows you to manage, configure and download the core of functional Vaadin projects. You can use them as a starting point to create your own Vaadin applications. Even more so, they allow you to do several fundamental things, easily.
+
+image::_images/example-project.png[Project Built with Vaadin Start Online Interface]
 
 https://start.vaadin.com?preset=latest[Open Vaadin Start, role="button primary water"]
 
-The Vaadin Start online interface allows you to configure and download the core of a functional Vaadin project. At a minimum, you can then use that project as a starting point to create your own Vaadin application. Even more so, it allows you easily to do several fundamental things.
+
+== Manage Projects
+
+With Vaadin Start, you can work on multiple projects. You can find a list of your projects in the `My Projects` section. You can download your project from there, directly.
+
+.Projects List
+image::_images/my-projects.png[height=75%, width=75%, List of Projects]
 
 
 == Add Views
 
-First, Vaadin Start allows you to add several views to an application. You can select the initial content of each view from a list of more than fifteen templates. For example, you can include views based on the Master-Detail template, which can be used to manage an entity's data.
+Vaadin Start allows you to add several views to your project. You can select the initial content of each view from a list of more than fifteen Flow and Hilla templates. For example, you can include views based on the Master-Detail template, which can be used to manage an entity's data.
+
+The screenshot here shows the Vaadin Start UI with the Add View dialog open, showing the Master-Detail template selected:
 
 .Master-Detail Template
-image::_images/master-detail-template.png[Vaadin Start UI, with the Add View dialog open, showing the Master-Detail template selected]
+image::_images/master-detail-template.png[Vaadin Start UI with Master-Detail Template Selected]
 
-////
-// TODO not available in Start at the moment
-Next, you can add and modify JPA entities. These entities are downloaded with the generated project, along with their corresponding Spring Data classes, such as the [classname]`Repository` and [classname]`Service`.
+You can then add and modify JPA entities. These entities are downloaded with the generated project, along with their corresponding Spring Data classes, such as the [classname]`Repository` and [classname]`Service`. You can see the relevant parts highlighted in the screenshots here:
 
+.Edit Data Entity
+[.fill.white]
 image::_images/edit-entity.png[Edit Entities, width=100%]
-////
 
 
 == Login & Access Control
 
-You can also set up security and configure access control. A login view is added automatically for you if you configure one or more views to require a logged-in user.
-// TODO not possible at the moment
-// This can be configured for a specific view, or for the entire application.
+You can also configure security and control access. A login view is added if you configure one or more views that require a logged-in user.
+
+In this screenshot, you can see the Vaadin Start UI with the view details popover open, showing the options for the View Access control:
 
 .View Access Control Setup
-image::_images/security-setup.png[Vaadin Start UI, with the view details popover open, showing the options for the View Access control, width=50%]
+image::_images/security-setup.png[Vaadin Start UI with View Access Controls, width=60%]
 
 
 == Customize Theme
 
 Vaadin Start lets you easily change the look and feel of the application. Specifically, you can adjust the application's colors, typography, style, sizing, and spacing.
 
+This next screenshot shows the Vaadin Start UI with the Theme sidebar active, showing the color palette options:
+
 .Theme Customization
-image::_images/customize-theming.png[Vaadin Start UI, the Theme sidebar active, showing the color palette options, width=50%]
+image::_images/customize-theming.png[Vaadin Start UI with Theme Color Palettes, width=40%]
 
 
 == Technical Configuration
 
-Plus, you can add helpful project settings. For example, you can generate the deployment files for Docker and Kubernetes, or you can select between H2 and PostgreSQL as the database to use for the project.
+You can also add helpful project settings. For example, you can generate the deployment files for <</control-center#,Control Center>>, Docker, and Kubernetes. Or you can select between H2 and PostgreSQL as the database to use for the project.
+
+This screenshot shows the Vaadin Start UI with the Download Project dialog open, with all of the project settings shown:
 
 .Download Project Dialog
-image::_images/download-dialog.png[Vaadin Start UI with the Download Project dialog open, with all the project settings shown]
+image::_images/download-dialog.png[Vaadin Start UI with Download Project Dialog]
 
 
 == Hello World Projects
 
-If you want a simplified project template to start with, without adding and configuring any views, you can configure and download a “Hello World” starter from the landing page of Vaadin Start.
+To start with a simplified project template -- without adding and configuring any views -- you can configure and download a "Hello World" starter from the landing page of Vaadin Start.
+
+This screenshot shows the configuration options for the Hello World starter:
 
-.Hello World Starters
-image::_images/hello-world-starters.png[The configuration options for Hello World starters, width=50%]
+.Hello World Starter
+image::_images/hello-world-starters.png[Hello World Starter, width=60%]

articles/tools/start/view-builder/index.adoc

@@ -4,71 +4,58 @@ description: Visual View Builder enables you to create new views with custom lay
 ---
 
 
-= [since:com.vaadin:[email protected]]#Visual View Builder#
+= Visual View Builder
 
-.Partially Outdated
-[WARNING]
-This page is partially outdated and doesn't reflect the current state of editable views in Vaadin Start.
-
-Visual View Builder is a tool in the Vaadin Start application generator. It allows you to assemble custom views by dragging and dropping items into place. When you're done, you can download and run the application locally or share it with others so they can customize it further.
+Visual View Builder is a tool in the Vaadin Start application generator. It allows you to assemble custom views by dragging and dropping items into place. When you're done, you can download and run the application locally, or share a preview with others.
 
 Visual View Builder generates the required code declarations, configurations, and sample data for your application.
 
-video::-mw9zM4dW9Y[youtube]
-
 .Theming & Other Features
 [TIP]
 Visual View Builder is part of Vaadin Start. You can customize the application theme, settings (e.g., Java version), and more before downloading or sharing the application.
 
 
-== Creating a Custom View
-
-Go to `https://start.vaadin.com` and log in to get started. Select the [guilabel]*VIEWS* tab, click [guibutton]*+ Add View*, and choose [guilabel]*Visual View Builder* from the drop-down menu. This opens View Builder.
-
-image::images/view-builder-start.png[View Builder in Vaadin Start.]
+== Creating a Project with Custom View
 
+Go to `https://start.vaadin.com` and start new project. After opening a project, click [guibutton]*+ Add View*. Then choose [guilabel]*Layout with Content Areas* from the list and confirm. This opens View Builder.
 
-=== Choosing a Template
-
-Choose one of the four layout templates and add an optional header or footer -- or both. You can see how this looks in the previous screenshot. After selecting a template, click [guibutton]*Start building* to proceed to content and actions.
-
-You can edit the layout later, such as adding a margin, by clicking it once it's in the view.
+image::images/view-builder-start.png[Add New View Builder View to a Vaadin Start Project]
 
 
 === Building a View
 
-Drag items from the menu in the toolbar to the view (see the margin in the screenshot here). You can place content and add containers with some pre-made components.
+Drag items from the menu in the toolbar to the view (see screenshot). You can place content and add containers with some pre-made components.
 
 image::images/view-with-components.png[Custom View with Components]
 
 
-=== Creating a Layout
+=== Working with Layouts
+
+If you want to place items in a row, for example, you can do so by dragging a `Horizontal Layout` component from the toolbar on the side and then add items to it. You can use options on the popup toolbar to modify size and spacing of both layout and it's items.
 
-If you want to place items in a row, for example, you can do so by dragging a `Horizontal Layout` component from the toolbar on the side and then add items to it. Click on the items to expand them so as to fill the space in the layout.
+image::images/view-builder-layouts.png[Working with Layouts]
 
-Do the same instead with a `Vertical Layout` if you want the items arranged from top-to-bottom.
+Alternatively, you can do the same with a `Vertical Layout` if you want the items arranged from top-to-bottom.
 
 
 ==== Deleting Items
 
-If you're unhappy with an item or its placement, you can delete it by clicking the item in the view and selecting the trash can icon, as shown in the screenshot here:
+If you're unhappy with an item or its placement, you can delete it by clicking the trash icon in the toolbar -- or by pressing kbd:[Del].
 
-image::images/view-builder-delete-button.png[Location of Delete Button: Circled in Red]
 
+== Sharing
 
-== Publishing & Sharing
+Once you're ready, you can share the project with others either by copying its link and giving it to them, or by creating a GitHub repository for it. Click [guilabel]*Share Preview* to do so.
 
-Once you're ready, you can share the project with others either by copying the link to it and giving it to them, or by creating a GitHub repository for it. Click [guilabel]*Share...* to do so. You can see these options in the screenshot here:
+image::images/view-builder-share.png[height=50%, width=50%, Share Project Preview]
 
-image::images/view-builder-share.png[height=50%, width=50%, Options to share by link or publish to Github.]
+You can find the GitHub publish feature in the [guibutton]*Download Project* dialog.
 
-.Sharing in Preview
-[NOTE]
-Sharing views is a preview feature. Give it a try. If you encounter a bug, though, file an issue by clicking the [guibutton]*Submit feedback* button in the bottom right-hand corner of the screen.
+image::images/view-builder-publish-gh.png[height=50%, width=50%, Publish to GitHub]
 
 
 == Downloading the Project
 
-When you're done with Visual View Builder and ready to generate the application, click [guibutton]*Download* in the bottom right-hand corner of the screen. Incidentally, you can add as many views as you want before downloading the project.
+When you're done with Visual View Builder and you're ready to generate the application, click [guibutton]*Download Project* in the top right-hand corner of the screen. Incidentally, you can add as many views as you want before downloading the project.
 
 [discussion-id]`b9ce6c1a-050b-11ee-be56-0242ac120002`