Le document présente le framework Adobe Flex pour le développement d'applications mobiles, en mettant l'accent sur ses fonctionnalités, ses composants et sa compatibilité avec diverses plateformes. Il aborde également les outils associés comme Flash Builder, les standards de développement, et l'importance d'une interface adaptable. Enfin, les perspectives futures incluent l'intégration de nouvelles fonctionnalités et l'évolution vers Flex 4.6 et HTML 5.

1. Accélérez et optimisez vos
développements d'applications
mobiles
WsN Replay
Rennes - Jeudi 24 novembre 2011
Billy Thach
Zenika © 2011 1

2. Zenika Rennes & Nantes
Nous suivre sur Twitter : @ZenikaOuest
Zenika © 2011 2 2

3. What’s Next 2011
Présentation Flex Mobile
 Retour et décryptage de la présentation de Michaël Chaize
 Enjeux des applications RIA (Rich Internet Application)
 Présentation du framework Flex
 Développement d’une application Flex Mobile
 Plus quelques démos…
Zenika © 2011 3

4. Adobe Flex
Introduction
 Objectifs des applications RIA
o Améliorer l’expérience utilisateur
o Proposer du contenu riche et dynamique
 Framework produit par Adobe
o Contient un ensemble de composants permettant de développer des
applications RIA
o Open-source et gratuit depuis 2007
 Propose 3 modes de déploiement
o Web : navigateur + Flash Player
o Desktop : runtime AIR (Adobe Integrated Runtime)
o Mobile : runtime AIR
Zenika © 2011 4

5. Adobe Flex
Composants
Zenika © 2011 5

6. Adobe Flex
MXML vs ActionScript
 MXML
o Syntaxe déclarative de création d’interface
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:Panel>
<s:Label text="Label" />
<s:Button label="Button" />
</s:Panel>
</s:Application>
 ActionScript
o Syntaxe familière aux développeurs JAVA
package com.zenika.flex {
public class MyClass interface MyInterface {
public function MyClass() {
}
public function doSomething():String {
}
}
}
Zenika © 2011 6

7. Adobe Flex
Intégration serveur
 Communication via des WebServices
o JAX-WS ou JAX-RS
o Parseur XML natif
 Interrogation de services Java (RPC)
o Frameworks dédiés (BlazeDS, GraniteDS, …)
o Sérialisation des données (format AMF)
o Intégration avec la plupart des frameworks côté serveur (Spring, EJB,
Seam, …)
 Push de données
o Synchronisation des données entre les différents clients
o Envoie de notifications
Zenika © 2011 7

8. Flex Mobile
Introduction
 Extension du framework Flex pour le développement d’applications mobiles
o Présent depuis la version 4.5 du SDK Flex
o OS supportés : iOS, Android, BlackBerry
 Selon Adobe, plus de 50% du contenu Web sera accédé depuis un appareil
mobile d’ici 2 ans
 Au travers de Flex, Adobe cible le développement d’applications multimodales
pour les entreprises
o Travail collaboratif et mobilité
o Outils de développement avancés
o Intégration continue
Zenika © 2011 8

9. Flex Mobile
Objectifs
 Développer une application compatible avec la plupart des plateformes mobiles
existantes
o Evite de développer autant d’applications qu’il y a de plateformes cibles
o Bénéficier d’un rendu graphique identique
 Capitaliser sur l’expérience acquise lors des développements Flex Web
 Fournir des composants optimisés pour le mobile
o List, Button,TextArea,TextInput, ...
 Fournir des composants dédiés aux mobiles
o ViewNavigatorApplication, SlideViewTransition, MultiDPIBitmapSource, ...
Zenika © 2011 9

10. Flex Mobile
Tour de Flex
Zenika © 2011 10

11. Démonstration
Présentation
 Développement d'une application prototype utilisant la technologie Flex Mobile
o Périmètre fonctionnel : recherche et rédaction de mémos rédigés lors de
rencontres en clientèle
 Validation de la technologie Flex Mobile concernant la compatibilité de
l'application avec différents formats de tablette et de téléphone mobile
 Évaluation de la maturité de la technologie Flex Mobile
 Coût d'un développeur Flex à s'approprier le framework Flex Mobile
