Largely, Nexacro Studio has Project Explorer, Properties Windows, Message Window and Debug Window as dockable windows. You can check available dockable windows at [View] in the command bar interface or at [VIEW - Panes] in the ribbon interface.
Project Explorer
In the Project Explorer window, all items included in the opened project are displayed in tree form.
Callout | Description |
|---|---|
1 | Select a service (or entire project) to apply the search and filter functions |
2 | Search keyword input window to apply the search and filter functions Enter a search string and press the Enter key or F3. (It is not case-sensitive) |
3 | Sequentially display results identical to the value entered in the search box. |
4 | Display only filtered results corresponding to the value entered in the search box. If you click the filter icon after entering a search keyword in the search key input window, then only files containing the character string that matches the search keyword or services containing files will be displayed on the screen. |
5 | Display files and other constituents that are included in a project. |
Search
The search for files and sub-elements contained in the project is processed. After entering the search keyword, press the enter key (or F3 key) to proceed with the search immediately, and to proceed with the next search, press the F3 key.
Enter the search keyword 'TEST' and click the search icon to select items containing ‘TEST’ from the Dataset object of Application Variables and from the Base service in order.
Filter Function
Use the filter icon to display filtered files containing an entered item among properties and files in the Service.
in the following example, no form files are currently open. Entering the search word "form" and clicking the Filter icon displays the Form files whose names include "form," but none of the components in those Forms.
By naming files based on tasks in the project, the Filter function can be useful for easily finding files relevant to your task.
If form files included in the service are not opened when you use the Project Search and the Filter, filtering only applies to form file names. However, after form files are opened, it applies to layouts and script-related properties included in the Forms.
Project search targets the items, files, and items included in files in the entire project, but the filter function only targets files created by the user within the service.
Copy
If you copy and paste an item in the Project Explorer or Resource Explorer, a copy of the item will be created with the string "_copy" attached to the end of the file name. The below table presents copyable objects.
Project Explorer | Form |
|---|---|
Resource Explorer | InitValue UserFont ImageResource |
When you copy a default theme under the NexacroTheme field to the Theme field, the file name will not change. If you try to copy an already-copied default theme, you will be asked to override the existing file. If you select "Rename" at this point, another copied theme will be created with the string "_import" attached to the end.
Resource Explorer
The Resource Explorer displays the resources held by the current project. In addition, you can create new resources or import existing files through the explorer.
Items | Description | |
|---|---|---|
1 | New Resource | Creates a new resource file |
2 | Import Resource | Adds the previously created resource file to the project or selects the xpackage file and runs the Import Wizard. |
Properties Window
Select the Properties window to display and edit form components, Dataset properties, and Style Properties.
Object List
All components, Datasets, etc. included in the Form being edited are shown as a list of id values (object names). Depending on the selected object, it is displayed differently in the list of properties and events below. You can also select specific objects on the design screen.
Component List
Sorting Type
- Categorized
Select the Categorized icon to sort the properties or events of a chosen object by category. In this mode, you can expand or collapse each category by clicking the ▶ or ▼ icon.
- Alphabetical
Select the Alphabet Sort icon to organize the properties of a selected object by name.
Editing Target
- Property
Select the Attribute Info icon to edit properties of selected objects. Nexacro Studio emboldens two types of values: one is those are automatically added to the XML file when an object is created and the other is those are edited by users.
<Property mandatory=""/> in a meta-info file determines the values that are automatically added to the XML file when an object is created.
properties_property
- Event
Select the Event Info icon to edit events associated with the selected object. You can create an event either by double-clicking an input box or by selecting an item from a drop-down menu.
properties_event
- Bindable
Select the Bind Info icon to bind Datasets to properties of the selected object. To perform binding, you need to specify a Dataset ID in the first combo box and a column ID in the second combo box.
properties_bindable
- Initialize
There might be a case that you should use designated property values for the initial execution of an app and then use user-input values or changed value while executing the app later on. This kind of value should be separately managed by the Init Info property. Some of these items (except for a value relevant to Layout Information) can be edited by selecting the Init Info icon.
properties_initialize
empty value
If a property is given an empty string ("")as its value, the property will be accompanied by the <empty value> tag in the Properties pane. As the tag is intended just for clarity, it will not affect the actual property value. Upon clicking an editable field marked with <empty value>, the tag will disappear as the field has got ready to accept an input.
If you want to designate the property value as the empty character string, then select the [Set Empty Value] item from the context menu. To delete the property with the empty character string value, select the [Remove Property Value] item from the context menu.
Properties labelled with the <empty value> tag are written in the Source tab of the Form design panel as presented below.
<Button id="Button00" taborder="0" left="348" top="124" width="152" height="66" text="" tooltiptext=""/>
The <empty value> tag is marked only for the properties whose values are strings. For example, position properties have numerical values so the context menus from those properties deactivate the items related to <empty value>.
Computed Style
Clicking the Computed Style tab on the bottom of the Properties window switches the pane, allowing you to check the style-related values as calculated after factoring in theme and CSS files. The values presented in the Computed Style window are the ones that actually apply to the application. In the below picture, "beige"—the value of the background property—is emphasized in bold type. This indicates that the value has been modified by the user through the Properties window.
You cannot change the values presented in the Computed Style window because they are just the reflections of the results calculated by Nexacro Studio. If you want to change the values, you need to modify relevant theme or CSS files, or change the relevant style-related properties. Then, the Computed Style window will automatically show the changed values.
The Properties window also presents the computed style value on its bottom when you select a certain style-related property.
User Property
You can add an user property not to a Form but to any component including a Dataset. Select [Add User Property] by opening a context menu from the Properties window.
With the "Add User Property" window opened, you will be prompted to enter the "Name" and "Value" values, which are in the form of a string.
If the relevant component already has a property of the same name, an error message will pop up.
You cannot use JavaScript reserved words for the name of an user property.
The created property will be added under the "User Properties" category.
Editing Complex Property Values
If you know the property value to set, then you can enter it directly into the edit window, but it is difficult to do so if you have to select from a list like color value or if multiple property values need to be reflected in a complex manner. For such properties, a separate edit window for editing property values is supported.
Color Picker
You can select a color from the Combo list or Color Picker.
With the Color Picker, you can specify various colors by using multiple techniques as well as define user colors for reuse later on.
gradient
You can open the Gradient dialog box to edit the linear-gradient value of the background property. You can specify the direction of a gradient through the [angle] option and gradient colors through the [color-stop] option. You should use the Color Picker to specify gradient colors.
In the [color-stop] option, you can edit or delete colors by right-clicking each color mark.
Set Border
You can edit border-related properties of a property through the Border Editor. You can open the editor by clicking the button at the end of the edit field of the border property.
The Border Editor will be opened as a pop-up.
Callout | Description | |
|---|---|---|
1 | Border value | It is a field where you can see or change specified property values. |
2 | Border | This section shows property values separately, while you can change those values in this field too. |
3 | Preview | This section allows you to see specified property values visibly. You can apply what you set in the Border section to intended sides by clicking Preset buttons. |
4 | Detail | This section allows you to set properties for each side of a component. This section can expand/collapse. |
5 | Description | This section shows the restrictions pertinent to border-related properties |
You can set the below-mentioned border-related properties through Preset buttons.
Set Font
Nexacro Platform apps do not have their own fonts. They use the fonts installed with the operating system. You can prioritize available fonts so that you can find them more easily when developing apps.
In the font edit window, you can edit property values, such as font, size, and style, and check the applied status in advance.
Entering Multiple Lines of Text
When multiple lines of text can be entered for property value, a drop-down button is displayed on the right side of the property input window. A window where you can edit multiple lines of text is displayed by clicking the button. Press the Ctrl+ENTER keys to change lines.
Editing Shortcut Keys
When editing the hotkey property value of the component, an edit window where you can select the key that can be combined for the property value editing is supported.
Editing the innerdataset Property Value
The innerdataset property value can be set by selecting the Dataset object. If you are only using it in the corresponding component and processing simple values, then you can directly edit innerdataset. Functions to add, insert, and delete Row, and to set the codecolumn and datacolumn values are provided.
After adding the innerdataset property value and saving, the codecolumn and datacolumn property values are set to "codecolumn", "datacolumn".
Editing the formats Property Value
The formats property value of the Grid and ListView components can be edited. You can run the edit window by double-clicking the component in the design screen or selecting the formats property value in the property window. Please refer to the link below for more information on the formats property value edit window.
Grid Contents Editor ListView Contents Editor
Filtering
If there too many properties presented in the Properties window, you can quickly find your desired items by using the filtering feature. The pane will show every item that includes the match of your input text.
You can use multiple filtering items using the comma (,) separator.
Quick Link to Help
You can use this function by accessing [Help > Help] or pressing the F1 key with a certain property selected. If you do so, the help (Nexacro 17 Reference Guide) will be called with the property name automatically entered in the input box of the Index section, allowing you to easily find the necessary information.
The first page of the reference guide will be opened if the Properties window is not focused.
Copy Property Name
Right-click a property name from the Properties pane and select Copy Property Name from the context menu to copy the name onto the clipboard. Likewise, select Copy Property Description to copy the description of a property onto the clipboard.
Checking the Meaning of the Font in which Property Value is Displayed
Depending on the status of the property value, the property value is displayed in different colors and styles. A legend for this is displayed when clicking the [?] button at the top right of the property window. You can see a brief description at the bottom of the window by selecting each item.
The priority and description of each item are as follows.
Priority | Item | Description |
|---|---|---|
1 | Current Layout Value | The value entered in the layout selected in the tool design form |
2 | Default Layout Value | The value entered in the default layout |
3 | Form Initialize Value | The Initialize value entered in the form Initialize window |
4 | ENV Init Value File Value | The value that exists in initvaluefileid entered in Environment |
5 | Component(Metainfo) Default Value | The component default value saved in the MetaInfo file |
The figure below is a case of adding a layout to the form and applying each property value. Fonts are displayed as described in the legend depending on the status of the property value.
In the case all of the above items are applied to the text property value, the final value is reflected according to the priority. For example, if you delete the value entered in the current layout, then the default layout setting value, which is the next priority, is reflected.
Please refer to the link below for the initvalueid setting.
InitValueDefiniton
Message Window
Bookmarks
Select the Bookmarks pane to show the bookmark list that was used in the Source or Script Editor window. If you double-click on the bookmark displayed on the list, the related editing window will appear and the relevant line will be displayed.
Use the following toolbar icons to perform various bookmark functions.
Name | Description | |
|---|---|---|
1 | Check Box | If unselected, the bookmark is excluded from search. |
2 | Toggle Bookmark | Sets or clears the bookmark at the current cursor location |
3 | Delete Bookmark | Removes the selected bookmark |
4 | Previous Bookmark | Moves cursor to the previous bookmark location |
5 | Next Bookmark | Moves cursor to the next bookmark location |
6 | Delete All Bookmarks | Clears all bookmarks |
7 | Previous Bookmark in Document | Moves cursor to the previous bookmark location in the current the current document |
8 | Next Bookmark in Document | Moves cursor to the next bookmark location in the current the current document |
9 | Delete All Bookmarks in Document | Clears all bookmarks in the current document |
10 | Go to Bookmark | Moves the cursor to the line of a selected bookmark |
11 | Enable/Disable Bookmark | Includes/excludes all the selected bookmarks when you are searching |
12 | Enable/Disable All Bookmarks | Includes/excludes all the bookmarks when you are searching |
13 | Project Filter | Filters bookmarks according to services (if you select "Show All Bookmarks", all the bookmarks within a project will be displayed.) |
Clicking the Delete Bookmark icon removes the bookmarks whose rows are selected rather than whose checkboxes are selected. In the below picture, for example, rows will turn blue and the Delete Bookmark icon will be activated when they are selected.
When setting or clearing bookmarks in the Bookmark window, the change will be applied directly to the relevant editing window. The bookmark list is managed separately in Nexacro Studio, so when you copy projects done in other locations, bookmark will not be shown.
Add/Delete
In the Source, Script or XCSS editor, you can open the mini-toolbar for bookmarks by right-clicking a line. Then, selecting [Toggle Bookmark] will add/delete a bookmark. You can do the same task with the Bookmark toolbar on the menu area on the top of Nexacro Studio or with the Bookmarks pane.
Search
You can go through bookmarks in the filtered range by clicking the [Previous Bookmark] or [Next Bookmark] buttons. Moreover, you can look over only the bookmarks within the opened editor by clicking the [Previous Bookmark in Document] or [Next Bookmark in Document] buttons. The bookmark-searching features work in the same way as [Go to Bookmark]: they open a corresponding editor window and go to the relevant line.
Unchecked bookmarks are excluded from the list to seek.
Project Filter
You can filter bookmarks by designating a service.
Output
The Output pane displays output messages that may be displayed while working with Nexacro Studio. These messages contain information about errors, processes, and the operation of Nexacro Studio.
Error List
This window displays--on a real time basis--errors, warnings and information that occur when users work on scripts or sources. The three toggle buttons on the toolbar are used to filter messages by types.
Callout | Description |
|---|---|
1 | Filtering to show error messages |
2 | Filtering to show warning messages |
3 | Filtering to show information messages |
4 | Space for displaying messages and related information |
Find Result
The Find Result displays the results of conducting the menu [Edit > Find in Files]. If you click each file displayed in the window, a related editing window displays the relevant line in the file. Depending on whether you select the option "Find result 2 window," the results will be displayed on "Find Result 1", "Find Result 2" or "Find Result 3".
Call-out | Name | Description |
|---|---|---|
1 | Go to Source Code | Goes to the line corresponding to the selected search result |
2 | Previous | Goes to the line corresponding to the previous item of the selected search result |
3 | Next | Goes to the line corresponding to the next item of the selected search result |
4 | Clear All | Deletes all the search results |
5 | Find Canceled | Cancels the process of file search (If too many files are being found within a project, you can cancel the search in the middle using this function). |
6 | multikey filter | You can search within results by adding keywords. You can enter multiple keywords by dividing them with commas, whitespaces or semicolons. |
Clicking the Previous or Next button will select a certain item and move you to the relevant line in source codes. You can conduct the same action by selecting a certain item and then clicking the Go to Source Code button.
Reference
You can search for references to a certain character string in a script. First, select a character string you want to find and click [Find Reference] from the context menu of the script window. Then, Nexacro Studio will look for the references to the character string within the relevant project and display search results on the Reference window. If you double click one of the results, you can go to the relevant location with the pertinent editor opened.
Name | Description | |
|---|---|---|
1 | Go To Source | Goes to the relevant reference |
2 | Refresh | Searches for references again (The refresh commend is needed when values have been changed or when strings have been added or changed). |
3 | Clear All | Deletes all the search results |
Debug Window
The Debug window provides functionalities to find bugs in code.
Debugging provided by Nexacro Studio only applies to the NRE. If you use a web browser for execution, use the debugging functionalities offered by the web browser.
Refer to the following links for details about the debugging functions offered by web browsers.
Internet Explorer https://msdn.microsoft.com/library/gg699336(v=vs.85).aspx
Google Chrome https://developers.google.com/chrome-developer-tools/docs/javascript-debugging
Firefox https://developer.mozilla.org/en/docs/Debugging_JavaScript
Debug
Select the Debug pane to display debugging mode messages.
debug_message_pane_3
Breakpoints
In debugging mode, you can designate where to pause during script execution. These designated locations are called "Breakpoints." You can see breakpoints listed in this window.
With the breakpoint list, you can move to relevant code lines as well as deactivate or remove breakpoints. Moreover, you can set conditional breakpoints or set the debugger to ignore certain breakpoints.
The data on breakpoints is managed by the Nexacro Studio installed in your computer. Therefore, breakpoints of a certain project will be lost if you open the project in another computer.
breakpoint_pane
Call-out | Description | |
|---|---|---|
1 | Toggle Breakpoint | Sets or removes a breakpoint |
2 | Set Conditional Breakpoint | Sets or removes a conditional breakpoint |
3 | Edit Breakpoint | Edits the condition for activating the selected breakpoint |
4 | Delete Breakpoint | Removes the selected breakpoint |
5 | Delete All Breakpoints | Removes all breakpoints |
6 | Go To Source | Moves to the relevant line of code after the containing script window opened |
7 | Enable/Disable Breakpoint | Enables/disables the selected breakpoint |
8 | Enable/Disable All Breakpoints | Enables/disables all breakpoints |
9 | Breakpoint List | Displays the breakpoint list (You can deselect breakpoints that you will not apply for debugging.) |
Breakpoint Add/Delete
With the script editor opened, clicking the Toggle Breakpoint button on the toolbar will leave a marker on the front end of a line where the cursor is placed. Afterward, the relevant item of information will be added to the Breakpoints pane.
If you want to remove a breakpoint, go to the relevant marker and press the Toggle Breakpoint or Delete Breakpoint button.
Conditional Breakpoint Add/Delete
With the script editor opened, clicking the Set Conditional Breakpoint button on the toolbar will leave a marker on the front end of a line where the cursor is placed. Afterward, the relevant item of information will be added to the Breakpoints pane. A conditional breakpoint basically works in the same way as an unconditional breakpoint. However, the difference is that you can add a conditional expression and number of ignore.
script_pane_conditional_breakpoint
A conditional breakpoint can be deleted in the same way as an unconditional breakpoint. If you want to remove a breakpoint, go to the relevant marker and press the Toggle Breakpoint or Delete Breakpoint button.
Call Stack
The Call Stack pane displays the functions called up to the current line of code in reverse order. When you double-click the relevant item, you can go to the line of code that calls the event.
callstack_01
Call-out | Description | |
|---|---|---|
1 | Function | Names of the called functions |
2 | File | Names of the files that contain the functions. A tooltip shows the full path to the file. |
3 | Line | Numbers of the lines where the functions are declared |
4 | Quick Show Function | Shows a file that contains the function. The file is presented through an independent window. |
See sources
Double-clicking a search (magnifier) icon on the last column opens an independent window that shows the relevant event codes. This is only for reading so you cannot edit the source codes.
callstack_02
Call tracking
You can track operations stretching into a called function within the call stack structure.
callstack_03
Variables
The Variables displays variables or object values accessible from the current location in the code. For the objects that include their members, you can use the expand/collapse button (+/-) to see members. Changed values are marked in bold red.
variables_pane_01
Watch
The Watch pane monitors whether the values of certain variables or objects change. You can add a new item by double-clicking the last row.
The data on a watch list is managed by the Nexacro Studio installed in your computer. Therefore, a watch list of a certain project will be lost if you open the project in another computer.
watch_pane_01
Watch Add/Delete
If you want to add an object or variable to the Watch list, click the + button or double-click the last row (which reads "Input Expression"). Moreover, you can conduct the addition from a script editor. After drag-selecting the name of an object or variable, drag and drop the name onto the Watch pane or right-click to select "Add Text to Watch" from the context menu.
If you want to delete an object or variable from the Watch list, select an item on the Watch pane and click the - button or press the Delete key on the keyboard.
Script Editor
The script editor of Nexacro Studio provides the Assist Tip and Inline Assist Variable features to help users conveniently see the values of objects and variables during debugging.
Assist Tip
The Assist Tip feature presents the information on an object or variable in the form of a pop-up box when you hover a mouse pointer over the relevant item on the script editor. If the relevant item is a variable, the pop-up will simply show its value. If the item is an object, however, the pop-up will show the members of the object and their values in a tree view.
assist_tip
assist_tip_variable
Inline Assist Variable
The Inline Assist Variable feature presents the information on all the included objects and variables ranging from a function declaration up to the current breakpoint. The information is displayed on the right side of each item in the script editor.
assist_inline_variable
If you double-click the function where a breakpoint is set or a related function from the Call Stack pane, the relevant script editor will be opened, showing the values of all the objects and variables defined until the relevant function.
inline_assist_variable_2
Form, Show Thumbnail
To see a thumbnail, open the context menu or press the shortcut (CTRL+ALT+P) after selecting a Form in the Project Explorer or an image in the Resource Explore.
Select a Form and choose [Show Thumnail] from the context menu to take a quick look at the design of the Form. This preview lasts for about two seconds and then disappears.
Since the preview is based on the generated file, a thumbnail will not be displayed if there is no relevant generated file or the Form fails to be loaded.