1.2Ventanas y campos (interfaz de usuario)
Lo esencial en 30 segundos
- Las ventanas se dibujan visualmente (arrastrar y soltar) y acogen campos: etiqueta, entrada, botón, tabla, combo, pestaña…
- El anclaje define el comportamiento al redimensionar: un campo puede estirarse, desplazarse o permanecer fijo — sin él, la interfaz parece descuidada.
- Nombrar de forma explícita y cuidar el orden de tabulación: es por el nombre como se manipula un campo en WLangage, y el orden Tab condiciona la velocidad de entrada.
Mini-caso guiado — Yacine dibuja la ventana «Ficha pedido»
Yacine crea ahora la interfaz de su aplicación de comercio. Abre una ventana vacía titulada «Ficha pedido» y deposita en ella campos arrastrando y soltando: una etiqueta «Cliente», un campo de entrada, una tabla para las líneas de artículos y los botones «Validar» y «Cancelar». Renombra enseguida cada campo de forma explícita: SAI_NomClient en lugar de SAI_Sans_nom1. Después prueba a agrandar la ventana: la tabla sigue apretada arriba a la izquierda en un gran vacío. Ajusta entonces el ANCLAJE: la tabla se estira en anchura y altura, los botones se desplazan hacia abajo, la etiqueta permanece fija. Por último verifica el ORDEN DE TABULACIÓN: la tecla Tab debe pasar del nombre al teléfono y después a los artículos, en el orden lógico de entrada. Yacine retiene: campos bien nombrados, un anclaje correcto y un Tab coherente hacen una interfaz profesional.
Caso autónomo de esta sección: vuelve en el curso, el esquema, el script y el reto 48 h de la sección 1.2.
1. Las ventanas y sus campos
Las VENTANAS constituyen la interfaz de la aplicación: lo que el usuario ve y manipula. En WinDev se dibujan visualmente, sin código de posicionamiento. En ellas se depositan CAMPOS — el término WinDev para los componentes de interfaz.
Los principales: la etiqueta (texto fijo), el campo de entrada, el botón, el combo, la pestaña y, sobre todo, la TABLA — campo mayor en gestión, que muestra varios registros en filas y columnas. Cada campo tiene un nombre y unas propiedades (pestañas de descripción).
2. El anclaje al redimensionar
El ANCLAJE define qué ocurre con un campo cuando la ventana se redimensiona: estirarse, desplazarse o permanecer fijo. Sin anclaje, agrandar la ventana deja los campos congelados arriba a la izquierda en un gran vacío — el defecto más visible de una aplicación mal terminada.
Buena práctica: hacer que se estire el campo principal (a menudo la tabla, el usuario ve más líneas), hacer que se desplacen los botones de acción para que sigan visibles y dejar fijas las etiquetas pequeñas.
3. Nomenclatura y orden de tabulación
Nombre los campos de forma explícita, con una convención de prefijos: SAI_NomClient, BTN_Valider, TABLE_Articles. Es por ese nombre como los manipulará en WLangage; un nombre significativo hace el código legible y fácil de buscar.
Cuide por último el ORDEN DE TABULACIÓN: el orden en que la tecla Tab hace pasar de un campo al siguiente. En gestión, la entrada por teclado es la norma — un orden que sigue el orden lógico de entrada lo cambia todo para la rapidez y limita los errores.
🔎 Ejemplo concreto — 🔎 Ejemplo concreto — Nombrar y anclar los campos
La convención de Yacine para la ventana «Ficha pedido»:
// Convention de nommage des champs
SAI_NomClient : champ de saisie (préfixe SAI_)
BTN_Valider : bouton (préfixe BTN_)
TABLE_Articles : table de données (préfixe TABLE_)
LIB_Titre : libellé (préfixe LIB_)
// Ancrage (redimensionnement)
TABLE_Articles → étirer (largeur + hauteur)
BTN_Valider → déplacer (bas / droite)
LIB_Titre → rester fixeLectura: el nombre dice claramente qué campo se manipula, y el anclaje indica cómo reacciona la interfaz al agrandamiento.
Reflejo: nombrar de forma explícita y hacer que se estire el campo principal (la tabla) desde la creación de la ventana.
Vocabulario de la sección
- Campo (WinDev)
- Componente de interfaz depositado en una ventana: etiqueta, entrada, botón, interruptor, combo, tabla, imagen, pestaña… Cada campo tiene un nombre y unas propiedades.
Ejemplo sencillo: Yacine deposita un campo de entrada SAI_NomClient en la ventana de pedido.
Lo que no es: dibujarlo todo de forma rígida, sin utilizar componentes de interfaz.
Reflejo: componente de interfaz → un campo nombrado.
- Campo Tabla
- Campo mayor en gestión: muestra varios registros en forma de filas y columnas; puede estar vinculado a un archivo o a una consulta.
Ejemplo sencillo: Yacine muestra las líneas de artículos del pedido en una tabla.
Lo que no es: mostrar cada línea en un campo de entrada separado, sin tabla.
Reflejo: varios registros → una tabla.
- Anclaje
- Comportamiento de un campo cuando se redimensiona la ventana: estirarse, desplazarse, permanecer fijo.
Ejemplo sencillo: Yacine hace que TABLE_Articles se estire en anchura y altura.
Lo que no es: agrandar la ventana y dejar los campos congelados en una esquina vacía.
Reflejo: redimensionamiento → ajustar el anclaje.
- Nomenclatura explícita
- Dar a los campos nombres significativos (SAI_NomClient) con un prefijo por tipo, porque es por ese nombre como se manipulan en WLangage.
Ejemplo sencillo: Yacine cambia el nombre SAI_Sans_nom1 por SAI_NomClient.
Lo que no es: dejar nombres genéricos que hacen el código ilegible.
Reflejo: un campo → un nombre explícito.
- Orden de tabulación
- Orden en el que la tecla Tab hace pasar de un campo al siguiente; debe seguir el orden lógico de entrada.
Ejemplo sencillo: Yacine ajusta Tab: Nombre → Teléfono → Artículos → Validar.
Lo que no es: un Tab que salta del nombre al código postal y después vuelve al nombre de pila.
Reflejo: entrada fluida → orden de tabulación lógico.
En la práctica — En la práctica — Dibujar una ventana de entrada
- Cree una ventana y deposite los CAMPOS necesarios desde el catálogo (etiquetas, campos de entrada, botones) arrastrando y soltando.
- Renombre cada campo con un nombre EXPLÍCITO (convención de prefijos) — así es como lo manipulará en WLangage.
- Cuide la disposición: orden lógico de entrada, alineación, agrupación de informaciones relacionadas, etiquetas claras.
- Ajuste el ANCLAJE de los campos (comportamiento al redimensionar) y verifique el ORDEN DE TABULACIÓN para una entrada fluida por teclado.
Script paso a paso — dibujar la ventana como Yacine (4 min)
1) Cree una ventana (por ejemplo, «Ficha pedido») y deposite los campos necesarios arrastrando y soltando. 2) Renombre cada campo con un prefijo explícito (SAI_, BTN_, TABLE_, LIB_). 3) Organice la disposición en el orden lógico de lectura y de entrada. 4) Ajuste el anclaje: campo principal estirado, botones desplazados, etiquetas fijas. 5) Verifique el orden de tabulación escribiendo por teclado.
Una ventana se juzga por su uso: nombres claros, anclaje correcto y Tab lógico desde la primera versión.
Modelo para copiar y pegar — la lista de comprobación de ventana de Yacine
[ ] Campos depositados arrastrando y soltando (entrada, botón, tabla…)
[ ] Nomenclatura explícita con prefijos (SAI_, BTN_, TABLE_, LIB_)
[ ] Disposición en el orden lógico de entrada
[ ] Campo principal anclado para estirarse (tabla)
[ ] Botones de acción anclados para desplazarse
[ ] Etiquetas fijas ancladas para no moverse
[ ] Orden de tabulación verificado por tecladoVentana de consulta
Yacine pone solo una gran tabla de pedidos, anclada para estirarse, con pocos campos de entrada.
Ventana de alta
Yacine dispone los campos de entrada en columna, en el orden de entrada, con Validar/Cancelar anclados abajo.
Pestañas
Para una ficha de cliente completa, Yacine reparte las informaciones en pestañas (Identidad, Datos de contacto, Historial).
Pantalla de taller
En un puesto de taller, Yacine agranda los botones y cuida el espaciado para un uso cómodo.
✓ Buenas prácticas
- Nombrar los campos de forma explícita con una convención de prefijos.
- Ajustar el anclaje: estirar la tabla, desplazar los botones, fijar las etiquetas.
- Verificar el orden de tabulación para una entrada fluida por teclado.
✗ Errores frecuentes
- Dejar nombres genéricos como SAI_Sans_nom1.
- Olvidar el anclaje: interfaz apretada en una esquina al agrandar.
- Descuidar el orden de tabulación (Tab que salta en todas direcciones).
Puntos clave
- Las ventanas se dibujan visualmente: en ellas se depositan campos (etiqueta, entrada, botón, tabla, combo, pestaña).
- El anclaje define el comportamiento de los campos al redimensionar: estirar, desplazar, permanecer fijo.
- Nombrar explícitamente los campos (SAI_NomClient): es por ese nombre como se manipulan en WLangage.
- Un orden de tabulación lógico condiciona la velocidad y la fiabilidad de la entrada por teclado.
Reto 48 h — aplícalo mañana
Tome una ventana existente y hágalo profesional como Yacine: renombre los campos con prefijos explícitos, ajuste el anclaje (tabla estirada, botones desplazados, etiquetas fijas) y corrija el orden de tabulación. Escriba en una frase qué cambia el anclaje cuando se agranda la ventana.
- Sé crear una ventana y depositar en ella campos arrastrando y soltando.
- Comprendo el anclaje y lo utilizo para una interfaz adaptativa.
- Nombro mis campos de forma explícita y ajusto el orden de tabulación.
Preguntas frecuentes
¿Qué es el anclaje y por qué es indispensable?
El anclaje define cómo reacciona cada campo al redimensionar la ventana: estirarse, desplazarse o permanecer fijo. Sin él, una ventana agrandada muestra campos congelados arriba a la izquierda con un gran vacío — un defecto muy visible. El caso más útil: hacer que se estire la tabla principal, porque el usuario gana realmente líneas visibles. Después se desplazan los botones de acción para que sigan accesibles y se dejan fijas las etiquetas.
¿Por qué cuidar la nomenclatura de los campos y el orden de tabulación?
La nomenclatura explícita hace el código WLangage legible y mantenible: es por el nombre como se manipula un campo, así que «SAI_NomClient» se explica solo, mientras que «SAI_Sans_nom1» no tiene ningún sentido seis meses después. El orden de tabulación, por su parte, condiciona la velocidad de entrada: en gestión se encadenan los campos por teclado, y un orden incoherente hace perder tiempo y provoca errores. Dos detalles que distinguen una aplicación profesional de una aplicación amateur.
¿Para qué sirve el anclaje de un campo en una ventana WinDev?