> For the complete documentation index, see [llms.txt](https://developers.bims.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.bims.xyz/la-interfaz-de-usuario.md).

# La Interfaz de Usuario

## El Esquema Básico de los ABMs

El esquema básico de los ABMs en BIMS está compuesto de los siguientes elementos:

1. Una Lista.
2. Una Vista.
3. Un Formulario de Creación.
4. Un Formulario de Edición.

{% hint style="info" %}
Dependiendo de los casos de uso y el formato de los elementos, algunos ABMs pueden no respetar este esquema.
{% endhint %}

### Lista

La lista muestra los elementos creados, usualmente en una tabla.

Se define en el método `index()` del controlador.

Su vista (MVC) está definida en el archivo `app/views/nombre_controlador/index.ctp`.

### Vista

Muestra los detalles de un elemento.

Se define en el método `view(id)` del controlador.

Su vista (MVC) está definida en el archivo `app/views/nombre_controlador/view.ctp`.

### Formulario de Creación

Formulario para crear un nuevo elemento.

Se define en el método `add()` del controlador.

Su vista (MVC) está definida en el archivo `app/views/nombre_controlador/add.ctp`.

Usualmente en el archivo `add.ctp` referenciamos al contenido del archivo `edit.ctp` para unificar los formularios de creación y de edición.

**Ejemplo:**

```
<?php
	echo $this->element("../products/edit");
?>
```

### Formulario de Edición

Formulario para editar nuevo elemento existente.

Se define en el método `edit()` del controlador.

Su vista (MVC) está definida en el archivo `app/views/nombre_controlador/edit.ctp`.

## Los Helpers

Los helpers son clases que empleamos para la generación y el formateo en las vistas.

### HTML5

Este helper es un API para la construcción de los elementos comunes de la interfaz de usuario. Hemos creado este helper para agilizar la composición de la interfaz de usuario y para normalizar su estructuración y etiquetado, a modo de estilizar las vistas con un CSS común y centralizar los cambios que deban hacerse en el mockup HTML sobre elementos comunes.

### MT

Este helper formatea tipos de datos y crea elementos comunes.

#### MT -> Format

La función `$mt->format($texto, $tipo, $opciones)` es utilizada para dar formato a textos.

**Retorno**

Texto.

**Atributos:**

1. `$texto`: Es el texto de entrada.
2. `$tipo`: Establece el tipo de formato a aplicar.
3. `$opciones`: Define un array de opciones de configuración para el `$tipo` seleccionado.

**Tipos Definidos**

| Tipo     | Descripción       | Opciones                                                                                                                                                                                                                                                                |
| -------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| money    | Valor monetario   | <p><code>decimals</code> (integer) - Decimales</p><p><code>symbol</code> (string) - Símbolo de la Moneda</p><p><code>thousand\_separator</code> (char) - Caracter de separación de miles</p><p><code>decimal\_separator</code> (char) - Caracter de punto flotante </p> |
| number   | Número            | <p><code>decimals</code> (integer) - Decimales</p><p><code>thousand\_separator</code> (char) - Caracter de separación de miles</p><p><code>decimal\_separator</code> (char) - Caracter de punto flotante </p>                                                           |
| time     | Duración          |                                                                                                                                                                                                                                                                         |
| date     | Fecha             |                                                                                                                                                                                                                                                                         |
| datetime | Fecha y Hora      |                                                                                                                                                                                                                                                                         |
| invoice  | Número de Factura | <p><code>agency\_billing\_code</code> (varchar) - Prefijo de Código de Establecimiento</p><p><code>posale\_billing\_code</code> (varchar) - Prefijo de Código de Punto de Expedición</p>                                                                                |
| user     | Usuario           | `$user['User']`                                                                                                                                                                                                                                                         |
| contact  | Contacto          | `$contact['Contact']`                                                                                                                                                                                                                                                   |

**Ejemplos:**

```
echo $mt->format($amount, 'money', $currency['Currency']);
echo $mt->format(
    $sale['Sale']['invoice_number'],
    'invoice',
    $sale['Sale']
);
```

#### MT -> FBLink

Abre el link en una ventana modal.

**Ejemplo**:

```
echo $mt->fblink(
    $product['Product']['name'],
    array(
        'controller' => 'products',
        'action' => 'view',
        $product['Product']['id']
    )
);
```