Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

AIR Mobile – Application Pokémon (2) – Préparation de l'application

Dans le premier tutorial de ce fil rouge, on a vu quelle application nous allions créer et à l'aide d'une maquette, l'aspect général des vues:

AIR Mobile – Application Pokémon (1) – Conception et maquettage

Maintenant que tout est clair dans les têtes passons au développement de cette application. Pour la suite, on ne va pas supposer que vous avez un bon niveau en tant que développeur Flex. Certaines parties pourront donc être survolées si vous connaissez déjà bien le sujet.

Flash Builder et Flex 4.5

Puisque notre application sera sur mobiles, on va s'équiper avec les derniers logiciels et SDK d'Adobe, à savoir la version 4.5 de Flex et Flash Builder. Bien sûr, si vous souhaitez utiliser autre chose que Flash Builder, c'est vous qui décidez.

Télécharger une version d'évaluation gratuite de Flash Builder 4.5 Édition Premium

Pour le SDK Flex, pas de problème, il est compris dans le package, vous n'aurez pas à le télécharger séparément. Suivez la procédure d'installation et vous êtes parés.

Ressources nécessaires au développement

L'application que l'on va créer fonctionne complètement en offline. Vous allez donc devoir télécharger les éléments nécessaires au développement.

Voici les éléments dont vous aurez besoin:

• assets.zip (/assets) : Contient quelques icônes et le splashScreen
• icons.zip (/icons) : Contient les icônes de l'application en plusieurs tailles. Ces icônes sont représentés sur l'écran d'accueil Android par exemple
• images.zip (/images) : Contient toutes les images des pokémons en haute qualité
• mp3.zip (/mp3) : Contient tous les cris des pokémons au format MP3 (cris Gameboy)
• pokemon_db.zip (/db) : Contient la base de données sur tous les pokémons.

La problématique des assets multiples avec Flex

Si vous avez déjà utilisé Flex, vous savez si vous mettez beaucoup d'éléments dans votre dossier de sources, à chaque compilation, celui-ci va automatiquement essayer de recopier ces fichiers dans le dossier "bin-debug". Si vous avez des centaines de fichiers comme c'est le cas pour notre application, cela peut être très long, en particulier sur un système Windows.

Je vous conseille donc d'intégrer ces fichiers dès que vous en aurez besoin. Par exemple, ne copiez pas les fichiers audio MP3 tant que l'on a pas abordé la partie audio. L'autre technique consiste à copier directement ces fichiers dans le répertoire bin-debug, comme cela le compilateur ne cherchera pas à les copier. Seul problème à cette technique, il ne faut pas oublier de les remettre dans le dossier "src" avant d'effectuer un export final (release), sinon ils ne seront pas dans l'application finale.

Dans un premier temps, vous aurez besoin de /icons, /assets et /db.

Création du projet dans Flash Builder

Première étape, la plus simple, la création du projet dans Flash Builder. Lancez Flash Builder et c'est parti, File > New Flex Mobile Project.

Appelez le "PokemonInfos", Next puis choisissez le modèle par défaut View-Based Application. Finish.

Voilà, on va commencer par copier les éléments dont on a besoin. Copiez donc les dossiers /icons, /assets et /db que vous pouvez télécharger plus haut.

Vous devriez avoir cette structure de dossier à présent:

Si vous avez vraiment pas envie de faire l'effort, vous pouvez télécharger directement le projet à ce stage au format FXP et l'importer:

http://www.flex-tutorial.fr/wp-content/uploads/pokemon/PokemonInfos-1.fxp

Vous êtes maintenant prêts à coder les premières fonctionnalités, c'est ce que l'on va voir dans le prochain tutorial .