AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WINDEV 2024!
Ayuda / Tutorial WINDEV / Tutorial - Presentación de WINDEV
  • Lección 2 - Crear una ventana
  • Presentación
  • Abrir el proyecto de ejemplo
  • Crear una ventana: introducir y mostrar datos
  • ¿Cómo crear la ventana?
  • Introducir y mostrar un valor
  • Mejoras de la ventana
  • Cambios a realizar en la ventana
  • Cambios a realizar en los controles
  • En resumen
  • Información adicional

Tutorial - Presentación de WINDEV

Lección 2 - Crear una ventana
Abordaremos los siguientes temas:
  • Cómo crear una ventana.
  • Cómo introducir y mostrar texto.
Durée de la leçon 30 min
Presentación
Para comenzar, vamos a crear una ventana, probarla e introducir algunos datos. Estas primeras etapas nos permitirán ver los principales conceptos para desarrollar con WINDEV. En los siguientes tutoriales, podrá abordar temas más amplios.
Recordatorio: Las ventanas permiten mostrar o introducir información en la pantalla. El usuario puede interactuar directamente con las ventanas a través de objetos gráficos denominados "controles", como controles Campo de entrada, botones, etc.

Abrir el proyecto de ejemplo

Abra el proyecto "WD My first windows":
  1. Vaya a la página de inicio de WINDEV (Ctrl + <).
  2. Haga clic en "Tutorial", luego en "Tutorial - Discover WINDEV (Lesson 2): My first window", haga doble clic en "My first windows - Exercise".
En esta lección, nos centraremos en cómo crear ventanas simples. Trabajaremos con un proyecto que ya se creó y que no contiene ningún elemento.
Veremos cómo crear un proyecto en el tutorial Crear un proyecto WINDEV y un análisis.
Crear una ventana: introducir y mostrar datos
Vamos a crear la siguiente ventana:
Crear una ventana
Esta ventana permite que el usuario introduzca su nombre y muestra un mensaje de bienvenida con el botón "Display".

¿Cómo crear la ventana?

Puede crear una ventana directamente desde los botones de acceso rápido:
  1. Haga clic en Crear un elemento en los botones de acceso rápido:
    Botones de acceso rápido
    La ventana de creación de nuevos elementos se abre. Esta ventana permite crear todos los elementos del proyecto.
  2. Haga clic en "Ventana", y luego en "Ventana". El asistente de creación de ventanas se abre.
  3. Seleccione "En blanco".
    Asistente de creación de ventanas
  4. Valide (botón "OK").
La ventana se crea automáticamente en el editor. La ventana para guardar el elemento se abre. Esta ventana permite especificar:
  • El título del elemento. Este título se mostrará en la barra de título de la ventana.
  • El nombre del elemento. Este nombre corresponde al nombre lógico del elemento. Este nombre se utilizará para manipular el elemento mediante programación.
  • La ubicación del elemento. Corresponde al directorio en el que se guardará el elemento.
En este ejemplo:
  1. Introduzca "My first window" en el título del elemento (en este caso, el elemento corresponde a la ventana WINDEV). El nombre del elemento ("WIN_My_first_window") se completa automáticamente.
    Guardar ventana
  2. Valide (botón "OK")
Información clave:
El nombre de la ventana (que se utilizará en el código) se crea automáticamente a partir del título del elemento. Si lo desea, puede escribir un nombre diferente al título.

Introducir y mostrar un valor

Ya creamos la primera ventana. Ahora vamos a crear los diferentes controles de la ventana. Estos controles nos permitirán ver o introducir datos.
La ventana contendrá los siguientes controles:
  • un control en el que los usuarios introducirán el nombre. Para ello, utilizaremos un "control Campo de entrada".
  • un control Botón que permite mostrar el nombre introducido.
Primer control: Campo de entrada
Empecemos creando el control Campo de entrada en el que el usuario introducirá el nombre:
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", despliegue "Entrada" (haga clic en la flecha):
    Crear un control Campo de entrada
    Enseguida, aparece una lista de controles Campo de entrada predefinidos.
    Información clave
    Esta lista contiene una serie de controles Campo de entrada listos para usar (controles Smart). Para probar un control, simplemente haga clic en el ícono "GO" que aparece al pasar el cursor por encima de cada opción.
  2. En el campo de búsqueda que aparece en la parte superior de la lista de controles predefinidos, introduzca "Entrada de texto simple". El control correspondiente aparece en la lista.
  3. Haga clic en el control "Entrada de texto simple". El control seguirá el cursor del ratón.
  4. Haga clic en la ubicación en la que desea crear el control, por ejemplo, en la parte superior de la ventana. El control aparece con un recuadro y controladores de tamaño para indicar que está seleccionado.
    Control seleccionado
