PC SOFT

AYUDA EN LÍNEA
DE WINDEV, WEBDEV Y WINDEV MOBILE

¡Nueva funcionalidad WINDEV Mobile 25!
Este contenido proviene de una traducción automática.. Haga clic aquí para ver la versión original en inglés.
  • Esta lección abarcará los siguientes temas
  • Presentación
  • Proyecto de apertura
  • Descripción del proyecto
  • Mostrar la lista de productos
  • Crear ventana
  • Creación de la control Tabla
  • Creación de la ventana del formulario
  • Crear ventana
  • Creación de controles
  • Mostrar el formulario de la lista de productos
  • Gestión de la creación y modificación del producto
  • Modificación de la forma del producto
  • Creación de un nuevo producto
  • Creación de una ventana de menú
  • Crear ventana
  • Personalización del menú
  • Programación del menú
  • Ejecución de la prueba de aplicación
  • Creación del ejecutable
Lección 6.3. Programación avanzada
Esta lección abarcará los siguientes temas
  • Creación de una aplicación de gestión.
  • Manejo de la base de datos.
Duración de las clases

Tiempo estimado: 1 h
Lección anteriorTabla de contenidoSiguiente lección
Presentación
En esta lección, vamos a desarrollar una aplicación para Windows Mobile que utiliza una base de datos HFSQL Classic.
Esta aplicación nos permitirá presentar algunas características específicas de la programación para Windows Mobile.

Proyecto de apertura

  • Iniciar WINDEV Mobile 25 (si no lo ha hecho ya).
  • Vaya a la página de inicio de WINDEV Mobile (Ctrl + <).
  • Abrir el proyecto "Pocket Managing Products.
    Para ello, en la página de inicio, haga clic en "Curso de autoformación" y seleccione "Pocket Managing Products (Exercise)".

    Respuesta

    Hay un proyecto corregido disponible. Este proyecto contiene las ventanas que crearemos en esta lección. Para abrir el proyecto corregido, en la página de inicio de WINDEV Mobile (Ctrl + <), haga clic en "Curso de autoformación" y seleccione "Pocket Managing Products (Answer)".

Descripción del proyecto

Echemos un vistazo a nuestro proyecto inicial. Este proyecto es un proyecto existente. No contiene ninguna ventana. Sólo contiene el análisis que describe los archivos de datos de HFSQL Classic que se utilizarán.. En el directorio EXE, los ficheros de datos correspondientes se suministran con datos para ejecutar las diferentes pruebas.
  • Para ver el análisis asociado al proyecto:
    1. Haga clic en Editar el análisis entre los botones de acceso rápido del menú WINDEV Mobile.
    2. El editor de análisis se muestra en la pantalla.
      Análisis de la lección
    3. Este análisis incluye 3 archivos de datos:
      • Un archivo de datos del "Producto", que contiene la descripción del producto: nombre, precio, cantidad, ....
      • Un archivo de datos "Characteristic", que contiene las características del producto. Por ejemplo, si el producto es una camiseta, sus características se corresponderán con la talla, el color y la forma de la camiseta., ... Por lo tanto, el archivo de datos "Característico" es relacionado al archivo de datos "Producto".
      • Un archivo de datos "Store", que contiene las coordenadas GPS de cada tienda.
    4. Cierre el editor de análisis (haga clic en la cruz en la parte superior derecha del editor).
Ahora vamos a desarrollar nuestra aplicación.
Mostrar la lista de productos
Vamos a crear una ventana para listar los diferentes productos. Estos productos se mostrarán en un control "Table".

Crear ventana

  • Para crear una nueva ventana:
    1. Haga clic en Crear un elemento en los botones de acceso rápido. La ventana para crear nuevos elementos se abre: haga clic en "Ventana" y luego en "Ventana"..
    2. En la asistente, despliegue la pestaña "Estándar", elija "En blanco" y valide.
    3. A continuación, se abre una ventana para guardar el elemento.
    4. En la ventana que se muestra, escriba el título de la ventana: "Lista de productos". El nombre de la ventana y la ubicación se rellenan automáticamente. Mantenga los valores por defecto y valide (botón"OK").
    5. La ventana se añade al proyecto.

