| 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.
...
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.
Use of
...
Controls
Container
...
The Container control represents rectangular boxes or spaces. HTML content can be inserted into them. Its main purpose is visual, allowing organization, structure, and design of the form.
...
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.
...
Another functionality of the element properties is the ability to assign an event. In the following image, you can see the events that can be assigned to the element, always giving them a reference name.
...
Upload File
...
Its functionality is to allow the user to upload local files when using the form.
...
This control allows you to add a div to load an image into the form.
...
Icons
...
This control allows you to add a div to insert an icon into the form.
...
Note: Files in red indicate that they have been modified and not saved.
...
Files that are created by default in the project
JS
A .JS file where the logic of the form, written in JavaScript, will be placed.
Config.html
Another file that will be created is config.html, which handles all the configuration of the form, including necessary plugins, JS, stylesheets, etc.
...