The Content property in
Vaadin Designer 1.1

A.k.a non-dummy content

Vaadin Designer 1.1 introduces a new feature called Content property. You can put real content in the components that previously only had static non-editable content visible in design-time. The Content property makes it possible to create designs that look exactly the same in design-time as in run-time.

You can edit the Content property with the property editor, or you can edit the content in the declarative source. In both cases, the content will persist in the design, and will appear in your application - unless you change it in your Java code.

Which components have the Content property?

The following components have the Content property: Grid, Table, Tree, TreeTable, MenuBar, and all the selection components.

Grid

You can define columns and column headers. You can add rows and have a footer row. Column headers can have multiple rows and contain components. HTML content in the footer and header is supported.

<vaadin-grid>
  <table>
    <colgroup>
      <col property-id="mycolumn" sortable hidable>
    </colgroup>
    <thead>
      <tr>
        <th plain-text>My Column Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
       <td>My Row</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td plain-text>My Footer</td>
      </tr>
    </tfoot>
  </table>
</vaadin-grid>
 

Table

With Table, the Content property allows you to define pretty much the same things as with Grid excluding multi-row headers and components in the header row.

<vaadin-table selectable>
  <table>
    <colgroup>
      <col property-id="mycolumn">
    </colgroup>
    <thead>
       <tr>
        <th plain-text>My Column Header</th>
       </tr>
    </thead>
    <tbody>
       <tr item-id="1">
        <td>My Row</td>
       </tr>
    </tbody>
    <tfoot>
       <tr>
        <td>My Footer</td>
       </tr>
    </tfoot>
  </table>
</vaadin-table>

Tree

You can set tree node hierarchy, node text, and node icon.

<vaadin-tree>
  <node text="Node 1" icon="fonticon://FontAwesome/f06b">
    <node text="Node 2"></node>
  </node>
  <node text="Node 3"></node>
</vaadin-tree>

TreeTable

The Content property of TreeTable works almost in the same way as Table's. The only difference is that you can set a parent-child relationship with a depth attribute.

<vaadin-tree-table selectable>
  <table>
    <colgroup>
      <col property-id="mycolumn">
    </colgroup>
    <tbody>
      <tr item-id="1" collapsed="false">
        <td>Row 1</td>
      </tr>
      <tr item-id="2" depth="1">
        <td>Row 2</td>
      </tr>
      <tr item-id="3">
        <td>Row 3</td>
      </tr>
    </tbody>
  </table>
</vaadin-tree-table>

MenuBar

You can define the whole menu hierarchy. In addition you can set menu item texts, icons and separator items.

<vaadin-menu-bar>
  <menu>
    File
    <menu>
      Open...
    </menu>
    <menu icon="fonticon://FontAwesome/f06b">
      Save
    </menu>
    <menu separator></menu>
    <menu>
      Quit
    </menu>
  </menu>
</vaadin-menu-bar>

Implications for 1.0 users

If you are already using Vaadin Designer, then there are two important things to notice:

  1. When adding a component that has a Content property, the automatically added dummy content will appear in run-time too, unless you remove it in design-time or replace it in your Java code.

  2. When opening a Vaadin Designer 1.0 design, components that previously had dummy content will appear empty. Your existing Java code will probably populate these components, but you can choose to add content via the Content property. The content you add is "real" and would appear in run-time. You can choose case-by-case which content is static in the design, and which content you want to add dynamically.

This change will finally make your design have 1:1 parity with what you see when running your application. When multiple UI designers are working on the same team, the design can now better communicate the intended content of MenuBars, Tables, Trees, etc.

Example of using the Content property of Grid

Let's create a Grid that is a bit more complex than the one you would get if you dragged a new Grid from the palette to the design area. Here is a screenshot of the design we are aiming for:

designer-grid-content-property.png

This is the declarative syntax for simple Grid

<vaadin-grid column-reordering-allowed size-full _id="grid">
 <table>
  <colgroup>
    <!-- Column definitions -->
  </colgroup>
  <thead>
   <!-- Header rows -->
  </thead>
  <tbody>
<!-- Rows -->
  </tbody>
  <tfoot>
   <!-- Footer row -->
  </tfoot>
 </table>
</vaadin-grid>

First, let's add columns to the Grid.

<colgroup>
  <col property-id="Company" sortable hidable>
  <col property-id="2014 H1" sortable hidable>
  <col property-id="2014 H2" sortable hidable>
  <col property-id="2015 H1" sortable hidable>
  <col property-id="2015 H2" sortable hidable>
</colgroup>

Add column headers with <th> elements. As you can see, the header elements can contain HTML with inline styles.

<thead>
  <tr>
    <th plain-text></th>
    <th colspan="2">
      <div style="font-weight: bold; text-align: center;">2014</div>
    </th>
    <th colspan="2">
      <div style="font-weight: bold; text-align: center;">2015</div>
    </th>
  </tr>
  <tr>
    <th plain-text>Company</th>
    <th plain-text>H1</th>
    <th plain-text>H2</th>
    <th plain-text>H1</th>
    <th plain-text>H2</th>
  </tr>
</thead>

Add Grid rows to the <tbody> element.

<tbody>
  <tr>
   <td>E Corp (Europe)</td>
   <td>$37,452,399</td>
   <td>$36,846,001</td>
   <td>$36,769,300</td>
   <td>$40,997,100</td>
  </tr>
  <tr>
   <td>E Corp (Asia)</td>
   <td>$74,605,001</td>
   <td>$73,692,100</td>
   <td>$73,538,501</td>
   <td>$81,994,100</td>
  </tr>
</tbody>

Finally, add footer rows to <tfoot> element.

<tfoot>
  <tr>
    <td plain-text></td>
    <td plain-text>$112,057,400</td>
    <td plain-text>$110,538,101</td>
    <td plain-text>$110,307,801</td>
    <td plain-text>$122,991,200</td>
  </tr>
</tfoot>

Try it yourself

The easiest way to see an example of the declarative syntax for each component supporting the Content property is by dropping them on the design canvas and then either switching to the declarative view or opening the Content property editor.

See more tutorials