Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

General View

Once the project is created, the main screen will be seen like this.

Image RemovedImage Added

General Menu

On the left of screen can see the general menu that divides in five parts:

  • Actual Project
    Shows the files that the user opened, which ones can be closed by clicking the cross next to it.
    Apart from that, all the files that have the opened project will appear listed.
    Image RemovedImage Added

  • Controlers
    Contains all elements that are going to be used in the creation of the new project, for example Buttons, Labels, CheckBox,etc.
    This ones are insterted using Drag&Drop, which facilitates the use of the Form Designer to the user. Simply drag one element to the container to the drawing section, and when droped, it will automatically be instaled.
    Image RemovedImage Added

  • Search
    On the top part of this section, the user can make searches on every project file. When the user clicks on one, automatically is taken where the result is.


    Search Example:


    The word searched is highlighted in the js file for a better visualisation.

  • Projects
    The user has a history with all the changes made in the form, when the user clicks on one of them, the change made will appear as a before and after. Next to every change listed there will be an arrow that undones the change.


  • Configuration
    Controls the letter size and screen style when visualising the files code.

Files

On the top left of the screen we can see the following buttons:

...

  • New Project
  • New File
  • Upload File
  • Delete

Synchronise

On the top right sector of the screen we can see the following buttons:

...

  • Deploy: Saves the file changes.
  • Download: Downloads the last saved change made on the project.

Tools

When opening the main .html file of our project, on the top margin of the screen will appear the following buttons:

...

  • Change View: From design to code or vice versa.
  • Undo Changes
  • Redo Changes
  • Delete Element: Deletes the selected element.
  • Show Hidden
  • Hide Hidden
  • Align Left: This will align the selected element to the one that is far on the left.
  • Align Top: Same as left but will align to the far element on the top.
  • Copy elements

Controls

Controls Menu

This menu contains a list with all the controllers or elements that will be used on the creations of the form.

Image RemovedImage Added

To be able to use on the forms you must click on the desired controller and drag it to the container where we want to put it.

...

The user can select more than one control by clicking on them and move them around as a group. To deselect this ones, just click again.

Properties Menu

You can open the properties menu by double clicking an element or by having one selected and clicking the arrow on the top right corner of the screen.

On this menu we can modify the properties or attributes of the selected element like its identifier, vertical or horizontal position, height and width and many more.

Image RemovedImage Added

Note: The controlers that have the option of adding an event, for it to redirect the user to the code using the button Image RemovedImage Added, the box next to it must be filled with an existing function located in the file PROJECTNAME.js

Uses of the Controls

Container

Image RemovedImage Added

The container control are a few boxes or rectangular spaces. On it we can insert HTML content. Its main utility is visual, by allowing to organise and to give a structure and design to the form.

By default the html already has a container. If we want to use more than one container we need to delete or reduce the existing container because one container can not be on another.

Image RemovedImage Added


The result of dropping the container.

Image RemovedImage Added

Text field

Image RemovedImage Added

Whether his driver is a text box,

...

Other functionality in the properties is to add an event to the element. On the next image we can see the events that can be added to the element by always putting a reference name.

Image RemovedImage Added

Password

Image RemovedImage Added 

The difference on the textfield is that this will use a password and so we want that, when the user is typing, he can see asterisks (*) instead of the real password. 

Label

Image RemovedImage Added

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

Image RemovedImage Added

ComboBox

Image RemovedImage Added

The next control is a list of options, it is used to show data on a deployable box.

...

Other functionality in the properties is to add an event to the element. On the next image we can see the events that can be added to the element by always putting a reference name.

Image RemovedImage Added

ListBox

Image RemovedImage Added

The ListBox control allows the user to use one or more elements on a predefined table. The difference with the ComboBox is that it can show and allows to select several amount of elements.

...

Other functionality in the properties is to add an event to the element. On the next image we can see the events that can be added to the element by always putting a reference name.

Image RemovedImage Added

TextArea

Image RemovedImage Added

This control defines a text with multiple lines on a text area. On its properties you can add an identifier, you can change positions or size, add a placeholder, this allows to put a default word on the text box. To give a tabindex, this is a  number that makes the element focusable. You can also add a tooltip that appears as a pop-up when hovering with the mouse over the element. And you can make the element hidden with the hide element checkbox.

Image RemovedImage Added

Table

Image RemovedImage Added

This controller allows to create a table. On its properties you can add an identifier, you can change positions and size, besides you can make the element hidden by clicking the Hide element checkbox. On the bottom of the properties menu you can add columns to the table.

Image RemovedImage Added

CheckBox

Image RemovedImage Added

Indicates if a condition is enabled or disabled. Normally it is used to represent a Yes/No or True/False to the user. This controller will be checked as default. In case that wanting to uncheck the element it must be done by code view and modifying its properties.

In its properties you can add an identifier, change positions and size, you can add a default text and you can set the element as hidden by clicking on the checkbox. 

Image RemovedImage Added

Calendar

Image RemovedImage Added

This control will load the calendar type element.

On its properties you can add an identifier, change positions and size and to add a default text. Besides the checkbox allows to hide the element.

Image RemovedImage Added

Button

Image RemovedImage Added

This control will create a button.

...

Other functionality of the property is to add an event. On the image we can see all the elements that can be added, always putting a reference name.

Image RemovedImage Added

Upload file

Image RemovedImage Added

Its functionality is to upload local files to the user when using the form.

On its properties you can add an identifier, change position and size, a placeholder to set a default word on the text box and to hide the element by using the checkbox.

Image RemovedImage Added

Image

Image RemovedImage Added

This controller allows us to upload an image to the form.

Image RemovedImage Added

Icons

Image RemovedImage Added

This controller allows us to upload an icon.

Image RemovedImage Added

Personal

Image RemovedImage Added

Graphic container

Image RemovedImage Added

This container adds a div on the html to be able to create charts.

Actual Project

Show the project that is actually working with all the fields of the own project.

Image RemovedImage Added

Note: The files that are red marked, are those ones that have changes made on but are not deployed.

Files created by defect in the new project

  • SQL

    One .SQL default file is created, the role of this file is to be able to relate all you need the form of a database, form creating tables, Insert,etc
  • JS

    A .JS file is where the logic will form in the corresponding JavaScript language.
  • Config.html

    Another file that created us is config.html, it is responsible to relare all the configuration of the form, from plugins needed, JS, stylesheets,etc.
  • HTML

    We also create an HTML, which will form the interface.
  • JSON

    And finally a appcache file , two files with this extension will appear, which ones are used to Internationalise the Form. Apart from the English and Spanish ones, more can be created for different lenguages

...