En este tutorial, creamos un panel interactivo avanzado utilizando Textual y exploramos cómo los marcos de interfaz de usuario basados en terminales pueden parecer tan expresivos y dinámicos como los paneles web modernos. A medida que escribimos y ejecutamos cada fragmento, construimos activamente la interfaz pieza por pieza, los widgets, los diseños, el estado reactivo y los flujos de eventos, para que podamos ver cómo Textual se comporta como un motor de interfaz de usuario en vivo dentro de Google Colab. Al final, notamos con qué naturalidad podemos combinar tablas, árboles, formularios e indicadores de progreso en una aplicación cohesiva que se siente rápida, limpia y receptiva. Consulta los CÓDIGOS COMPLETOS aquí.
Configuramos el entorno e importamos todos los componentes necesarios para construir nuestra aplicación Textual. Al definir el widget StatsCard, establecemos un componente reutilizable que reacciona a los cambios de valor y se actualiza automáticamente. Comenzamos a ver cómo el sistema reactivo de Textual nos permite crear elementos dinámicos de interfaz de usuario con un mínimo esfuerzo. Consulta los CÓDIGOS COMPLETOS aquí.
(“d”, “toggle_dark”, “Toggle Dark Mode”),
(“q”, “quit”, “Quit”),
(“a”, “add_row”, “Add Row”),
(“c”, “clear_table”, “Clear Table”),
]
total_rows = reactivo(0) total_sales = reactivo(0) avg_rating = reactivo(0.0)
Definimos la clase DataDashboard y configuramos estilos globales, combinaciones de teclas y atributos reactivos. Decidimos cómo debe verse y comportarse la aplicación desde arriba, dándonos control total sobre los temas y la interactividad. Esta estructura nos ayuda a crear un panel pulido sin escribir HTML o JS. Consulta los CÓDIGOS COMPLETOS aquí.
[(“Electronics”, “electronics”),
(“Books”, “books”),
(“Clothing”, “clothing”)]Prompt=”Seleccionar categoría”, id=”select-category” ) con Horizontal(): botón de rendimiento(“Agregar fila”, variante=”primaria”, id=”btn-add”) Botón de rendimiento(“Borrar tabla”, variante=”advertencia”, id=”btn-clear”) Botón de rendimiento(“Generar datos”, variante=”éxito”, id=”btn-generate”) producir Barra de progreso(total=100, id=”progreso”) con Horizontal(id=”sección de datos”): con Contenedor(id=”panel izquierdo”): rendimiento Etiqueta(“Navegación”) árbol = Árbol(“Panel”) árbol.root.expand() productos = árbol.root.add(“Productos”, expandir=True) productos.add_leaf(“Electrónica”) productos.add_leaf(“Libros”) productos.add_leaf(“Ropa”) árbol.root.add_leaf(“Informes”) tree.root.add_leaf(“Configuración”) rendimiento árbol rendimiento DataTable(id=”data-table”) rendimiento pie de página()
Redactamos todo el diseño de la interfaz de usuario, organizamos contenedores, tarjetas, entradas de formulario, botones, un árbol de navegación y una tabla de datos. A medida que estructuramos estos componentes, observamos cómo la interfaz toma forma exactamente como la imaginamos. Este fragmento nos permite diseñar el esqueleto visual del tablero de una manera limpia y declarativa. Consulta los CÓDIGOS COMPLETOS aquí.
productos = { “Electrónica”: [“Laptop”, “Phone”, “Tablet”, “Headphones”]”Libros”: [“Novel”, “Textbook”, “Magazine”, “Comic”]”Ropa”: [“Shirt”, “Pants”, “Jacket”, “Shoes”]
} para _ en rango(recuento): categoría = aleatorio.elección(categorías) producto = aleatorio.elección(productosArtificial Intelligence) fila_id = self.total_rows + 1 precio = round(random.uniform(10, 500), 2) ventas = random.randint(1, 100) rating = round(random.uniform(1, 5), 1) table.add_row( str(row_id), producto, categoría, f”${price}”, str(sales), str(rating) ) self.total_rows += 1 self.total_sales += ventas self.update_stats() def update_stats(self) -> Ninguno: self.query_one(“#card-rows”, StatsCard).value = self.total_rows self.query_one(“#card-sales”, StatsCard).value = self.total_sales if self.total_rows > 0: table = self.query_one(DataTable) total_rating = suma(flotante(fila[5]) para la fila en table.rows) self.avg_rating = round(total_rating / self.total_rows, 2) self.query_one(“#card-rating”, StatsCard).value = self.avg_rating def update_progress(self) -> Ninguno: progreso = self.query_one(ProgressBar) Progress.advance(1) si Progress.Progress >= 100: progreso.progreso = 0
Implementamos toda la lógica para generar datos, calcular estadísticas, animar el progreso y actualizar tarjetas. Vemos qué tan rápido podemos vincular la lógica del backend a los componentes del frontend utilizando el modelo reactivo de Textual. Este paso hace que el tablero se sienta vivo ya que los números se actualizan instantáneamente y las barras de progreso se animan suavemente. Consulta los CÓDIGOS COMPLETOS aquí.
Conectamos eventos de UI a acciones de backend mediante controladores de botones, atajos de teclado y funciones a nivel de aplicación. Mientras ejecutamos la aplicación, interactuamos con un panel completamente funcional que responde instantáneamente a cada clic y comando. Este fragmento completa la aplicación y demuestra con qué facilidad Textual nos permite crear interfaces de usuario dinámicas basadas en estados.
En conclusión, vemos que todo el panel se reúne en una forma interactiva y completamente funcional que se ejecuta directamente desde un entorno de computadora portátil. Experimentamos de primera mano cómo Textual nos permite diseñar interfaces de usuario de terminal con la estructura y la sensación de las aplicaciones web, mientras permanecemos completamente en Python. Este tutorial nos deja seguros de que podemos ampliar esta base, incluso agregando gráficos, fuentes API y navegación de varias páginas, mientras continuamos experimentando con las capacidades modernas de la interfaz de usuario reactiva de Textual.
Consulta los CÓDIGOS COMPLETOS aquí. No dude en consultar nuestra página de GitHub para tutoriales, códigos y cuadernos. Además, no dude en seguirnos en Twitter y no olvide unirse a nuestro SubReddit de más de 100.000 ML y suscribirse a nuestro boletín. ¡Esperar! estas en telegrama? Ahora también puedes unirte a nosotros en Telegram.
Asif Razzaq es el director ejecutivo de Marktechpost Media Inc.. Como empresario e ingeniero visionario, Asif está comprometido a aprovechar el potencial de la inteligencia artificial para el bien social. Su esfuerzo más reciente es el lanzamiento de una plataforma de medios de inteligencia artificial, Marktechpost, que se destaca por su cobertura en profundidad del aprendizaje automático y las noticias sobre aprendizaje profundo que es técnicamente sólida y fácilmente comprensible para una amplia audiencia. La plataforma cuenta con más de 2 millones de visitas mensuales, lo que ilustra su popularidad entre el público.
🙌 Siga MARKTECHPOST: agréguenos como fuente preferida en Google.