• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
What's Next Replay - Flex Mobile
 

What's Next Replay - Flex Mobile

on

  • 567 views

 

Statistics

Views

Total Views
567
Views on SlideShare
567
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    What's Next Replay - Flex Mobile What's Next Replay - Flex Mobile Presentation Transcript

    • Accélérez et optimisez vos développements dapplications mobiles WsN Replay Rennes - Jeudi 24 novembre 2011 Billy ThachZenika © 2011 1
    • Zenika Rennes & Nantes Nous suivre sur Twitter : @ZenikaOuestZenika © 2011 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 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 4
    • Adobe Flex ComposantsZenika © 2011 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 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 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 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 9
    • Flex Mobile Tour de FlexZenika © 2011 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 11
    • DémonstrationZenika © 2011 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 13
    • Flash Builder Introduction (2/2)Zenika © 2011 14
    • Flash Builder OS supportés  Depuis la version 4.5.1 : Burrito o Google Android o Apple iOS o BlackBerryTablet OSZenika © 2011 15
    • Flash Builder Différents types dapplication ViewNavigatorApplication TabbedViewNavigatorApplicationZenika © 2011 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 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 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 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 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 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 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 : 10 min - Durée : 10 secondes - Taille : 8 Mo - Taille : 1MoZenika © 2011 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 24
    • 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 asynchroneZenika © 2011 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 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 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 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 29
    • Bibliothèque Eskimo  Permet d’adapter les composants à la plateforme cible  Fournit de nouveaux composantsZenika © 2011 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 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 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 33
    • What’s Next ? Flex 4.6 (2/2)Zenika © 2011 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  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 EdgeZenika © 2011 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 36
    • Zenika © 2011 37