AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad de WINDEV 2024!
Ayuda / Tutorial WINDEV / Tutorial - Componentes externos
  • Reutilizar código mediante componentes externos
  • Presentación
  • Crear un componente externo
  • Abrir el proyecto de ejemplo
  • Crear una configuración de proyecto
  • Generación del componente
  • Utilizar el componente externo
  • Crear un proyecto
  • Importar un componente externo
  • Crear una ventana
  • Llamar al componente
  • Probar el componente
  • Conclusión

Reutilizar código mediante componentes externos
Abordaremos los siguientes temas:
  • ¿Qué es un componente externo?
  • Ejemplo práctico:
    • Crear un componente externo.
    • Utilizar un componente externo.
Durée de la leçon 40 min
Presentación
WINDEV ofrece varios métodos para compartir código:
  1. Conjuntos de procedimientos.
  2. Clases.
  3. Componentes externos.
  4. Componentes internos.
En este tutorial, nos centraremos en los componentes externos.
Un componente externo es un fragmento de código que se puede reutilizar en un número ilimitado de proyectos (y por lo tanto, de ejecutables).
Principio de un componente externo
Un componente externo permite tener un proceso idéntico con un único código fuente para realizar una operación determinada, incluso si este proceso debe ser realizado por varios proyectos.
Los proyectos que utilizan un componente externo pueden acceder al nombre de los objetos, procedimientos o métodos que el creador del componente ha definido como visibles. Los proyectos no pueden leer ni modificar el código fuente. Esto garantiza la confidencialidad y estabilidad del código fuente.
Crear un componente externo es muy fácil. En este tutorial, vamos a:
  • crear un componente externo a partir de un proyecto existente.
  • utilizar el componente externo creado anteriormente en un nuevo proyecto.
Un componente externo puede contener código, ventanas, archivos de datos, un análisis, etc.
Crear un componente externo

Abrir el proyecto de ejemplo

Vamos a crear un componente externo a partir del proyecto "WD Full Application". Este proyecto permite administrar pedidos, productos y clientes.
El componente externo se utilizará para identificar inmediatamente en otra aplicación los clientes que corresponden a una ciudad determinada.
Al llamar al componente externo, podrá:
  • Pasar una ciudad como parámetro.
  • Obtener una cadena con el nombre del cliente y el monto total de sus pedidos.
Este tutorial utiliza el proyecto "WD Full Application". Para abrir este ejemplo:
  1. Vaya a la página de inicio de WINDEV (Ctrl + <).
  2. En la página de inicio, haga clic en "Tutorial", luego en "Tutorial - WINDEV application: Manage data", haga doble clic en "Full application - Answers".
El proyecto contiene los siguientes elementos necesarios para el componente:
  • una consulta "QRY_OrdersByCity". Esta consulta con parámetros permite identificar a los clientes de una ciudad determinada, así como el monto total de sus pedidos.
  • un conjunto de procedimientos "SET_Component". Este conjunto de procedimientos contiene:
    • el procedimiento "GiveOrdersByCity" que devuelve, para la ciudad pasada como parámetro, una cadena que contiene el nombre del cliente y el monto total de sus pedidos.
    • el procedimiento "DataLocation" que permite localizar los datos utilizados por el componente.
  • un análisis para describir los archivos de datos que almacenan la información.

Crear una configuración de proyecto

Vamos a crear el componente externo a partir del proyecto "WD Full Application".
Para ello, utilizaremos una configuración de proyecto de tipo "Componente externo".
Información clave: Las configuraciones de proyecto permiten adaptar el mismo proyecto a distintas plataformas: aplicación de 64 bits, aplicación Linux, componente, etc.
Puede elegir la configuración deseada y generar los elementos correspondientes en cualquier momento. Para obtener más información, consulte Configuración de proyecto.

