This lesson is part of the Perspective Components and Bindings course. You can browse the rest of the lessons below.


Autoplay Off
Take topic challenge

Supplemental Videos


In this lesson, we'll take a brief look at using components in the Perspective Module.

Video recorded using: Ignition 8.0


(open in window)

[00:00] In this lesson, we'll take a closer look at components in the Perspective Module. Now we've seen from other videos here on Inductive University that when you have a View open in the Designer, you can head over to the Perspective Component Palette and drag and drop components directly on to your View. Notice that when I do this, wherever I drop the component, we place it so that the upper left hand corner is where the mouse cursor is pointing to. Once you have some components on your View, you can click on one of them and you'll see this selection box. So while it's selected I can then click and drag and move the component to a new position. Alternatively, I can use the arrow keys to move the component. Right now I'm holding the right arrow key, which moves our component one pixel at a time. I can also hold the Alt key and use the arrow keys to move 10 pixels at a time.

[01:01] You'll see that we have these little resizing rectangles here, so whenever you have a component selected, you can simply click and drag on these to resize the component. If you want to drop your current selection, you can simply click on the background, which selects the nearest container you clicked on. In this case, it's selected the root container. If you're trying to select multiple components, there are a couple of ways. First, I could select a component, hold Ctrl and then click on another component I want to add to the selection. Now that I have multiple components selected, I can simply click and drag on one of them to move all of them. I can also resize them all together. And again to drop selection, I'll simply click on the background. Now similar to what I just showed you, we can also select something in the Project Browser, hold Ctrl and click on a different component to do the same thing. Now with the root container selected, I can click and drag to the side, and you'll notice it gives me a little box.

[02:02] It gives you a dashed border if you drag to the left and it gives you a solid border if you drag to the right. Dragging up or down doesn't have any meaning, but left or right does. When you're creating this selection box by dragging to the left any component you touch with the box will be included in the selection when you let go. If I click back on the root container, and drag to the right, you won't see the same behavior here. Instead the box with the solid borders only selects a component if it's completely encased inside of the selection box. Now if I were to select a component, and then double click on it, you'll notice that the interface changes quite a bit. This is what's known as deep selection. Deep selection allows you to manipulate inner pieces of a component. Now on my tank here, that doesn't really make much sense, that doesn't really add anything to my component when I'm deep selecting. So I'm going to drop the deep selection by clicking on the background again.

[03:00] And this makes a little bit more sense when we head back to the Component Palette and grab one of our containers. So if I grab a Tab container, for example, if I wanted to place a component inside of this container, I first need to deeply select. So I can double click on the Tab container. You'll notice that there's some visual changes to the component now that I've deeply selected. So if I wanted to add a component to one of these tabs here, we can come over the Component Palette and I can drag the component directly in to my container. So you can kind of see that that placed the tank inside of the tab container, as opposed to just at the root. So again deep selection is very useful when you start embedding these containers. I'll click on the background to drop the selection again. Now if you wanted to copy a component, you can simply select it and then right click, and you'll notice that we have cut, copy and paste as options. So we could copy and paste the component. There's also a duplicate option, which places a copy of the component on top of the original. In addition, you can select a component, or multiple components.

[04:07] Hold the Ctrl key and then click and drag and you'll see that we get these little silhouettes here, so when I let go of the mouse button, it'll create duplicates of whatever components I had selected. Now I showed you that trick with multiple components selected, but really it works with single components as well. As does multi selecting components, right clicking and then copying, pasting or duplicating. So if I duplicate those two that were selected, I now have some additional tanks. And then of course if you need to delete some components, you can simply group them up, use our little multi selecting tricks, right click and then delete or use the delete key to remove those components. Now there's quite a bit more to components, for example we haven't really started talking about properties yet. There's a couple of items in the right click menu, such as the events and the scripting, but we'll talk about all of those in later videos. So hopefully that gives you some ideas on how to create, manipulate and select components.

You are editing this transcript.

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