[00:00] Welcome back. We now have our environment set up, but before we can really dig in and start building this project, we should probably cover a couple of basics. Things like certain terms and certain workflows, just so you're familiar with how they work in perspective. So in our designer here and I'm actually going to be for this entire series, I'm going to be focusing on this perspective section that's in the project browser, as well as the content within there. I'm not really going to be going to the other areas of the designer. And the first thing you should really be aware of is what a view is. Now you can see under perspective here. If you haven't expanded this little item, go right ahead and do so by clicking the, little arrow icon there and we have these sort of built in folders here. Now, one of them is called views. So all of your views are going to be placed in here. Now, a view is effectively a configuration that has a whole bunch of components inside of it.

[00:59] Now views are really going to make up large portions of what your users see in the run time. So let's look at one by creating one. So I'm actually going to right click on views and click on the new view. Now alternatively, you probably see this. There is a create new view button in the upper right-hand corner of this main workspace here. Either one of these methods do the same thing they both call the new view dialogue which looks something like this. So I'm going to change the name here, this will be my view and we get to select a route container type. Now I'm going to click the little down here to show you that there are a couple of options. We're going to start with a coordinate container just to kind of look at it just because it's a really simplistic container. Throughout the rest of the series though, we're actually going to be using flex containers quite a bit but we'll talk about those later on. And we'll also talk about breakpoint containers. Both of these two, the flex container and the break one break point container, they both very useful containers. And we'll see why later on, but for now we'll just leave the route container type with coordinates. And I'm actually going to uncheck the page URL property here.

[02:02] We'll talk more about what this does when we start talking about pages later on. So with those settings set, we'll go ahead and click the create view button. Alright so now you should see a screen that looks kind of like this. We can actually start placing things inside of our view here, though if we needed to go back to that first screen. If you look at the bottom of your designer here, you can see my view or your view is actually just a tab at the bottom and to the left of it. There's a little module icon for the perspective module. If you click on that, it takes you back to that first screen. So if you need to get back here, you know you just click that little button right there or that little tab down there, but let's go back to my view. So views are kind of special. I didn't say we were going to put components inside the view, although technically that's not correct. If you look in the project browser over here we can see my view, right. And that's currently selected and then it has one child and it's this thing called a route. So when we were creating the view, we got the choose the route container type.

[03:00] And that's what route is, route is the route to container. All of views always have one route container or one container that's as a child the basically act or is a child to the view. You'll only ever see a one direct child to a view. There won't be a case where you have a view with multiple children or more multiple route containers. Now technically the objects, the buttons, the labels the tables and charts, all the things that we're going to basically use to sort of visualize all of our data. Those always go into a container. They don't ever go directly into a view. So technically, when we're adding things they go into the container, not the view. If you are familiar with the vision module at all this is a very similar paradigm to how windows envision work, right. You don't put components in a window, windows have a container and you put components in there. And of course you can put containers inside of the route container. Containers are also additional components. So you can put a container inside of a container and then you know, a container inside of that.

[04:02] And that's a useful way to kind of group up different components. But speaking of creating things, let's go ahead and I'm actually going to, on the right hand side there's this perspective components, little item here if you just kind of hover over it or click on it it does pop out this extra little menu here. Yours probably starts off expanded. There are some expand and contract or I should say collapse buttons here that light to sort of see everything. There's a search part too but let's go ahead and add some components here. So I'm actually going to go to display and I don't know, maybe I'll grab a cylindrical tank. I'm just going to drag that onto this empty spot in our container here, and I'll create the component for us. So let's do that again but maybe this time I'll go to the component Peleton. And how about under symbols? I'll grab a pump. So drag the pump over and place that inside. And you'll notice that these components are now populating or they're being added to the project browser under the container that they've been added to. So we kind of see them there. And of course we can kind of click on them, which selects them, changes the selection and the project browser. And if you look at the property editor here, So if you still have your component pallet up and you can actually just minimize that.

[05:08] So these set of properties here, pertain to whatever object you have selected in this workspace, right. So if I click on the pump, we look at pump properties. If I click on the background that actually selects the container. So now we're looking at container properties and this does actually tie into our tag system. So if I go to my tag browser here, if I go to station one, I'm actually going to grab the pH tag. I'm just going to drag the pH tag to an empty spot here. I'll give you a little pop-up asking you which type of component you want to create. So how about another cylindrical tank? And there we are, it'll create a components and we'll actually do a little tag mining for us. That's something we'll see a little later on, but basically it creates a link between some properties on a components and another source of data. So in this case a tag. Now, you probably don't have an error, depending on how quickly you're watching these videos. I have an error here because I waited for my trial to expire. You'll also see that you have read numbers or I have read numbers here. That means I'm having some bad quality on my tags here. So if I hover over one of them, you can see that, Oh, the trial just expired.

[06:10] So later on in this video series if you start to get these little error overlays or you have red numbers on your tags, it's just because your trial expired. You saw me reset the trial a little bit earlier but I'm going to go ahead and bring my browser back over here. I'm going to reset the trial. Actually, I'm going to refresh the page first. All sign in, and now I'll reset the trial. And there we are. So if you run into that problem later on make sure your trial is running. Now, I'm actually going to get rid of this tank here. So I'll just go ahead and select it. I'll right click on it. I'll delete it. And I don't really need to look at my tags for right now but we can do that later on. We can drag from the tag browser. Okay, so when I'm moving these components, so if I select this container here or this tank here, you'll notice that it has some position properties, so these position properties basically, as you can probably figure it out, determine where the components should be placed within its parent container.

