Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Flex 4 en un jour - Les autres fonctionnalités intéressantes

Compatible Flex 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 15 février 2011

Cet article est une traduction d'un mini livre nommé Flex 4 in a Day de Mihai Corlan.

Adobe a donné son accord concernant la traduction de ce mini-livre.

Les autres fonctionnalités intéressantes

Le framework Text Layout

Le framework Text Layout est une librairie au-dessus de l'API de bas niveau du moteur de texte Flash introduit par Flash Player 10. Ce framework introduit le support de l'impression de qualité du texte dans Flash (y compris le support pour les langues de droite à gauche).

Au dessus de ce framework, Spark introduit 5 nouveaux composants de texte:

  • 3 composants primitifs de texte (Label, Rich Text et RichEditableText)
  • 2 composants de texte personnalisables (TextInput et TextArea)

Ces composants supportent:

  • Les colonnes
  • Les attributs au niveau des caractères et des paragraphes
  • Le crénage
  • Les transformations
  • Masques et modes de fusion
  • Marges et indentations
  • Direction (gauche à droite et droite à gauche)

Utilisation des polices

Vous pouvez utiliser des polices de périphérique, ainsi vous n'augmentez pas la taille du fichier SWF en incorporant les polices. Toutefois, il est conseillé de spécifier à la fin de la liste des polices, une police générique. Ainsi, si par exemple Helvetica n'est pas disponible sur l'appareil, il peut utiliser d'autres polices disponibles de la famille San Serif. Voici les valeurs à choisir parmi: _sans, _serif, _typewriter. Vous pouvez déclarer la famille de polices comme ceci:

.myClass {
     fontFamily: Arial, Helvetica, "_sans";
}

Si vous choisissez d'incorporer des polices (les types de fichiers pris en charge comprennent les polices TrueType -. ttf, les polices OpenType -. otf, ainsi que les collections TrueType -. ttc, Mac Data Fork Fonts -. dfont, et Mac Resource Fork TrueType Suitcases - qui n'a pas d'extension de fichier), vous bénéficiez des avantages suivants:

  • L'environnement client ne doit pas avoir la police d'installée.
  • Les polices incorporées peuvent subir des rotations et des changements d'opacité.
  • Les polices incorporées sont anti-aliasées, ce qui signifie que leurs bords sont lissés pour faciliter la lisibilité. Cela est particulièrement visible lorsque la taille du texte est grande.
  • Les polices incorporées fournissent une lecture plus fluide lors d'un zoom.
  • Le texte apparaît exactement comme vous l'attendez lorsque vous utilisez des polices intégrées.
  • Lorsque vous incorporez une police, vous pouvez utiliser les informations avnacées d'anti-aliasing qui offre un rendu de texte clair et de haute qualité dans les fichiers SWF. L'utilisation avancé de l'anti-aliasing améliore considérablement la lisibilité du texte, en particulier quand il est rendu dans de petites tailles de polices.

Vous incorporez une police en utilisant la déclaration CSS font-face ou la métadonnée Embed. Si vous souhaitez contrôler la taille du fichier SWF, vous pouvez utiliser des plages de caractères en incluant uniquement ceux que vous utilisez pour une déclaration spécifique font-face.

Ressources:

http://blogs.adobe.com/flexdoc/fonts.pdf

Travailler avec des composants Flex 3 et 4 dans le même projet

Les composants Spark peuvent être utilisés à l'intérieur des conteneurs MX et les composants MX peuvent être utilisés à l'intérieur des conteneurs Spark.

Note: Les enfants direct d'un conteneur de navigation MX peuvent être soit des conteneurs MX, soit des conteneurs de mise en page ou de navigation, ou un conteneur Spark NavigatorContent. Vous ne pouvez pas imbriquer un contrôle ou un conteneur Spark autre que le conteneur Spark NavigatorContent dans un conteneur de navigation. Pour utiliser un conteneur Spark autre que le conteneur Spark NavigatorContent en tant qu'enfant d'un conteneur de navigation, vous devez l'englober dans un conteneur MX ou dans un conteneur Spark NavigatorContent.

Migrer des projets Flex 3 vers Flex 4

Si vous avez besoin des fonctionnalités de Flex 4 dans un projet Flex 3, vous vous retrouvez dans la position de migrer le projet de Flex 3 à Flex 4. La procédure se fait facilement. Voici les principales étapes que vous devez réaliser:

  1. Premièrement, vous devez changer l'espace de nom MXML 2006 vers les nouveaux espaces de noms
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
  2. La balise Declarations. Si votre application a des composants non-visuels définis en MXML (comme par exemple RemoteObject, HTTPService, etc), vous devez les déplacer à l'intérieur de la balise <fx:Declarations>
  3. Si vous utilisez CSS, vous devez ajouter des espaces de noms pour les sélecteurs de type (Button, Panel, etc):
    <fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
     
    s|Button { fontSize:16; }
    mx|Button { color:red; }
    </fx:Style>
  4. Vous devez clibler Flash Player 10 à la place du 9
  5. Vous devez basculer des modèles d'états Flex 3 vers les modèles d'états Flex 4 si vous utilisez les états