Creación de la control Tabla

Para visualizar la lista de productos, vamos a utilizar un control "Table. La información principal sobre los productos se mostrará en este control.
  • Crear el control "Table":
    1. En la pestaña "Creación", en el grupo "Datos", despliegue "Tabla" y seleccione "Tabla (Vertical)".
    2. El control aparece debajo del ratón.
    3. Haga clic en la ubicación en la que desea crear el control (arriba, por ejemplo). Comienza la asistente para crear una control Tabla.
    4. En la asistente, seleccione "Mostrar los datos encontrados en un archivo o en una consulta existente". Pase a la etapa siguiente.
    5. Seleccione el archivo de datos del "Producto". Pase a la etapa siguiente.
    6. Seleccione las posiciones que desea visualizar:
    7. Mantenga los ítems "Nombre", "Descripción" y "Precio" (una marca de verificación debe ser encontrada en frente de estos ítems).. Pase a la etapa siguiente.
    8. Conservar la posición de clasificación propuesta (ProductID). Los productos serán clasificados en la control Tabla de acuerdo a este ítem. Pase a la etapa siguiente.
    9. En el paso "Parámetros adicionales", mantenga las opciones predeterminadas. Pase a la etapa siguiente.
    10. Seleccione la orientación "Vertical" y vaya al paso siguiente.
    11. Mantenga el nombre por defecto ("TABLE_Product") y valide.
    12. El control Tabla aparece en el editor de ventanas.
    13. Redimensionar el control y sus columnas a través de las manijas para que el contenido se muestre en la ventana.
control Tabla en el editor

Observación

Los datos aparecen automáticamente en la ventana que se muestra en el editor. Este concepto se llama "Live Data".: usted ve los datos de sus archivos de datos en tiempo real!
Esta función es muy útil para adaptar el tamaño de los controles a su contenido.
  • Guarde la ventana haciendo clic en el ícono Grabe el elemento en los botones de acceso rápido.
  • Vamos a hacer una primera prueba en el simulador para ver el resultado. Haga clic en Ejecutar una prueba de ventana entre los botones de acceso rápido (o pulse F9).
Prueba de la ventana
  • Cierre el simulador para volver al editor de ventanas.
Creación de la ventana del formulario
Ahora vamos a crear una nueva ventana para mostrar el formulario del producto. A continuación, esta ventana se iniciará desde la lista de productos para mostrar los detalles del producto seleccionado.

Crear ventana

  • Para crear la ventana del formulario:
    1. Crear una nueva ventana en blanco. Haga clic en Crear un elemento en los botones de acceso rápido. La ventana para crear nuevos elementos se abre: haga clic en "Ventana" y luego en "Ventana"..
    2. En la asistente que comienza:
      • Seleccione la pestaña "Estándar".
      • Seleccione "En blanco".
    3. Valide el asistente.
    4. A continuación, se abre una ventana para guardar el elemento. Especifique el título de la ventana: "Forma del producto". Su nombre se propone automáticamente: "WIN_Product_form". Valide.

