In my first post we will learn how to create a simple web-component with polymer.dart. First of all we have to create a new application in the Dart Editor:
Now we will have the default polymer.dart project which consists of a clickcounter component and the main html that loads the web-component. We will change the clickcounter files name for icon.dart and icon.html and update the code in both files.
<polymer-element attributes="imageUrl fileName" name="x-icon">
<template>
<style>
div {
font-size: 10pt;
text-align: center;
margin: 10px;
width: 100px;
display: inline-block;
}
img {
width: 90px;
height: 90px;
padding: 5px;
}
</style>
<div>
<img alt="{{fileName}}" src="{{imageUrl}}" />
{{fileName}}
</div>
</template>
<script src="icon.dart" type="application/dart"></script>
</polymer-element>
Our icon component is very simple it's just an image and a span with its filename inside a div. We use {{}} for using values of the web component's objects, in this case we use just attributes but our component could have an object of type Icon which had a imageUrl and filename attributes along with other attributes or methods. But we will let that for the next time, for now let just focus on creating a web component as simple as possible.
import 'package:polymer/polymer.dart';
/**
* A Polymer click counter element.
*/
@CustomTag('x-icon')
class IconElement extends PolymerElement {
@published String fileName = "Icon";
@published String imageUrl = "http://erlantzoniga.com/images/folder.png";
IconElement.created() : super.created() {
}
}
In the dart file we cannThe first thing that catch's our eye when opening the dart file are the annotations. First of all we have the @CustomTag annotation that indicates to which polymer element belongs this code. The other annotation we see is @published before the declaration of the variables, this means that these variables are attributes of the component which means that we will be able to use:
<x-icon filename="Test" imageurl="http://www.example.com/image.jpg"></x-icon>No we will update the main html to use our new web component. The name of the html is the same name of the project but we can call it as we like so I'm gonna call it test.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample web component</title> <!-- import the icon component --> <link rel="import" href="icon.html"> <script type="application/dart">export 'package:polymer/init.dart';</script> <script src="packages/browser/dart.js"></script> </head> <body> <h1>Icon component example</h1> <!-- Default icon --> <x-icon></x-icon> <!-- Custom icon --> <x-icon imageurl="https://lh5.googleusercontent.com/-6LE2zGf0peU/AAAAAAAAAAI/AAAAAAAAAe0/3lMdEfAJGCw/photo.jpg" filename="Hello world!"></x-icon> </body> </html>The most important part here is the little dart code that imports init.dart without it the web component won't work. Using our new component it's as easy as using any standard html element as you can see and if we don't pass any attributes it will use the default ones.
And here is the end result:
