Tutorial - Desarrollar una aplicación Android e iOS

Principio

• crear una nueva ventana. Esta ventana contendrá un control Ventana interna.
• crear una ventana interna que contenga la información que se va a mostrar, en nuestro caso, la ficha de producto (Product form).
• configurar los gestos de deslizamiento en la ventana.

Crear la ventana y el control Ventana interna

1. Haga clic en en los botones de acceso rápido.
2. Cuando aparezca la ventana de creación de nuevos elementos, haga clic en "Ventana" y luego en "Ventana".
3. En el asistente, seleccione la pestaña "Estándar", elija "En blanco" y valide.
4. 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".
5. Valide.

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. Haga clic derecho en el control y seleccione "Anclaje" en el menú contextual. A continuación, defina los anclajes "Ancho y alto" ().
5. Valide.

Crear una ventana interna

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. Para abrir la ventana interna que acabamos de crear, 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", defina 360 para el ancho de la ventana. 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

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 que acabamos de crear ("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 de datos/Consulta".
   • En la fuente, para la opción "Archivo recorrido", seleccione el archivo de datos "Product".
     
6. Valide la ventana de descripción.

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.

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ú":
     
     Product.FromWindow()
     Product.Save()
     Close()
     
7. Guarde los cambios haciendo clic en en los botones de acceso rápido.
8. Cierre la ventana de código.

Abrir la 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()
   

Prueba

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.