Introducing Menu

The Menu component provides a guide to easily find information on a site with a variety of information or provides a list of functions so that the desired function can be executed directly from the document tool. Recently, the Menu component is often used in a modified form, but the way to find information is not very different.

Example

The way to find information on websites with various information is by using the search window or menu. When looking for a specific product, the search window can be quick, but when you want to see the list of products within the product line, it is common to find the item you are looking for in the menu.

Nexacro Studio also uses the Menu function as one of the ways to process the desired function. Authoring tools such as Nexacro Studio can process desired functions using keyboard shortcuts, toolbars, and shortcuts in addition to menus.

Creating Menu

The Menu component does nothing in its initial state. Since the purpose of the Menu is to navigate to information or perform a specific function, you need to specify what to do with it.

Creating Menu Component

Select the Menu item from the toolbar, drag and drop it onto the form to create it. A blank gray bar is displayed on the screen.

Setting innerdataset

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 a lot of 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 it is the item displayed as the main menu when the Menu component is displayed on the screen. If the levelcolumn property value is set to the value of 1 or more, then it is displayed as the detailed menu item when the item with the property value of 0 is selected.

Since the Menu component processes the menu level structure in order, in order for "A-1" to be displayed when "A" is selected, "A-1" must be specified under "A" in the innerdataset property value.

Checking with QuickView

Run it with QuickView (Ctrl + F6). Select the 'A' item to check the sub-menu items.

Configuring Menu

The Menu component provides several additional options to make finding information easier and more intuitive. If it is a simple menu, then you can provide a basic menu by specifying only the captioncolumn, levelcolumn property values.

Example

This menu is offered by an online shopping mall that sells alcohol and beverages. If the user is under the age of 19, then alcohol cannot be selected, and if the user is over the age of 19, then all menu items can be selected. The age is selected from the "Age" item and the selected item is marked as the checkbox.

sample_menu_01.xfdl

Core features used in the example

innerdataset: If you do not use a separate Dataset object in the Menu component and use the innerdataset edit window, then column items are automatically created and related property values (captioncolumn, checkboxcolumn, etc.) of the Menu component are also specified.

If innerdataset is directly specified and used, then the entered data cannot be modified in the script. Therefore, in this example, the Dataset object in the same format was created and used.

You can access it in the same way as this.menuOption._innerdataset and use it like the Dataset object. However, since it is not the officially allowed method, it was not applied in this example.

checkboxcolumn: Displays the checkbox in front of the menu item when the column value is true. It is used to continuously display the selected state. When you look at the menu [View> Toolbars] item in Nexacro Studio, the checkbox is displayed in front of the selected toolbar as to be used.

enablecolumn: If the column value is false, then the menu item cannot be used. Even if there is the sub-menu, the sub-menu does not expand and the event does not occur even if the menu is selected.
idcolumn, userdatacolumn: It is not displayed on the screen but is used when additional information is required. When the onmenuclick event occurs, the values corresponding to idcolumn and userdatacolumn can be checked as follows.

this.menuOption_onmenuclick = function(obj:nexacro.Menu,e:nexacro.MenuClickEventInfo)
{
	trace(e.id); // idcolumn
	trace(e.userdata); // userdatacolumn
};

findRow: The Menu component does not provide the Row information of the Dataset object for the selected item, so it finds the corresponding Row information with the column value and actual data value. The findRow method can find Row information with column values and data values. If there are multiple values of the same value, then only the first value is returned, and you can adjust the search range by specifying additional starting index values.

How to implement an example

Configuring Form Screen

Place the Menu component as shown in the example screen. Before specifying the innerdataset property value, only the gray bar will be visible.

Creating Dataset Object

Add the Dataset object to the "invisible object" area from the toolbar. Double-click the Dataset object and add data to [Dataset Editor]. If you select "Source" in the bottom tab of [Dataset Editor], [Dataset Source Editor] is executed and you can directly input data in XML format.

<ColumnInfo>
  <Column id="captioncolumn" size="256"/>
  <Column id="checkboxcolumn" size="256"/>
  <Column id="enablecolumn" size="256"/>
  <Column id="idcolumn" size="256"/>
  <Column id="levelcolumn" size="256"/>
  <Column id="userdatacolumn" size="256"/>
