• Crear una ventana interna a través de un proceso de refactorización.
• Cambiar el contenido de la ventana con un gesto de deslizamiento.

	Tiempo estimado: 20 min

Crear una ventana Ficha

• Para crear la ventana Ficha de producto:
  1. Cree una nueva ventana en blanco.
     • Haga clic en en los botones de acceso rápido.
     • La ventana de creación de nuevos elementos se abre: haga clic en "Ventana", y luego en "Ventana".
     • En el asistente, seleccione la pestaña "Estándar", elija "En blanco" y valide.
  2. En la ventana para guardar el elemento, indique:
     • el título de la ventana: "Product form".
     • el nombre de la ventana: "WIN_Advanced_FORM_Product".
  3. Valide.

• Para crear el control Ventana interna:
  1. En la pestaña "Creación", en el grupo "Contenedores", despliegue "Ventana interna" y seleccione "Área de deslizamiento (ventana interna)".
  2. Haga clic en la ventana en la ubicación en la que desea crear el control (en la esquina superior izquierda, por ejemplo).
  3. Cambie el tamaño del control Ventana interna para que ocupe todo el espacio de la ventana.
  4. Cambie el anclaje del control Ventana interna (opción "Anclaje" en el menú contextual): ancle el control vertical y horizontalmente ().
  5. Valide.

Crear una ventana interna

• Para crear fácilmente la ventana interna, la crearemos desde la ventana "WIN_Product_form" de nuestro proyecto:
  1. Si es necesario, abra la ventana "WIN_Product_form" en el editor (haga doble clic en su nombre en el panel "Explorador de proyectos").
  2. Seleccione todos los controles en el layout vertical (Ctrl + A).
  3. Abra el menú contextual y seleccione la opción "Refactorización .. Crear una ventana interna a partir de la selección".
  4. La ventana interna se crea automáticamente y aparece una ventana para guardarla. Defina el nombre "IW_Product" y valide.
  5. Abra la ventana interna que acabamos de crear en el editor: haga clic en "IW_Product" en las pestañas de documentos abiertos.
  6. Abra la descripción de la ventana interna. En la pestaña "UI", cambie el ancho de la ventana: 360. Este ancho corresponde al del control Ventana interna que creamos en la ventana "WIN_Advanced_FORM_Product".
  7. Valide.

Gesto de deslizamiento en la ventana Ficha de producto

• Para asociar la ventana interna a la ventana Ficha de producto:
  1. Abra la ventana "WIN_Advanced_FORM_Product" en el editor (haga clic en ella en las pestañas de documentos abiertos).
  2. Seleccione el control Ventana interna y abra su descripción (opción "Descripción" en el menú contextual).
  3. En la pestaña "General", seleccione la ventana interna "IW_Product".
     
  4. En la pestaña "UI", en la sección "Cambiar contenido al deslizar":
     • La opción "Permitir cambiar de contenido al deslizar" ya está seleccionada porque elegimos el control Ventana interna para cambiar el contenido al deslizar.
     • Seleccione la opción "Posicionarse en el registro actual al abrir la ventana interna.".
     • De forma predeterminada, la orientación del deslizamiento es "Horizontal".
       
  5. En la pestaña "Contenido" vamos a definir cómo se rellenará la ventana interna. Esta ventana mostrará los datos del archivo de datos Product:
     • Haga clic en "Archivo/Consulta".
     • En la sección fuente, en la opción "Archivo navegado", seleccione el archivo de datos "Product".
       
  6. Valide la ventana de descripción.

• Para evitar que el teclado aparezca durante el deslizamiento, vamos a utilizar la función SIPVisible:
  1. Abra los eventos WLanguage del control Ventana interna de "WIN_Advanced_FORM_Product".
  2. Introduzca el siguiente código en el evento WLanguage "Selección por deslizamiento...":
     
     SIPVisible(False)
     
  3. Cierre el editor de código.

• Para terminar esta ventana, vamos a agregar la opción de validación al Action Bar. Ya realizamos esta operación en la lección 4.2 (párrafo "Crear y modificar un producto"). Aquí, solo presentaremos los puntos principales:
  1. Seleccione el Action Bar (en la parte superior de la ventana).
  2. Abra la ventana de descripción del Action Bar.
  3. Haga clic en el número 2. Enseguida, se muestra una pantalla para editar las opciones del Action Bar.
  4. Haga clic en el botón "+" para agregar una opción. Una nueva opción se crea en la parte superior derecha.
  5. Cambie las características de la opción:
     • En el título de la opción, escriba "Done".
     • En la sección "Imagen predefinida", despliegue la lista y seleccione "Validar".
     • Valide la ventana de descripción.
  6. Para introducir el código que guarda los cambios realizados en la ventana "WIN_Advanced_FORM_Product":
     • Seleccione el control Action Bar.
     • Haga clic en "OK".
     • Enseguida, se despliega un menú con la opción "Done".
     • Haga clic derecho en la opción.
     • Seleccione "Código" en el menú contextual que aparece.
     • Escriba el siguiente código WLanguage en el evento "Selección del menú":
       
       ScreenToFile()
       Product.Save()
       Close()
       
  7. Guarde los cambios haciendo clic en en los botones de acceso rápido.
  8. Cierre la ventana de código (haga clic en la "X" de la esquina superior derecha del editor de código).

• Para abrir la ventana Ficha de producto desde la lista de productos:
  1. Abra la ventana "WIN_Advanced_LIST_Products" en el editor (haga clic en ella en las pestañas de documentos abiertos).
  2. Abra los eventos WLanguage del control Looper.
  3. En el evento "Selección de una fila...", reemplace el siguiente código WLanguage:
     
     Product.ReadSeek(ProductID,QRY_Products.ProductID)
     WIN_Product_form.OpenMobileWindow()
     
     por
     
     Product.ReadSeek(ProductID,QRY_Products.ProductID)
     WIN_Advanced_FORM_Product.OpenMobileWindow()
     

• Vamos a probar el proyecto en el simulador:
  1. Haga clic en en los botones de acceso rápido.
  2. En el control Looper que se muestra, haga clic en un producto para ver los detalles.
  3. Haga clic en la ficha del producto y desplace el ratón hacia la derecha o izquierda. La ficha del producto cambia automáticamente.
     

• gestión de correos electrónicos,
• gestión de notificaciones,
• uso del panel de visualización,
• uso del depurador,
• ...