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