Introducing PopupMenu

The PopupMenu component performs a function similar to the context menu displayed when clicking the right mouse button in the web browser. It is usually not visible on the screen but appears when necessary. In the Menu component, the PopupMenu component is used for the sub-menu area that appears when selecting the main menu.

Example

The PopupMenu component is used to process when specific functions are needed in web browsers or development tools. It is also called by the name of the context menu, pop-up menu, or pop-up. Menu items can be displayed differently depending on the current status of the user. For example, if you select a specific character string in the web browser and call the menu, then functions such as copy, search, and print are displayed. Otherwise, functions such as page movement and source view are displayed.

Creating PopupMenu

The PopupMenu component does nothing in its initial state. It is not even visible on the screen (it looks like a square in Nexacro Studio, but when you run it, nothing is shown). Unlike other components, one additional step is required to make the PopupMenu component visible on the actual screen.

Select the PopupMenu item from the toolbar, drag and drop it onto the form to create it. A blank white box is displayed on the screen.

Find the innerdataset item in the property window and run the InnerDataset edit window. Display 3 menu items of A, B, C on the screen and select item A to display 2 menu items, which are A-1 and A-2. When you open the innerdataset edit window, there are many items to be input. Specify only 2 property values, which are captioncolumn, levelcolumn.

The captioncolumn property value is the menu item displayed on the screen. If the levelcolumn property value is 0, then the Menu component is displayed on the screen and is the first item shown. If the levelcolumn property value is 1 or more, then specify the item displayed as the detailed menu item when the item with property value 0 is selected.

Run it with QuickView (Ctrl + F6). Nothing appears on the screen.

Add the onrbuttondown event function so that the PopupMenu component appears on the screen when the right mouse is clicked. Use the trackPopupByComponent method of the PopupMenu component.

this.Form_onrbuttondown = function(obj:nexacro.Form,e:nexacro.MouseEventInfo)
{
	this.PopupMenu00.trackPopupByComponent(this, e.clientx, e.clienty);
};

Run it with QuickView (Ctrl + F6) again. Nothing appears on the screen, but when right-clicked, the menu pops up.

Changing Pop-up Location

In general pop-up menus, when the mouse is clicked, the pop-up menu is placed at the bottom right of the mouse pointer. However, depending on the function of the screen you are using, you may need to place the pop-up location elsewhere. Let us find out how you can change the pop-up location in this case.

Example

When clicking the Div component shown on the screen, the PopupMenu component is placed based on the lower right vertex of the Div component. If you select the sorting condition set by the Radio component, then the location of the PopupMenu component is changed according to the condition.

sample_popupmenu_01.xfdl

Core features used in the example

trackPopupByComponent (objComp, nXpos, nYpos...)

Specifies the location to display the pop-up menu based on the component or object specified as the first argument. In the example, since the Div component is specified as the argument, the top and left coordinate values of the Div component are set to (0, 0) and the pop-up menu is displayed at the specified coordinate values.

trackPopupByComponent (...strAlign...)

Specifies the horizontal and vertical sorting method of the pop-up menu at the coordinate points showing the pop-up menu. The default value is "right bottom". At this time, the direction to be used should be considered based on the coordinate point. If the coordinate point is the lower right vertex of the Div component, then the default sorting value is applied and the pop-up menu appears at the lower right of the vertex. Conversely, if the sorting value is set to "left top", then the pop-up menu appears inside the Div component as shown below.

How to implement an example

Place the Radio, Div, PopupMenu components as shown in the example screen. Set the innerdataset property value of the Radio component as follows. For the Div component, the border property value is set to "2px solid red" to make it more visible.

Set the innerdataset property value of the PopupMenu component as follows. The values you need to enter are captioncolumn, levelcolumn values.

Select the Radio component and write the onitemchanged event function. When selecting the item in the Radio component, the sorting condition value is stored in the variable called align. Use the saved value in the onclick event of the Div component.

var align;
this.radioAlign_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
		align = obj.value;
};

Select the Div component and write the onclick event function. The base point at which the pop-up menu is displayed is the Div component. If the width and height of the Div component are specified as X, Y coordinate values, the pop-up menu is displayed based on the lower right vertex by moving as much as X, Y coordinate values based on the coordinate values of the Div component. If you select the sorting condition here, add the conditional expression so that the condition can be reflected.

this.divClick_onclick = function(obj:nexacro.Div,e:nexacro.ClickEventInfo)
{
	var targetX = obj.width;
	var targetY = obj.height;
	if(align) {
		this.popupmenuABC.trackPopupByComponent(obj, targetX, targetY, align);
	} else {
		this.popupmenuABC.trackPopupByComponent(obj, targetX, targetY);
	}
};

Run it with QuickView (Ctrl + F6) and right-click the Div component area to check that the pop-up menu appears.

Adding Divider Lines

When you open the Nexacro Studio menu, certain menu items are grouped together and a divider is displayed in the middle. The divider itself does not have a function, but it allows the user to easily recognize the menu items if there are many of them.

Example

When the button is clicked, the pop-up menu is displayed, and you can check the state where the divider line is displayed. When selecting the [New] item, the specified icon is displayed in the sub-menu.

sample_popupmenu_02.xfdl

Core features used in the example

iconcolumn

Displays the icon in front of the menu. The first level does not display the icon, but only the second and lower levels do. In the example, the file used by the theme was used.

How to implement an example

The captioncolumn item is the name of the menu displayed on the screen. If you enter "-" in this item, it is processed as the divider line. In the example, "-" is entered in the 4^th, 8^th, and 10^th Rows.

On the Nexacro Studio Form screen, the "-" input value is displayed as-is, but when the actual application is executed, it is displayed as the divider line.

Make the pop-up menu appear when the button is clicked.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.popupmenu00.trackPopupByComponent(this, e.clientx, e.clienty);
};