Build a mobile-friendly app

Visão geral

Você pode usar o Apps para criar aplicativos compatíveis com dispositivos móveis. O mesmo aplicativo pode ser usado em dispositivos com tamanhos de tela diferentes, como telemações, telas, ou computadores, sem qualquer problema.

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