You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Getting started with Vaadin Board · Vaadin
Vaadin Board - Elements API - Getting started with Vaadin Board
 Edit This Page

Getting started with Vaadin Board

vaadin-board is a regular web component, which you can add to any web page. It can be used both with and without Polymer 2.

In this tutorial, you will learn how to:

In this tutorial we will use Polymer CLI for creating the initial project. At the end of the tutorial, you should end up with the same code as found at GitHub.

Create a Polymer application

  1. Install Polymer CLI.

  2. Create a directory for your app project:

    $ mkdir my-app
    $ cd my-app
  3. Use Polymer to initialize a new application:

    $ polymer init

Polymer CLI will ask you a few questions to set up your app. Choose polymer-2-application as the starter template for your project. After the initialization process, Polymer CLI downloads dependencies and generates the following files and directories:

bower.json

Configuration file for Bower.

bower_components/

Project dependencies. See Manage dependencies.

index.html

Entrypoint page of the app.

src/my-app/my-app.html

Source code for main element.

test/my-app/my-app_test.html

Tests for main element.

Running your application

Run your app with:

$ polymer serve --open

The --open flag will fire up a browser window and open your app in it.

Install Vaadin Board

You can use Bower to install Vaadin Board dependency by running the following command inside your project folder:

$ bower install --save vaadin-board

This will install the latest available version of Vaadin Board in your project.

Import Vaadin Board in your app

Next we’ll modify your app to include a Vaadin Board. Open your app element in src/my-app/my-app.html and add the following line in as the second line in the file, under the Polymer import, to import Vaadin Board component into your app:

<link rel="import" href="../../bower_components/vaadin-board/vaadin-board.html">

Install your license key

You need to install a license key in order to develop your application with the Vaadin Board web component.

You can purchase a subscription or obtain a free trial key from the Vaadin Licenses page. You need to register in the Vaadin website to obtain the key.

When you first time open your web page with Vaadin Board, you will see a pop-up that asks you to enter the license key. If the license is valid, it will be saved to the local storage of the browser and you will not see the pop-up again.

Add the Vaadin Board component to your web page

vaadin-board is divided into rows, using vaadin-board-row. Rows are divided into columns. You can put any WebComponent or HTML element inside the vaadin-board-row. Every element inside the row can take from one to four columns. Vaadin Board rearranges child elements based on available space.

In the example below every child div will use 25% on Desktop, but will be rearranged to two rows when switching to tablet: one row with 2 items 50% of available space each and second row with 100% width item.

Insert the following code in your HTML element (again, in src/my-app/my-app.html), inside template tag:

<vaadin-board>
  <vaadin-board-row>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </vaadin-board-row>
  <vaadin-board-row>
    <div class="item">1</div>
    <div class="item">2</div>
  </vaadin-board-row>
</vaadin-board>

Then we can add styling to our content. Insert the following CSS , inside the style tag:

.item {
    display: block;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
    border-style: solid;
    border-width: 3px;
    border-color: #fff;
    text-align: center;
    background-color: #cacaca;
    height:100px;
}

After these modifications your src/my-app/my-app.html should look like this:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/vaadin-board/vaadin-board.html">

<dom-module id="my-app">
  <template>
    <style>
      :host {
        display: block;
      }

      .item {
        display: block;
        margin-left: 0;
        margin-right: 0;
        font-weight: bold;
        border-style: solid;
        border-width: 3px;
        border-color: #fff;
        text-align: center;
        background-color: #cacaca;
        height:100px;
      }
    </style>

    <vaadin-board>
      <vaadin-board-row>
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
      </vaadin-board-row>
      <vaadin-board-row>
        <div class="item">1</div>
        <div class="item">2</div>
      </vaadin-board-row>
    </vaadin-board>
  </template>

  <script>
    class MyApplication extends Polymer.Element {
      static get is() { return 'my-app'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'my-app'
          }
        };
      }
    }

    window.customElements.define(MyApplication.is, MyApplication);
  </script>
</dom-module>

Run polymer serve --open to see the following result:

board getting started configuration
Figure 1. Vaadin Board Basic Configuration

Vaadin Board rearranges child elements based on viewport size. You can change the size of the Web browser window to see how your application will look on different devices.

Congratulations! You have your first Vaadin Board setup. Visit our docs and demos for more information.