AIR Mobile – Changer de skin pour ne pas utiliser StageText pour Android (Flex 4.6)
Le comportement des champs texte (TextArea / TextInput) dans une application AIR a toujours été un point difficile. Avant Flex 4.6, le champ texte sous iOS utilisait un composant nommé StageText qui est en fait un composant texte natif iOS, plaqué par dessus la Display List traditionnelle de votre application. Grâce à une skin spéciale, cette feinte ne se voit pas dans votre code, vous allez toujours instancier un composant TextInput.
L'utilisation de champs de texte natifs apportent de nombreux avantages. Tout d'abord, on profite des interactions natives de la plateforme. Sous iOS par exemple, vous aurez les boutons permettant de copier / coller ou de sélectionner facilement du texte. Un comportement qui est naturel pour l'utilisateur et qu'il convient de garder.
Sur Android par contre, on avait toujours des champs texte non-natifs, de simples champs texte donc. Vous n'aviez pas la possibilité de copier / coller un texte par un appui long par exemple. Cela pouvait parfois être très gênant, surtout sur tablette quand on a besoin de sélectionner une partie du texte. Les "poignées" de sélection n'apparaissent pas et l'utilisateur ne pouvait donc rien faire.
Ce manque a été comblé avec la sortie de Flex 4.6 qui propose une skin StageText pour Android. Cette skin sera utilisée par défaut si vous compilez avec Flex 4.6. Vous pouvez retrouver ce paramétrage dans les sources du framework, dans le dossier:
C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.6\sdks\4.6.0\frameworks\projects\mobiletheme
Vous trouverez un fichier nommé defaults.css qui contient:
TextArea{
paddingBottom: 9;
paddingLeft: 9;
paddingRight: 9;
paddingTop: 9;
showPromptWhenFocused: true;
skinClass: ClassReference("spark.skins.mobile.StageTextAreaSkin");
}
TextInput{
paddingBottom: 9;
paddingLeft: 9;
paddingRight: 9;
paddingTop: 9;
showPromptWhenFocused: true;
skinClass: ClassReference("spark.skins.mobile.StageTextInputSkin");
}
On référence bien les skins de type StageText.
Comment ne pas utiliser StageText
Cette skin est donc très bonne mais le problème est que son comportement est assez tiré par les cheveux. On peut donc parfois constater certains bug d'affichage. C'est ce qui est arrivé à peu près 4h après la sortie de Flex 4.6 à un lecteur de flex-tutorial 
. Lors d'une transition, le champ texte (fond) de déplace bien mais le texte (glyphes) restent à la même place jusqu'à la destruction de la vue et donc du composant.
C'est un bug qui devrait être corrigé mais entre temps, il vous reste une porte de sortie. Vous pouvez en effet, indiquer dans votre code que vous souhaitez utiliser la skin "classique" qui était utilisée en Flex 4.5. Pour cela, dans votre application principale, ajouter les sélecteurs de style CSS suivants:
s|TextInput{
skinClass: ClassReference("spark.skins.mobile.TextInputSkin");
}
s|TextArea{
skinClass: ClassReference("spark.skins.mobile.TextAreaSkin");
}
Vous allez ainsi utiliser l'ancienne skin sous Android. Cela peut vous permettre de fonctionner en attendant que les bugs présents dans votre application soient corrigés.
Ces bugs devraient être rares, de nombreux bugs ont déjà été rentrés pendant la prerelease sur ces problématiques. Pour vous donner une idée, lorsque vous ouvrez un composant Callout (pop-up non modale) qui passe par dessus un composant texte, pour ne pas avoir de bug graphique, Flex prend automatiquement un "screenshot" du champ texte et remplace le champ texte par cette représentation dans la display list pour qu'elle puisse passer dessous (idem pour StageWebView).
Allez voir dans le code source si vous ne me croyez pas .
Adobe Creative Cloud dévoilé à Adobe MAX 2011 (résumé 1er jour)
La conférence Adobe MAX 2011 vient de démarrer avec pour la 1ère keynote, l'annonce du "Adobe Creative Cloud". Un keynote *très* riche en nouveautés que je vais essayer de résumer dans cet article. Je ne suis pas à Los Angeles cette année pour suivre la conférence, vous aurez donc un résumé de ce que j'ai vu pendant la retransmission de la keynote et sur les annonces officielles.
Pour rappel, je ne travaille pas pour Adobe, je n'ai donc aucune information en exclusivité, pas besoin de demander ^^.
Une introduction chorégraphiée qui annonce la couleur
Il y a tellement d'annonces à faire que cette année, les keynotes de MAX sont sur 2 jours. Le premier est consacré aux "créatifs" (plutôt aux utilisateurs de PS, Illustrator ou InDesign) et celle de mardi sera consacrée aux devs. N'y voyez pas un début de troll "les devs ne sont pas des créatifs".
Après une vingtaine de minutes d'attente en compagnie de "DJ Scientific" (http://www.elanvytal.com/) de piètre qualité (en tout cas, ce qu'on entendait par le streaming), cette keynote commence donc avec quelques minutes de spectacle musique + danse + projection vidéo. Une prestation exceptionnelle, je vous laisse apprécier les images en vidéo:
Et cela ne fait que commencer. Kevin Lynch, le CTO d'Adobe rentre en scène pour présenter toutes les nouveautés
Adobe Creative Cloud
La grosse annonce de cette keynote, c'est le Creative Cloud, qui arrive avec 3 grands points:
- Des services
- Un aspect communautaire
- Des applications
Le tout sera disponible en Novembre 2011 a un prix qualifié d'attractif. Le tout se fera par un abonnement mensuel, un peu comme ce qu'Adobe avec proposé l'an dernier, permettant de se procurer des logiciels comme Photoshop au mois à un prix mensuel plus abordable.
Il est à noter que l'abonnement vous permettra de vous procurer les logiciels de la Creative Suite (Photoshop, Illustrator, …) et leurs mises à jour. Cela pourrait permettre de resserrer l'écart improbable entre les prix US et FR à l'achat, enfin je l'espère. Plus d'informations en Novembre!
En plus de cela, Adobe va proposer un système de synchronisation complet pour que avoir les mêmes fichiers sur votre (vos) disques dur que sur le cloud (dans les 2 sens). La promesse est de pouvoir travailler depuis n'importe où, depuis n'importe quelle machine avec sa "bibliothèque personnelle" toujours à disposition.
Vous pouvez être notifié de la sortie du Adobe Creative Cloud sur le site officiel :
http://www.adobe.com/products/creativecloud.html
Les services du Creative Cloud
Tout d'abord, le Creative Cloud vous permet de bénéficier d'un quota d'espace disque dans le cloud. 20Go sont offerts de base avec bien sûr, la possibilité d'étendre ce quota si vous le souhaitez. Sur cet espace, vous pourrez stocker ce que vous souhaitez, des photos, des vidéos, mais aussi stocker des fichiers produits avec les applications Adobe (.PSD, .AI, …). On verra l'intérêt de cela dans la suite de cet article.
Business Catalyst
On retrouvera dans ces services, une partie de Business Catalyst, notamment pour la création et la gestion de site web dans le cloud (produit Adobe déjà existant):
TypeKit
Vient s'ajouter à cela un service qui concerne la typographie. Adobe a en effet profité de l'occasion pour annoncer l'acquisition de Typekit (http://typekit.com/).
Typekit offre un service d'hébergement de police d'écriture. Les polices proposées sur Typekit sont toutes sous des licences qui vous permettent de l'utiliser sur vos sites web/documents dans problème. Moins de problèmes de copyrights, donc. Typekit vous permet d'intégrer des polices sur vos pages web grâce aux nouvelles fonctionnalités CSS3.
Adobe Digital Publishing Suite
La Digital Publishing Suite permet à des éditeurs (Vanity Fair était invité à Adobe MAX par exemple) de produire des magazines aussi bien sur un format "classique" (papier) que sur des formats numériques (iPad, etc…), tout en permettant une intégration avec le système (lecture de vidéo, gestures, …).
Grâce aux nouveautés présentes dans inDesign CS 5.5 et notamment le Folio Builder, vous pouvez composer des magazines prêts pour une publication numérique que vous pouvez partager directement avec votre équipe, le tout en passant par le Creative Cloud. Avant publication sur un Store, vous pouvez même tester vos ".folio" dans une application réalisée par Adobe sur votre iDevice par exemple pour vous rendre compte du résultat final. Le tout se fait à la volée, vous avez donc une grande réactivité.
Personnellement, je n'ai même jamais touché InDesign mais j'ai trouvé la solution convaincante. En particulier le fait que le travail d’interaction / design est laissé aux personnes pour qui c'est le métier. Pouvoir publier un magazine interactif sans passer par l'étape développer/code est une proposition unique en son genre, je pense.
La communauté du Creative Cloud
Les logiciels de la suite Adobe peuvent être utilisés de manière individuelle mais ils concernent souvent des métiers intimement liés. Une illustration réalisée dans Photoshop ou Illustrator peut-être intégrée dans un site réalisé avec Dreamweaver ou un publication InDesign. Même si les logiciels se "parlent", il n'y a pas de communauté en tant que telle. Pour partager leur création, les solutions ne manquent pas, un site comme deviantART (http://www.deviantart.com/) permet par exemple de partager ses créations, avoir des commentaires, etc.
Ce que propose Adobe avec le Creative Cloud, c'est une intégration directe dans les logiciels de la Creative Suite. Vous pouvez à n'importe quel moment envoyer le fichier sur lequel vous travaillez dans le cloud.
Aspect intéressant, vous pouvez non seulement envoyer des fichiers "à plat" comme des JPG / PNG ou vous pouvez envoyer directement un fichier .PSD ou .AI par exemple.
Ces fichiers ne sont pas affichables directement dans une page web mais grâce au Creative Cloud, vous pouvez avoir un aperçu direct de votre fichier. Vous pouvez même directement afficher/masquer des calques depuis l'interface web et avoir un aperçu en temps réel!
Une pirouette technique qui va se révéler très pratique pour fouiner dans votre portfolio sans ouvrir aucun logiciel. Creative Cloud s'occupe de la génération des vignettes pour vous aider. Bien sûr, vous pourrez piocher directement dans votre espace Creative Cloud comme lorsque vous allez chercher des éléments sur votre disque.
La démonstration était impressionnante (en tout cas, elle m'a impressionné). Le système de synchronisation automatique vous permet de travailler sans vous préoccuper de la sauvegarde ou de l'upload, à la manière de Dropbox. Le site du Creative Cloud en lui-même est excellent, et permet d'extraire les informations importantes de votre document, sans même l'ouvrir dans un logiciel comme l'aperçu, la palette de couleurs utilisées ou les polices utilisées dans le document (avec liaison direct avec Typekit).
Cet espace peut devenir un espace de partage et d'inspiration très intéressant pour la communauté.
Les applications du Creative Cloud
Maintenant que vous avez un espace de stockage, il ne manque plus que les outils pour manipuler le contenu de votre cloud. L'approche d'Adobe est de proposer les logiciels phare de sa Creative Suite sur un maximum de machines. La CS est déjà présente sur PC/Mac et elle s'invite maintenant sur les tablettes, notamment iOS et Android. 6 applications ont été montrées pendant la keynote, petit tour d'horizon.
Petite vidéo pour vous donner une idée:
How will you create with Adobe Touch Apps
Adobe Ideas
Ideas est une application déjà disponible sur iOS, comptant plus de 2.5 millions de téléchargements. Pour résumer, c'est une sorte de Photoshop+Illustrator (certains diraient Fireworks) fait pour rester simple et accessible. On peut ainsi de manière simple, dessiner ce que l'on souhaite au doigt ou au stylet.
On découvre là, le potentiel effectif de ce Creative Cloud. Pendant la démonstration, on voit un dessin fait au doigt (détourage) sur un iPad, sauvé sur le Creative Cloud. Celui-ci est automatiquement sauvegardé et synchronisé sur une autre machine (Mac), à partir de laquelle on peut continuer l'édition directement depuis Illustrator par exemple. Le Cloud dans toute sa splendeur.
Adobe Kuler
Kuler est un outil qui existe déjà lui aussi, mais en "web" (http://kuler.adobe.com/). Cette application permet de créer une palette de couleurs et de la partager
Perso, l'intérêt me dépasse un peu mais cela semble très important dans le milieu de la création numérique.
Adobe Collage
Collage est une application qui vous donne accès à une sorte de "tableau blanc". Sur ce whiteboard, vous pouvez ajouter de manière rapide, des éléments de votre Creative Cloud, les mettre en forme et ajouter des annotations.
Cette application peut permettre de mettre en forme un brainstorming artistique rapidement. La possibilité d'aller chercher rapidement des éléments stockés sur votre cloud en fait une application productive.
Adobe Debut
Au début, je pensais que "Debut" était un clone de PowerPoint mais le but n'est pas vraiment le même. L'objectif de début est de pouvoir réaliser une présentation de vos concepts à des clients, directement depuis une tablette. Les commentaires que pourront vous faire le client peuvent être directement annotés sur la présentation.
L'application vient bien compléter la "suite" des touch Apps, vous permettant un rendu interactif des créations.
Adobe Photoshop Touch
Le produit phare d'Adobe est sans conteste Photoshop, l'outil de retouche d'image par excellence. Seulement celui-ci était seulement disponible sur Desktop mais pas sur tablette. Adobe Ideas remplissait quelques une des fonctionnalités de PS mais les outils de sélection, le système de calques ou les filtres par exemple avaient été simplifiée et ne représentaient pas un équivalent de la version desktop.
On a ici une application entièrement prévue pour être utilisée au doigt ou au stylet. L'outil de sélection au doigt (le scribble tool) est par exemple adaptée au tactile et permet d'extraire une zone de l'image avec une bonne précision (ce qui est intéressant quand on connait la précision de notre doigt par rapport à une souris). On retrouve le système de gestion de calque, ainsi que les filtres et les outils qui ont fait le succès de Photoshop.
Le tout couplé au Creative Cloud vous permet d'éditer vos PSD de n'importe quelle machine.
Adobe Proto
Proto est une application qui sert à créer des prototypes / maquettes / mock-up interactifs, pour des sites web par exemple. Je suis personnellement fan de l'outil Balsamiq (http://balsamiq.com/) et j'ai été agréablement surpris par Proto.
L'interface est prévue pour être utilisée avec la main. Ainsi, pour ajouter un élément dans le prototype, il suffit de dessiner un symbole ou de réaliser une gesture. Par exemple, pour ajouter un emplacement pour un image, il suffit de faire une croix. Proto va ajouter à la place de votre croix, un emplacement réservé à une image. Pour un texte, il suffit de gribouiller un zig-zag et un texte générique va apparaître. Pour faire un conteneur (div), il suffit de tracer un rectangle à main levée, etc.
La rapidité d'exécution est tout simplement impressionnante ! Pendant la démonstration, on a aussi vu comment on pouvait ajouter de l'interactivité et créant des liens entre les maquettes. Simple et efficace (et payant sous Balsamiq).
Le clou du spectacle, l'envoi du Proto sur le Creative Cloud et la preview dans un navigateur internet du prototype (avec un peu de jQuery pour l'interactivité)! Juste génial et productif.
Allez, pour vous donner du rêve, voilà la vidéo de présentation:
Autres annonces, en vrac
- Adobe a acheté "Nitobi Software", les créateurs de PhoneGap (projet bientôt sous licence Apache). Plus de détail dans la 2eme keynote
- LG et TiVo ont rejoint la liste des partenaires Adobe pour permettre le déploiement d'applications Adobe AIR sur les futures tv connectées
- Flash Player 11 et AIR 3 sont disponibles ce soir en version release. L'équipe de Google Chrome a déjà annoncé que Flash Player 11 serait intégré automatiquement avec les futures versions de Chrome (>15)
Conclusion
Cette première keynote a été riche en annonces, avec notamment ce Creative Cloud que je trouve très prometteur. Certaines annonces comme la sortie de Flash Player 11 et AIR 3 étaient déjà prévues mais je pense que l'on aura de très bonne surprises lors de la seconde keynote.
Ne la ratez pas, demain à 19h (heure française) à l'adresse http://max.adobe.com/online/. Petit "tip" si vous regardez le streaming depuis la France, choisissez "P2P" et pas le flux américain, ce sera bien plus fluide.
La keynote de demain concerne directement les développeurs, attendez-vous donc à voir des démonstrations impressionnantes!
AIR Mobile – Lancer une application native depuis une page web avec une Custom URI
Ce billet va parler des Custom URI. Sous ce nom se cache une fonctionnalité qui va vous permettre d'ouvrir une application native directement depuis un lien URL. Ce lien URL peut être présent dans une page web ou un email par exemple.
Un exemple dans la vraie vie : Doodle
Doodle est un service vous permettant de voir les disponibilités de vos amis pour décider d'une date. Service très intéressant qui dispose aussi d'une application mobile.
Quand vous accéder à Doodle.com > Exemple depuis votre mobile, vous arriverez sur une page comme celle-ci:
On vous propose d'ouvrir ce Doodle directement dans l'application native, et pas sur le site HTML classique. Cela se fait grâce au mécanisme de Custom URI.
Custom URI? Ça me dit quelque chose …
Ce mécanisme n'est pas nouveau. En fait, si vous suivez flex-tutorial, vous vous souvenez peut-être de ces billets au moment où AIR pour Android était encore en beta:
AIR pour Android – Ouvrir une application depuis une URI avec arguments
Voilà, depuis cette version beta, les fichiers descripteur (*-app.xml) n'ont plus la même structure et à l'époque, AIR pour iOS n'existait pas. Il est donc temps de faire un petit récapitulatif.
Custom URI = URI avec votre pseudo-protocole à vous
Une Custom URI, ce n'est rien d'autre qu'une URL qui utilise autre chose que "http" à la place du protocole. Vous allez en fait utiliser un préfixe à vous. Lorsque le système ne va pas reconnaître ce protocole, il va aller chercher dans la liste de ses applications, pour voir si l'une d'entres déclare que ce protocole est le sien. Si oui, il va lancer l'application en question en lui passant les éventuels paramètres que vous avez passé à votre URL (voir le tutorial sur URI avec arguments)
AIR Mobile – Application Pokémon (18) – Tester l'application sur Android
On a à présent une bonne version de notre application Pokémon, avec une vue liste, une vue de détail et la possibilité de naviguer entre les évolutions d'un certain Pokémon.
Il est venu le temps de tester notre application sur un vrai smartphone/tablette. En effet, cela peut nous permettre de détecter des erreurs dues à la taille de l'écran, à la résolution, au changement d'orientation, …
Pour commencer, on va tester sur un portable Android. Tout d'abord parce que c'est de loin le plus simple et parce que j'ai un Galaxy S sous la main .
Création d'un certificat .p12 pour Android
La principale raison pour laquelle la publication Android est simple, c'est que vous n'avez pas à créer N certificats en 48 étapes pour 8 types de développement. Vous créez un certificat vous-même au format .p12, directement dans Flash Builder et vous pouvez l'utiliser aussi bien pour le développement que pour la production. Vous verrez que c'est le jour et la nuit par rapport à d'autres plate-forme, notamment iOS qui est bien plus complexe à mettre en oeuvre.
Rendez-vous dans les propriétés du projet (clic droit > Properties) puis dans Flex Build Packaging > Google Android:
Cliquez sur Create… puis entrez un publisher name et un password. Choisissez ensuite où sauvegarder ce fichier. Je vous conseille de le mettre dans votre application, dans un dossier "cert" par exemple et de ne pas le perdre.
C'est tout ce qu'il vous faudra comme certificat pour Android
Connexion d'un device Android par USB
Pour pouvoir effectuer le déploiement directement sur un mobile Android, il faut que celui-ci soit reconnu. Et pour qu'il soit reconnu, la plupart du temps il vous faudra installer les drivers "ADB interface". Testez quand même la ligne de commande d'après pour voir s'il y a besoin des drivers ou pas.
Ceux-ci peuvent être trouvés assez facilement sur le net, souvent sur le site du constructeur. Par exemple, pour un HTC Desire, les drivers sont là:
http://www.flex-tutorial.fr/2010/08/04/air-android-drivers-usb-pour-htc-desire-adb-interface/
Sinon, Flash Builder intègre certains des drivers dans :
C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.5\utilities\drivers\android
Donnez ce chemin quand Windows vous demande où sont vos drivers, cela peut fonctionner!
Pour tester si votre appareil est bien reconnu, ouvrez un invite de commande et naviguez vers:
C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.5\sdks\4.5.1\lib\android\bin
Puis tapez "adb devices". Si vous avez réussi votre coup, vous aurez un numéro de série qui va s'afficher:
Lancement depuis Flash Builder
Une fois que votre device est bien détecté, rendez-vous dans Flash Builder. Sélectionnez votre projet puis Run > Run Configurations… Sélectionnez "Google Android" comme "Target Platform" puis "On Device":
Cliquez ensuite sur Run pour lancer l'application sur votre appareil Android. Idem pour Debug, rendez-vous dans Debug > Debug Configuration et suivez le même cheminement.
Si votre Debug n'arrive jamais à se connecter, pensez à ajouter Flash Builder aux exceptions de votre pare-feu.
Mes projets (Open Source)
Autres