Ressources

http://www.adobe.com/devnet/flex/articles/flex3_to_flex4_transitioning.html
http://help.adobe.com/en_US/Flex/4.0/FeaturesAndMigration/flex_4_features.pdf
http://www.adobe.com/devnet/flex/articles/flexbuilder3_to_flashbuilder4.html

Nouvelles fonctionnalités de Flash Builder 4 (editeur d'états, génération de code pour les accesseurs d'attributs, les écouteurs d'événements, gestion des performances et gestion du debogage)

Flash Builder 4 introduit un certain nombre d'améliorations qui rendent le développement d'applications Flex encore plus rapide qu'auparavant.

  • Support des états en vue code.
  • Meilleur débogueur: points d'arrêt conditionnels, allez à la ligne de commande, points d'observation, et les évaluations d'expression.
  • Meilleur profileur: vous pouvez vérifier si un objet sera nettoyé ou pas.
  • Hiérarchisation: vous pouvez afficher tous les appels à la variable sélectionnée, à une fonction / méthode, à une classe ou à une interface.
  • Les générateurs de code pour les gestionnaires d'événements et les accesseurs d'attributs (getter/setter)
  • Assistants de développement centré sur les données -support de Java, ColdFusion, PHP, Web Services, Services REST. DCD (Data Centric Developement) génère le connecteur client du service et les types de données basés sur les services du serveur.
  • Surveillance réseau et tests fonctionnels.
  • Réorganisation de code - déplacement et renommage.
  • Affichage du contenu de la documentation - Placez le curseur sur le code ou utiliser la surbrillance de code pour afficher les informations de la documentation.
  • Indentation du code, y compris le support pour le copier / coller.
  • Compilation par ligne de commande – Synchronisation individuelle des paramètres de compilation avec un environnement de compilation performant
  • Les tests unitaires - générer et modifier des tests FlexUnit reproductibles qui peuvent être exécutés depuis des scripts ou directement dans Flash Builder. Prise en charge de l'automatisation des composants Spark. Prise en charge de l'automatisation pour les applications Adobe AIR.

Ressources

Un des meilleurs endroits pour obtenir des ressources sur Flex est Adobe Developer Connection et Adobe TV (où vous pouvez trouver tous les enregistrements à partir d'Adobe MAX 2008). Enfin, n'oubliez pas d'installer Tour de Flex (il s'agit d'une application AIR qui offre des tonnes d'exemples de code pour Flex 3 et Flex, y compris des composants tiers. Il est mis à jour régulièrement).

Documentation en ligne de Flex 4 et Flash Builder 4:
http://help.adobe.com/en_US/flex/using/WSa7fd4845e77b4e67406b2ad31276e10ce3d-8000.html

AdobeTV:
http://tv.adobe.com

Adobe Developer Connection:
http://www.adobe.com/devnet/flex

Tour de Flex:
http://www.adobe.com/devnet/flex/tourdeflex/

Les nouveautés de Flex 4:
http://www.adobe.com/devnet/flex/articles/flex4sdk_whatsnew.html

Différences entre Flex 3 et Flex 4:
http://www.adobe.com/devnet/flex/articles/flex3and4_differences.html

Un rapide aperçu de l'architecture Spark et du jeu de composants:
http://www.adobe.com/devnet/flex/articles/flex4_sparkintro.html

Les nouveautés de Flash Builder 4:
http://andrewrshorten.wordpress.com/2010/03/23/whats-new-in-flash-builder-4-all-of-this/

Migrer de Flex 3 vers Flex 4:
http://www.adobe.com/devnet/flex/articles/flexbuilder3_to_flashbuilder4.html

Développement centré sur les données avec Flash Builder 4:
http://www.adobe.com/devnet/flex/articles/datacentric_development.html

Nouveau moteur d'effets:
http://www.adobe.com/devnet/flex/articles/flex4_effects_pt1.html
http://www.adobe.com/devnet/flex/articles/flex4_effects_pt2.html

Introduction à la personnalisation dans Flex 4:
http://www.adobe.com/devnet/flex/articles/flex4_skinning.html

Mise en page Spark avec Flex 4:
http://www.adobe.com/devnet/flex/articles/spark_layouts.html







Page précédente | Sommaire