Attacher des feuilles de styles

de : Adobe Flex 3 et Adobe AIR

Acheter

À propos de cette vidéo

Pour une meilleure maintenance de votre projet, il est préférable de définir les styles dans des fichiers externes.

Un extrait de : Adobe Flex 3 et Adobe AIR

Les usages et usagers du web évoluant, il est important pour les développeurs d’accéder à des technologies en perpétuelle mouvance. S’appuyant sur Flash Player, Flex Builder 3 et la technologie Adobe AIR permettent aux développeurs ActionScript et JavaScript de développer les applications de demain, tout en capitalisant leur expérience. En utilisant Flex Builder 3, vous pourrez développer des applications web innovantes et grâce à AIR, les utilisateurs de Flash, Dreamweaver, JavaScript pourront facilement déployer leurs applications ou animations vers des applications pour poste de travail.

EUR 39,80

Acheter

Formations similaires

Bonus en ligne

Il n’est pas nécessaire d’avoir Flex Builder 3 pour compiler votre application MXML. Grâce au SDK, vous pouvez générer votre application Flex par lignes de commandes.

Compiler avec la console de ligne de commandes

07:00
Une façon plus souple d’utiliser le SDK est d’employer un fichier .bat pour déclencher la compilation d’un fichier MXML.

Compiler avec un fichier .bat

02:22
AIR permet la lecture de fichiers son dans une application pour le poste de travail.

Créer un lecteur MP3

07:51

L'une des évolutions majeures que va connaître l'Internet, c'est l'introduction d'un nouveau concept d'utilisation des applications Web. Souvent appelé Web 2, ce nouveau type de développements s'appuie non pas sur une technologie, mais plutôt sur une philosophie orientée vers l'utilisateur.

Présentation de l'application
- Basé sur Eclipse, le Flex Builder s'appuie sur le même workflow que Flash pour, grâce à son interface et à ses composants, réaliser des RIA (Rich Internet Application).
  
  Concept de RIA ou Rich Internet Application
  
  06:59
- Vous avez la possibilité de choisir entre 3 options lors de l'installation de Flex 3 : la version SDK, le Flex Builder 3 disponible en version plugin pour Eclipse ou en version autonome.
  
  Installation et présentation de l'interface Flex
  
  04:11
- Dans Flex la notion de projet est importante. Avant de commencer une nouvelle application, il faut créer un projet qui contiendra les différents composants de votre future application.
  
  Première application
  
  06:51
- Ces deux modes permettent de travailler et de mettre en place les éléments de votre application. En fonction de la tâche à réaliser, il est préférable d'activer l'un ou l'autre de ces 2 modes.
  
  Mode Source et Design
  
  07:37
- Ce mode, particulièrement adapté aux développeurs, permet de définir et de paramétrer les éléments d'une application Flex, uniquement par ligne de code mxml.
  
  Travailler en mode Source
  
  06:34
- Dans ce projet, le formateur vous explique comment déclencher une action simple sur un bouton en utilisant conjointement les langages MXML et AS3.
  
  MXML et AS3
  
  05:46
- En vue d'optimiser le développement d'un projet Flex, il est préférable d'externaliser le code AS3 dans des fichiers ActionScript.
  
  Fichiers AS3 externes
  
  02:31
- Le travail dans Flex Builder n'est pas une fin en soi. Votre développement terminé, vous pouvez le déployer sur Internet grâce à la nouvelle fonctionnalité d'export de projet.
  
  Déployer un projet
  
  03:18
La version personnalisée du langage mxml permet de mettre en place facilement une interface d'application Web. En utilisant les nombreuses options des différents comportements, il est possible de monter une interface complexe en quelques clics.

Travailler avec MXML
- Les différentes options des vues Layout et Navigators vous permettent d'organiser et de définir la position des conteneurs de votre interface.
  
  Utilisation des Layout et Navigators
  
  05:05
- Le panneau States permet de gérer efficacement les multiples états ou évolutions d'une application Web. Chaque page MXML possède au moins une vue par défaut. Il est alors possible de rajouter des effets lors du passage d'un état à un autre.
  
  Utiliser le panneau States
  
  07:06
