Introducing PopupDiv

PopupDiv is the component used to divide one screen into several sub-screens. This is useful if you want to check once when needed, such as a specific message or additional information.

Basically, it is the same as Div, but because it operates as a pop-up, it is located above other UI elements on the screen. Also, since it disappears automatically when the focus is lost, it has the characteristic that it is not possible to output multiple images on the screen at the same time. Even if you create and place multiple PopupDivs on the screen, only one can be displayed at a time.

PopupDiv makes screen configuration easier and divides the screen to increase the reusability of the form. However, in the case of overlapping use, the deeper the steps, the slower the initialization time and screen loading. For example, using multiple PopupDivs with 2 to 3 steps per screen is faster than using 1 PopupDiv with 4 to 5 steps. Therefore, it is recommended to construct PopupDiv by overlapping only 2 to 3 steps.

PopupDiv can be created and placed in advance when designing the screen, or it can be created and displayed as the script during execution. Unlike other components, it is not visible on the screen even if it is created and placed on the form. In order to actually display it on the screen, you need to perform a separate task of placing it on the screen using the trackPopup, trackPopupComponent methods.

PopupDiv operates as the pop-up, but unlike the actual pop-up window, it operates only within the UI area. It is visible only within the area of the form, and the part outside the area is cut off and visible, so you need to be careful when using it.

Example

The following is a search page of Google, a representative search engine. Google's search page supports keyboard-type input tools to help user input, and this keyboard-like UI can be created with PopupDiv.

Creating PopupDiv

The following is an example of popupDiv appearing when you click the form with the mouse. With the PopupDiv created, it is displayed on the screen using the trackPopup and trackPopupByComponent methods.

Select PopupDiv from the toolbar, and drag it to an appropriate size on Form to create it. If you just click on the form, it will be created with the default size.

Create the onclick event handler so that PopupDiv is displayed on the screen when the form is clicked, and call the trackPopup method as follows.

this.Form_onclick = function(obj:nexacro.Form,e:nexacro.ClickEventInfo)
{
	this.PopupDiv00.trackPopup(40, 32, 200, 200);
	
};

Run it with QuickView (Ctrl + F6).

When you click on the form, PopupDiv appears on the screen and when you click again it disappears.

Placing PopupDiv

To display the created PopupDiv component on the screen, you need to set the coordinates and size using the trackPopup and trackPopupByComponent methods. The two methods have the same function. The difference is that the trackPopup method determines the coordinates based on the upper left corner of the UI screen, and the trackPopupByComponent method determines the coordinates based on the acquired component. You can use either method and use the method according to the situation.

Example

The following is an example of placing the PopupDiv component on the screen using the trackPopupByComponent method. The trackPopupByComponent method sets the coordinates based on other components. In the example, PopupDiv00 is placed on the screen based on Button00.

sample_popupdiv_02.xfdl

Core features used in the example

trackPopupByComponent

This is the method that places PopupDiv at a specific location based on the component transmitted as the argument.

this.PopupDiv00.trackPopupByComponent( this.Button00, 10, 10 );
this.PopupDiv00.trackPopupByComponent( this.Button00, 10 ,10 ,200 ,200 ,"fn_Callback" );

getOffsetHeight

This is the method that returns the value of the height property of the component in pixels.

getOffsetWidth

This is the method that returns the value of the width property of the component in pixels.

How to implement an example

Select Button and PopupDiv from the toolbar, and drag it to an appropriate size on Form to create it. If you just click on the form, it will be created with the default size.

Since PopupDiv is relocated when the application is executed by the trackPopupByComponent method, you do not have to worry about placement on the design screen of Nexacro Studio.

When the button is clicked, the trackPopupByComponent method is called so that the PopupDiv is placed in the set location.

• onclick Event Handler of Button00Button

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.PopupDiv00.trackPopupByComponent(obj, obj.getOffsetWidth(), obj.getOffsetHeight(), 160, 240);

};

Run it with QuickView (Ctrl + F6).

Click Button00 to check if PopupDiv is output to the set location.