Titre: Votre première application Android en 5 minutes avec Flex (26/04/2011 Par zion)
Création du projet
Maintenant que vous avez lu notre article de présentation de Flash Builder 4.5, essayons de réaliser une première application Android. Cela ne devrait prendre que quelques minutes montre en main, petit exemple.

On commence par choisir dans le menu New/Flex Mobile Project.

images/articles/article9680/001.png

Maintenant, nous devons donner quelques informations à Flex Builder pour créer la base de notre application. On commence par le nom ainsi que le répertoire dans lequel le squelette de l'application sera créé.

images/articles/article9680/002.png

N'ayant installé que le SDK de base, Android, nous ne pouvons pas déployer pour iOS ou BlackBerry, mais cela tombe bien l'article était prévu pour Android. On coche donc Android et pour notre exemple nous allons prendre le template en vue.

images/articles/article9680/003.png

Pas trop important encore au niveau du développement mais super important pour le déploiement sur Android Market: les permissions. Si vous voulez utiliser la caméra ou le micro vous devrez à chaque fois cocher la permission correspondante. Ces permissions devront être validées par l'utilisateur avant d'installer votre application.

images/articles/article9680/004.png
On code!
On dispose maintenant d'une application de base: Test.mxml, ainsi qu'une première vue dans notre application: TestHomeView. Rien de très glamour, et le code n'est pas encore bien fourni.

images/articles/article9680/005.png

Sans devoir programmer l'emplacement des boutons, c'est un peu pour ça aussi qu'on utilise Flex Builder après tout, on clique sur "Design" et on passe en mode... Design! On rajoute un simple bouton en glissant le composant de la gauche et on peut ensuite modifier son texte via les propriétés comme dans les environnements visuels depuis 10 ans au moins.

images/articles/article9680/006.png

Pour un peu plus de "dynamisme", rajoutons une procédure evenement sur le bouton. Pour ce faire, commencez à écrire "click=" et l'éditeur vous proposera de générer la procédure complète. On rajoute un id au boutton ce qui n'est pas fait de base, et quand on clique sur le bouton on change le texte de celui-ci en "plop" via:

button1.label = "Plop!";


images/articles/article9680/007.png

Le code de l'application jusqu'ici:

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
  3. xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView"> 
  4. <fx:Script> 
  5. <![CDATA[ 
  6. protected function button1_clickHandler(event:MouseEvent):void 
  7. // TODO Auto-generated method stub 
  8. button1.label = "Plop!"; 
  9. ]]> 
  10. </fx:Script> 
  11. <fx:Declarations> 
  12. <!-- Place non-visual elements (e.g., services, value objects) here --> 
  13. </fx:Declarations> 
  14. <s:Button x="189" y="273" width="100" label="Clic!" click="button1_clickHandler(event)" id="button1"/> 
  15. </s:View>
On lance!
En cliquant sur le bouton run, on est confronté la première fois à l'obligation de se créer un environnement de test. On peut soit directement lancer l'application sur un appareil connecté (si il est compatible Android 2.2+ bien sûr), soit utiliser l'émulateur sur le bureau, qui lui ne permet pas toutes les fonctionnalités (pas moyen de tester la caméra par exemple).

images/articles/article9680/008.png

Voici dès lors notre formidable application Android qui tourne dans l'émulateur.

images/articles/article9680/009.png

Et le clic, magie!

images/articles/article9680/010.png

Il ne reste maintenant plus qu'à avoir les idées et commencer à développer, au travail!
Retour