Vaadin One Minute Tip: Getting started with Vaadin

Vaadin 6 / 7 / 8
1

Hi! I wanted to show how easily you can create a Vaadin application and run it, so I did a screen capture of me doing it, which takes less than one minute. Without further ado, here’s the video.


Vaadin One Minute Tip, Part 1: Create a Vaadin project and run it.

All you need preinstalled in Java and Maven to be able follow it. It uses the maven command line archetype tool to create the project, and it is run through maven with the support of Jetty.

Steps:

  2. ’
    $ mvn archetype:generate
    ’ to start process of creating a new project
  3. ’
    vaadin
    ’ to search for Vaadin related archetypes
  4. Select ’
    vaadin-archetype-application
    ’ from the list by typing in the corresponding number. The number might change as they are ordered alphabetically, but as long as I can remember, the number has been ‘5’.
  5. You are presented with a list of Vaadin versions, just press enter to select the latest one.
  6. Type in a preferred package and project name. For other fields I just press enter to get the defaults.
  7. confirm that everything is okay by typing ’
    y
    '.
  8. ’
    $ cd hello-vaadin
    ’ to go into project folder
  9. ’
    $ mvn jetty:run
    ’ to start an embedded Jetty instance.
  10. Point your browser at http://localhost:8080 to see and use your application

That’s it!

I have two additional videos lined up, which will show you how to import these to and IDE, modify them and run them within the IDE, Eclipse and IntelliJ IDEA respectively.

2

Part 2 is now live. Take the Vaadin project you created in part 1, or any other maven based project, and bring it over to Eclipse. Import it, change some code and start Jetty, all from within Eclipse.


Vaadin One Minute Tip, Part 2: Import, edit and run your Vaadin project in Eclipse.

Steps:

  2. Right click the Project Explorer panel
  3. Import → Import from menu
  4. Maven → Existing Maven Project
  5. Point at the root folder of your Maven project
  6. Finish the wizard
  7. Open up the MyUI java file
  8. Make an edit to the application
  9. Right click project in project explorer
  10. Run As → Maven build…
  11. In the goal field, type ‘jetty:run’
  12. Click Run
  13. Go to http://localhost:8080 with your browser and notice that your change to the application is live

Next video will do the same thing but with IntelliJ IDEA.

3

Part 3 is the same as Part 2, but instead of Eclipse, we use IntelliJ IDEA. Take the Vaadin project you created in part 1, or any other maven based project, and bring it over to IntelliJ IDEA. Import it, change some code and start Jetty from within IDEA.


Vaadin One Minute Tip, Part 3: Import, edit and run your Vaadin project in IntelliJ IDEA.

Steps:

  2. Import Project
  3. Point at the root folder of your Maven project
  4. Import project from external model → Maven
  5. Blast through the rest of the wizard as fast as you can and press fininsh.
  6. Open up the MyUI java file
  7. Make an edit to the application
  8. Click on Maven Projects menu at the right
  9. Double-click on hello-vaadin → Plugins → jetty → jetty:run
  10. In the goal field, type ‘jetty:run’
  11. Go to http://localhost:8080 with your browser and notice that your change to the application is live

If you have some added ideas for this video series, or any other feedback, I would love to hear them!

4

Very nice!