UX-Studio is divided in to Application Frame. Project Explorer, Form Design, and Properties and Message window.
Composition | Description | |
|---|---|---|
1 | Application Frame | Displays Menu Bar, Toolbar, TextStyle Bar, Alignment Bar, Component Bar, Debug Bar, Source Control Bar, HTML5 Bar, Bookmark Bar, Statusbar, etc. |
2 | Project Explorer | Displays construction of Project in process |
3 | Form Design | Editing Design, Source, Script |
4 | Properties | Displays and Edits Form and various components, properties such as Dataset and event properties |
5 | Message Window | Displays various messages and search results |
Application Frame
Menu and Toolbar of UX-Studio are included in the Application Frame, and there is a Statusbar which displays the state of UX-Studio.
The status values of UX-Studio that are displayed in the Statusbar are as below.
Status | Function |
|---|---|
Message Bar that shows the state of UX-Studio | |
Form Coordinates of selected component (Unit: Pixel) | |
Size of selected component (Unit: Pixel) | |
Status of current file | |
Script Insert Mode Status | |
<CAPS LOCK> set/clear status | |
<NUM LOCK> set/clear status | |
<SCRL LOCK> set/clear status |
Project Explorer
In the Project Explorer, all items included in the opened project are displayed in the tree form, and the composition of Project Explorer are as below.
Description | |
|---|---|
1 | Editing window that can quickly search with search word among items included in Project |
2 | Filtering function that only displays the value that corresponds to the value entered in the editing window |
3 | Clears filter that is applied to the inventory window |
4 | Service Group which will apply filtering function |
5 | Edit Synchronization Function |
6 | Inventory window such as TypeDefinition, GlobalVariables, ADL, and FDL |
Items displayed in Project Explorer is largely divided in to Type Definition, which registers component, service, and prefix of updates, and Global Variables which registers variables you can use wherever in the project, and ADL (Application Definition Language), that manages overall parts of project such as Style, Theme, Main Frame, Tray, and Widget, and Service which is a Form group. You can use it by double clicking items that are possible to edit and call the editor that fits the item.
Form Design
In the Form Design window, you can draw up screens of applications with components that can be used in Project. For Design window consists of Design Window, Source Editor, and Script Editor.
Design
Components can be arranged anywhere that the developer wants to and you can construct screen by cutting, copying, and pasting, or moving and ranging. Form Canvas area where you arrange components can be changed to whatever the developer wants.
Source
In the Source Editing Window, all contents of Form besides Script area are displayed in XML form, and you can directly edit the displayed XML and change the contexts of Form.
Script
In the Script Editing Window, you can fill in event handling formula and user formula of Form and all kinds of components with JavaScript.
Properties
In the Properties, you can display and edit the value of Form or Component you are editing, or the properties of Dataset and the value of event item.
Component List
Shows all component, dataset, animation effect, and etc. that the editing form has in the form of Component ID (Type), and displays them on the list.
Toolbar
Group Sort/Alphabet Sort
This is a Group Sort screen that organizes the attributes or events of selected object by group and edits them. When editing by group, you can click on ‘+’ or ‘-‘ like in the figure and spread or fold items.
This is the Alphabet Sort screen which organizes Attribute of Event of selected object by their names and edits them.
Attribute/Event List
This is the screen of editing attributes of selected object.
This is the screen of event of selected object.
Properties Bind
This is the screen of binding dataset to the properties of selected object.
Pseudo List
This vitalizes when the selected objects are components, and you can check the design by the status of component such as disabled and focused.
Style Properties Editor
This is an editing window which you can input and edit the style properties of properties window intuitively, and the values that are input or edited in Properties Editor automatically applies to the Properties Window.
Properties | Description | |
|---|---|---|
1 | Component List | Displays all components, datasets, animation effects, and etc. that the form you are editing has on list. |
2 | Pseudo List | Displays Pseudo List so that you can edit style properties by each pseudo of selected component. |
3 | Style Properties | Displays Style Properties list of components so that you can edit them intuitively. |
For details, refer to Style Properties Editor.
Message Window
Output
Message Window displays all kinds of messages that can appear while working with UX-Studio. All kinds of errors, processes, and message displays are included in message.
Debug
Debug window shows all messages that occur in the debugging mode.
Find Results
This displays the results of Find in Files order. If you click each file displayed on window, related editing window will appear and the relevant line will be displayed, Depending on the checked options of ‘Find results 2 window’, the results will be displayed on ‘Find Results 1’ or ‘Find Results 2’.
Global Bookmark
This shows the Bookmark list that was used in source or script editing 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.
Icon | Name | Description | |
|---|---|---|---|
1 | Toggle Bookmark | Set or clear the bookmark of cursor location | |
2 | Previous Bookmark | Finds previous bookmark and locates the cursor on it | |
3 | Next Bookmark | Finds the next bookmark and locates the cursor on it | |
4 | Previous Bookmark in Document | Finds the previous bookmark on the current editing window and locates the cursor on it | |
5 | Next Bookmark in Document | Finds the next bookmark on the current editing window and locates the cursor on it | |
6 | Clear Bookmark | Clears all set bookmarks | |
7 | Clear Bookmark In Document | Clears all bookmarks set in the current editing window |
You can filter the bookmark list by controlling the option of Project Filter. Also, Project list with bookmarks will be displayed on the option window additionally besides the options below.
Option | Description | |
|---|---|---|
1 | Show All Bookmarks | Shows all set bookmark in UX-Studio |
2 | Show Bookmarks that marked in Current project only | Shows bookmarks in current project on list |
When setting or clearing bookmark in the Global Bookmark window, it will be applied directly to the relevant editing window, and the Bookmark list is managed separately in UX-Studio so when you copy the projects done in other locations bookmark will not be shown.
Debug Window
Breakpoints
This displays the list of breakpoint that are used in the script editing window. When you double click on the breakpoint displayed on the list, the editing window will appear and the relevant line will be displayed.
Menu | Icon | Function | |
|---|---|---|---|
1 | Go To Source | Opens the relevant edit window for the selected breakpoint and displays the relevant line | |
2 | Delete | Clears selected breakpoint in the breakpoints window | |
3 | Delete All | Deletes all breakpoints | |
4 | Enable/Disable | Enables or Disables selected breakpoint in the breakpoints window | |
5 | Enable/Disable All | Enables or Disables all Breakpoints |
Breakpoint list is managed separately in UX-Studio so if you copy projects done in other locations, breakpoint will not be shown.
Call Stack
It is a message window that shows the order of called script function when debugging in UX-Studio. When you double click on the item in Call Stack, editing window will appear and the relevant line will be displayed.
Column | Description | |
|---|---|---|
1 | Function | Name of the function which the cursor is located currently |
2 | Filename | The file name where the function is located |
3 | Line | Number of the file line |
Variables
This is the window that displays the variables used in the function where the cursor is located when debugging in the UX-Studio.
Column | Description | |
|---|---|---|
1 | Name | Name of Variable |
2 | Value | Value saved in the variable |
Watch
This is the window where user can check the variables by entering the name of it directly to check the variables used in the script easily when debugging in UX-Studio.
Column | Description | |
|---|---|---|
1 | Expression | The name of variable that the user input |
2 | Value | Value saved in the variable |