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.

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.

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.

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.

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.

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.

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.

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.

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.

StringResource

If you want to apply multiple languages, you can set the property value related to texts of the company to be referenced by a StringResource. You will only see a list of properties that support multiple languages.

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. When a property is no longer used, select [Remove Property Value] 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=""/>

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 user properties to components that can be placed on the design surface (Visible Component), Dataset objects, Grid component sub-controls (GridCellControl, CellSubCellControl), and ListView component sub-controls (ListViewCellControl).

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 Edit Color 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.

You can set the below-mentioned border-related properties through Preset buttons.

Set Font

Nexacro 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 N 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.

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.

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.

• 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.

• 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.

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".

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.

Debug Window

The Debug window provides functionalities to find bugs in code.

Debug

Select the Debug pane to display debugging mode messages.

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.

• 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.

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.

• 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.

• Call tracking

  You can track operations stretching into a called function within the call stack structure.

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.

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.

• 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.

• 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.

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.

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.