title: Vaadin combobox with different properties to display and bind
body: <p>I have two domain classes</p>
  
  <pre><code>public class A {
    private String nick;
    private String bId;
  
    // getters &amp; setters
  }
  
  public class B {
    private String id;
    private String name;
  
    // a lot of other fields
    // getter and setters
  }
  </code></pre>
  
  <p>The idea is that <code>A</code> does not save a complete <code>b</code>, but only its id.</p>
  
  <p>Now I like to create a form in Vaadin (7.6.7) to create a new <code>A</code>. There are a limited number of <code>B</code> objects available, so I like to have a Combobox, where the user can select a <code>B</code>.</p>
  
  <p>As the <code>id</code> of <code>B</code> is a non-user-friendly field, I like to have a Combobox, that is bound to the property <code>bId</code> in the <code>A</code> object and presents itself with the property <code>name</code> of <code>B</code>.</p>
  
  <p>I cannot figure out how this code shall look like.</p>
  
  <pre><code>FormLayout layout = new FormLayout();
  BeanFieldGroup&lt;A&gt; dataBinder = new BeanFieldGroup(A.class);
  Field&lt;?&gt; nickField = dataBinder.buildAndBind("nick");
  layout.addComponent(nickField);
  
  Combobox bBox = new Combobox("B");
  List&lt;B&gt; allBs = ... // get all Bs;
  allBs.stream().forEach(bBox::addItem);
  dataBinder.bind(bBox, "bId");
  // this does not work really
  </code></pre>
  
  <p>I know the problem is that I have bound a combobox with type <code>B</code> to a field of the type <code>String</code>, but how do I make it, that I can show all <code>B</code>s with the name in the Combobox, but when the <code>commit</code> is happening, it uses the <code>id</code> of <code>B</code> ?</p>