Skip to content

Latest commit

 

History

History
95 lines (69 loc) · 3.2 KB

designer-getting-started.asciidoc

File metadata and controls

95 lines (69 loc) · 3.2 KB
Raw
title order layout
Getting Started
3
page

Getting Started

Vaadin Designer works projects using Vaadin 7.5 or later. In short, create a new project with "File > New > Vaadin 7 Project", and choose 7.5 or later as Vaadin version, as described in "Creating and Running a Project with Eclipse".

Creating a Design

With your project selected, select "File > New > Other" (or press CtrlN), choose Vaadin Design from the list, and click Next.

designer new design
Figure 1. Creating a New Vaadin Design

In the design parameters step, make sure the locations are correct (if you are using Maven they might point to different folders, otherwise probably not). You can put the design(s) in a specific package if you wish.

designer new parameters
Figure 2. New Design Parameters

Give your design a descriptive name. Using a naming convention to separate the design’s companion Java file from the classes using it will make things easier for you later.

For example, the name UserEditorDesign will result in UserEditorDesign.html and UserEditorDesign.java. You could then create a UserEditor component that extends the UserEditorDesign, and perhaps a UserEditorView to place the editor component in a bigger context.

In another case, you could make a LoginDesign that is used in a LoginWindow (but not extended).

Finally, you can choose a template as starting point, or start from scratch (Blank).

Choose Finish to create the design and open Vaadin Designer.

Vaadin Designer GUI Overview

Vaadin Designer is fully integrated with Eclipse and its views can therefore be freely moved and arranged as you wish. However, it is best to first try the Designer in its default setup by choosing Show perspective from the dialog that is presented when a new design is created.

To be able to successfully use the Designer, you will need the Outline, Palette and Properties views, in addition to the main editor. If you accidentally close a view, it can be opened from "Window > Show view".

designer view annotated lo
Figure 3. Panels in Vaadin Perspective

The elements of the perspective illustrated in Panels in Vaadin Perspective are as follows:

  1. Design files

  2. Editor (see below for close-up)

  3. Component palette

  4. Outline - component hierarchy

  5. Properties for the selected component

In the editor view, illustrated in Component Editor, you have a number of controls in the toolbar.

designer editor annotated lo
Figure 4. Component Editor

  1. Center viewport

  2. Viewport size and presets

  3. Rotate viewport (portrait / landscape)

  4. Configure canvas; rulers, grids, snapping

  5. Theme selector

  6. Design / Code / Quick preview -modes

  7. External preview