#4 Adding Polymer

By -
Now that we know how to create a chrome app, let us add Polymer elements into it and make it look beautiful. In my "#2 Getting Ready" post, I have talked about Bower, remember ? So now open the Folder you set up for the PolyChrome App and do Shift+RightClick mouse button, choose "Open command window here", then follow the steps : -

bower init

This will create a bower.json file and ask you the details for it. Might look like this.


bower install --save Polymer/polymer#^0.5

"--save" will save the dependency of polymer into your bower.json


bower install --save Polymer/core-elements#^0.5


bower install --save Polymer/paper-elements#^0.5


Sometimes it may ask you to find a suitable version (like in the picture above). I prefer to choose 3.

NOTE: It is purely your choice to add the required polymer elements one-by-one or install all at once. Here I have decided to install all the core and paper elements at once (to make adding elements in our HTML easier).

PLEASE DO NOT UPDATE POLYMER TO v1.0 (atleast for this tutorial), coz the style for adding polymer elements into html has changed in v1.0.

You may also add :

bower install --save Polymer/core-icon#^0.5



 Now let us start building our HTML using Polymer

Add the following under 'head' tag.

<!--Load platform support before any code that touches the DOM.-->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link href="bower_components/core-elements/core-elements.html" rel="import"></link>
<link href="bower_components/paper-elements/paper-elements.html" rel="import"></link>

Add this for the body..

<body fullbleed layout vertical>
<core-drawer-panel>

<!--Drawer-->
<core-header-panel drawer id="drawerBack" mode="seamed">
<core-toolbar id="drawerTool" class="medium">
<core-label id="username">Hello User</core-label>
</core-toolbar>
<!--drawer content goes here-->
</core-header-panel>

<!--Main Toolbar-->
<core-header-panel main style="background-color: #e5e5e5;" mode="standard">
<core-toolbar class="medium">
<core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
<span>Polymer  Chrome  App</span>
</core-toolbar>
<!--Main content goes here-->
</core-header-panel>

</core-drawer-panel>
</body>

Important: Do "Refactor for CSP" ( from options in RightClicking your project in CDE ).

  1. fullbleed - This removes its margins and maximizes its height to the viewport.
  2. layout - Using this attribute, the container becomes a "flex" container. ( Teaching you about flex is out of the scope of this post , but you can refer to flexbox here).
  3. mode - Controls header and scrolling behaviour. Refer this.
  4. class - If you want to change the heigth of toolbar , you can change it using class="medium-tall" or "tall".
  5. core-drawer-toggle - It's a method that enables you to open drawer on clicking menu button.
Let us now add some styling

<style>
      html,body {
        height: 100%;
        margin: 0;
      }      

      @font-face {
          font-family: Handlee;
          src: url(assets/Handlee-Regular.ttf);
      }

      core-toolbar {
        background-color: #0099cc;
        color: white;
        font-size: 25px;
        font-family: 'Handlee', cursive;
        font-weight: bold;
      }
 
      #drawerBack {
       background-color: #e8e8e8;
       box-shadow: 0px 0px 4px #888888;
     }
 
     #drawerTool {
       background: #98bf21;
     }  
</style>

And finally we have this...


So what do you say ? Wasn't that awesomely easy ?  I have already added the code , if you wanna look up..https://github.com/akki777/PolymerChromeApp.

                                                                                                                                        Next Post -->

Comments

Post a Comment

Popular posts from this blog

Double-side Nav Drawer

By -
Image
Hello guys, this post will teach you how to add both Left and Right Navigation Drawers in your Android App. You may need one Nav Drawer on the right to give your users a different set of options, not to distract them from the main navigation items on the left. I have used  Android Studio 1.5.1 Build 141.2456560 .  So here we go. 1) Navigation Drawer Activity      When creating a New Project, choose Navigation Drawer Activity. This makes things easy. If this option is not available, you can the simply choose Blank Activity and later make the project structure similar to Navigation Drawer Activity. See the layout files here . If you run the app at this point, you will see the Left Nav Drawer.                                           2)   Navigation Views     As you can see I have added 2 Navigation Views inside Drawer Layout...one for left-side and other for right-side. For the Right-side, add android:layout_gravity="end" Other th
Keep reading

Quotographics

By -
Image
Hey everyone, long time no see. Summer holidays have started and I am kinda free these days. So I created some "Quotographics". Of course, the graphics are not mine, but the thoughts are. (Took the graphics from Google images) If you want to download these, get them here - >  https://drive.google.com/open?id=0B4wLjZdRHjylRmVpckNaakRuTlk Hope you like them. Leave your comments below.
Keep reading

LiFi :The next gen WiFi

By -
Image
In the world where everything is connected and networked , WiFi has played a pioneering role in redefining the scope of reach ability and networking. No matter where you are, you are always connected, be it Internet or your own LAN. Sharing, uploading , downloading data at several Mbps. But what if you can achieve all this and much more at 100 times faster rate. YES 100! That 's exactly what Lifi is. Still in its developing stage, Lifi is a more efficient, faster, possibly more secure version of existing WiFi technology. Tested successfully by company called Velmenni where the results recorded show that the data was transferred at average of 1 Gbps! 100 times more than WiFi. In lab tests, the fastest recorded speed was a unbelievable 224 Gbps !! Lifi is a subset of OCW (optical wireless communications) and is a complement to RF technology. Put forth by Prof. Harold Haas, Lifi is entirely dependent on light. In simplest terms, it uses light to transfer data  rather than
Keep reading