¿Cómo seleccionar un control?
Para seleccionar un control, solo tiene que hacer clic sobre él. Aparecerán controladores de selección alrededor del control. Si el control ya está seleccionado, puede hacer clic de nuevo en el control para editar el título (lo veremos más adelante en este tutorial).
De forma predeterminada, el título del nuevo control es "Texto". Vamos a cambiar este título por "First name". Para ello, utilizaremos la ventana de descripción del control.
  1. Haga clic derecho en el control creado previamente. El menú contextual del control se abre.
  2. Seleccione la opción "Descripción" del menú contextual. La ventana de descripción del control Campo de entrada se abre.
  3. Defina la siguiente información del control:
    Descripción del control Campo de entrada
    • El nombre del control: "EDT_FirstName" (1).
    • El título del control: "First name" (2).
    • El tipo de control: Texto (3).
  4. Valide la ventana de descripción del control (botón "OK"). El control aparece en el editor de ventanas.
El texto del control Campo de entrada se modifica en el editor de ventanas, pero aparece truncado.
Texto truncado
Para que el control se muestre correctamente:
  1. Seleccione el control, si es necesario
  2. Haga clic derecho para abrir el menú contextual y seleccione la opción "Adaptar tamaño".
  3. El control se redimensiona inmediatamente y muestra todo el texto.
    Control redimensionado
Segundo control: Botón
Para crear el control Botón "Display":
  1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Botón.
    Información clave:
    Para crear cualquier tipo de control en WINDEV, vaya a la pestaña "Creación": en esta pestaña podrá acceder a todos los controles disponibles.
  2. Ubique el control en la ventana: haga clic en la ubicación en la que desea crear el control Botón (por ejemplo, a la derecha del control Campo de entrada).
  3. Haga clic en el control que acaba de crear. El texto que se muestra en el control pasa al modo de edición.
  4. Introduzca el texto "Display". El nombre del control Botón cambia automáticamente a "BTN_Display".
  5. El nombre del control se muestra:
    • en el tooltip que aparece al pasar el cursor por encima del control:
      Tooltip al pasar el cursor sobre el control
    • en la barra de estado del editor:
      Barra de estado

Mostrar datos
Vamos a mostrar el texto escrito en un cuadro de diálogo (una pequeña ventana definida por el sistema operativo). Para ello, utilizaremos la función WLanguage Info.
  1. Seleccione el control Botón "Display".
  2. Haga clic derecho para abrir el menú contextual del control.
  3. Seleccione "Código". Esta opción abre el editor de código de WINDEV.
    El editor de código permite escribir todas las instrucciones WLanguage en eventos asociados a los controles.
  4. Introduzca el siguiente código WLanguage en el evento "Clic" de BTN_Display":
    Info("Hello ", EDT_FirstName)
La función Info muestra el mensaje pasado como parámetro en una o más líneas. Nuestro mensaje estará compuesto por el texto "Hello" y el valor del control "EDT_FirstName". Las comas "," separan los parámetros de la función Info. Cada parámetro se muestra en una línea diferente.
Primera prueba
Probemos la ventana:
  1. Haga clic en Probar ventana en los botones de acceso rápido (o presione F9).
  2. La ventana que acaba de crearse se guarda automáticamente y luego se ejecuta.
    Prueba de la ventana
  3. Introduzca su nombre.
  4. Haga clic en "Display".
  5. Haga clic en "OK" para confirmar y cerrar la ventana del sistema.
  6. Cierre la ventana de pruebas: haga clic en el botón de cierre de la ventana (botón "x" en la barra de título).
Enseguida, se vuelve a mostrar el editor de WINDEV. Cierre el editor de código: en la pestaña "Inicio", en el grupo "General", haga clic en "Cerrar".
En el panel "Errores de compilación" se muestra un error. Este error indica que la ventana es redimensionable, pero no se ha definido ningún anclaje. No se preocupe: veremos como solucionar este error más adelante en este tutorial.
Al desarrollar una aplicación, WINDEV muestra información sobre los problemas que pueden ocurrir en la aplicación en el panel "Errores de compilación". Para obtener más información, consulte Compilación del proyecto: Advertencias, errores, información, estándar de programación, etc..
Mejoras de la ventana
Durante la primera prueba, pudimos notar que:
  • la ventana es demasiado grande,
  • la ventana se puede redimensionar, pero solo contiene dos controles,
  • el nombre introducido se muestra con las mayúsculas y minúsculas que se utilizaron en el control Campo de entrada. Vamos a forzar el uso de una letra mayúscula al inicio de la palabra.
