Bower integration with Polymerize
In this post we will see how to use a native polymer 2.0 component (a
vaadin-grid in this example) in a polymerize
project in few seconds.
The long story
Say you’re writing a gorgeous app with
polymerize. You are really enjoying how easy is to write new components
and assembling them together.
You suddenly realize that you need a
You then decide to visit webcomponents.org and look up for some usefull component.
Mmh… let’s see… vaadin-grid … wonderfull! I want it! It has dynamic columns, configurable renderer for both header, footer and cell, easy styling … well documented … and it’s from vaadin! I want it! NOW!
Let’s see how you can do this in a few lines of code.
We start with a bare simple startup project :
git clone https://github.com/polymer-dart/tutorial1.git cd tutorial1 pub get pub serve & atom .
This will clone the repo, and launch pub server and an editor on it.
Then open your browser and point to
http://localhost:8080 after a few seconds you will see the bare project page:
The startup project can be used as a starting point for any polymerize project and it has :
- a main entry-point
- a custom style
- a custom component
- init code for logging and intl integration
Now let’s see how to add a vaadin grid to the startup project.
Importing the element.
First of all we visit the vaadin-grid page to figure out what its bower reference is:
Than we create a new class in
lib/vaadin_grid.dart that maps the native element to a dart class:
Then we add an import directive in
Finally use the
<vaadin-grid> tag inside the
Now reload the browser page et voila! The
vaadin-grid is served.
If you take a look at the
pub serve logs you may see some lines like these :
That’s the sign that polymerize noticed a change in the
bower dependencies and downloaded the new component for you inside the project.
And that’s it! We got our nice vaadin-grid !
NOTICE : You don’t even have to stop and restart the
pub serve, just reload the browser page and you’re done.
Next step : some columns
Ok we got a table, but we need some columns too. No problem! Add a mapping for
<vaadin-grid-column> too in
vaadin_grid.dart (you’re not forced
to create a new file for it if you don’t want) and use it:
Now you can use the
<vaadin-grid-column> tag to add columns to the grid (you already imported
Reload the page and here comes the columns!
You can checkout the branch vaadin-integration and see it in action if you don’t want to apply the changes yourself:
git checkout vaadin-integration
(again you don’t even have to stop and start
pub serve just reload the page).
Then add some data and here’s the final result :
Some more details
In order to map a dart class to a native polymer component and import its definition with bower you have to :
- declare an
- decorate it with
tag-nameis the tag that’s been mapped and
polymerizethat’s a native component
- decorate it with
- the local
namefor the component library (the component will be downloaded in
- the bower
- the relative path to
import(the first component of the path will be always equal to
- the local
If you need to map other properties just use the
js-interop pattern (example declare a
external List get items for the
For many of the standard polymer elements there’s a library that you can import in your project polymerize_elements with a git dependency:
(because we choose to keep the same name of the old
polymer_elements library in order to let people migrate easily from
dart-polymer projects it won’t be published yet to
The library is not complete but new components are added constantly.
Consuming native polymer components in
polymerize is very easy and effective.
It unleashes the full webcomponents.org potential inside
polymerized apps, just try it!