ROB DODSON: Hey, everyone.
What's up?
It's Rob Dodson.
Today on the podcast, we're going to be taking a look back
at our old core pages example.
We're going to revise it so it uses the new iron pages
element.
Let's check it out.
OK, so this is what we're going to be building today.
It is a cat-alogue.
Get it?
Yeah.
And it's basically kind of like a little image carousel.
So you can see it's got these Next and Previous buttons.
As I click on them, it cycles through different photos
of cats.
And you can see here that there is this text field right here
and, as I change that index, it is also
updating which cat photo we are currently looking at.
And so to build this whole thing,
we're going to use the new iron pages element.
Now, looking at our source for our index file here,
you can see that I've already got my web components
polyfills in place.
I've already gone ahead and imported my cat-alogue element,
and I've actually dropped it into the page here as well.
So we're pretty much already set up to go.
Now, thing that I want to point out
is that I've got this images directory over her,
and, inside of there, I've just got a few photos of some cats.
These are taken from a member of the Polymer Eng team's
own feline friend here that we're
using for our example, which is pretty cool.
Now, in the cat-alogue element definition,
you can see that this looks like a pretty typical Polymer
element.
At the top, we are importing Polymer HTML
to make sure that dependency is loaded and ready for us.
That one has an ID of cat-alogue,
which matches the is property that we have down here
in the Polymer constructor.
And the first thing that I'm going to do
is just add a style to our element to style the host.
So we're styling the tag itself, and I'm
sending it to display block.
And I typically do this for many of my elements,
just because, by default, custom elements are displayed inline,
and usually I want things to be either block or inline block.
So I always do this first to avoid any style weirdness
down the line.
Now, with that in place, I'm ready to go ahead and just
import iron pages.
I've already installed it using Bower.
So I'm just going to pull it out of the Bower components
directory and drop it into my element here.
Then I can use this handy iron pages snippet to spit out
some iron pages boilerplate.
This snippet, by the way, is part of my snippets package.
So I've got snippets for both Sublime, which you can get over
here, and snippets for Atom, which you get over here.
They are really, really useful, and they are set up
to support the iron elements and the paper elements,
so it makes it a little bit easier to write code like this.
And you'll see here that iron pages
looks a lot like the old core pages element.
It has a selected attribute, and this
defines which of these sections will
be displaying at any one point.
Right now, it's just defaulting to 0,
so it'll be this first section here,
and I'm going to add a little bit of content to this thing.
I'm just going to drop in some image tags,
and these are going to link up to our cat photos.
And I've given them all Alt attributes for accessibility,
and I also want to give them all an explicit height of 375
pixels.
So I'm going to give them a pic class,
just so I can style them.
And then I'm just going to give them a height,
just for the sake of this demo, so
that we don't have images that are
all wonky and different sizes.
So now we can actually preview this thing.
And because iron pages is set to display its first section
element, we get our very first cat photo
showing up on screen, which is pretty rad.
Now, the next thing I want to do is
create those buttons that let me toggle back and forth
between different cat photos.
So to do that, I'm going to create a div underneath my iron
pages, and I'm just going to call it controls.
And, inside of here, I'll just draw then
a couple of vanilla, just regular, old HTML buttons.
But the one thing that's different
is that I'm going to give them some of these declarative event
bindings or event handlers, I should say.
So these are really useful.
These are features that Polymer adds for you
to set up event listeners.
The nice thing about these is that not only do they set up
the event listener, but they handle removing the event
listener when the element is taken out
of the Dom, which is really handy for preventing things
like memory leaks.
So right now I don't know what I'm
going to do with these methods, but I'm
going to go ahead and just sort of stub them out
in my prototype.
So I'll go ahead and I'll stub out
Go Previous as well as Go Next.
And the reason why I don't know what I'm going to do with these
is because I haven't really dug into the Docs for iron pages
yet.
So I don't really know how to tell it to go next or back.
To do that, we will hop over to the elements catalog
at elements.polymer-project.org and scope out the iron elements
and kind of scroll down the page until we find iron pages,
which is right down here at the bottom.
And I'll boost this up a little bit,
just so you can kind of see this page a bit better
because there's a couple things that I really
want to point out.
The first is this source button.
So this is something that we just recently
added to the catalog.
And what this does is, as the name implies,
it allows you to go to the actual GitHub
repo for the element that you are interested in.
So you can go here and, if you want to file an issue,
this is the place to do it.
So you go to the element source, you go to its repo,
and you file an issue specifically to that tag.
And then the other thing you can do here,
obviously, is go and read the source for the element.
And this is super handy when you're
trying to learn like what's going on inside of an element.
The other thing that I want to point out
that maybe some folks miss is this little behaviors panel
down here.
So right now you're looking at iron pages,
and you can see that it's got this one property that it says
that it defines, but actually, we
know that there are these two behaviors down here that it's
implementing, which means, if you recall from one
of our previous episodes where we discussed behaviors,
we know that it's actually mixing in additional properties
and methods that we should have access to.
So if we go down and click on the iron Selectable Behavior,
we can see that there are several properties that
are element implements, and in fact, we've
got some methods down here as well.
So we've got methods for selecting a specific value,
selecting Next and selecting Previous, et cetera.
So that's actually what I'm going
to use in those stubbed out methods that I created.
I'm going to use these Select Next and Previous methods.
So back in my elements definition,
I'm going to give iron pages an ID,
and this is just so I can select it more easily using
Polymer's Automatic Node finding so I don't have to do query
select or anything like that.
And I just called it Pages.
And now inside of go prev, I can say this,
.$ pages to target that element, and call Select Previous
and then go next.
I will do the same thing but, this time, I'll
call Select Next.
So now I can switch back to Chrome,
and I've got my Next and Previous buttons
and our sort of cat-alogue image carousel type thing
is now a bit more interactive and we can flip through
all these beautiful cat photos.
Now, the next thing I want to do is add that little text input
in the middle, so I can see which cat
photo I'm currently viewing.
To do that, I will go back to my element definition,
and I'm just going to drop in a regular, old input type
equals text element.
And the interesting thing here is
to note that I'm going to create a binding in its value,
and I'm going to call my scope variable selected,
so that will be the shared name for this bound value.
But notice here that I'm also going
to add two colons after this and type the word input.
So what is going on here?
Well, Polymer's data binding system
is all secretly based on events.
So when you have a property in your element,
maybe something called age, for instance-- so let's see.
So we have a property called age, right?
When this property changes, if you've set it to notify true,
it is actually going to fire an event called age changed.
And Polymer listens for these events
to know when it should update its data bindings.
But in the case of native elements,
they fire their own events when they change.
The text input element fires this input event anytime
it changes, and so we need to teach Polymer about this event.
We need to teach it that hey, we want
this binding to update whenever you
hear this event being fired.
So that's what we're doing with this special syntax here,
and this is how you can bind to native HTML elements.
OK, so with that set up, I can go back up to my iron pages
element, and I can replace its hard-coded selected
value with that same scope variable,
and then I can just define a property on my element,
for selected.
I'll type it to number, and I'll give it a default value of 0.
So now, if we go ahead and preview this thing,
we've got that 0 value down there,
and you can see it's changing as we click Next and Previous.
We can also type in the text input,
and because it's firing that input event,
we know to update our bindings when
that changes there as well.
Now, one of things I want to do is
make those controls lay out a bit nicer and, in Polymer 0.5,
we always talked about layout attributes.
I used them in every demo I ever did.
In Polymer 1.0, those have now been
moved to their own repo that is called Iron Flex Layout.
I'm going to import Iron Flex Layout,
and you can see here it's got a special path
that I'm using here.
So it's iron flex layout/classes/iron flex
layout.html.
And that's actually going to load a bunch of CSS classes
that I can use for Flexbox.
So we've switched from attributes to classes now,
but it's basically the exact same thing from Polymer 0.5
land.
It's all the Flexbox shortcuts that you know and love.
So on my controls div, I will add
layout, horizontal and justified, and now
these guys layout really nice, and we can still
toggle through them.
So this is just super useful.
I know a lot of folks were wondering
where layout attributes went, so that is where they are.
They're off in Iron Flex Layout now.
And, for every element, if you want to use those classes,
you'll need to import them so that they
work within that scope.
So important thing to note there.
Now, the last thing I want to show off
is a feature that was very popular in Polymer 0.5, which
was sometimes people didn't want to have
a numeric selected index.
So they would use this special property
or the special attribute called value adder, value attribute.
They would add that to their core pages element,
and they would then specify an attribute
on all of their sections that you should look for when you're
trying to update this thing.
This has been replaced in Polymer 1.0 with iron pages.
Is now called adder for selected.
So we're going to use this instead of the old value adder
to say that we're going to create an attribute called data
cat, and this is just a made-up attribute.
I'm going to add it to all of my sections,
and I'm going to give it a value that sort of typifies
what is in that section.
So this, since it's a pretty cat,
its data cat value is pretty.
This is a vacation cat, so it's vacation.
Hacker cat gets hacker.
Now, what's going to happen is when that selected value
changes to some string, iron pages
is going to look through these different sections.
And let's say the string is hacker.
It's going to look through the different sections
and be like who has a matching hacker data cat?
Ah, this guy, right here.
And it's going to make this the selected item.
So if I go down and I just change my selected property
to a string and default it to hacker,
now when we go in preview, you'll
see that the text input has hacker,
and as we're flipping through the different sections,
it changes to our different data cat values.
And we can type in a new one here.
It's going to disappear for a second
because it sort of goes null for a bit, but we can type in ones
and see those different cats as well.
So there you have it.
Nice and simple, and with some pretty small updates,
we're up and running again.
That's it for this week, folks.
Be sure to click that little subscribe button.
If you have questions for me, leave them
down in the comments below.
As always, thank you so much for watching,
and I'll see you next time.
[MUSIC PLAYING]