 Welcome to the network engineering video blog. I am your host Michael Crane. Okay, so in this video we're going to Be adding a link between Our routers, so if you remember in the previous video I Showed you how to add these routers are actually WPF controls in the code but we have a Routers, but the one thing we didn't have was we weren't able to create a link and In this video, we're going to do that. We're going to add our link in between Our routers and you would think that'd be pretty simple adding a link between this. It's just a matter of drawing a line between these two nodes right here these two routers, but If you think about it first you have to tell WPF Which two points you want to draw a line to the start and end point right and you also have to You know and that means finding the coordinates of the routers and and that sort of stuff Let's just go ahead and add a link. We'll take a look at it. All right, so we're going to add a link You're going to go from router zero to router one. All right, and there it is All right, don't think I didn't implement the editor delete yet. No Another thing so and that's that's fine and Danny looks pretty good, right? But another thing is is you want the link to be able to follow the route around If you move it Right, and I know it's not any kind of a real-time graphics animation, but but it's a star, right? And and especially if this got a bunch of links on it. You probably don't want to try updating all the links In real time that's probably be kind of CPU intensive, but I don't know. Well, we'll give it a shot later That'll be in a future video But anyway, so this is what we're going to do today is we're going to add our our router link Okay, okay, we're to start That's a good question So let's look at the go I'm gonna go ahead and fire up the GUI so we can look at it real quick okay, so In the past at previous video, we're able to draw these two routers and When we drew a link it just kind of popped up a line over here in the corner and now Now we can add a link between our two routers. So, you know what I had to do to create this is I created a class called link dot XAML and go take a look at that and Move him off to the side over here All right, and that this this File wasn't in this in the last video, so this is no there's nothing to dip it with in other words and and this is The way you create any other user controlled like I showed you in last video I did change the default layout from grid to canvas and I'm just drawing a line and And and that's it's a shapes object. You can see a system windows shapes line and I named it and I I Stroke it and gave it a thickness and and gave it coordinates. This is X1 Y1 is your left side coordinate if you will and X2 Y2 or your Right side coordinates. It doesn't have to be that way. It's just the way I have it set up And then I added a context menu. So when you right-click on The line like I showed earlier or on the link I should say You get the menu, right? And Yes, you have to be real good about pointing to right-click on that line We might have to fix that later, but that's in the future. So anyway, this is the the new file and And that for the link and I don't think I oh, yeah, I did add some code Some code behind whatever you want to call it some implementation code I Added a couple or four public properties It just basically says what type of link it is right now is just set to link It's got an index that I give it to keep track of it and it's got originating node and terminating node and I just call them node a and no b and this is just a standard Constructor right there and it's nothing special. Here's the Constructure where you just pat this is the one we're gonna use mainly. Yeah, you just say, you know new Line with our new link with A and B nodes, right? And you notice everything's generic. There's a reason the reason I'm doing that is, you know, what we don't want to make a link class for every Router and man switch there is in a network. We would be a mess So we need to make a base or a parent node object that has you know basic stuff And so anyway, I'm keeping everything generic And then it draws a link Okay, and then I put a little comment in here what it's doing is first is gonna get the location of each node It's actually in the router This this function right here is actually in the router class We'll get to that later. And then what he's gonna do is he's going to update This he's canvas Coordinates, let's see. Where is it? linkxml Yeah, I'm sorry the line coordinates on the canvas and he's gonna just update x1 x2 y1 and y2 with the The coordinates passed back to him from get location, right? and He's just gonna dump out the What he's done you can kind of see that right here Okay Okay, so since we're looking at file new files that we added. Let's let's go ahead and The other the other thing we had to add was this this link editor class and This is that menu that you saw when I was adding the link and Let's see we can look at the The code behind And this is just an oh by the way. Yeah, so this is this is not a control. This is actually a separate window okay, and This this actually I'd just scratch my head with this one for a while cuz I was like well Let's see, you know do you you come in here and you do you? You know, I'm kind of like so you do an ad and the new item and You want to do WPF and you know our goal is to do WPF all the time So you got you know, you have a window or page or use control or some of this other stuff And I was like well gosh, you know, I I just want a menu And I want to pop up dialogue Box right and you know, so there's no dialogue box in here, right? And I believe windows forms. Yeah, so so you used to have a dialogue box All right, and and that's not there anymore. So I was kind of scratching my head gone. Well so if we go over here to Windows forms and controls equivalent, right? Now I was like, okay, so what's the equivalent for a dialogue box and As you can see There's there's doesn't even list it. So that was kind of not very helpful So I I did some poking around and and I found That's right here. So this is in the windows presentation foundation application development and It's like basically how do you do a dialogue box in WPF so So you can you can read this all if I remember I'll put the link for this up and Under the video and the notes, but you can just Google dialogue boxes for WPF and probably you'll find this immediately. So anyway, I just followed this right here and and and I went People that do windows forms programming every day might Might be yelling at me. Well, this is pretty simple. I I didn't remember it It's been years since I've done any forms programming. But anyway, um The goal is with a dialogue box Let me start this As you probably know is Is you want it to basically? oops See, oh, that's actually a perfect example. You see how they It won't let me do anything until I finish adding This link and so it locks it up and and this way if I if I actually kill this program It will kill this dialogue box and and usually with a when you're creating a window This is a this is a root object It actually is a separate program. You can spawn a completely separate program that way if I killed the Mogwai You know canvas or main form this thing would still be running and and I didn't want that so so the key to Making the main program wait is you make the main program The owner let me see if I can find it down here in this example. It might be easier just to show you In the code. Yeah, here it is right here. So it says dialogue owner equals me so in the main window right here So this is add link. Okay, so you can see that I Constantiate a link editor object right from the link editor class and then I assign the link editor to basically the main window right and Then I just show the dialogue And then I wait for the the return value. All right, so Oh Gosh, I don't know should I go ahead and finish looking at we can looking at look at this real quick We'll come back to this All right, so we're we're at the link editor. So So we pull up this dialogue and and this is the XML for it. It is a window, right? but it is being pulled up from the main window as a dialogue box which Which gives it a dependency on the main window. So anyway, we can look at the this is the layout of it It's it's pretty simple. It just just a box. It has a couple list boxes it looks list box in it and Okay, and cancel button and the code behind for that is is that pretty simple it? it populates the The list items with the node names that's what you saw earlier when it said router 1 router 2 and I'll show you where this collection nodes is at here in a minute and The cancel doesn't really do anything. It just says a dialogue sets a dialogue result defaults. All right this okay It first it checks to see if it's valid. There's a function down here It verifies is that that you have selected two endpoints and here's the Message box that it pulls up saying you must collect two Endpoints and it's it and so it returns false or true and it says if it's not valid Then just return or if it's valid then it comes down and dumps this Debug message and says the dialogue result to true. Right. So the last file we added was this module globals and And this is a dumping ground for me to put Stuff that I want all classes to have access to and so I just call it a globals mod globals and you can't call it globals because There's already a class called globals and visual basic so I'll look at this guy real quick and There's just two things in them. It's both my collections. It's a collection for nodes and a collection for links And you can see this is generic and that's on purpose for in the future when we make a Apparent class for our Cisco routers and switches and stuff like that They'll basically be Categorized as a node So right Okay, that was very interesting. Let's see what else So, okay, so that's all the files that That we added all the new files Let's go look at the files. They change We'll just start from the top here. Cisco router node Window on the left here is the original Window on the right or that is the new new one or the changes And we'll just go down and look at them real quick. It's kind of like doing a code review if you've ever done Okay so you can see I Did a little reformatting of the use of the of this little bit to make it easier for me to read I did add this this mouse mouse up Subroutine and in the code behind and I also added this canvas left in canvas top and And I'll show you that here in a in a second Well, I might show it to you now because I think that's all the changes in the in the XAML file so yeah, so let's go look at the The code bind for it Okay, there's a boatload of changes in this one so we'll just Wow, I guess we'll just start from the top and work our way down so Here's the the old class that mouse location porn origin and translation point I have changed this and I'm no longer using translate transforms. I'll show you that here in a minute. I Did add a couple public properties in This class right here one is to tell it. It's a router and that's Also thinking ahead towards the future when So when I create a Cisco router node in the future, it's gonna pull up a generic node You know, it's gonna inherit The properties from the generic node So we'll have to know what type of node it is and it's gonna be a router Index is just to keep track of it on the canvas Well, these just got moved around a little bit. Here's mouse location and point origin I didn't think I added those they just got moved around a little bit And I also added this Boolean is moved and we'll look at why that's there In a minute. I did I just commented out This Transpoint is translate transform. I let that in there So and if people want to use that instead of the new way I did it they all they have to do is comment it out and comment The new stuff I put in here out Okay, hope that makes sense Now I added a initialization to point origin Yeah, it looks like I just removed this this copy constructor here because I don't know we can add it back later. I guess I guess if you wanted to you could probably work. Okay, I Mean it what is for is if you go like add router, right? You got this router you right click on it You can say copy right, and it just It could copy everything in here and make a duplicate of itself And I guess that might be okay if it initializes a whole bunch of other Other properties inside there in the future, but we'll add that back in the future if we need it I I just removed it for right now I Did add this new function that I showed you earlier this get location. I Basically just let's get let's get back to this. I'll show you this in a second Let's see. We'll keep going down Send command see Oh, I added a delete node Or I worked on the delete node. I I don't think it works Gosh, I actually don't remember. I don't think it does This Delete nope no, it doesn't work and the reason why is I'm gonna have to I Believe they call it bubble up an event to the main window to tell it to remove it from The main window and yeah, we'll go over this when we we do that that'll we'll have to Do it another video on on bubbling up events up and down the The tree I forget what it's called Okay, so I Commented out all this translate transform stuff. So if you remember in In the previous video. I told you it took me a long time to figure out how to do How to move this this router around right? I was or this note around drag it around and in different parts of the canvas the problem came when I was trying to do this this get Location thing and as you can see I started doing some code and and mucking around with it a little bit and And so this kind of sent me poking around and you know, I started to put this together and this would probably work You know, this is what I kind of figured out right I was like But I really didn't like it when I was doing this originally which got me to writing this this Translate transfer translate transform code in the first place was let me see if I can find it here is So you go to Router All right click on this guy. So you go to layout. Oh, okay, so it's already said so to see this top Left, okay, so it says gets or sets of a there represents a distance between left side of an element and left side of his parent canvas And I had actually looked at that Originally, but let's look at let's look at the link I don't think I've initialized that. Yeah, let's go look it. I don't know if this is gonna be the same or not Yeah, yeah, see here we go. So And I was originally looking at this it had it had these things set to auto and I'm like What does that mean? And so I assumed that it was automatically being updated from somewhere And and that's what sent me down the path of doing this these this translate Transform stuff. Yeah, so that's what sent me down the path of doing this this translate Transform and and I left all that original code in here because like I said it would probably it would work He could make it work, but I didn't like having to to get the middle of it You actually had to call this render transform operation create a point using the the XY coordinates and then then you had to go through and then You know calculate the middle and all this other fun stuff and it was just it just was ugly I didn't like it. I was like, yeah, this doesn't look right and as I was when I was trying to figure out how to get the the center of my node without using the width and height or the The the height in the in the left, which is basically the top left corner, which is 0 0 or xy I ran across Someone saying well, yeah, you just got to initialize the the top left to Whatever value you want and then that auto thing just goes away. I'm not sure what auto does I I've yet to figure that out. So yeah, so when I I put that in the xaml And I just initialize it to 1010 So I just kind of moves it off the corner of the canvas a little bit and then when I want to move I say You know canvas You know get the left left and top and calculate the middle point Let's go back into our diff here So yeah, so I just commented out all this translate transform stuff. It's basically the same if you look at it I just set the the top left to the difference of the mouse location minus the point origin Which is exactly what I did here and I also set this is move Boolean And we'll get to that here in a second and then yeah So this last part is a new sub routine It's called on the mouse up event and it we can you can just read this as if the node has been moved We need to redraw the links right and we're gonna have clean this up This I just threw this in there real quick, you know, it says if moved if is moved equals true basically And just redraws all the links in the collection of links. Which is not a problem if you only have One or two links, but you know you start getting a bunch of links and that could be You know I could take some time so this needs to be cleaned up But we'll make it more efficient in the future. So Last thing is a main window shouldn't be too many changes in here That's the only thing I changed as I added this comment And let's see. Are we done with our I Think that's that was only diff in there. So let's go look at the code behind Oh, I did add some code in here. Okay So when I do this canvas children add which is the same as right here in the old code It actually returns the index value on the canvas and it's unique so So I just used it as the The node index so I can keep track of it and also used it in the name of the router. I Just called it router underscore index number So I give the router a unique name and I don't know did we look at that property in the router node? I Don't remember Yeah, um, oh, no, that's right cuz name is actually a built-in Property for a control. So I'll just type it in here somewhere. So we do You see control oops you see Node dot Okay, so this is the user can you see stands for user control Then you come down here and who were Name name name name. Here we go name Yeah, so it's built into the ah, that's what I was looking for framework element And it's just identifying element for this user control, right? Well, let's see here Back to what we were doing So, yeah, so I'm just giving it a name I display the name of the router and the ad in the link editor this z-index right here is I should have kept that thing running So this z-index right here Let's see a next right here. That's um, when I first added this link right it was It was actually on top of the router and the reason why is because you have to provision the routers or add the routers before You you add the link right because otherwise it won't know where to draw the link to and if I move this So you can see now the router is on top of that that line that line actually is drawn all the way to the middle of the router here and That's that's a z-index. It's just it's just moving the router node to the top of the pile so to speak So that it's just going to put it on top of the the link which has a z-index of zero which is default All right, and then I add the router there are new router that we instantiated right here to the collection and And I am searching I searched through the if I need to get the router's name or find the router I just I use the name of the router right Okay, and that's a searchable key in the collection Debug statement and Yep added more debug stuff Okay, so there's a bunch of changes in the ad link. Yeah, so this is what I was saying earlier So originally I was just from the main window. I was just kind of drawing drawing this line real quick But you know, that's not really in the true model view controller Architecture anyway, so yeah, so to keep with the the spirit of the WPF and the MVC Model I took this out and I created the the the link class that I showed earlier Sorry, I removed this old code and added this and we can look at it real quick. It's just got a local variable index Here's our new link editor that I showed you earlier and I set the owner to the main window. I Did a show dialogue And it says if not dialogue editor dialogue result then return If it read if the dialogue result is false. So if we come from the link editor Let me where's the code behind here if you hit cancel you get the dialogue result is false or I Guess that's it Because it's not valid. It's gonna just return the user back to the dialogue So yeah, so if you hit cancel or if you x out actually x out is the same thing as cancel So anyway, if he gets Yeah, so what he's saying if if the dialogue result from the link editor is false Then then just skip all this other code because there's nothing to do, right? Okay, but if it returns true then he's gonna continue on he's gonna go get the a node the be low node from the selected items and the link editor gooey and Then he's and this is just getting the names, right and then he's going to go get the objects By the name so he's gonna go get both the nodes He's just gonna create a new link and pass in the and B node Which we looked at earlier in the link class, right? And he's gonna put that new link on the canvas store that index value And he's gonna give it a name Our link index property. I mean in the name, okay? And then he's gonna add the link to his collection and pass the name in as it's searchable key Well that My friends is it? I hope all this is making sense, and I'm not going too fast I know I kind of bounce all over But anyway, if you have any questions or comments, I'll leave them in the the comments under the video I'll try to answer them the best I can. I hope you liked this video If you do give it a big thumbs up that helps and hit the subscribe button. That really helps And I'll see you next time