 Welcome to the Network Engineering video blog. I am your host, Michael Crane. In this video, we need to add all the changes we've been making to the Cisco Router node class to the other node classes. The quick way to do this is to copy and paste the code, but that would result in a lot of code duplication, which is a bad thing. So we need to do some code refactoring and add a class node base class that has all the similar properties, methods, events, and fields defined in it, from which the derived classes can inherit and extend. We also have to make changes to the xAML user control to support the new code behind for the base class changes. So let's get started. OK, so first let's look at the original Cisco Router node class and look at the functionality we need to implement in the Cisco switch node class and the Xena test node classes. We just basically, we just need to copy the code from this class right here to the switch node class, sorry, the VB class, and the test node class. And if you remember, we've been following along with the previous videos, we added basically as just the drag and drop functionality, which was quite a pain to get going. So it had some mouse events, there was like three different mouse events associated with that, and these are going to be the same for all the nodes. It's using, we're just moving around a rectangle for all three nodes. So this UC, where is it? Sorry, for jumping all around. Yeah, so this UC node will be the same. It's just the rectangle and the XAML, we'll look at that here in a minute. And this other stuff right here is just more duplicate code that needs to be just copied over. So like that each node is going to have a node type, a node index, and each node is going to have this point origin. And I think I just deleted this stuff out. Well, we'll look at that. Oh yeah, you can see it over here. We'll look at the changes here in a sec. Okay, so we just need to add the get location functionality and the edit node, delete node, and the events that I just talked about. All right. I mean, like I said, I could just copy and paste it, but duplication of code is not a good thing. So what I did is I created a class node base class. All right. And as you can see there, it's not diffing it because it's a brand new file. You can see add right here. So it's just going to add it to our repository. And this basically has all the code that was highlighted in red copied over to it. Yeah, so here's the two, the node type and the node index. Yeah, this is an abstract class. An abstract class means it needs to be inherited. And originally I put must inherit up here, but I was having problems with that. It kept telling, it kept giving me an error about the property, the name property in the XML. And I don't remember what the error was. I just moved on. And just to let you know, it took me quite a few hours to get this working because I'm not real familiar with the WPF coding. And I wasn't really sure how to implement this inheritance. And by the way, in case you're wondering, I was following along this little document right here, the inheritance basics and visual basic. And it's an over. OK, little article, must inherit. That's what I was trying to add. And this wasn't working. And here it talks about it being an abstract class. This is an abstract class for sure because this object right here is actually defined in the XML in the derived class. So this is the base class. This isn't the drive class. We have to, when we drive the class from this base class, we have to populate this variable right here, or it's just going to get an all pointer exception or whatever Microsoft compiler spits out. It's like a nothing or something. But yeah, so really, it should have that must inherit, but it wasn't working. So I took it out and it fixed it. Someone knows why. Let me know. I'd be interested. So the duplicate, so we just need to add this to all the different node types. Let's look at this class node real quick. Just copy those things over. This is just setting the point origin. The get location was copied over. The edit node, all this stuff should be very similar. If not, we can override it in the derived class. I don't think this edit and delete actually worked yet. But what's nice about this is when we do go to fix this, I just need to fix it in this one file. I don't have to go to each individual node and fix it. And I'm sure most of you understand the purpose behind a base class. Okay, and then all our events, right? And this is just removing the node object around. So yeah, so that's everything I put in this base class, which is basically all the red that I cut out of the original router node, the Cisco router node class that we've been working on, okay? Okay, so let's look at, so now let's look at what the new Cisco router node class is. And as you can see, it's pretty small. I just noticed something, this doesn't need to be in there at all. So yeah, let me go fix that real quick while we're looking at it. I just missed this, this is actually already in the base class. I'll close this guy, that's the class node. Yeah, so we'll double check, but yeah, so all that stuff's right here. Alrighty, so let's go into the router node code behind, and we'll just delete this guy out. Now it's even smaller. Yeah, so anyway, yeah, this is the new router node class. And then you can see right here, Cisco class router node just hasn't changed, but now it just inherits class node, which has all the functionality we deleted out of this file in it. Okay, so another thing we have to do is we have to populate the base class variable Dnode with our UC node object reference and our UC canvas object reference that is actually defined in our XAML. Right here, here's the UC canvas and here's the UC node. So when you're accessing it from the drive class, you can just use UC node and UC canvas because it's part of this Cisco router node object when it's instantiated, but the class node base class right here doesn't have access to it until you instantiate or derive the Cisco router node. Okay, when you're initializing a base class, usually just pass the parameters in when you instantiate the new drive node. So I wouldn't be here. Actually, it would be in the class node, you would say no and then Dnode and D canvas, right? And this isn't proper. You'd say, let's say by rough Dnode as object and the same thing for the D canvas, right? But in Visual Basic, that won't work because the only time you can initialize the base node class is right after this new statement. So if you try to go under this initialize component and say my base.new, you're gonna get an error and it'll tell you it's only valid as the first statement in an instance constructor. So in other words, it can only be up here. So if I wanted to pass this UC node variable and UC canvas into this, I could only do it up here. And the problem with that is they're not actually instantiated these two variables until you run this initialize component. So it's kind of a chicken and an egg thing. It kind of had me scratch my head for a bit, but so I just said, okay, fine. I just, what I did is I just passed them in after this initialize component just by saying my base.dnode equals me.uccanvas. And it's like passing in a pointer, I guess, right? It's a reference to these two objects that the base class is able to use, okay? I hope that kind of makes sense because this is important to populate these variables down here, otherwise this will not work. This inherits class node and passing these references to the base class. Those are the only additions to the Cisco router node class, all right? And actually that makes, we might as well look at the other ones while we're at it. So we'll look at the switch node and we've got to take this junk out. Yeah, as you can see, these classes are much smaller and if you're wondering what the purpose of this is, there's a couple of them. One, all the functionality that's similar to the nodes in one file. So I just need to edit one file to add new functionality to all our different nodes. In all the drive classes, this is where you add the custom functionality. We want the Xena test node code behind. Delete this out, save this, make sure it builds. Yep, and we're running it to make sure it works. Okay, so add a router, all right? That's good, add a switch, that's good. And we'll add a test set. There we go. Make sure we can add links to them all. So router to switch, add another link from switch to Xena, all right? Can we move them? Yes, we can. Okay, and that was just a quick test to make sure that change we made didn't harm anything. That was pretty sure it wasn't gonna break anything but in ever now, right? Okay, so we already looked at the class node base class. Okay, so I had to make some changes to the XAML code as well to support this new base class. And one of the things I should show you in this base class is, so this base class is, okay, this is its name, but it's inheriting the user control, right? If we look at the code behind, yeah, so this is its name and it's inheriting class node which class node is, of course, inheriting user control. So let's go take a look at our XAML. Maybe this diff would be good here. So let's go back here, XAML. So as you can see, yeah, so it was used control but now it's a class node. We had to define it as it's a local class here. So now we've defined a local class node as the derived user control class. I hope that makes sense. I hope I'm not confusing everyone. Let's see, what else has changed in here? This right here, I just deleted it out. For some reason, Visual Studio keeps popping just unused junk in there, so I just deleted it. So one of the things that you should know that I ran into is you can't really, or at least I didn't see a way to inherit the XAML code. So in other words, I couldn't really create a base class XAML file and inherit it into another XAML file. And I kind of did some rating on this and I think I'm correct. If someone knows different, then they can let me know. These XAML files, at least the way I'm using them are specific for the drive node objects look and feel. So it has the height and width is gonna be different between the router node and the switch node and the test node. And I changed some of the margins around. I mean, there is a lot of duplicate, like all this stuff is duplicated right here and I guess it would be nice to put in a base class type file, but I don't think Visual Studio supports it. Like I said, if someone knows, they can let us all know, right? So yeah, I was just messing around with the height and width these guys. That has not a lot to do with their base class. And right here, I just instead of having one long string, I just kind of stacked it right here to make it. I also changed the alignment to center for the text to line it up in the center of our rectangle, right? And that's about it. So basically the biggest change was this user control to our new class node class in the xAML. Okay, and we can take a real quick look at some of the other xAML files, but they're all pretty much gonna be identical. See, right, see these guys right here didn't have any of that code that was in the router xAML that we've been working on. So this was a big copy and paste. Because the code is duplicated in these xAML files for sure. But the image source is a switch, whereas in the router, it's a router. And of course, the margins are different, foregrounds change. So there's some changes, this is customizable or this is being customized. So it makes sense, at least to me, that these files are only related to the drive nodes and not the base node. And let's go look at our test node, but it's gonna be pretty much the same. It's, I did leave this drop shadow effect in there. So that's different from the Cisco nodes. And of course, the different images, different margins and the text color is different. If I they call it foreground, I don't know. I don't know why they just don't put text color or something instead of foreground. But anyway, I digress. Okay, so let's go to the main window and this is gonna be very interesting. This is another copy and paste. So I didn't remove this code right here and re-added. What happened is, is I just, I made this guy a capital R on the router instead of a lowercase R on the router. I did it because I thought it looked better, right? So basically I just copied all this code right here. Actually the code from here down or from here to here, I just copied that and pasted it in the switch and in the test set. And I didn't do anything to link code down here. And oh, you can see it right here where I pasted it. I also made all the Zenas capitalized. That's why you're seeing changes right here. Otherwise there wouldn't be any changes there at all. And what started me on this path was the switch right here. Switch is a keyword in Visual Studio. It's probably switching a variable, right? And I was basically overriding it with this local variable. And I thought, this is gonna cause problems. One thing I kept capitalizing, switch because it was capitalized. I didn't look at it, but I'm guessing at it. Anyway, I just changed it to e-switch because it is an ethernet switch, right? And that, my friends, is it. I can't think of anything else. Don't forget, you can support the Network Engineering video blog by donation using a credit card and PayPal or by purchasing products at the Moxall store. Details and links are in the description under this video. Well, that's it for this video. If you liked the video, give it a big thumbs up. That helps and hit the subscribe button. That really helps. If you have any questions or comments, post them in the comments under this video. Thanks for watching and I'll see you next time.