Build a mobile-friendly app

Vue d'ensemble (Overview)

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.

Pour le démontrer, suivez les étapes de la section Tutoriel .

Vous pouvez également trouver un exemple de fichier d’application avec d’autres exemples à la fin de cette page.

Remarque :

Le contrôle Liste personnalisée ne prend actuellement pas en charge les écrans mobiles ou les petits écrans.

Tutoriel

Utilisez cet exemple pour créer une application qui contient trois champs et un bouton d'envoi. Cette application se comporte différemment selon la taille de l'écran.

1. Créer une nouvelle application

2. Ajoutez un contrôle Container à votre application.

   1. Définissez la Disposition du conteneur sur Horizontal.
   2. Cochez la propriété Autoriser l'encapsulage du conteneur.
   3. Configurez la taille Largeur du conteneur en tant que 100 %.

   

3. Ajoutez un contrôle Textbox dans le conteneur.

   1. Ajoutez Name dans la propriété Libellé (Label).
   2. Remplacez Label Placement par Top dans l’onglet Style .

4. Ajoutez un deuxième contrôle Textbox après le premier.

   1. Ajoutez Age dans la propriété Libellé (Label).
   2. Remplacez Label Placement par Top dans l’onglet Style .

5. Ajoutez un troisième contrôle Textbox après le second.

   1. Ajoutez Address dans la propriété Libellé (Label).
   2. Remplacez Label Placement par Top dans l’onglet Style .

6. Ajoutez un deuxième conteneur sous le premier avec les mêmes propriétés de style .

7. Ajoutez un contrôle Button dans le deuxième conteneur.

   

Résultat et test

Vous pouvez maintenant prévisualiser et tester votre application.

Pour tester votre application à l'aide du navigateur Google Chrome , procédez comme suit :

1. Cliquez avec le bouton droit n'importe où sur la page.

2. Sélectionnez Inspecter dans le menu.

3. Dans le menu de droite, cliquez sur Activer/Désactiver la barre d'outils de l'appareil .

4. Choisissez les dimensions souhaitées dans la liste déroulante en haut de la page pour tester votre application.

   

   Remarque :

   Dans le cas du contrôle de disposition des conteneurs , les conteneurs à l'intérieur sont automatiquement adaptés aux appareils mobiles. Si les contrôles à l'intérieur des conteneurs doivent également être réactifs, utilisez la propriété Autoriser l'emballage ( Allow wrapping ).

Pour plus d’exemples, vous pouvez télécharger l’exemple de fichier d’application ci-dessous.

Téléchargez l'exemple