The main display will be the index.html file, and templates will be placed in the templates directory:
|-myproj
|-server
|-public
|-views
|-components
|-templates
We'll create a basic element to display how to use this feature.
Within a bare index.html file, we'll try to create a basic core element object:
<polymer-element>
<template>
<p>Hello World!</p>
</template>
</polymer-element>
The index.html file with the basic core element will look like:
<!doctype html>
<html>
<head>
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../components/polymer/polymer.html">
</head>
<body unresolved>
<polymer-element>
<template>
<p>Hello World!</p>
</template>
</polymer-element>
</body>
</html>
You'll run this file on your browser via your server, and notice that nothing is displayed on the screen. How come? It seems that using literal web-components is disallowed, and, in any case to create elements this way would create an unmanageable project in a hurry.
The solution is to modularize your components, and reference them by their name property wherever in the index.html they will be used.
The basic core element we created will be moved to a templates/hello_world.html file, along with it's dependency:
(templates/hello_world.html)
<link rel="import" href="../components/polymer/polymer.html">
<polymer-element name="hello-world" noscript>
<template>
<p>Hello World!</p>
</template>
</polymer-element>
We'll import the hello_world.html file in the index.html, and create an instance of the component within the body tag:
<!doctype html>
<html>
<head>
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../templates/hello_world.html">
</head>
<body unresolved>
<hello-world></hello-world>
</body>
</html>
When the index.html is accessed from the server to the browser, you'll see your template displayed. Even the very basic example we have includes a slick fade effect, and the affect of web-components could not be highlighted more elegantly.
We'll continue by adding a button to the template:
(templates/hello_world.html)
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<polymer-element name="hello-world" noscript>
<template>
<p>Hello World!</p>
<paper-button><span>Yo</span></paper-button>
</template>
</polymer-element>
The button is added to the view, and we can configure a view element using the core-card element to contain our content:
(templates/hello_world.html)
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<polymer-element name="hello-world" noscript>
<template>
<div style="background-color:pink; float:left;">
<p>Hello World!</p>
<paper-button on-click="{{hello}}" raised><span>Yo</span></paper-button>
</div>
</template>
<script>
Polymer({
hello: function() {
console.log('yo, hello!');
}
});
</script>
</polymer-element>
Try to run the code, and you'll notice a console error stating "Uncaught Already registered (Polymer) prototype for element hello-world". That's because the 'noscript' option has already locked the Polymer script, and if you remove that option, and run the code again there will be no error. By clicking the button, you will see the corresponding results of the hello function displayed.
