Vistas XML - Plugin Coches

📋 Vistas XML del Plugin Coches

✏️

EditCoche.xml

Formulario para crear y editar vehículos individuales

Vista de Edición

📋

ListCoche.xml

Tabla para listar, buscar y gestionar múltiples vehículos

Vista de Listado

✏️ EditCoche.xml - Vista de Edición

XMLView/EditCoche.xml

<?xml version='1.0' encoding='UTF-8'?>
<view>
    <columns>
        <group name='coches' numcolumns='8' title='Identificación de vehículos cochiles' icon='fa-globe'>
            <column name='ID' order='10'>
                <widget type='text' fieldname='idcoche' />
            </column>
            <column name='matricula' order='20'>
                <widget type='text' fieldname='matricula' />
            </column>
            <column name='marca' order='30'>
                <widget type='text' fieldname='marca' />
            </column>
            <column name='modelo' order='40'>
                <widget type='text' fieldname='modelo' />
            </column>
            <column name='fechaitv' order='50'>
                <widget type='date' fieldname='fechaitv' />
            </column>
            <column name='siniestro' order='60'>
                <widget type='checkbox' fieldname='siniestro' />
            </column>
        </group>
    </columns>
</view>

🎯 Estructura de la Vista de Edición

La vista organiza los campos en grupos y columnas con propiedades específicas:

<group>: Agrupa campos relacionados con título e icono
name: 'coches' - Nombre interno del grupo
numcolumns: '8' - Ancho relativo (8/12 = 66.6%)
title: Título descriptivo para el usuario
icon: 'fa-globe' - Icono de FontAwesome

📐 Configuración de Columnas

Cada campo se define dentro de una columna con propiedades específicas:

<column>: Define un campo individual
name: Etiqueta visible para el usuario (ID, matrícula, etc.)
order: Orden de aparición (múltiplos de 10)
<widget>: Tipo de control de entrada
type: Tipo de widget (text, date, checkbox)
fieldname: Nombre del campo en el modelo Coche

📋 ListCoche.xml - Vista de Listado

XMLView/ListCoche.xml

<?xml version='1.0' encoding='UTF-8'?>
<view>
    <columns>
        <column name='ID' order='10'>
            <widget type='text' fieldname='idcoche' />
        </column>
        <column name='matricula' order='20'>
            <widget type='text' fieldname='matricula' />
        </column>
        <column name='marca' order='30'>
            <widget type='text' fieldname='marca' />
        </column>
        <column name='modelo' order='40'>
            <widget type='text' fieldname='modelo' />
        </column>
        <column name='fechaitv' order='50'>
            <widget type='date' fieldname='fechaitv' />
        </column>
    </columns>
    <rows>
        <row type='status'>
            <option color='danger' fieldname='siniestro'>1</option>
        </row>
        <row type="actions">
            <button type="modal" label="mostrar" color="warning" action="test" />
        </row>
    </rows>
    <modals>
    <group name="modalCoche" title="Modelo de Coche" icon="fas fa-car">
        <column name="ID" numcolumns="12" description="desc-custommer-name">
            <widget type="text" fieldname="idcoche" required="true" />
        </column>
        <column name="Matricula" numcolumns="6">
            <widget type="text" fieldname="matricula" required="true" />
        </column>
        <column name="Marca" numcolumns="6">
            <widget type="text" fieldname="marca" required="true" />
        </column>
        <column name="Modelo" numcolumns="6">
            <widget type="text" fieldname="modelo" required="true" />
        </column>
        <column name="Fecha ITV" numcolumns="6">
            <widget type="date" fieldname="fechaitv" required="true" />
        </column>
        <column name="Siniestro" numcolumns="6">
            <widget type="checkbox" fieldname="siniestro" required="true" />
        </column>
    </group>
    <group name="fechaitv" title="Fecha de ITV" icon="fas fa-car">
        <column name="Fecha ITV" numcolumns="6">
            <widget type="date" fieldname="fechaitv" required="true" />
        </column>
    </group>
    </modals>
</view>

🔍 Análisis de ListCoche.xml

📊 Sección <columns> - Columnas del Listado