- Le comportement Image permet d'afficher dans votre application des images de différents formats, ainsi que des swf. Il est également possible d'intégrer les médias dans le fichier swf final pour une utilisation offline.
  
  Intégrer des images
  
  05:31
- Flex intègre un système de liaison sous-jacent qui permet la mise à jour automatique de données liées grâce à Data Binding. Avec cette structure, si la source des données change, l'exploitation des données est aussitôt mise à jour.
  
  Data Binding pour des données dynamiques
  - Dans cette vidéo, le formateur vous explique la structure de base d'un data Binding. Dans cet exemple les données sont structurées dans une balise Model qui convertit le XML en données exploitables par Flex.
    
    Principe du Data Binding
    
    04:39
  - Les formulaires peuvent êtres pré-remplis grâce à la structure de données Data Binding.
    
    Les formulaires dynamiques
    
    06:48
  - Dans Flex différents types de composants peuvent envoyer ou recevoir des données Data Binding. Ce système permet de mettre en uvre facilement des interactions utilisateur.
    
    Interactions
    
    03:33
  - Le flux de données sous-jacent du Data Binding permet également de calculer instantanément des valeurs.
    
    Calculs instantanés
    
    03:15
- Un évènement survient souvent lorsqu'un utilisateur produit une action, tel que survoler un bouton, mais Flex peut émettre des événements lorsqu'une action interne comme le chargement des éléments de votre application ou d'un fichier de données externes est terminée.
  
  Gestion des évènements
  - La gestion et la diffusion d'évènements en ActionScript 3 est un phénomène complexe qui est illustré dans cette vidéo.
    
    La gestion d'événement en actionScript3
    
    03:40
  - Le simple fait de cliquer sur un bouton engendre le processus de diffusion d'évènements intercepté par une fonction.
    
    Evènements simples
    
    05:46
  - Cet évènement particulier est diffusé lorsque la totalité de l'interface de votre application est chargée. C'est alors le bon moment pour charger des datas externes telles que les XML.
    
    Evènement creationComplete
    
    06:26
  - Pour accéder à l'objet d'évènement, il doit être passé en paramètres à la fonction qui est invoquée sur l'événement.
    
    Accéder à l'objet événement
    
    05:47
- La balise Model permet d'encapsuler les données XML dans le fichier swf. L'inconvénient de cette méthode est que les données ne sont pas dynamique et que le fichier swf se trouve alourdi du poids des données XML. L'utilisation de données XML externes permet de résoudre ces problèmes.
  
  Données XML externes
  - Pour charger des données externes en AS3, il faut utiliser conjointement les classes URLLoader et URLRequest. Dans cette vidéo le formateur utilise un projet ActionScript.
    
    Chargement de données externes
    
    07:25
  - Les spécifications E4X, implémentées dans l'AS3, permettent d'utiliser la syntaxe pointée pour accéder ou organiser des données XML. Cette évolution majeure décharge le développeur de toute la gestion laborieuse du XML nécessaire auparavant.
    
    Comprendre E4X
    
    03:58
  - Ce qui est possible depuis une classe AS3 est bien sûr possible depuis un fichier MXML
    
    E4X et MXML
    
    03:20
  - Par défaut les donnés complexes sont retournées dans un ArrayCollection. Dans cette vidéo les données issues d'une requête HTTPService sont affichées dans un composant List.
    
    Accès au données externes
    
    05:06
  - Si ArrayCollection permet d'alimenter des composants acceptant des données linéaires, XMLListCollection conserve la structure hiérarchique du XML, tout en servant de dataProvider pour des composants complexes.
    
    XMLListCollection
    
    04:48
  - Une fois les attributs récupérés grâce à XMLListCollection, il est facile d'en extraire leur valeur en utilisant la syntaxe E4X.
    
    Afficher les attributs d'un nud XML
    
    05:22
Les composants vous permettent de créer facilement et rapidement des applications robustes à la présentation et au comportement cohérents.

Les composants
- Le composant ComboBox contient une liste déroulante dans laquelle l'utilisateur ne peut sélectionner qu'une valeur.
  
  ComboBox
  
  04:48
- Le DataGrid est un composant de type liste qui fournit une grille de lignes et de colonnes. Il peut être alimenté avec des données XMLList, formatées en dataProvider.
  
  DataGrid
  
  06:22
