LESSON

Open Popup Window

Description

Popup windows can be used for almost anything and act in much the same way that a main window would except they can be dragged around the screen. They can show more detailed information about a specific area of the project, or they can be used to quickly draw the users attention to specific information. Learn how to create and use popup windows and their properties, such as the infinite desktop property which allows a popup window to be dragged outside the bounds of the screen.

Video recorded using: Ignition 8.1

Transcript

(open in window)

[00:00] In this lesson, I'll go over pop-up Windows including their properties and how to open them. To get started, I'll create a pop-up window. Within the vision section of my designer I can right click Windows and click pop-up window. The new window prompt will open and I can name my new window. I'm gonna call it My Popup and click Create Window. I don't want it to be empty. So I'm going to add a label to it. I'll give it the text: This is a pop-up window!! Now that I have a pop-up window, let's go over opening it. I have a main window in my project that automatically opens on startup. I want to place a button on this window that opens my new pop-up. Now that I have a button on my main window I can double click it to open the component scripting window.

[01:05] I'll choose the actionPerformed Event Handler and on the Navigation tab, I'll click the Open/Swap radial button. Want the pop-up to open and center and I'll choose My Popup from the drop-down menu. Once I'm done here, I'll click ok and I can test my new window by saving and launching a client. If I click the Button, you can see that the Popup window opens. I can click and drag to move it around, I can resize it and I can close it. I'll head back to the designer and look at some of the ways I can configure my pop-up. Back in the designer, I'll select the pop-up window in the Project Browser. A pop-up window is just a window with certain settings. Specifically a pop-up window was a floating window that is set to not start maximized.

[02:05] Let's take a look at the Property Editor to see what can be configured on my pop-up window. The Behavior properties allow me to do things like make it closable or resizable. The Appearance properties are where I can configure a title for my pop-up window. For example, I can change the title to something like 'Super Cool Popup Window.' Now, if I save and head back to the client, you can see the title here. Finally, the Layout properties allow me to change things like the location and size of the pop-up window. If you want to use the location property for your pop-up window, be sure to uncheck the center option and the Navigation action as this will override the location property. If I go back to the client, open my pop-up window, and click outside of its bounds, You'll see that it remains in front of the main window.

[03:04] This is controlled by the Layer property. Windows with higher layer numbers will always be on top of windows with the lower layer numbers. The main window is set to layer 0 so if I change the pop-up window to layer 0, I can save, open the pop-up window, click the main window, and the pop-up will disappear. If I click Windows, I can see that it's still open. But it has lost focus to another window within the same layer, so it becomes hidden. To bring it back, I can just click it from the menu here. There is another property of note that will change the behavior of pop-up windows. If I click and drag the pop-up to the edge of my client window, you'll see that the client window gets larger. This is controlled by a setting in the project properties.

[04:04] Within the designer, I can click Project, Project Properties, and I can click User Interface within the vision properties. If I uncheck the Infinite Desktop property and save, I can go back to the client and when I click and drag the window to the edge of the screen, the behavior changes and pop-up is now restricted from moving any further.

You are editing this transcript.

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