Build a mobile-friendly app

Información general

You can use Apps to build mobile-friendly apps. The same app can be used on devices with different screen sizes, such as mobile phones, tablets, or computers, without any issues.

Para demostrarlo, sigue los pasos de la sección Tutorial .

También puedes encontrar un archivo de aplicación de muestra con más ejemplos al final de esta página.

Nota:

El control Lista personalizada no es compatible actualmente con dispositivos móviles o pantallas pequeñas.

Tutorial

Use este ejemplo para crear una aplicación que contenga tres campos y un botón de enviar. Esta aplicación se comporta de manera diferente según el tamaño de la pantalla.

1. Crea una nueva app.

2. Add a Container control to your app.

   1. Establece el Diseño del contenedor en Horizontal.
   2. Marca la propiedad Permitir ajustar del contenedor.
   3. Configura el tamaño de Ancho del contenedor como 100 %.

   

3. Add a Textbox control in the container.

   1. Añade Name en la propiedad Etiqueta.
   2. Cambia la Colocación de la etiqueta a Superior en la pestaña Estilo .

4. Add a second Textbox control after the first one.

   1. Añade Age en la propiedad Etiqueta.
   2. Cambia la Colocación de la etiqueta a Superior en la pestaña Estilo .

5. Add a third Textbox control after the second one.

   1. Añade Address en la propiedad Etiqueta.
   2. Cambia la Colocación de la etiqueta a Superior en la pestaña Estilo .

6. Add a second container below the first one with the same Style properties.

7. Add a Button control in the second container.

   

Result and testing

Ahora puede previsualizar y probar su aplicación.

To test your app using the Google Chrome browser, follow the steps below:

1. Haz clic derecho en cualquier lugar de la página.

2. Select Inspect from the menu.

3. From the menu on the right-hand side, click Toggle device toolbar.

4. Elija las dimensiones deseadas de la lista desplegable en la parte superior de la página para probar su aplicación.

   

   Nota:

   In the case of the Container layout control, the containers inside are automatically mobile-friendly. If the controls inside the containers need to be reactive as well, use the Allow wrapping property.

Para ver más ejemplos, puede descargar el siguiente archivo de aplicación de muestra.

Descargar ejemplo