</ColumnInfo>
<Rows>
  <Row>
    <Col id="captioncolumn">Wines</Col>
    <Col id="levelcolumn">0</Col>
    <Col id="idcolumn">A</Col>
    <Col id="userdatacolumn">19</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">White Wines</Col>
    <Col id="levelcolumn">1</Col>
    <Col id="idcolumn">A-1</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">Red Wines</Col>
    <Col id="levelcolumn">1</Col>
    <Col id="idcolumn">A-2</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">Spirits</Col>
    <Col id="levelcolumn">0</Col>
    <Col id="idcolumn">B</Col>
    <Col id="userdatacolumn">19</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">Vodka</Col>
    <Col id="levelcolumn">1</Col>
    <Col id="idcolumn">B-1</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">Plain</Col>
    <Col id="levelcolumn">2</Col>
    <Col id="idcolumn">B-1-1</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">Flavoured</Col>
    <Col id="levelcolumn">2</Col>
    <Col id="idcolumn">B-1-2</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">Cognac</Col>
    <Col id="levelcolumn">1</Col>
    <Col id="idcolumn">B-2</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">Rum</Col>
    <Col id="levelcolumn">1</Col>
    <Col id="idcolumn">B-3</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">Teguila</Col>
    <Col id="levelcolumn">1</Col>
    <Col id="idcolumn">B-4</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">Soft Drink</Col>
    <Col id="levelcolumn">0</Col>
    <Col id="idcolumn">C</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">Coke</Col>
    <Col id="levelcolumn">1</Col>
    <Col id="idcolumn">C-1</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">Juice</Col>
    <Col id="levelcolumn">1</Col>
    <Col id="idcolumn">C-2</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">Age</Col>
    <Col id="idcolumn">D</Col>
    <Col id="levelcolumn">0</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">Under 19</Col>
    <Col id="idcolumn">D-1</Col>
    <Col id="levelcolumn">1</Col>
  </Row>
  <Row>
    <Col id="captioncolumn">19+</Col>
    <Col id="checkboxcolumn">true</Col>
    <Col id="idcolumn">D-2</Col>
    <Col id="levelcolumn">1</Col>
  </Row>
</Rows>

Setting innerdataset Property Value

Specify the created Dataset object as the innerdataset property value, and specify the captioncolumn, checkboxcolumn, enablecolumn, idcolumn, levelcolumn, userdatacolumn property values.

The column value of the Dataset object does not have to be the same as the property value of the Menu component. However, for the convenience of development, the property value and column value are set the same. In the actual development stage, item values can be processed according to internal coding regulations.

Writing Menu Component Event Function

Select the Menu component and create the onmenuclick event function. Within the event function, according to the "Age" sub-menu selection, set the menu that cannot be used by those under the age of 19.

this.menuOption_onmenuclick = function(obj:nexacro.Menu,e:nexacro.MenuClickEventInfo)
{
	var d1ColumnRow = this.datasetMenu.findRow("idcolumn", "D-1");
	var d2ColumnRow = this.datasetMenu.findRow("idcolumn", "D-2");
	
	if(e.id == "D-1") {
		this.datasetMenu.setColumn(d1ColumnRow, "checkboxcolumn", true);
		this.datasetMenu.setColumn(d2ColumnRow, "checkboxcolumn", false);
		
		var currentAgeColumnRow = -1;
		do {
			currentAgeColumnRow++;
			currentAgeColumnRow = this.datasetMenu.findRow("userdatacolumn", "19", currentAgeColumnRow);
			this.datasetMenu.setColumn(currentAgeColumnRow, "enablecolumn", false);
		} while (currentAgeColumnRow != -1);
	} else if(e.id == "D-2") {
		this.datasetMenu.setColumn(d1ColumnRow, "checkboxcolumn", false);
		this.datasetMenu.setColumn(d2ColumnRow, "checkboxcolumn", true);
		
		var currentAgeColumnRow = -1;
		do {
			currentAgeColumnRow++;
			currentAgeColumnRow = this.datasetMenu.findRow("userdatacolumn", "19", currentAgeColumnRow);
			this.datasetMenu.setColumn(currentAgeColumnRow, "enablecolumn", true);
		} while (currentAgeColumnRow != -1);
	}
};

In the example, since the 2 sub-menus of "Age" are unchanged items, the Row information of the corresponding item is found and stored in the d1ColumnRow, d2ColumnRow variables. Then, according to the conditions, the value of the checkboxcolumn item value of the corresponding Row was modified.

this.datasetMenu.setColumn(d1ColumnRow, "checkboxcolumn", true);
this.datasetMenu.setColumn(d2ColumnRow, "checkboxcolumn", false);

The alcohol menu can be increased depending on the data used, the information "19" was entered in the userdatacolumn item and all data with that value was processed as the alcohol menu. The do~while statement was used for that. In the example, 2 menus are specified as the alcohol menu items. Store the corresponding Row information in the variable called currentAgeColumnRow to process it.

During the execution of the first do~while statement, values are processed as shown below. The findRow method finds Row that first matches the specified column value based on the starting index. The starting index (currentAgeColumnRow) value starts from 0, and since the findRow method was executed to find the same value at the 0^th index, currentAgeColumnRow is still 0. Update the enablecolumn column value to false.

