Simple Example Web Application for Vaadin Flow
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
gradle/wrapper
src v bump Nov 10, 2018
.gitignore
.travis.yml Travis: switch to openjdk8 Oct 18, 2018
Procfile
README.md
build.gradle.kts
gradlew
gradlew.bat

README.md

Powered By Vaadin on Kotlin Build Status Join the chat at https://gitter.im/vaadin/vaadin-on-kotlin Heroku

Beverage Buddy App Starter for Vaadin 10

☕️🍵🍶🍼🍺🍸🍹🍷

This is a Vaadin 10 Vaadin-on-Kotlin example application, used to demonstrate features of the Vaadin Flow Java framework. A full-stack app: uses the H2 database instead of a dummy service.

The Starter demonstrates the core Vaadin Flow concepts:

This version of Beverage Buddy demoes the possibility of developing a Vaadin 10 application logic purely server-side in the Kotlin language. There is no Polymer Template nor JavaScript code in this project. If you'd like to see a demo on how to create Polymer Templates, please head to the page of the original Beverage Buddy App (in Java).

Live Demo

You can find the Online Beverage Buddy Demo running on Heroku.

Prerequisites

The project can be imported into the IDE of your choice, with Java 8 installed, as a Gradle project.

To compile the entire project, run ./gradlew. All dependencies will be downloaded automatically by Gradle.

Running the Project

  1. Run using ./gradlew appRun
  2. Wait for the application to start
  3. Open http://localhost:8080/ to view the application

Gradle will download an embedded servlet container (Jetty) and will run your app in it. Your app will be running on http://localhost:8080.

Dissection of project files

Let's look at all files that this project is composed of, and what are the points where you'll add functionality:

Files Meaning
build.gradle Gradle build tool configuration files. Gradle is used to compile your app, download all dependency jars and build a war file
gradlew, gradlew.bat, gradle/ Gradle runtime files, so that you can build your app from command-line simply by running ./gradlew, without having to download and install Gradle distribution yourself.
.travis.yml Configuration file for Travis-CI which tells Travis how to build the app. Travis watches your repo; it automatically builds your app and runs all the tests after every commit.
Procfile Tells Heroku hosting service how to run your app in a cloud. See below on how to deploy your app on Heroku for free.
.gitignore Tells Git to ignore files that can be produced from your app's sources - be it files produced by Gradle, Intellij project files etc.
src/main/resources/ A bunch of static files not compiled by Kotlin in any way; see below for explanation.
logback.xml We're using Slf4j for logging and this is the configuration file for Slf4j
db/migration/ Database upgrade instructions for the Flyway framework. Database is upgraded on every server boot, to ensure it's always up-to-date. See the Migration Naming Guide for more details.
webapp/ contains static webapp resources, such as potential Polymer templates, components, the global app CSS file, etc. The CSS file references the Vaadin Lumo theme and configures it by the means of CSS variables. Polymer templates are not used in this project.
frontend/styles/shared-styles.html The CSS styles applied to your web app. Vaadin by default uses Vaadin Lumo Theme; you can tweak the Lumo theme by the means of setting CSS variables.
src/main/kotlin/ The main Kotlin sources of your web app. You'll be mostly editing files located in this folder.
Bootstrap.kt When Servlet Container (such as Tomcat) starts your app, it will run the Bootstrap.contextInitialized() function before any calls to your app are made. We need to bootstrap the Vaadin-on-Kotlin framework, in order to have support for the database; then we'll run Flyway migration scripts, to make sure that the database is up-to-date. After that's done, your app is ready to be serving client browsers.
MainLayout.kt The main view of the app, it defines how the UI looks like and how the components are nested into one another. The UI is defined by the means of so-called DSL; see Karibu-DSL examples for more examples.
CategoriesList.kt An example view which is constructed entirely server-side. Demonstrates the use of the Vaadin Grid component.
ReviewsList.kt An example view which demoes the possibility of the Grid to act as a scrolling vertical list component lazily-loading items as they scroll into view (akin to Android ListView). This is achieved by simply having one-column grid with a ComponentRenderer.
ConfirmationDialog.kt An example of a Yes-No dialog built entirely server-side.
AbstractEditorDialog.kt, CategoryEditorDialog.kt, ReviewEditorDialog.kt Forms editing particular database entities, implemented as a dialogs.
Toolbar.kt An example of a reusable component
backend/ Demonstrates the use of the VoK-ORM framework to represent database rows as objects
RestService.kt/ Demonstrates the possibility of having REST endpoints. See the class sources for details on how to access those endpoints.
DemoData.kt/ Pre-populates the database with some example data.
Category.kt/, Review.kt/ Two entities. Category simply lists a list of beverage categories such as 'Beer'. Review lists reviews made for a particular beverage; it references the beverage category as a foreign key into the Category table.

More Documentation

For Vaadin 10 documentation for Java users, see Vaadin.com/docs.

For Vaadin-on-Kotlin documentation, head to Vaadin-on-Kotlin.

Development with Intellij IDEA Ultimate

The easiest way (and the recommended way) to develop VoK-based web applications is to use Intellij IDEA Ultimate. It includes support for launching your project in any servlet container (Tomcat is recommended) and allows you to debug the code, modify the code and hot-redeploy the code into the running Tomcat instance, without having to restart Tomcat.

  1. First, download Tomcat and register it into your Intellij IDEA properly: https://www.jetbrains.com/help/idea/2017.1/defining-application-servers-in-intellij-idea.html
  2. Then just open this project in Intellij, simply by selecting File / Open... and click on the build.gradle file. When asked, select "Open as Project".
  3. You can then create a launch configuration which will launch the web module as exploded in Tomcat with Intellij: just scroll to the end of this tutorial: https://kotlinlang.org/docs/tutorials/httpservlets.html
  4. Start your newly created launch configuration in Debug mode. This way, you can modify the code and press Ctrl+F9 to hot-redeploy the code. This only redeploys java code though, to redeploy resources just press Ctrl+F10 and select "Update classes and resources"

Using Intellij IDEA Community

Intellij Community is free and can be used for the development as well. To launch your app in IDEA Community, just click the rightmost Gradle tool button, then navigate to beverage-buddy-vok / Tasks / gretty / appRun, right-click appRun and select the first option "Run beverage-buddy-vok".