Débuter avec App Inventor (document ressource).pdf

Transcription

1 Débuter avec Objectifs Documents Matériel Découvrir l'environnement graphique de conception d'applications Android "". Concevoir des applications simples mettant en œuvre des composants et des techniques de base. Débuter avec (document ressource).pdf Tablette graphique (ou smartphone) pour le test final (pouvant également être effectué avec l'émulateur dans certains cas) Ordinateur avec Java et à jour Présentation est une application en ligne qui permet, avec un minimum de connaissances de la programmation, de développer des applications simples pour les appareils dotés du système d'exploitation Android. Avant toutes choses, il est nécessaire de prendre connaissance du document de référence "Débuter avec (document ressource)" qui pose les bases indispensables. Une première application très simple Pour commencer simplement, vous allez concevoir une application très simple : un bouton qui, lors d'un clic (en fait un "effleurement" car l'écran est tactile sans nécessiter aucune pression) affichera un texte dans une zone réservée à cet effet. C'est inutile, mais ça permet de commencer sans difficulté Créer le projet et définir le design de l'application Q1. Ouvrez l'environnement graphique web en vous rendant à l'adresse : Cliquez sur le bouton nvent (Create Mobile Apps) et entrez les paramètres du compte Google associé à cet usage. Dans "My Projects", créez un nouveau projet nommé "Test". Vous devez commencer par concevoir l'interface graphique de l'application (son apparence sur l'écran de l'appareil cible). Q2. Dans la liste "Components" (à droite), cliquez sur "Screen1" (non renommable) et choisissez la couleur du fond d'écran (BackgroundColor), ou une image (Backgroudmage) et le titre de l'écran (Title). Vous pouvez également choisir une icône pour votre application. Elle remplacera l'icône par défaut (votre icône n'est associée au programme que lorsqu'il est effectivement installé sur l'appareil). Document ressource Page 1/5 04/11/2012

