Flash Builder 4 Débutant ? Découvrez Flex 4 et Adobe® Flash® Builder™ 4

Archive de janvier, 2010

28
jan

Pas (encore?) de Flash Player sur l'iPad, o rly?

Par fnicollet 4 Commentaires
Categories: Flash Player Tags: , , .

Cet article a été écrit en Janvier 2010, l'iPad est maintenant disponible en France. Comme l'a expliqué Steve Jobs dans sa lettre ouverte Thoughts on Flash, Flash Player ne sera pas supporté par les machines tournant sur l'iOS (iPhone, iPad and iPod Touch) et ne le sera sûrement jamais pour d'évidentes raisons économiques et non techniques. Pour avoir Flash Player sur iPhone, il vous faudra faire un jailbreak de votre téléphone, il n'est pas possible de l'avoir de base.

Flash Player 10.1 est cependant supporté sur Android 2.2 (Google Nexus One, HTC Desire, HTC Incredible…) et Blackberry d'ici la fin de l'année.

Vous êtes sûrement un g33k, vous avez entendu parler du petit dernier de chez Apple, dévoilé aujourd'hui au grand jour, le iPad.

Si vous n'avez pas suivi l'histoire, voici le site officiel:

Site officiel Apple iPad

iPadHandHeld

Pour résumer, une machine à mi-chemin entre le téléphone portable (iPhone) et un notebook classique, tout cela sous la forme d'une tablette. Je ne vais pas faire une review, d'autres sites l'ont déjà fait de très belle manière.

On nous dit donc dans le promo que l'iPad est "The best way to experience the web" un peu comme dans les pubs pour l'iPhone. Seulement, voici ce que l'on a pu voir pendant la démo de Steve Jobs:

noFlashOnIPadorly

Ce petit symbole (The Blue Lego Cube of Disappointment) qui va rappeler des souvenirs aux possesseurs d'iPod et d'iPhone, celui qui indique qu'il manque un plugin. En l'occurence, le plug-in est Flash Player. Alors rebelotte, comme pour son iPhone, l'iPad ne permettra pas d'accéder à "tout le web".

Ce qui est encourageant, c'est que c'est un Safari qui tourne mais dépourvu de Flash Player. Espérons donc que Apple corrigera le tir avant la sortie (Mars/Avril) de son iPad. Si vous voulez exprimer votre mécontentement de manière sociale, un twitter y est consacré: #FuckTheIpad.

25
jan

ToasterLib – Affichez des notifications dans vos applications Flex

Par fnicollet 16 Commentaires
Categories: ToasterLib Tags: .

Cela fait un moment que j'en parle sur flex-tutorial à gauche à droite mais la voilà, ma dernière création, la ToasterLib. Comme indiqué dans le titre, la ToasterLib est une librairie Flex permettant d'afficher des notifications dans une appli Adobe Flex. Par notification, j'entends les notifications qui apparaissent quand quelqu'un se connecte sur GTalk ou que l'on essaie de vous envoyer un message sur MSN ou quand avast! met à jour sa base de données (vous pouvez aussi rajouter la petite voix ennuyeuse). Le mouvement ascendant / pop-up faisant penser à un toast qui sort du toaster, on appelle ces petites fenêtres, des "Toast-window".

C'est pas tout neuf

Un bon tutorial Adobe existe déjà pour ajouter ces notifications dans des applications Adobe Air, dans une NativeWindow à part. Vous pouvez le consulter ici:

Creating toast-style windows

Mais ici, on s'appuie sur NativeWindow, impossible de faire cela donc en dehors du contexte bureautique. Mon composant, lui, ne fonctionne qu'à l'intérieur d'une application Flex.

Pourquoi des toasts ?

Vous utilisez sûrement dans vos applications pro, des messages de type "Alert" qui ouvrent une pop-up pour signaler quelque chose à votre utilisateur (modification effectuée, mauvais password, …). Ces composants sont assez intrusifs puisqu'ils ouvrent une pop-up que l'utilisateur doit obligatoirement fermer s'il veut continuer à utiliser l'application (pop-up modale). On peut bien sûr créer des Alert qui se ferment tout seul mais on garde l'esprit de la grosse pop-up qui tâche.

La notification, elle, peut être affichée sans troubler le travail de l'utilisateur. Dans la plupart des cas, vous voudrez même que cette notification disparaisse toute seule au bout d'un certain temps.

ToasterLib? Ca sert à quoi ?