Para crear una configuración de proyecto de tipo "Componente externo" y asociarla a los elementos deseados:
  1. En la pestaña "Proyecto", en el grupo "Configuración del proyecto", despliegue "Nueva configuración" y seleccione "Componente externo (WDK)".
  2. El asistente de creación de nuevas configuraciones de proyecto se abre. WINDEV propone crear una configuración de proyecto de tipo "Componente". Pase a la etapa siguiente.
  3. Introduzca un nombre para la configuración de proyecto: por ejemplo, "CompoOrdersByCity". Pase a la etapa siguiente.
  4. Nuestro componente se utilizará en una aplicación Windows o Linux. Conserve las opciones predeterminadas. Pase a la etapa siguiente.
  5. Seleccione los elementos que se incluirán en la configuración de proyecto. En este ejemplo, los elementos también se incluirán en el componente.
    • Haga clic en el botón "Ninguno".
    • Seleccione los elementos "QRY_OrdersByCity" y "SET_Component".
      Configuración del proyecto
  6. Pase a la siguiente etapa y valide la creación de la configuración.
  7. La nueva configuración se convierte automáticamente en la configuración actual.
    Para identificar y modificar la configuración actual, utilice el panel "Explorador de proyectos".
    Panel 'Explorador de proyectos'
    La configuración en negrita corresponde a la configuración actual. Para cambiar la configuración actual, haga doble clic en el nombre de la configuración que desea activar.

Generación del componente

Vamos a generar el componente:
  1. En la pestaña "Proyecto", en el grupo "Generación", haga clic en "Generar".
  2. El asistente de generación de componentes se abre automáticamente. Pase a la etapa siguiente del asistente.
  3. Seleccione los elementos a los que se podrá acceder desde la aplicación cliente. En nuestro ejemplo, solo utilizaremos el conjunto de procedimientos "SET_Component":
    Generar un componente - Elementos accesibles
  4. Pase a la etapa siguiente.
  5. Puede activar la traducción del componente. Esta funcionalidad puede ser útil si el componente se utiliza en aplicaciones multilingües.
    Generar un componente - Traducción del componente
    Si la opción "Permitir traducción del componente" está seleccionada, se podrán traducir los elementos especificados del componente desde la aplicación que utiliza dicho componente.
    La traducción se realizará mediante WDMSG, un módulo independiente que extrae y reintegra los mensajes de un proyecto que se deben traducir.

    Para este ejemplo, conserve la opción predeterminada. Pase a la etapa siguiente.
  6. El asistente propone gestionar las diferentes versiones del componente. En nuestro ejemplo, acabamos de crear el componente.
    Conserve las opciones predeterminadas. Pase a la etapa siguiente.
  7. Introduzca la información del componente:
    • Propietario,
    • Título, copyright, etc.
    Pase a la etapa siguiente.
  8. Puede asociar una imagen al componente. Pase a la etapa siguiente.
  9. Introduzca una presentación general del componente. Esta presentación permitirá al usuario conocer el propósito del componente. Escriba, por ejemplo:
    Generar un componente - Presentación general
  10. Pase a la etapa siguiente. El asistente generará automáticamente la documentación del componente. Esta documentación puede basarse en los comentarios del código fuente.
  11. Pase a la etapa siguiente. Puede modificar la documentación generada. No realice ningún cambio. Pase a la etapa siguiente.
  12. Puede crear un archivo de ayuda del componente (formato CHM). Este archivo de ayuda se proporcionará junto con el componente. Los usuarios podrán acceder a la ayuda presionando F1 desde el código del componente.
    No generaremos ningún archivo de ayuda. Pase a la etapa siguiente.
  13. El componente no se publicará en el SCM. Pase a la etapa siguiente.
  14. Indique un nombre físico para el componente.
    Generación del componente
  15. Valide (botón "Finalizar"). Un mensaje indica que el componente se ha generado. Haga clic en "Finalizar" para validar el mensaje.
Ha terminado de crear el componente, ¡ya está listo para usar!
Utilizar el componente externo
Una vez creado, el componente puede utilizarse en cualquier otro proyecto WINDEV. Veamos cómo reutilizar el componente.

Crear un proyecto

Para ello, crearemos un nuevo proyecto e importaremos el componente en él.
  1. Cierre el proyecto actual: en la pestaña "Inicio", en el grupo "General", despliegue "Cerrar" y seleccione "Cerrar proyecto".
  2. Cierre el proyecto y guarde los cambios, si es necesario.
  3. La página de inicio de WINDEV aparece.
  4. Cree un nuevo proyecto: haga clic en "Crear un proyecto" en la página de inicio.
    • Este proyecto será una aplicación Windows.
    • Defina "CompUse" como nombre del proyecto y no incluya ningún análisis.

