Introducing Application

Application contains default configuration information related to the running application.

Example

If you select the "Application" project when creating the project, then the default Application is created while creating the project. The created Application can be checked in the [Project Explorer > Application Information] item. The corresponding item can be selected and related properties can be modified.

The current version only has the "Application" project.

Accessing Application

As mentioned earlier, accessing in [Project Explorer] is used when modifying properties or specifying event functions. However, if you need to access the script from Form, then use the code below.

nexacro.getApplication();
nexacro.getApplication().alert("warning");

Displaying Alert & Confirmation Dialog Boxes

In general, applications are primarily responsible for entering information by the user, processing it, and presenting the results. However, if the value entered by the user is incorrect or if something is wrong, then the alert or confirmation dialog box is used to provide intuitive messages.

Example

When you click the button, the alert dialog box appears. 10 dialog boxes are displayed using the iteration syntax. 10 dialog boxes do not appear at the same time, but the following dialog box appears only when the user closes the dialog box displayed on the screen or clicks the [OK] button.

sample_application_01.xfdl

Core features used in the example

alert: The alert method is used to display the alert message. In the example, the reason why 10 dialog boxes do not appear at the same time, although the iteration syntax is used, is that the alert method waits in the stopped state without proceeding with other processes before the user checks the message and presses the button.

The dialog box displayed when the alert method is executed may look different depending on the browser. If you want to display the alert message in the desired form, then you need to use the component like popupDiv instead of the alert method.

If you are using the Google Chrome browser, then you may see the message "Prevent this page from creating additional dialogs" in the alert dialog box when running the example. If the item is checked, then the alert dialog box no longer appears. You will need to restart your browser to bring up the dialog again.

How to implement an example

Configuring Main Screen

Place the Button component as shown in the example screen.

Writing Button Component Event Function

Write the event function to be processed when the button is clicked. Use the iteration syntax to make the alert dialog box appear 10 times.

this.btnAlert_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	for(var i=0 ; i<10 ; i++)
	{
		nexacro.getApplication().alert(i);
	}
};

Checking with QuickView

Run it with QuickView (Ctrl + F6) and click the button to check the alert dialog box appearing.

Saving User Information

When you need to share data between screens, you can store the variable in addVariable, but addVariable cannot use the corresponding value again when the application is closed. If you save the user information in local storage, though, then the information stored in the corresponding PC can be reused, even if the application is closed.

Local storage information is managed by runtime and web browsers in their own storage. Because of this, the data stored in runtime cannot be imported from the Chrome browser.

Local storage information is managed by domains in the web browser and by the project in runtime. Even if you use the same key value, then it will not be processed if the domain or project are different.

Example

Clicking the [SET DATA] button saves the value entered in the Edit component to local storage. If you close the application, run it again, and click the [GET DATA] button, then the previously entered value is output to the Edit component.

sample_application_04.xfdl

Core features used in the example

setPrivateProfile: Saves data to local storage. The storage space varies depending on the web browser.
getPrivateProfile: Imports the value stored in local storage. Even if there is no value corresponding to the specified key value, then it is not processed as an error.

How to implement an example

Configuring Main Screen

Place the Button component and the Edit component as shown in the example screen.

Writing Button Component Event Function

Write the event function to be processed when the button is clicked. Set the key value to the preset value. You can manage multiple values as long as the key values are different.

this.btnSet_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Edit00.value = nexacro.setPrivateProfile('TEST', this.editSet.value);
};

this.btnGet_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Edit00.value = nexacro.getPrivateProfile('TEST');
};

Checking with QuickView

Run it with QuickView (Ctrl + F6), enter an arbitrary value in the Edit component, and click the [SET DATA] button to save the value. Once the value is saved normally, the true value is displayed in the Edit component. Then, if you click the [GET DATA] button, the saved value is displayed in the Edit component.

Calling the setPrivateProfile method with the same key value overwrites the previously saved value.

Checking Cookie Information

You can check the cookie information that the web browser has.

The window.document object cannot be accessed from the Nexacro browser.

The example does not operate when running in the Nexacro browser.

Example

When the [Cookie check] button is clicked, the cookie information is displayed in the TextArea area.

sample_application_05.xfdl

Core features used in the example

window.document.cookie: Checks the cookie information in the current Document. You can get the name/value values.

How to implement an example

Configuring Main Screen

Place the Button component and the TextArea component as shown in the example screen.

Writing Button Component Event Function

Write the event function to be executed when the button is clicked. Import the cookie value from the window.document object. Since each cookie value is separated by the ";" character, convert them to an array using the split method, and display them in the TextArea component.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var arrCookie = window.document.cookie;
	arrCookie = arrCookie.split(";");
	var arrTempCookie;
	this.TextArea00.value = "";
	for(var i=0; i<arrCookie.length; i++)
	{
		arrTempCookie = arrCookie[i].split("=");
		this.TextArea00.value = this.TextArea00.value 
			+ ( arrTempCookie[0].trim() + " : " + arrTempCookie[1] ) + "\n";
	}  
};