2 Q3. A partir de la rubrique "Palette Basic" sur la gauche de l'écran, placer un bouton en le faisant glisser vers l'écran simulant l'appareil. Dans la liste "Components" (à droite), modifier éventuellement le nom du bouton (au moyen de la commande "Rename"). Q4. Editer les propriétés du composant en choisissant : la couleur du bouton (BackgroundColor), le texte affiché sur le bouton ainsi que le style et la couleur de ce texte (Text, FontTypeface, FontBold, Fonttalic, FontSize, TextColor), la largeur (Width) et la hauteur (Height) du bouton, selon les critères suivants : L'option "Automatic" fixe la taille du bouton par défaut, L'option "Fill parent" élargit la taille du bouton à la taille de l'écran, L'option "pixels" permet de spécifier une taille fixe en pixels (le résultat dépend de la résolution de l'écran de l'appareil cible). Q5. Pour afficher le texte qui sera associé au clic du bouton, il est nécessaire d'ajouter un composant basique nommé "Label", dont vous pouvez fixer les propriétés (comme pour le bouton). C'est une simple zone d'affichage, non cliquable (donc non modifiable par l'utilisateur). Rendre l'application fonctionnelle Une interface graphique, c'est bien, mais seule, ça ne sert pas à grand-chose. Vous allez donc maintenant concevoir le programme qui va avec. Graphique ou pas, sa complexité ne va dépendre que des fonctionnalités que vous y incorporez. Souvenez-vous bien, dans, votre application se construit en associant des actions à des événements. Les notions de temporalité ou de priorité des événements entre eux sont ici sans objet Q6. Lancez l'éditeur de blocs. Dans la rubrique "My Blocks" (associée aux composants que vous avez incorporé dans l'environnement graphique), choisissez l'événement "Click" associé à un effleurement de courte durée du bouton. Comme indiqué dans le bloc, quand (when) le bouton est effleuré, l'action que vous y accrocherez sera exécutée (do). l existe d'autres événements associés au bouton, comme l'effleurement de durée supérieure à 2 secondes (LongClick) ou en utilisant un trackball (mini souris) avec un pointeur passant au-dessus du bouton (GotFocus) ou restant en dehors du bouton (LostFocus). Ces deux dernières actions ne sont pas associées à l'écran tactile et sont donc généralement inutilisées. Ajoutez l'action produite par l'effleurement du bouton. Cette action devant produire l'affichage d'un texte, elle est associée au composant "Label1" (nom par défaut, sauf si vous l'avez modifié). Document ressource Page 2/5 04/11/2012

3 Q7. Dans la rubrique "My Blocks Label1" se trouvent les méthodes disponibles pour le composant. l est ainsi possible de définir (action "set") le texte affiché (Text), son style (TextColor, FontSize, Height, Width) et la couleur du fond (BackGroundColor). Emboîtez la méthode "Text" sur l'événement d'effleurement du bouton et dans la rubrique "Built-n Text", choisissez le bloc "Text" et emboîtez-le à l'extrémité nommée "to" de la méthode précédente. Ecrivez le texte à afficher (dans la zone entourée). Pour gagner du temps, l'éditeur de blocs possède une fonction d'accès rapide aux contenus de la rubrique "Built-n" (fonctions de base). En cliquant sur une zone vide de la fenêtre d'édition, le contenu de la rubrique s'affiche sous la forme d'une barre horizontale de boutons. l n'y a plus qu'à choisir dans les listes déroulantes associées. Tester le résultat L'application est terminée (elle était volontairement très simple pour se familiariser avec l'environnement). l ne reste plus qu'à la tester Q8. Testez votre application sur l'émulateur et vérifiez son fonctionnement (ne pas oublier de déverrouiller l'affichage de l'émulateur pour voir le résultat). Testez aussi l'application sur un téléphone ou une tablette Android (préalablement installée sur l'ordinateur et configurée selon les indications données dans le document ressource). Utiliser les ressources graphiques de l'appareil Fort des connaissances acquises dans la première partie du, vous allez maintenant développer une application permettant d'utiliser deux ressources matérielles graphiques majeures : l'appareil photo numérique (AP) pouvant aussi être utilisé comme une caméra, l'écran tactile. Cette application doit permettre de prendre une photo et l'utiliser comme fond d'écran (un bouton est donc prévu à cet effet) et dessiner sur cette photo en glissant le doigt sur l'écran. Créer le projet et définir le design de l'application Q9. Créez un nouveau projet nommé "Dessine_Photo" et définissez l'environnement graphique de l'application. L'appareil photo est le composant nommé "Camera" se trouvant dans la palette "Media" (ce composant étant caché, il apparait dans la zone "on-visible components" située en dessous de l'écran). Placez également un bouton nommé "Prend une photo" (c'est le texte affiché sur le bouton) et renommez le composant en "PrendPhoto". Document ressource Page 3/5 04/11/2012

4 Afin de pouvoir dessiner sur l'écran, il faut ajouter un nouveau composant appelé "Canvas" (se trouvant dans la palette basique) qui correspond à une zone tactile de l'écran de l'appareil. Définissez sa taille en choisissant l'option "Fill parent " pour sa largeur (toute la largeur de l'écran) et environ 300 pixels pour sa hauteur (dépendant de l'appareil cible). Rendre l'application fonctionnelle (édition de blocs) Q10. Dans l'éditeur de blocs, à l'évènement clic long du bouton, associez la procédure de prise de vue (TakePicture) de l'appareil photo. La photo prise par l'appareil doit être appliquée en fond d'écran. Cependant, il ne faut pas confondre l'écran, repéré "Screen" dans l'interface web, qui peut être plus allongé que la zone visible de l'appareil et la une zone tactile visible nommée "Canvas". La prise de vue correspond au lancement d'une application faisant partie intégrante de l'appareil Android. Une fois que la photo est prise, il suffit de préciser l'action qui suit. Q11. Ajoutez l'évènement lié à l'utilisation de la photo prise par l'ap. Attention, pour permettre de dessiner par-dessus la photo, il faut utiliser la méthode Canvas1.BackGroundmage (au lieu de Screen1.BackGroundmage qui placerait la photo tout en bas de notre écran). Q12. Ajoutez l'évènement "Canvas.Dragged" associé au glissement du doigt sur la partie tactile de l'écran. La position du doigt est repérée par des coordonnées cartésiennes (X, Y), par rapport à une origine située dans le coin supérieur gauche de la zone tactile. Augmentez l'épaisseur du tracé à 5 (pixels). X Y 7 arguments (variables d'entrée de la fonction) Position de départ (correspondant au premier toucher de l'écran, avant le glissement) Position précédant immédiatement la position courante Position courante (actuelle) Un "sprite" est une petite image superposée au fond d'écran et qui peut se déplacer (seule sur une trajectoire ou en la faisant glisser). Tous les arguments des fonctions de l'application se trouvent dans la rubrique "My Blocks My Definitions" de l'éditeur de blocs. Document ressource Page 4/5 04/11/2012

5 Q13. A l'évènement glissement du doigt, attachez la méthode de tracé de ligne du composant "Canvas1" en lui associant les arguments "position immédiatement précédente" (x1, y1) et "position courante" (x2, y2) de la zone tactile. Tester le résultat Q14. Testez votre application sur un appareil Android (pour pouvoir prendre une photo) et vérifiez son fonctionnement. Le cas échéant, corrigez les éventuels dysfonctionnements constatés et montrez le résultat de cette application au professeur. Et pour les plus rapides L'application précédente est intéressante car elle utilise des composants fondamentaux de l'appareil. On peut cependant l'améliorer en la dotant de fonctionnalités supplémentaires : un bouton "Efface" pour effacer complètement les tracés superposés à la photo, trois boutons colorés pour choisir parmi trois couleurs de la palette disponible. Lorsqu'on ajoute des composants dans l'environnement graphique, ils se positionnent par défaut selon une suite verticale sur l'écran de l'application. Pour disposer des composants sur une ligne horizontale, il est nécessaire d'utiliser le composant "HorizontalArrangement" (dans la palette "Bacic Screen Arrangement"). l est également possible de réaliser un arrangement vertical ou en tableau des composants Q15. Ajoutez les 4 nouveaux boutons pour former 2 arrangements horizontaux (un arrangement pour les boutons de couleur et un autre pour les boutons prise de vue et effacement). Choisissez les couleurs à votre goût et paramétrez les boutons en conséquence. Q16. Adaptez le programme pour qu'il agisse au clic court des boutons de couleur et au clic long du bouton d'effacement. Q17. Ajoutez une fonction de dessin d'un point de la couleur choisie lors d'un effleurement de l'écran sans déplacement du doigt (évènement "Canvas1.Touched"). Choisissez la taille du point, toujours indiquée en pixels. Q18. Testez votre application sur l'appareil. Une fois terminée, montrez le résultat de cette application au professeur. Document ressource Page 5/5 04/11/2012