Creación de controles

  • Para crear una control Campo de entrada:
    1. Si es necesario, despliegue el panel "Análisis" (en el panel "Inicio", en el grupo "Entorno", expanda "Paneles" y seleccione "Análisis"). En el panel aparecen los diferentes ficheros de datos descritos en el análisis "Pocket Managing Products".
    2. Con el ratón, seleccione los elementos del archivo de datos del "Producto" que se muestran en el panel (excepto el elemento "ProductID").
    3. Arrastre y suelte estos elementos a la ventana que acaba de crear.
      Arrastrar y soltar elementos
    4. Cambie el tamaño de los controles ("Nombre", "Código de barras", "Fecha de pedido" y "Descripción") para que sean visibles en la ventana:
      • Seleccione el control deseado.
      • Use las manijas de tamaño (cuadrados azules) para cambiar el tamaño del control.
    5. Reorganizar los controles en la ventana.
      Reorganización de los controles en la ventana
      Respetar el siguiente orden: "Foto", "Nombre", "Precio", "Cantidad", "Código de barras", "Fecha de pedido", "Descripción".
    6. Vamos a ver el orden de tabulación en la ventana: pulsar la tecla F5. Los números que se muestran representan la orden de tabulación en la ventana. Presione la tecla F5 de nuevo para hacer que los números desaparezcan.. La orden de tabulación se adapta automáticamente al orden de los mandos de la ventana..
    7. Guarde la ventana (Ctrl + S).
  • Ejecute la prueba de la ventana ( Ejecutar una prueba de ventana entre los botones de acceso rápido). La ventana se muestra con los controles vacíos.
  • Cierre la ventana de prueba para volver al editor.
  • Para mostrar los datos del producto:
    1. Muestra los eventos WLanguage asociados a la ventana:
      • Haga clic con el botón derecho del ratón en el área situada junto a la ventana
      • Seleccione "Código" de el menú contextual que se muestra.
      • Aparece el editor de código.
    2. Introduzca el siguiente código en el evento "Fin de la inicialización del formulario WIN_Product_form":
      FileToScreen()
      FileToScreen se utiliza para mostrar en los controles los datos que se encuentran en el archivo de datos, para el registro actual.
    3. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
    4. Grabe la ventana.

Mostrar el formulario de la lista de productos

Veamos ahora cómo mostrar la forma del producto seleccionado en la lista de productos.
  • Realice las siguientes operaciones:
    1. Vaya a la ventana "Lista de productos": haga clic en el botón "WIN_List_of_products" en la barra de documentos abierta:
      Barra de documentos abiertos
    2. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Botón : la forma del control aparece bajo el puntero del ratón. Luego, haga clic en la parte inferior de la ventana para crear la control Botón.
    3. Seleccione el control y pulse Intro. El título del control se vuelve editable. Escriba "Modify the element" y pulse Enter en el teclado.
    4. Si es necesario, redimensione el control (con los controladores de tamaño) para que se muestre todo el texto en el control.
    5. Haga clic con el botón derecho del ratón en el control y seleccione "Código" de el menú contextual.
    6. En la ventana de código que aparece, escriba el siguiente código en el evento "Click":
      Open(WIN_Product_form)
      TableDisplay(TABLE_Product, taCurrentSelection)

      Observación

      La entrada de código asistida le ayudará a: en cuanto teclee el corchete de apertura "(", una lista desplegable propone el nombre de todas las ventanas existentes en el proyecto. Todo lo que tiene que hacer es seleccionar la ventana con el teclado o con el ratón.
      Si el nombre de la ventana no se muestra en la lista, significa que esta ventana no se ha guardado previamente.
    7. Guarda las modificaciones pulsando Grabe el elemento entre los botones de acceso rápido.
    8. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
      • Vuelva a ejecutar la prueba de la ventana en el simulador ( Ejecutar prueba del elemento entre los botones de acceso rápido).
      • En la lista de productos, haga clic en uno de ellos con el ratón.
      • Haga clic en el botón "Modificar el elemento".
      • Se muestra la ventana detallada del producto.
  • Cierre el simulador.
Gestión de la creación y modificación del producto
Ahora vamos a modificar nuestras dos ventanas para gestionar la adición y modificación del producto.

Modificación de la forma del producto

Vamos a añadir un botón en la ventana "WIN_Product_form".: un botón "Validar" para gestionar la validación de las modificaciones.

Observación

