“My First Polymer 1.0 Webpage”

“My First Polymer 1.0 Webpage”

In the previous video, we introduced the
concept of elements which are one of the biggest parts of Polymer and we looked at how we can actually import individual
elements in a web page specifically an input element In this video, we’re going to expand our understanding of elements by building a very simple web page. The web page that we’re going to create will be a web page dedicated to the very first video in this series It’s obviously not a very real world idea, but it will help us demonstrate the ways different components can work together Because a YouTube video’s going to be the center of attention for this page we’re actually going to use one of the Google web components, specifically, the Google YouTube web component We could of course download this from here but because I’m using Bower as a
package manager for this project we can use the GitHub Google web components repositories And we can download the Google web components all through this single download link which is google-web-components So to download an install all of the packages that we’re going to need we’re just going to type [bower install googlewebcomponents/google-web-components] and we’re also going to add the [–save] flag and this will download all of the components onto our local machine so that we can use them If we look in the bower components folder we can see that we have access to all of these different
components All from our local machine I’ve gone ahead and created an empty page for us to use for this example which at the moment simply imports the web components JS library as well as Polymer itself Now at the moment our web page is
just blank white screen and so the first thing we can do is to add a panel which we can use to contain the content that we’re going to add So I’m just going to copy and paste this link and we’re going to use the [paper-header-panel] element And once we’ve imported that we can obviously go ahead and use it just as though it was any other element Now, in and of itself, the paper-header-panel doesn’t actually do much for us it’s just an empty

essentially but what it does do is allows us to add new elements so if we add a [paper-toolbar]… which we will also need to import… and we can go ahead an add a title for our page here so we’re going to use “Example Polymer project” if we save this page and head back to our
browser and refresh, you can see that we have this element although our content isn’t displaying as we would expect it to and that’s simply because our content should be wrapped inside of a

so if we head back across to the page and wrap the contents of the title itself inside a

and then head back across to our page and refresh again you can see that we have the actual “Example Polymer project” title displaying in our page So now that we have our header panel in place, we can go ahead and create some sort of content to display within this section Now to help us actually lay out our page
in a consistent way we’re actually going to add some properties to the body of this page specifically we’re going to add vertical… …and layout and these are going to be classes if we refresh the page we’re not going to see any difference at the moment but by having these standardized classes it will allow Polymer to be more consistent across different devices Now that we have our header panel in place, we can add some content to it We obviously have our paper toolbar which is displaying our title but we can go ahead and add some other content so if we use paper-material of we can
go ahead and create something that looks quite good and we obviously need to import this again so refreshing page now will create this element which has shadows already applied to it and because, again, it is inside of the header element, it is inline with the header element we could of course resize the header element to be 50% of the page width for example and everything inside of it will automatically adjust accordingly Instead of just displaying this content as it’s displayed however, this could be the header for our video and if we are going to use this as the header for our video the next logical step would be to include
the video itself again, because we’ve already imported this,
we can simply use the same construct to refer to the google-youtube element and once we’ve imported the google-youtube element,
it’s simple a matter of using it Now, we actually need to pass some parameters across to make sure that we’re using the correct video and as you would expect with a custom element,
the parameters are also customised. and so we can simply pass across the video ID… as well as some other things, for example, the height we’ll just do 720 pixels as well as the width and we’re going to turn off autoplay so if we go back across to our browser now, we can see how this is looking and if we refresh the page… we can see that our video is automatically being imported we’ve not had to mess around with the Google API, or create an iframe, or anything else this is automatically handled for us if we look at this however, we would really want to see this video inside of this element after the title itself so let’s see how we can do that because we’ve closed the paper-material element here…
this has applied the shadow at the end of this element so it’s simple a matter of moving this to beyond the point we want everything to include so the YouTube element now is included within the paper-material element just as if the paper-material element is like any other

you’ve been working with in the past now we also want to make the heading stand out, so I’m going to add a

here just so it actually looks like a header and after the video itself, we may want some other text if you refresh a page now, we can see that this looks like a single element and we can of course do other things to make this element stand out more for example we can change the background
colour of the body so I’m just going to do that inline here and if we refresh again… we’re going to see that the background color has changed to grey we need to then reapply the white to the element itself that we wanted to remain white and as you can see
that now shows up a lot more clearly! You may also notice that this white
elements is now separated from the blue header and so we can go ahead and fix that aswell which simply a matter of moving the paper-element to starting before the actual header element like so and if we refresh again we can see that we have the page exactly as we would expect to see it now this is by no means the best page
in the world, but it does give you some idea of how you can use elements and how
similar they are to ordinary

tags, that you may be more familiar with as well as some of the more complex functionality available with some of the more complex elements and we’ve obviously cover quite a lot of different topics within this video but hopefully by giving you an example of how you can create quite complex functionality very easily you will have some sort of reference point so that when we’re talking about the specific features later on you will be able to relate to how they actually are used In the next video we’re giong to be looking at the layout elements within Polymer for example how I’ve used vertical and layout here as well as how we used the header-panel as our actual construction which is
holding everything together There are a couple of other ways we can layout pages within Polymer, and we’ll talk about those aswell so make sure you subscribe so you don’t miss that!

Daniel Ostrander

Related Posts

5 thoughts on ““My First Polymer 1.0 Webpage”

  1. Chris Wesley says:

    Great video.  Thanks

  2. Perry Reid says:

    Any thoughts why paper-header-panel is causing the other elements not to show up?

  3. Victor Fernandez says:

    Great video, just one thing, i can't display anything inside of <paper-header-panel> …</paper-header-panel>, if i put the youtube tag and the other elements out, these are display but inside of <paper-header-panel> is not 🙁 any idea

  4. nscarg says:

    Muy buen video, muchas gracias

  5. Kosteri x says:

    what's so good about polymer that you cant do with html

Leave a Reply

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