- Le composant AdvancedDataGrid est un composant permettant la visualisation de données structurées et hiérarchiques.
  
  AdvancedDataGrid
  
  04:33
- DateChooser permet à l'utilisateur de choisir une date dans le calendrier. Prêt à l'emploi, ce contrôle demande néanmoins à être localisé pour afficher les jours et mois en français.
  
  DateChooser
  
  04:44
- Lorsque les données à afficher sont structurées et se répètent, il est possible d'utiliser des composants Repeater, permettant la gestion récursive des données. Pour utiliser un Repeater, il faut employer la structure DataBinding de Flex.
  
  Repeater
  
  03:38
- Le composant HorizontalList permet d'afficher une liste d'items. Il est particulièrement adapté à l'affichage d'images ou d'autres données répétitives.
  
  HorizontalList
  
  03:57
- Comme pour HorizontalList, ce composant permet l'affichage en mosaïque des données images.
  
  TileList
  
  03:50
- Un fichier MXML étant une classe AS3, il est possible de créer un composant à partir d'un fichier MXML. Une application Flex peut ainsi être la base d'un composant personnalisé, qui vient enrichir le dossier Custom du panneau Composant.
  
  Composants personnalisés
  
  04:11
La fonctionnalité du Glisser / Déposer permet d'introduire dans vos applications des interactions utilisateur dans lesquelles il peut déplacer des objets d'une source vers une cible, créant ainsi une expérience ludique et conviviale.

Glisser / Déposer
- L'action du Glisser / Déposer se décompose en 3 phases : la phase d'initiation, la phase de déplacement et la phase de dépose dans laquelle l'utilisateur définit le nouvel emplacement pour son objet.
  
  Glisser / Déposer simple
  
  07:07
- Les possibilités du Glisser / Déposer sont multiples et il est parfois nécessaire de réinitialiser un Glisser / Déposer.
  
  Réinitialiser un Glisser / Déposer
  
  05:37
- L'objet d'évènement DragEvent contient les informations relatives à la source du Drag sous forme d'un tableau. Il est possible de les récupérer pour les exploiter par la suite.
  
  Informations d'un Glisser / Déposer
  
  02:44
L'aspect final de votre application étant un des facteurs de son succès, il est important de pouvoir redéfinir et personnaliser son interface, afin que l'application puisse répondre aux exigences d'un directeur artistique.

Personnaliser son interface
- Chaque control possède des attributs permettant d'intervenir sur leur présentation. Se sont les premiers paramètres accessibles depuis le mode Design. Ils peuvent être définis dans le corps de la balise Style.
  
  Appliquer des styles
  
  04:24
- Pour une meilleure maintenance de votre projet, il est préférable de définir les styles dans des fichiers externes.
  
  Attacher des feuilles de styles
  
  01:44
- Plusieurs techniques sont possibles pour afficher les différents médias externes nécessaires au design de l'application.
  
  Appliquer des Skins
  
  04:50
- Pour plus de souplesse dans la redéfinition du design de vos interfaces, il est possible d'utiliser la puissance du langage ActionScript pour redéfinir vos Skins dans une classe AS3.
  
  Programmer une Skin I
  
  05:39
- La classe ProgrammaticSkin étant étendue, et la méthode updateDisplayList surchargée, il est maintenant possible de redéfinir les états d'un bouton.
  
  Programmer une Skin II
  
  04:08
- L'application Flex Style Explorer vous permet d'expérimenter intuitivement les multiples propriétés des composants Flex.
  
  Flex Style Explorer
  
  04:21
Flex permet l'affichage graphique de données à travers une extension appelée Charting components. Cette extension possède une API permettant d'afficher dynamiquement des données d'un dataProvider structuré avec un ArrayCollection.

Affichage de données
- Ce composant permet l'affichage de données sous forme de surfaces possédant de multiples paramètres personnalisables.
  
  AreaChart
  
  07:09
- Ce composant permet l'affichage de données sous forme de points ayant 3 propriétés : x, y et dimension.
  
  BubbleChart
  
  02:41
- Ce composant permet l'affichage de données sous forme de rectangles verticaux possédant de multiples paramètres personnalisables.
  
  Column Chart
  
  03:58
