El Diseñador

La lista de proyectos muestra los del área de trabajo y los abiertos desde otras carpetas. Arriba se ve el Python encontrado (versión de Python y de Tk) y el botón para Volver a buscar Python.

Se ve como una lista con columnas (Nombre, Tipo, Componentes, Modificado y Carpeta) que se ordenan con un clic en su título, o en Tarjetas. Tiene Buscar proyectos y va por páginas (Por página: 10, 15, 25 o 50). Doble clic abre un proyecto. El botón derecho sobre un proyecto ofrece Abrir, Ejecutar, Mostrar la carpeta, GitHub…, Presupuesto de IA, Duplicar y Eliminar; sobre el fondo, Agregar nuevo › Proyecto de escritorio (Python), Proyecto web (Flask) o Abrir carpeta….

• Nuevo proyecto: pide el nombre y el destino, Escritorio (Python) o Web (Flask). El destino no se puede cambiar después.
• Abrir carpeta…: abre un proyecto que esté en cualquier otra carpeta; queda en la lista como reciente.
• Área de trabajo: Mostrar la abre en el Finder o el Explorador y Cambiar… elige otra carpeta.
• En cada tarjeta: Ejecutar, Mostrar la carpeta y, en Más acciones, GitHub…, Presupuesto de IA, Duplicar y Eliminar (lleva el proyecto a la papelera del área de trabajo).
• Pestañas: cada proyecto abierto tiene su pestaña arriba, con un punto si hay cambios sin guardar. Puede tener varios abiertos a la vez; la pestaña Proyectos vuelve a la lista sin cerrar nada. Se cierran con la ✕ o con clic central, y preguntan si guardar.

• Barra de herramientas: volver a los proyectos, nombre de la aplicación (clic para renombrarla), Guardar, Deshacer, Ejecutar (F9) en verde, Detener en rojo, Abrir en el navegador (web), Mostrar la carpeta del proyecto, Exportar el archivo .py, GitHub, Presupuesto de IA, Pedir a la IA, Chat con Claude Code, alineación y centrado, Ajustar a la rejilla y Ver la salida.
• Consola de salida: abajo; se agranda o se reduce arrastrando su borde superior, se minimiza con la flecha y Copiar la salida copia todos los mensajes.
• Paleta: una barra de iconos; al pasar el ratón sale el nombre del componente. Se arrastra al formulario o se añade con doble clic.
• Árbol: la ventana y sus componentes, con los que están dentro de un marco o de una página sangrados.
• Inspector: Propiedades y Eventos del componente seleccionado o, si no hay ninguno, de la ventana.
• Centro: pestañas Diseño, Código y Python generado. F12 pasa del diseño al código y vuelta.

Todos los componentes tienen Nombre, posición y tamaño. Casi todos admiten Color de fondo, Color del texto y fuente (Fuente, Tamaño de fuente, Negrita, Cursiva), y los eventos de ratón (Clic, Doble clic, Clic derecho, Entrar el ratón, Salir el ratón). Los de escritura añaden los de teclado (Recibir el foco, Perder el foco, Tecla pulsada, Tecla soltada, Tecla Intro).

• Clic selecciona; arrastrar mueve; los tiradores cambian el tamaño. Con Ajustar a la rejilla activado todo encaja en la rejilla.
• Las flechas mueven la selección un paso de rejilla; con Alt (Opción), un píxel; con Mayús, cambian el tamaño.
• Con dos o más componentes seleccionados se activan Alinear a la izquierda, Centrar en horizontal, Alinear a la derecha, Alinear arriba, Centrar en vertical, Alinear abajo, Igualar el ancho e Igualar el alto (respecto al primero seleccionado).
• Con uno o más seleccionados, Centrar en la ventana (horizontal) y Centrar en la ventana (vertical) los centran como un bloque en la ventana o en su marco.
• El botón derecho ofrece Cortar, Copiar, Pegar, Eliminar, Traer al frente y Enviar al fondo.
• Copiar entre proyectos: lo copiado va al portapapeles del sistema, con sus hijos y el código de sus eventos. Se pega en otro proyecto (o tras reiniciar el estudio): los componentes toman nombres libres y sus métodos se renombran con ellos, sin pisar ninguno que ya exista. Los métodos auxiliares que llamen sus eventos se copian a mano.
• Deshacer (⌘Z / Ctrl+Z) vuelve atrás cada cambio del diseño. Si el código se cambió a mano después de un paso, ese paso restaura el diseño pero no el código, y se avisa.

