Polymer With ASP.NET 5 | Amr Swalha | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (38m)
    • 1. Introduction

      1:29
    • 2. Polymer Review

      9:32
    • 3. Adding Polymer to ASP.NET 5 Project

      5:35
    • 4. Working with Polymer Elements

      7:22
    • 5. Creating a Custom Element

      6:46
    • 6. Data Binding

      1:10
    • 7. Iterating data

      5:39

About This Class

Hello and welcome to this course. This course is about Polymer and how you can use it with asp . net 5. 

Polymer is ready made html elements that can save you huge amount of time. Like Google maps instead of adding a long html code and JavaScript you can easily add google map with few lines of code.

asp . net 5 is the latest version of asp.net and  has a load of features such as the support of npm and bower.

In this course, you will learn:

  • What is Polymer
  • What is Polymer Elements
  • How you can add it to asp . net 5 and use it.

I welcome your questions about Polymer in the class discussion so you can get the most value of this course.

I hope you join and enjoy this course. Please watch the full course first then add a review for it.

Transcripts

1. Introduction: Hello and we've come to score in this course. You are going to layer what is polymer and how you can use it with the s. We didn't five in the schools. You are going to the in the following what is fully, more how to use it with the s. We didn't fight and working with different polymer element Parliament is there, developed by Gorgon and it can save you a lot of time and also help human 10 Your coat special. You're a samel court. Easy. You can create templates with it and also use the different element. Or, let's say a single animal. Use it in multiple pages with a single location to it so you can would fight easy and also reuse. It was no time. Please do not review the course on this. You seen all the lectures because I go from single to advance in the face. The few lectures thin I go graduate, Lee, much advance. So I hope you join this lecture and you find it useful. If you have anything or any issues you have, please share it with us in the discussion section so we can help you. Thank you. 2. Polymer Review: Hello and welcome to this lecture. In this lecture, we will review Paul Amon. See, it's the different element and why I recommend using it. Okay, Now polymer is a project maintained by Gogan Polmar aims to save your time and also help you to use your ex chairman liniment instead of keeping always say, rewriting your HTML elements, you can create them as a component or let's say an HTML element under through reference it in multiple pages there are some ready made elements that parliament provide. And there are also a way you can add your own polymer emits. So this see problem are over here in sweeps, I'd we can show you this real life example off polymer work. As you can see, things is like a beautiful whip component. So the order pros are gets it on. This is the important element. You will see what is the Bullimore element in just a few minutes. And also this is how you use the animals. So pretty much this is Ah say this is the way we can at a Google map element to our webpage . Really, really simple, really easy. We did not have to reference different JavaScript files at these elements. Chicken virgin queries supported by this virgin or not TTC Really, really simple. We just added the difference here we added the element on we. Also, As you can see, this is the parliament elements. Just only you call Google map, you pass in the values they let it. You don't get you'd okay on. And that's it. That's the whole thing. So I think a Google map. Ah, before Baltimore would take you weigh much time. Okay, Way much the way. Adding this script adding this reference CTC So let's go down here. As you can see, you can also create your own element. Okay, so it's not limited to the readymade elements we will see in the element settled. As you can see, this is they created this in a moment. It has an icon. It has some image TTC on. This is the script to do it. Okay, Mr Me Go down of it. All right. Now, as you can see, you difference. What way? Named that polymer element contact card. All right, look with me. Contact card. We're just like a normal human element. We passed it also. This is the condition start, which is having a star icon right here. So we passed this condition on. We have now this card element with the star, So it's also really hateful. If you have, let's say toe, place this card in different places in your Web site. This can save you a lot of time. You can change only in a single place and that that place reflect toe different pages. Okay. As you can see, this is like a don't module on. Give it the I D. Card on. We just reference it in Helmand in no matter how many pages we want it, we can just go back here. He did it. I don't want a star. I want another icon. Let's say another icon I want I want to check e t. C. I want toe remove this condition so it will be in just a single place. It wouldn't take you too much time. It will lower the maintenance time. Okay, See some here. As you can see, here is some other examples. They use some real gator with it and as you can see, some of them have start. Some of them doesn't eat easy So let's go to school. Now the elements get alot now the element catalog are some ready made the elements that you can reference and use also in your with project. So these are the different elements. Okay, I'm gonna start first with parliament problem our core elements, which is the irony element, as you can see. Now let me show you something fierce before I get much labor with me Show you say I wanna see this one. Okay, the announcer. Okay, now look to the left side. As you can see, here is some good navigation thing you can use. You can see the documents. You can see a real life demo for it. You can see the source if you want to go to get up and see the source for it. 80 c. You can if you wanna added it to favorite okay or remove it. And also, if you are using power to add to add elements, always say libraries to your website. You can get the comment here. We're not. Since we are using visual studio, we're not gonna need to take this command and die, But so this is just to show you how to never guess over in the cattle. Here, you can go back. Okay, so let's go back to the answer. Okay. As you can see here is that documentation is an example they provide. You have to use it. What? You can pass. And when you cannot. If you hit in the demo, this is the answer. As you can see, it's like material design, and it's really, really beautiful. Okay, there are different things. Let me show you. Let's say the king's behavior. Okay. I was the commendation. How we go to the demo. I want toe hit. Enter. As you can see, the enter is pressed it the problem more. Capture that event, and it shows this message. Uh, let me go up to the collapse, okay? And go directly to the limo. As you can see, this is a collapsible item from polymer. Okay. School back. Ah, see the look for view. This is the basic demand for it. As you can see, this is an example off it. How you can say, show your documentation. It's redeem it. Okay. All right. There's there's some nice things for it. Discover. All right, So there is some my own form. Let's see the limo. All right, so this I don't form. As you can see, it's like close to a material design. It's really beautiful. It's really nice. All right, So these are the irony elements. OK? You can use you can I will not go on go. Everyone remembers. But as you can see, you can just click on it, see the documentation, see the demon for it. Okay, there are the paper elements. If you want to go to it, let's say it's often the paper cuts on. Let's go to the demon. As you can see, it shows like a guard right here. There was some thought with rating on a map location TTC So I'm not gonna go into every one of them. Thing is the mogul with components which we will use in later section. Ok. Ah, let me show you. They're awesome. Some few northern Gogel. Let's say the Gogel child true use in the letter the most open the demon. As you can see, this is the Google a chart. We use Baltimore to it. Let me go back to the documentation as you can see you. Just if you want to do a by area. You just call in the Geauga chart on best it like an HTML element. Best the attributes on the values you want. It is really, really simple. As you can see, it can save us a lot. A lot of time on its can do, Let's say or create some really beautiful animals. Okay. As you can see, this is like a random every three seconds. This is the bite shot thes are different charts. So all why what you have to do is just toe the documentation. All what you have to do is just take this court at the differences. Do you were, uh, with page? As you've seen earlier on just us. The attributes for the values you want and that's it. Look it So this is really nice thing. It's can save you a lot of time. So I hope you enjoy the structure 3. Adding Polymer to ASP.NET 5 Project: hello and would come to the snatcher in this lecture, you'll see how you can at Parliament to an s. We don't net five project to do so. Let's go to visual studio and choose the new project. Now it is the name off the project on Don't use Ah, say with on. I'm gonna say polymer. You can choose whatever you want for your project and solution. So let's make sure that we select an SPD network publication. It sit. Okay. Right now it shoes and esmie dot net five Template, as you can see here. Okay. I'm going to disable the authentication for this project so it's can load faster. It's up to you. You can leave it or at it. So choosing of applications, the reason I truthful publication because it's a logical figuring M v c. It's not like the empty solution. We have toe ad M V c to it. And so so it's led, configured and come with some handy. It's a templates. All right, so it's loading. Okay, so this is our project has loaded. Let me close the start page. It's opened the solution Explorer markets, restoring pick ages. All right, so now. Well, let's look at the dependencies and it's open it as you can see in a SP dignity. Five. They are supporting power on the note package manager Okay as well as the new get, which is really, really helpful things because there is a lot off, let's say packages available power and we would like to use them so understood that going on and say they're loading them manually and adding reference, CTC power can save us a lot of times. So let's go to power. Let's sit right to click. OK, you can choose from the top writing and manage power packages, so let's choose that. Okay, lets the truce of prose okay now from pros, types of following its type poorly, much. And as you can see, this is pulling more packet. I'm going to hit install so it get installed and, as you can see in storing pulumur completed now what also we want. We're going to need Pulumur elements so we can reference the Google chart abs in the next election. So let's go to the polymer element. Let's sit in a store and sweet for return. Stoning. All right, on. Also this husband installed and storing Powerball polymer elements completed. So it just opens the solution Explorer, this open pearler. And as you can see, we have Polly more. We have polymer elements. So it's me close that, you know, to use problem are inside our application. Okay, We're going to need to add references for some fights. OK, let's go to the views on this. Go to the shared. Okay. Now, from the share the truth really out. So now here in the layout. What we are going to do we are going to add a reference to our holy martyr, touched them and and also component to tears. Okay, To do so, it's a link on the relationship will be tight import. Okay. And the high brief for that okay, will be Let's go to definitively rule. Let's go to live. Let's go toe polymer on a stake. Baltimore Stammel. So this is the first thing the polymer extreme. Also, you are going to need that script for legacy browser. So we're going to need script. The source will be slash beautifully road slash live slash work components gs and choose the component. Yes, fine. So we've added these now Let me give you. Just remove the definitively. What? I've just used them. So I go to them quickly. Just remove it. Don't worry, it will work. Well, when we were on the project will be led in the ability Billy Road folder. So we don't need that, are just that so we can quickly go quickly. So that's it? Pretty much. This is how you add the reference to the polymer files inside their layout bit or whatever paid you like. So I hope you enjoy this list. 4. Working with Polymer Elements: Hello and welcome to this lecture. In this desk, sir, we see how we will work with different. It's a ready made polymer element. So go to the polymer project that work and go to the element. Now, as you can see, or we've seen that in the previous lectures. Let's go to the Gogel Components. Okay, stick. All right. So way are going to let me show with We're going to create some charts like this. Like this fight chart in our pages. Let's go back to the difference document. Okay, Now, from here on, going toe, Kobe the code right here. Okay. Just place it in in my index. Don't see a system and a bitch. Okay, now let's first it. OK, now let's first start it for you. Now it's not going to show us anything, Okay? But I'm running it for a reason. So just to please bear with me, and as you can see, it's IMF. You okay? But why? Why is it empty? We added the correct references toe the polymer, right? We did, But we did not add the difference for the template for the Google chart. Okay, that's like chilling. What showing an empty bit. So this is still visual studio. So you want Let's at the charts. Okay. Noting your fears, I assure you, Let's go to the project Practically. And it the manage power linkages. Okay, we're going todo toe restore the google. So browse evidence told them. So just go ogle dash, chart a Z you can see up. You just sit right here in the store and they get installed. So it's just install. Okay, stolen this conflict. So that's what closer. Now, go to the solution. Explorer on. As you can see from the negatively wrote from, it's often the shop. Okay, we are going to move to do what we are going to need to reference that salmon right here. Okay, so let's do that Me, cookie. This okay? On its just w what? So many things first. And as you can see, this is a sample for all we need. And I also the difference for the CSS file. Okay, so not only that, I'm gonna hit Ah, I'm going to add also yes, us just there with me. And if I did this with me, please Short on. As you can see, the Google short CSS. So we've added these and again believes that the beautiful you wrote on its sift. So now what we have here we have edited where Frances for the HTML polymer template for the Google shot and also the CSS. Let's go back here and just on a Z, you can see this is the church. Let me go to its scored on a very easy sold it me at a month. Okay, so let's go here may be that okay, it's April and it's 30 days. It sits it on, drawn it and see what we will get. And as you can see now, we have four months, April and it's also speak percentage on the different months with their different percentage. So this is pretty much what you have to do to add any polymer elements. I will also work with you now toe, add them up. So let's go toe them. There are different ways to add it. I'm going to take this. It's it's a style. Before we add the let's make sure that we installed It's fair were back. It's right here. So let's it again, right click manage power packages. So let's make sure that we have Google Maps Power package installed. So let me look for Google Maps Package to see. Ah, no action in for that. It should be this one. Go Gilma So the sit in a stone, Steve it sometimes it installed Does it conceal? Still resolving dependencies on. Then stooling is complete now. So it's a closed that faced based the court for it. Right here. You can see already scored to the layout. And from here from the yards Let's me do the following Actually take Take this the trick. Let's look for a girl Naps map as you can see So I'm going to take Google map That stem else I've had it in the way out I've had is the general court. So I'm gonna hit Ron Yep A So you can see this is them up on its pointing toe San Francisco So I hope you enjoyed the scores and find it very well for you. Thank you for watching and joining. Please check out the pornos lecture 5. Creating a Custom Element: hello and would come to this lecture in this lecture, we will see how we can create our own custom element in polymer. So to do so, we'll go to our project and go to the definitively Root folder on dramatically and add a new folder. Okay, let's score that Bullimore. Okay, now let's at an HTML file inside that polymer folder. This is an outstanding bit. I'm gonna call it Tell you, Dash Ward. Now, let's be clear everything inside there No Fisting fist, we are going to need to add a reference or an import to the problem are at HTML. So do write this This right wing three. Nice import on this. Give it highbrow drift on, Steve It okay? And now this is what we need. Face. We added it or we imported the problem are the Testerman five now the structure off the xdm and for the component is as the following you're going to need to add a dome, dome the small Close it. Okay? No, it's going to need an attribute off. I d All right now inside this, we're going to need to write the name off the mood you're in on notice with me that we need to add Ah, hyphen. So ah, bottom are identified. This model now inside the door module what we are going to need we are going to need to add a style. Actually, style is not nearly necessarily but we're going to need to add template. So now inside here in the template we will add the following this It's one I'm going to say hello now outside of the door model, we are going to need a script. No, this is scripted. Must talkto polymer and register this element. So we are going to need to write poorly Mark As you can see on let's there parent disease on a bracket I put the cynical and enough What we are going to need just is on the name off our modern So it will be cool. That's it. This is pretty much what we going to need, toe. It's all right now inside our index that that's Zamel. We are going to need to import the whole award flight. So let me just could be this first. All right, now inside Here Let me just leave it The correct birth. It's not Lift it will be Baltimore on it will be an award that Stermer, you know, world on what we just need. We're just going to need to write panel. That's it. So now let's run it and see the outward Ondas. You can see this is our whole award to make sure. Is it? It is. Let me just go to the style on right here. I'm going to write an H one. I'm going to say it's color will be it. So that's it. That let's go back here under first of it. And as you can see, it's became that. Now this is pretty much nice and cool. But what if I want to pass data to our model on show? Try t like I want a boy passed my name and show it right here in NH one. So let me go back here. All what you need to do is just school here in the script, all right, but a coma and then start typing pro parties. No city, full bar. He's all right. No, actually, it's company dots on the's. All right. No, I want Tobe s the first name. This if iss I am now you can do. What if you see this and you can make it a capital. So you have in the ex chairman Tobe sa hyphen. If you do a cam in case you have to do a hyphen in your a shovel, But I'm going to just leave it like this first name. I'm going to say it's stuff is just string just all right. We have a visit soon. Right here. Okay. Before I go here. Now you see here I want to put my name into the H one. So let me just for thes on a what I have to die is justice on Let's go to the index now, here in the index. Just best that tribute. So let's say first name on, I'm going to say, mind you, this may go back to our bed and refresh it. And as you can see, this is the name we best to this function or two this morning. Okay. I hope you enjoy this sector. Thank you for watching 6. Data Binding: Hello and welcome to this lecture. In this lecture, we will discuss how we can do a real time data binding with polymer. So we have our hair, our property first name. What we want to do is to add itics spokes and make the data binding off this first name real time. So let's go to the template now. Inside the template lets at and in politics, books or a nimble text. Okay, now inside the value. Let's do the following two brackets on. Let's say first, name two dots in both. Now let's see that. Let's go to the index's Stammel and run our project. All right. Now, let's just start been some data inside that, and, as you can see, assume a soon as we type in anything it will shown right here. So I hope you enjoy this lecture. Thank you for watching 7. Iterating data: hello and would come to this laughter. And this lecture will see how we can me Baltimore patriot over data. Okay, so let me just show you what we are going to do inside here. The template with movies, the school. We're gonna create this stable. This statement will show the EMP uranium at the employer email. And also, we will it create right here and show different employees email and also names. So what, we are going to rule me face through on this? So this is what we want to show, but as a dynamic way instead off it's just a timing. So much damage. So let me go back here. No, no, Mr This one. Let's go to our actually Emel Beach. So first thing first, we are going to need to go here inside the polymer script. Anti Brady is like the JavaScript three d function that will could get cold. First thing first when it when the document will be loaded. So this at a function and inside that function that just let's hear a coma inside the function. We want to create an every off employees. So I'm going to say this. Employees also we are going to need this. This that's all right. So this right here, But more so what we are going to need we are going to write on influence. Am Okay, Let me just give it my name. This one and we got going to need It's a male. So influence. Amy, let's me do what? Here. So we have these data with me just create more include years. Let's place a former That's a This one is David. Uh, let's say David, you know, So we have these three employees one show them their data and make it render right here in the stair. Multi. But one, we'll just say we don't want to do it manually. Want to make the polymer itself iterated over these data? Enjoy. So let's go here to the table. This is the hitter, so we don't want to touch you filament. So we have here a template. All right, let's expend it. Missed me. Take this. Tr No, this is what we need toe till this is an element we would like you to create with the data we placed inside the ready function. So template on, let's add in is OK and it's a dawn hyphen. Three beat. So this is what we need. Now we need to tell it. What are they all from where we want you to take the later so it's still it. Two take it seems fair story. It's still to take it from this area employees area. All right, so we did this with me. Fear strains for you and show you something. We placed a three employees inside that every So let's see right here what we will see as an output. All right. As you can see, it say's or is shown us three employees. But if you look right here, it repeated. The same data did not show us the dynamic data were placed inside there. So let's go back Individualistic Dio right here. Let's make it dynamic. Andi, show us the data inside this every. So let's go first here. So to make it at the rate over the area and chose the data, this is what we are going to do. We are going to need to clearly brackets and say I m don't him. No, you knew him. Let's go be that suppressants right here on. Let's say employees E meal. Let me just give you a hint. I added a class off table, stripes or the table look much neater. So let's go back to our page on this earth for if it Ondas you can see the polymer iterated over that JavaScript area and it shown us thes data dynamically. So I hope you enjoy this lecture. Thank you for watching.