¿Qué es el componente SpyWidget?

El SpyWidget es un widget especial que permite re-renderizaciones controladas en la página. Observa cambios en objetos Listeneable y solo re-renderiza las partes afectadas. Es especialmente útil para crear interfaces reactivas que actualizan automáticamente cuando cambian los datos.

¿Cómo se utiliza el SpyWidget?

Para utilizar el SpyWidget, se debe importar y configurar con un objeto Listeneable y una función build:

import SpyWidget from "@seigenta/TypesCraft/widgets/spy-widget";
import { ListenableValue } from "@seigenta/TypesCraft/widgets/utils/listenable";

// Crear un objeto observable
const myListenable = new ListenableValue("initial value");

// Usar el SpyWidget
new SpyWidget({
    listenable: myListenable,
    build: (context) => {
        return new Text({
            text: `Valor actual: ${myListenable.value}`
        });
    }
})
          

Ejemplo completo

Aquí un ejemplo completo mostrando cómo usar SpyWidget con actualizaciones automáticas:

class MyPage extends Component {
    textController = new TextFieldController();
    private counter = new ListenableValue(0);

    async init(): Promise<void> {
        setInterval(() => {
            this.counter.value += 1;
        }, 1000);
    }

    build(_: Context): Widget<any> {
        return new Flex({
            children: [
                new SpyWidget({
                    listenable: this.textController,
                    build: (_) => new Text({
                        text: `Texto: ${this.textController.value}`
                    }),
                }),
                new TextField({ controller: this.textController }),
                new SpyWidget({
                    listenable: this.counter,
                    build: (_) => new Text({
                        text: `Contador: ${this.counter.value}`
                    }),
                })
            ]
        });
    }
}
          

Explicación del ejemplo

El ejemplo muestra dos casos de uso del SpyWidget:

1. Contador automático:
   • Se crea un ListenableValue que actúa como contador
   • Un intervalo incrementa el valor cada segundo
   • El SpyWidget se re-renderiza automáticamente mostrando el nuevo valor
   • Esto demuestra la reactividad a cambios programáticos
2. Campo de texto reactivo:
   • Usa un TextFieldController que observa un campo de texto
   • Cada cambio en el campo de texto dispara el re-render
   • El SpyWidget muestra el valor actualizado en tiempo real
   • Demuestra la reactividad a interacción del usuario

Opciones de configuración

El SpyWidget acepta las siguientes opciones de configuración:

• key?: (string) - Identificador único opcional para el widget.
• build: (Context) => Widget - Función que construye el widget hijo.
  • Se ejecuta cada vez que el objeto observable cambia
  • Recibe el contexto del widget como parámetro
• listenable: (Listeneable) - Objeto observable que activará re-renderizaciones.
  • Debe implementar la interfaz Listeneable
  • Ejemplos: TextFieldController, ListenableValue

Comportamiento

El SpyWidget optimiza las re-renderizaciones:

• Si el nuevo widget es del mismo tipo, realiza una actualización eficiente
• Si el tipo cambia, hace un re-render completo
• Solo actualiza cuando el objeto observable cambia