La ToasterLib sert justement à vous aider à envoyer ces notifications utilisateurs. En effet, il y a de nombreux paramètres à prendre en compte si vous devez faire ces notifications vous-même:

  • Quel effet donner à l'apparition/disparition?
  • Comment empiler plusieurs notifications?
  • Comment afficher des notifications depuis un autre coin que le coin en bas à droite ?
  • Comment afficher des notifications par rapport à un autre conteneur que l'application?
  • Comment accéder facilement à mon toaster depuis n'importe quelle partie de mon application?
  • Comment donner un style qui ressemble à mon application pour ma notification?

Et bien, vous l'avez sûrement deviné, la ToasterLib vous permet de ne pas vous soucier de toutes ces problématiques et de vous concentrer sur votre Business Logic.

Personne ne l'a déjà fait avant?

Et bien si, d'autres s'y sont déjà essayé. Parfois de manière artisanale mais on peut voir plusieurs flexeurs qui se sont frottés aux notifications:

Lire la suite: 'ToasterLib – Affichez des notifications dans vos applications Flex'

22
jan

AgendaBT, une application AIR ma-gni-fique

Par fnicollet 4 Commentaires
Categories: Adobe Air and Exemple Tags: .

Un petit merci à ce blogger roumain qui m'a fait découvrir une application assez exceptionnelle à mon avis. Cette application est une petite application Adobe AIR développée par une banque roumaine: Banca Transilvania. Cette application nommée AgendaBT sert à gérer un agenda, en écrivant aussi simplement qu'on le fait avec un vrai agenda.

Au delà du concept de post-it/calendrier qui n'est pas nouveau, on découvre une application claire et agréable à utiliser. Voici un petit screenshot de l'interface pour vous faire envie:

screenshot

On va à l'essentiel, écrire du texte, changer sa couleur / police et faire quelques gribouillis. Aucun outil ou mécanisme superflu, tout cela est très bien orchestré. La sélection de la date se fait soit par un calendrier pour aller vite, soit par un petit sélecteur rapide à gauche de la page pour aller au jour suivant/précédent. Des markers sont présents pour souligner ou pour dessiner rapidement. Là aussi, la sélection se fait de manière très intuitive, en cliquant sur de petits stabilos, par de ColorPicker Flex de base :P .

Au final, tous les éléments de l'application sont skinnés et on ne reconnait même pas un composant Flex ce qui est remarquable. L'intégration dans une application AIR fait qu'en plus, vous n'avez pas toute l'interface du navigateur qui vient gâcher l'expérience.

Rajoutez à cela, un site web de présentation aux petits oignons, très graphique mais pourtant très discret et cela vous donne un cocktail que je trouve exceptionnel de qualité.

Seul "point noir", mais on leur en voudra pas, l'application est en une seule langue, le roumain. Si vous avez des bases de roumain, vous serez à l'aise, sinon vous allez un peu tâtonner. Bref, une application à installer de suite, ne serait-ce que pour l'inspiration au niveau expérience utilisateur.

Pour télécharger l'application, cliquez sur le bouton "IA AGENDA" à droite de la page de présentation:

Voir le site d'AgendaBT et télécharger l'application AIR

16
jan

Master Class Advanced Flex à Bruxelles (1-2 Mars 2010)

Par fnicollet 9 Commentaires
Categories: ActionScript, Adobe Air, BlazeDS and Modules Tags: , , .

Si vous suivez les RSS Adobe, vous avez peut-être entendu parler de l'entreprise américaine Farata Systems, notamment par son blog. Si vous n'êtes jamais tombé sur ce blog, je vous conseille très fortement d'en lire les articles, ils sont pointus et intéressants à la fois:

http://flexblog.faratasystems.com/

De nombreux articles de ce blog parlent de problèmes rencontrés dans des projets réels qu'ils réalisent. Ce n'est pas seulement du blabla sur les fonctionnalités de telle et telle technologie mais bien des problèmes auxquels vous pouvez être confrontés. Farata Systems propose aussi des formations Flex qui avaient lieu jusque là aux US. Mais exceptionnellement, les formateurs de chez Farata Systems viennent faire une session en Europe, à Bruxelles. Pour information, ils ne feront vraisemblablement pas d'autres session en Europe en 2010, c'est donc bien une occasion à ne pas rater.

Ce séminaire (Master Class Advanced Flex) est comme son nom l'indique, réservé aux personnes ayant déjà de bonnes bases sur Flex et les autres technologies qui tournent autour de Flex. Il se tiendra à Bruxelles le 1 et 2 Mars dans les locaux de l'hôtel Hilton (la classe). Bien sûr, ce séminaire sera donné en anglais.

Voici le programme de ce séminaire:

DAY 1

Adobe Flex Architecture

  • Architecture of Flash Player VM
  • Flash Player processing cycle
  • Data binding and MVC under the hood