En las aplicaciones para Windows Mobile, no es necesario utilizar el botón "Cancelar. De hecho, el usuario puede simplemente hacer clic en la cruz (arriba a la derecha de la ventana) para cancelar la entrada realizada.
  • Crear la control Botón "Validar" en la ventana "WIN_Product_form":
    1. Mostrar (si es necesario) la ventana "WIN_Product_form" en el editor: haga clic en el botón correspondiente en la barra de documentos abierta.
    2. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Botón : la forma del control aparece bajo el puntero del ratón. A continuación, haga clic en la ventana para crear el control (junto al control Imagen, por ejemplo).
    3. Seleccione el control y pulse Intro. El título del control se vuelve editable. Escriba "Validate" y pulse Enter en el teclado.
      Ventana en modo edición con control Botón
    4. Si es necesario, redimensione el control (con los controladores de tamaño) para que se muestre todo el texto en el control.
  • Ahora escribiremos el código WLanguage asociado a la control Botón "Validar".
    1. Haga clic con el botón derecho del ratón en el control y seleccione la opción "Código" de el menú contextual.
    2. Escriba el siguiente código en el evento "Click":
      ScreenToFile()
      HModify(Product)
      Close()

      Vamos a estudiar este código:
      • ScreenToFile se utiliza para inicializar los elementos con los valores de los controles de relacionado, para el registro actual.
      • HModify se utiliza para actualizar los datos del archivo para el registro actual.
      • Cerrar se utiliza para cerrar el formulario y volver a la ventana "WIN_List_of_products".
    3. Guarda las modificaciones pulsando Grabe el elemento entre los botones de acceso rápido.
    4. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
  • Mostrar la ventana "WIN_List_of_products" en el editor de la ventana y ejecutar su prueba en el simulador ( entre los botones de acceso rápido).
    • En la lista de productos, haga clic en uno de los productos con el ratón: por ejemplo, el producto "Polo Hibbicus Blue" a un precio de 25,90 dólares.
    • Haga clic en "Modificar el elemento".
    • Se muestra la ventana detallada del producto. Modifique el precio de 25,90 dólares y escriba 19,90 dólares, luego haga clic en el botón "Validar".
    • Al volver a la lista de productos, notará que el precio fue actualizado para este producto.
  • Cerrar el simulador. Aparece el editor WINDEV Mobile.

Creación de un nuevo producto

El principio para crear un producto es el siguiente:
  • En la ventana de la lista de productos, vamos a añadir un botón "Nuevo producto" que se utilizará para abrir la ventana "Forma del producto".
  • Enseguida, modificaremos el código de la ventana "Product Form" para poder agregar registros al archivo de datos Product.
  • En primer lugar, muestre (si es necesario) la ventana "WIN_List_of_products" en el editor: haga clic en el botón correspondiente en la barra de botones.
  • Para crear una nueva control Botón:
    1. En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en Crear un control Botón : la forma del control aparece bajo el puntero del ratón. A continuación, haga clic en la ventana para crear el control (por ejemplo, junto a la ventana "Modificar el elemento" de control Botón).
    2. Seleccione el control y pulse Intro. El título del control se vuelve editable. Escriba "Nuevo producto" y pulse Intro en el teclado.
      Ventana en el editor
    3. Si es necesario, cambie el tamaño de la control Botón (usando las manijas) para que el título se muestre completamente.
    4. El código WLanguage de esta control Botón le permitirá abrir la ventana "Forma del producto" y restablecer sus controles.. Para escribir este código:
      • Haga clic con el botón derecho del ratón sobre el "Nuevo producto" control Botón.
      • Seleccione "Código" de el menú contextual que se muestra.
      • Introduzca el siguiente código en el evento "Clic" WLanguage:
        HReset(Product)
        Open(WIN_Product_form)
        TableDisplay(TABLE_Product)
        • HReset inicializa las variables del artículo en el archivo de datos del producto con los valores predeterminados para gestionar un nuevo registro.
        • Abrir se utiliza para abrir la ventana del formulario.
        • TableDisplay se utiliza para actualizar el contenido de control Tabla: el nuevo registro se mostrará en el control.
    5. Guarda las modificaciones pulsando Guardar un elemento entre los botones de acceso rápido.
    6. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
  • Ahora vamos a modificar la ventana de formulario de producto para gestionar la adición de un nuevo registro.
    1. Abra la ventana "WIN_Product_form" en el editor.
    2. Modificaremos el código de la control Botón utilizada para validar el formulario:
      • Haz clic con el botón derecho del ratón en la control Botón y selecciona "Código" en la el menú contextual.
      • En el evento "Click", sustituya el código WLanguage existente por el siguiente:
        ScreenToFile()
        IF Product..NewRecord THEN
        HAdd(Product)
        ELSE
        HModify(Product)
        END
        Close()
      Echemos un vistazo a estas líneas de código:
      • ..NewRecord se utiliza para averiguar si el registro actual debe ser creado.
      • Si se llamó a la función HRESET previamente, la propiedad devuelve True (clic en "Nuevo producto") y el registro se creará con la función HAdd.
      • De lo contrario, el registro actual ya existe y debe ser modificado por HModify.

        Observación

        El código de prueba del nuevo registro puede ser reemplazado por HSave. Esta función se utiliza para comprobar si el registro ya se encuentra en el archivo de datos, y permite añadirlo o modificarlo. El código se convierte en:
        ScreenToFile()
        HSave(Product)
        Close()
    3. Guarde las modificaciones haciendo clic en Grabe el elemento entre los botones de acceso rápido.
    4. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
  • Mostrar la ventana "WIN_List_of_products" en el editor de la ventana y ejecutar su prueba en el simulador ( Prueba de la ventana en el simulador entre los botones de acceso rápido).
    • En la lista de productos, haga clic en el botón "Nuevo producto".
    • Escriba un nuevo producto.
    • Valide. El nuevo producto se muestra en la lista de productos.
    • Cierre el simulador.
