Using the Google elements that come with the Polymer project is reasonably easy, it is just important to remember that we are dealing with pre built elements and we need to treat them in this way. While they are customisable, there are limitations to what you can do. Below you will see my first efforts to create a page which experiments with the use of Polymer Project elements.
The Code;
The Result;
Now I have looked at custom components and ability to nest them inside each other, it was time to move on to practicing with the Polymer Project elements. The aim of this was to understand how to use them, but because I had already learnt so much I knew it would be reasonably simple.
The Code;
It was simple, allI needed to do was import the code, use the element tag for the google map and add the map attributes to the code and it was done!
The Result;
As you can see the map is now implemented into the page exactly as coded.
Now I knew the basics a little bit, it was time to step it up and create a slightly more complex custom component. This time I created a custom component that was connected within another custom component that could be used as a whole custom component. Check out the results below!!
The Code;
First step is to create the backbone by setting up the layout and the content specifications.
Next up, I added the specific content and made sure my custom element would repeat for all sets of data.
The best part of components is that even with all this complex code going on in the background the index file is super clean, it just included the custom component tag.
The Result;
With the addition of some simple structural css, the end product looks like this.
Data Binding
This was the most important stage, it allowed me to understand the basics of the Polymer Project and how the concept would work. This first test was to get used to concept of components by writing my own and connecting it to another file. The aim of this was to create a component that would allow the user to add text into a box and let allow it to become applied in a sentence on the screen, the technical term for this is two way data binding.
The Code;
This file is the actual component, it is what is referred to from the index.html.
This is how I implement the custom element.
The Result;
As you can see below, the outcome was exactly as expected.
akbrodie.wordpress.com 