More Polymer 1.0 Lessons

digitaleagle PHP, Polymer, Uncategorized

I’ve done some more work with Polymer 1.0, so I have some more to share with what I have learned. Specifically, what I was working on was making my home page mobile friendly and also working on a quick program with my son to track license plate states on our road trip.

Mobile Layout with Drawer

Now that Google checks for mobile friendliness, I need to make sure that I have that taken care of that on my front page.  Google has a nice tool called the “Mobile Friendly Test”.

First, I added a button to show the drawer.

<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>

The paper-drawer-toggle attribute makes it hide and display the drawer automatically.  You don’t have to write anything extra to make it work.

Note: this button only displays when the mobile layout is activated.

The other important part is to add the following three lines to the top of the page:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

This may seem obvious, but don’t forget to import the paper-icon-button:

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

Also, make sure that you have this at the top of your main index.html file:

<!DOCTYPE html>

To easily see what it looks like, you can open the Developer Tools in Chrome and click the “Toggle Device Mode” button:

Toggle Device Mode button

 

Adding a Fab

Another thing that I wanted to do was to add a fab at the bottom right-hand corner of my app like so many of the new Android Apps. With a web component and some simple CSS, it is pretty simple.

First, the web component looks like this:

    <link rel="import" href="bower_components/paper-fab/paper-fab.html">
    <paper-fab icon="add" ng-click="add()" class="main-fab"></paper-fab>

Notice that the class is “main-fab”. I added this CSS in the stylesheet to place the fab:

.main-fab {
    position: fixed;
    bottom: 16px;
    right: 16px;
    
}

Single Tag App

One of the common design concepts in Polymer is to make your application a single tag or a single component. So, you page would look something like this:

<body>
   <rw-app></rw-app>
</body>

I haven’t experimented very much with this approach, so I can’t make any recommendations or comments at this point.

Using Angular and Polymer together

I have read many posts that said that you can use AngularJS and Polymer together. I am still working on my opinion. It is definitely possible, but I am trying to determine if it is feasible or helpful. Seth Ladd wrote a really nice post that includes a good diagram of the feature overlap and such.

An interesting fact: Angular 2.0 is supposedly working on web components according to this Google Group posting. There’s a lot of information on Angular 2.0 on their Google Drive publishing. I haven’t combed through it yet.

On thing that I need to experiment with is using angular attributes and binding inside a web component. If you do a single component app like just described, Angular would not be much help.

I would love to find Google’s official take on using the two together. If they do support it, I would love to see some interoperability features making it easier to use them together.

Passing an object from Angular to Polymer

I’ve been coding on a fun little app to track license plate states on a road trip.  You can check it out at “RoadWatch“.

Here’s my polymer component tag that shows each of the states that were found:

<div>
<link rel="import" href="my_components/rw-sighting.html">
   <rw-sighting
      ng-repeat="state in states"
      ng-show="state.selected == true"
      flagname="{{state.name}}"
      image="{{state.flag}}"
      sighting="{{state}}"
      closeevent="removeSighting(state)">
   </rw-sighting>
</div>

In the rw-sighting.html file, the console spits out the “state” object contents when the close button is clicked (closeAction() ).

<script>
    Polymer({
       is: 'rw-sighting',
       properties: {
           flagname: String,
           image: String,
           sighting: Object,
           closeevent: String
       },
       closeAction: function() {
           console.log(this.sighting);
           angular.element(this.$.sighting).scope().$eval(this.closeevent);
       }
    });
</script>

Notice the “sighting” property in the properties list. It is defined as an object.

Access Angular Scope in a Polymer Element

I found that you can use “this.$” to access the ids of any of the elements in the template. Passing that off to angular.element gives access to the scope:

    angular.element(this.$.sighting).scope().$eval(this.closeevent);

Notice that using $eval(), I can execute code on the button click just like the ng-click attribute would. I just can’t use ng-click because I don’t want it to happen when the user clicks anywhere on my element.

Looking Forward

I’ve found a few more things to play with. I haven’t experimented with them yet, but they are on my radar.

First, I use the ACE editor on one of my projects. To switch to the project to Polymer, I would need a way to include the ACE editor. It looks like their is a tag for that!

Polymer Labs: ace-element

Another small side bar is making my app offline capable. I found a nice resource for generating the app cache file: confess.js. And, a nice reference.

Resources

Leave a Comment

Your email address will not be published. Required fields are marked *