Anatomy of a View


In this lesson, learn how to create and manage Perspective views.

Video recorded using: Ignition 8.0


(open in window)

[00:00] In this lesson, let's take a look at a View in the Perspective module. Views are a flexible unit of design. They can act as their own, standalone screen or a smaller part of a larger overall Page, such as a sidebar or a popup. When you're in the designer and you're looking at the Perspective module in the Project Browser, you'll see that there's a Views folder. This folder will contain all of the Views within this one project. When you're ready to create a View, you can simply right-click on the folder and select New View or you can click on the Create New View button. In either case, if we try to create a new View it'll give us a little popup window here. Now I'm going to leave these settings with the default values for now and I'll just create the new View. Once created, you can check the Project Browser and see that the new View is nested under the Views folder. If you wanted to keep your project organized, you can right-click on the Views folder and create a new folder. The folder needs a name but I'll just hit the Enter key here to use the default name, and now I can right-click on this new folder and create yet another View. Now, when creating a separate View you may see the little error message here under the Page URL. Other videos will talk about Pages and what's going on here but we can still create the new View by clicking the Create View button. Now, you'll note that it'll create the new View and place it inside of our custom folder we created here, but I now have two Views with the exact same name. Now technically this is okay. There's nothing preventing you from having multiple Views with the same name, although from a design perspective, it may be a good idea to have unique names for each of your Views. If you decide you need to rename a View later on, you can simply right-click on it and select the Rename option. Now, bear in mind, changing the name of a View could have some further implications. So if you had a script later on that was referencing a View by name, renaming could potentially break the script. So it's a good idea to plan ahead or try to stick with some company naming conventions. Now while we can have two Views in the same project with the same name, it's not okay for two Views to have identical paths. To demonstrate, if I try to create a new View in this new folder we just created, it's giving me an error message over here that's telling me that the name is already in use in this directory. All we have to do here is simply change the name of the View then we should be able to create it. Earlier, I mentioned the path to a View. The path of a View is very important. If you ever needed the path of a View typed out, you can simply right-click on the View in the Project Browser and select Copy Path. Now this isn't the only way to get the path to a View. Many other features and Perspective will automatically look up the path for you. This is just a helpful little tip. So if I click on that, and I switch over to a text editor, we can see that when I paste it does have the new folder and then the name of the View, which is just New View. So we talked about creating Views, we talked about looking at them in the Project Browser and renaming them and why the path is important, but now let's actually look at a View. So with the View selected, you can see that it has a list of properties over here including some size properties. So if I needed to change the size of my View I can do it here or I could simply grab the little "resize" icons and move them around. If we head back up to the Project Browser, under any of the Views there's this thing called root and selecting it doesn't really appear to change much in the workspace here, except for the Property Editor, which is now showing properties for the root container. The root here is the root container of the View. The root container is a special container, which you can't actually delete. See, if I right-click on it you'll notice that deleting is disabled. Technically, the root container is the thing that's holding your components when you start placing them into the View. Now the semantics of it don't really matter too much now, but later on, it's important to understand that when you're adding a component to a View really you're adding a component to a container that's inside of that View.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.