Accélérez et optimisez vos                développements dapplications                           mobiles                  ...
What’s Next 2011  Présentation Flex Mobile    Retour et décryptage de la présentation de Michaël Chaize         Enjeux d...
Adobe Flex  Introduction    Objectifs des applications RIA     o Améliorer l’expérience utilisateur     o Proposer du con...
Adobe Flex  ComposantsZenika © 2011   4
Adobe Flex  MXML vs ActionScript   MXML    o Syntaxe déclarative de création d’interface                <s:Application xm...
Adobe Flex  Intégration serveur    Communication via des WebServices     o JAX-WS ou JAX-RS     o Parseur XML natif    I...
Flex Mobile  Introduction    Extension du framework Flex pour le développement     d’applications mobiles     o Présent d...
Flex Mobile  Objectifs    Développer une application compatible avec la plupart des     plateformes mobiles existantes   ...
Flex Mobile  Tour de FlexZenika © 2011    9
Démonstration  Présentation    Développement dune application prototype utilisant la     technologie Flex Mobile     o Pé...
DémonstrationZenika © 2011     11
Flash Builder  Introduction (1/2)    Développé par Adobe    Basé sur des plugins Eclipse    Fonctionnalités principales...
Flash Builder  Introduction (2/2)Zenika © 2011          13
Flash Builder  OS supportés    Depuis la version 4.5.1 : Burrito     o Google Android     o Apple iOS     o BlackBerryTab...
Flash Builder  Différents types dapplication ViewNavigatorApplication    TabbedViewNavigatorApplicationZenika © 2011      ...
Flash Builder  Support multi-résolutions    Tous les appareils non pas la même densité    Configuration du DPI     o Red...
Flash Builder  Designer    Il est possible dutiliser le mode designer     o Prise en charge des différents mobiles (résol...
Flash Builder  Déploiement Android (1/2) Mode développement  1. Installer les drivers  2. Connecter lappareil     Android ...
Flash Builder  Déploiement Android (2/2) Mode Release Build  1. Exporter lapplication     finale  2. Créer / obtenir un   ...
Flash Builder  Déploiement iOS (1/2)    Même procédure pour le mode développement et le     Release Build    Deux fichie...
Flash Builder  Déploiement iOS (2/2)   Signer l’application avec le certificat iOS et le fichier de    provision et déplo...
Flash Builder  Déploiement : comparatif                                    iOS                 Android          Développem...
Développement  SQLite    Moteur de base de données fourni par le runtime AIR    Permet aux applications de stocker des d...
Développement  WebService    Possibilité d’interroger des WebServices sans passer par un     serveur intermédiaire     o ...
Développement  Configuration    Un fichier XML de configuration est généré lors de la     création dun nouveau projet Fle...
Flex Mobile  Etat des lieux (1/2)    Développements familiers si connaissance de Flex    Gestion spécifique de la naviga...
Flex Mobile  Etat des lieux (2/2)    Composants standards non optimisés pour Flex Mobile     o Form, Combobox, ...     o ...
Flex Mobile  Adaptabilité de linterface    Prévoir une interface adaptable aux différentes variétés     d’écran     o Une...
Bibliothèque  Eskimo   Permet d’adapter les composants à la plateforme cible   Fournit de nouveaux composantsZenika © 20...
What’s Next ?  Intégrations natives    Parseur JSON    Native Text Input UI     o Personnalisation du clavier (email, nu...
What’s Next ?  Captive Runtime et sécurité    Captive Runtime Support pour Android     o Même principe que pour le déploi...
What’s Next ?  Flex 4.6 (1/2)    Ajout de nouveaux composants mobiles optimisés     o Meilleures performances : 50 % de g...
What’s Next ?  Flex 4.6 (2/2)Zenika © 2011      33
Flex et HTML 5    Adobe investit à la fois sur les technologies Flex et     HTML 5    Flex Mobile au travers du runtime ...
Ressources    Présentation de Michaël Chaize à la What’s Next 2011     http://www.whatsnextparis.com/agenda.html    Flex...
Zenika © 2011   36
Prochain SlideShare
Chargement dans…5
×

Présentation Flex Mobile

861 vues

Publié le

Présentation de Flex Mobile durant la sessions What's Next Replay à Lyon le11 novembre 2011.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
861
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8
Actions
Partages
0
Téléchargements
30
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Présentation Flex Mobile

  1. 1. Accélérez et optimisez vos développements dapplications mobiles WsN Replay Lyon - Jeudi 10 novembre 2011 François Fornaciari - francois.fornaciari@zenika.com Billy Thach – billy.thach@zenika.comZenika © 2011 1
  2. 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. 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 AIRZenika © 2011 3
  4. 4. Adobe Flex ComposantsZenika © 2011 4
  5. 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. 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 notificationsZenika © 2011 6
  7. 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 continueZenika © 2011 7
  8. 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. 9. Flex Mobile Tour de FlexZenika © 2011 9
  10. 10. Démonstration Présentation  Développement dune 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 lapplication avec différents formats de tablette et de téléphone mobile  Évaluation de la maturité de la technologie Flex Mobile  Coût dun développeur Flex à sapproprier le framework Flex MobileZenika © 2011 10
  11. 11. DémonstrationZenika © 2011 11
  12. 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 IDEAZenika © 2011 12
  13. 13. Flash Builder Introduction (2/2)Zenika © 2011 13
  14. 14. Flash Builder OS supportés  Depuis la version 4.5.1 : Burrito o Google Android o Apple iOS o BlackBerryTablet OSZenika © 2011 14
  15. 15. Flash Builder Différents types dapplication ViewNavigatorApplication TabbedViewNavigatorApplicationZenika © 2011 15
  16. 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éesZenika © 2011 16
  17. 17. Flash Builder Designer  Il est possible dutiliser le mode designer o Prise en charge des différents mobiles (résolutions) o Design en mode portrait au paysage o Editeur WYSIWIGZenika © 2011 17
  18. 18. Flash Builder Déploiement Android (1/2) Mode développement 1. Installer les drivers 2. Connecter lappareil Android via USB 3. Exécuter depuis Flash Builder en spécifiant le device branchéZenika © 2011 18
  19. 19. Flash Builder Déploiement Android (2/2) Mode Release Build 1. Exporter lapplication finale 2. Créer / obtenir un certificat 3. Signer lapplicationZenika © 2011 19
  20. 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 dun certificat iOS  DeveloperIdentity.p12  Obtenu, par conversion d’un certificat (.pem) avec OpenSSL en certificat iOS Developer avec iOS Dev Center o Utilisation dun fichier de provision  *.mobileprovision  Contient les ID des devices iOS  Fourni par le iOS Dev CenterZenika © 2011 20
  21. 21. Flash Builder Déploiement iOS (2/2)  Signer l’application avec le certificat iOS et le fichier de provision et déploiement sur iTunesZenika © 2011 21
  22. 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 : 1MoZenika © 2011 22
  23. 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 JDBCZenika © 2011 23
  24. 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 asynchroneZenika © 2011 24
  25. 25. Développement Configuration  Un fichier XML de configuration est généré lors de la création dun 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 dajouter de la configuration pour un OS en particulier o Ajouts de droit (internet, GPS, …) o Configuration spécifiqueZenika © 2011 25
  26. 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 pratiqueZenika © 2011 26
  27. 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 doptimisation durant les développementsZenika © 2011 27
  28. 28. Flex Mobile Adaptabilité de linterface  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 quune 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 lUI sur tous les émulateurs et les devices est souvent fastidieux mais indispensable !Zenika © 2011 28
  29. 29. Bibliothèque Eskimo  Permet d’adapter les composants à la plateforme cible  Fournit de nouveaux composantsZenika © 2011 29
  30. 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. 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. 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 programZenika © 2011 32
  33. 33. What’s Next ? Flex 4.6 (2/2)Zenika © 2011 33
  34. 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 EdgeZenika © 2011 34
  35. 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. 36. Zenika © 2011 36

×