Flex UI components:

  • Overview of  Spark components
  • Life cycle of custom components (use of callLater, commitProperties, updateDisplayList)

Selected Design Patterns in Flex

  • Application as  Singleton
  • Proxy for intercepting data changes
  • Mediator in custom UI components
  • Advanced DTO
  • AsyncToken in Remoting
  • Class Factory in a DataGrid

Linking Flex Libraries: when to use merged, external, and RSL

  • Tricks with libraries to make them self-initialized
  • Linking Flex Framework as RSL
  • Perceived performance improvement via pre-loaders and smarted RSL loading

Accessing Enterprise Server Tier

LCDS vs. BlazeDS

  • Flex Communication Protocols RTMP and AMF
  • Polling vs. Long polling vs. streaming
  • Basics of  creating custom adapters for BlazeDS/LCDS
  • Model-driven development with LCDS 3.0

Flex Messaging:

  • Flex Client – Flex Client messaging
  • Flex Client – external JMS messaging
  • Server Push to Flex Clients with BlazeDS
  • RPC Services
  • HTTPService
  • WebService
  • Flex Remoting

DataManagement Services

  • Data Synchronization with LCDS
  • Data Synchronization with BlazeDS
  • Remoting with DataCollection object
  • Monitoring AMF network traffic
  • Free Belgium beer for all attendees (5-7PM).

Lire la suite: 'Master Class Advanced Flex à Bruxelles (1-2 Mars 2010)'

10
jan

Flex Chart – Utilisation des fills, des stroke et des fillFunction dans les Charts

Par sboujo 0 Commentaires
Categories: ActionScript, Charting and Exemple Tags: , , , , , , , .

Tutorial écrit par Serge Boujo

Agir sur le choix des couleurs dans les Charts

J’ai eu à agrémenter des résultats de graphiques, pour lesquels je souhaitais utiliser des couleurs autres que celles proposées en standard par Flex.
Du fait d’une lecture incomplète de la documentation, j’ai utilisé une FillFunction sans chercher plus loin : j’arrivais à fixer les couleurs pour le graphe, mais non pour la légende.

Flex Source Code Download: Télécharger le code source complet de l'application

This movie requires Flash Player 9

La démarche à proscrire

J’ai utilisé une fillFunction pour afficher mes secteurs en rouge et en vert.
Lors de la déclaration de la Legend, ayant spécifié mon Chart en tant que dataProvider, j’étais persuadé que les couleurs affichées dans la Legend suivraient.

La lecture du code de la fonction confirme l’inadéquation de la solution : on remarque que le paramètre item n’est pas utilisé, mais surtout que le résultat renvoyé dépend uniquement du rang de la valeur au sein de la série, trahissant l’esprit d’une fillFunction.

Un petit rappel de la doc:

The signature of the fillFunction is as follows:

function_name(element:ChartItem, index:Number):IFill { ... }

The following table describes the arguments:

  • element: The chart item for which the fill is created; type ChartItem.
  • index: The index of the chart item in the series's data provider; type Number.

L’exemple de fillFunction ci-dessus fixe en même temps teinte et alpha de la SolidColor, mais il est tout à fait possible de n’intervenir que sur l’un des deux. Le code deviendrait alors, si l’on ne voulait jouer que sur l’opacité.

private function myFillFunc(item:PieSeriesItem, index:Number) : IFill {
  var coul: SolidColor   = new SolidColor(0xDDDDDD);
  if (index == 0){
    coul.alpha = 1.0
  }else {
    coul.alpha = 0.4;
  }
  return coul;
}

Utilisation correcte des fills, des stroke et des fillFunctions dans les Charts

Les erreurs que j’ai commises et décrites dans mon précédent tuto m’ont incité à creuser la question ; une relecture soigneuse et approfondie de la documentation de Flex m’a permis d’y voir un peu plus clair.

La démarche correcte consiste en l’abandon de cette fillFunction et en l’utilisation de fills.

Pour ceux qui veulent approfondir, on peut également fixer des stroke différents pour le tour et pour les séparations des pies.
Lire la suite: 'Flex Chart – Utilisation des fills, des stroke et des fillFunction dans les Charts'

« Tutoriaux Flex Précédents

Bientôt sur flex-tutorial.fr …

  • - Tutoriaux BlazeDS
  • - Composants Flex

tutorial flex tutorial flex

flex Adobe Air AFCS Data Filter Lib ToasterLib librairies AS3 Flex livres AS3 Flex

 

janvier 2010
L Ma Me J V S D
« déc   fév »
 123
45678910
11121314151617
18192021222324
25262728293031

Catégories