Vamos a ver rápidamente la UI de esta ventana.

Cambios a realizar en la ventana

En primer lugar, reduciremos el tamaño de la ventana en el editor. Como el editor refleja lo que veremos en tiempo de ejecución, la ventana cambiará de tamaño cuando se ejecute la aplicación:
  1. Haga clic en la ventana en el editor: alrededor de la ventana aparecen unos controladores de tamaño.
  2. Haga clic en el controlador que se encuentra en la parte inferior derecha y reduzca el tamaño de la ventana manteniendo pulsado el botón izquierdo del ratón.
    Cambiar el tamaño de la ventana
Ahora, tenemos que evitar que el usuario cambie el tamaño de la ventana: solo tenemos que cambiar una opción.
  1. Haga doble clic en la ventana. La ventana de descripción se abre.
  2. En la pestaña "General", deseleccione la opción "Redimensionable" (haga clic en la opción).
  3. Valide.
    Veremos en detalle la UI y UX más adelante en este tutorial.
Ejecute la prueba de la ventana nuevamente para ver el resultado en tiempo de ejecución (). El resultado aparece inmediatamente.
Crear una ventana
Cierre la ventana de prueba para volver al editor.

Cambios a realizar en los controles

Ahora vamos a forzar el uso de una letra mayúscula al introducir y mostrar el nombre.
WINDEV permite definir una máscara de entrada en un control. La máscara de entrada define automáticamente el formato del valor introducido sin tener que programar.
Para cambiar la máscara de entrada del control:
  1. Haga doble clic en el control "First name". La ventana de descripción del control se abre automáticamente.
  2. En la pestaña "General", despliegue la lista "Máscara de entrada" y seleccione "1ª letra en mayús.".
    Máscara de entrada
  3. Valide la ventana de descripción del control.
  4. En el editor, el nombre de la máscara se muestra automáticamente en el control.
Prueba rápida
  1. Ejecute la prueba de la ventana nuevamente para ver el resultado en tiempo de ejecución.
    Prueba de la ventana
  2. Haga clic en "OK" para cerrar el mensaje y, a continuación, cierre la ventana de prueba haciendo clic en el ícono "X" ubicado en la esquina superior derecha. El editor se vuelve a mostrar.
Cierre la ventana "WIN_My_first_window": en la pestaña "Inicio", en el grupo "General", haga clic en "Cerrar".
Cierre el proyecto: en la pestaña "Inicio", en el grupo "General", haga clic en "Cerrar" y seleccione "Cerrar proyecto".
En resumen
Al crear la primera ventana, exploramos algunas características de WINDEV:
  • creación de ventanas.
  • creación de controles Campo de entrada y Botón.
  • editor de ventanas WYSIWYG.
  • opciones de máscara de entrada
Proyecto completado
Si desea comprobar el resultado final de los pasos descritos en este tutorial, puede abrir una versión finalizada del proyecto. Este proyecto contiene las ventanas creadas en esta lección. Para abrir el proyecto completado, vaya a la página de inicio y haga clic en "Tutorial", luego en "WINDEV (Lesson 2): My first window", haga doble clic en "My first windows - Answers".
Información adicional
WINDEV ofrece más de cincuenta controles. Hay varios ejemplos unitarios disponibles que le permiten descubrir el uso de cada tipo de control.

Para abrir un ejemplo unitario:
  1. Vaya a la página de inicio de WINDEV (presione Ctrl + <).
  2. Haga clic en "Abrir un ejemplo".
  3. Se mostrará una lista con ejemplos completos, didácticos y unitarios.
  4. En la categoría "Ejemplos unitarios", seleccione y haga doble clic en el ejemplo deseado (por ejemplo, "The TreeView control"): la ventana correspondiente se abre automáticamente en el editor.
Observación: Para hacerlo más fácil, todos los ejemplos unitarios que corresponden a los controles contienen el nombre del control: TreeView, Camera, etc.
Lección anteriorTabla de contenido
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 13/12/2023

Señalar un error o enviar una sugerencia | Ayuda local