Vaadin

Loading notifications …
 

Getting started

with Vaadin Designer

Release notes

Vaadin Designer supports Eclipse and IntelliJ IDEA. The main steps to get started with Vaadin Designer are the same for both IDEs:

  1. Install the IDE
  2. Create a Vaadin Project
  3. Install Vaadin Designer
  4. Create a UI design using Vaadin Designer

You can skip the first two steps if you already have a Vaadin Project configured in your IDE.

Get started with Vaadin Designer for Vaadin Framework 8

  1. Install IntelliJ IDEA from https://www.jetbrains.com/idea
  2. Create a Vaadin 8 project 
    1. Create a Maven project using vaadin-archetype-application
    2. Note: you should get a notification "Maven projects need to be imported"
      1. Click Enable auto-import 
  3. Install Vaadin Designer 2.x
    1. Choose Preferences → Plugins
    2. Browse Repositories
    3. Search for "Vaadin Designer 2"
    4. Select Vaadin Designer and click Install
    5. Restart IntelliJ when prompted
  4. Create a design with Vaadin Designer
    1. Select an appropriate package, e.g com.mydomain.myapplication in src/main/java
    2. File → New → Vaadin 8 Design
    3. Give the design a Name, click Ok
    4. Vaadin Designer opens
    5. If this is the first time you're using Vaadin Designer, you will be prompted for a license key
    6. You can now drag and drop layouts and components to your design
    7. Give one component a name in the properties panel
    8. Open the corresponding designname.java file and verify your component is present

Get started with Vaadin Designer for Vaadin Framework 7

  1. Install IntelliJ IDEA from https://www.jetbrains.com/idea
  2. Create a Vaadin 7 project 
    1. Create a Maven project using vaadin-archetype-application
    2. Note: you should get a notification "Maven projects need to be imported"
      1. Click Enable auto-import 
  3. Install Vaadin Designer
    1. Choose Preferences → Plugins
    2. Browse Repositories
    3. Search for "Vaadin Designer"
    4. Select Vaadin Designer and click Install
    5. Restart IntelliJ when prompted
  4. Create a design with Vaadin Designer
    1. Select an appropriate package, e.g com.mydomain.myapplication in src/main/java
    2. File → New → Vaadin 7 Design
    3. Give the design a Name, click Ok
    4. Vaadin Designer opens
    5. If this is the first time you're using Vaadin Designer, you will be prompted for a license key
    6. You can now drag and drop layouts and components to your design
    7. Give one component a name in the properties panel
    8. Open the corresponding designname.java file and verify your component is present

Get started with Vaadin Designer 2.x for Vaadin Framework 8

  1. Install Eclipse from www.eclipse.org
  2. Create a Vaadin 8 Project
    1. Create a Maven project using vaadin-archetype-application
  3. Install Vaadin Designer 2.x
    1. Add the update-site
      1. Choose Help → Install New Software
      2. Click Add...
      3. Name: Vaadin Designer, Location: http://vaadin.com/eclipse
    2. Select Vaadin Designer 2, click Next twice
    3. Review the license agreement, accept, and click Finish
  4. Create a design with Vaadin Designer
    1. Select an appropriate package, e.g com.mydomain.myapplication in src/main/java
    2. File → New → Vaadin 8 Design
    3. Name your design, click ok
    4. Vaadin Designer opens
    5. If this is the first time you're using Vaadin Designer, you will be prompted for a license key
      1. If you have a Pro Tools subscription, use your subscription key
      2. You can get a FREE trial license
    6. You can now add layouts and components to your design
    7. Give one component a "name" in the properties panel
    8. Open the corresponding designname.java file and verify your components is present

Get started with Vaadin Designer 1.x for Vaadin Framework 7

  1. Install Eclipse from www.eclipse.org
  2. Create a Vaadin 7 Project
    1. Install the latest Vaadin plug-in
    2. Create a Maven project using vaadin-archetype-application
  3. Install Vaadin Designer 1.x
    1. Add the update-site
      1. Choose Help → Install New Software
      2. Click Add...
      3. Name: Vaadin Designer, Location: http://vaadin.com/eclipse
    2. Select Vaadin Designer, click Next twice
    3. Review the license agreement, accept, and click Finish
  4. Create a design with Vaadin Designer
    1. Select an appropriate package, e.g com.mydomain.myapplication in src/main/java
    2. File → New → Vaadin 7 Design
    3. Name your design, click ok
    4. Vaadin Designer opens
    5. If this is the first time you're using Vaadin Designer, you will be prompted for a license key
      1. If you have a Pro Tools subscription, use your subscription key
      2. You can get a FREE trial license
    6. You can now add layouts and components to your design
    7. Give one component a "name" in the properties panel
    8. Open the corresponding designname.java file and verify your components is present
 

Next steps

Once Vaadin Designer is up and running, here are some additional resources