Zenika © 2011 11

12. Démonstration
Zenika © 2011 12

13. Flash Builder
Introduction (1/2)
 Développé par Adobe
 Basé sur des plugins Eclipse
 Fonctionnalités principales
o Auto complétion
o Refactoring
o Développement pour mobile
§ Emulateur
§ Déploiement sur le device branché en USB
o Debugger et profiler
 Version pour Windows et Mac
 Licence payante
 Alternative pour Linux : IntelliJ IDEA
Zenika © 2011 13

14. Flash Builder
Introduction (2/2)
Zenika © 2011 14

15. Flash Builder
OS supportés
 Depuis la version 4.5.1 : Burrito
o Google Android
o Apple iOS
o BlackBerryTablet OS
Zenika © 2011 15

16. Flash Builder
Différents types d'application
ViewNavigatorApplication TabbedViewNavigatorApplication
Zenika © 2011 16

17. Flash Builder
Support multi-résolutions
 Tous les appareils non pas la même densité
 Configuration du DPI
o Redimensionnement efficace des images vectorielles et du texte en
fonction de la résolution
 Utilisation de la classe MultiDPIBitmapSource pour insérer des images non
vectorisées
Zenika © 2011 17

18. Flash Builder
Designer
 Il est possible d'utiliser le mode designer
o Prise en charge des différents mobiles (résolutions)
o Design en mode portrait au paysage
o Editeur WYSIWIG
Zenika © 2011 18

19. Flash Builder
Déploiement Android (1/2)
Mode développement
1. Installer les drivers
2. Connecter l'appareil Android
via USB
3. Exécuter depuis Flash
Builder en spécifiant le
device branché
Zenika © 2011 19

20. Flash Builder
Déploiement Android (2/2)
Mode Release Build
1. Exporter l'application finale
2. Créer / obtenir un certificat
3. Signer l'application
Zenika © 2011 20

21. Flash Builder
Déploiement iOS (1/2)
 Même procédure pour le mode développement et le Release Build
 Deux fichiers sont nécessaires pour déployer sur iOS
o Génération d'un certificat iOS
§ DeveloperIdentity.p12
§ Obtenu, par conversion d’un certificat (.pem) avec OpenSSL en certificat
iOS Developer avec iOS Dev Center
o Utilisation d'un fichier de provision
§ *.mobileprovision
§ Contient les ID des devices iOS
§ Fourni par le iOS Dev Center
Zenika © 2011 21

22. Flash Builder
Déploiement iOS (2/2)
 Signer l’application avec le certificat iOS et le fichier de provision et
déploiement sur iTunes
Zenika © 2011 22

23. Flash Builder
Déploiement : comparatif
iOS Android
Développement - Certificat : Oui - Certificat : Non
- Durée : 10 secondes - Durée : 6 secondes
- Taille : 6 Mo - Taille : 2Mo
Release - Certificat : Oui - Certificat : Oui
- Durée : 10 min - Durée : 10 secondes
- Taille : 8 Mo - Taille : 1Mo
Zenika © 2011 23

24. Développement
SQLite
 Moteur de base de données fourni par le runtime AIR
 Permet aux applications de stocker des données localement
o Gestion du mode déconnecté
 Mise en œuvre
o Configuration du fichier dans lequel est persistée la base de données
§ Généralement dans l’espace de stockage propre à l’application
o Interrogation via des requêtes SQL
o Support des transactions
o Utilisation très proche du standard JDBC
Zenika © 2011 24

25. Développement
WebService
 Possibilité d’interroger des WebServices sans passer par un serveur
intermédiaire
 Utilisation des classes HttpService ou WebService
 Conversion native du résultat au format XML en structure objet
 Flash Builder propose un outil de génération de code d’appel au WebService à
partir du WSDL
o Génère les classes permettant d’appeler les méthodes du WebService
o Traitement du résultat asynchrone
Zenika © 2011 25

26. Développement
Configuration
 Un fichier XML de configuration est généré lors de la création d'un nouveau
projet Flex Mobile
 Permet de modifier la configuration du projet
