[00:00] Component layout is a really important concept on components. Basically, it dictates how a components going to resize on the new resolution for a client. As you can see here, I have a client open, and it's a particular size right now. You can open up a client on any resolution that's out there. So you're not developing for a specific resolution like a 1,024 x 768. You can open up a client on anything. And as the client gets smaller and larger, the components will automatically resize for you, based on the layout that you choose for that component. So then design it on a per component basis, you can right click and you can set the layout. And there are two options: There is relative and anchor. Relative is the default mode and it's based on a ratio of the component size to the size of the window. And we're going to maintain that ratio at all times. So that as the window gets larger, you want the component to get larger at the same ratio. There's also a setting down here for relative to maintain the aspect ratio of the component. Which is going to guarantee if a component is 100 pixels by 100 pixels or 1 to 1, that no matter what the client size is, that component's going to be 1 to 1 so it never looks skewed. And that's what we have here for all the components on this window. They're all set to relative, and to maintain the aspect ratio, that's what we're seeing here in the client. As I make the client bigger and smaller, you can see the components resize. If I just change the width of the client and not the hight, the aspect ratio of the component is not changing. So all we now how to do is keep it that size and we're going to center it on the window here. And there's a setting for that on the relative to either center it, go the the left edge, or the right edge if you're going to maintain the aspect ratio. So since relative is based on a ratio of the component size to the size of the window. You know if the window is quite large there's a lot of dead space. We're going to take that into consideration. So typically what you want to do is make sure that that dead space is gone. So if I kind of nudge up the window to the edge of the components, I go up here and save, essentially now the ratio is different than what is was before in the designer that I saved. So I'm going to go ahead and make my client larger. So as you can see here, the components are a certain size, after update, you're going to see them get a lot larger because that ratio is different. But they're still maintaining the aspect ratio. So second thing we can do on these components is we can select all of them, we can right click and go Layout, and I an set it to relative, but this time let's uncheck the Maintain Aspect Ratio. Essentially allowing the components to skew a little bit. I'm going to go ahead and save that and go to the client. As update, you're going to see all of my components are going to fill up the screen a little bit more and they're going to be a little bit skewed sometimes. Like the tank here is a bit wider, and so is my motor. So as you see as I make it really thin, they're going to get thinner. So basically, we can still scale them relatively, but we can choose whether or not we want to skew it based on that maintained aspect ratio. The second, manager that we have for a component is called Anchored. Anchored allows us to anchor a component to various sides of the window. So if I just want to anchor it to top left, essentially, I'm going to keep it at the distance between the left edge of the window and the left edge of the component, and the top edge of the component to the top edge of the window. We're going to maintain that distance at all times. Effectively, we're going to keep it in the same position and it's never going to resize. If I go ahead and press Okay and save this, you're going to see in my run time, all the components are going to stay up in the left edge and no matter what I make the size of the client, they are not changing here at all. And we could do the same thing by maybe going anchor top right. So now they're going to stay in the top right of the component, of the window. I save that, and go back to the run time update. You see that they're in the top right, so as I make the window bigger and smaller, they're just going to be anchored to the top right of the window. So certainly we can anchor them to more than just two sides, and that will actually allow them to resize. So say for example, I want to take this tank here and anchor the tank by itself to the top left and right. Essentially it's going to stay to the top left, but only the width will change here. So as the window gets larger, we're going to make that component wider. Now go ahead and save this. Open go to my, open go back to my run time update, you're going to see my tank is up here, and it's just simply going to fill in that space. So as I make it bigger and smaller, you're going to see it's going to just change in the width. The hight will never change here on the component. If I want to, of course, I can anchor it to all four sides. If I go all four sides, now it's going to change both in width and in hight. But again it's going to maintain the distances around the component to the edges of the window. So go ahead and save this, you're going to see that now it's going to get taller as well. As I, you know, make it smaller and bigger, you're going to see that width of that tank change. So there are two different layout managers you can use for components. There's relative and there's anchored. Typically you want to use relative for any P&ID Diagrams, and you'll want to use anchored for things that have forms or tables on screens where you want them to kind of fill up the entire screen there and choose where you want to anchor it.