[07:10] So as I move this around here, you notice that the object that I'm dragging around here it does actually have the position, so it's got the height, the width, the X and the Y and you can see it kind of updates as I move it around. And even as I resize it, but you can see that those numbers are also changing in the property editor too. So these are coordinates based off of the container that the component is in. Now say, we wanted to add another container. We can do that. As I mentioned, containers are just components. So if we go back to our component pallet here, we do have a container section. So yeah, I could actually add another coordinate container. I can actually drag this over. We can move it around. We can resize it. You can see that it has its own coordinates in the parent container here too. So again, it's just for all intents and purposes, just another component. Now, one of the things you'll want to be aware of with perspective, is this concept of deep selection. So right now in the project browser, our route container has this little target icon. And if you hover your mouse on it, it'll tell you that, Oh, this component is currently deep selected.

[08:11] Well, what does that mean? What does deep selected mean? Well it basically means, it's basically a secondary selection mechanism but it's pretty useful in regards to knowing where you want to put a component. That means when you try to add a component the designing here is going to add the component to whatever container is deeply selected. And sometimes some components may have some additional functionality, when they're deeply selected. The way you deeply select the thing is, you actually can just select it and then double click on it. You'll notice how the rest of the designer kind of went gray. So that basically means, things inside of the thing you've been deeply selected are kind of what you're focusing on. Now you can see that the cylindrical tank now has this little icon next to it. For most components like our tank here, deeply selecting it doesn't really do a whole lot. Again, there's a special circumstances where you want a deeply select and usually containers are one of those circumstances. So if you want to drop deep selection, you can actually just click outside of the selection box there and it will go up, it'll change the deep selection up one level.

[09:13] So It'll go to basically the parent of wherever the component it was. But regardless, you can always kind of get an idea of what's deeply selected by looking in the project browser. Now it makes more sense to deeply select a container. So if I were to select my coordinate container so I can see where it is, if I double click on it here. So you notice now it's given me some dialogue here saying, Oh, I can drag components in here. So yeah, now if we drag a component in it's going to place it inside of this container, right. So when you're working with these containers inside of containers, sort of scenarios. A deep selection is basically how you figure out where you're adding things to. So it's kind of a helpful little visual tool and it kind of helps us in the software kind of know where you want us to put stuff. So yeah, now if I try adding another pump, we can place it. And it's actually going to be inside of this new coordinate container. So it's not at the same level as the coordinate container. Like it's this new pumps, direct parent isn't route, it's the coordinate container that we've deeply slapped it. Alright, I'm going to drop the deep selection or I'm going to go up a level by clicking outside of the deeply selected area.

[10:17] And then I actually don't need this extra coordinate container. So I'm going to right click on it and delete it. Now, the coordinate container it's pretty easy to understand how it works. The coordinate system is using is pretty straight forward. However, it's actually not that great of a container for web design or web applications. It's useful in cases where, you want to have a diagram or a bunch of components at fixed positions. It's not that great in cases where your application is going to be viewed from different display resolutions. So it doesn't really resize all that well or I should say it doesn't really handle resizing the components within the container all that well. If I just try to resize this, you'll notice the components aren't really, they're not getting bigger when there's more space. They're not really getting smaller when there's less, you will notice though that once we start cutting off one of the components, we actually get a scroll bar here. And the same works for a vertical scaling too. So if I were to grab the bottom here and try to go up, same kind of rules right.

[11:18] Now there is sort of an exception to this again with the coordinate container selected, there's this mode property and it's set the fixed which basically means how should, what should the contents of the retainer do when the container itself starts to resize? So, we just saw it fixed it, basically the components don't move. We could change this 2%, which does add a little bit of scaling. So what I mean by that is if I start resizing this here, you'll notice that our tank's getting a little bit bigger. And technically our pump is getting bigger too. It's just hard to see because the actual selection box of it doesn't really, it's very visual there but that's fine. But you'll notice that it does that for vertical scaling too. So it basically tells the components, Hey you remember about how much space is around you and try to maintain that right. Try to stretch out. So this does give you a little bit of scaling.

[12:14] It's not really enough in a lot of cases though. So, when you look like at a nicely designed website, a lot of things resize in different amounts at different times, right. Whereas this is basically one flat rule that's being applied to everything inside of the coordinate container. It's not very granular. So it's pretty rigid in regards to what you want to do. So like for example, maybe you wanted the tank to shrink down at a quicker rate than you wanted the pump to. Well, you can't really do that in a court and a container, not with a single coordinate container. But the flex container can do that. So that's why the flex container is actually going to be a little bit more useful. I didn't want to talk about the cordless container 'cause folks who usually find the corner container because it's really easy to understand what it's doing. So then they ended up trying to build around this but it's not that great of container again for building a responsive web applications. The flex container is going to be far more useful. So to sort of end this video here, we're actually going to get rid of this, this view. I actually don't need this.

[13:13] So I'm actually going to right click on my view, in the project browser here. And then we're going to go ahead and delete it. 'Cause we're not really going to use this here. So we'll click on yes. And we're back to square one. So we basically didn't gain any ground but we did actually talk a little bit about creating components and sort of did it like a quick demo of what a view is and how the containers work. So in the next video, I do want to demonstrate a flex container and we're actually going to go ahead and start building our overview as well. So I'll see you then.