Why Custom Elements ?
Custom elements lets the author of code design their own custom tags like for example if you want to embed youtube or any other side video on a page you can simply do
<video-frame url='https://www.youtube.com/watch?v=IO7b8r9TYfY'></video-frame>
How to build this ?
To get started lets built a simple application that use custom tag we will built here, but to run this you need bunch of dependencies like polymer.html and polymer.js files. To download this, we will use bower package manager.I prefer mac for most of my development, these commands are supported on apple.
Install bower as package manager that pull and saves all the related dependencies for you in one place.
Create new directory/folder on your machine and through command line/ shell navigate to directory. Type in the following commands (like I am doing after navigating inside Oyecode_Polymer) directory
$ bower install $ bower install -save polymer You can install polymer in one line using bower with just two commands above. Having run this command, now create a new html file called myelement.html. Copy paste this content in your new html file.
This is how my directory look like
<!-- Define element -->
<polymer-element name="video-frame" attributes="url" noscript>
<template>
<iframe width="560" height="315" src={{url}} frameborder="0" allowfullscreen></iframe>
</template>
</polymer-element>Remember this element uses javascript, if you do not want your element to start a script you can added NoScript tag like this
<polymer-element name="my-element" attributes="counter" noscript>Let us use this custom tag by adding to html page. On render, this tag will result in html button which on click will increase the counter by +1 based on what attribute value you provided to the element. Remember, this example is officially demonstrated by Google.
<!-- Use element : Adding four videos-->
<!DOCTYPE html>
<html/>
<head>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/video-component/videoframe.html></head>
<body>
<video-frame url="//www.youtube.com/embed/IO7b8r9TYfY"></video-frame>
<video-frame url="//player.vimeo.com/video/60068519?byline=0"></video-frame>
<video-frame url="//www.dailymotion.com/embed/video/x2219zo"></video-frame>
<video-frame url="//www.metacafe.com/embed/5889737/"></video-frame>
</body>
</html>
How to run the project
- using cd command to go your directory like $ cd ~/Desktop/Oyecode_polymer
- type in
python -m SimpleHTTPServerto start server
Python 2.x:
python -m SimpleHTTPServer Python 3.x:
python -m http.server Test out the web server by loading the finished version of the project. For example:
Here is the output 
Press increment button to increment the counter, and you see once you have element ready, just in one line of code, you create a button, with counter displaying number and changing on click. I wrote couple of more element and have been explaining more in upcoming post about developing elements and event handling to achieve more awesomeness
Fork my repo here on harshit branch and jump start here
0 comments:
Post a Comment