# View Definition Framework

Este es un conjunto de especificaciones para comunicar a desarrolladores humanos las características de vistas de acuerdo a 
los conceptos de [V12](https://docs.induxsoft.net/es/productos/v12/devops/lineamientos-ui.md).

## Contenido de la documentación

Se deberán incluir al menos los siguientes datos:

* Nombre de la vista
* Tipo de vista
* Tipo de elemento de datos
* Datos auxiliares
* Estados de la vista con sus flujos (transiciones), disposición de controles y condiciones

La documentación deberá escribirse preferentemente en:

* markdown para las indicaciones en lenguaje natural, así como la inclusión de imágenes u otros recursos.
* yaml, json o datos tabulares (delimitados) para indicar datos de pares clave/valor como las propiedades de los controles
* VDL (View Definition Language) para especificar la disposición de controles.

### Disposición de controles

#### View Definition Language (VDL)

##### Controles
 - Sintaxis mínima: ```controlname ```
 - Sintaxis indicando nombre y tipo de control ```controlname {controltype}```
 - Sintaxis para tablas: ```tablename {edit-table:colname1 {controlcoltype}, colname2 {controlcoltype}, ...}```
 - Los controles se colocan en filas representadas por cada línea de texto
 - Si hay más de un control en una misma línea de texto, se asume que se deben colocar en la misma fila
 - El espacio en blanco o el tabulador se pueden usar indistintamente para separar controles en una misma fila
 - El nombre de los controles debe seguir la sintaxis del lenguaje C
 - Dentro de las especificaciones de tipo de control (entre {}) pueden usarse libremente saltos de línea y tabuladores sin que afecte la disposición o indentación.

##### Acciones
 - Las acciones se indican entre corchetes ```[actionname]```
 - El asterísco al final del nombre de la acción indica que es una acción específica, si se omite es general
 - Varias acciones pueden indicarse encerradas entre corchetes cada una o en un solo grupo delimitadas por comas, ejemplo de sintaxis equivalentes para 3 acciones:```[add] [edit*] [delete*]``` es equivalente a: ```[add,edit*,delete*]```
 - El nombre de las acciones debe seguir la sintaxis del lenguaje C

##### Secciones
 - La indentación por ```\t``` (tabuladores) define el nivel de anidación de controles y otras secciones
 - Sintaxis mínima de inicio de sección: ```<estereotipo>```
 - Sintaxis de inicio de sección con especificación de título: ```<estereotipo "título de la sección">```
 - Sintaxis de inicio de sección con especificación de nombre y título: ```<estereotipo nombre "título de la sección">```
 - El nombre de las secciones debe seguir la sintaxis del lenguaje C
 - Estereotipos de sección: tab, frame y col

 
#### Obviedades (y comentarios)
 - Tipo de control predeterminado: input
 - Nombre del campo enlazado al control: Nombre del campo
 - Ancho mínimo de control en pantalla (min): 8rem
 - Ancho medio de control en pantalla (min): 15rem
 - Ancho máximo de control en pantalla (max): 30rem
 - Ancho del control es igual al tamaño (en rem) del campo  subyacente si es de tipo string, siempre que (rem) >=min y <=max
 - Ancho del control para campos numéricos y fechas igual al mínimo, para fecha y hora ancho medio 
 - Ancho para controles de tabla igual al ancho del contenedor si ocupan una sola fila
 - La ubicación predeterminada de la etiqueta es: start-top
 - Establecer obiviedades específicas a una definición debe indicarse anteponiento el caracter ```#``` a cada enunciado
 - Comentarios al estilo de C

#### Reglas de disposición de controles
- Los controles deben acomodarse en filas subsecuentes si rebasan el ancho del contenedor
- El ancho máximo del control siempre será menor al ancho del contenedor

#### Opciones de colocación de etiqueta
- start-top. Arriba a la izquierda
- center-top. Centrada sobre el control
- end-top. Alineada a la derecha sobre el control
- start-middle. A la izquierda del control, alineada al centro vertical
- end-middle. A la derecha del control, alineada al centro vertical
- start-bottom. Abajo y a la izquierda
- center-bottom. Centro horizontal y abajo
- end-bottom. A la derecha y abajo

#### Ejemplos VDL

##### Ejemplo 1
Define la disposición de controles para una vista dividida en dos columnas, en
 donde hay controles básicos de entrada en la primera y en la segunda tablas organizadas en pestañas, así como 2 acciones.
``` 
<col "Datos generales">
    codigo nombre  tipo{select}
    contacto {input-key}

<col "Adicionales">
    <tab precios "Precios especiales">
        lstprecios{edit-table:producto{input-key},descripcion{label},precionormal,precioespecial{num}}
    <tab ventas "Ventas del ejercicio">
        lstventas{table:fecha{label},importe{label}}

copyright{label}

[Aceptar] [Cancelar]

```

##### Ejemplo 2
```

# Tipo de control predeterminado: label  // Esta es una Obviedad

<col>
    orden producto{label} zafra
    cantidad presentacion calidad marca
<col>
    boleta fecha
    planta{select}
    observaciones{text-area}

<tab origen "Origen">
    [carga][descarga][traspaso]
    origen{
        edit-table:
            ltc,
            lote,
            cantidad,
            maniobra,
            turno,
            cuadrilla,
            supervisor,
            bancoorigen,
            bancodestino,
            observaciones, 
            acciones [iniciar*,completar*]
    } 

<tab limpieza "Limpieza de planta">
<tab "Trasvase">
<tab "Aquintalamiento">
<tab "Producto NC">
<tab servicios "Servicios">

[agregar,eliminar, cerrar]

```