Checking with QuickView

Run it with QuickView (Ctrl + F6) and click the button to display the cookie value in TextArea. However, no value may be displayed in some cases.

When running using the local web server in Nexacro Studio, the cookie value is not displayed unless a separate cookie value is set.

Setting Cookie Value

If the cookie value is not displayed, then try temporarily setting the cookie value. Select the Environment item in Project Explorer and select the [Add> Cookie] item from the context menu.

Enter the value to be added as the cookie value. Enter the id and initval items in the input form below.

Checking back with QuickView

Run it with QuickView (Ctrl + F6) and click the button to display the Cookie information entered in the previous step in the TextArea.

Obtaining Enabled Screen (Form) Name (ID) Property Information

If you have multiple screens open, then it is not easy to tell which screen is currently enabled. This example is for the function to check the enabled Form in such cases.

Example

When the [Check] button is clicked, the id, titletext property values of Form, and the id property value of the parent object of the Button component are displayed in the Edit component. When the [Div Check] button is clicked, the enabled screen (Form) is innerForm in Div but returns the Form object including the Div component in the getActiveForm method.

sample_application_06.xfdl

Core features used in the example

getActiveForm: Returns the enabled (currently focused) Form object.

How to implement an example

Configuring Main Screen

Place the Edit component and the Button component. Place the Div component and the Button component inside it.

Creating onclick Event Function of Button Component

In the event function that is called when 2 Button components are clicked, call the check_active_form function again.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.check_active_form();
};

this.Div00_Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.check_active_form();
};

Execute the getActiveForm method in the check_active_form function to display the enabled Form information in the Edit component. In the last Edit02 component, the id value of the parent object of the component (Button) that currently has focus is displayed.

this.check_active_form = function()
{
	var objApp = nexacro.getApplication(); 	
	var objForm = objApp.getActiveForm();
	
	this.Edit00.value = objForm.name;
	this.Edit01.value = objForm.titletext;
	this.Edit02.value = this.getFocus().parent.name;
}

Due to the characteristics of the example, the enabled Form itself has not changed, as the Div component is placed within Form. This is a useful example for placing multiple Forms in the MDI format.

Checking with QuickView

Run it with QuickView (Ctrl + F6) and click the [Check] button and the [Div Check] button to check the displayed information.

Using Google Font

Even if the font is not installed on the user PC, the open font recourse can be downloaded from the web and displayed immediately. Google provides web font information that can be used free of charge through the Google Font site.

The font resource capacity is made not to be big so that it can be used on the web. However, if the network environment is poor, then it may affect the application processing speed.

Google Font uses the WOFF2 file format by default, but some web browsers do not support the WOFF2 file format, so it is downloaded as the WOFF file format. Since there is a difference in file compression rate, the file size may differ depending on the web browser.

https://www.w3schools.com/Css/css3_fonts.asp

Example

When you click the button, the selected font is applied to Form and reflected in each component. However, the Button component maintains the corresponding property value by specifying the font property by itself.

sample_application_07.xfdl

Core features used in the example

userfontid: Sets the UserFont ID to apply to the application.

How to implement an example

Create a new UserFont file. Select the menu [File > New > UserFont] item.

Specify the file name to be created.

To apply the created UserFont file to the userfontid property immediately, change the checkbox below to the checked state.

Check the created file. The example script is created within the comments.

Since Google Font is used in this example, leave the code in the comments untouched.

Access the Google Font website.

https://fonts.google.com

Contents related to the Google Font website are as of May 2024. The usage may be changed according to the later service policy.

https://fonts.google.com

Select the desired item from the font list and click the [Get font] icon.

The selected font can be checked by clicking the shopping cart icon in the upper right corner.

Click the [Get embed code] button.

Select the @import item in the Web tab and copy the @import code.

Paste the copied code into the xfont file created earlier.

/********************************************************************
@font-face {
  font-family : 'NanumGothic';
  font-style : normal;
...
    url(./_resource_/_font_/NanumGothicBold.woff) format('woff'),
    url(./_resource_/_font_/NanumGothicBold.ttf) format('truetype');
}
********************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Chilanka&family=Lobster&display=swap');

The content created in the xfont file is reflected in the bootstrap file. When deploying to the server, the bootstrap file including the index.html file should be updated instead of deploying the xfont file.

Check if the userfontid property value is specified. As it was checked to specify while creating the xfont file in the previous step, the property value should be set as shown below.

Now create the screen to apply the font. Place 2 Button components and place the TextArea, Static components.

Set the font property of the Button component as follows.

Button00: 20px/normal Lobster
Button01: 20px/normal Chilanka

Even if you set the font property, the font is not applied in Nexacro Studio. In Nexacro Studio, only fonts installed on the user PC can be applied.

Write the onclick event function of the Button component as follows.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.font = "24px/normal 'Lobster'";
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.font = "24px/normal 'Chilanka'";
};

Run it with QuickView (Ctrl + F6) and check if the font setting is applied to the component when the button is clicked.