Création de l'interface
Création de l'interface
Préparation
Maintenant que nous nous sommes assurés que la communication s'effectuera, il est temps de faire l'application et de préparer notre outil (enfin, me direz-vous!)
Tout d'abord, saisissez dans un moteur de recherche l'adresse suivante :
http://appinventor.mit.edu/ (Site App Inventor 2» )
Une page comme ceci devrait apparaître :
Ensuite, cliquez en haut à gauche sur :
Cela devrait vous diriger vers ceci :
Puis connectez vous avec votre compte Google (ou Gmail). Si vous n'en avez pas, sa création est rapide… (create account).
Vous tombez ensuite sur une interface similaire :
Pour démarrer votre projet, cliquez sur « Start new project » (onglet « Projects »)et là, cette page apparaît :
Sauvegarde du projet
Avant toute chose, voici une étape non négligeable : la sauvegarde du projet
L'application App Inventor étant en ligne, un problème de réseau peut ruiner votre projet en cas de mauvaise sauvegarde. Il convient de sauvegarder régulièrement votre travail
Il faut se reporter au menu du haut et aller dans Projets puis Enregistrer le projet
Quant à l'interface, un petit tour d'horizon s'impose.
Présentation des éléments graphiques
Par convention, dans ce tutoriel :
la partie orange sera la partie menu
la partie bleue sera l'interface
la partie grise sera la partie composants
la partie verte sera la partie propriétés
la partie rouge garde son nom : blocks
la partie magenta est la partie "graphique" (regroupement des quatre premières parties
Maintenant, prenons un sélectionneur de liste dans le menu, et faisons le glisser sur l'interface. Pour cela, maintenez enfoncé le« sélectionneur de liste » dans le menu et faites le glisser sur l'écran virtuel. Relâchez ensuite la souris. On obtient :
Principaux elements
Maintenant, on peut voir que le menu offre plusieurs choix d'objets. Voici les plus importants :
Il vous est notamment possible de
faire les actions suivantes :
Créer un bouton
Créer une case à cocher
Sélectionner une date
Afficher une image
Afficher du texte
Créer une liste de selection
Créer une liste classique
Envoyer une notification
Afficher un curseur
Créer une zone de saisie de texte
(mot de passe...)Sélectionner l'heure
Présentation des propriétés
Nous allons présenter les propriétés principales des composants mis à notre disposition.
Tout d'abord, gardez le sélectionneur de liste sur l'écran.
Ensuite, pour centrer la liste, allez dans le menu composants, sélectionnez screen 1.
Dans l'onglet propriété → alignement horizontal, sélectionner la liste sur centrer.
Vous pouvez également changer la forme du bouton.
Allez dans Composants → sélectionneur de liste et dans Propriétés, trouvez l'onglet forme
et sélectionnez celle voulue.
Voici quelques paramètres de mise en forme :
Vous pouvez modifier la couleur de la liste en sélectionnant Couleur de fond
Pour modifier la taille de la liste, il suffit de rentrer la taille en pixels ou en \% de l'écran (Hauteur, Largeur)
Il vaut mieux préciser en \% afin que l'application soit compatible au niveau du format sur tous les appareils.
Enfin, pour décider du titre de la liste sur l'application, sélectionner la liste Selectionneur\_de\_liste1 et dans ses propriétés, modifier l'onglet texte et écrivez, par exemple « Connexion »
Choisir le nom par défaut du bouton Connexion0.6
Renommer les élements
Dans un souci de clarté, il convient de
renommer les éléments que nous
plaçons sur l'écran.
Pour renommer le sélectionneur de liste,
il faut allez dans les composants de
l'interface, et sélectionnez « Renommer »
Je l'ai renommé en « connexion ».
Pour changer la couleur d'arrière-plan de l'application, allez dans composants → screen1 et dans propriétés, sélectionnez couleur de fond
Ajouter un client Bluetooth
Par la suite, nous allons utiliser le client Bluetooth d'App Inventor.
Pour le trouver, il suffit d'explorer le menu latéral. Un ensemble d'éléments est disponible à la suite des principaux éléments énumérés dans la section menu.
Le client Bluetooth se situe dans la section Connectivité
Et voila, le client Bluetooth est mis en place.
Premier rendu et agencement des élements
En faisant toutes ces étapes, on obtient :
En ajoutant un bouton (glisser-déposer un bouton disponible dans le menu latéral) et en modifiant ses propriétés (forme, couleur...), on obtient ceci :
Générer un espace entre deux élements
On souhaite maintenant espacer le bouton "Connexion" et le bouton "Avancer"
Rien de plus simple ! Il suffit de placer un élément label
(outil dans menu) entre les deux boutons puis de
choisir ses dimensions, ce qui correspondra à l'espacement des boutons.
Pour que le label ne soit pas visible, il suffira de mettre son texte vide.
Et voilà le résultat :
Alignement des éléments
Maintenant, ce serait bien de pouvoir aligner des boutons (ou autre) horizontalement afin d'obtenir quelque chose comme ceci :
Ne vous inquiétez pas, le cadre noir n’apparaîtra pas sur l'application ; c'est juste un moyen de distinguer les alignements.
Pour faire ceci, allez dans le menu et sélectionnez l'onglet Disposition
Une fenêtre comme ceci apparaît :
Ensuite, faites glisser l'outil Arrangement Horizontal sous la liste « Connexion » et vous devriez avoir ceci :
Vous pouvez dorénavant faire glisser des boutons dans ce carré et ils se mettront automatiquement côte à côte. Il suffit de régler la taille des boutons sélectionnés dans propriétés.
Il est possible de changer les dimensions de l'outil "Arrangement Horizontal"
En revanche, il y a un fond blanc pour l'objet Arrangement Horizontal:
Couleur d'arrière-plan de l'outil Arrangement Horizontal0.7
En allant dans les propriétés de l'objet Arrangement Horizontal, mettez la couleur d'arrière-plan en « aucun »
Mise en place de l'ensemble des boutons
Après avoir mis les boutons "Droite", "Stop", "Gauche", "Reculer", "Batterie" et "Auto" et mis un peu de couleur, vous pouvez obtenir une interface de ce type :
Par la suite, veuillez mettre l'arrière-plan de « connexion » en rouge (non représenté ici)