- Ce composant permet l'affichage de données sous forme de graphiques angulaires communément appelés camemberts.
  
  Pie Chart
  
  04:20
- La propriété labelFunction permet d'invoquer une fonction donnant accès au dataProvider ainsi qu'à des informations relatives à la zone dessinée.
  
  Utilisation de la propriété labelFunction
  
  03:43
Flex comprend un puissant système intégré de validation de données. Vous pouvez ainsi facilement contrôler les entrées de formulaire sur des données de type eMail, numéro de téléphone ou carte de crédit.

Validation des données
- Cet exemple simple permet de mettre en pratique l'architecture de base de la classe Validator.
  
  Utilisation de la classe Validator
  
  03:58
- Les messages d'erreur émis par les classes Validator ne sont pas toujours explicites, mais en plus il sont en anglais. Vous pouvez personnaliser ces messages par l'ajout d'attributs de control.
  
  Personnalisation des messages
  
  06:24
- La personnalisation des message peut également être définie dans du code AS3. Cette solution offre l'avantage de pouvoir être déclenchée sur un clic bouton.
  
  Personnalisation avec ActionScript
  
  03:37
- En étendant cette classe, vous pouvez bénéficier des puissantes fonctionnalités qu'offre AS3 pour la manipulation de chaînes de caractères avec les expressions régulières.
  
  La classe RegExpressionValidator
  
  05:48
- Pour le bonheur des développeurs, les classes Formatter permettent de formater facilement vos données. Dans cette vidéo la classe CurrencyFormatter est utilisée pour formater des données monétaires.
  
  Les classes Formatter
  
  07:03
Dans un contexte de navigation dans des RIA, il est judicieux d'architecturer ses informations en utilisant des composants ou conteneurs de navigation tels que des boîtes à onglets barre de menu ou des accordéons.

Utilisation des Navigators
- La classe TabNavigator offre la possibilité d'afficher une boîte à onglets dans lesquels peuvent se loger plusieurs instances de la classe Canvas.
  
  Classe TabNavigator
  
  04:35
- Ce composant simple d'emploi vous permettra d'enrichir de façon impressionnante l'ergonomie de votre interface avec seulement quelques lignes de code.
  
  Composant Accordion
  
  03:20
- Grâce à ce composant, et une structure XML, il est facile de construire des barres de menus comme dans vos applications préférées.
  
  Composant MenuBar
  
  05:50
Adobe met à disposition des extensions pour les logiciels graphiques de la gamme CS3 permettant aux graphistes ou développeurs d'enrichir graphiquement les interfaces d'application Flex. On trouve notamment une extension pour Flash permettant de faciliter l'intégration et la communication de swf dans Flex.

Composants CS3 pour Flex
- La commande Embed permet bien plus que d'importer un swf dans Flex, elle permet également de pointer directement vers un des symboles de la bibliothèque.
  
  Import de symbole Flash CS3
  
  03:20
- Cette extension gratuite permet de faciliter et d'optimiser l'intégration de symboles flash dans Flex.
  
  Installer et utiliser le Flash Component Kit
  
  03:36
- A travers cette classe, vous avez la possibilité d'importer des skins pour les composants Flex par l'intermédiaire d'un fichier SWC.
  
  La classe UIMovieClip de Flash CS3
  
  01:59
- L'extension Flex Skin Design Extensions permet de redéfinir les enveloppes pour les composants Flex en utilisant Flash CS3.
  
  Skiner un composant avec Flash CS3
  
  05:08
- L'extension Flex Skin Design Extensions permet de redéfinir les enveloppes pour les composants Flex en utilisant Fireworks CS3.
  
  Skiner un composant avec FireWorks CS3
  
  03:37
- L'extension Flex Skin Design Extensions permet de redéfinir les enveloppes pour les composants Flex en utilisant Photoshop CS3.
  
  Skiner un composant avec Photoshop CS3
  
  05:13
- L'extension Flex Skin Design Extensions permet de redéfinir les enveloppes pour les composants Flex en utilisant Illustrator CS3.
  
  Skiner un composant avec Illustrator CS3
  
  03:53
- Depuis Fireworks CS3, vous pouvez définir le design de votre application, puis finaliser celle-ci dans Flex.
  
  Les composants intégrés à Fireworks CS3
  
  05:06
