LESSON

Docked View Properties

Description

Docked views feature multiple properties, each altering the behavior of the dock in unique ways. This lesson examines several such properties.

Video recorded using: Ignition 8.0

Transcript

(open in window)

[00:00] In this lesson, we'll take a look at some of the properties on Docked Views. So, we can see that I have my session here, I have a primary View, and then I have a Docked View here on the edge. Let's play around with some of the settings on this Docked View. So, I'm going to move my session out of the way. And we're at sort of the home of the Perspective module in the Designer, so, went over to the cog icon down here. We see our Page and I have this west Docked View. So, when you have a View that's docked to a particular edge of a Page, you can click on the name of the View and it shows you this little pop-up that allows you to configure the dock. So, let's work through a couple of these settings here. To start with, you can always change whatever View is associated with this dock here, just by clicking on the little drop-down. Now, you have the option to display it, so, the reason you'd want to hide this potentially, is that you can actually set it to On Demand or Auto, and then conditionally show the dock depending on some criteria. The easiest setting to use would be the Auto setting, which allows you to specify a breakpoint. So, we're saying when the session reaches this breakpoint, either show or hide this Docked View. And since we're here, let's also make this resizable, so I can go and resize the width of the Docked View if I want. Let's hit OK here, we'll save our project, save one more time, and let's head back to our session here. So, you can see, I can now resize the width here. I have a little bar I can simply grab and change the size or the width, in this case, of the left Docked View. But if I resize my session here, you'll see at a certain point, the dock automatically hides because I don't have enough room. Again, it's using that Auto Breakpoint property to determine whether or not I should show the dock. And of course, if my session gets wider, it comes back. Now, let's move this again out of the way, and we'll head back to the settings. I'll turn off resizable for right now, and let's add a handle. The handle's hidden right now, but if I click the drop-down, we can pick from one of the following options here. A handle is basically a little icon you can click on that happens to be next to the dock, and it allows you to show or hide the dock. Again, we'll hit OK, we will save our project, and if we head back to our session, you can see the handle. The handle can be repositioned. I can click on it and it hides the dock. I can click on it again and it comes back. Now, you see, when this Docked View appears, it's actually pushing my primary View over, so, it's actually resizing the primary View to make room for the Docked View. That's in another setting, so if we head back to the dock configurations here, the content drop-down here, so, the push is what's doing the pushing. If you wanted your dock to cover up the content, or basically be positioned in front of any components that are on the primary View, you can set this to cover and let's try that out. So, we'll hit OK again, we will save, and when we head back, you can see that the text actually kind of moved behind my dock. So, as I'm bringing the dock in and out of View here, you can see that it's just covering the content in the back. Now, notice the width here on this View. You probably guessed, but if I go back to the dock configuration, there is in fact a size property. So, the size here only dictates one dimension, so in this case, because I'm using a left dock, the size determines the width. So, if you're using a left or right dock, size determines the width. If you're configuring a top or bottom dock, this determines the height of the View. So, you can change the setting here, but I did want to point out real quick, if I go and I actually look at that Docked View, I'll click on it under Recently Modified Views. I configured the size of this View to kind of match a western dock here, but I didn't have to do that. Again, I could just resize this whole View to be whatever size I want, but because we're using it as a Docked View in one of our Pages, it's going to automatically be resized to fit as a dock. So, it doesn't matter that I changed this here. We save and I head back to my session, it's still the same width. So, you don't have to actually resize your Views to match your dock but from a designing perspective, sometimes that's useful.

You are editing this transcript.

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