To execute a project in the Nexacro, you are required to convert the project into the executable form. To test the converted project, furthermore, you need to choose an execute mode depending on which environment you want to test. Therefore, this chapter touches upon project build and execution.
Project Generation
Generation
If you have a file that is edited with Nexacro Studio, you need to convert that file into a JavaScript file for execution. In this manual, the action of such converting is called "generate."
Generate Application
This function generates an application.
You can use This function by accessing [HOME > Generate > Application] in the ribbon interface or [Generate > Application] in the command bar interface.
The files registered in Services in TypeDefinition do not belong to a certain application. Therefore, such files will always be generated regardless of a selected application.
Generate Theme
This function generates themes.
You can use This function by accessing [HOME > Generate > Theme] in the ribbon interface or [Generate > Theme] in the command bar interface.
Generate Service
This function generates the files registered in Services in TypeDefinition.
You can use This function by accessing [HOME > Generate > Service] in the ribbon interface or [Generate > Service] in the command bar interface.
Generate File
This function generates the file relevant to an activated view or selected in the Project Explorer.
If there is an activated view, you can use This function by accessing [HOME > Generate > File] in the ribbon interface or [Generate > File] in the command bar interface. If there is no activated view, the foregoing menus will be inactive.
You can also employ This function by right-clicking a file in the Project Explorer and select [Generate File] from the context menu.
Regenerate
As for the "generate" feature, Nexacro Studio does not convert the files that already exist in the designated directory and that have not been changed. However, the "regenerate" feature converts all files regardless. You can employ This function by accessing [Generate > Regenerate].
Automatic Generation
If you want to open and edit a project in Nexacro Studio, you need a generated project file. Therefore, Nexacro Studio will automatically generate files when it performs the following tasks.
Loading a project
Creating a file
Saving a file after modification
Before executing Deploy
Before launching QuickView
Project Execution
The outcome developed with Nexacro Studio can be executed on the Nexacro. Nexacro Studio provides two related features: Launch for executing an app and QuickView for a Form.
Execution Mode
You can set the execution mode by accessing the "browser combo," located in [HOME > Launch] in the ribbon interface or situated on the toolbar in the command bar interface.
The dropdown list of the "browser combo" only shows the web browsers that are installed in the user's PC and supported by Nexacro Studio.
NRE (Nexacro Runtime Environment)
Nexacro can operate in the Nexacro Runtime Environment (NRE), 32-bit or 64-bit, with the nexacro.exe file provided as an executable. You can execute an app by directly accessing the created files without a web server.
Emulator
Nexacro Studio provides an emulator that allows you to see how your form is executed according to varying devices and screen settings. You can test various execution conditions conveniently while you still design your forms.
Call-out | Description | |
|---|---|---|
1 | Screen List | Shows the screen definition list |
2 | Orientation | Changes the orientation of the screen—horizontal or vertical—when the screen type is a tablet or phone. |
3 | Size | Screen size |
4 | Show Output | Toggles the Output pane |
5 | Reload | Reloads the current screen |
6 | Preview | Previews the current screen |
7 | Output | Shows errors and other messages |
Web browser
You can try your app on a web browser. You can launch your app on the web browsers installed in your computer. If you use a mobile device, you can enter the URL of your app to a web browser in the mobile device.
Launch
Launch is a feature used to execute a Nexacro-based app. You need to specify a screen and then select an execution mode.
To use This function, you need to access the menu [HOME > Launch > Launch] in the ribbon interface or [Generate > Launch] in the command bar interface. If you select a web browser as the execution mode, a pop-up will appear to ask you a URL in which your application is located. After you enter the URL, your Nexacro application will run on the selected web browser. If you use Local Web Server, the URL dialog will fetch the value designated as "Server Host Url" in the menu [Tools > Options > Project > Launch].
Assume that you select the Web Server option in the menu [Tools > Options > Project > Launch]. In this case, the below window will appear to allow you to enter a URL if you neither specify a preset URL nor select [Display run configuration on Launch / Quickview].
If you want to see the Run Configuration window presented below, you need to access the menu [Tools > Options > Project > Launch] and select the option [Display run configuration on Launch/Quickview].
When the [?] button next to the Use Nexacro Runtime Browser execute parameters item is clicked, then the following help item is executed.
Misc. Objects > System > Method > execNexacro
QuickView
If an activated view is the Form editor, you can run QuickView. In addition, you can also operate QuickView by activating the Project Explorer and then selecting a certain form in the tree.
You can use QuickView by accessing [HOME > Launch > QuickView] in the ribbon interface or [Generate > QuickView] in the command bar interface.
Managing Bootstrap Template
The automatically generated bootstrap HTML file can be created by applying the template with the code required by the user. Select the menu [Generate > Bootstrap Customize] item and edit the template content to reflect the automatically generated bootstrap file.
The bootstrap template allows you to manage the 5 files below.
File | Description |
|---|---|
index.html | It is created during Web Browser distribution file Packing. It is deployed on the server without any parameters and executed when the file URL is accessed. |
launch.html | This file is used when executing [Launch] in Nexacro Studio. It is created during Generate and is not used during deployment. It receives screenid as a parameter and executes it. |
quickview.html | This file is used when running [QuickView] in Nexacro Studio. It is created when generating and also when packing the web browser distribution file. It receives screenid and formname as parameters and executes it. |
popup.html | This file is used when modeless window is executed with the nexacro.open method. It is created when generating and also when packing the web browser distribution file. |
run.html | It is created when packing the Android and iOS operating system distribution file. If the Update Type is "Server", it is created as a Run.html file, and in the case of "Update" or "Local", it is created in a compressed form within the Run.zip file. |
The basic functions of Bootstrap Customize are as follows.
Item | Description | |
|---|---|---|
1 | Bootstrap Template List | Selects the bootstrap template to edit. |
2 | Bootstrap Template Edit | Edits the content of the selected bootstrap template. The required keyword is marked with blue "!" next to the line number and a warning message is displayed at the top of the edit window when the required keyword is edited or deleted. |
3 | Bootstrap Template Reflect | Saves the created template content and regenerates the project bootstrap file. |
4 | Bootstrap Template Initialize | Provides 2 initialization options. You can revert the currently open bootstrap template to the default or the entire bootstrap template to the default. |
Creating a Template with Script Code Added
If you want to implement a function that receives a specific language code using a URL parameter, then you can add the code to the template as shown below.
1
Select the menu [Generate > Bootstrap Customize] item and execute Bootstrap Customize.
2
Select the quickview.html file from the bootstrap template list.
3
Add the following code to oninitframework function under the script tag.
nexacro._lang = urlParams.lang;
4
Click the [OK] button to close the window and create the bootstrap file again.
5
Open the quickview.html file generated in the path designated as Generate Path in the text editor to check whether the added code is reflected when creating the file.
Cautions when Editing Bootstrap Template
Editing or Deleting Keyword
Editing or deleting keyword items is not recommended. If you edit or delete the keyword, then a warning message is displayed in the bootstrap edit window as shown below. In the figure below, the #{FRAMEWORK_LIBRARY} item is edited as #{FRAMEWOR_LIBRARY}.
Even if a warning message is displayed, then it can be reflected after saving. When the [OK] button is clicked, then it will be checked once more.
When the generated code is executed, the framework library cannot be called normally and it is processed as an error.
Editing the Default Script
Functions such as nexacro._initHTMLSysEvent and nexacro._loadADL are parts that call functions specified inside the Nexacro framework, so deleting or relocating functions may affect the app execution. It can be modified to the extent that it does not affect the execution of the app.
Note
Bootstrap Template Configuration File Path
When the bootstrap template is set, a configuration file is created in the project path. To share the bootstrap template file, the configuration file and the project file (XPRJ) must have the tag that specifies the configuration file.
[project path]\bootstrap.xml
The tag is added to the project file (XPRJ) as shown below.
<?xml version="1.0" encoding="utf-8"?> <Project version="2.1"> ... <BootstrapCustomize url="bootstrap.xml"/> </Project>
Keyword List
Keyword | Description |
|---|---|
#{DOCTYPE} | DOCTYPE tag generation |
Environment Information | |
#{LANGUAGE} | Creates the HTML property tag according to the local property value |
#{META_CHECKVERSION} | Creates the meta tag according to the checkversion property value If the value is not set, then the tag is not created. |
#{FAVICON} | Creates the link tag according to the icon property value If the value is not set, then the tag is not created. |
#{USERFONT_STYLE} | Creates the tag according to the userfontid property value If the value is not set, then the tag is not created. |
Project Information | |
#{FRAMEWORK_LIBRARY} | Creates the framework js file script tag |
#{COMPONENTS_LIBRARY} | Creates the component js file script tag |
#{ENVIRONMNET_LIBRARY} | Creates the environment.xml.js file script tag |
#{SCREEN_INFORMATION} | Processes the Screen configuration information |
#{USERFONT_INFORMATION} | Processes the xfont configuration information |
Run.html | |
#{MOBILE_LIBRARY} | Creates the archivefiles.js file script tag |
#{PROJECT_URL} | Project URL entered by the user |
Splash Loader
If the Set Splash Loader item is checked in the option [Project > Generate > General] item, the script that displays the Splash Loader is activated.
Keyword | Description |
|---|---|
#{SPLASH_DEFINE_STYLE} | Defining the Splash Loader UI |
#{SPLASH_SHOW_STYLE} | Splash Loader UI display area settings |
#{SPLASH_HIDE_STYLE} | Hiding the Splash Loader UI after loading |
If you want to change the Splash Loader UI, change the #{SPLASH_DEFINE_STYLE} keyword to a style tag.
If you delete the #{SPLASH_DEFINE_STYLE} keyword, a warning message will be displayed at the top of the Bootstrap Customize window and a Confirm window will also be displayed upon saving. If you've written the style tag properly, it won't affect the behavior.
The class name "loader" is defined in the #{SPLASH_SHOW_STYLE} keyword. If you want to modify the class name, you must also change the #{SPLASH_SHOW_STYLE} keyword to a tag.
<!-- SPLASH_DEFINE_STYLE : Defines the style of the splash screen that is visible while modules are loading -->
#{SPLASH_DEFINE_STYLE}<!-- SPLASH_DEFINE_STYLE : Defines the style of the splash screen that is visible while modules are loading -->
<style>
.loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #111111;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>