La propiedad Posición de la ventana decide dónde se abre: Centrada en la pantalla (la de los proyectos nuevos), Por defecto (la decide el sistema) o Manual, con Izquierda y Arriba.

El código de la ventana es una clase de Python con el nombre del formulario que hereda de FormDesign, la clase que genera el estudio. self.root es la ventana y cada componente es self.<Nombre>.

• Doble clic en un componente abre su evento principal (Button1_click, Listbox1_select…) y lo crea si no existe.
• En la pestaña Eventos del inspector se escribe o se elige el método de cada evento; Ir al código salta a él.
• Renombrar un componente renombra sus métodos de serie y las referencias del código.
• La ventana tiene sus eventos: Al abrir (form_create), Al cerrar, Tecla pulsada y Al cambiar de tamaño, y sus propiedades Título, Color de fondo, Redimensionable y Siempre encima.

class Form1(FormDesign):
    def form_create(self):
        self.total = 0
        self.StatusBar1.config(text="Listo")

    def Button1_click(self):
        self.total += 1
        self.Label1.config(text=f"Pulsado {self.total} veces")

La pestaña Python generado muestra, solo para leer, el archivo completo que se ejecuta: el diseño convertido en código más su clase. Al ejecutar se escribe en build/<proyecto>.py, dentro de la carpeta del proyecto.

Exportar el archivo .py guarda ese archivo donde quiera. Funciona con cualquier Python 3 con tkinter (o con Flask, si es web) sin el estudio.

• Ejecutar (F9) guarda el proyecto y lanza la ventana en su propia ventana del sistema, con los permisos de su usuario.
• Detener cierra la ventana o el servidor en marcha.
• Ver la salida abre el panel con lo que la aplicación escribe (print, errores de Python) y el Python usado.
• En una aplicación web, el estudio arranca el servidor de Flask en este equipo y abre el navegador; Abrir en el navegador vuelve a abrirla. Solo se llega a ella desde este equipo.
• Si falta un paquete de Python (Flask, el SDK de Anthropic, un controlador de base de datos o pystray), el estudio lo dice antes de ejecutar y ofrece Instalar: lo instala con el pip del mismo Python que ejecuta el proyecto y después sigue. También puede Copiar la orden para hacerlo a mano.

1. Guarde la base de datos en el módulo Bases de datos (SQLite, PostgreSQL o MySQL/MariaDB).
2. Añada una Conexión de datos al formulario y elija esa conexión en su propiedad Conexión.
3. Añada una Tabla de datos, elija la conexión en Fuente de datos y escriba la Consulta SQL y las Columnas (campo|título|ancho).
4. Para editar la fila elegida, enlace un Campo de texto con Tabla enlazada y Campo enlazado.

Desde el código, self.Connection1.query(sql, params) devuelve filas y self.Connection1.execute(sql, params) modifica datos (siempre con parámetros ?, nunca uniendo texto). self.Treeview1_refresh() vuelve a cargar la tabla.

La Vista HTML muestra HTML escrito por su código. Con Página completa (web) activada, la página entera es esa vista: sin el marco del formulario, con su propio CSS, como una web normal. Así están hechos los ejemplos Blog web y Tienda web.

• self.Site.set_html(html, top=True) cambia el contenido (top vuelve al principio de la página).
• Un enlace o botón con data-action="post" data-arg="7" llama al evento Al pulsar un enlace o enviar un formulario con un HtmlAction: action.name es post y action.arg es 7.
• Un <form data-action="buscar"> envía sus campos: se leen con action.get("q") o en action.form.
• En el escritorio, la vista muestra el HTML sencillo (títulos, párrafos, listas, enlaces y formularios) en un texto; los estilos CSS solo se aplican en la web.

import html

class Form1(FormDesign):
    def form_create(self):
        self.Site.set_html('<h1>Hola</h1><a href="#" data-action="saludar">Saludar</a>')

    def Site_action(self, action):
        if action.name == "saludar":
            nombre = html.escape(action.get("nombre", "mundo"))
            self.Site.set_html("<h1>Hola, %s</h1>" % nombre, top=True)

El Blog web y la Tienda web traen cuentas de usuario: Crear cuenta, Entrar y Salir. Las contraseñas se guardan con PBKDF2 y sal, nunca en claro, y tras cinco intentos fallidos hay que esperar un minuto. La primera cuenta que se registra es la de administración y ve el Panel: en el blog, las entradas, los comentarios y los papeles de los usuarios; en la tienda, las ventas por categoría, los pedidos y el stock. En la tienda, cada cliente ve sus pedidos en Mi cuenta.