<columns>
    <column name=\'ID\' order=\'10\'>
        <widget type=\'text\' fieldname=\'idcoche\' />
    </column>
    <column name=\'matricula\' order=\'20\'>
        <widget type=\'text\' fieldname=\'matricula\' />
    </column>
    <!-- más columnas -->
</columns>

Configuración de columnas en listado:

name: Encabezado de la columna visible al usuario
order: Orden de aparición (10, 20, 30...)
widget: Tipo de widget para mostrar datos
fieldname: Nombre del campo en el modelo Coche
Nota: El campo siniestro no aparece en columnas, se muestra en estado

🎨 Sección <rows> - Estados y Acciones

<rows>
    <row type=\'status\'>
        <option color=\'danger\' fieldname=\'siniestro\'>1</option>
    </row>
    <row type="actions">
        <button type="modal" label="mostrar" 
                color="warning" action="test" />
    </row>
</rows>

Tipos de filas especiales:

type="status": Define estados visuales para filas
color="danger": Muestra fila en rojo cuando se cumple condición
fieldname="siniestro": Campo que se evalúa
value="1": Valor que activa el estado (true)
type="actions": Fila para botones de acción
type="modal": Botón que abre un modal

🚪 Sección <modals> - Ventanas Emergentes

<modals>
    <group name="modalCoche" 
           title="Modelo de Coche" 
           icon="fas fa-car">
        <column name="Matricula" numcolumns="6">
            <widget type="text" fieldname="matricula" 
                    required="true" />
        </column>
        <!-- más campos -->
    </group>
</modals>

Configuración de modales:

name: Identificador único del modal
title: Título que aparece en la ventana
icon: Icono del modal
numcolumns: Ancho de campos dentro del modal
required="true": Campo obligatorio
Uso: Para inserción rápida o acciones específicas

🎨 Tipos de Widgets para Coches

📋 select

Uso: Listas desplegables

Ejemplo: Para tipos predefinidos

🔗 Integración con el Controlador

1

Vista XML Define la Interfaz

Los botones en <rows type="actions"> definen acciones disponibles para el usuario

2

Usuario Interactúa

El usuario hace clic en un botón o cambia un campo

3

Sistema Captura Evento

FacturaScripts captura el evento y extrae datos del formulario

4

Controlador Procesa

execPreviousAction() recibe la acción y ejecuta el método correspondiente

5

Resultado se Muestra

La vista se actualiza automáticamente mostrando los cambios

Ejemplo: Botón de Acción → Controlador

Vista XML (Botón)

<button action="siniestro" 
        type="action" 
        label="Baja" 
        color="danger" 
        icon="fas fa-exclamation-triangle"
        confirm="true"/>

Atributos clave:

action="siniestro" - Nombre de la acción
type="action" - Tipo de botón
confirm="true" - Pide confirmación

→

Controlador PHP (Switch)

protected function execPreviousAction($action)
{
    switch($action){
        case "siniestro":
            $this->siniestro();
            break;
        case "fechaitv":
            $this->fechaitv();
            break;
        // más casos...
    }
}

Conexión: El valor de action en XML debe coincidir exactamente con el case en PHP.

🎯 Características Especiales de Vistas Coches

🚨 Estados Visuales (Siniestro)

#1 1234ABC Toyota Corolla Normal

#2 5678DEF Ford Focus Siniestro

Configuración XML: <option color="danger" fieldname="siniestro">1</option>

Cuando siniestro = 1 (true), la fila aparece en rojo.

🚗 Modal de Inserción Rápida

Configuración: setSettings('ListCoche', 'modalInsert', 'modalCoche')

Permite crear vehículos sin salir del listado principal.

📱 Diseño Responsive

ID

Matrícula

Marca

Modelo

ID: 1

Matrícula: 1234ABC

Marca: Toyota

Automático: Las vistas XML se adaptan automáticamente a diferentes tamaños de pantalla.

En móviles, las tablas se convierten en tarjetas.

📐 Buenas Prácticas en Vistas XML para Coches

🎯 Ordenamiento Lógico

Usa múltiplos de 10 en el atributo order para facilitar inserciones:

<!-- Bueno: permite inserciones -->
<column name="ID" order="10">
<column name="Matrícula" order="20">
<column name="Marca" order="30">

<!-- Se puede insertar entre ellos -->
<column name="Año" order="15">

Ventaja: Fácil mantenimiento y expansión futura.

🏷️ Nomenclatura Consistente

Mantén consistencia en nombres de acciones y campos:

<!-- Acciones en minúsculas, descriptivas -->
<button action="marcar-siniestro">
<button action="actualizar-itv">
<button action="crear-coche">

<!-- Campos igual que propiedades del modelo -->
<widget fieldname="matricula">
<widget fieldname="fechaitv">

Beneficio: Código más legible y menos errores.

🔧 Validaciones en Vista

Usa atributos de validación en los widgets:

<widget type="text" fieldname="matricula"
        required="true"
        maxlength="7"
        pattern="[A-Z0-9]+">
    <rules>
        <rule type="required" 
              message="La matrícula es obligatoria"/>
        <rule type="minlength" value="7"
              message="La matrícula debe tener 7 caracteres"/>
    </rules>
</widget>

Ventaja: Validación client-side para mejor experiencia de usuario.

⚠️ Problemas Comunes y Soluciones

Campos no se muestran

Causa: El fieldname no coincide con una propiedad del modelo.

Solución: Verificar propiedades públicas del modelo Coche (idcoche, matricula, marca, modelo, fechaitv, siniestro).

Estado siniestro no cambia color

Causa: El valor en XML no coincide con el valor en BD.

Solución: Verificar que <option value="1"> en XML coincida con true en BD (booleano).

Modal no aparece al hacer clic

Causa: Nombre del modal no coincide entre configuración y definición.

Solución: setSettings('modalInsert', 'modalCoche') debe coincidir con name="modalCoche" en XML.

🚀 Mejoras y Extensiones Posibles

Widgets Personalizados para Coches

<widget type="select" fieldname="combustible">
    <values>
        <value code="gasolina">Gasolina</value>
        <value code="diesel">Diésel</value>
        <value code="electrico">Eléctrico</value>
        <value code="hibrido">Híbrido</value>
    </values>
</widget>

<widget type="select" fieldname="color">
    <values>
        <value code="rojo">Rojo</value>
        <value code="azul">Azul</value>
        <value code="blanco">Blanco</value>
        <value code="negro">Negro</value>
    </values>
</widget>

Listas desplegables con valores predefinidos para vehículos.

Agrupación Avanzada de Campos

<group name="datos_basicos" title="Datos Básicos">
    <column name="Matrícula">...</column>
    <column name="Marca">...</column>
    <column name="Modelo">...</column>
</group>

<group name="datos_tecnicos" title="Datos Técnicos">
    <column name="Motor">...</column>
    <column name="Potencia">...</column>
    <column name="Combustible">...</column>
</group>

<group name="documentacion" title="Documentación">
    <column name="ITV">...</column>
    <column name="Seguro">...</column>
    <column name="Permiso">...</column>
</group>

Organizar campos en grupos lógicos para mejor UX.

Vistas Condicionales

<column name="Precio Venta" order="100">
    <widget type="text" fieldname="precio_venta">
        <rules>
            <rule type="visible" 
                  fieldname="en_venta" 
                  value="1"/>
        </rules>
    </widget>
</column>

<column name="Fecha Baja" order="110">
    <widget type="date" fieldname="fecha_baja">
        <rules>
            <rule type="visible" 
                  fieldname="siniestro" 
                  value="1"/>
        </rules>
    </widget>
</column>

Mostrar/ocultar campos según condiciones específicas.

🧪 Demo Interactivo: Editor de Vistas XML

Editor de Vista XML para Coches

Modifica el XML y ve los cambios en tiempo real

📝 Código XML

👁️ Vista Previa

Configuración Aplicada:

Tipo: text
Campo: matricula
Requerido: Sí
Validaciones: required, minlength(7)

💡 Consejos: Cambia el atributo type a "date" o "checkbox" para ver diferentes widgets. Modifica required para cambiar validación.

Iniciar Sesión

Recuperar contraseña

Crear Cuenta