o Nom et version de l’application
o Mode Full screen
o Icône application
o Etc.
 Permet également d'ajouter de la configuration pour un OS en particulier
o Ajouts de droit (internet, GPS, …)
o Configuration spécifique
Zenika © 2011 26

27. Flex Mobile
Etat des lieux (1/2)
 Développements familiers si connaissance de Flex
 Gestion spécifique de la navigation : empilement des vues
o Facile d’utilisation
o Mécanisme interne de transmission de données entre les vues
 Possibilité d’utiliser les bibliothèques Flex 4.5
o Attention : tous les composants graphiques Flex 4 ne sont pas optimisés
pour le mobile
 Gestion du mode offline inhérente au développement mobile
 Prise en main
o Prototypage et déploiement extrêmement rapide sur Android (exemple avec
le Nexus S)
o Simulateur de device très pratique
Zenika © 2011 27

28. Flex Mobile
Etat des lieux (2/2)
 Composants standards non optimisés pour Flex Mobile
o Form, Combobox, ...
o A ne pas utiliser pour ne pas dégrader les performances
o Composants très courants qui ne sont pas utilisables avec Flex Mobile
 Liste de composants supportés assez restreinte
o Framework en pleine évolution
 Bonne compatibilité entre les différents devices testés
 Performances générales en dessous de nos espérances
o Nécessité d’aborder la problématique d'optimisation durant les
développements
Zenika © 2011 28

29. Flex Mobile
Adaptabilité de l'interface
 Prévoir une interface adaptable aux différentes variétés d’écran
o Une interface pour tablette ne sera pas pensée de la même façon qu'une
interface pour smartphone
 Utilisation des pourcentages
o Pratique pour gérer toutes les résolutions
o Moins adaptée pour la précision
 Difficile de trouver un compromis entre relatif et absolu
 Tester l'UI sur tous les émulateurs et les devices est souvent fastidieux mais
indispensable !
Zenika © 2011 29

30. Bibliothèque
Eskimo
 Permet d’adapter les composants à la plateforme cible
 Fournit de nouveaux composants
Zenika © 2011 30

31. What’s Next ?
Intégrations natives
 Parseur JSON
 Native Text Input UI
o Personnalisation du clavier (email, number, …)
 Native Extensions
o Intégration de fonctionnalités natives du téléphone
o Ex : vibreur, lecteur de carte bleue, équipement médical, …
Zenika © 2011 31

32. What’s Next ?
Captive Runtime et sécurité
 Captive Runtime Support pour Android
o Même principe que pour le déploiement iOS
o Déploiement simplifié : AIR n’est plus un pré-requis
o Garantie sur la version AIR utilisée : tests simplifiés
 Encrypted Local Storage for Mobile
o Sécurisation des données utilisateur sur le mobile
 Et bien d’autres …
Zenika © 2011 32

33. What’s Next ?
Flex 4.6 (1/2)
 Ajout de nouveaux composants mobiles optimisés
o Meilleures performances : 50 % de gain annoncé
o Meilleure compatibilité avec les dernières plateformes Android et iOS
 Flash Builder 4.6
o Intégration des extensions natives
o Captive Runtime
 Pre-release program
Zenika © 2011 33

34. What’s Next ?
Flex 4.6 (2/2)
Zenika © 2011 34

35. Flex et HTML 5
 Adobe investit à la fois sur les technologies Flex et HTML 5
 Flex Mobile au travers du runtime AIR et du framework Flex
 Sortie prévue tous les 3 mois d’une nouvelle version de AIR
 Synchronisation des nouvelles versions de Flex avec AIR (pas
nécessairement avec la même fréquence)
 HTML 5 au travers d’outils de génération de contenu
 Produit Adobe Edge
Zenika © 2011 35

36. Ressources
 Présentation de Michaël Chaize à la What’s Next 2011
http://www.whatsnextparis.com/agenda.html
 Flex
http://flex.org/
 Tour de Flex
http://www.adobe.com/devnet/flex/tourdeflex.html
 Tour de Mobile Flex (application Android)
http://flex.org/tour-de-mobile-flex/
Zenika © 2011 36

37. Zenika © 2011 37