Build a mobile-friendly app

Visão geral

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 demonstrar isso, siga as etapas da seção Tutorial .

Você também pode encontrar um arquivo de aplicativo de amostra com mais exemplos no final desta página.

Observação:

No momento, o controle Lista personalizada não é compatível com telas móveis ou pequenas.

Tutorial

Use este exemplo para criar um aplicativo que contém três campos e um botão de envio. Este aplicativo se comporta de maneira diferente dependendo do tamanho da tela.

1. Crie um aplicativo novo.

2. Add a Container control to your app.

   1. Defina o Layout do contêiner como Horizontal.
   2. Marque a propriedade Permitir encapsulamento do contêiner.
   3. Configure o tamanho da Largura do contêiner como 100 %.

   

3. Add a Textbox control in the container.

   1. Adicione Name na propriedade Rótulo.
   2. Altere o Posicionamento do rótulo para Superior na guia Estilo .

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

   1. Adicione Age na propriedade Rótulo.
   2. Altere o Posicionamento do rótulo para Superior na guia Estilo .

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

   1. Adicione Address na propriedade Rótulo.
   2. Altere o Posicionamento do rótulo para Superior na guia 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

Agora você pode visualizar e testar seu aplicativo.

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

1. Clique com o botão direito do mouse em qualquer lugar da página.

2. Select Inspect from the menu.

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

4. Escolha as dimensões desejadas na lista suspensa na parte superior da página para testar seu aplicativo.

   

   Observação:

   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 obter mais exemplos, você pode baixar o arquivo de aplicativo de amostra abaixo.

Baixe o exemplo