Nexacro Studio UI includes several windows: Application Frame, Project Explorer, Form Design, Properties and Message.
Screen Area | Description | |
|---|---|---|
Application Frame | 1 Menu, Tool Bar | Toolbar that controls the menu area, TextStyle, Alignment, and Object |
6 Status Bar | Status bar indicating Nexacro Studio’s current state | |
2 Project Explorer | Displays construction of Project in process | |
3 Form Design | Editing Design, Source, Script | |
4 Properties | Displays and edits forms and various components, and associated properties such as Dataset and event properties | |
5 Message Window | Displays various messages and search results | |
Application Frame
The Application Frame includes the menu and toolbar. The status bar displays Nexacro Studio's current state.
Menu and Toolbar
The menu bar is a default option, whereas the toolbar may be available based on the user’s setup.
Access the available toolbars by selecting [Menu] File > View > Toolbars.
Checked items are displayed.
You can also select whether to hide the toolbar on the context menu by right-clicking the mouse in the menu/toolbar area.
If you move your mouse to the front part of the toolbar, the mouse will change to a move type cursor. You can then click the area and drag it to another location.
Status Bar
Different status values are displayed in the Nexacro Studio status bar.
Statusbar
Callout | Status Description |
|---|---|
1 | Message Bar that shows the state of Nexacro Studio |
2 | Current mouse coordinates |
3 | Form Coordinates of selected component (Unit: Pixel) |
4 | Size of selected component (Unit: Pixel) |
5 | Status of current file |
6 | Script Insert Mode Status |
7 | <CAPS LOCK> set/clear status |
8 | <NUM LOCK> set/clear status |
Rearranging Windows
All the Nexacro Studio windows can be rearranged or hidden, except the Status bar and Form design window.
Displaying/Hiding Windows
In the Project Explorer window shown below, notice that there are icons to the left of the title row. These icons can be used for closing or hiding the corresponding functions.
Callout | Function |
|---|---|
1 | It automatically hides a relevant window depending on the setting. When the window is hidden, the window's name is displayed as a tap on the right/left side of the screen. The window will appear again when you move the mouse over the tap or when you choose the window on the [View] menu. Depending on the setting, the icon will be changed as follows.
|
2 | It closes a relevant window |
If there are several layers of windows, the windows can be hidden and displayed by tapping on the right/left side when they are set to be hidden automatically.
Check this.
Moving Windows
You can move a window anywhere on the Nexacro Studio interface or on your monitor. If windows overlap each other, simply tap on the one you want to pull to the front of the display.
Check this functionality.
Changing Location
A window can be moved by right-clicking the title bar of the window and dragging it to where you want to place it.
For example, if you use two monitors, you can place the Form design window on the left monitor and the properties window on the right monitor.
Docking Windows
You can also dock a window in the Nexacro Studio UI to another window. You can arrange windows anywhere except the areas for the tool bar and the status bar. Also, you cannot move the Form Design Window.
While dragging a window to another location, if a mouse pointer is placed over another window, you will see an icon that guides you to choose where to re-dock the moving window.
Callout | Docking Function |
|---|---|
1 | Based on the window you are moving, the docking functionality determines the possible docking location. As soon as you place the mouse pointer on the direction option, the designated area will be marked as shown in callout 2. |
3 | Not based on the corresponding window, the docking function determines a location for the window being moved on the whole screen. In the example above, when you choose 1, the properties window is located right above the Form design window. However, when you choose 3, the properties window is placed right under the tool bar. |
Combining Tabs
When re-docking a window, the window can be combined with other windows as a tab, except the Form Design window. A window can be combined with the Form Design window by placing it outside the Form Design window.
Except for the Form Design window, you will see an additional option which tells you that you can choose the middle of the icon when you combine a window with other windows. When you move the pointer to the corresponding area, the area to be combined is highlighted in the corresponding window and you will see the tab on the bottom of the window.
You can move all tabs of the window which includes the combined tab by dragging the title bar of the window. Also, you can move a single tab included in the window by dragging the corresponding tab on the bottom of the window.
Project Explorer
In the Project Explorer window, all items included in the opened project are displayed in tree form.
Callout | Description |
|---|---|
1 | (This looks like a dropdown field.) Enter a search string and press the Enter key or F3. (It is not case-sensitive) |
2 | It displays only filtered values corresponding to the value entered in the search box. When you click the filtering icon after entering a search word, only files which contain the same character string in the service group are displayed. |
3 | Clicking this icon clears the applied filtering function. |
4 | Select a dropdown option corresponding to a service group to which the filtering function will be applied. |
5 | Edit Synchronization Function. Explain |
6 | Displays such project items as TypeDefinition, GlobalVariables, ADL, FDL, etc. |
Project Search
Use the search field to search for files or items included in a project. Type a search word and press the Enter key (or F3). To find the next item, press F3.
When you type "Data" in the search box, search finds the database component designated in the TypeDefinition and the user-created dataset variable in GlobalVariables.
Filter Function
Use the filter icon to display filtered files containing an entered item among properties and files in the Service Group.
Project Search applies to items and files included in the entire project while Filter only applies to user-created files and properties included in the service group.
If form files included in the service group are not opened when you use the Project Search and the Filter, filtering only applies to form file names. However, if you edit form files when you use the Project Search and the Filter, it applies to layouts and script-related properties included in the forms.
in the following example, no form files are currently open. Entering the search word "Drag" and clicking the Filter icon displays the form files whose names include "Drag," 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.
Edit Sync Function
The Edit Synchronization function opens code locations relevant to scripts or layout properties in the selected project elements or forms in the Edit window.
The following table lists the project elements and associated files that will be executed during a sync.
Project Element | File to be executed |
|---|---|
TypeDefinition | default_typedef.xml |
GlobalVariables | globalvars.xml |
ADL | Relevant source file when there is a frame script(xadl) |
Form > Layout | Source tap of a relevant form file |
Form > Objects | Source tap of a relevant form file |
Form > Script | Script tab of a relevant form file |
Form Design
Use the Form Design window to create and edit application screens. It consists of the Design Window, Source Editor, and Script Editor tabs displayed at the bottom of the Form Design Window.
Design Window
Access the Design window, by selecting the Design tab at the bottom of the Form Design window.
You can arrange components anywhere in the Design Window by cutting, copying, pasting, and moving them. The Form Canvas area where you arrange components can be changed to whatever the developer wants.
Design Window
Source Ediitor
Access the Source Editor window by selecting the Source tab at the bottom of the Form Design window.
This window shows all form content except for script content in XML format, where it can be edited directly.
Source Window
Script Editor
In the Script Editor Window, you can edit the form's JavaScript components, such as event handling functions.
Script Window
The functions and events currently in use are listed in the combo box on the upper part of the Script Editor window. Select an item to move to the code location.
Properties Window
Select the Properties window to display and edit form components, Dataset properties, and Style Properties.
Properties Window
Component List
Select the Properties tab at the bottom of the window to access a list of the Form components. Each component is identified by a Component ID and type. For example, Button00 is a button, Dataset00 is a dataset.
Component List
Toolbar
At the top of the window is a toolbar with several useful tools.
Group Sort or Alphabet Sort
Select the Group Sort icon to organize the attributes or events of selected object by group and edit them. When editing by group, you can click on the ‘+’ or ‘-‘ icons to display or hide group members.
Toolbar[Group Sort]
- Select the Alphabet Sort icon to organize the attributes of the selected object by name.
Toolbar[Alphabet Sort]
Editing Target
Attribute Info
Select the Attribute Info icon to edit properties of selected objects.
Toolbar[Group Sort]
Init Info
When you use the MLM function, there might be a case that you should use a designated property value for the initial execution of an application and then use a user-input value or changed value while executing the application 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 .
Toolbar[Group Sort]
Event Info
Select the Event Info icon to edit events associated with the selected object.
Toolbar[Event]
Bind Info
Select the Bind Info icon to bind datasets to properties of the selected object.
Toolbar[Property Bind]
Pseudo
The Pseudo dropdown menu is displayed when the selected objects are components. Use it to check the component design by the status of the component, such as disabled and focused.
Toolbar[Pseudo List]
Style Property Editor
Select the Style Property Editor tab at the bottom of the Properties window to edit the style of a component.
Style Property Editor
Properties | Description | |
|---|---|---|
1 | Component List | Displays all of the form's components, datasets, etc. |
2 | Pseudo List | Displays the Pseudo List so you can edit style properties by each pseudo of the selected component. |
3 | Style Property | Displays Style Properties list of components so that you can edit them. |
For details, refer to chapter 7, [7.6 Style Properties Editor].
Message Window
Output Tab
The Message Window Output tab 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.
Output Window
Find Results Tab
The Find Results tab displays the results of a "Find in Files" action. If you click each file displayed in the window, a related editing window displays the relevant line in the file. Depending on the options selected on "Find results 2 window," the results will be displayed either on "Find Results 1" or "Find Results 2".
Find Result Window
Global Bookmark
Select the Global Bookmark tab 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.
Global Bookmark Window
Use the following toolbar icons to perform various bookmark functions.
Icon | Name | Description |
|---|---|---|
Toggle Bookmark | Sets or clears the bookmark of cursor location | |
Previous Bookmark | Finds previous bookmark and locates the cursor on it | |
Next Bookmark | Finds the next bookmark and locates the cursor on it | |
Previous Bookmark in Document | Finds the previous bookmark on the current editing window and locates the cursor on it | |
Next Bookmark in Document | Finds the next bookmark on the current editing window and locates the cursor on it | |
Clear Bookmark | Clears all set bookmarks | |
Clear Bookmark In Document | Clears all bookmarks set in the current editing window |
You can filter the bookmark list by selecting an option from the Project Filter field.
Project Filter Option | Description |
|---|---|
Show All Bookmarks | Shows all set bookmarks in Nexacro Studio |
Show Bookmarks that marked in Current project only | Shows bookmarks in the current project on list |
When setting or clearing bookmarks in the Global 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.
Debug Window
The Debug window provides functions for troubleshooting application code.
Debugging provided on Nexacro Studio only applies to the Runtime version. If you use a web browser for execution, use the debugging functions offered by the web browser.
Refer to the following links for details about the debugging functions offered by web browsers.
Internet Explorer http://msdn.microsoft.com/en-us/library/ie/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 Tab
Select the Debug tab to display debugging mode messages.
Breakpoints Tab
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. You can navigate to the source location of the breakpoint and disable or delete the breakpoint.
Call Stack Tab
The Call Stack tab displays functions called by the current line in the code in reverse order. When you double-click the relevant item, you can go to the line of code that calls the event.
Double-click the magnifying glass icon on the right side of a line to display the relevant event code in a new window.
Variables Tab
The Variables tab displays variables or object values accessible from the current location in the code.
How to you add/remove variables from this tab? Or are all variables accessible in the current context displayed?
Watch Tab
The Watch tab monitors whether the values of certain variables or objects change.