Getting Started with Polymer

cloud 9 idegithub
Google Polymer

In this tutorial we will get familiar with Google Polymer. Learn the basics on importing HTML files, and use the custom polymer tags. Also, touch a little on implementing the paper style polymer elements and use Bower to get it all rolling within the Cloud 9 web based IDE.

Note * Cloud 9 IDE and gitHub are free accounts.
As a UI developer, I highly recommend creating an account for gitHub and keeping it up to date with what you have learned and special projects.

First we will start out by using an awesome online IDE called Cloud9. It is easy to get started. All you need to do is go here to sign up for an account. It is best to just use your github account so everything will be nicely knitted together.

Setup Workspace

      Frist open up your cloud 9 ide and setup a new workspace in your dashboard by selecting “CREATE NEW WORKSPACE”
      Once your workspace has been setup click on your newly created workspace to open up the editor.
      You should have a README.md file already added for you. Just leave it as it is and lets setup our .git repository.

Setup .git Repository

      Open your tab in your browser that has the github website loaded to it. You should be logged in and see + New repository
      Select that button. This will create a new repository to add your polymer getting started code.

      • Why use .git for this?
        We use git so you can use different computers to manage your code and to house your code in one place to make is more accessible.
      You will have a list of commands that will be laid out for you to attach your project to github. Follow the directions. They should look something like this.

      git init
      git add README.md
      git commit -m "first commit"
      git remote add origin https://github.com/<your name>/<your repo>.git
      git push -u origin master
      

      Now open up your project inside Cloud9 IDE. At the bottom you should have a terminal in the second half split of your screen. Add the code you got from github into this terminal one line at a time.
      terminal in Cloud9ide
      Now you have your .git repository and code set up to get started

Getting Started with Polymer

      First we need to get our dependencies for using polymer. We will use Bower to install our necessary files. Bower removes the hassle of dependency management when developing or consuming elements. When you install a component, Bower makes sure any dependencies are installed as well.
      Learn about Bower

      • First we need to install bower into our code9 IDE.

        npm install -g bower
        

      • Create a bower.json file in the root of our application. Click on your Project folder in your cloud9 IDE and run this code in the terminal.

        bower init
        

      • You will be asked some questions and just answer them to your liking
      Next we need to get our polymer dependency. We can grab this by using bower as well. Inside your IDE select your project folder and in the terminal add the code below to install the polymer dependencies.

      bower install --save Polymer/polymer
      

      When the process is complete you should see something like this in your terminal.

      platform#0.4.0 bower_components/platform

      Bower adds a bower_components/ folder in the root of your project and fills it with Polymer and its dependencies.

      Note * : the –save adds the item as a dependency in your app’s bower.json file.

      We will be using the core-elements package and the paper-elements package provided by Polymer. To add these packages we will need to run these two commands in our terminal.

      bower install --save Polymer/core-elements
      bower install --save Polymer/paper-elements
      

      Once we add those dependencies our bower.json dependencies object should look like this

       "dependencies": {
          "polymer": "Polymer/polymer#~0.4.0",
          "core-elements": "Polymer/core-elements#~0.4.0",
          "paper-elements": "Polymer/paper-elements#~0.4.0"
        }
      

      Update the packages

      bower update
      

Creating the index.HTML File

    We will need to create a new file. Right click your project file and select “New File” new file : cloud9 ide
    To use the elements, first load platform.js. Many of the browsers do not fully support all of the web components that we will be using. This helps them stay in sync. Our index.html should look like so.

    <!DOCTYPE html>
     <html>
      <head>
       <!-- 1. Load platform.js for polyfill support. -->
        <script src="bower_components/platform/platform.js"></script>
       <!-- 2. Use an HTML Import to bring in the element. -->
        <link rel="import" href="bower_components/core-ajax/core-ajax.html">
      </head>
      <body>
        <!-- html code goes here -->
        <!-- SCRIPTS go below your HTML -->
      </body>
    </html>
    

    Next lets save and push our code back to gitHub. Inside the terminal in Cloud 9 IDE add these commands.

    git add .
    git commit -m "Adding the index.html file"
    git push -u origin master
    

    The “.” in our command adds all files to our repo. The -m is used to specify the message we want to add with our push to gitHub and then we push our changes to gitHub with the push command.

Using the Core & Paper Elements

To display the core and paper elements, we are going to use the input tag and show how to use them and the differences

      To display the input for core-elements, we first need to import the core-element’s input html. Add this code to the head section of your HTML page.

       <link rel="import"
                href="bower_components/core-input/core-input.html">
      

      Next we will need to add an area in our HTML to display our new input. Add this code inside the body of your index.html page.

      <h1>Core & Paper Elements</h1>
      <ul>
        <li>strong<Basic Text Input : Core</strong>
          <core-input id="single" placeholder="Type something..."></core-input>
        </li>
      </ul>
      

      We imported the core-input.html file into our index.html file in the head section. This has the polymer modular code inside that allows us to use the functionality of the core-input tag without having to know how it functions. This is one of the beauties of Polymer.
      Lets save and push our code back to gitHub. Inside the terminal in Cloud 9 IDE add these commands.

      git add .
      git commit -m "Adding core-components : input"
      git push -u origin master
      

      Lets add a paper element. We will add the equivalent input tag we just used for the core-component.
      First we need to import the paper-element input html to the head section of our index.html file

      <link rel="import"
                href="bower_components/paper-input/paper-input.html">
      

      This import will give us the paper-input tag available to use in our index.html file
      Next we can add the code to implement our paper-element inside out index.html file. Add this code below the exisiting li tag.

      <li>
        <strong>Basic Text Input : Paper</strong>
        <paper-input label="Type Something" layout vertical></paper-input>
      </li>
      

      When we ran our bower install of the paper elements and saved those paper elements inside our project. This gave us the ability to add any of the paper elements to any file. Here we import the paper-input and use its HTML tag.
      Lets save and push our code back to gitHub. Inside the terminal in Cloud 9 IDE add these commands.

      git add .
      git commit -m "Adding paper-elements : input"
      git push -u origin master
      

      As you can see we are pushing back to gitHub every time we make a significant change. This way our repo stays up-to-date.
      Run your code and view the difference between the paper input element and the core input element. In a later post I will describe how to make your own input element and use it in our index.html file.

Your final view of the index.html file should look similar to this.

screen shot of finished input tags

If your styling does not look the same that is because you will need to style our input tags. You can add the style tag below with its contents to add a little styling.

    <style shim-shadow>
        body {
          font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
          margin: 0;
          padding: 24px;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          -webkit-tap-highlight-color: rgba(0,0,0,0);
          -webkit-touch-callout: none;
        }
    
        paper-input.narrow {
          width: 150px;
        }
        
        core-input {
            width: 150px;
            border:1px solid #AAA;
            padding:3px;
            margin:10px;
        }
    </style>

More on styling polymer elements in another post. You can push this change to gitHub if you like, but is not necessary for this tutorial.

Leave a Reply