Dans un projet Flex il est souvent indispensable de pouvoir exploiter des données issues d'une base de données à l'aide de technologies serveur telles que PHP, .NET ou ColdFusion. Dans ce chapitre, le formateur utilise le couple PHP/MySQL pour exploiter dynamiquement des données.

Flex-PHP-MySQL
- Pour pouvoir interpréter du code PHP sur son ordinateur il faut installer et configurer différents composants logiciels et créer une base de donnée.
  
  Configuration PHP/MySQL
  
  07:13
- La classe HTTPService est la classe de base pour accéder aux données externes. Ses données peuvent servir à alimenter un composant dataGrid en utilisant du code MXML.
  
  PHP et MXML
  
  07:55
- Dernière étape du processus de gestion de données dynamique : l'exploitation des données dans Flex.
  
  Afficher les données d'une base de données
  
  02:36
Les heures passées à réaliser une application ont un but : faire exister votre application sur Internet. Mais avant, de nombreuses précautions et opérations sont nécessaires.

Tester et déployer son application
- Flex intègre une perspective particulièrement adaptée au débugage. A travers cette interface, il est possible de surveiller les variables de l'application ou de faire une sélection d'expressions.
  
  Tester et débuguer
  
  05:20
- Comme avec un swf fait avec Flash, il est nécessaire d'afficher la progression du chargement de votre application. Flex fournit néanmoins la classe DownloadProgressBar.
  
  Barre de Chargement
  
  03:12
- Le projet terminé, il faut le publier pour la mis en en ligne sur un serveur distant.
  
  Publier dans l'IDE de Flex
  
  03:49
AIR (Adobe Integrated Runtime) est un environnement d'exécution multiplateforme permettant d'utiliser les technologies du Web pour créer des applications pour poste de travail.

AIR
- Il existe plusieur façons de développer pour AIR.
  
  Présentation et installations
  - Installation et utilisation d'une application existante du point de vue de l'utilisateur final.
    
    Présentation de Air Runtime
    
    02:38
  - Le Air SDK fournit un ensemble d'outils et d'utilitaires pour tester et compacter une application AIR.
    
    Installer le AIR SDK
    
    03:15
- Avec Flash CS3 les développeurs peuvent déployer aisément leurs Rich Internet Applications (RIA) pour le bureau.
  
  Développer AIR avec Flash CS3
  - La mise à jour de Flash CS3 offre les outils et options nécessaires à la création d'une application AIR.
    
    Créer une application AIR avec Flash CS3
    
    08:33
  - Pour rajouter de l'interaction, il faut écrire du code AS3. Par contre, il faut choisir non pas tester mais débugger l'animation pour voir apparaître une trace dans le panneau de sortie.
    
    Créer une application interactive
    
    02:51
  - Il est possible de faire migrer un travail réalisé pour une ancienne version du Flash Player vers une application AIR.
    
    Transformer un vieux fichier Flash pour AIR
    
    01:24
  - Une véritable application AS3 est architecturée sur une classe principale, souvent appelée Main. Elle est le point de départ de votre projet. Des icônes personnalisées enrichissent l'installation de votre application.
    
    Projet complet AIR
    
    06:49
  - Il est possible d'architecturer son application AIR avec des composants. Dans cette vidéo, nous utilisons des composants DataGrid.
    
    Utiliser un composant
    
    05:31
  - Pour manipuler une fenêtre il faut d'abord créer une instance de la classe NativeWindow. Ensuite, des méthodes permettent de gérer votre fenêtre.
    
    Travailler avec les fenêtres
    
    03:10
  - Les propriétés d'une fenêtre AIR permettent de rendre une fenêtre transparente. Cette fonctionnalité impressionnante ouvre des portes pour les développeurs.
    
    Créer une fenêtre transparente sur le bureau
    
    07:21
  - AIR permet de créer des menus contextuels personnalisés. Il est alors possible d'interagir avec les éléments de la liste d'affichage.
    
    Menus contextuels
    
    02:10
  - La classe File étend la classe FileRéférence incluse dans Flash. Néanmoins, elle comporte de nombreuses méthodes et propriétés permettant de multiples opérations sur les fichiers et répertoires, indisponibles dans le Flash Player pour des raisons de sécurité.
    
    Classe File
    
    08:33
  - Une opération de Glisser / Déposer nécessite une source et une cible. Dans cette vidéo, des données issues de Word sont déposées dans une application AIR.
    
    Glisser / Déposer : DragIn
    
    03:44
  - Des données graphiques peuvent aussi se déplacer de AIR vers une application graphique comme FireWorks CS3.
    
    Glisser / Déposer : DragOut
    
    03:53
  - Fonctionnalité indispensable à toute application, le Copier / Coller permet de véhiculer des informations d'une application à l'autre ou au sein d'une application AIR.
    
    Copier / Coller
    
    02:37
  - En utilisant les fonctionnalités de Glisser/Déposer, vous pouvez créer un lecteur vidéo personnalisé.
    
    Lecteur vidéo personnalisé :
    
    02:50