Creación de una ventana de menú
Ahora vamos a crear una ventana para implementar el menú de la aplicación.

Crear ventana

En primer lugar, vamos a crear una ventana en blanco con un menú.
  • Para crear la ventana:
    1. Crear una nueva ventana en blanco. Haga clic en Crear un elemento en los botones de acceso rápido. La ventana para crear nuevos elementos se abre: haga clic en "Ventana" y luego en "Ventana"..
    2. En la ventana de creación de asistente, haga clic en la pestaña "Estándar".
    3. Seleccione "Wizard" y valide.
    4. La creación de la ventana de Windows Mobile asistente comienza.
    5. Seleccione "Maximizado" y vaya al paso siguiente.
    6. En la etapa de parámetros avanzados, seleccione "Con menú y barra de herramientas".
      Creación de la ventana en blanco asistente
      Pase a la etapa siguiente.
    7. Especifique el título de la ventana: "Menú".
    8. Valide el asistente. La ventana se muestra en el editor.
    9. A continuación, se abre una ventana para guardar el elemento. El nombre introducido en la asistente se propone automáticamente en la ventana de guardar. Valide.

Personalización del menú

Vamos a modificar el menú para llamar a la ventana de lista de productos y salir de la aplicación.
  • Modificar la opción del menú:
    1. Haga clic con el botón derecho del ratón en la opción "Menú" para mostrar el menú contextual.
      Observación: Esta opción "Menú" se encuentra en la parte inferior izquierda de la ventana..
    2. Seleccione "Descripción de la opción". Aparece la ventana de descripción.
    3. Modificar el título de la opción que se convierte en "Producto".. Valide la ventana de descripción.
    4. Seleccione de nuevo la opción de menú.
    5. Mostrar el menú contextual (clic derecho):
      Menú emergente de la opción de menú
    6. Seleccione "Transformar para expandir un submenú".
    7. En el área de entrada que se muestra, introduzca "Lista de productos" y valide.
      Menú de la ventana
    8. Haga clic con el botón derecho del ratón en la nueva opción y seleccione "Añadir antes" de el menú contextual.
    9. En el área de entrada que se muestra, escriba "Exit" y valide.

Programación del menú

