# 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']
    )
);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developers.bims.xyz/la-interfaz-de-usuario.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.