- La technologie AIR offre la possibilité de décliner vos développements pour le Web (Flash, Flex, XHTML, AJAX) en application autonome s'exécutant hors ligne, hors du navigateur et sur votre poste de travail. Cette technologie permet donc de diffuser plus largement vos applications sans investissements supplémentaires.
  
  Développer AIR avec Flex Builder 3
  - Sur la base d'un développement MXML, il est facile de publier une application AIR avec Flex Builder 3.
    
    Première application avec AIR
    
    07:11
  - Les paramètres de publication résidant dans le fichier xml peuvent être définis avec du code AS3 dans le fichier MXML.
    
    Paramétrage en AS3
    
    02:44
  - Ce que Flash n'a jamais fait, AIR le fait. Il est enfin possible d'accéder au système de fichier du poste de l'utilisateur. Cette possibilité interdite pour des raisons de sécurité pour un swf est maintenant possible avec AIR.
    
    Accéder au poste utilisateur
    
    03:42
  - Si la classe File permet d'accéder au fichier, la classe FileStream permet quant à elle d'aller lire et écrire dans un fichier en mode synchrone ou asynchrone.
    
    Lire et écrire dans un fichier
    
    06:21
  - Les applications AIR intègrent le moteur HTML WebKit, qui est un navigateur Open Source, ce qui permet de créer son propre navigateur dans une application AIR.
    
    Ouvrir une page HTML
    
    03:41
- AIR s'appuyant sur les technologies swf, javaScript ou HTML, il est possible de créer une application AIR à partir de pages HTML. L'extension Adobe Dreamweaver CS3 extension facilite le travail d'empaquetage et de test de l'application AIR.
  
  Développer AIR avec HTML
  - Il n'est pas nécessaire d'être dévelopeur Ajax pour utiliser cette extension gratuite.
    
    Installer l'extension Adobe Dreamweaver CS3
    
    02:18
  - A partir d'une page HTML, le formateur définit et teste une application AIR.
    
    Créer une application AIR avec Dreamweaver
    
    03:44
  - De nombreuses options sont requises pour définir le fichier XML nécessaire à la création du paquetage AIR.
    
    Empaqueter ses fichiers HTML
    
    05;53
  - Vous pouvez structurer votre application AIR HTML à l'aide de CSS. Mais il ne faut pas oublier de les packager lors de la réalisation de l'application.
    
    AIR, Dreamweaver & CCS
    
    05:11
  - AIR s'appuyant sur plusieurs langages, il est bien sûr compatible avec vos développements JavaScript. De plus, le fichier AIRAliases.js du SDK vous permet d'accéder aux classes AIR facilement.
    
    AIR, Dreamweaver & JavaScript
    
    03:23
  - Les Spry Ajax fournis avec Dreamweaver CS3 sont des éléments simples et performants pour créer des applications AIR sans être développeur Ajax chevronné.
    
    AIR, Dreamweaver & Ajax
    
    04:37
  - L'outil Galerie Web Photo de Photoshop CS3 permet de réaliser des diaporamas interactifs. Ce diaporama peut être une application AIR.
    
    AIR avec PhotoShop
    
    05:54
  - Fireworks possède des outils intégrés orientés WEB. Il est donc possible de créer une application AIR avec ce logiciel graphique.
    
    AIR avec FireWorks
    
    08:50