This lesson is part of the Perspective Pages, Views, and Containers course. You can browse the rest of the lessons below.

LESSON LIST

Autoplay Off

Description

The Coordinate container allows components to be positioned via simple coordinates. This lesson demonstrates how components behave when placed inside the Coordinate container.

Video recorded using: Ignition 8.0

Transcript

(open in window)

[00:00] In this lesson, we'll take a look at the Coordinate Container. The Coordinate Container is a very simple container, as it allows you to specify the X and Y position of your components. To begin, we're in the Perspective section of our designer. Let's create a new View, and let's call this "Coordinate". I'm going to use the Coordinate layout, so that the root container is a Coordinate container. And in this case, I'll have it create a Page URL. We'll hit the Create View button here. Once we have our View, let's add a component. I'll head over to the Component Palette, and let's grab, under the Display category, a Cylindrical Tank, and drop that into the container. Now if I try clicking and dragging on the component, I can reposition the component in the container, as well as resize it. As I'm doing this, we notice in the Property Editor, under the Position category, that the X, Y, width, and height change depending on what I do to the component here. When I launch the Session and look at this View, the tank will be at roughly the same coordinates as it is right now in the designer. So let's save the project. Now, I mounted this View to the first Page in my project, so if I go to Tools at the top, Launch Perspective and Launch Session, it should show me this View. We see our browser opens up, and the positioning here is about what I'd expect. Now you'll see that when I resize my browser, the tank doesn't change size or reposition. Now this can be a good thing and a bad thing. It's good because I don't have to worry about my components being warped and being unreadable. But if I make my session too narrow, my components won't automatically resize, and I'll get scroll bars at the bottom. So the coordinate container is great to start of with, but if you plan on launching your sessions on a variety of different screen sizes, you'll find that it's not very flexible. Now we can make a slight change to this, if I move back to my Designer here. And if I select the root container, which is our Coordinate container, we'll notice the Mode property here. When the Mode property is set to fixed, it behaves precisely as I just showed you. Components inside this container will be in a fixed position regardless of how you resize the session. We could also change this to Percent. Percent will allow the component to resize. Now, if we were to save our project, when we start resizing our session now you'll notice that the tank also resizes. Even the empty spaces on both sides of the tank, those are shrinking and growing as I change the browser width. So if the screens you're going to launch your session on only have a very small amount of variance in monitor size, the Coordinate container set to the Percent mode may work well as a root container. Now if you're looking for truly responsive design, the coordinate container doesn't work very well as the root container. Instead, it works great as a separate component. I'll head back to my component palette, and take a look at the container category. We see our Coordinate container as a component, I can just drag and drop that onto the View, and I'll resize it just a little bit. Double-click on the new Coordinate container to deeply select it and then start placing components inside of here. So I could use a Coordinate container as a smaller container to hold components that I don't want to move around, such as a bunch of labels and smaller displays, and place that Coordinate container inside of a more responsive container, such as a Flex container or Column container.

You are editing this transcript.

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