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

LESSON

Docked Views in Perspective

Description

In this lesson, learn how to create docked views.

Video recorded using: Ignition 8.0

Transcript

(open in window)

[00:00] In this lesson, we'll talk about Docked Views in Perspective. So we can see that I have a session in front of me and it's showing a single View right now. I would like to add a View to one of the edges here, so maybe just something on the northern edge. So let's take a look in the Designer here. Now I have a couple of Views ready to go down below, so I do have my primary View you just saw in my session. I also have this North Dock View. Again, kind of simplistic, but I did change the background color just so you can notice it. Now back at the root, or the home of the Perspective module, you can click on the cog icon at the bottom here or simply select the Perspective module in the project browser, they both take you back to the same location, we have this page configuration area here. Now you can see that I have, for the root page, or the home page here in my project, we do have my primary View configured. So this little work space over here allows you to add Views as a Docked View. So a Docked View again, a View that's kind of just placed or anchored to a particular edge of your session, that's not really a configuration you make to a View. Really any View can be docked potentially. So the way you dock a View to a particular edge is that you find that edge here, you click the little add button, so we'll add it to the northern edge here, then you get a little pop up here that allows you to pick from any of the Views available to this project. So I'll grab my north dock View and hit okay. So we have our primary for the center, we have potentially any docks around the edges, but I only have one dock configured right now, and it's that North Dock View. So let's save our project here. And hit save again, and if I bring my session back into view here, you can see that it now has that additional View docked to the northern edge. So now I can start putting buttons and navigation components at the top here. Now if we head back, there's this Shared Settings area. So if I head over to Shared Settings, you can see I get a similar interface; however, you don't get to specify a primary View, so the point of shared settings is that it allows you to dock Views for every page in this project. So, again if you're placing your navigation structure on a particular View that's docked and you don't want to have to manually add it to every page, you can do it under Shared Settings. So I do have an additional View here, this one named West Dock, I'm going to dock it on the western edge under Shared Settings. So I can hit the little Add button here, select West Dock, hit OK, and let's try that again. Let's go ahead and we'll save our project here. And let's save again, and let's head back to our session and just like last time, it just went ahead and automatically added that Dock for us. Now you kind of notice here, the two Docked Views are basically fighting over this corner. Right now the northern dock is taking up the entire width of the top portion of my session. And it's basically pushing this western dock out of the way. So that's actually something you can configure. So when we're over here, and I'll start in Shared Settings, you'll notice that there's that Corner Priority that I haven't talked about yet. This is basically what's determining what to do with the corners. So right now, it's set to top and bottom, so any Views that are docked to the top or the bottom take priority, and we're kind of showing you in the preview here. You can kind of see the left and the right are kind of being pushed down and have the little lines here. Now if I switch this to left-right, that means that the left and the right Docked Views will push the top and bottom Views out of the way. Now if we head back to one of my configured Pages, so if I go back to that first Page there, you can see that this also has its own Corner Priority. So I can on each individual Page have different Corner Priorities specified, or I can leave it with inherited, which means use the Shared Settings version of this Corner Priority property. So that should give you enough information to get started with the docks. In later videos we'll take a look at some additional settings.

You are editing this transcript.

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