Importar un componente externo

  1. En la pestaña "Proyecto", en el grupo "Proyecto", despliegue "Importar" y seleccione "Un componente externo ... Desde un archivo".
  2. En el directorio del proyecto "WD Full Application", seleccione el subdirectorio "EXE\CompoOrdersByCity", y luego el archivo "CompoOrdersByCity.wdi".
  3. Después de hacer clic en "Abrir", se muestra la descripción del componente interno. Esta descripción contiene:
    • En la pestaña "General", los elementos introducidos al crear el componente externo y su ubicación.
      Descripción del componente
    • En la pestaña "Detalles", la descripción del componente y la ayuda que se generó automáticamente. Esto permite identificar los elementos utilizables del componente.
      Se puede acceder a la descripción del componente en cualquier momento. Seleccione el componente en el panel "Explorador de proyectos" y seleccione "Descripción" en el menú contextual. En este caso, también puede definir el modo de carga del componente.
  4. Valide (botón "Cerrar"). El componente se ha integrado correctamente en el proyecto.

Crear una ventana

Vamos a crear una ventana en blanco para utilizar el componente.
  1. Cree una ventana en blanco.
    • Para el título de la ventana, introduzca "Customers by city" .
    • El nombre de la ventana cambia automáticamente a "WIN_Customers_by_city".
    • Guarde.
  2. Abra los eventos WLanguage asociados a la ventana (seleccione "Código" en el menú contextual).
  3. Vamos a llamar a la función DataLocation del componente en el evento "Fin de inicialización". Esta función espera como parámetro la ruta que permite acceder a los archivos de datos que manipula el componente. Introduzca la ruta de acceso a los datos en el ejemplo "WD Full Application". Por ejemplo:
    DataLocation(...// Specify the path of YOUR data
    "C:\My Projects\My examples\WD Full Application (Exercises)\Exe\Windows 32-bit executable")

    Si el proyecto utiliza otro procedimiento con el nombre "DataLocation", el nombre del procedimiento del componente debe ir precedido del nombre del conjunto de procedimientos utilizado. El código pasa a ser:
    SET_Component.DataLocation(...
  4. Cierre el editor de código.
  5. Agregue los siguientes controles a la ventana:
    • Un control Campo de entrada de tipo Texto con el título "City" y el nombre "EDT_City".
    • Un control Tabla con el nombre "TABLE_Result", rellenado mediante programación y con 2 columnas:
      • una columna con el título "Name" de tipo Texto.
      • una columna con el título "Total sales" de tipo Monetario.
    • Un control Botón con el título "Search" y el nombre "BTN_Search".

Llamar al componente

Edite los eventos WLanguage del control "BTN_Search". Al hacer clic en el control, se ejecutará el procedimiento de búsqueda del componente. Este procedimiento:
  • espera el nombre de la ciudad como parámetro
  • devuelve una cadena en el siguiente formato:
    Name of customer 1 + TAB + Total sales 1 + CR +
    Name of customer 2 + TAB + Total sales 2 + ...
    El código del evento "Clic" del control "BTN_Search" debe:
  • llamar al procedimiento GiveOrdersByCity del componente pasando el contenido del control EDT_City como parámetro.
  • procesar la cadena devuelta para agregarla al control Tabla. Introduzca el siguiente código WLanguage:
    ResultList is string
    // Gets the list of customers and their orders
    // for the specified city
    ResultList = GiveOrdersByCity(EDT_City)
    // If the list is not empty
    IF ResultList <> "" THEN
    // Clears the Table control
    TABLE_Result.DeleteAll()
    // Iterates over the results
    FOR EACH STRING ACustomer OF ResultList SEPARATED BY CR
    // Adds this client to the Table control
    TABLE_Result.Add(ACustomer)
    END
    ELSE // If the list is empty
    InfoBuild("No customer found for %1", EDT_City)
    END
Cierre el editor de código y guarde la ventana.

Probar el componente

Pruebe la ventana:
  1. Haga clic en Probar ventana en los botones de acceso rápido.
  2. En el control Campo de entrada, introduzca "Paris" (conservando mayúsculas y minúsculas) y haga clic en el botón "Search". La lista de clientes aparece.
    Prueba de la ventana
¡Eso es todo!
Hemos visto cómo crear un componente y reutilizarlo en las aplicaciones. También puede utilizar procedimientos de instalación para los componentes, con el fin de distribuirlos por separado de las aplicaciones, por ejemplo.
Conclusión
En este tutorial, vimos cómo crear y utilizar un componente externo.
La siguiente etapa es distribuir el componente. No entraremos en detalles sobre los diferentes modos de instalación de un componente.
Para obtener más información sobre la instalación de componentes, consulte Distribuir un componente externo.
Tabla de contenido
Versión mínima requerida
  • Versión 2024
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 05/12/2023

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