Skip to content

Commit

Permalink
More edits of both documents touched.
Browse files Browse the repository at this point in the history
  • Loading branch information
@russelljtdyer
russelljtdyer committed Dec 2, 2024
1 parent 4f63717 commit 82e1824
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 23 deletions.
23 changes: 12 additions & 11 deletions articles/tools/start/index.adoc
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
---
title: Start
order: 20
description: Description of possibilities with Vaadin Start.
---


= Vaadin Start

The Vaadin Start online interface allows you to manage, configure and download the core of a 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.
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]

Expand All @@ -25,10 +26,10 @@ image::_images/my-projects.png[height=75%, width=75%, List of Projects]

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:
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 Add View and Master-Detail Template Selected]
image::_images/master-detail-template.png[Vaadin Start UI with Master-Detail Template Selected]

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 this in the screenshot here:

Expand All @@ -38,12 +39,12 @@ image::_images/edit-entity.png[Edit Entities, width=100%]

== Login & Access Control

You can also configure security and control access. A login view is added for you if you configure one or more views that require a logged-in user.
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 View Details, width=60%]
image::_images/security-setup.png[Vaadin Start UI with View Access Controls, width=60%]


== Customize Theme
Expand All @@ -53,14 +54,14 @@ Vaadin Start lets you easily change the look and feel of the application. Specif
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 with Theme Sidebar and Color Palettes, width=40%]
image::_images/customize-theming.png[Vaadin Start UI with Theme Color Palettes, width=40%]


== Technical Configuration

You can 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.
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 the project settings shown:
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 Download Project Dialog]
Expand All @@ -70,7 +71,7 @@ image::_images/download-dialog.png[Vaadin Start UI with Download Project Dialog]

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 Hello World starters:
This screenshot shows the configuration options for the Hello World starter:

.Hello World Starters
image::_images/hello-world-starters.png[Hello World Starters, width=60%]
.Hello World Starter
image::_images/hello-world-starters.png[Hello World Starter, width=60%]
24 changes: 12 additions & 12 deletions articles/tools/start/view-builder/index.adoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: Visual View Builder enables you to create new views with custom lay

= Visual View Builder

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 preview with others.
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.

Expand All @@ -15,47 +15,47 @@ Visual View Builder generates the required code declarations, configurations, an
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 project with Custom View
== Creating a Project with Custom View

Go to `https://start.vaadin.com` and start new project. After opening project, click [guibutton]*+ Add View*, choose [guilabel]*Layout with Content Areas* from the list and confirm. This opens View Builder.
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.

image::images/view-builder-start.png[Adding new View Builder view to Vaadin Start project.]
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]


=== 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 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. You can use options on the popup toolbar to modify size and spacing of both layout and it's items.

image::images/view-builder-layouts.png[Working with layouts]
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 trash icon in the toolbar or by pressing kbd:[Del].
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].


== Sharing

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 Preview* to do so.
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.

image::images/view-builder-share.png[height=50%, width=50%, Share Project Preview]

You can find publish to GitHub feature in [guibutton]*Download Project* dialog.
You can find the GitHub publish feature in the [guibutton]*Download Project* dialog.

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 Project* in the top 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`

0 comments on commit 82e1824

Please sign in to comment.