var currentAgeColumnRow = -1; // (Set the initial value to -1 to start from the 0th Row in the do statement)
do {
    currentAgeColumnRow++; // 0 (Use the ++ operator to process the findRow method from the previous found value or initial value from the next Row)
    currentAgeColumnRow = this.datasetMenu.findRow("userdatacolumn", "19", currentAgeColumnRow); // 0 (Find Row that meets the conditions)
    this.datasetMenu.setColumn(currentAgeColumnRow, "enablecolumn", false); // true (Modify the enablecolumn value of Row that meets the condition to false)
} while (currentAgeColumnRow != -1); // true (Repeat once more if Row that meets the conditions in the do statement is found)

The ++ operator is the operator that increments the value of the variable by 1.

For example, if there is the variable i with the initial value of 0 and the operation called i++ is executed, then the value of i becomes 1.

The ++ operator is processed differently depending on its location. If the ++ operator is added to the variable, then the variable value is incremented later, and if the ++ operator is placed before the variable, then the variable value is incremented first. Please refer to the code below.

// i++
var i=0;
trace(i++); //0
trace(i); //1

//++i
var i=0;
trace(++i); //1
trace(i); //1

The do~while statement stops repeating if the value in the while statement is false, but repeat it once more because it is still true.

do {
    currentAgeColumnRow++; // 1 (Since the previously found value was 0, start from 1, the next Row after ++ operation)
    currentAgeColumnRow = this.datasetMenu.findRow("userdatacolumn", "19", currentAgeColumnRow); // 3 (If the Row value is 1,2, there is no userdatacolumn value and it is searched when the Row value is 3.)
    this.datasetMenu.setColumn(currentAgeColumnRow, "enablecolumn", false); // true
} while (currentAgeColumnRow != -1); // true

Since the value of the while statement is still true, repeat it once more. However, this time it does not find the corresponding value and stops the iteration. The enablecolumn value of the lower menu was not changed, but if the enablecolumn value of the upper menu is false, the lower menu itself cannot be accessed, so only the upper menu has been modified.

do {
    currentAgeColumnRow++; // 4
    currentAgeColumnRow = this.datasetMenu.findRow("userdatacolumn", "19", currentAgeColumnRow); // -1 (If the Row value is 4,5, the userdatacolumn value is not found and -1 is returned.)
    this.datasetMenu.setColumn(currentAgeColumnRow, "enablecolumn", false); // false
} while (currentAgeColumnRow != -1); // false (The condition that the currentAgeColumnRow value is not -1 cannot be established, so the iteration is stopped and the next step is performed.)

Checking with QuickView

Run it with QuickView (Ctrl + F6) and change the "Age" sub-menu to check whether the rest of the menu items are enabled. If you have selected the "Under 19" menu, you will not be able to select alcohol related menu items.

Executing Menu with Shortcut Keys

Just as Form Wizard runs when you press CTRL+N in Nexacro Studio, you can set shortcuts for each menu item in the Menu component and execute the desired action when you enter the shortcut keys.

Example

When you click the "SHOW BUTTON", "HIDE BUTTON" menu items, the Button component becomes visible and then invisible. Even if the menu is not expanded and selected, the same action is processed when the specified shortcut key is entered. Pressing the ALT+1 shortcut key shows the Button component, and pressing the ALT+2 shortcut key causes the Button component to disappear.

sample_menu_02.xfdl

Core features used in the example

autohotkey: Sets whether the onmenuclick event occurs when the shortcut key set with the hotkeycolumn property is entered. If the autohotkey property value is false, then the event does not occur even if the shortcut key is entered.
hotkeycolumn: Specifies the column for setting the shortcut key. Column data is entered as the character string, such as "ALT+1". When the property value is specified, the text of the shortcut key is displayed together with the text of the menu item.

How to implement an example

Place the Menu component and the Button component.

Set the autohotkey property value of the Menu component to true.

Set the innerdataset property value as follows.

Property values such as captioncolumn, hotkeycolumn are automatically filled when the innerdataset data is set. Delete the unused property values like checkboxcolumn.

Add the onmenuclick event function of the Menu component as follows.

When the shortcut key is input, the onmenuclick event occurs, and the id column value corresponding to the shortcut key is transmitted as the id value of the MenuClickEventInfo object.

this.Menu00_onmenuclick = function(obj:nexacro.Menu,e:nexacro.MenuClickEventInfo)
{
	if(e.id == "1")
		this.Button00.set_visible(true);
	else if(e.id == "2")
		this.Button00.set_visible(false);
};

Checking with QuickView

Run it with QuickView (Ctrl + F6) and then click on the menu item to see if it can process whether to show the button or not. This time, without touching the menu, just enter the shortcut key (ALT+1, ALT+2) to check whether the button is displayed or not.