anchor.diff:  [[framework.tutorial.form.designer]]
   === Creating a form using Vaadin Designer
   
  -TIP: Starting from this step directly? https://github.com/vaadin/tutorial/archive/step5.zip[Download the project] for this step, extract the zip file and choose menu:Import...[Maven>Existing Maven project].
  +TIP: Starting from this step directly? https://github.com/vaadin/tutorial/archive/v8-step5.zip[Download the project] for this step, extract the zip file and choose menu:Import...[Maven>Existing Maven project].
   
   The form to edit Customer objects can be built using several methods of which
   the visual composition by drag 'n' drop is the most intuitive. Vaadin
  
positive.code: [source,java]
  ----
  HorizontalLayout main = new HorizontalLayout(grid, form);
  main.setSpacing(true);
  main.setSizeFull();
  grid.setSizeFull();
  main.setExpandRatio(grid, 1);
  
negative.code: and make a short exercise to compose better components from lower level UI
  components. The search field can naturally be cleared with the keyboard, but let's
  add a clear button next to the text field. Start by adding the following lines
  to the init method, for example right after your _filterText_ configuration:
  
  [source,java]
  ----
  Button clearFilterTextBtn = new Button(FontAwesome.TIMES);
  clearFilterTextBtn.setDescription("Clear the current filter");
  clearFilterTextBtn.addClickListener(e -> filterText.clear());
  ----
  
  Vaadin contains a set of built in icons, from which we use the "X" icon,
  _FontAwesome.TIMES_, here, which most users will recognise as a functionality to clear
  the value. If we set the description to a component, it will be shown as a
  tooltip for those users who hover the cursor over the button and wonder what to
  do with it. In the click listener, we simply clear the text from the field.
  
  Vaadin contains lots of different kinds of layouts. The simplest way to align
  the text field and the button next to each other would be to use a
  HorizontalLayout. An alternative way we use here is using a CssLayout, which is
  a lightweight layout that is easy to customize with css. Even if you wouldn't
  want to play with CSS yourself, you can often use one of the existing style
  rules in the default https://demo.vaadin.com/valo-theme[_Valo_] theme. The following snippet will create a nice
  compact "composition" of both the TextField and the clear button. Add these
  lines to the init method right after you configured the _clearFilterTextBtn_:
  
  