 Je vais retourner à l'écran. Je ne ferai pas de l'écran tout le temps. Peut-être qu'on n'a pas rejeté la location exacte que l'on a spécifiée dans l'écran. Mais juste d'en savoir que l'écran est suffisamment suffisant pour faire le lab sur vos rôles. Je vais juste ajouter quelques conseils ou plus d'informations. Mais le lab, le site, est suffisant pour vous pour faire l'ensemble du lab. Donc, c'est notre écran et nous allons commencer par ajouter une picture, une picture de background. Et quand nous ajoutons cette picture, nous allons ajouter en fait toutes les images de la démo. Donc, pour la première partie, mais aussi pour la seconde partie, la force et la pièce. Ensuite, nous allons positionner correctement la image de background. Nous allons mettre les noms et les attributs spécifiques à chaque rejet. Certaines de ces noms seront très importantes. Donc, nous devons mettre les noms exactes que nous avons mentionnées dans ce lab. Et ce lab, la raison est que quand nous allons ajouter un code spécifique pour la logique, ce qui n'est pas un code de déliné, nous referons à ces noms. Donc, si les noms ne sont pas corrects, l'application ne sera pas construite. Fortunatement, nous allons avoir un code d'air, en ce cas nous serons assez obliques. Mais, pour sauver des fois, nous allons juste mettre les noms exactes. Donc, nous allons ajouter la barbe du top de notre interface et l'image animée. Donc, c'est un rejet spécifique qui se déplace automatiquement à différents étapes d'animation. Donc, l'input de ces rejets est un set d'images correspondant à chaque étape d'animation. Donc, nous allons ajouter 10 images pour cette animation. Et nous allons le mettre en loop animation, ici, avec un intervalle spécifique pour chaque image. Et cela va automatiquement être déclenché par le library d'AJSF. Et ensuite, nous allons utiliser seulement le design pour générer le code d'abord, correspondant à le layout. Et ensuite, renseigner le simulateur pour le voir sur le PC. Et finalement, renseigner sur un target. Donc, nous allons retourner vers le designer de JFE. Donc, la première chose que nous allons faire, c'est ajouter l'image background. Donc, ici nous sommes dans le container custom. Vu, nous allons retourner vers l'écran et ajouter l'image background. Donc, seulement cliquer sur le rejet, nous allons ajouter. Nous n'avons pas à cliquer doublement. Ainsi, nous allons ajouter deux rejets, en lieu d'un. Et nous avons plusieurs manières pour ajouter des images. La première est d'aller vers l'image de l'image de la droite. Donc, la droite correspond à tous les attributs de la rejet de la selectorie. Si je sélectionne le background, j'ai besoin de l'écran. Et si je sélectionne l'image de la rejet, j'ai l'attribut de la rejet. Donc, laissez-moi mettre les mêmes noms. Donc, le nom de la rejet sera le background. La location où nous allons ajouter l'image correcte. Donc, pour ajouter des images, nous avons un moyen de faire ça. On peut either presser sur la selectorie et utiliser l'attribut de l'image. On peut presser sur le plus bouton et le boxe de dialogue va ouvrir. Donc, ici, c'est correct. C'est à la place de la droite, mais à la location. Mais on peut aller comme ça et sélectionner tous les images. Et cliquez sur le bouton de l'open. Cela va ajouter tous les images dans le système, dans le layout, en fait, dans le projet. Cela signifie que tous ces images seront converties dans le code 2C, dans les tables 2C, et incluées dans le final binary file. Nous pouvons avoir un vu de ce file dans le panel image. Et par exemple, dans notre lab, nous utilisons seulement un de ces deux. Nous avons deux. Dans le lab, dans la partie 3, nous allons ajouter un sensor de température. Et nous utilisons seulement un. Donc, ceci sera inclus dans le projet de toute façon, ce que nous ne voulons pas. Donc, nous pouvons retirer ceci. Mais juste s'il vous plait, si vous faites plusieurs tests, avec différents, je ne sais pas, différents formats de couleur pour images ou différents layouts, si vous ne remettez pas elles explicitement dans le panel image, elles seront encore incluses dans notre projet final, en justifisant un espace extérieur. Donc, faites-vous compte de cela. Et d'autre façon, pour ajouter des images, c'est de l'utiliser dans le panel image et ajouter des images ici. Et d'autre façon, c'est aussi de directement aller au folder hierarchy, et mettre les images dans ce folder, dans l'asset folder dans le folder 3JFX. Donc, vous pouvez voir que previously, ceci était empty. Maintenant, cela contient toutes les images d'input dans leur format original. Mais encore, la partie générée est empty, parce que nous n'avons pas créé le code. Donc, quand nous avons créé le code, ceci est utilisé par la conversion des images d'input dans des tables. Donc, retournons au canvas. Nous allons sélectionner l'image de l'input, et mettre le background que nous voulons. Bien sûr, vous pouvez modifier la taille, et vous pouvez aussi adapter à votre écran. Et même si vous pressiez la clé de contrôle, et utilisez la roue de la mousse, vous pouvez automatiquement zoomer et zoomer sur votre layout. Parfois, c'est un peu compliqué de le mettre correctement, mais quand vous l'entendez, c'est bien. Ensuite, nous allons ajouter l'image de la taille de la taille. Donc, encore une fois, c'est une image régulière. On choisit la taille de la taille que nous avons ajoutée, avec toutes les autres images. Et nous pouvons mettre le nom de l'image. Et la location est par défaut 0, 0, donc nous n'avons pas à le faire. Et ensuite, nous allons ajouter notre image animée. C'est une autre image de la taille de la taille que nous avons ajoutée. Nous pouvons mettre la location en utilisant les valeurs directes, ou nous pouvons ajouter et ajouter, et vous pouvez voir que nous avons des guides ici, quand nous avons ajouté la taille. Les guides sont utilisées pour aligner ici, par exemple. Elles alignent avec la ligne horizontal de la taille. Quand il y a d'autres images, il peut être utilisé, par exemple, un bouton. Il peut être utilisé pour aligner la taille de la taille, d'une autre taille, d'une autre taille. Donc, ce régulière spécifique a un nom comme tout le régulière. La location n'est pas très importante, donc je vais le mettre, par exemple, dans cette partie gauche de la taille. Et nous devons choisir la première image de la taille. Donc, la première image sera la png ne0101.png. Je peux voir que je suis plus près de la taille, donc je vais juste bouger mon régulière, un petit peu plus haut. Et, juste pour l'apparence, il n'y a pas d'impact. Je peux même le mettre à l'extérieur, mais ça marche. Il dit que cette partie ne sera jamais processée. Et la dernière image est ne011.png. Donc, c'est tout pour ce que nous voulons faire, dans cette première lave, d'excepter les façons pour l'animation. Donc, ça va commencer dès que la taille est entourée. Ça pourrait être traité par la pression d'un bouton, par exemple, si vous utilisez ce genre de rejet pour déterminer l'animation, quand vous ouvrez un fil, par exemple, ça peut être traité. Le début de l'animation sera traité par la pression d'un bouton ouvert, par exemple. Et je vais déterminer le bouton de cette animation. Donc, dès que la taille est entourée, elle va réchauffer la dernière image. Elle va retourner vers le début. Et l'intervalle de display va être 100 ms. Donc, c'est tout pour la première lave. Pour la première lave. La lave de la première lave. Donc, on peut maintenant générer le code. Dans le meantime, je vais déterminer ce que je disais. Donc, la première génération sera très longue parce que ça va générer, ça va procéder toutes les images et convertir-les dans ces tables et créer les files cpp associées. Mais ce type ne sera pas fait plus dans le reste de l'app parce que nous n'allons pas ajouter plus d'images. Et depuis que les outils peuvent détecter ces images ont changé ou n'ont pas les images d'input, nous n'avons pas besoin d'être régenerés. Donc, cliquer sur le bouton généré, c'était un peu rapide, mais il y avait un bouton bleu sur ce bouton. C'est-à-dire que quelque chose a changé sur la lave. Le code n'est pas à la date. Et ce bouton bleu va disparaître. On verra ça dans la prochaine étape. Donc, dans la log de détails, vous pouvez voir que les images d'input sont converties dans les files cpp et elles sont créées quand je parle. Et puis, les fonctions post-généres sont appelées. Donc, dans ceci, nous allons ajouter les outils d'input d'images et aussi la première implementation pour le projet de Visual Studio. Et également, l'idée est sélectée dans le projet Cubamix. L'idée est la cube SM32 Cubamix. Donc maintenant, le code source est généré. Et nous allons lancer le simulateur parce que ça prend beaucoup de temps pour le premier launch. Vous pouvez voir ici qu'il n'y a pas plus d'outils bleus dans le code généré. C'est-à-dire que ce que l'on fait dans le designer a déjà été implémenté dans ce code. Donc, dans ce code il n'y avait pas beaucoup de changements dans cette partie de la screen except que il y a maintenant un présentateur de la screen-run. Ceci sera en charge de la logique de l'application pour le moment. Il n'y a pas d'autre logique que d'adverter l'animation du projet. Nous allons externer cela durant un lab. Donc, je vais externer ce step. Donc, maintenant, le build est terminé et le simulateur a ouvert sur une autre windows. Donc, ici c'est. Donc, c'est ce que nous observons aussi sur le bord quand nous l'avons flashé. Je vais vous montrer où nous sommes précédemment dans le folder simulateur. Le projet de Visual Studio est maintenant disponible. Il a été créé durant le step de post-generation quand nous apprécions le code de génération. Et si je ouvre cette solution, ici c'est d'autres screens. Donc, je peux exactement rouler le simulateur de la même manière. Donc, en utilisant cette fois Visual Studio ToolChain plutôt que le JCC Mac file que nous avons utilisé par le design. Et la main avantage c'est que je peux mettre quelques points dans le code source. Donc, ici j'ai utilisé Microsoft Visual Studio Express 2015 qui est la dernière version qui était disponible pour Microsoft. La nouvelle est appelée Community et elle n'est pas disponible pour professionnel. Donc, en ce cas vous devez acheter un licence pour un licence Visual Studio si vous voulez utiliser cette feature. Donc, c'est la fin de la première partie de la lab. C'est maintenant les interactions.