1. Accélérez et optimisez vos
développements d'applications
mobiles
WsN Replay
Lyon - Jeudi 10 novembre 2011
François Fornaciari - francois.fornaciari@zenika.com
Billy Thach – billy.thach@zenika.com
Zenika © 2011 1

2. 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 2

3. 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 3

4. Adobe Flex
Composants
Zenika © 2011 4

5. 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 5

6. 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 6

7. 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 7

8. 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 8

9. Flex Mobile
Tour de Flex
Zenika © 2011 9

10. 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 10

11. Démonstration
Zenika © 2011 11

12. 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 12

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

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

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

16. 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 16

17. 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 17

18. 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 18

19. 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 19

20. 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 20

21. 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 21

22. 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 : 5 min - Durée : 10 secondes
- Taille :10 Mo - Taille : 1Mo
Zenika © 2011 22

23. 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 23

24. Développement
WebService
 Possibilité d’interroger des WebServices sans passer par un
serveur intermédiaire
o Utilisation des classes HttpService ou WebService
o 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 24

25. 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 25

26. 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 26

27. 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 27

28. 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 28

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

30. 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 30

31. 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 31

32. 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 32

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

34. 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
o Sortie prévue tous les 3 mois d’une nouvelle version
de AIR
o Synchronisation des nouvelles versions de Flex avec
AIR (pas nécessairement avec la même fréquence)
o Nouveau compilateur nommé « Falcon »
 HTML 5 au travers d’outils de génération de contenu
o Produit Adobe Edge
Zenika © 2011 34

35. 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 35

36. Zenika © 2011 36