General view

Once the new project is created, the following will be visible.

Open

General Menu

On the left side of this screen, you can see the general menu, which is divided into five sections:

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

  Open

  

   

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

Files

On the top left of the screen, the following buttons can be observed:

From left to right:

• New project

• New file

• Upload file

• Delete

Synchronize

Next, the following panel of buttons located in the upper right corner.

From left to right:

• Deploy: Saves the changes in the currently opened file.

• Download: Downloads the last saved change of the file.

Tools

When opening the main .html file of our project (its layout), another panel of buttons will be displayed:

From left to right:

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

To use them in the forms, click on the desired control and drag it to the container where you want it to be positioned.
Once the controls are inserted in the workspace, they can be selected to open their properties, adjust their size using Drag & Drop, and move them to the desired location. The user can select multiple controllers by clicking on them, and they can be moved together. To deselect them, the user must click on them.

Properties Menu

The properties menu of the element can be opened by double-clicking on the desired element or by clicking the arrow in the upper right corner of the screen.

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.

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.

By default, the new project already has a container. If you want to add another container, you must shrink or delete the existing one to make room.

The result of dropping the container.

Text Field

This controller represents a text box.

If you double-click on it or click the arrow in the upper right corner, you can open its properties. In the properties, you can set an identifier, change positions and size, assign a placeholder (a default word displayed in the text box), set a tabindex (an integer indicating whether the element can be focused), and add a tooltip (a small pop-up text that appears when the cursor is placed over the element).
Additionally, there is a checkbox in the properties to hide the element.

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.

Password

This control is similar to the text field, but it is specifically designed for password input. As the user types, asterisks (*) or other masking characters are displayed instead of the actual password.

Label

Represents a label for an element in a user interface, in this case, it will be used as text.

ComboBox

The ComboBox control represents a drop-down list of options used to display data.

In its properties, you can assign an identifier, change positions and size, and there is also a checkbox to hide the element.

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.

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.

TextArea

This control defines a multi-line text input field. In its properties, you can assign an identifier, change positions and size, assign a placeholder (a default word displayed in the text box), set a tabindex (an integer indicating whether the element can be focused), and add a tooltip (a small pop-up text that appears when the cursor is placed over the element). Additionally, there is a checkbox in the properties to hide the element.

Tabla

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.

Calendar

This control allows you to add a calendar element to the form.

In its properties, you can assign an identifier, change positions and size, add default text, and there is a checkbox to hide the element.

Button

This control creates a button.

In its properties, you can assign an identifier, change positions and size, set a style with its value (color), add default text, and there is a checkbox to hide the element. You can also add an icon.

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.

In its properties, you can assign an identifier, change positions and size, add a placeholder (which displays a default word in the text box). Additionally, there is a checkbox in the properties to hide the element.

Image

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.

Personal

This component helps the user insert plugins, for example.

Chart Container

The chart container adds a div to the HTML to create charts.

Current Project

When the user creates a new project, it will be displayed as a folder in the menu with its name and files.

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.

• SQL

  It creates a .SQL file by default, which is used to relate everything the form needs from a database, including table creation, insertion, etc.

• JSON

  Lastly, two files with this extension will appear, which are used for internationalizing the form. In addition to these two for English and Spanish, files can be created for other languages.

• HTML

  It will also create an HTML file, which will be the interface of the form.

Note: The only files that will come with default content are .html and .json files.