| Table of Contents |
|---|
...
Current Project
It displays the files that the user opened, which can be closed by clicking on the "X" next to each of them. On the other hand, all the files within the current project will appear.
Controls
It contains all the elements that will be used in the creation of our project, such as buttons, labels, checkboxes, etc.
These elements are inserted using Drag&Drop, which makes it easier for the user. Simply drag one to the container in the Drawing section next to it, and upon releasing it, it will be inserted.
Search
At the top of this section, the user can perform a search across all project files. When clicking on one of them, the user is automatically taken to where the result is located.
Example of search:
You can see how the searched word is highlighted in the .js file for better visualization.
Changes
The user will have a history of changes made in the form. When clicking on one of them, the change will appear showing the before and after states. Next to each change, an arrow icon will appear, which will allow the file to return to the state it is in on the server.
Settings
Controls the font size and display style of the code in the files.
...
Change View: Change from design view to code view or vice versa.
Undo Changes: Reverts the changes made by the user.
Redo Changes: Restores the changes made by the user.
Delete Element: Deletes the selected element.
Show Hidden: Displays the elements that are hidden.
Hide Hidden: Stops displaying elements that have the hidden option enabled.
Align Left: This button will align all selected elements to the leftmost element.
Align Top: This button will align all selected elements to the topmost element.
Copy Elements: Copies the elements selected by the user.
...
Controls
Controls Menu
This menu contains a list of all controls or elements used in forms.
...
In this menu, we can modify the properties or attributes of the selected element, such as its identifier, vertical or horizontal position, width, and height, among others.
...
| View file | ||
|---|---|---|
|
Note: Controls to which an event can be added, to redirect it to the code using the button 
, should be filled in the adjacent field, indicating an existing function in the file PROJECTNAME.js.
...
Another functionality of the element properties is assigning an event. The available events that can be assigned are shown in the following image, with a reference name given.
...
ListBox
...
The ListBox control allows users to select one or multiple items from a predefined list. It can display multiple items at once and, optionally, allow the user to select multiple items.
In its properties, you can assign an identifier, change positions and size, and there is a checkbox to hide the element.
...
The Table control allows you to create a table where you can assign columns in its properties. You can set an identifier, change positions and size, and there is a checkbox to hide the element.
...
CheckBox
...
The CheckBox control indicates whether a certain condition is activated or deactivated. It is commonly used to present a Yes/No or True/False selection to the user. By default, the checkbox is checked. If you want to uncheck it, you need to modify its property in the code view.
In its properties, you can assign an identifier, change positions and size, add default text, and there is a checkbox to hide the element.
...