国外java源码社区-beverage-buddy-vok:VaadinFlow的简单示例Web应用程序

[](http://vaadinonkotlin.eu) [](https://gitter.im/vaadin/vaadin-on-kotlin?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [](https://beverage-buddy-vok.herokuapp.com/) # Beverage Buddy App Starter for Vaadin 14 :coffee::tea::sake::baby_bottle::beer::cocktail::tropical_drink::wine_glass: This is a Vaadin 14 [Vaadin-on-Kotlin](http://vaadinonkotlin.eu) 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: * [Building UIs in Kotlin](https://github.com/mvysny/karibu-dsl) with components such as `TextField`, `Button`, `ComboBox`, `DatePicker`, `VerticalLayout` and `Grid` (see `CategoriesList`) * [Creating forms with `Binder`](https://github.com/vaadin/free-starter-flow/blob/master/documentation/using-binder-in-review-editor-dialog.asciidoc) (`ReviewEditorDialog`) * Making reusable Components on server side with `KComposite` (`AbstractEditorDialog`) * [Creating Navigation with the Router API](https://github.com/vaadin/free-starter-flow/blob/master/documentation/using-annotation-based-router-api.asciidoc) (`MainLayout`, `ReviewsList`, `CategoriesList`) * [Browserless testing](https://github.com/mvysny/karibu-testing): see the [test suite package](src/test/kotlin/com/vaadin/starter/beveragebuddy/ui) for the complete test implementation. This version of Beverage Buddy demoes the possibility of developing a Vaadin 14 web application purely server-side in the Kotlin language. There is no 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](https://github.com/vaadin/beverage-starter-flow) (in Java). ## Live Demo You can find the [Online Beverage Buddy Demo](https://beverage-buddy-vok.herokuapp.com) running on Heroku. # Preparing Environment The Vaadin 14 build requires node.js and npm. Vaadin Gradle plugin will install those for you automatically (handy for the CI); alternatively you can install those to your OS: * Windows: [node.js Download site](https://nodejs.org/en/download/) - use the .msi 64-bit installer * Linux: `sudo apt install npm` Also make sure that you have Java 8 (or higher) JDK installed. ## Getting Started To quickly start the app, just type this into your terminal: ```bash git clone https://github.com/mvysny/beverage-buddy-vok cd beverage-buddy-vok ./gradlew appRun ``` Gradle will automatically download an embedded servlet container (Jetty) and will run your app in it. Your app will be running on [http://localhost:8080](http://localhost:8080). Since the build system is a Gradle file written in Kotlin, we suggest you use [Intellij IDEA](https://www.jetbrains.com/idea/download) to edit the project files. The Community edition is enough to run the server via Gretty's `./gradlew appRun`. The Ultimate edition will allow you to run the project in Tomcat - this is the recommended option for a real development. ## Supported Modes Runs in Vaadin 14 npm mode, using the [Vaadin Gradle Plugin](https://github.com/vaadin/vaadin-gradle-plugin). Both the [development and production modes](https://vaadin.com/docs/v14/flow/production/tutorial-production-mode-basic.html) are supported. To prepare for development mode, just run: ```bash ./gradlew clean vaadinPrepareFrontend ``` To build in production mode, just run: ```bash ./gradlew clean build -Pvaadin.productionMode ``` If you don't have node installed in your CI environment, Gradle Vaadin plugin will download node.js for you automatically: ```bash ./gradlew clean build -Pvaadin.productionMode ``` # Workflow To compile the entire project in production mode, run `./gradlew -Pvaadin.productionMode`. To run the application in development mode, run `./gradlew appRun` and open [http://localhost:8080/](http://localhost:8080/). To produce a deployable production-mode WAR: - run `./gradlew -Pvaadin.productionMode` - You will find the WAR file in `build/libs/*.war` - To revert your environment back to development mode, just run `./gradlew` or `./gradlew vaadinPrepareFrontend` (omit the `-Pvaadin.productionMode`) switch. This will allow you to quickly start the example app and allow you to do some basic modifications. ## 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.kts](build.gradle.kts) | [Gradle](https://gradle.org/) build tool configuration files. Gradle is used to compile your app, download all dependency jars and build a war file | [gradlew](gradlew), [gradlew.bat](gradlew.bat), [gradle/](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](.travis.yml) | Configuration file for [Travis-CI](http://travis-ci.org/) 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](Procfile) | Tells [Heroku](https://www.heroku.com/) hosting service how to run your app in a cloud. See below on how to deploy your app on Heroku for free. | [.gitignore](.gitignore) | Tells [Git](https://git-scm.com/) 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/](src/main/resources) | A bunch of static files not compiled by Kotlin in any way; see below for explanation. | [simplelogger.properties](src/main/resources/logback.xml) | We're using [Slf4j](https://www.slf4j.org/) for logging and this is the configuration file for Slf4j | [db/migration/](src/main/resources/db/migration) | Database upgrade instructions for the [Flyway](https://flywaydb.org/) framework. Database is upgraded on every server boot, to ensure it's always up-to-date. See the [Migration Naming Guide](https://flywaydb.org/documentation/migrations#naming) for more details. | [webapp/](src/main/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](src/main/webapp/frontend/styles/shared-styles.html) | The CSS styles applied to your web app. Vaadin by default uses [Vaadin Lumo Theme](https://vaadin.com/themes/lumo); you can tweak the Lumo theme by the means of setting CSS variables. | [src/main/kotlin/](src/main/kotlin) | The main Kotlin sources of your web app. You'll be mostly editing files located in this folder. | [Bootstrap.kt](src/main/kotlin/com/vaadin/starter/beveragebuddy/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](src/main/kotlin/com/vaadin/starter/beveragebuddy/ui/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](https://github.com/mvysny/karibu-dsl#how-to-write-dsls-for-vaadin-8-and-vaadin8-v7-compat) for more examples. | [Cat