Ahora vamos a escribir el código de estas dos opciones de menú.
  • Permite definir el código WLanguage de la opción "Exit":
    1. En el editor de ventanas, visualizar la opción "Exit".. Simplemente expande el menú, como en el tiempo de ejecución.
    2. Despliega la opción el menú contextual de "Salir" (clic derecho del ratón) y selecciona "Código".
    3. Escriba el siguiente código:
      Close()

      Cerrar se utiliza para cerrar la ventana actual. Siendo la ventana "Menú" la única ventana, la aplicación se cierra automáticamente.
  • Definir el código WLanguage de la opción "Lista de productos":
    1. En el editor de ventanas, vaya a la opción "Lista de productos". Simplemente expande el menú, como en el tiempo de ejecución.
    2. Despliega el menú contextual de la opción "Lista de productos" (clic derecho del ratón) y selecciona "Código".
    3. Escriba el siguiente código WLanguage:
      Open(WIN_List_of_products)
    4. Guarda las modificaciones pulsando Grabe el elemento entre los botones de acceso rápido.
    5. Cierre la ventana de código (haga clic en la X en la esquina superior derecha del editor de código).
Ejecución de la prueba de aplicación
El último paso consiste en especificar que la ventana del menú es la primera ventana de la aplicación. Para ello, vamos a definir la primera ventana del proyecto y realizar una prueba completa del proyecto.
  • Definir la primera ventana del proyecto:
    1. Seleccione la ventana "WIN_Menú" en el panel "Explorador de proyectos".
    2. Mostrar el menú contextual.
    3. Seleccione "Primera ventana de proyecto".. Un icono específico (con un 1 pequeño) aparece delante del nombre de la ventana, en el panel "Project explorer".
Hasta ahora, la prueba de las ventanas se ejecutaba individualmente pulsando Ejecutar la prueba de la ventana entre los botones de acceso rápido.
  • Para ejecutar la prueba del proyecto:
    1. Haga clic en Probar proyecto en los botones de acceso rápido.
    2. Su proyecto comienza con la ventana del menú. Haga clic en una opción de su menú para comprobar si los diferentes enlaces son correctos.
Eso es todo, nuestra aplicación está creada, ahora debemos compilarla e instalarla en el dispositivo para poder probarla en condiciones reales.
Creación del ejecutable
  • Para generar la aplicación Windows Mobile:
    1. En la pestaña "Proyecto", en el grupo "Generación", haga clic en "Generar" (también puede hacer clic en Crear ejecutable en los botones de acceso rápido).
    2. Comienza la creación del ejecutable móvil asistente.
    3. El primer paso de la asistente es definir el nombre y el icono de la aplicación. El icono del ejecutable se puede elegir en el catálogo de imágenes de WINDEV Mobile (botón"Catálogo").
    4. Los otros pasos no son requeridos por nuestra aplicación. Haga clic en el enlace "2- Copiar en el móvil" que se encuentra a la izquierda de la asistente.
    5. Este paso se utiliza para definir las opciones para copiar archivos en el dispositivo móvil:
      Copiar archivos al dispositivo móvil
    6. Las opciones a elegir dependen de su configuración:
      • Si hay un dispositivo móvil conectado, seleccione "Sí: Copia el ejecutable al Pocket PC" así como "Iniciar aplicación en el Pocket PC al terminar de copiar". En este caso, una vez generado el ejecutable, la aplicación se copiará e iniciará automáticamente en el móvil.
      • Si no hay ningún dispositivo móvil conectado, seleccione "No: No copie el ejecutable al Pocket PC". En este caso, la aplicación puede desplegarse en los dispositivos móviles mediante un procedimiento de configuración.
    7. Pase a la etapa siguiente.
    8. Si la opción "Sí: Se seleccionó "Copiar el ejecutable al Pocket PC", la asistente propone los archivos a copiar en el Pocket PC:
      Selección de archivos para copiar en el teléfono móvil
    9. Validar la selección de los archivos sugeridos.
Eso es todo, tu aplicación se genera y se ejecuta en el dispositivo Windows Mobile.
Lección anteriorTabla de contenidoSiguiente lección
Versión mínima requerida
  • Versión 25
Comentarios
Haga clic en [Agregar] para publicar un comentario