👁️ Vistas XML - Plugin Mascotas

Definen la interfaz de usuario y la presentación de datos

← Controladores ← Volver al Plugin

📋 Vistas XML del Plugin

✏️

EditMascota.xml

Formulario para crear y editar mascotas individuales

Vista de Edición
📋

ListMascota.xml

Tabla para listar, buscar y gestionar múltiples mascotas

Vista de Listado

✏️ EditMascota.xml - Vista de Edición

XMLView/EditMascota.xml 
<?xml version='1.0' encoding='UTF-8'?>
<view>
    <columns>
        <column name='Nombre' numcolumns='6' order='100'>
            <widget type='text' fieldname='nombre'/>
        </column>
        <column name='Especie' order='105'>
            <widget type='text' fieldname='especie'/>
        </column>
        <column name='Genero' order='110'>
            <widget type='text' fieldname='genero'/>
        </column>
        <column name='Edad' order='115'>
            <widget type='text' fieldname='edad'/>
        </column>
        <column name='Fecha de Nacimiento' order='120'>
            <widget type='date' fieldname='fecha_nacimiento'/>
        </column>
    </columns>
</view>

🎯 Estructura de Columnas

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

  • name: Etiqueta visible para el usuario
  • numcolumns: Ancho relativo (1-12, siendo 12 el total)
  • order: Orden de aparición (múltiplos de 5 recomendados)
  • widget: Tipo de control de entrada

📱 Diseño Responsive

El uso de numcolumns="6" en Nombre crea un layout adaptable:

  • Nombre: Ocupa 6/12 columnas (50% del ancho)
  • Otros campos: Se distribuyen automáticamente
  • En móviles: Las columnas se apilan verticalmente
  • En tablets: Se reorganizan según el espacio disponible

📋 ListMascota.xml - Vista de Listado

XMLView/ListMascota.xml 
<?xml version='1.0' encoding='UTF-8'?>
<view>
    <columns>
        <column name='Nombre' order='100'>
            <widget type='text' fieldname='nombre'/>
        </column>
        <column name='Especie' order='105'>
            <widget type='text' fieldname='especie'/>
        </column>
        <column name='Genero' order='110'>
            <widget type='text' fieldname='genero'/>
        </column>
        <column name='Edad' order='115'>
            <widget type='text' fieldname='edad'/>
        </column>
        <column name='Fecha de Nacimiento' order='120'>
            <widget type='date' fieldname='fecha_nacimiento'/>
        </column>
    </columns>

    <rows>
        <row type="actions">
            <button action="borrar-todo" color="warning" icon="fas fa-vial" label="Borrar" type="action"/>
            <button action="copiar" color="warning" icon="fas fa-terminal" label="Copiar" type="action"/>
        </row>
    </rows>
</view>

🔍 Análisis de ListMascota.xml

📊 Sección <columns> - Configuración de Columnas

<columns>
    <column name=\'Nombre\' order=\'100\'>
        <widget type=\'text\' fieldname=\'nombre\'/>
    </column>
    <!-- más columnas -->
</columns>

Propiedades de cada columna:

  • name: Encabezado de la columna
  • order: Orden de aparición (múltiplos de 5)
  • widget: Tipo de control para mostrar/editar
  • fieldname: Nombre del campo en el modelo

⚡ Sección <rows> - Acciones Personalizadas

<rows>
    <row type="actions">
        <button action="borrar-todo" color="warning" 
                icon="fas fa-vial" label="Borrar" type="action"/>
        <button action="copiar" color="warning" 
                icon="fas fa-terminal" label="Copiar" type="action"/>
    </row>
</rows>

Propiedades de los botones de acción:

  • action: Nombre que coincide con el case en el controlador
  • color: Color del botón (warning, danger, success, etc.)
  • icon: Icono de FontAwesome
  • label: Texto visible del botón
  • type: Tipo de elemento (siempre "action" para estos casos)

🎨 Tipos de Widgets Disponibles

📝 text

Uso: Campos de texto de una línea

Ejemplo: <widget type="text" fieldname="nombre"/>

📅 date

Uso: Selector de fechas

Ejemplo: <widget type="date" fieldname="fechanacimiento"/>

🔢 number

Uso: Campos numéricos

Ejemplo: <widget type="number" fieldname="edad"/>

📄 textarea

Uso: Campos de texto multilínea

Ejemplo: <widget type="textarea" fieldname="observaciones"/>

📋 select

Uso: Listas desplegables

Ejemplo: <widget type="select" fieldname="especie"/>

✅ checkbox

Uso: Casillas de verificación

Ejemplo: <widget type="checkbox" fieldname="activo"/>

🔗 Integración con el Controlador

1

Vista XML Define la Interfaz

Los botones en <rows> tienen atributos action que definen las acciones disponibles

2

Usuario Interactúa

El usuario hace clic en un botón, enviando la acción al controlador

3

Controlador Procesa

execPreviousAction() detecta la acción y llama al método correspondiente

4

Resultado se Muestra

La vista se actualiza automáticamente mostrando los cambios

Conexión Vista → Controlador

Vista XML

<button action="borrar-todo" 
        label="Borrar" type="action"/>
→

Controlador PHP

case "borrar-todo":
    $this->borrarTodo();
    break;

🎯 Buenas Prácticas en Vistas XML

📏 Ordenamiento Lógico

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

<!-- Bueno -->
<column name="Nombre" order="100">
<column name="Especie" order="105">
<column name="Edad" order="110">

<!-- Permite insertar entre ellos -->
<column name="Nuevo" order="107">

📱 Diseño Responsive

Utiliza numcolumns para crear layouts adaptables:

<!-- Campo principal ocupa más espacio -->
<column name="Nombre" numcolumns="8">

<!-- Campos secundarios menos espacio -->
<column name="Edad" numcolumns="4">

🎨 Nomenclatura Consistente

Mantén consistencia en nombres de acciones y campos:

<!-- Acciones en minúsculas con guiones -->
<button action="borrar-todo">
<button action="exportar-pdf">

<!-- Campos en minúsculas -->
<widget fieldname="nombre">
<widget fieldname="fecha_nacimiento">

⚠️ Problemas Comunes y Soluciones

Botones no funcionan

Causa: El atributo action no coincide con el case del controlador

Solución: Verificar que los nombres sean idénticos (case-sensitive)

Campos no se muestran

Causa: El fieldname no coincide con una propiedad del modelo

Solución: Revisar las propiedades públicas del modelo Mascota

Error de XML mal formado

Causa: Etiquetas sin cerrar o atributos sin comillas

Solución: Validar la estructura XML con un validador online

🚀 Mejoras y Extensiones Posibles

Validaciones en Vista

<widget type="text" fieldname="nombre">
    <rules>
        <rule type="required" message="El nombre es obligatorio"/>
        <rule type="minlength" value="2" 
              message="Mínimo 2 caracteres"/>
    </rules>
</widget>

Agregar validaciones client-side para mejor UX

Widgets Personalizados

<widget type="select" fieldname="especie">
    <values>
        <value code="perro">Perro</value>
        <value code="gato">Gato</value>
        <value code="ave">Ave</value>
    </values>
</widget>

Listas desplegables con valores predefinidos

Agrupación de Campos

<group name="Datos Básicos">
    <column name="Nombre">...</column>
    <column name="Especie">...</column>
</group>
<group name="Datos Médicos">
    <column name="Peso">...</column>
    <column name="Vacunas">...</column>
</group>

Organizar campos en grupos lógicos

← Controladores ← Volver al Plugin