Développement d applications mobiles avec ADOBE FLEX 4.6 et ADOBE FLASH TM BUILDER 4.6

Développement d applications mobiles avec ADOBE FLEX 4.6 et ADOBE FLASH TM BUILDER 4.6

Informations juridiques Informations juridiques Pour consulter les informations juridiques, voir http://help.adobe.com/fr_fr/legalnotices/index.html.

iii Sommaire Chapitre 1 : Prise en main Premiers pas avec les applications mobiles............................................................................. 1 Différences entre le développement d applications mobiles, d ordinateur et de navigateur.............................. 4 Chapitre 2 : Environnement de développement Création d une application Android dans Flash Builder................................................................. 9 Création d une application ios dans Flash Builder..................................................................... 11 Création d une application BlackBerry Tablet OS dans Flash Builder.................................................... 12 Création d un projet ActionScript mobile.............................................................................. 12 Utilisation d extensions natives....................................................................................... 13 Définition des préférences de projet mobile........................................................................... 15 Connexion des périphériques Google Android........................................................................ 18 Processus de développement Apple ios à l aide de Flash Builder....................................................... 21 Chapitre 3 : Interface utilisateur et présentation Présentation d une application mobile............................................................................... 26 Gestion des saisies de l utilisateur dans une application mobile........................................................ 32 Définition d une application mobile et d un écran de démarrage....................................................... 35 Définition de vues dans une application mobile....................................................................... 41 Définition d onglets dans une application mobile..................................................................... 50 Création de plusieurs panneaux dans une application mobile.......................................................... 53 Définition de contrôles de navigation, de titre et d action dans une application mobile................................. 62 Utilisation des barres de défilement dans une application mobile...................................................... 67 Définition de menus dans une application mobile..................................................................... 74 Affichage d une indication visuelle pour une opération longue durée dans une application mobile..................... 78 Ajout d un bouton bascule à une application mobile.................................................................. 79 Ajout d un conteneur Callout à une application mobile................................................................ 82 Définition de transitions dans une application mobile................................................................. 95 Sélection des dates et des heures dans une application mobile....................................................... 101 Utilisation d une liste de compteur dans une application mobile...................................................... 114 Chapitre 4 : Conception d applications et flux de travail Activation de la persistance dans une application mobile............................................................. 128 Prise en charge de plusieurs tailles d écran et valeurs PPP dans une application mobile................................ 132 Chapitre 5 : Texte Utilisation de texte dans une application mobile..................................................................... 147 Interventions de l utilisateur liées à du texte dans une application mobile............................................. 156 Utilisation du clavier logiciel dans une application mobile............................................................ 158 Intégration de polices dans une application mobile.................................................................. 172

Sommaire iv Chapitre 6 : Habillage Notions de base sur l habillage mobile............................................................................... 174 Création d habillages pour une application mobile................................................................... 179 Application d un habillage mobile personnalisé...................................................................... 186 Chapitre 7 : Test et débogage Gestion des configurations de lancement............................................................................ 188 Test et débogage d une application mobile sur l ordinateur........................................................... 189 Test et débogage d une application mobile sur un périphérique...................................................... 189 Chapitre 8 : Installation sur les périphériques Installation d une application sur un périphérique Google Android................................................... 194 Installation d une application sur un périphérique Apple ios.......................................................... 194 Chapitre 9 : Création de package et exportation Création du package et exportation d une application mobile vers une boutique en ligne............................. 196 Exportation de packages Android APK pour publication.............................................................. 196 Exportation de packages Apple ios pour publication................................................................. 197 Création, test et déploiement à l aide de la ligne de commande....................................................... 198

1 Chapitre 1 : Prise en main Premiers pas avec les applications mobiles Adobe Flex permet d utiliser Flex et Adobe Flash Builder pour développer des applications pour les smartphones et les tablettes. En tirant profit d Adobe AIR, vous pouvez maintenant développer des applications mobiles dans Flex avec la même aisance et la même qualité que sur les plateformes d ordinateurs de bureau. De nombreux composants Flex existants ont été étendus pour fonctionner sur les périphériques mobiles, y compris l ajout de la prise en charge du défilement tactile. Flex contient également un ensemble de nouveaux composants conçus pour simplifier la création d applications qui suivent les modèles de conception standard pour les téléphones et les tablettes. Flash Builder a également été mis à jour pour fournir de nouvelles fonctionnalités pour la prise en charge du développement d applications pour les périphériques mobiles. Avec Flash Builder, vous pouvez développer, tester et déboguer des applications sur votre ordinateur de bureau ou directement sur votre périphérique mobile. Mark Doherty, spécialiste d Adobe, a publié une vidéo sur la création d applications pour ordinateur, téléphone portable et tablette. James Ward, spécialiste d Adobe, propose une vidéo concernant la création d applications mobiles avec Flex. Joseph Labrecque, professionnel de la communauté Adobe, a publié sur son blog un article présentant Mobile Flex. Fabio Biondi, développeur Flash, a créé un lecteur YouTube basé sur AIR pour les périphériques Android utilisant Flash Builder. Conception d une application mobile En raison de la taille d écran réduite des périphériques mobiles, les applications mobiles sont généralement conçues différemment des applications pour navigateur. Lors du développement d applications mobiles, vous divisez en général le contenu en une série de vues à afficher sur un périphérique mobile. Chaque vue contient les composants qui se rapportent à une tâche individuelle ou qui contiennent un ensemble unique d informations. L utilisateur passe généralement d une vue à l autre pour obtenir plus de détails en appuyant sur les composants d une vue. L utilisateur peut alors utiliser le bouton Retour du périphérique pour retourner à une vue précédente ou intégrer la navigation dans l application. Dans l exemple suivant, la vue initiale de l application montre une liste de produits :

Prise en main 2 A B A. Sélectionnez un élément de liste pour changer les vues dans l application. B. Utilisez le bouton Retour du périphérique pour retourner à la vue précédente. L utilisateur sélectionne un produit dans la liste pour obtenir plus d informations. La sélection change la vue pour afficher une description détaillée du produit. Si vous concevez une application pour les plateformes mobiles, Web et d ordinateurs de bureau, concevez des interfaces utilisateur distinctes pour chaque plateforme. Toutefois, les applications peuvent partager un code d accès au modèle et aux données sous-jacent entre toutes les plateformes. Création d applications pour téléphones et tablettes Pour une application destinée à des tablettes, les limites de taille d écran sont moins contraignantes qu avec les téléphones. Vous n êtes pas tenu de structurer une application de tablette autour de petites vues. A la place, vous pouvez créer l application en utilisant le conteneur Spark Application standard avec les composants et habillages mobiles pris en charge. Remarque : vous pouvez créer une application pour un téléphone mobile basée sur le conteneur Spark Application. Toutefois, vous utilisez généralement les conteneurs ViewNavigatorApplication et TabbedViewNavigatorApplication à la place. Créez un projet mobile dans Flash Builder pour les tablettes comme vous le feriez pour les téléphones. Les applications pour les tablettes et les téléphones requièrent le même thème mobile pour tirer profit des composants et habillages optimisés pour les applications mobiles. Création d applications mobiles dans Flash Builder Flash Builder introduit un flux de travail productif de conception, création et débogage dans le développement mobile. L objectif des fonctionnalités mobiles dans Flash Builder est de rendre le développement d une application mobile basée sur ActionScript ou Flex aussi simple que le développement d une application de bureau ou Web.

Prise en main 3 Flash Builder offre deux options pour les tests et le débogage. Vous pouvez lancer et déboguer l application sur l ordinateur de bureau en utilisant AIR Debug Launcher (ADL). Pour bénéficier d un contrôle plus important, lancez et déboguez l application directement sur un périphérique mobile. Dans les deux cas, vous pouvez utiliser les capacités de débogage de Flash Builder, y compris la définition de points d arrêt et l examen de l état de l application à l aide des volets Variables et Expressions. Lorsque votre application est prête à être déployée, utilisez le processus Exporter vers une version validée, tout comme vous le feriez pour préparer une application de bureau ou Web. La principale différence tient au fait que lorsque vous exportez une version validée d un projet mobile, Flash Builder groupe la version en tant que programme d installation natif et non pas en tant que fichier.air. Par exemple, sur Android, Flash Builder produit un fichier.apk qui ressemble à un package d application Android natif. Le programme d installation natif permet de distribuer les applications AIR de la même façon que les applications natives sur chaque plateforme. Déploiement d applications mobiles dans Flash Builder Déployez des applications mobiles créées dans Flex en utilisant Adobe AIR pour les périphériques mobiles. Tout périphérique sur lequel vous souhaitez déployer une application mobile doit prendre en charge AIR. Vos applications peuvent bénéficier pleinement de l intégration d AIR à la plateforme mobile. Par exemple, une application mobile peut gérer un bouton de retour et de menu matériel et accéder au stockage local. Vous pouvez également bénéficier de toutes les fonctions fournies par AIR pour les périphériques mobiles. Ces fonctions comprennent la géolocalisation, l accéléromètre et l intégration d une caméra. Sur un périphérique mobile, il n est pas nécessaire d installer AIR avant d exécuter une application créée dans Flex. La première fois qu un utilisateur exécute une application créée dans Flex, l utilisateur est invité à télécharger AIR. Pour vous familiariser avec AIR et pour plus d informations sur les fonctionnalités de AIR, consultez les documents suivants : A propos d Adobe AIR Appel et arrêt d une application AIR Utilisation des informations d exécution AIR et du système d exploitation Utilisation des fenêtres natives AIR Utilisation des bases de données SQL locales dans AIR Lors du développement d applications mobiles, vous ne pouvez pas utiliser les composants Flex suivants pour AIR : WindowedApplication et Window. A la place, utilisez les conteneurs ViewNavigatorApplication et TabbedViewNavigatorApplication. Dans le cas du développement d applications destinées à des tablettes, vous pouvez également utiliser le conteneur Spark Application. Pour plus d informations, voir Utilisation des composants Flex AIR et «Définition d une application mobile et d un écran de démarrage» à la page 35. Utilisation du thème Mobile dans votre application Un thème définit l aspect et l ergonomie des composants visuels d une application. Un thème peut simplement définir la palette chromatique ou la police commune d une application, ou peut redéfinir entièrement l habillage de l ensemble des composants utilisés par l application. Vous pouvez définir des styles CSS sur les composants Flex uniquement si le thème actuel comprend ces styles. Pour déterminer si le thème actuel prend en charge le style CSS, affichez l entrée du style dans le Guide de référence ActionScript 3.0 pour la plate-forme Adobe Flash.

Prise en main 4 Flex prend en charge trois thèmes principaux : Mobile, Spark et Halo. Le thème Mobile définit l aspect par défaut des composants Flex lorsque vous créez une application mobile. Afin de rendre certains composants Flex compatibles avec le thème Mobile, Adobe a créé de nouveaux habillages pour les composants. Par conséquent, certains composants ont les habillages spécifiques d un thème. Les applications créées avec Flex peuvent cibler différents périphériques mobiles, chacun présentant des tailles et des résolutions d écran différentes. Flex simplifie le processus de production d applications indépendantes de la résolution en proposant des habillages indépendants des PPP pour les composants mobiles. Pour plus d informations sur les habillages mobiles, voir «Notions de base sur l habillage mobile» à la page 174. Pour plus d informations sur les styles et les thèmes, voir Styles et thèmes et «Styles mobiles» à la page 174. Ressources de la communauté Découvrez les nouvelles fonctions intégrées à Flex et à Flash Builder, dans : Introducing Adobe Flex 4.5 SDK de Deepa Subramaniam, chef de produit chez Adobe. Développement mobile à l aide du SDK Adobe Flex et de Flash Builder de Narciso Jaramillo, concepteur de produit chez Adobe. Nouveautés du SDK Flex 4.6 de Jacob Surber, chef de produit chez Adobe et Nouveautés de Flash Builder 4.6 d Adam Lehman, également chef de produit. Le Pôle de développement Flex contient de nombreuses ressources conçues pour vous aider à développer des applications mobiles à l aide de Flex : Articles, liens et didacticiels de prise en main Exemples d applications réelles créées dans Flex Livre de cuisine Flex Cookbook, qui contient les réponses aux problèmes de codage courants Liens vers la communauté Flex et vers d autres sites dédiés à Flex Adobe TV est une autre ressource, qui contient des vidéos élaborées par des ingénieurs, des experts produit et des clients Adobe sur le développement d applications dans Flex. L une des vidéos disponibles est Création de votre première application mobile dans Flash Builder 4.5. Différences entre le développement d applications mobiles, d ordinateur et de navigateur Utilisez Flex pour développer des applications pour les environnements de déploiement suivants : Navigateur : déployez l application en tant que fichier SWF à utiliser dans Flash Player s exécutant dans un navigateur. Ordinateur : déployez une application AIR autonome pour un ordinateur de bureau, tel qu un ordinateur exécutant Windows ou un Macintosh. Mobile : déployez une application AIR autonome pour un périphérique mobile, tel qu un téléphone ou une tablette. Les environnements d exécution de Flash Player et AIR sont similaires. Vous pouvez effectuer la plupart des opérations dans l un ou l autre des environnements d exécution. AIR vous permet non seulement de déployer des applications autonomes en dehors d un navigateur, mais vous fournit en outre une intégration étroite à la plateforme hôte. Cette intégration permet par exemple d accéder au système de fichiers du périphérique, de créer et d utiliser des bases de données SQL locales, etc.

Prise en main 5 Considérations liées à la conception et au développement d applications mobiles Les applications destinées aux périphériques mobiles à écran tactile diffèrent des applications d ordinateur et de navigateur de plusieurs manières : Pour permettre une manipulation simple par entrée tactile, les composants mobiles disposent généralement de zones actives plus étendues que dans les applications d ordinateur ou de navigateur. Les modèles d interaction pour les actions telles que le défilement sont différents sur les périphériques à écran tactile. En raison de la surface limitée de l écran, les applications mobiles sont conçues en général de façon à présenter à l écran seulement une faible partie de l interface utilisateur à la fois. La conception de l interface utilisateur doit prendre en compte les différences de résolution d écran entre les périphériques. Les performances d UC et d unité GPU sont plus limitées sur les téléphones et les tablettes que sur les périphériques d ordinateur. En raison de la mémoire limitée disponible sur les périphériques mobiles, les applications doivent être soucieuses d économiser la mémoire. Les applications mobiles peuvent être fermées et redémarrées à tout moment, par exemple, lorsque le périphérique reçoit un appel ou un texto. Par conséquent, la création d une application pour un périphérique mobile ne se résume pas au redimensionnement d une application d ordinateur pour un écran de plus petite taille. Flex vous permet de créer différentes interfaces utilisateur appropriées pour chaque facteur de forme, tout en partageant le code d accès au modèle et aux données sous-jacent entre les projets mobiles, de navigateur et d ordinateur. Restrictions liées à l utilisation de Spark et des composants MX dans une application mobile Utilisez le composant Spark défini lors de la création des applications mobiles dans Flex. Les composants Spark sont définis dans les packages spark.components.*. Toutefois, pour des raisons de performance ou parce que tous les composants Spark n ont pas d habillage pour le thème Mobile, les applications mobiles ne prennent pas en charge la totalité des composants Spark. A l exception des contrôles graphiques MX et du contrôle MX Spacer, les applications mobiles ne prennent pas en charge l ensemble de composants MX défini dans les packagesmx.*. Le tableau ci-dessous répertorie les composants que vous pouvez utiliser, que vous ne pouvez pas utiliser ou qui requièrent un soin particulier pour être utilisés dans une application mobile :

Prise en main 6 Composant Composant Utilisation dans une application mobile? Remarques Spark ActionBar Spark BusyIndicator Spark Callout Spark CalloutButton Spark DateSpinner Spark SpinnerList Spark SpinnerListContainer Spark TabbedViewNavigator Spark TabbedViewNavigatorApplicati on Spark ToggleSwitch Spark View Spark ViewMenu Spark ViewNavigator Oui Ces nouveaux composants prennent en charge les applications mobiles. Spark ViewNavigatorApplication Spark Button Spark CheckBox Spark DataGroup Spark Group/HGroup/VGroup/TileGroup Spark Image/BitmapImage Spark Label Spark List Spark RadioButton/RadioButtonGroup Spark SkinnableContainer Spark Scroller Spark TextArea Spark TextInput Oui La plupart de ces composants disposent d habillages pour le thème Mobile. Label, Image et BitmapImage peuvent être utilisés, même s ils ne disposent pas d un habillage mobile. Certains conteneurs de présentation Spark, comme Group et ses sous-classes, n ont pas d habillage. Par conséquent, vous pouvez les utiliser dans une application mobile. Autres composants Spark habillables Déconseillé Les composants Spark habillables autres que ceux figurant dans la liste ci-dessus sont déconseillés car ils n ont pas d habillage pour le thème Mobile. Si le composant n a pas d habillage pour le thème Mobile, vous pouvez en créer un pour votre application. Spark DataGrid Spark RichEditableText Spark RichText Déconseillé Ces composants sont déconseillés pour des raisons de performance. Même si vous pouvez les utiliser dans une application mobile, cela risque d affecter les performances. En ce qui concerne le contrôle DataGrid, les performances sont basées sur la quantité de données dont vous effectuez le rendu. Quant aux contrôles RichEditableText et RichText, leur performance est basée sur la quantité de texte et sur le nombre de contrôles présents dans l application.

Prise en main 7 Composant Composant Utilisation dans une application mobile? Remarques Composants MX autres que Spacer et les graphiques Non Les applications mobiles ne prennent pas en charge les composants MX tels que MX Button, CheckBox, List ou DataGrid. Ces composants correspondent aux composants Flex 3 dans les packages mx.controls.* et mx.containers.*. MX Spacer Oui Spacer n utilise pas d habillage, de sorte qu il peut être utilisé dans une application mobile. Composants graphiques MX Oui, mais avec des implications pour les performances. Vous pouvez utiliser les contrôles graphiques MX, tels que AreaChart et BarChart, dans une application mobile. Les contrôles graphiques MX sont dans les packages mx.charts.*. Toutefois, leurs performances sur un périphérique mobile peuvent être amoindries selon la taille et le type des données graphiques. Par défaut, Flash Builder n inclut pas les composants MX dans le chemin d accès aux bibliothèques des projets mobiles. Pour utiliser les composants graphiques MX dans une application, ajoutez les fichiers mx.swc et charts.swc à votre chemin d accès à la bibliothèque. Les fonctionnalités Flex ci-dessous ne sont pas prises en charge dans les applications mobiles : Pas de prise en charge des opérations de glisser-déposer. Pas de prise en charge du contrôle ToolTip. Pas de prise de charge des bibliothèques RSL. Considérations liées aux performances avec les applications mobiles En raison des contraintes de performances qui pèsent sur les périphériques mobiles, certains aspects du développement d applications mobiles diffèrent de ceux du développement d applications de navigateur et d ordinateur. Les considérations liées aux performances comprennent : Rédaction des rendus d élément en ActionScript Pour les applications mobiles, le défilement dans les listes doit être aussi performant que possible. Rédigez des rendus d élément en ActionScript pour bénéficier de performances optimales. Il est possible de rédiger les rendus d élément en MXML, mais les performances de vos applications peuvent en souffrir. Flex fournit deux rendus d élément qui sont optimisés à utiliser dans une application mobile : spark.components.labelitemrenderer et spark.components.iconitemrenderer. Pour plus d informations sur ces rendus d élément, voir Using a mobile item renderer with a Spark list-based control. Pour plus d informations sur la création de rendus d élément personnalisés en ActionScript, voir Custom Spark item renderers. Pour plus d informations sur les différences entre les rendus d élément mobiles et de bureau, voir Differences between mobile and desktop item renderers.

Prise en main 8 Utilisation d ActionScript et de graphiques FXG compilés ou de bitmaps pour développer des habillages personnalisés Les habillages mobiles livrés avec Flex sont écrits en ActionScript avec des graphiques FXG compilés afin d offrir des performances optimales. Vous pouvez rédiger les habillages en MXML, mais les performances de votre application peuvent en souffrir, selon le nombre de composants qui utilisent les habillages MXML. Pour des performances optimales, rédigez les habillages en ActionScript et utilisez des graphiques FXG compilés. Pour plus d informations, voir Habillage Spark et Graphiques FXG et MXML. Utilisation de composants d entrée de texte utilisant StageText Utilisez les paramètres par défaut lorsque vous utilisez des composants d entrée de texte du type de TextInput ou TextArea. Ces contrôles utilisent StageText comme mécanisme sous-jacent à la saisie de texte, il vient se connecter aux classes d entrée de texte natives. Vous profitez ainsi de performances accrues et d un accès aux fonctions natives, telles que la correction automatique, la mise en majuscules automatique, la restriction du texte ainsi que les claviers logiciels personnalisés. L utilisation de StageText présente certains inconvénients, comme l impossibilité de faire défiler la vue dans laquelle se trouve les contrôles. Il ne vous est pas non plus possible d utiliser des polices intégrées ou d attribuer des dimensions personnalisées aux contrôles basés sur StageText. Si nécessaire, vous pouvez utiliser des contrôles d entrée de texte basés sur la classe TextField. Pour plus d informations, voir «Utilisation de texte dans une application mobile» à la page 147. Soyez prudent lorsque vous utilisez des composants graphiques MX dans une application mobile. Vous pouvez utiliser les contrôles graphiques MX, tels que les contrôles AreaChart et BarChart, dans une application mobile. Toutefois, ils peuvent nuire aux performances selon la taille et le type des données graphiques. Le blogueur Nahuel Foronda a rédigé une série d articles sur Mobile ItemRenderer en ActionScript. Le blogueur Rich Tretola a créé une entrée de cookbook sur la création d une liste avec un élément ItemRenderer pour une application mobile.

9 Chapitre 2 : Environnement de développement Création d une application Android dans Flash Builder Voici un flux de travail général permettant de créer une application Flex mobile pour la plateforme Google Android. Ce flux de travail suppose que vous avez déjà conçu votre application mobile. Pour plus d informations, voir «Conception d une application mobile» à la page 1. L expert Adobe, Mike Jones, partage certains des enseignements qu il a pu tirer du développement de son jeu multi-plateforme, Mode, et il vous donne 10 conseils à utiliser dans le développement multi-plateforme. Exigences liées à AIR Les projets Flex et ActionScript mobiles requièrent AIR 2.6 ou version supérieure. Les projets mobiles peuvent être exécutés sur des périphériques physiques prenant en charge AIR 2.6 ou version supérieure. Vous pouvez installer AIR 2.6 ou version supérieure uniquement sur les périphériques Android pris en charge exécutant Android 2.2 ou version supérieure. Pour obtenir la liste complète des périphériques Android pris en charge, voir Certified Devices. Consultez également la configuration minimale requise pour exécuter Adobe AIR sur les périphériques Android à la page Configuration requise. Remarque : si vous ne disposez pas d un périphérique prenant en charge AIR 2.6 ou version supérieure, vous pouvez utiliser Flash Builder pour lancer et déboguer des applications mobiles sur le bureau. Chaque version du SDK Flex inclut la version requise d Adobe AIR. Si vous avez installé des applications mobiles sur un périphérique exécutant une version antérieure du SDK Flex, désinstallez AIR du périphérique. Flash Builder installe la version correcte d AIR lorsque vous exécutez ou déboguez une application mobile sur un périphérique.

Environnement de développement 10 Création d une application 1 Dans Flash Builder, sélectionnez Fichier > Nouveau > Projet Flex Mobile. Un projet Flex Mobile est un type particulier de projet AIR. Suivez les invites de l assistant de nouveau projet comme vous le feriez pour tout autre projet AIR dans Flash Builder. Pour plus d informations, voir Projets Flex mobiles. Pour définir des préférences mobiles spécifiques à Android, voir «Définition des préférences de projet mobile» à la page 15. Lorsque vous créez un projet Flex Mobile, Flash Builder génère les fichiers suivants pour le projet : ProjectName.mxml Le fichier d application par défaut pour le projet. Par défaut, Flash Builder attribue à ce fichier le même nom qu au projet. Si le nom du projet contient des caractères non autorisés par ActionScript, Flash Builder nomme ce fichier Main.mxml. Le fichier MXML contient la balise Spark Application de base du projet. La balise Spark Application peut être ViewNavigatorApplication ou TabbedViewNavigatorApplication. Généralement, vous n ajoutez pas directement de contenu au fichier d application par défaut, à l exception du contenu ActionBar affiché dans toutes les vues. Pour ajouter du contenu au contrôle ActionBar, définissez les propriétés navigatorcontent, titlecontent ou actioncontent. ProjectNameHomeView.mxml Le fichier représentant la vue initiale du projet. Flash Builder place le fichier dans un package de vues. L attribut firstview de la balise ViewNavigatorApplication dans ProjectName.mxml spécifie ce fichier comme vue d ouverture par défaut de l application. Pour plus d informations sur la définition des vues, voir «Définition de vues dans une application mobile» à la page 41. Vous pouvez aussi créer un projet mobile uniquement en ActionScript. Voir «Création d un projet ActionScript mobile» à la page 12. 2 (Facultatif) Ajoutez du contenu au contrôle ActionBar du fichier d application principal. Le contrôle ActionBar affiche le contenu et les fonctionnalités qui s appliquent à l application ou à la vue actuelle de l application. Ajoutez ici le contenu que vous souhaitez afficher dans toutes les vues de l application. Voir «Définition de contrôles de navigation, de titre et d action dans une application mobile» à la page 62. 3 Disposez le contenu de la vue initiale de votre application. Utilisez Flash Builder en mode Création ou en mode Source pour ajouter des composants à une vue. Utilisez uniquement des composants pris en charge par Flash pour le développement mobile. En mode Création comme en mode Source, Flash Builder vous guide dans l utilisation des composants pris en charge. Voir «Interface utilisateur et présentation» à la page 26 Dans la vue, ajoutez du contenu au contrôle ActionBar qui n est visible que dans cette vue. 4 (Facultatif) Ajoutez toutes les vues que vous souhaitez inclure dans votre application. Dans l Explorateur de packages Flash Builder, sous le menu contextuelle correspondant au package de vues de votre projet, sélectionnez Nouveau composant MXML. L assistant Nouveau composant MXML vous guide lors de la création de la vue. Pour plus d informations sur les vues, voir «Définition de vues dans une application mobile» à la page 41.

Environnement de développement 11 5 (Facultatif) Ajoutez des rendus d élément optimisés pour les applications mobiles pour les composants List. Adobe fournit IconItemRenderer, un rendu d élément basé sur ActionScript à utiliser avec les applications mobiles. Voir Using a mobile item renderer with a Spark list-based control. 6 Configurez les configurations de lancement pour exécuter et déboguer l application. Vous pouvez exécuter ou déboguer l application sur l ordinateur ou sur un périphérique. Une configuration de lancement est requise pour exécuter ou déboguer une application à partir de Flash Builder. La première fois que vous exécutez ou déboguez une application mobile, Flash Builder vous invite à configurer une configuration de lancement. Lors de l exécution ou du débogage d une application mobile sur un périphérique, Flash Builder installe l application sur le périphérique. Voir «Test et débogage» à la page 188. 7 Exportez l application en tant que package d installation. Utilisez Exporter vers une version validée pour créer des packages qui pourront être installés sur des périphériques mobiles. Flash Builder crée des packages pour la plateforme sélectionnée pour l exportation. Voir «Exportation de packages Android APK pour publication» à la page 196. Brent Arnold, expert Flex certifié par Adobe, a conçu les didacticiels vidéos suivants pour vous permettre de : Créer une application Flex mobile avec plusieurs vues Créer une application Flex mobile à l aide d un contrôle de listes utilisant Spark Création d une application ios dans Flash Builder Voici un flux de travail général permettant de créer une application mobile destinée à la plateforme Apple ios. 1 Avant de commencer à créer l application, veillez à suivre la procédure indiquée dans «Processus de développement Apple ios à l aide de Flash Builder» à la page 21. 2 Dans Flash Builder, sélectionnez Fichier > Nouveau > Projet Flex Mobile. Sélectionnez la plateforme cible Apple ios et définissez les paramètres du projet mobile. Suivez les invites de l assistant de nouveau projet comme vous le feriez dans tout autre assistant de création de projets dans Flash Builder. Pour plus d informations, voir «Création d une application» à la page 10. Vous pouvez aussi créer un projet mobile uniquement en ActionScript. Pour plus d informations, voir Création de projets ActionScript mobiles. 3 Configurez les configurations de lancement pour exécuter et déboguer l application. Vous pouvez exécuter ou déboguer l application sur l ordinateur ou sur un périphérique connecté. Pour plus d informations, voir «Débogage d une application sur un périphérique Apple ios» à la page 192. 4 Exportez l application vers l App Store d Apple ou déployez l application de package ios (IPA) sur un périphérique. Pour plus d informations, voir «Exportation de packages Apple ios pour publication» à la page 197 et «Installation d une application sur un périphérique Apple ios» à la page 194. Voir aussi Création d une application mobile (vidéo)

Environnement de développement 12 Création d une application BlackBerry Tablet OS dans Flash Builder Flash Builder comprend un plug-in de Research In Motion (RIM) qui permet de créer des applications Flex et ActionScript et leur package pour BlackBerry Tablet OS. Création d une application Voici un flux de travail général permettant de créer des applications pour BlackBerry Tablet OS. 1 Avant de commencer à créer une application mobile, installez le SDK BlackBerry Tablet OS pour AIR depuis le site de développement d applications BlackBerry Tablet OS. Le SDK BlackBerry Tablet OS pour AIR fournit des API qui permettent de créer des applications Flex et ActionScript basées sur AIR. Pour plus d informations sur l installation du SDK BlackBerry Tablet OS, voir le guide de prise en main de BlackBerry Tablet OS. 2 Pour créer une application AIR basée sur Flex, dans Flash Builder, sélectionnez Fichier > Nouveau > Projet Flex Mobile. Suivez les invites de l assistant de nouveau projet comme vous le feriez pour tout autre projet AIR dans Flash Builder. Veillez à sélectionner BlackBerry Tablet OS comme plateforme cible. Pour plus d informations, voir Projets Flex mobiles. 3 Pour créer une application AIR basée sur ActionScript, dans Flash Builder, sélectionnez Fichier > Nouveau > Projet ActionScript Mobile. Suivez les invites de l assistant de nouveau projet comme vous le feriez pour tout autre projet AIR dans Flash Builder. Veillez à sélectionner BlackBerry Tablet OS comme plateforme cible. Pour plus d informations, voir Création de projets mobiles ActionScript. Signature, création de package et déploiement d une application Pour plus d informations sur la signature, la création de package et le déploiement de l application, voir le guide de développement du SDK BlackBerry Tablet OS pour Adobe AIR publié par RIM. Vous trouverez des ressources supplémentaires sur le développement BlackBerry Tablet OS provenant d Adobe et de RIM sur la page Adobe Developer Connection. Création d un projet ActionScript mobile Utilisez Flash Builder pour créer une application ActionScript mobile. L application que vous créez est basée sur l API d Adobe AIR. 1 Sélectionnez Fichier > Nouveau > Projet ActionScript mobile. 2 Entrez un nom de projet et un emplacement. L emplacement par défaut est l espace de travail actuel. 3 Utilisez le SDK Flex 4.6 par défaut qui prend en charge le développement d applications mobiles. Cliquez sur Suivant.

Environnement de développement 13 4 Sélectionnez les plateformes cibles pour votre application et spécifiez les paramètres de projet mobile pour chaque plateforme. Pour plus d informations sur les paramètres de projet mobile, voir «Définition des préférences de projet mobile» à la page 15. 5 Cliquez sur Terminer ou sur Suivant pour indiquer d autres options de configuration et chemins de génération. Pour plus d informations sur les options de configuration de projet et les chemins de génération, voir Chemins de génération, extensions natives et autres options de configuration du projet. Utilisation d extensions natives Les extensions natives vous permettent d intégrer des fonctions de plateforme native dans votre application mobile. Une extension native contient des classes ActionScript ainsi que du code natif. L implémentation de code natif vous permet d accéder aux fonctions spécifiques au périphérique qui sont inaccessibles au travers de classes ActionScript pures. Par exemple, l accès à la fonction de vibration du périphérique. L implémentation de code natif peut être définie comme le code s exécutant à l extérieur de l environnement d exécution AIR. Vous définissez l implémentation de code natif et les classes ActionScript spécifiques à la plateforme dans l extension. Les classes de l extension ActionScript accèdent aux données et en échangent avec le code natif à l aide de la classe ActionScript ExtensionContext. Les extensions sont spécifiques à la plateforme matérielle d un périphérique. Vous avez la possibilité de créer des extensions spécifiques pour chaque plateforme ou de créer une extension unique ciblant plusieurs plateformes. Vous pouvez, par exemple, créer une extension native ciblant les plateformes Android et ios. Les extensions natives sont prises en charge par les périphériques mobiles suivants : Périphériques Android exécutant Android 2.2 ou version ultérieure Périphériques ios exécutant ios 4.0 ou version ultérieure Pour plus d informations sur la création des extensions natives multi-plateformes, voir Developing Native Extensions for Adobe AIR. Pour consulter un ensemble d exemples d extensions natives, partagés par Adobe et la communauté, voir Extensions natives pour Adobe AIR. Création de package d extension native Pour fournir votre extension native aux développeurs d applications, il vous faut créer un package de tous les fichiers nécessaires sous la forme d un fichier ANE (ActionScript Native Extension) en suivant la procédure suivante : 1 Générez la bibliothèque ActionScript de l extension dans un fichier SWC. 2 Générez les bibliothèques natives de l extension. Dans le cas où l extension doit prendre en charge différentes plateformes, générez une bibliothèque pour chacune des plateformes cibles. 3 Créez un certificat signé pour votre extension. Si celle-ci n est pas signée, Flash Builder affiche un avertissement lorsque vous ajoutez l extension à votre projet. 4 Créez un fichier descripteur d extension. 5 Incluez éventuellement des ressources externes pour l extension, telles que des images. 6 Créez le package d extension à l aide de l outil Air Developer (ADT). Pour plus d informations, voir la documentation d AIR.

Environnement de développement 14 Pour plus d informations sur la création de package d extensions natives multi-plateformes, voir Developing Native Extensions for Adobe AIR. Ajout d extensions natives à un projet Vous pouvez inclure un fichier ANE (ActionScript Native Extension) dans le chemin d accès à la génération du projet de la même façon que vous incluez un fichier SWC. 1 Lors de la création d un projet Flex Mobile dans Flash Builder, sélectionnez l onglet Extensions natives au niveau de la page de paramètres Chemins d accès à la génération. Il vous est également possible d ajouter des extensions à partir de la boîte de dialogue Propriétés du projet en sélectionnant Chemin d accès à la génération Flex. 2 Accédez au fichier ANE ou au dossier contenant les fichiers ANE à ajouter au projet. Lors de l ajout d un fichier ANE, l ID d extension est ajouté au fichier descripteur de l application du projet (Nom du projet-app.xml) par défaut. Flash Builder affiche un symbole d erreur pour l extension ajoutée dans les cas suivants : La version de l environnement d exécution AIR est postérieure à la version de l environnement d exécution de l application. L extension n inclut pas toutes les plateformes sélectionnées qui sont ciblées par l application. Remarque : vous pouvez créer une extension native ActionScript ciblant plusieurs plateformes. Pour tester une application incluant ce fichier ANE sur votre ordinateur de développement à l aide du simulateur AIR, assurez-vous que le fichier ANE prend en charge la plateforme de l ordinateur. Par exemple, pour tester l application sous Windows à l aide du simulateur AIR, assurez-vous que le fichier ANE prend en charge Windows. Inclusion des extensions natives ActionScript dans un package d application Lorsque vous utilisez la fonction Exporter vers une version validée pour exporter l application mobile, par défaut les extensions utilisées dans le projet sont incluses. Suivez la procédure suivante pour modifier la sélection par défaut : 1 Dans la boîte de dialogue Exporter une version validée, sélectionnez l onglet Extensions natives sous Paramètres de groupement. 2 Les fichiers d extensions natives ActionScript référencés dans votre projet sont répertoriés, indiquant si le fichier ANE est utilisé dans le projet ou non. Si le fichier ANE est utilisé dans le projet, il est sélectionné par défaut dans le package de l application. S il est inclus dans le projet sans être utilisé, le compilateur ne reconnaît alors pas le fichier ANE. Il n est dans ce cas pas inclus dans le package de l application. Pour inclure le fichier ANE dans le package de l application, procédez comme suit : a b Dans la boîte de dialogue Propriétés du projet, sélectionnez Paquet de génération Flex, puis sélectionnez la plateforme requise. Sélectionnez les extensions que vous souhaitez inclure dans le package de l application. Prise en charge des extensions natives ios5 Afin de créer des packages d extensions natives tirant parti des fonctionnalités du SDK ios5, l outil ADT (AIR Developer Tool) doit connaître l emplacement du SDK ios5.

Environnement de développement 15 Sous Mac OS, Flash Builder vous permet de sélectionner l emplacement du SDK ios5 dans la boîte de dialogue Paramètres de groupement. Une fois l emplacement du SDK ios sélectionné, il est ensuite transmis à l aide de la commande -platformsdk de l outil ADT. Remarque : cette fonctionnalité n est actuellement pas prise en charge sous Windows. Pour plus d informations, voir Developing Native Extensions for Adobe AIR. Définition des préférences de projet mobile Définition des configurations de périphériques Flash Builder utilise des configurations de périphériques pour afficher des aperçus des tailles d écran des périphériques dans la vue Création, ou pour lancer des applications sur l ordinateur à l aide d AIR Debug Launcher (ADL). Voir «Configuration des informations du périphérique pour un aperçu sur l ordinateur» à la page 189. Pour définir des configurations de périphériques, ouvrez la fenêtre Préférences et sélectionnez Flash Builder > Configuration des périphériques. Flash Builder fournit plusieurs configurations de périphérique par défaut. Vous pouvez ajouter, modifier ou supprimer des configurations de périphérique supplémentaires. Vous ne pouvez pas modifier les configurations par défaut fournies par Flash Builder. Cliquez sur le bouton Restaurer les valeurs par défaut pour rétablir les configurations de périphériques par défaut, sans supprimer les configurations que vous avez ajoutées. De plus, si vous avez ajouté une configuration de périphérique avec un nom correspondant à celui d une configuration par défaut, Flash Builder remplace la configuration ajoutée par les paramètres par défaut. Les configurations de périphérique contiennent les propriétés suivantes : Propriété Nom du périphérique Plateforme Taille plein écran Taille d écran utilisable Pixels par pouce Description Nom unique du périphérique. Plateforme du périphérique. Sélectionnez une plateforme dans la liste des plateformes prises en charge. Largeur et hauteur de l écran du périphérique. Taille standard d une application sur le périphérique. Il s agit de la taille prévue d une application lancée en mode non-plein écran, en tenant compte du dispositif chrome du système, comme la barre d état. Pixels par pouce sur l écran du périphérique. Choix des plateformes cibles Flash Builder prend en charge les plateformes cibles en fonction du type d application. Pour sélectionner une plateforme, ouvrez la fenêtre Préférences et sélectionnez Flash Builder > Plateformes cibles. Pour tous les plug-ins tiers, reportez-vous à la documentation correspondante. Choix d un modèle d application Lorsque vous créez une application mobile, vous pouvez faire un choix parmi les modèles d application suivants : Vide : utilise la balise Spark Application en tant qu élément d application de base.

Environnement de développement 16 Utilisez cette option pour créer une application personnalisée sans utiliser la navigation standard dans les vues. Application basée sur une vue : utilise la balise Spark ViewNavigatorApplication en tant qu élément d application de base pour créer une application dotée d une vue unique. Vous pouvez spécifier le nom de la vue initiale. Application à onglets : utilise la balise Spark TabbedViewNavigatorApplication comme élément d application de base pour créer une application basée sur des onglets. Pour ajouter un onglet, saisissez le nom de l onglet et cliquez sur Ajouter. Vous pouvez modifier l ordre des onglets en cliquant sur Haut et Bas. Pour supprimer un onglet d une application, sélectionnez un onglet et cliquez sur Supprimer. Le nom de la vue correspond au nom de l onglet auquel est ajouté le mot «View». Par exemple, si vous nommez un onglet FirstTab, Flash Builder génère une vue nommée FirstTabView. Pour chaque onglet que vous créez, un nouveau fichier MXML est généré dans le package «Views». Remarque : le nom du package n est pas configurable à l aide de l assistant Projet Flex Mobile. Les fichiers MXML sont générés conformément aux règles suivantes : Si le nom de l onglet est un nom de classe ActionScript valide, Flash Builder génère le fichier MXML en ajoutant le suffixe «View» au nom de l onglet. Si le nom de l onglet n est pas un nom de classe valide, Flash Builder modifie le nom de l onglet en supprimant les caractères non valides et en insérant des caractères initiaux valides. Si le nom modifié n est pas acceptable, Flash Builder modifie le nom de fichier MXML en le remplaçant par «ViewN», où N correspond à la position de la vue, en commençant par N=1. Brent Arnold, expert Flex certifié par Adobe, a créé un didacticiel vidéo sur l utilisation du modèle d application à onglets. Choix des autorisations d une application mobile Lorsque vous créez une application mobile, vous pouvez spécifier ou modifier les droits par défaut d une plateforme cible. Les autorisations sont spécifiées au moment de la compilation et ne peuvent pas être modifiées dans l environnement d exécution. Commencez par sélectionner la plateforme cible, puis définissez les autorisations pour chaque plateforme, le cas échéant. Vous pourrez modifier les autorisations par la suite dans le fichier XML descripteur de l application. Des plug-ins tiers fournissent une prise en charge de plateformes supplémentaires pour les projets Flex et ActionScript. Pour les autorisations spécifiques aux plateformes, reportez-vous à la documentation du périphérique. Autorisations pour la plateforme Google Android Pour la plateforme Google Android, vous pouvez définir les autorisations suivantes : INTERNET : autorise les demandes réseau et le débogage à distance. L autorisation INTERNET est sélectionnée par défaut. Si vous désélectionnez ce droit, vous ne pouvez pas déboguer votre application sur un périphérique. WRITE_EXTERNAL_STORAGE : autorise l écriture sur un périphérique externe. Sélectionnez ce droit pour permettre à l application d écrire sur une carte mémoire externe du périphérique. READ_PHONE_STATE : coupe le son au cours d un appel entrant.

Environnement de développement 17 Sélectionnez ce droit pour permettre à l application de couper le son au cours des appels téléphoniques. Par exemple, vous pouvez sélectionner ce droit si votre application lit les sons en arrière-plan. ACCESS_FINE_LOCATION : autorise l accès à un emplacement GPS. Sélectionnez ce droit pour permettre à l application d accéder aux données GPS à l aide de la classe Geolocation. DISABLE_KEYGUARD and WAKE_LOCK : interdit la mise en veille du périphérique. Sélectionnez ce droit pour empêcher le périphérique de se mettre en veille à l aide des paramètres de la classe SystemIdleMode. CAMERA : permet d accéder à une caméra. Sélectionnez ce droit pour permettre à l application d accéder à une caméra. RECORD_AUDIO : permet d accéder à un microphone. Sélectionnez ce droit pour permettre à l application d accéder à un microphone. ACCESS_NETWORK_STATE and ACCESS_WIFI_STATE : autorise l accès aux informations concernant les interfaces réseau associées au périphérique. Sélectionnez ce droit pour permettre à l application d accéder aux informations réseau à l aide de la classe NetworkInfo. Pour plus d informations sur la définition des propriétés des applications mobiles, voir la Documentation Adobe AIR. Autorisations pour la plateforme Apple ios La plateforme Apple ios utilise la validation dans l environnement d exécution pour les autorisations au lieu des autorisations prédéfinies. En d autres termes, si une application souhaite accéder à une fonction spécifique de la plateforme Apple ios qui requiert des droits d utilisateur, une fenêtre contextuelle apparaît, demandant l autorisation. Choix des paramètres de plateforme Les paramètres de plateforme vous permettent de sélectionner une gamme de périphériques cibles. Selon la plateforme sélectionnée, vous pouvez choisir le périphérique cible ou une gamme de périphériques cibles. Vous pouvez sélectionner un périphérique spécifique ou tous les périphériques pris en charge par la plateforme. Des plug-ins tiers fournissent une prise en charge de plateformes supplémentaires pour les projets Flex et ActionScript. Pour les autorisations spécifiques aux plateformes, reportez-vous à la documentation du périphérique. Paramètres de plateforme pour la plateforme Google Android il n existe pas de paramètres spécifiques à la plateforme Google Android. Paramètres de plateforme pour la plateforme Apple ios Pour un projet Flex mobile ou un projet ActionScript mobile, vous pouvez spécifier les périphériques cibles suivants pour la plateforme Apple ios : iphone/ipod Touch : les applications utilisant cette gamme cible sont répertoriées comme compatibles uniquement avec les périphériques iphone et ipod Touch dans l App Store d Apple. ipad : les applications utilisant cette gamme cible sont répertoriées comme compatibles uniquement avec les périphériques ipad dans l App Store d Apple. Tous : les applications utilisant cette gamme cible sont répertoriées comme compatibles avec les périphériques iphone/ipod Touch et ipad dans l App Store d Apple. Il s agit de l option par défaut.

Environnement de développement 18 Choix des paramètres d application Réorientation automatique : fait pivoter l application lorsque l utilisateur tourne le périphérique. Lorsque ce paramètre n est pas activé, votre application apparaît toujours dans la même orientation. Plein écran : affiche l application en mode plein écran sur le périphérique. Lorsque ce paramètre est activé, la barre d état du périphérique n apparaît pas au-dessus de l application. Votre application remplit tout l écran. Si vous souhaitez cibler votre application vers plusieurs types de périphériques aux densités d écran variables, sélectionnez Redimensionner automatiquement l application pour différentes densités d écran. La sélection de cette option redimensionne automatiquement l application et gère les changements de densité des périphériques, le cas échéant. Voir «Définition du redimensionnement d application» à la page 18. Définition du redimensionnement d application Vous utilisez le redimensionnement d application mobile pour créer une application mobile unique compatible avec des périphériques de taille d écran et de densité différentes. Les écrans des périphériques mobiles possèdent des densités d écran, ou valeurs PPP(points par pouce), variables. Vous pouvez spécifier une valeur de PPP de 160, 240 ou 320, selon la densité d écran du périphérique cible. Lorsque vous activez le redimensionnement automatique, Flex optimise la façon dont il affiche l application pour la densité d écran de chaque périphérique. Par exemple, supposez que vous spécifiez une valeur PPP cible de 160 et activez le redimensionnement automatique. Lorsque vous exécutez l application sur un périphérique doté d une valeur PPP de 320, Flex redimensionne automatiquement l application par un facteur 2. En d autres termes, Flex agrandit tout de 200 %. Pour spécifier la valeur PPP cible, définissez-la comme propriété applicationdpi de la balise <s:viewnavigatorapplication> ou <s:tabbedviewnavigatorapplication> dans le fichier de l application principale : <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.homeview" applicationdpi="160"> Si vous choisissez de ne pas utiliser le redimensionnement automatique de votre application, vous devez gérer manuellement les changements de densité pour votre présentation, selon les besoins. Toutefois, Flex adapte les habillages à la densité de chaque périphérique. Pour plus d informations sur la création d applications mobiles indépendantes de la densité, voir «Prise en charge de plusieurs tailles d écran et valeurs PPP dans une application mobile» à la page 132 Connexion des périphériques Google Android Vous pouvez connecter un périphérique Google Android à votre ordinateur de développement pour visualiser ou déboguer l application sur le périphérique Android. Périphériques Android pris en charge Les projets mobiles Flex et ActionScript requièrent AIR 2.6 ou version supérieure. Il vous est possible d exécuter et de déboguer les projets mobiles uniquement sur des périphériques physiques prenant en charge AIR 2.6 ou version supérieure.

Environnement de développement 19 AIR 2.6 peut être installé sur les périphériques Android pris en charge exécutant Android 2.2 ou version supérieure. Pour obtenir la liste des périphériques pris en charge, voir http://www.adobe.com/flashplatform/certified_devices/. Consultez également la configuration minimale requise pour exécuter Adobe AIR sur les périphériques Android à la page Configuration requise. Configuration de périphériques Android Pour exécuter et déboguer les applications Flex mobiles à partir d un périphérique Android, activez le débogage USB comme indiqué ci-dessous : 1 Sur le périphérique, procédez comme suit pour vous assurer que le débogage USB est activé : a b c Appuyez sur le bouton Accueil pour afficher l écran d accueil. Accédez à Paramètres, puis sélectionnez Applications > Développement. Activez le débogage USB. 2 Connectez le périphérique à votre ordinateur à l aide d un câble USB. 3 Développez la zone de notification située en haut de l écran. Vous devez voir une indication de type USB connecté ou Connexion USB. a b c Appuyez sur USB connecté ou sur Connexion USB. Si un ensemble d options apparaît, parmi lesquelles le mode Charge seulement, sélectionnez le mode Charge seulement et appuyez sur OK. Si vous voyez un bouton permettant de désactiver le mode stockage de masse, cliquez dessus pour désactiver le stockage de masse. 4 (Windows uniquement) Installez le pilote USB approprié à votre périphérique. Voir «Installation des pilotes de périphérique USB pour les périphériques Android (Windows)» à la page 19. 5 Développez la zone de notification située en haut de l écran. Si le débogage USB n apparaît pas parmi les entrées, vérifiez le mode USB comme décrit à l étape 3 ci-dessus. Assurez-vous que le mode USB n est pas défini sur Mode PC. Remarque : une configuration supplémentaire est nécessaire pour le débogage. Voir «Test et débogage d une application mobile sur un périphérique» à la page 189. Installation des pilotes de périphérique USB pour les périphériques Android (Windows) Pilotes de périphérique et configurations Les plateformes Windows requièrent l installation d un pilote USB pour connecter un périphérique Android à votre ordinateur de développement. Flash Builder fournit un pilote de périphérique et une configuration pour plusieurs périphériques Android. Ces configurations de pilotes de périphérique sont répertoriées dans le fichier android_winusb.inf. Windows Device Manager accède à ce fichier au cours de l installation du pilote de périphérique. Flash Builder installe android_winusb.inf à l emplacement suivant : <Adobe Flash Builder 4.6 Home>\utilities\drivers\android\android_winusb.inf

Environnement de développement 20 Pour obtenir la liste complète des périphériques pris en charge, voir Périphériques certifiés. Dans le cas de périphériques Android ne figurant pas dans la liste, vous pouvez mettre à jour le fichier android_winusb.inf afin d y ajouter les pilotes USB. Voir «Ajout de configurations de pilotes de périphérique USB Android» à la page 20. Installation d un pilote de périphérique USB 1 Connectez votre périphérique Android au port USB de votre ordinateur. 2 Accédez à l emplacement suivant : <Flash Builder>/utilities/drivers/android/ Installez le pilote USB à l aide de l Assistant Ajout de nouveau matériel détecté de Windows ou du Gestionnaire de périphériques Windows. Important : si Windows ne reconnaît toujours pas le périphérique, vous devez installer le pilote USB approprié disponible auprès du fabricant du périphérique. Voir la page relative aux fabricants de pilotes USB pour obtenir des liens vers les sites Web de plusieurs fabricants de périphériques depuis lesquels vous pouvez télécharger le pilote USB approprié pour votre périphérique. Ajout de configurations de pilotes de périphérique USB Android Si vous avez un périphérique Android pris en charge qui ne figure pas dans la section «Installation des pilotes de périphérique USB pour les périphériques Android (Windows)» à la page 19, mettez à jour le fichier android_winusb.inf pour inclure le périphérique. 1 Branchez le périphérique à un port USB de votre ordinateur. Windows vous indique que le pilote est introuvable. 2 A l aide du Gestionnaire de périphériques Windows, ouvrez l onglet Détails des propriétés du périphérique. 3 Sélectionnez la propriété ID de matériel pour afficher l ID du matériel. 4 Ouvrez le fichier android_winusb.inf dans un éditeur de texte. Recherchez android_winusb.inf à l emplacement suivant : <Adobe Flash Builder 4.6 Home>\utilities\drivers\android\android_winusb.inf 5 Notez les éléments qui apparaissent dans le fichier relatif à votre architecture : [Google.NTx86] ou [Google.NTamd64]. Les listes contiennent un commentaire descriptif et une ou plusieurs lignes dotées de l ID de matériel, comme cela est illustré ici :... [Google.NTx86] ; HTC Dream %CompositeAdbInterface% = USB_Install, USB\VID_0BB4&PID_0C02&MI_01... 6 Copiez et collez un commentaire et une description de matériel. Pour le pilote de périphérique que vous souhaitez ajouter, modifiez la liste comme suit : a Pour le commentaire, indiquez le nom du périphérique. b Remplacez l ID de matériel par celui qui a été identifié à l étape 3 ci-dessus. Par exemple :... [Google.NTx86] ; NEW ANDROID DEVICE %CompositeAdbInterface%... = USB_Install, NEW HARDWARE ID

Environnement de développement 21 7 Utilisez le gestionnaire de périphériques Windows pour installer le périphérique, comme décrit dans «Installation des pilotes de périphérique USB pour les périphériques Android (Windows)» à la page 19 ci-dessus. Au cours de l installation, Windows affiche un avertissement indiquant que le pilote provient d un éditeur inconnu. Toutefois, le pilote permet à Flash Builder d accéder à votre périphérique. Processus de développement Apple ios à l aide de Flash Builder Avant de développer une application ios dans Flash Builder, il est essentiel de comprendre le processus de développement ios et de savoir comment obtenir les certificats requis auprès d Apple. Vue d ensemble du processus de développement et de déploiement pour ios Le tableau suivant fournit la liste des étapes constituant le processus de développement pour ios, ainsi que des informations sur la manière d obtenir les certificats requis et les prérequis de chaque étape. Pour plus d informations sur chacune de ces étapes, voir «Préparation à la génération, au débogage et au déploiement d une application ios» à la page 22. N d étape Etape Emplacement Prérequis 1. Inscription au programme de développement d Apple Site Apple Developer Aucun 2. Enregistrement de l identifiant de périphérique unique (UDID) de votre périphérique ios ios Provisioning Portal ID de développeur Apple (étape 1) 3. Génération d un fichier CSR de demande de signature de certificat (*.certsigningrequest) Sous Mac OS, utilisez le programme Trousseau d accès. Sous Windows, utilisez OpenSSL. Aucun 4. Génération d un certificat de distribution/développeur ios (*.cer) ios Provisioning Portal ID de développeur Apple (étape 1) Fichier CSR (étape 3) 5. Conversion du certificat de distribution/développeur ios au format P12 Sous Mac OS, utilisez le programme Trousseau d accès. Sous Windows, utilisez OpenSSL. ID de développeur Apple (étape 1) Certificat de distribution/développeur ios (étape 4) 6. Génération de l ID d application ios Provisioning Portal ID de développeur Apple (étape 1)

Environnement de développement 22 N d étape Etape Emplacement Prérequis 7. Génération d un profil de configuration (*.mobileprovision) ios Provisioning Portal ID de développeur Apple (étape 1) UDID de votre périphérique ios (étape 2) ID de l application (étape 6) 8. Développement de l application Flash Builder ID de développeur Apple (étape 1) Certificat de distribution/développeur P12 (étape 5) ID de l application (étape 6) 9. Déploiement de l application itunes Profil de configuration (étape 7) Package de l application (étape 8) Préparation à la génération, au débogage et au déploiement d une application ios Avant de générer une application ios à l aide de Flash Builder et de la déployer sur un périphérique ios ou de la soumettre à l App Store d Apple, suivez la procédure suivante : 1 Inscrivez-vous au programme Apple ios Developer Program. Vous pouvez vous connecter à l aide de votre ID Apple existant ou en créer un nouveau. L assistant Apple Developer Registration vous guide au cours des étapes requises. 2 Enregistrez l identifiant de périphérique unique (UDID) de votre périphérique. Cette étape s applique uniquement si vous déployez votre application sur un périphérique ios et non vers l App Store d Apple. Dans le cas où vous voulez déployer votre application sur différents périphériques ios, enregistrez l UDID de chacun de ces périphériques. Obtention de l UDID de votre périphérique ios a b c Connectez le périphérique ios à votre ordinateur de développement et lancez ensuite itunes. Le périphérique ios connecté apparaît alors sous la section Appareils dans itunes. Cliquez sur le nom du périphérique ios de façon à afficher son résumé. Dans l onglet Résumé, cliquez sur Numéro de série afin d afficher l UDID à 40 caractères du périphérique ios. Vous pouvez copier l UDID dans itunes à l aide du raccourci clavier Ctrl+C (Windows) ou Commande+C (Mac). Enregistrement de l UDID de votre périphérique Connectez-vous au portail ios Provisioning Portal à l aide de votre ID Apple et enregistrez l UDID du périphérique. 3 Générez un fichier CSR de demande de signature de certificat (*.certsigningrequest). Il vous faut générer un fichier CSR pour pouvoir obtenir un certificat de distribution/développeur ios. Vous pouvez générer un fichier CSR à l aide de Trousseau d accès sous Mac ou d OpenSSL sous Windows. Lors de la génération d un fichier CSR, vous fournissez uniquement votre nom d utilisateur et adresse électronique, aucune autre information n est nécessaire concernant l application ou le périphérique.

Environnement de développement 23 Générer un CSR crée deux clés, une publique et une privée, ainsi qu un fichier *.certsigningrequest. La clé publique est incluse dans le fichier CSR, tandis que la clé privée permet de signer la demande. Pour plus d informations sur la génération d un fichier CSR, voir Génération d une demande de signature de certificat. 4 Génération d un certificat de développeur ios ou d un certificat de distribution ios (*.cer), en fonction de vos besoins. Remarque : pour déployer une application sur un périphérique, il vous faut un certificat de développeur. Alors qu un certificat de distribution est requis pour déployer l application vers l App Store d Apple. Génération d un certificat de développeur ios a b c d Connectez-vous au portail ios Provisioning Portal à l aide de votre ID Apple et sélectionnez l onglet Development. Cliquez sur Request Certificate et accédez au fichier CSR que vous avez généré et enregistré sur votre ordinateur (étape 3). Sélectionnez le fichier CSR et cliquez sur Submit. Cliquez sur Download sur la page Certificates. e Enregistrez le fichier téléchargé (*.developer_identity.cer). Génération d un certificat de distribution ios f g h i j Connectez-vous au portail ios Provisioning Portal à l aide de votre ID Apple et sélectionnez l onglet Distribution. Cliquez sur Request Certificate et accédez au fichier CSR que vous avez généré et enregistré sur votre ordinateur (étape 3). Sélectionnez le fichier CSR et cliquez sur Submit. Cliquez sur Download sur la page Certificates. Enregistrez le fichier téléchargé (*.distribution_identity.cer). 5 Convertissez le certificat de développeur ios ou le certificat de distribution ios au format de fichier P12 (*.p12). Il est nécessaire de convertir le certificat de distribution ou de développeur ios au format P12 de manière à ce que Flash Builder puisse signer numériquement votre application ios. La conversion au format P12 regroupe dans un même fichier votre certificat de distribution/développeur ios et la clé privée associée. Remarque : dans le cas où vous testez l application sur l ordinateur à l aide d AIR Debug Launcher (ADL), il n est pas nécessaire de convertir le certificat de distribution/développeur ios au format P12. Utilisez Trousseau d accès sous Mac ou OpenSSL sous Windows pour générer un fichier d échange d informations personnelles (*.p12). Pour plus d informations, voir Conversion d un certificat de développement en fichier P12. 6 Générez l ID de l application en suivant la procédure suivante : a b c Connectez-vous au portail ios Provisioning Portal à l aide de votre ID Apple. Accédez à la page App IDs et cliquez sur New App ID. Dans l onglet Manage, saisissez une description de l application, générez un nouvel identifiant initial de bundle (Bundle Seed ID) ainsi qu un nouvel identifiant de bundle (Bundle Identifier).

Environnement de développement 24 Chaque application possède un ID d application unique que vous spécifiez dans le fichier XML descripteur de l application. Un ID d application fourni est constitué d un Bundle Seed ID de dix caractères qui est fourni par Apple et d un suffixe Bundle Identifier que vous spécifiez vous-même. L identifiant de bundle (Bundle Identifier) spécifié doit correspondre à l ID d application dans le fichier descripteur de l application. Par exemple, si votre ID d application est com.mydomain.*, l ID dans le fichier descripteur de l application doit commencer par com.mydomain. Important : les identifiants de bundle génériques (Wildcard Bundle Identifier) peuvent être utilisés dans le développement et le test d applications ios, mais pas dans le cadre de leur déploiement vers l App Store d Apple. 7 Générez un fichier de configuration de développeur ou un fichier de configuration de distribution (*.mobileprovision). Remarque : pour déployer une application sur un périphérique, il vous faut un profil de configuration de développeur. Tandis que pour la déployer vers l App Store d Apple, vous avez besoin d un profil de configuration de distribution. Celui-ci permet de signer l application. Génération d un profil de configuration de développeur a b c d Connectez-vous au portail ios Provisioning Portal à l aide de votre ID Apple. Accédez à Certificate > Provisioning et cliquez sur New Profile. Saisissez un nom de profil, sélectionnez le certificat de développeur ios, l ID de l application ainsi que les UDID des périphériques sur lesquels vous souhaitez installer l application. Cliquez sur Submit. e Téléchargez le fichier de configuration de développeur généré (*.mobileprovision) et enregistrez-le sur l ordinateur. Génération d un profil de configuration de distribution f g h i j Connectez-vous au portail ios Provisioning Portal à l aide de votre ID Apple. Accédez à Certificate > Provisioning et cliquez sur New Profile. Saisissez un nom de profil et sélectionnez le certificat de distribution ios ainsi que l ID de l application. Si vous souhaitez tester l application avant de la déployer, spécifiez les UDID des périphériques sur lesquels vous voulez la tester. Cliquez sur Submit. Téléchargez le profil de configuration généré (*.mobileprovision) et enregistrez-le sur l ordinateur. Voir aussi «Création d une application ios dans Flash Builder» à la page 11 Fichiers à sélectionner lors du test, du débogage ou de l installation d une application ios Pour exécuter, déboguer ou installer une application à des fins de test sur un périphérique ios, sélectionnez les fichiers suivants dans la boîte de dialogue Exécuter > Déboguer les configurations : Certificat de développeur ios au format P12 (étape 5) Fichier XML descripteur de l application contenant l ID de l application (étape 6) Profil de configuration de développeur (étape 7)

Environnement de développement 25 Pour plus d informations, voir «Débogage d une application sur un périphérique Apple ios» à la page 192 et «Installation d une application sur un périphérique Apple ios» à la page 194. Fichiers à sélectionner lors du déploiement d une application vers l App Store d Apple Pour déployer une application vers l App Store d Apple, sélectionnez Final Release Package For Apple App Store (Package de version finale pour l App Store d Apple) comme type de package dans la boîte de dialogue Exporter vers une version validée et sélectionnez les fichiers suivants : Certificat de distribution ios au format P12 (étape 5) Fichier XML descripteur de l application contenant l ID de l application (étape 6) Remarque : vous ne pouvez pas utiliser d ID d application générique lors de l envoi d une application à l App Store d Apple. Profil de configuration de distribution (étape 7) Pour plus d informations, voir «Exportation de packages Apple ios pour publication» à la page 197.

26 Chapitre 3 : Interface utilisateur et présentation Présentation d une application mobile Utilisation des vues et des sections pour présenter une application mobile Une application mobile comporte un ou plusieurs écrans, ou vues. Par exemple, une application mobile peut posséder trois vues : 1 Une vue d accueil qui vous permet d ajouter des coordonnées 2 Une vue de contacts contenant la liste des contacts existants 3 Une vue de recherche permettant d effectuer des recherches dans votre liste de contacts Application mobile simple L image suivante présente l écran principal d une application mobile simple créée dans Flex : A B A. Contrôle ActionBar B. Zone de contenu Cette figure présente les zones principales d une application mobile : Contrôle ActionBar : le contrôle ActionBar vous permet d afficher des informations contextuelles à propos de l état actuel de l application. Ces informations comprennent une zone de titre, une zone réservée aux contrôles permettant de naviguer dans l application et une zone réservée aux contrôles permettant de réaliser une action. Vous pouvez ajouter un contenu commun dans le contrôle ActionBar qui s applique à l ensemble de l application, et vous pouvez ajouter des éléments spécifiques à une vue individuelle. Zone de contenu : la zone de contenu affiche les écrans individuels, ou vues, qui constituent l application. Les utilisateurs naviguent dans les vues de l application en utilisant les composants intégrés à l application et les contrôles d entrée du périphérique mobile.

Interface utilisateur et présentation 27 Une application mobile comprenant des sections Une application plus complexe pourrait définir plusieurs zones, ou sections, de l application. Par exemple, l application pourrait comprendre une section contacts, une section e-mail, une section favoris et d autres sections. Chaque section de l application contient une ou plusieurs vues. Les vues individuelles peuvent être partagées entre les sections, ce qui vous évite d avoir à définir la même vue à plusieurs reprises. La figure ci-dessous présente une application mobile qui inclut une barre d onglets au bas de la fenêtre de l application : A B A. Contrôle ActionBar B. Zone de contenu C. Barre d onglets C Flex utilise le contrôle ButtonBarBase pour implémenter la barre d onglets. Chaque bouton de la barre d onglets correspond à une section différente. Sélectionnez un bouton dans la barre d onglets pour modifier la section actuelle. Chaque section de l application définit son propre contrôle ActionBar. Par conséquent, la barre d onglets est commune à l ensemble de l application, alors que le contrôle ActionBar est spécifique à chaque section. Présentation d une application mobile simple La figure suivante présente l architecture d une application mobile simple : Application principale (ViewNavigatorApplication) (ViewNavigator) Accueil (View) Contacts (View) Rechercher (View) La figure présente une application composée de quatre fichiers. Une application mobile contient un fichier d application principal et un fichier pour chaque vue. Il n existe pas de fichier distinct pour le conteneur ViewNavigator. Le conteneur ViewNavigatorApplication le crée.

Interface utilisateur et présentation 28 Remarque : ce schéma présente l architecture de l application, mais ne représente pas l application en cours d exécution. Au moment de l exécution, une seule vue est active et résidente dans la mémoire. Pour plus d informations, voir «Navigation parmi les vues d une application mobile» à la page 30. Classes utilisées dans une application mobile Utilisez les classes suivantes pour définir une application mobile : Classe ViewNavigatorApplication ViewNavigator Description Définit le fichier d application principal. Le conteneur ViewNavigatorApplication n accepte pas d enfants. Contrôle la navigation parmi les vues d une application. Le conteneur ViewNavigator crée également le contrôle ActionBar. Le conteneur ViewNavigatorApplication crée automatiquement un seul conteneur ViewNavigator pour l ensemble de l application. Utilisez les méthodes du conteneur ViewNavigator pour basculer entre les différentes vues. View Définit les vues de l application, chaque vue étant définie dans un fichier MXML ou ActionScript distinct. Une instance du conteneur View représente chaque vue de l application. Définissez chaque vue dans un fichier MXML ou ActionScript distinct. Utilisez le conteneur ViewNavigatorApplication pour définir le fichier d application principal, comme l illustre l exemple suivant : <!-- containers\mobile\sparksinglesectionsimple.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.homeview"> </s:viewnavigatorapplication> Le conteneur ViewNavigatorApplication crée automatiquement un seul objet ViewNavigator qui définit le contrôle ActionBar. Vous utilisez le conteneur ViewNavigator pour naviguer parmi les vues de l application. Ajout d un conteneur View à une application mobile Chaque application mobile comporte au moins une vue. Même si le fichier d application principal crée le conteneur ViewNavigator, il ne définit aucune des vues utilisées dans l application. Chaque vue d une application correspond à un conteneur View défini dans un fichier ActionScript ou MXML. Chaque vue contient une propriété data qui spécifie les données associées à cette vue. Les vues peuvent utiliser la propriété data pour échanger des informations entre elles tandis que l utilisateur navigue dans l application. Utilisez la propriété ViewNavigatorApplication.firstView pour spécifier le fichier qui définit la première vue de l application. Dans l application précédente, la propriété firstview spécifie views.homeview. L exemple suivant présente le fichier HomeView.mxml qui définit cette vue : <!-- containers\mobile\views\homeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="home"> <s:layout> <s:verticallayout paddingtop="10"/> </s:layout> <s:label text="the home screen"/> </s:view>

Interface utilisateur et présentation 29 Le blogueur David Hassoun a publié un article sur les bases de ViewNavigator. Présentation d une application mobile comprenant plusieurs sections. Une application mobile peut collecter des vues associées dans différentes sections de l application. Par exemple, la figure suivante présente l organisation d une application mobile comprenant trois sections. Application principale (TabbedMobileApplication) (TabbedViewNavigator) Contacts (ViewNavigator) E-mail (ViewNavigator) Favoris (ViewNavigator) Accueil - Contacts (View) Modifier les contacts (View) Rechercher (View) Accueil - E-mail (View) Modifier les contacts (View) Rechercher (View) Accueil - Favoris (View) Rechercher (View) N importe quelle section peut utiliser n importe quelle vue. En d autres termes, une vue n appartient pas à une section particulière. La section définit simplement une manière d organiser un ensemble de vues et de naviguer parmi elles. Dans la figure, la vue Search fait partie de chaque section de l application. Au moment de l exécution, une seule vue est active et résidente dans la mémoire. Pour plus d informations, voir «Navigation parmi les vues d une application mobile» à la page 30. Classes utilisées dans une application mobile comprenant plusieurs sections Le tableau suivant répertorie les classes que vous utilisez pour créer une application mobile comprenant plusieurs sections : Classe TabbedViewNavigatorApplication TabbedViewNavigator Description Définit le fichier d application principal. Le seul enfant autorisé du conteneur TabbedViewNavigatorApplication est ViewNavigator. Définissez un conteneur ViewNavigator pour chaque section de l application. Contrôle la navigation parmi les sections qui constituent l application. Le conteneur TabbedViewNavigatorApplication crée automatiquement un seul conteneur TabbedViewNavigator pour l ensemble de l application. Le conteneur TabbedViewNavigator crée la barre d onglets que vous utilisez pour naviguer parmi les sections. ViewNavigator View Définissez un conteneur ViewNavigator pour chaque section. Le conteneur ViewNavigator contrôle la navigation parmi les vues qui constituent la section. Il crée également le contrôle Actionbar pour la section. Définit les vues de l application. Une instance du conteneur View représente chaque vue de l application. Définissez chaque vue dans un fichier MXML ou ActionScript distinct.

Interface utilisateur et présentation 30 Une application mobile divisée en plusieurs sections contient un fichier de l application principale et un fichier qui définit chacune des vues. Utilisez le conteneur TabbedViewNavigatorApplication pour définir le fichier d application principal, comme l illustre l exemple suivant : <!-- containers\mobile\sparkmultiplesectionssimple.mxml --> <s:tabbedviewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:viewnavigator label="contacts" firstview="views.contactshome"/> <s:viewnavigator label="email" firstview="views.emailhome"/> <s:viewnavigator label="favorites" firstview="views.favoriteshome"/> </s:tabbedviewnavigatorapplication> Utilisation de ViewNavigator dans une application à plusieurs sections Le seul composant enfant accepté pour le conteneur TabbedViewNavigatorApplication est ViewNavigator. Chaque section de l application correspond à un conteneur ViewNavigator différent. Utilisez le conteneur ViewNavigator pour naviguer parmi les vues de chaque section et pour définir le contrôle ActionBar pour la section. Utilisez la propriété ViewNavigator.firstView pour spécifier le fichier qui définit la première vue de la section. Utilisation de TabbedViewNavigator dans une application à plusieurs sections Le conteneur TabbedViewNavigatorApplication crée automatiquement un seul conteneur de type TabbedViewNavigator. Le conteneur TabbedViewNavigator crée alors une barre d onglets au bas de l application. Vous n êtes pas tenu d ajouter une logique à l application pour naviguer parmi les sections. Navigation parmi les vues d une application mobile Une pile d objets View contrôle la navigation dans une application mobile. L objet View supérieur de la pile définit la vue actuellement visible. Le conteneur ViewNavigator gère la pile. Pour changer de vue, empilez un nouvel objet View sur la pile ou retirez l objet View actuel de la pile. Le fait de retirer de la pile l objet View actuellement visible détruit l objet View et ramène l utilisateur à la vue précédente sur la pile. Dans une application dotée de sections, utilisez la barre d onglets pour naviguer parmi les sections. Comme un conteneur ViewNavigator différent définit chaque section, changer de section revient à changer le conteneur ViewNavigator et la pile actuels. L objet View situé au sommet de la pile du nouveau conteneur ViewNavigator devient la vue actuelle. Pour économiser la mémoire, par défaut, le conteneur ViewNavigator s assure qu une seule vue est en mémoire à la fois. Toutefois, il conserve les données des vues précédentes de la pile. Par conséquent, lorsque l utilisateur revient à la vue précédente, celle-ci peut être réinstanciée avec les données appropriées. Remarque : le conteneur View définit la propriété destructionpolicy. S il est défini sur auto, la valeur par défaut, le conteneur ViewNavigator détruit la vue lorsqu elle n est pas active. S il est défini sur none, la vue est mise en mémoire cache. Le blogueur Mark Lochrie a publié un article sur ViewNavigator. Méthodes de navigation ViewNavigator Utilisez les méthodes suivantes de la classe ViewNavigator pour contrôler la navigation : pushview() : empiler un objet View sur la pile. L objet View communiqué en tant qu argument à la méthode pushview() devient la vue actuelle.

Interface utilisateur et présentation 31 popview() : dépiler l objet View actuel de la pile de navigation et détruisez l objet View. L objet View précédent sur la pile devient la vue actuelle. poptofirstview() : dépiler tous les objets View de la pile et détruisez-les, à l exception du premier objet View de la pile. Le premier objet View de la pile devient la vue actuelle. popall() : vider la pile du conteneur ViewNavigator et détruire tous les objets View. Votre application affiche une vue vide. La figure suivante présente deux vues. Pour changer la vue actuelle, utilisez la méthode ViewNavigator.pushView() pour empiler un objet View qui représente la nouvelle vue sur la pile. La méthode pushview() invite le conteneur ViewNavigator à basculer l affichage vers le nouvel objet View. Installation et élimination d objets View pour changer de vue. Utilisez la méthode ViewNavigator.popView() pour éliminer l objet View actuel de la pile. Le conteneur ViewNavigator ramène l affichage à l objet View précédent sur la pile. Remarque : le périphérique mobile lui-même contrôle en grande partie la navigation dans une application mobile. Par exemple, les applications mobiles intégrées à Flex gèrent automatiquement le bouton retour sur les périphériques mobiles. Par conséquent, vous n avez pas à ajouter la prise en charge du bouton retour dans l application. Lorsque l utilisateur appuie sur le bouton retour du périphérique mobile, Flex appelle automatiquement la méthode popview() pour restaurer la vue précédente. Le blogueur David Hassoun a publié un article sur la gestion des données dans une vue. Définition de la navigation pour une application à plusieurs sections Dans la figure suivante, les vues sont organisées en plusieurs sections. Un conteneur ViewNavigator différent définit chaque section. Chaque section contient une ou plusieurs vues :

Interface utilisateur et présentation 32 A B A. ActionBar B. Zone de contenu C. Barre d onglets C Pour modifier la vue dans la section en cours, qui correspond au conteneur ViewNavigator actuel, utilisez les méthodes pushview() et popview(). Pour modifier la section actuelle, utilisez la barre d onglets. Lorsque vous changez de section, vous basculez vers le conteneur ViewNavigator de la nouvelle section. L affichage change et présente l objet View qui se trouve actuellement au-dessus de la pile du nouveau ViewNavigator. Vous pouvez aussi programmer le changement de section à l aide de la propriété TabbedViewNavigator.selectedIndex. Cette propriété contient l index de base 0 du navigateur de vues sélectionné. Gestion des saisies de l utilisateur dans une application mobile La saisie utilisateur requiert une gestion différente dans une application mobile par rapport à une application d ordinateur ou de navigateur. Dans une application de bureau créée pour AIR ou dans une application de navigateur conçue pour Flash Player, les principaux dispositifs de saisie sont une souris et un clavier. Dans le cas de périphériques mobiles, le dispositif de série principal est un écran tactile. Un périphérique mobile possède souvent un type de clavier et certains périphériques disposent également d une méthode de saisie à cinq directions (gauche, droite, haut, bas et sélection). La classe mx.core.uicomponent définit la propriété de style interactionmode que vous utilisez pour configurer des composants pour le type de saisie utilisé par l application. Pour les thèmes Halo et Spark, la valeur par défaut est mouse, ce qui indique que la souris est le dispositif de saisie principal. Pour le thème Mobile, la valeur par défaut est touch, ce qui indique que l écran tactile constitue le dispositif de saisie principal. Prise en charge des touches du matériel dans une application mobile Les applications définies par les conteneurs ViewNavigatorApplication ou TabbedViewNavigatorApplication répondent aux touches matérielles Retour et Menu d un périphérique. Lorsque l utilisateur appuie sur la touche Retour, l application revient à la vue précédente. S il n y a pas de vue précédente, l application se ferme et l écran d accueil du périphérique apparaît.

Interface utilisateur et présentation 33 Lorsque l utilisateur appuie sur le bouton Retour, la vue active de l application reçoit un événement backkeypressed. Vous pouvez annuler l action de la touche Retour en appelant preventdefault() dans le gestionnaire d événement pour l événement backkeypressed. Lorsque l utilisateur appuie sur le bouton Menu, le conteneur ViewMenu de la vue actuelle apparaît, s il est défini. Le conteneur ViewMenu définit un menu au bas d un conteneur View. Chaque conteneur View définit son propre menu, spécifique à cette vue. Le contrôle View actif envoie un événement menukeypressed lorsque l utilisateur appuie sur la touche Menu. Pour annuler l action du bouton Menu et empêcher l affichage de ViewMenu, appelez la méthode preventdefault() dans le gestionnaire d événement pour l événement menukeypressed. Pour plus d informations, voir «Définition de menus dans une application mobile» à la page 74. Gestion des événements de clavier matériels dans une application mobile Dans une application mobile créée en langage Flex, il est possible de détecter la position d une touche matérielle lorsqu un utilisateur appuie dessus. Par exemple, les dispositifs Android vous permettent de détecter lorsqu un utilisateur appuie sur les boutons d accueil, de retour ou de menu. Pour détecter la position des touches lorsqu un utilisateur appuie sur ces dernières, créez des gestionnaires d événement pour les événements KEY_UP ou KEY_DOWN. Généralement, il vous faut associer les gestionnaires d événement à l objet d application défini par les conteneurs Application, ViewNavigatorApplication ou TabbedViewNavigatorApplication. L objet Stage définit la zone de dessin d une application. Chaque application dispose d un objet Stage. Ainsi, le conteneur d application est en réalité le conteneur enfant de l objet Stage. La propriété Stage.focus spécifie le composant disposant du focus clavier ou contient la valeur null si aucun composant ne dispose du focus. Le composant disposant du focus clavier reçoit les notifications d événement lorsque l utilisateur interagit avec le clavier. Ainsi, si Stage.focus est défini sur l objet d application, les gestionnaires d événement de ce dernier sont appelés. Sur un périphérique mobile, votre application peut être interrompue par une autre application. Par exemple, le périphérique mobile peut recevoir un appel téléphonique tandis que l application est en cours d exécution ou l utilisateur peut passer à une autre application. Lorsque l utilisateur revient sur l application précédente, la propriété Stage.focus est définie sur null. Donc, les gestionnaires d événement affectés à l objet d application ne répondent pas au clavier. Puisque la propriété Stage.focus peut être null dans une application mobile, écoutez les événements de clavier sur l objet Stage lui-même afin de garantir la reconnaissance de l événement par l application. Dans l example suivant, les gestionnaires d événement sont affectés à l objet Stage :

Interface utilisateur et présentation 34 <!-- containers\mobile\sparkhweventhandler.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.sparkhweventhandlerhomeview" applicationcomplete="appcompletehandler(event);"> <fx:script> <![CDATA[ import mx.events.flexevent; // Add the hardware key event handlers to the stage. protected function appcompletehandler(event:flexevent):void { stage.addeventlistener("keydown", handlebuttons, false,1); stage.addeventlistener("keyup", handlebuttons, false, 1); // Event handler to handle hardware keyboard keys. protected function handlebuttons(event:keyboardevent):void { if (event.keycode == Keyboard.HOME) { // Handle Home button. else if (event.keycode == Keyboard.BACK) { // Hanlde back button. ]]> </fx:script> </s:viewnavigatorapplication> Gestion des événements de souris et tactiles dans une application mobile AIR génère différents événements pour indiquer différents types de saisie. Ces événements comprennent : Evénements de souris : événements générés par une intervention de l utilisateur effectuée au moyen d une souris ou d un écran tactile. Les événements de souris comprennent mouseover, mousedown et mouseup. Evénements tactiles : événements générés sur des périphériques qui détectent les contacts de l utilisateur avec le périphérique, par exemple le contact d un doigt sur un écran tactile. Les événements tactiles comprennent touchtap, touchover et touchmove. Lorsqu un utilisateur utilise un périphérique équipé d un écran tactile, il touche généralement l écran du doigt ou à l aide d un dispositif de pointage. Evénements de mouvement : événements générés par des interactions tactiles multipoint, telles que la pression de deux doigts simultanément sur un écran tactile. Les événements de mouvement comprennent gesturepan, gesturerotate et gesturezoom. Par exemple, sur certains périphériques, il est possible d effectuer un geste de pincement pour produire un zoom arrière dans une image. Prise en charge intégrée des événements de souris La structure Flex et le jeu de composants Flex intègrent la prise en charge des événements de souris, mais pas des événements tactiles ni de mouvement. Par exemple, l utilisateur interagit avec les composants Flex dans une application mobile en utilisant l écran tactile. Les composants répondent aux événements de souris, tels que mousedown et mouseover, mais pas aux événements tactiles ni de mouvement.

Interface utilisateur et présentation 35 Par exemple, l utilisateur appuie sur l écran tactile pour sélectionner le contrôle Flex Button. Le contrôle Button utilise les événements mouseup et mousedown pour signaler que l utilisateur est intervenu sur le contrôle. Le contrôle Scroller utilise les événements mousemove et mouseup pour indiquer que l utilisateur défile dans l écran. Paul Trani, spécialiste Adobe, explique la gestion des événements tactiles et gestuels dans le document Touch Events and Gesture on Mobile. Contrôle des événements générés par AIR La propriété flash.ui.multitouch.inputmode contrôle les événements générés par AIR et Flash Player. La propriété flash.ui.multitouch.inputmode peut posséder l une des valeurs suivantes : MultitouchInputMode.NONE AIR traite les événements de souris, mais pas les événements tactiles ni les gestes. MultitouchInputMode.TOUCH_POINT AIR traite les événements de souris et tactiles, mais pas les gestes. Dans ce mode, la structure Flex reçoit les mêmes événements de souris que pour MultitouchInputMode.NONE. MultitouchInputMode.GESTURE AIR traite les événements de souris et les gestes, mais pas les événements tactiles. Dans ce mode, la structure Flex reçoit les mêmes événements de souris que pour MultitouchInputMode.NONE. Comme le montre la liste, quelle que soit la valeur paramétrée de la propriété flash.ui.multitouch.inputmode, AIR envoie toujours les événements de souris. Par conséquent, les composants Flex peuvent toujours répondre aux interactions de l utilisateurs réalisées à l aide d un écran tactile. Flex vous permet d utiliser n importe quelle valeur pour la propriété flash.ui.multitouch.inputmode dans votre application. Par conséquent, même si les composants Flex ne répondent pas aux événements tactiles ni de mouvement, vous pouvez ajouter une fonctionnalité à votre application pour répondre à tout événement. Par exemple, vous pouvez ajouter un gestionnaire d événement au contrôle Button afin de gérer les événements tactiles, tels que touchtap, touchover et touchmove. Le Guide du développeur ActionScript 3.0 présente une vue d ensemble de la gestion de la saisie utilisateur sur différents périphériques et de l utilisation de la saisie tactile, tactile multipoint et basée sur le mouvement. Pour plus de détails, voir : Notions de base sur l interaction utilisateur Saisie tactile, multitouch et gestes Définition d une application mobile et d un écran de démarrage Création d un conteneur d application mobile La première balise d une application mobile est en général l une des suivantes : La balise <s:viewnavigatorapplication> définit une application mobile comprenant une seule section. La balise <s:tabbedviewnavigatorapplication> définit une application mobile comprenant plusieurs sections. Lorsque vous développez des applications destinées à des tablettes, les limites de taille d écran sont moins contraignantes qu avec les téléphones. Par conséquent, pour une tablette, vous n avez pas à structurer votre application autour de petites vues. A la place, vous pouvez créer l application en utilisant le conteneur Spark Application standard avec les composants et habillages mobiles pris en charge.

Interface utilisateur et présentation 36 Remarque : lors du développement d une application mobile quelconque, vous pouvez utiliser le conteneur Spark Application, même pour les téléphones. Toutefois, le conteneur Spark Application n inclut pas de prise en charge pour la navigation entre vues, la persistance des données ni les boutons Retour et Menu du périphérique. Pour plus d informations, voir «Différences entre les conteneurs d application mobile et le conteneur d application Spark» à la page 36 et A propos du conteneur Application. Les conteneurs d application mobile présentent les caractéristiques suivantes par défaut : Caractéristiques Taille par défaut Présentation des enfants Marges intérieures par défaut Barres de défilement Conteneurs ViewNavigatorApplication et TabbedViewNavigatorApplication Spark 100 % de hauteur et 100 % de largeur pour occuper tout l espace de l écran. Définie par les conteneurs View individuels qui constituent les vues de l application. 0 pixel. Aucune. Si vous ajoutez des barres de défilement à l habillage du conteneur de l application, les utilisateurs peuvent faire défiler l ensemble de l application. Cela comprend la zone du contrôle ActionBar et de la barre d onglets de l application. En général, vous ne voulez pas faire défiler ces zones de la vue. Par conséquent, ajoutez des barres de défilement aux conteneurs View individuels de l application, plutôt qu à l habillage du conteneur de l application. Différences entre les conteneurs d application mobile et le conteneur d application Spark Les conteneurs d application mobile Spark présentent la plupart des fonctionnalités du conteneur Spark Application. Par exemple, vous appliquez des styles aux conteneurs d application mobile de la même manière que vous les appliquez au conteneur Spark Application. Les conteneurs d application mobile Spark présentent plusieurs caractéristiques qui diffèrent de celles du conteneur Spark Application : Prise en charge de la persistance Prend en charge le stockage des données sur un disque et leur téléchargement à partir d un disque. La persistance permet aux utilisateurs d interrompre une application mobile, par exemple pour répondre à un appel téléphonique, puis de restaurer l état de l application à la fin de l appel. Prise en charge de la navigation dans les vues Le conteneur ViewNavigatorApplication crée automatiquement un seul conteneur ViewNavigator afin de contrôler la navigation entre les vues. Le conteneur TabbedViewNavigatorApplication crée automatiquement un conteneur TabbedViewNavigator individuel pour contrôler la navigation entre les sections. Prise en charge des boutons Retour et Menu du périphérique Lorsque l utilisateur appuie sur le bouton Retour, l application revient à la vue précédente de la pile. Lorsque l utilisateur appuie sur le bouton Menu, le conteneur ViewMenu de la vue actuelle apparaît, s il est défini. Pour plus d informations sur le conteneur Spark Application, voir A propos du conteneur Application.

Interface utilisateur et présentation 37 Gestion d événements de niveau application La classe NativeApplication représente une application AIR. Elle fournit des informations sur l application, les fonctions de l ensemble de l application et envoie des événements au niveau de l application. Vous pouvez accéder à l instance de la classe NativeApplication qui correspond à votre application mobile en utilisant la propriété statique NativeApplication.nativeApplication. Par exemple, la classe NativeApplication définit les événements invoke et exiting que vous pouvez gérer dans votre application mobile. L exemple suivant fait référence à la classe NativeApplication pour définir un gestionnaire d événement pour l événement exiting : <!-- containers\mobile\sparknativeapplicationevent.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.employeemainview" creationcomplete="creationcompletehandler(event);"> <fx:script> <![CDATA[ import mx.events.flexevent; protected function creationcompletehandler(event:flexevent):void { // Reference NativeApplication to assign the event handler. NativeApplication.nativeApplication.addEventListener(Event.EXITING, myexiting); protected function myexiting(event:event):void { // Handle exiting event. ]]> </fx:script> </s:viewnavigatorapplication> Notez que vous accédez au ViewNavigator à l aide de la propriété ViewNavigatorApplication.navigator. Ajout d un écran de démarrage à une application Le conteneur Spark Application constitue une classe de base pour les conteneurs ViewNavigatorApplication et TabbedViewNavigatorApplication. S il est utilisé avec le thème Spark, le conteneur Spark Application prend en charge un preloader d application pour indiquer l avancement du téléchargement et de l initialisation du fichier SWF d une application. S il est utilisé avec le thème Mobile, vous pouvez afficher un écran de démarrage à la place. L écran de démarrage apparaît au cours du démarrage de l application. Remarque : pour utiliser l écran de démarrage dans une application de bureau, définissez la propriété Application.preloader sur spark.preloaders.splashscreen. Ajoutez également le fichier frameworks\libs\mobile\mobilecomponents.swc au chemin de bibliothèque de l application. Le blogueur Joseph Labrecque a rédigé un article sur AIR pour Android Splash Screen avec Flex. Le blogueur Brent Arnold a conçu une vidéo sur l ajout d un écran de démarrage pour une application Android.

Interface utilisateur et présentation 38 Ajout d un écran de démarrage à partir d un fichier image Vous pouvez charger un écran de démarrage directement à partir d un fichier image. Pour configurer l écran de démarrage, utilisez les propriétés splashscreenimage, splashscreenscalemode et splashscreenminimumdisplaytime de la classe d application. Par exemple, l exemple suivant charge un écran de démarrage à partir d un fichier JPG à l aide du format letterbox : <!-- containers\mobile\sparkmobilesplashscreen.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.employeemainview" splashscreenimage="@embed('assets/logo.jpg')" splashscreenscalemode="letterbox"> </s:viewnavigatorapplication> Ajout d un écran de démarrage à partir d un composant personnalisé L exemple de la section précédente utilise un fichier JPG pour définir l écran de démarrage. L inconvénient de ce mécanisme est que l application utilise la même image, quelles que soient les capacités du périphérique mobile sur lequel l application s exécute. En effet, tous les périphériques mobiles n ont pas la même taille ni la même résolution. Plutôt que d utiliser une simple image en tant qu écran de démarrage, vous pouvez définir un composant personnalisé. Le composant détermine les capacités du périphérique mobile et utilise l image appropriée pour l écran de démarrage. Utilisez la classe SplashScreenImage pour définir le composant personnalisé, comme indiqué dans l exemple suivant : <!-- containers\mobile\mycomponents\mysplashscreen.mxml --> <s:splashscreenimage xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <!-- Default splashscreen image. --> <s:splashscreenimagesource source="@embed('../assets/logodefault.jpg')"/> <s:splashscreenimagesource source="@embed('../assets/logo240portrait.jpg')" dpi="240" aspectratio="portrait"/> <s:splashscreenimagesource source="@embed('../assets/logo240landscape.jpg')" dpi="240" aspectratio="landscape"/> <s:splashscreenimagesource source="@embed('../assets/logo160.jpg')" dpi="160" aspectratio="portrait" minresolution="960"/> </s:splashscreenimage>

Interface utilisateur et présentation 39 Dans la définition du composant, utilisez la classe SplashScreenImageSource pour définir chacune des images de l écran de démarrage. La propriété SplashScreenImageSource.source spécifie le fichier image. Les propriétés dpi, aspectratio et minresolution du conteneur SplashScreenImageSource définissent les capacités requises pour qu un périphérique mobile puisse afficher l image. Par exemple, la première définition SplashScreenImageSource spécifie uniquement la propriété source pour l image. Aucun paramètre n étant défini pour les propriétés dpi, aspectratio et minresolution, cette image peut être utilisée sur tous les périphériques. Elle définit ainsi l image affichée par défaut lorsqu aucune autre image ne correspond aux capacités du périphérique. La seconde et la troisième définition SplashScreenImageSource spécifient une image pour un périphérique présentant une définition de 240 PPP aussi bien dans le mode portrait que dans le mode paysage. La définition finale SplashScreenImageSource spécifie une image pour un périphérique à 160 PPP en mode portrait avec une résolution minimale de 960 pixels. La valeur de la propriété minresolution est comparée aux valeurs les plus importantes des propriétés Stage.stageWidth et Stage.stageHeight. La plus importante des deux valeurs doit être égale à la propriété minresolution. L application mobile suivante utilise ce composant : <!-- containers\mobile\sparkmobilesplashcomp.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.employeemainview" splashscreenimage="mycomponents.mysplashscreen"> </s:viewnavigatorapplication> La classe SplashScreenImage détermine automatiquement l image correspondant le mieux aux capacités du périphérique. Elle se base sur les propriétés dpi, aspectratio et minresolution de chaque définition SplashScreenImageSource. Voici la procédure servant à déterminer la meilleure image : 1 Déterminez toutes les définitions SplashScreenImageSource correspondant aux paramètres du périphérique mobile. Une correspondance intervient dans les cas suivants : a b c La définition SplashScreenImageSource ne définit pas ces paramètres de façon explicite. Par exemple, aucun paramètre de la propriété dpi ne correspond au PPP du périphérique. Pour les propriétés dpi ou aspectratio, la propriété doit correspondre exactement au paramètre du périphérique mobile. Pour la propriété minresolution, celle-ci correspond à un paramètre du périphérique lorsque la plus importante des valeurs des propriétés Stage.stageWidth et Stage.stageHeight est égale ou supérieure à la propriété minresolution. 2 S il existe plus d une définition SplashScreenImageSource correspondant au périphérique, alors : a b c Sélectionnez celle qui comporte le plus de paramètres explicites. Par exemple, une définition SplashScreenImageSource qui spécifie à la fois la propriété dpi et la propriété aspectratio est un meilleur choix que celle qui ne spécifie que la propriété dpi. S il vous reste encore plusieurs choix, sélectionnez celle comportant la valeur minresolution la plus élevée. S il vous reste encore plus d un choix, sélectionnez la première image définie dans le composant.

Interface utilisateur et présentation 40 Sélection explicite de l image de l écran de démarrage La méthode SplashScreenImage.getImageClass() détermine la définition SplashScreenImageSource correspondant le mieux aux capacités d un périphérique mobile. Vous pouvez ignorer cette méthode afin d ajouter votre propre logique personnalisée, tel qu indiqué dans l exemple ci-dessous. Dans cet exemple, une définition SplashScreenImageSource est donnée pour un écran de démarrage ios. Dans le corps de la méthode de remplacement de la méthode getimageclass(), déterminez tout d abord si l application s exécute sur ios. Si tel est le cas, affichez l image spécifique pour ios. Si l application ne s exécute pas sur ios, appelez alors la méthode super.getimageclass(). Cette méthode utilise l implémentation par défaut pour déterminer l instance SplashScreenImageSource à afficher : <!-- containers\mobile\mycomponents\myiossplashscreen.mxml --> <s:splashscreenimage xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:script> <![CDATA[ // Override getimageclass() to return an image for ios. override public function getimageclass(aspectratio:string, dpi:number, resolution:number):class { // Is the application running on ios? if (Capabilities.version.indexOf("IOS") == 0) return iosimage.source; return super.getimageclass(aspectratio, dpi, resolution); ]]> </fx:script> <!-- Default splashscreen image. --> <s:splashscreenimagesource source="@embed('../assets/logodefault.jpg')"/> <s:splashscreenimagesource source="@embed('../assets/logo240portrait.jpg')" dpi="240" aspectratio="portrait"/> <s:splashscreenimagesource source="@embed('../assets/logo240landscape.jpg')" dpi="240" aspectratio="landscape"/> <s:splashscreenimagesource source="@embed('../assets/logo160.jpg')" dpi="160" aspectratio="portrait" minresolution="960"/> <!-- ios splashscreen image. --> <s:splashscreenimagesource id="iosimage" source="@embed('../assets/logoios.jpg')"/> </s:splashscreenimage>

Interface utilisateur et présentation 41 Définition de vues dans une application mobile Une application mobile définit en général plusieurs écrans ou vues. Lorsque les utilisateurs naviguent dans l application, ils passent d une vue à l autre. Rendez la navigation intuitive pour l utilisateur de l application. Ainsi, lorsque l utilisateur passe d une vue à une autre, il s attend à pouvoir revenir à la vue précédente. L application peut définir un bouton Accueil ou d autres aides à la navigation de niveau supérieur qui permettent à l utilisateur d accéder à différents emplacements de l application depuis tout autre emplacement. Pour définir les vues d une application mobile, utilisez le conteneur View. Pour contrôler la navigation entre les vues d une application mobile, utilisez le conteneur ViewNavigator. Utilisation de pushview() pour changer de vue Utilisez la méthode ViewNavigator.pushView() pour placer une nouvelle vue sur la pile. Accédez au ViewNavigator à l aide de la propriété ViewNavigatorApplication.navigator. La mise en place d une vue modifie l affichage de l application en passant à la nouvelle vue. La méthode pushview() présente la syntaxe suivante : pushview(viewclass:class, data:object = null, context:object = null, transition:spark.transitions:viewtransitionbase = null):void où : viewclass spécifie le nom de classe de la vue. Cette classe correspond généralement au fichier MXML qui définit la vue. data spécifie n importe quelles données communiquées à la vue. Cet objet est écrit dans la propriété View.data de la nouvelle vue. context spécifie un objet arbitraire écrit dans la propriété ViewNavigator.context. Lorsque la nouvelle vue est créée, elle peut faire référence à cette propriété et exécuter une action en fonction de cette valeur. Par exemple, la vue peut afficher des données de différentes manières selon la valeur de context. transition spécifie la transition à utiliser lors du changement de vue. Pour plus d informations sur les transitions liées aux vues, voir «Définition de transitions dans une application mobile» à la page 95 Utilisation de l argument data pour faire passer un seul objet Utilisez l argument data pour faire passer un seul objet contenant les éventuelles données requises par la nouvelle vue. La vue peut alors accéder à l objet en utilisant la propriété View.data, comme le montre l exemple suivant :

Interface utilisateur et présentation 42 <!-- containers\mobile\views\employeeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="employee View"> <s:layout> <s:verticallayout paddingtop="10"/> </s:layout> <s:vgroup> <s:label text="{data.firstname"/> <s:label text="{data.lastname"/> <s:label text="{data.companyid"/> </s:vgroup> </s:view> Dans cet exemple, la vue EmployeeView est définie dans le fichier EmployeeView.mxml. Cette vue utilise la propriété data pour accéder au prénom et au nom d un employé et à l ID de l employé à partir de l objet qui lui a été transmis. La propriété View.data est garantie valide au moment de l événement ajout pour le nouvel objet. Pour plus d informations sur le cycle de vie d un conteneur View, voir «Cycle de vie des conteneurs Spark ViewNavigator et View» à la page 49. Communication de données à la première vue d une application La propriété ViewNavigatorApplication.firstView et la propriété ViewNavigator.firstView définissent la première vue dans une application. Pour communiquer des données à la première vue, utilisez la propriété ViewNavigatorApplication.firstViewData ou la propriété ViewNavigator.firstViewData. Communication de données à une vue Dans l exemple suivant, vous définissez une application mobile en utilisant le conteneur ViewNavigatorApplication. Le conteneur ViewNavigatorApplication crée automatiquement une seule instance de la classe ViewNavigator que vous utilisez pour naviguer parmi les vues définies par l application. <!-- containers\mobile\sparksinglesection.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.employeemainview"> <fx:script> <![CDATA[ protected function button1_clickhandler(event:mouseevent):void { // Switch to the first view in the section. navigator.poptofirstview(); ]]> </fx:script> <s:navigationcontent> <s:button icon="@embed(source='assets/home.png')" click="button1_clickhandler(event)"/> </s:navigationcontent> </s:viewnavigatorapplication>

Interface utilisateur et présentation 43 Cet exemple définit un bouton Accueil dans la zone de navigation du contrôle ActionBar. La sélection du bouton Accueil élimine toutes les vues de la pile et revient à la première vue. La figure suivante illustre cette application : Le fichier EmployeeMainView.mxml définit la première vue de l application, comme le montre l exemple suivant : <!-- containers\mobile\views\employeemainview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="employees"> <s:layout> <s:verticallayout paddingtop="10"/> </s:layout> <fx:script> <![CDATA[ import spark.events.indexchangeevent; protected function mylist_changehandler(event:indexchangeevent):void { navigator.pushview(views.employeeview,mylist.selecteditem); ]]> </fx:script> <s:label text="select an employee name"/> <s:list id="mylist" width="100%" height="100%" labelfield="firstname" change="mylist_changehandler(event)"> <s:arraycollection> <fx:object firstname="bill" lastname="smith" companyid="11233"/> <fx:object firstname="dave" lastname="jones" companyid="13455"/> <fx:object firstname="mary" lastname="davis" companyid="11543"/> <fx:object firstname="debbie" lastname="cooper" companyid="14266"/> </s:arraycollection> </s:list> </s:view>

Interface utilisateur et présentation 44 Cette vue définit un contrôle List qui permet à l utilisateur de sélectionner un nom d employé. La sélection d un nom incite le gestionnaire d événement correspondant à l événement change à placer sur la pile une instance d une vue différente, nommée EmployeeView. Le fait d empiler une instance de EmployeeView provoque le changement par l application de la vue EmployeeView. La méthode pushview() dans cet exemple utilise deux arguments : la nouvelle vue et un Objet qui définit les données à communiquer à la nouvelle vue. Dans cet exemple, vous communiquez l objet de données correspondant à l élément actuellement sélectionnée dans le contrôle List. L exemple suivant illustre la définition de la vue EmployeeView : <!-- containers\mobile\views\employeeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="employee View"> <s:layout> <s:verticallayout paddingtop="10"/> </s:layout> <s:vgroup> <s:label text="{data.firstname"/> <s:label text="{data.lastname"/> <s:label text="{data.companyid"/> </s:vgroup> </s:view> La vue EmployeeView affiche les trois champs du fournisseur de données du contrôle List. EmployeeView accède aux données qui lui sont communiquées à l aide de la propriété View.data. Le blogueur Steve Mathews a créé une entrée de cookbook sur la transmission des données entre les vues. Retour de données d une vue La méthode ViewNavigator.popView() retourne le contrôle de la vue actuelle à la vue précédente de la pile. Lorsque la méthode popview() s exécute, la vue actuelle est détruite et la vue précédente sur la pile est rétablie. La restauration du conteneur View précédent implique la réinitialisation de sa propriété data dans la pile, Pour obtenir une description complète du cycle de vie d une vue, y compris des événements envoyés au cours de sa création, voir «Cycle de vie des conteneurs Spark ViewNavigator et View» à la page 49. La nouvelle vue est restaurée avec l objet data original correspondant au moment où elle a été désactivée. Par conséquent, vous n utilisez pas généralement l objet data original pour transmettre en retour les données de l ancienne vue à la nouvelle vue. A la place, remplacez la méthode createreturnobject() de l ancienne vue. La méthode createreturnobject() retourne un seul objet. Retour du type d objet L objet retourné par la méthode createreturnobject() est écrit dans la propriété ViewNavigator.poppedViewReturnedObject. Le type de données de la propriété poppedviewreturnedobject est ViewReturnObject. ViewReturnObject définit deux propriétés, context et object. La propriété object contient l objet retourné par la méthode createreturnobject(). La propriété context contient la valeur de l argument context qui a été transmis à la vue lorsque la vue a été placée sur la pile de navigation à l aide de pushview().

Interface utilisateur et présentation 45 La propriété poppedviewreturnedobject est garantie comme étant définie dans la nouvelle vue avant que la vue ne reçoive l événement ajout. Si la propriété poppedviewreturnedobject.object est nulle, aucune donnée n a été retournée. Exemple : Communication de données à une vue L exemple suivant, SelectFont.mxml, présente une vue qui vous permet de définir une taille de police. Le remplacement de la méthode createreturnobject() retourne la valeur sous forme de numéro. Le champ fontsize de la propriété data transmise à partir de la vue précédente définit la valeur initiale du contrôle TextInput : <!-- containers\mobile\views\selectfont.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="select Font Size" add="addhandler(event);"> <s:layout> <s:verticallayout paddingtop="10" paddingleft="10" paddingright="10"/> </s:layout> <fx:script> <![CDATA[ import mx.events.flexevent; // Define return Number object. protected var fontsize:number; // Initialize the return object with the passed in font size. // If you do not set a value, // return this value for the font size. protected function addhandler(event:flexevent):void { fontsize = data.fontsize; // Save the value of the specified font. protected function changehandler(event:event):void { fontsize=number(ns.text); navigator.popview(); // Override createreturnobject() to return the new font size. override public function createreturnobject():object { return fontsize; ]]> </fx:script> <s:label text="select Font Size"/> <!-- Set the initlial value of the TextInput to the passed fontsize --> <s:textinput id="ns" text="{data.fontsize"/> <s:button label="save" click="changehandler(event);"/> </s:view>

Interface utilisateur et présentation 46 La figure suivante présente la vue définie par SelectFont.mxml : La vue de l exemple suivant, MainFontView.mxml, utilise la vue définie dans SetFont.mxml. La vue MainFontView.mxml définit les éléments suivants : Un contrôle Button dans le conteneur ActionBar pour passer à la vue définie par SetFont.mxml. Un gestionnaire d événement pour l événement ajout qui détermine pour la première fois si la propriété View.data est nulle. Si la valeur est null, le gestionnaire d événement ajoute le champ data.fontsize à la propriété View.data. Si la propriété data n a pas la valeur null, le gestionnaire d événement définit la taille de la police sur la valeur figurant dans le champ data.fontsize. <!-- containers\mobile\views\mainfontview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="font Size" add="addhandler(event);"> <s:layout> <s:verticallayout paddingtop="10"/> </s:layout> <fx:script> <![CDATA[ import mx.events.flexevent; // Change to the SelectFont view, and pass the current data property. // The data property contains the fontsize field with the current font size. protected function clickhandler(event:mouseevent):void { navigator.pushview(views.selectfont, data); // Set the font size in the event handler for the add event. protected function addhandler(event:flexevent):void { // If the data property is null, // initialize it and create the data.fontsize field. if (data == null) {

Interface utilisateur et présentation 47 data = new Object(); data.fontsize = getstyle('fontsize'); return; // Otherwise, set data.fontsize to the retured value, // and set the font size. data.fontsize = navigator.poppedviewreturnedobject.object; setstyle('fontsize', data.fontsize); ]]> </fx:script> <s:actioncontent> <s:button label="set Font>" click="clickhandler(event);"/> </s:actioncontent> <s:label text="text to size."/> </s:view> Configuration d une application pour l orientation Portrait ou Paysage Un périphérique mobile définit l orientation d une application automatiquement lorsque l orientation du périphérique change. Pour configurer votre application pour différentes orientations, Flex définit deux états d affichage qui correspondent aux orientations Portrait et Paysage : portrait et landscape. Utilisez ces états de vue pour définir les caractéristiques de votre application en fonction de l orientation. L exemple suivant utilise l état d affichage pour contrôler la propriété layout d un conteneur Group en fonction de l orientation actuelle :

Interface utilisateur et présentation 48 <!-- containers\mobile\views\searchviewstates.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="search"> <s:layout> <s:verticallayout paddingtop="10"/> </s:layout> <s:states> <s:state name="portrait"/> <s:state name="landscape"/> </s:states> <s:group> <s:layout> <s:verticallayout/> </s:layout> <s:layout.landscape> <s:horizontallayout/> </s:layout.landscape> <s:textinput text="enter search text" textalpha="0.5"/> <s:button label="search"/> </s:group> <s:textarea text="search results" textalpha="0.5"/> </s:view> Cet exemple définit une vue de recherche. Le conteneur Group contrôle la présentation du texte de recherche saisi et du bouton de recherche. En mode portrait, le conteneur Group utilise la présentation verticale. Le passage de la présentation au mode paysage incite le conteneur Group à utiliser une présentation horizontale. Définition d un habillage personnalisé pour prendre en charge les modes de présentation Vous pouvez définir une classe d habillages personnalisée pour une application mobile. Si l habillage prend en charge la présentation portrait et paysage, votre habillage doit gérer les états des vues portrait et paysage. Vous pouvez configurer une application de telle sorte qu elle ne modifie pas l orientation de la présentation lorsque l utilisateur fait pivoter le périphérique. Pour ce faire, modifiez le fichier XML de l application, celui qui se termine par -app.xml, afin de définir les propriétés suivantes : Pour empêcher l application de modifier l orientation de la présentation, définissez la propriété <autoorients> sur false. Pour définir l orientation, définissez la propriété <aspectratio> sur portrait ou paysage. Définition du mode d incrustation d un conteneur Spark ViewNavigator Par défaut, la barre d onglets et le contrôle ActionBar d une application mobile définissent une zone qui ne peut pas être utilisée par les vues de l application. Cela signifie que votre contenu ne peut pas utiliser toute la taille de l écran du périphérique mobile. Vous pouvez toutefois utiliser la propriété ViewNavigator.overlayControls pour modifier la présentation par défaut de ces composants. Lorsque vous définissez la propriété overlaycontrols sur true, la zone de contenu de l application couvre toute la largeur et toute la hauteur de l écran. Le contrôle ActionBar et la barre d onglets chevauchent la zone de contenu avec une valeur alpha qui les rend partiellement transparents.

Interface utilisateur et présentation 49 La classe d habillage pour le conteneur ViewNavigator, spark.skins.mobile.viewnavigatorskin, définit les états des vues afin de gérer les différentes valeurs de la propriété overlaycontrols. Lorsque la propriété overlaycontrols est true, «AndOverlay» est annexé au nom de l état actuel. Par exemple, l habillage de ViewNavigator est l état «portrait» par défaut. Lorsque la propriété overlaycontrols est true, l état de l habillage du navigateur passe à «portraitandoverlay». Cycle de vie des conteneurs Spark ViewNavigator et View Flex procède à une série d opérations lorsque vous passez d une vue à une autre dans une application mobile. A différents stades du processus de changement de vue, Flex envoie des événements. Vous pouvez surveiller ces événements pour effectuer des actions au cours du processus. Vous pouvez par exemple utiliser l événement suppression pour annuler le passage d une vue à une autre.

Interface utilisateur et présentation 50 La figure suivante décrit le processus de passage de la vue actuelle, la Vue A, à une autre vue, la Vue B : La vue A distribue REMOVING Opération d'annulation Annuler l'événement REMOVING? Désactiver l'interaction avec la souris sur ViewNavigator Créer une instance de vue B, si nécessaire Initialiser les propriétés des données et du navigateur pour la vue Ajouter la vue B à la liste d'affichage ViewNavigator distribue l'événement ELEMENT_ADD La vue B distribue l'événement ADD La vue B distribue l'événement CREATION_COMPLETE La vue A distribue l'événement VIEW_DEACTIVATE S'il existe une transition, appeler ViewTransition.prepare() Mettre ActionBar à jour, si nécessaire S'il existe une transition, appeler ViewTransition.play() Supprimer la vue A de la liste d'affichage ViewNavigator distribue l'événement ELEMENT_REMOVE La vue A distribue l'événement REMOVE ViewNavigator active l'entrée de la souris La vue B distribue l'événement VIEW_ACTIVATE Définition d onglets dans une application mobile Définition des sections d une application Utilisez le conteneur TabbedViewNavigatorApplication pour définir une application mobile comprenant plusieurs sections. Le conteneur TabbedViewNavigatorApplication crée automatiquement un conteneur TabbedMobileNavigator. Le conteneur TabbedViewNavigator crée une barre d onglets pour prendre en charge la navigation entre les sections de l application.

Interface utilisateur et présentation 51 Chaque conteneur ViewNavigator définit une section différente de l application. Utilisez la propriété navigators du conteneur TabbedViewNavigatorApplication pour spécifier les conteneurs ViewNavigator. Dans l exemple ci-dessous, vous définissez trois sections correspondant aux trois balises ViewNavigator. Chaque ViewNavigator définit la première vue qui apparaît lorsque vous accédez à la section: <!-- containers\mobile\sparkmultiplesections.mxml --> <s:tabbedviewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:navigators> <s:viewnavigator label="employees" firstview="views.employeemainview"/> <s:viewnavigator label="contacts" firstview="views.contactsmainview"/> <s:viewnavigator label="search" firstview="views.searchview"/> </s:navigators> </s:tabbedviewnavigatorapplication> Remarque : vous n avez pas à spécifier la balise enfant navigators dans le code MXML car il s agit de la propriété par défaut de TabbedViewNavigator. Chaque ViewNavigator gère une pile de navigation distincte. Par conséquent, les méthodes ViewNavigator, telles que pushview() et popview() concernent la section actuellement active. Le bouton retour sur le périphérique mobile retourne le contrôle vers la vue précédente sur la pile du conteneur ViewNavigator actuel. Le changement de vue n altère pas la section actuelle. Vous n avez pas à ajouter une logique particulière à l application pour la navigation dans les sections. Le conteneur TabbedViewNavigator crée automatiquement une barre d onglets au bas de l application afin de contrôler la navigation entre les sections. Même si cela n est pas obligatoire, vous pouvez ajouter un contrôle programmatique de la section actuelle. Pour modifier les sections par programmation, définissez la propriété TabbedViewNavigator.selectedIndex sur l index de la section désirée. Les index des sections sont de base 0, c est-à-dire que la première section de l application est à l index 0, la deuxième à l index 1, etc. Brent Arnold, expert Flex certifié par Adobe, a conçu une vidéo concernant l utilisation d une pile de navigation ViewNavigator. La spécialiste d Adobe Holly Schinsky explique les différentes manières de transmettre les données entre les onglets d une application mobile dans l article Flex Mobile Development - Passing Data Between Tabs. Une vidéo de video2brain sur le conteneur TabbedViewNavigator est disponible sur le site Creating a Tabbed View Navigator Application. Gestion des événements de changement de section Lorsque la section change, le conteneur TabbedViewNavigator envoie les événements suivants : L événement changing est envoyé juste avant le passage d une section à une autre. Pour empêcher le changement de section, appelez la méthode preventdefault() dans le gestionnaire d événement pour l événement changing. L événement change est envoyé juste après le changement de section.

Interface utilisateur et présentation 52 Configuration de l ActionBar avec des sections multiples Un contrôle ActionBar est associé à un conteneur ViewNavigator. Par conséquent, vous pouvez configurer le contrôle ActionBar pour chaque section lorsque vous définissez le conteneur ViewNavigator de la section. Dans l exemple suivant, vous configurez le contrôle ActionBar séparément pour chaque conteneur ViewNavigator qui définit les trois sections différentes de l application : <!-- containers\mobile\sparkmultiplesectionsab.mxml --> <s:tabbedviewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:script> <![CDATA[ protected function button1_clickhandler(event:mouseevent):void { // Switch to the first section in the application. tabbednavigator.selectedindex = 0; // Switch to the first view in the section. ViewNavigator(tabbedNavigator.selectedNavigator).popToFirstView(); ]]> </fx:script> <s:navigators> <s:viewnavigator label="employees" firstview="views.employeemainview"> <s:navigationcontent> <s:button icon="@embed(source='assets/home.png')" click="button1_clickhandler(event)"/> </s:navigationcontent> </s:viewnavigator> <s:viewnavigator label="contacts" firstview="views.contactsmainview"> <s:navigationcontent> <s:button icon="@embed(source='assets/home.png')" click="button1_clickhandler(event)"/> </s:navigationcontent> </s:viewnavigator> <s:viewnavigator label="search" firstview="views.searchview"> <s:navigationcontent> <s:button icon="@embed(source='assets/home.png')" click="button1_clickhandler(event)"/> </s:navigationcontent> </s:viewnavigator> </s:navigators> </s:tabbedviewnavigatorapplication>

Interface utilisateur et présentation 53 La figure suivante montre cette application avec l onglet Contacts sélectionné dans la barre d onglets : Il est également possible de définir l ActionBar dans chaque vue de l application. De cette manière, chaque vue utilise le même contenu ActionBar, où que vous l utilisiez dans l application. Contrôle de la barre d onglets Masquage du contrôle de la barre d onglets dans une vue N importe quelle vue peut masquer la barre d onglets si vous définissez la propriété View.tabBarVisible sur false. Par défaut, la propriété tabbarvisible a la valeur true pour afficher la barre d onglets. Vous pouvez également faire appel aux méthodes TabbedViewNavigator.hideTabBar() et TabbedViewNavigator.showTabBar() pour contrôler la visibilité. Brent Arnold, expert Flex certifié par Adobe, a conçu une vidéo sur le masquage de la barre des onglets. Application d un effet à la barre d onglets du conteneur TabbedViewNavigator Par défaut, la barre d onglets utilise un effet de glissement pour ses effets d affichage et de masquage. La barre d onglets n utilise aucun effet lorsque vous changez l onglet actuellement sélectionné. Vous pouvez modifier l effet par défaut de la barre d onglets pour un effet d affichage ou de masquage en remplaçant les méthodes TabbedViewNavigator.createTabBarHideEffect() et TabbedViewNavigator.createTabBarShowEffect(). Après avoir masqué la barre d onglets, pensez à définir les propriétés visible et includeinlayout de la barre d onglets sur false. Création de plusieurs panneaux dans une application mobile SplitViewNavigator est un conteneur habillable affichant au moins deux navigateurs de vue enfant dans un même écran sur un périphérique mobile. Chaque navigateur de vue s affiche dans un panneau séparé, géré par le conteneur SplitViewNavigator.

Interface utilisateur et présentation 54 Les enfants du conteneur SplitViewNavigator peuvent uniquement être des composants qui étendent ViewNavigatorBase. Vous pouvez donc utiliser les conteneurs ViewNavigator et TabbedViewNavigator comme ses enfants. Remarque : Adobe recommande de n utiliser le conteneur SplitViewNavigator que sur une tablette en raison de l espace requis pour afficher plusieurs panneaux à la fois. Par défaut, SplitViewNavigator présente les panneaux, correspondant à ses enfants, à l horizontale. Vous pouvez spécifier une mise en forme à la verticale ou définir une mise en forme personnalisée. Création d un conteneur SplitViewNavigator Le modèle d interface le plus courant pour les périphérique de type tablette est le motif maître/détail. Ce motif divise l écran en deux zones de contenu : le panneau principal et le panneau des détails. Généralement, l utilisateur contrôle l affichage du contenu du panneau des détails depuis le panneau principal. Chaque panneau correspond à un enfant du conteneur SplitViewNavigator, les enfants étant des conteneurs ViewNavigator ou TabbedViewNavigator. Ses enfants étant des navigateurs de vue, le navigateur de vue de chaque panneau contient sa propre pile de vues et sa propre barre d action. L image ci-dessous montre le conteneur SplitViewNavigator dans une application composée d un panneau principal et d un panneau des détails : Dans cet exemple, le panneau principal situé à gauche contient une liste Spark affichant un ensemble de produits Adobe. Le panneau des détails, situé sur la droite, affiche des informations supplémentaires sur le produit sélectionné dans le panneau principal. Ci-dessous, le fichier de l application principale correspondant à cet exemple : <!-- containers\mobile\sparksplitvnsimple.mxml --> <s:application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:splitviewnavigator width="100%" height="100%"> <s:viewnavigator width="256" height="100%" firstview="views.mastercategory"/> <s:viewnavigator width="100%" height="100%" firstview="views.detailview"/> </s:splitviewnavigator> </s:application> Un conteneur SplitViewNavigator peut être l enfant du conteneur Application ou des conteneurs TabbedViewNavigatorApplication. Dans cet exemple, le conteneur SplitViewNavigator est le seul enfant du conteneur Application. Notez que le conteneur SplitViewNavigator spécifie une hauteur et une largeur de 100 % afin d occuper l intégralité de l écran du périphérique.

Interface utilisateur et présentation 55 Dans cet exemple, les enfants du conteneur SplitViewNavigator sont des conteneurs ViewNavigator. Le premier ViewNavigator définit le panneau principal et le second définit le panneau des détails. Remarque : un conteneur SplitViewNavigator peut avoir plus de deux enfants. Vous pouvez donc créer un conteneur SplitViewNavigator comptant trois ou quatre panneaux, voire plus. Accès aux panneaux et aux vues d un conteneur SplitViewNavigator Le conteneur SplitViewNavigator définit les méthodes et propriétés utilisées pour accéder à ses enfants. Par exemple, utilisez la propriété SplitViewNavigator.numViewNavigators afin de déterminer le nombre de navigateurs de vue enfant du conteneur SplitViewNavigator. Utilisez la méthode SplitViewNavigator.getViewNavigatorAt() pour accéder aux enfants du conteneur SplitViewNavigator basé sur l index de l enfant. Dans l exemple ci-dessus, le conteneur ViewNavigator du panneau principal est associé à l index 0 et le conteneur ViewNavigator du panneau des détails est associé à l index 1. Remarque : le conteneur SplitViewNavigator hérite des méthodes getelementat() et getelementindex(). N utilisez pas ces méthodes avec SplitViewNavigator. Utilisez plutôt getviewnavigatorat(). A partir d une référence au conteneur ViewNavigator pour un panneau individuel, le conteneur SplitViewNavigator peut accéder aux vues individuelles du panneau. Accédez au conteneur SplitViewNavigator depuis un enfant en utilisant la propriété parentnavigator de l enfant. Par exemple, ViewNavigator.parentNavigator contient une référence au conteneur parent SplitViewNavigator. Un conteneur View accède à son navigateur de vue parent à l aide de la propriété View.navigator. Ainsi, une vue peut accéder au conteneur SplitViewNavigator à l aide de la propriété View.navigator.parentNavigator. Dans l exemple ci-dessus, le conteneur ViewNavigator pour le panneau principal spécifie MasterCategory comme sa première vue. Cette vue est définie dans le fichier MasterCategory.mxml, comme indiqué ci-dessous : <!-- containers\mobile\views\mastercategory.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="master"> <fx:script> <![CDATA[ import spark.components.splitviewnavigator; import spark.components.viewnavigator; import spark.events.indexchangeevent; protected function mylist_changehandler(event:indexchangeevent):void { // Create a reference to the SplitViewNavigator. var splitnavigator:splitviewnavigator = navigator.parentnavigator as SplitViewNavigator; // Create a reference to the ViewNavigator for the Detail frame. var detailnavigator:viewnavigator = splitnavigator.getviewnavigatorat(1) as ViewNavigator; // Change the view of the Detail frame based on the selected List item. detailnavigator.pushview(detailview, mylist.selecteditem); ]]> </fx:script> <s:list width="100%" height="100%" id="mylist" change="mylist_changehandler(event);">

Interface utilisateur et présentation 56 <s:dataprovider> <s:arraycollection> <fx:object Product="Adobe AIR" Price="11.99" Image="@Embed(source='../assets/air_icon_sm.jpg')" Description="Try AIR." Link="air"/> <fx:object Product="Adobe ColdFusion" Price="11.99" Image="@Embed(source='../assets/coldfusion_icon_sm.jpg')" Description="Try ColdFusion." Link="coldfusion"/> <fx:object Product="Adobe Flash Player" Price="11.99" Image="@Embed(source='../assets/flashplayer_icon_sm.jpg')" Description="Try Flash." Link="flashplayer"/> <fx:object Product="Adobe Flex" Price="Free" Image="@Embed(source='../assets/flex_icon_sm.jpg')" Description="Try Flex." Link="flex.html"/> <fx:object Product="Adobe LiveCycleDS" Price="11.99" Image="@Embed(source='../assets/livecycleds_icon_sm.jpg')" Description="Try LiveCycle DS." Link="livcycle"/> <fx:object Product="Adobe LiveCycle ES2" Price="11.99" Image="@Embed(source='../assets/livecyclees_icon_sm.jpg')" Description="Try LiveCycle ES." Link="livcycle"/> </s:arraycollection> </s:dataprovider> <s:itemrenderer> <fx:component> <s:iconitemrenderer labelfield="product" iconfield="image"/> </fx:component> </s:itemrenderer> </s:list> </s:view> MasterCategory.mxml définit un contrôle List unique contenant des informations sur les produits Adobe. Le contrôle List utilise un rendu d élément personnalisé afin d afficher un libellé et une icône pour chaque produit. Pour plus d informations à propos de ces rendus d élément, voir Utilisation d un rendu d élément mobile avec un contrôle basé sur une liste Spark. Le contrôle List dans le panneau principal utilise l événement Modifier pour mettre à jour le panneau des détails en réponse à l action d un utilisateur. Le gestionnaire d événement obtient tout d abord une référence au conteneur SplitViewNavigator. A partir de cette référence, il obtient une référence au conteneur ViewNavigator du cadre des détails. Enfin, le gestionnaire d événement appelle la méthode push() sur le conteneur ViewNavigator du cadre des détails. La méthode push() prend deux arguments, la vue empilée sur la pile du conteneur ViewNavigator, ainsi qu un objet contenant des informations à propos de l élément List sélectionné. Mise à jour du panneau des détails d un conteneur SplitViewNavigator Le panneau des détails de l exemple ci-dessous affiche des informations à propos de l élément sélectionné dans le contrôle List du panneau principal. Le panneau des détails est appelé DetailView et il est défini dans le fichier MXML DetailView, comme indiqué ci-dessus :

Interface utilisateur et présentation 57 <!-- containers\mobile\views\detailview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="detail"> <s:layout> <s:verticallayout paddingtop="10" paddingleft="10" paddingright="10"/> </s:layout> <fx:script> <![CDATA[ // Use navigatetourl() to open a link to the product page. protected function label1_clickhandler(event:mouseevent):void { var destinationurl:string = "http://www.adobe.com/products/" + data.link; navigatetourl(new URLRequest(destinationURL)); ]]> </fx:script> <s:vgroup width="461" height="670"> <s:image source="{data.image" height="176" width="169" horizontalcenter="0" top="0"/> <s:label text="{data.product" fontsize="24" fontweight="bold" top="100" left="0"/> <s:label text="price: {data.price" top="125" left="0"/> <s:textarea y="174" width="100%" height="20%" contentbackgroundcolor="0xcc6600" text="{data.description"/> <s:label text="click for more information" color="#0000ff" click="label1_clickhandler(event)"/> </s:vgroup> </s:view> Le panneau principal transfère un objet au fichier DetailView.mxml correspondant à l élément sélectionné dans le contrôle List. Le panneau des détails accède à ces données à l aide de la propriété View.data. Il affiche ensuite l image du produit et les informations concernant le produit et crée un hyperlien vers une page contenant plus d informations à propos du produit. Pour plus d informations sur le transfert des données vers un conteneur View, voir «Communication de données à une vue» à la page 42. Affichage des panneaux en fonction de l orientation du périphérique Lorsque vous développez une application pour une tablette, vous pouvez utiliser une présentation différente en fonction de l orientation de la tablette. Par exemple, en mode paysage, la tablette offre un écran large pouvant facilement afficher plusieurs panneaux à la fois. Avec l orientation portrait, l écran est étroit, vous pouvez donc choisir de masquer un panneau en raison de la largeur réduite de l écran.

Interface utilisateur et présentation 58 Le conteneur SplitViewNavigator définit la propriété autohidefirstviewnavigator utilisée pour contrôler la visibilité du premier panneau selon les différentes orientations. Par défaut, la propriété autohidefirstviewnavigator est définie sur false afin que le conteneur affiche le premier panneau quelle que soit l orientation. Lorsque vous définissez autohidefirstviewnavigator sur true, le conteneur affiche le premier panneau en mode paysage et le masque en mode portrait. Le conteneur SplitViewNavigator masque le premier panneau en définissant la propriété visible du navigateur de vue associé sur false. En mode portrait avec le premier panneau masqué, utilisez la méthode SplitViewNavigator.showFirstViewNavigatorInPopUp() pour l ouvrir. Lorsque vous l appelez, cette méthode ouvre le premier panneau dans un conteneur Callout. Un conteneur Callout est un conteneur de fenêtre contextuelle qui s affiche dans la partie supérieure de votre application, comme illustré dans l image ci-dessous : Cet exemple contient également un bouton «Show Navigator» (Afficher le navigateur) dans la barre d action du panneau des détails du conteneur SplitViewNavigator. Lorsque que le premier panneau du conteneur est masqué, l utilisateur sélectionne ce bouton pour ouvrir le panneau principal. Remarque : créez un habillage personnalisé pour que le conteneur SplitViewNavigator ouvre le premier panneau dans un conteneur SkinnablePopUpContainer ou dans une sous-classe du conteneur SkinnablePopUpContainer. La méthode showfirstviewnavigatorinpopup() est ignorée lorsque le conteneur Callout est déjà ouvert. Lorsque le périphérique est orienté en mode paysage, le conteneur Callout se ferme automatiquement et le premier panneau réapparaît. Lorsque l utilisateur clique à l extérieur du conteneur Callout, ce dernier se ferme. Vous pouvez également le fermer en appelant la méthode SplitViewNavigator.hideViewNavigatorPopUp(). Pour plus d informations sur le conteneur Callout, voir «Ajout d un conteneur Callout à une application mobile» à la page 82. Ajout d une barre d action à un panneau affiché dans un conteneur Callout Ci-dessous figure le fichier de l application principale qui définit la propriété autohidefirstviewnavigator du conteneur SplitViewNavigator sur true. Cet exemple utilise les états d affichage pour ajouter un bouton à la barre d action du panneau des détails lorsque le périphérique est en mode portrait :

Interface utilisateur et présentation 59 <!-- containers\mobile\sparksvnorient.mxml --> <s:application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" resize="resizehandler(event);"> <fx:script> <![CDATA[ import mx.events.resizeevent; // Update the state based on the orientation of the device. protected function resizehandler(event:resizeevent):void { currentstate = aspectratio; ]]> </fx:script> <s:states> <s:state name="portrait"/> <s:state name="landscape"/> </s:states> <s:splitviewnavigator id="splitnavigator" width="100%" height="100%" autohidefirstviewnavigator="true"> <s:viewnavigator width="256" height="100%" firstview="views.mastercategoryorient"/> <s:viewnavigator width="100%" height="100%" firstview="views.detailview"> <s:actioncontent.portrait> <s:button id="navigatorbutton" label="show Navigator" click="splitnavigator.showfirstviewnavigatorinpopup(navigatorbutton);"/> </s:actioncontent.portrait> </s:viewnavigator> </s:splitviewnavigator> </s:application> L application ajoute un gestionnaire d événements pour l événement resize dans le conteneur de l application. Flex envoie l événement resize lorsque la tablette change d orientation. Dans le gestionnaire d événement pour l événement resize, définissez l état de vue de l application en fonction de l orientation actuelle. Pour plus d informations sur les états de vue, voir Etats des vues. Le navigateur de vue pour le panneau des détails utilise l état actuel pour contrôler l aspect d un contrôle Button dans la barre d action. En mode paysage, le bouton est masqué car le panneau principal est visible. En mode portrait, lorsque le panneau principal est masqué, le contrôle Button est visible dans la barre d action du panneau des détails. L utilisateur sélectionne alors le contrôle Button pour ouvrir le Callout contenant le panneau principal. Transférez une référence au contrôle Button en tant qu argument pour la méthode showfirstviewnavigatorinpopup(). Cet argument spécifie l hôte du conteneur Callout, c est-à-dire que Callout est positionné en fonction du contrôle Button.

Interface utilisateur et présentation 60 Fermeture de la légende SplitViewNavigator en réponse à une action de l utilisateur Lorsque l utilisateur clique à l extérieur du conteneur Callout, ce dernier se ferme. Par défaut, lorsque vous cliquez à l intérieur du conteneur Callout, ce dernier ne se ferme pas. Cet exemple ferme le conteneur Callout lorsque l utilisateur sélectionne un élément de la liste en appelant la méthode SplitViewnavigator.hideViewNavigatorPopUp(). Vous pouvez appeler cette méthode dans le gestionnaire d événement change du contrôle List, comme indiqué dans l exemple suivant : <!-- containers\mobile\views\mastercategoryorient.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="master"> <fx:script> <![CDATA[ import mx.events.flexevent; import spark.components.splitviewnavigator; import spark.components.viewnavigator; import spark.events.indexchangeevent; protected function mylist_changehandler(event:indexchangeevent):void { // Create a reference to the SplitViewNavigator. var splitnavigator:splitviewnavigator = navigator.parentnavigator as SplitViewNavigator; // Create a reference to the ViewNavigator for the Detail frame. var detailnavigator:viewnavigator = splitnavigator.getviewnavigatorat(1) as ViewNavigator; // Change the view of the Detail frame based on the selected List item. detailnavigator.pushview(detailview, mylist.selecteditem); // If the Master is open in a callout, close it. // Otherwise, this method does nothing. splitnavigator.hideviewnavigatorpopup(); ]]> </fx:script> <s:list width="100%" height="100%" id="mylist" change="mylist_changehandler(event);"> <s:dataprovider> <s:arraycollection> <fx:object Product="Adobe AIR" Price="11.99" Image="@Embed(source='../assets/air_icon_sm.jpg')" Description="Try AIR." Link="air"/> <fx:object Product="Adobe ColdFusion" Price="11.99" Image="@Embed(source='../assets/coldfusion_icon_sm.jpg')" Description="Try ColdFusion." Link="coldfusion"/> <fx:object Product="Adobe Flash Player" Price="11.99" Image="@Embed(source='../assets/flashplayer_icon_sm.jpg')" Description="Try Flash." Link="flashplayer"/>

Interface utilisateur et présentation 61 <fx:object Product="Adobe Flex" Price="Free" Image="@Embed(source='../assets/flex_icon_sm.jpg')" Description="Try Flex." Link="flex.html"/> <fx:object Product="Adobe LiveCycleDS" Price="11.99" Image="@Embed(source='../assets/livecycleds_icon_sm.jpg')" Description="Try LiveCycle DS." Link="livcycle"/> <fx:object Product="Adobe LiveCycle ES2" Price="11.99" Image="@Embed(source='../assets/livecyclees_icon_sm.jpg')" Description="Try LiveCycle ES." Link="livcycle"/> </s:arraycollection> </s:dataprovider> <s:itemrenderer> <fx:component> <s:iconitemrenderer labelfield="product" iconfield="image"/> </fx:component> </s:itemrenderer> </s:list> </s:view> Implémentation de la persistance pour le conteneur SplitViewNavigator Une application destinée à un périphérique mobile est souvent interrompue par d autres actions, telles qu un texto, un appel téléphonique ou d autres applications mobiles. Généralement, lorsqu une application interrompue est relancée, l utilisateur s attend à ce que l état précédent de l application soit restauré. Le mécanisme de persistance permet au périphérique de restaurer l application à son état antérieur. Pour plus d informations, voir «Activation de la persistance dans une application mobile» à la page 128. SplitViewNavigator implémente les méthodes loadviewdata() et saveviewdata() qu il hérite de la classe de base ViewNavigatorBase. Ainsi, le conteneur SplitViewNavigator peut sérialiser et désérialiser la pile de navigation et afficher les données pour chacun de ses navigateurs enfants. Toutefois, vous devez appeler ces méthodes manuellement lorsque votre application est interrompue, tel qu indiqué dans l exemple suivant : <!-- containers\mobile\sparksplitvnpersist.mxml --> <s:application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" initialize="initializehandler(event);"> <fx:script> <![CDATA[ import mx.events.flexevent; import spark.managers.persistencemanager; // Create an instance of the PersistenceManager. public var persistencemanager:persistencemanager; // Event handler to initialize SplitViewNavigator. protected function initializehandler(event:flexevent):void { ondeactivate); // Register the event handler for the deactivate event. NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE,

Interface utilisateur et présentation 62 persistencemanager = new PersistenceManager(); persistencemanager.load(); var data:object = persistencemanager.getproperty("navigatorstate"); if (data) splitnavigator.loadviewdata(data); // Event handler to save SplitViewNavigator on application deactivate event. protected function ondeactivate(event:event):void { persistencemanager.setproperty("navigatorstate", splitnavigator.saveviewdata()); persistencemanager.save(); ]]> </fx:script> <s:splitviewnavigator id="splitnavigator" width="100%" height="100%"> <s:viewnavigator width="256" height="100%" firstview="views.mastercategory"/> <s:viewnavigator width="100%" height="100%" firstview="views.detailview"/> </s:splitviewnavigator> </s:application> Définition de contrôles de navigation, de titre et d action dans une application mobile Configuration du contrôle ActionBar Le conteneur ViewNavigator définit le contrôle ActionBar. Le contrôle ActionBar fournit une zone standard pour un titre et pour les contrôles de navigation et d action. Il vous permet de définir des contrôles globaux auxquels les utilisateurs peuvent accéder en tout point de l application ou dans une vue spécifique. Vous pouvez par exemple utiliser le contrôle ActionBar pour ajouter un bouton d accueil, un bouton de recherche ou d autres options. Pour une application mobile disposant d une seule section, ce qui signifie un seul conteneur ViewNavigator, toutes les vues partagent la même barre d action. Pour une application mobile comprenant plusieurs sections, et par conséquent, plusieurs conteneurs ViewNavigator, chaque section définit sa propre barre d action. Utilisez le contrôle ActionBar pour définir la zone de la barre d action. Le contrôle ActionBar définit trois zones distinctes, comme le montre la figure suivante : A B C A. Zone de navigation B. Zone de titre C. Zone d action

Interface utilisateur et présentation 63 Zones de l ActionBar Zone de navigation Contient des composants qui permettent à l utilisateur de naviguer dans la section. Par exemple, vous pouvez définir un bouton d accueil dans la zone de navigation. Utilisez la propriété navigationcontent pour définir les composants qui apparaissent dans la zone de navigation. Utilisez la propriété navigationlayout pour définir la présentation de la zone de navigation. Zone de titre Contient soit une chaîne contenant le texte du titre, soit des composants. Si vous spécifiez des composants, vous ne pouvez pas spécifier une chaîne de titre. Utilisez la propriété title pour spécifier la chaîne qui doit apparaître dans la zone de titre. Utilisez la propriété titlecontent pour définir les composants qui figurent dans la zone de titre. Utilisez la propriété titlelayout pour définir la présentation de la zone de titre. Si vous spécifiez une valeur pour la propriété titlecontent, l habillage ActionBar ignore la propriété title. Zone d action Contient des composants qui définissent des actions que l utilisateur peut effectuer dans une vue. Par exemple, vous pouvez définir un bouton de recherche ou d actualisation dans la zone d action. Utilisez la propriété actioncontent pour définir les composants qui apparaissent dans la zone d action. Utilisez la propriété actionlayout pour définir la présentation de la zone d action. Même si Adobe recommande d utiliser les zones de navigation, de titre et d action décrites, il n existe aucune restriction sur le type de composant que vous placez dans ces zones. Définition de propriétés ActionBar dans le conteneur ViewNavigatorApplication, ViewNavigator ou View Vous pouvez définir les propriétés qui définissent le contenu du contrôle ActionBar dans le conteneur ViewNavigatorApplication, dans le conteneur ViewNavigator ou dans des conteneurs View individuels. Le conteneur View possède la priorité la plus élevée, suivi du conteneur ViewNavigator, puis du conteneur ViewNavigatorApplication. Par conséquent, les propriétés que vous définissez dans le conteneur ViewNavigatorApplication s appliquent à l application entière, mais vous pouvez les remplacer dans le conteneur ViewNavigator ou View. Remarque : un contrôle ActionBar est associé à un conteneur ViewNavigator, de sorte qu il est spécifique à une seule section d une application mobile. Vous ne pouvez donc pas configurer un contrôle ActionBar à partir des conteneurs TabbedViewNavigatorApplication et TabbedViewNavigator. Exemple : personnalisation d un contrôle ActionBar Spark au niveau de l application L exemple suivant présente le fichier de l application principale d une application mobile :

Interface utilisateur et présentation 64 <!-- containers\mobile\sparkactionbarsimple.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.mobileviewhome"> <fx:script> <![CDATA[ protected function button1_clickhandler(event:mouseevent):void { // Perform a refresh ]]> </fx:script> <s:navigationcontent> <s:button label="home" click="navigator.poptofirstview();"/> </s:navigationcontent> <s:actioncontent> <s:button label="refresh" click="button1_clickhandler(event);"/> </s:actioncontent> </s:viewnavigatorapplication> Cet exemple définit un bouton Accueil dans la zone de contenu de navigation du contrôle ActionBar et un bouton Actualiser dans la zone de contenu. L exemple suivant définit le conteneur View MobileViewHome qui détermine la première vue de l application. Le conteneur View définit une chaîne de titre, «Vue Accueil», mais ne remplace ni le contenu de la navigation, ni les zones de contenu d action du contrôle ActionBar : <!-- containers\mobile\views\mobileviewhome.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="home View"> <s:layout> <s:verticallayout paddingtop="10"/> </s:layout> <s:label text="home View"/> <s:button label="submit"/> </s:view> Exemple : personnalisation d un contrôle ActionBar dans un conteneur View Cet exemple utilise un fichier d application principal avec une section individuelle qui définit un bouton Accueil dans la zone de navigation du conteneur ViewNavigatorApplication. Il définit également un bouton Recherche dans la zone d action :

Interface utilisateur et présentation 65 <!-- containers\mobile\sparkactionbaroverride.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.mobileviewhomeoverride"> <fx:script> <![CDATA[ protected function button1_clickhandler(event:mouseevent):void { navigator.poptofirstview(); protected function button2_clickhandler(event:mouseevent):void { // Handle search ]]> </fx:script> <s:navigationcontent> <s:button icon="@embed(source='assets/home.png')" click="button1_clickhandler(event);"/> </s:navigationcontent> <s:actioncontent> <s:button icon="@embed(source='assets/search.png')" click="button2_clickhandler(event);"/> </s:actioncontent> </s:viewnavigatorapplication> La première vue de cette application est la vue MobileViewHomeOverride. La vue MobileViewHomeOverride définit un contrôle Button afin de naviguer jusqu à un deuxième conteneur View qui définit une page Recherche : <!-- containers\mobile\views\mobileviewhomeoverride.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="home View"> <s:layout> <s:verticallayout paddingtop="10"/> </s:layout> <fx:script> <![CDATA[ // Navigate to the Search view. protected function button1_clickhandler(event:mouseevent):void { navigator.pushview(searchviewoverride); ]]> </fx:script> <s:label text="home View"/> <s:button label="search" click="button1_clickhandler(event)"/> </s:view> Le conteneur View qui définit la page Recherche remplace la zone de titre et la zone d action du contrôle ActionBar, comme indiqué ci-dessous :

Interface utilisateur et présentation 66 <!-- containers\mobile\views\searchviewoverride.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:layout> <s:verticallayout paddingtop="10" paddingleft="10" paddingright="10"/> </s:layout> <fx:script> <![CDATA[ protected function button1_clickhandler(event:mouseevent):void { // Perform a search. ]]> </fx:script> <!-- Override the title to insert a TextInput control. --> <s:titlecontent> <s:textinput text="enter search text..." textalpha="0.5" width="250"/> </s:titlecontent> <!-- Override the action area to insert a Search button. --> <s:actioncontent> <s:button label="search" click="button1_clickhandler(event);"/> </s:actioncontent> <s:label text="search View"/> <s:textarea text="search results appear here..." height="75%"/> </s:view> La figure suivante présente le contrôle ActionBar pour cette vue : Dans la mesure où la vue Recherche ne remplace pas la zone de navigation du contrôle ActionBar, la zone de navigation affiche toujours le bouton Accueil.

Interface utilisateur et présentation 67 Masquage du contrôle ActionBar Vous pouvez masquer le contrôle ActionBar dans une vue quelconque en définissant la propriété View.actionBarVisible sur false. Par défaut, la propriété actionbarvisible est true pour afficher le contrôle ActionBar. Utilisez la méthode ViewNavigator.hideActionbar() pour masquer le contrôle ActionBar pour toutes les vues contrôlées par le conteneur ViewNavigator, comme l indique l exemple suivant : <!-- containers\mobile\sparksinglesectionnoab.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.homeview" creationcomplete="creationcompletehandler(event);"> <fx:script> <![CDATA[ import mx.events.flexevent; protected function creationcompletehandler(event:flexevent):void { // Access the ViewNavigator using the ViewNavigatorApplication.navigator property. navigator.hideactionbar(); ]]> </fx:script> </s:viewnavigatorapplication> Vous pouvez définir un effet personnalisé pour l ActionBar lorsque celui-ci est masqué, ou lorsqu il est rendu visible. Par défaut, le contrôle ActionBar fait appel à l effet Animer comme effet d affichage et de masquage. Vous pouvez modifier l effet par défaut en substituant les méthodes ViewNavigator.createActionBarHideEffect() et ViewNavigator.createActionBarShowEffect(). Après avoir affiché un effet qui masque le contrôle ActionBar, définissez ses propriétés visible et includeinlayout sur false afin qu il ne soit plus inclus dans la présentation de la vue. Utilisation des barres de défilement dans une application mobile Considérations liées à l utilisation des barres de défilement dans une application mobile Généralement, si le contenu occupe plus que la zone visible à l écran, l application affiche des barres de défilement. Utilisez le contrôle Scroller pour ajouter des barres de défilement dans votre application. Certains composants, tels que le contrôle Spark List, prennent en charge le défilement sans composant Scroller. Pour plus d informations, voir Scrolling Spark containers. La zone active d une barre de défilement est la zone de l écran dans laquelle vous placez le curseur de la souris pour effectuer un défilement. Dans une application de bureau ou de navigateur, la zone active correspond à la zone visible de la barre de défilement. Dans une application mobile, les barres de défilement sont masquées même lorsque le contenu est plus important que la zone visible de l écran. Le masquage des barres de défilement permet à l application d utiliser toute la largeur et toute la hauteur de l écran.

Interface utilisateur et présentation 68 Une application mobile doit faire une distinction entre le moment où l utilisateur agit sur un contrôle, par exemple en sélectionnant un contrôle Button, et le moment où l utilisateur souhaite faire défiler l affichage. Pour ce qui est des barres de défilement dans une application mobile, il faut garder à l esprit que les composants Flex changent souvent d apparence en réaction à une intervention de l utilisateur. Ainsi, lorsque l utilisateur appuie sur un contrôle Button, le bouton change d aspect pour indiquer qu il est sélectionné. Lorsque l utilisateur relâche le bouton, celui-ci reprend l aspect correspondant à l état désélectionné. Toutefois, lors du défilement, si l utilisateur touche l écran au niveau du bouton, vous ne souhaitez pas que le bouton change d aspect. Steven Shongrunden, ingénieur Adobe, présente un exemple d utilisation des barres de défilement dans son article sur l enregistrement de la position de défilement entre des vues dans une application Flex mobile. Termes relatifs au défilement Les termes suivants sont utilisés pour décrire le défilement dans une application mobile : Contenu : intégralité de la zone d un composant que vous pouvez faire défiler, tel qu un conteneur Group ou un contrôle List. En fonction de la taille d écran et de la présentation de l application, seul un sous-ensemble du contenu peut être visible. Aire d affichage : sous-ensemble de la zone de contenu d un composant actuellement visible. Glissement : geste de contact effectué par un utilisateur effectue lorsqu il touche une zone défilable et qu il déplace ses doigts de façon à ce que le contenu les suive. Vitesse : vitesse et direction d un geste de glissement. La vitesse est mesurée en pixels par milliseconde sur les axes X et Y. Jeter : geste de glissement qu un utilisateur effectue lorsqu il retire son doigt de l écran une fois que le geste de glissement a atteint une certaine vitesse et que le contenu continue de défiler. Rebond : un geste de glissement ou de jeter peut déplacer l aire d affichage d un composant défilable hors du contenu du composant. L aire d affichage affiche ensuite une zone vide. Lorsque vous retirez votre doigt de l écran ou que la vitesse de jeter atteint 0, l aire d affichage rebondit pour revenir à sa position initiale avec tout le contenu. Le rebond ralentit à mesure que l aire d affichage atteint sa position initiale pour permettre une transition fluide. Modes de défilement dans une application mobile Les composants défilables, tels que List et Scroller, prennent en charge différents types de défilement en fonction de la configuration des propriétés pagescrollingenabled et scrollsnappingmode du composant. Ces propriétés sont valides uniquement lorsque le style interactionmode est défini sur touch. Le tableau suivant présente les différents modes de défilement :

Interface utilisateur et présentation 69 pagescrollingenabled scrollsnappingmode Mode false (par défaut) none (par défaut) Par défaut, le défilement est basé sur les pixels. La position de défilement finale correspond au dernier emplacement des pixels après un geste de glissement ou de jeter. Par exemple, vous faites défiler un contrôle List. Le défilement s arrête lorsque vous retirez votre doigt de l écran, même si l élément List est partiellement visible. false leadingedge, center, trailingedge Le défilement est basé sur les pixels mais le contenu s aligne sur la position finale définie par la valeur de scrollsnappingmode. Par exemple, vous faites défiler le contrôle List verticalement avec scrollsnappingmode défini sur la valeur leadingedge. La position finale du contrôle List correspond à celle où le premier élément de la liste est aligné avec le haut de la liste. true none Le défilement est basé sur les pages. La taille de l aire d affichage du composant défilable détermine la taille de la page. Vous ne pouvez faire défiler qu une seule page à la fois, quel que soit le geste que vous effectuez. Faites défiler au moins 50 % de la zone visible du composant pour passer à la page suivante. Si vous faites défiler moins de 50 % de la zone visible, le composant reste sur la page actuelle. De la même manière, si le défilement est assez rapide, la page suivante s affiche. Si la vitesse de défilement n est pas suffisante, le composant reste sur la page actuelle. Lorsque la taille du contenu n est pas égale à un multiple exact de la taille de l aire d affichage, des marges supplémentaires sont ajoutées à la dernière page pour qu elle remplisse entièrement l aire d affichage. true leadingedge, center, trailingedge Le défilement est basé sur les pages mais le contenu s aligne sur la position finale définie par la valeur de scrollsnappingmode. Afin de garantir le respect du mode d alignement, la distance de défilement ne correspond pas toujours à la taille exacte de la page. Exemples de défilement dans une application mobile Dans l exemple suivant, vous utilisez un composant Scroller pour encapsuler un conteneur Group dans une application mobile. Le conteneur Group a comme enfant un contrôle Image contenant une image volumineuse. En encapsulant le conteneur Group dans le scroller, vous pouvez faire défiler l image : <!-- containers\mobile\views\sparkmobilepixelscrollerhomeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="homeview"> <s:scroller width="200" height="200"> <s:group> <s:image width="300" height="400" source="@embed(source='../assets/logo.jpg')"/> </s:group> </s:scroller> </s:view> Vous remarquerez que dans cet exemple, vous ne définissez pas les paramètres des propriétés pagescrollingenabled et scrollsnappingmode. Ainsi, le mode de défilement par défaut basé sur les pixels est utilisé et vous pouvez faire défiler n importe quel emplacement de pixel dans l image. L exemple suivant présente un contrôle List qui définit les propriétés pagescrollingenabled et scrollsnappingmode :

Interface utilisateur et présentation 70 <!-- containers\mobile\views\sparkmobilepagescrollhomeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="adobe Product List"> <s:layout> <s:verticallayout paddingtop="10" paddingleft="10" paddingright="10"/> </s:layout> <fx:script> <![CDATA[ import spark.events.indexchangeevent; protected function mylist_changehandler(event:indexchangeevent):void { navigator.pushview(views.productpricelview,mylist.selecteditem); ]]> </fx:script> <s:list id="mylist" labelfield="product" height="200" width="100%" bordervisible="true" scrollsnappingmode="leadingedge" pagescrollingenabled="true" change="mylist_changehandler(event);"> <s:dataprovider> <s:arraycollection> <fx:object Product="Adobe AIR" Price="11.99"/> <fx:object Product="Adobe BlazeDS" Price="11.99"/> <fx:object Product="Adobe ColdFusion" Price="11.99"/> <fx:object Product="Adobe Flash Player" Price="11.99"/> <fx:object Product="Adobe Flex" Price="Free"/> <fx:object Product="Adobe LiveCycleDS" Price="11.99"/> <fx:object Product="Adobe LiveCycle ES2" Price="11.99"/> <fx:object Product="Open Source Media Framework"/> <fx:object Product="Adobe Photoshop" Price="11.99"/> <fx:object Product="Adobe Illustrator" Price="11.99"/> <fx:object Product="Adobe Reader" Price="11.99"/> <fx:object Product="Adobe Acrobat" Price="11.99"/> <fx:object Product="Adobe InDesign" Price="Free"/> <fx:object Product="Adobe Connect" Price="11.99"/> <fx:object Product="Adobe Dreamweaver" Price="11.99"/> <fx:object Product="Open Framemaker"/> </s:arraycollection> </s:dataprovider> </s:list> </s:view> Dans cet exemple, le défilement des pages est utilisé avec la configuration d alignement leadingedge. De cette manière, lorsque vous faites défiler le contrôle List, il peut faire défiler une seule page à la fois. Lors du passage d une page à une autre, la position finale du contrôle correspond à celle où le premier élément de la liste est aligné avec le haut de la liste.

Interface utilisateur et présentation 71 Considérations relatives au défilement avec StageText StageText vous permet d utiliser des entrées de texte natives au sein d une application mobile, plutôt que les contrôles de champ de texte standards. Cependant, un conteneur défilable ne peut contenir un contrôle d entrée de texte, tel que le contrôle TextInput ou TextArea, qui utilise StageText. Par conséquent, afin d utiliser un contrôle d entrée de texte dans un conteneur défilable, il vous faut rhabiller le contrôle de façon à ce qu il n utilise pas StageText. Flex est livré avec des habillages pour les contrôles TextInput et TextArea qui n utilisent pas StageText. Utilisez les habillages suivants avec ces contrôles dans un conteneur défilable : spark.skins.mobile.textinputskin : habillage pour TextInput qui n utilise pas StageText. spark.skins.mobile.textareaskin : habillage pour TextArea qui n utilise pas StageText. L exemple suivant illustre l utilisation par un conteneur View de contrôles TextInput et TextArea au sein d un conteneur défilable : <!-- containers\mobile\sparkmobilestagetextscrollhomeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="homeview"> <s:layout> <s:verticallayout/> </s:layout> <!-- Create CSS class selectors that reference the skins that do not rely on StageText. --> <fx:style> @namespace s "library://ns.adobe.com/flex/spark";.mytextinputstyle { skinclass: ClassReference("spark.skins.mobile.TextInputSkin");.myTextAreaStyle { skinclass: ClassReference("spark.skins.mobile.TextAreaSkin"); </fx:style> <!-- Apply the class selectors to the TextInput and TextArea controls. --> <s:scroller width="100%" height="100%"> <s:vgroup height="250" width="100%" paddingtop="10" paddingleft="5" paddingright="10"> <s:hgroup verticalalign="middle"> <s:label text="text Input 1: " fontweight="bold"/> <s:textinput width="225" stylename="mytextinputstyle"/> </s:hgroup> <s:hgroup verticalalign="middle"> <s:label text="text Input 2: " fontweight="bold"/> <s:textinput width="225" stylename="mytextinputstyle"/> </s:hgroup> <s:hgroup verticalalign="middle">

Interface utilisateur et présentation 72 <s:label text="text Input 3: " fontweight="bold"/> <s:textinput width="225" stylename="mytextinputstyle"/> </s:hgroup> <s:hgroup verticalalign="middle"> <s:label text="text Input 4: " fontweight="bold"/> <s:textinput width="225" stylename="mytextinputstyle"/> </s:hgroup> <s:hgroup verticalalign="middle"> <s:label text="textarea 1: " fontweight="bold"/> <s:textarea width="225" height="100" stylename="mytextareastyle "/> </s:hgroup> </s:vgroup> </s:scroller> </s:view> Evénements et barres de défilement Les composants Flex s appuient sur les événements pour indiquer qu une intervention de l utilisateur s est produite. En réponse à l intervention de l utilisateur, le composant peut changer d apparence ou effectuer une autre action. Les développeurs d application utilisent les événements pour gérer les interventions de l utilisateur. Par exemple, vous utilisez généralement l événement click du contrôle Button pour exécuter un gestionnaire d événement en réponse à la sélection du bouton par l utilisateur. Utilisez l événement change du contrôle List pour exécuter un gestionnaire d événement lorsque l utilisateur sélectionne un élément dans la liste. Le mécanisme de défilement Flex repose sur l événement mousedown. Cela signifie que le mécanisme de défilement écoute les événements mousedown pour déterminer si une opération de défilement doit être lancée. Interprétation d un geste utilisateur en tant qu opération de défilement Une application est composée de plusieurs contrôles Button dans un conteneur défilable : 1 Utilisez votre doigt pour appuyer sur un contrôle Button. Le bouton envoie un événement mousedown. 2 Flex diffère la réponse à l intervention de l utilisateur pendant une durée prédéfinie. Le délai permet de garantir que l utilisateur sélectionne le bouton et ne tente pas d effectuer un défilement dans l écran. Si, au cours de cette période, vous déplacez votre doigt sur une distance supérieure à celle qui est prédéfinie, Flex interprète ce geste comme une action de défilement. La distance sur laquelle vous devez déplacer votre doigt pour que le geste soit interprété comme un défilement est d environ 0,08 pouce. Cette distance correspond à environ 20 pixels sur un périphérique de 252 PPP. Comme vous avez déplacé votre doigt avant l expiration du délai, le contrôle Button ne reconnaît jamais l intervention. Le bouton n envoie pas d événement et ne change jamais d aspect. 3 Une fois le délai écoulé, le contrôle Button reconnaît l intervention de l utilisateur. Le bouton change d aspect pour indiquer qu il a été sélectionné. Utilisez la propriété touchdelay du contrôle pour configurer la durée de ce délai. La valeur par défaut est de 100 ms. Si vous définissez la propriété touchdelay sur 0, il n y a pas de délai et le défilement est immédiatement déclenché.

Interface utilisateur et présentation 73 4 Après l expiration du délai et lorsque Flex a envoyé les événements de souris, vous déplacez votre doigt sur une distance supérieure à 20 pixels. Le contrôle Button revient à son état normal et l action de défilement débute. Dans ce cas, le bouton a changé d aspect car le délai a expiré. Toutefois, lorsque vous déplacez votre doigt sur une distance supérieure à 20 pixels, même au-delà du délai, Flex interprète ce geste comme un mouvement de défilement. Remarque : les composants Flex prennent en charge de nombreux types d événement en plus des événements de souris. Lorsque vous travaillez avec des composants, vous décidez de la manière dont votre application réagit à ces événements. Au moment de l événement mousedown, l intention exacte de l utilisateur est ambiguë. L utilisateur pouvait avoir l intention d interagir avec le composant ou d effectuer un défilement. En raison de cette ambiguïté, Adobe recommande d écouter les événements click ou mouseup au lieu de l événement mousedown. Gestion des événements de défilement dans une application mobile Pour signaler le début d une opération de défilement, le composant qui envoie l événement mousedown, lequel envoie un événement touchinteractionstarting de propagation. Si cet événement n est pas annulé, le composant envoie un événement touchinteractionstart de propagation. Lorsqu un composant détecte un événement touchinteractionstart, il ne doit pas tenter de répondre au geste utilisateur. Par exemple, lorsqu un contrôle Button détecte un événement touchinteractionstart, il désactive tous les indicateurs visuels qu il a définis en fonction de l événement mousedown initial. Si un composant ne souhaite pas autoriser le défilement à commencer, le composant peut appeler la méthode preventdefault() dans le gestionnaire d événement pour l événement touchinteractionstarting. Pour signaler le début d une opération de défilement, le composant qui envoie l événement mousedown, lequel envoie un événement touchinteractionstarting de propagation. Comportement de défilement en fonction du point de contact initial Le tableau suivant décrit la manière dont le défilement est géré en fonction de l emplacement du point de contact initial : Elément sélectionné Espace vide, texte non modifiable, Comportement Aucun composant ne reconnaît le mouvement. Le composant Scroller attend que l utilisateur déplace le point de contact de plus de 20 pixels avant de déclencher le défilement. texte non sélectionnable Elément dans un contrôle List Button, CheckBox, RadioButton, Au-delà du délai défini, le rendu d élément pour l élément sélectionné modifie l affichage pour passer à l état sélectionné. Toutefois, si à tout moment, l utilisateur déplace son doigt sur une distance supérieure à 20 pixels, l élément change d aspect pour revenir à l état normal et le défilement est déclenché. Une fois le délai écoulé, l état mousedown est affiché. Toutefois, si l utilisateur déplace le point de contact de plus de 20 pixels, le contrôle change d aspect et présente son état normal et le défilement est déclenché. DropDownList Composant Button dans un rendu d élément List Le rendu d élément n est pas mis en surbrillance. Le composant Button ou Scroller gère le mouvement, de la même manière que dans le cas du composant Button normal.

Interface utilisateur et présentation 74 Définition de menus dans une application mobile Le conteneur ViewMenu définit un menu au bas d un conteneur View dans une application mobile. Chaque conteneur View définit son propre menu, spécifique à cette vue. La figure suivante présente le conteneur ViewMenu dans une application : Le conteneur ViewMenu définit un menu avec une seule hiérarchie de boutons de menu. En d autres termes, il ne permet pas de créer des menus comprenant des sous-menus. Les enfants du conteneur ViewMenu sont définis comme des contrôles ViewMenuItem. Chaque contrôle ViewMenuItem représente un seul bouton dans le menu. Interaction de l utilisateur avec le conteneur ViewMenu Ouvrez le menu en utilisant la clé de menu matérielle sur le périphérique mobile. Vous pouvez également l ouvrir par programmation. La sélection d un bouton de menu ferme tout le menu. Le contrôle ViewMenuItem envoie un événement click lorsque l utilisateur sélectionne un bouton de menu. Pendant que le menu est ouvert, appuyez sur le bouton retour ou de menu du périphérique pour fermer le menu. Le menu se ferme également si vous appuyez sur l écran en dehors du menu. Le caret est le bouton de menu qui est actuellement actif. Utilisez le contrôle à cinq directions du périphérique ou les touches directionnelles pour modifier le caret. Appuyez sur la touche Entrée du périphérique ou sur le contrôle à cinq directions pour sélectionner l élément de caret et fermer le menu. Création d un menu dans une application mobile Utilisez la propriété View.viewMenuItems pour définir le menu pour une vue. La propriété View.viewMenuItems utilise un vecteur de contrôles ViewMenuItem, comme le montre l exemple suivant :

Interface utilisateur et présentation 75 <!-- components\mobile\views\viewmenuhome.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="home"> <fx:script> <![CDATA[ // The event listener for the click event. private function itemclickinfo(event:mouseevent):void { switch (event.currenttarget.label) { case "Add" : myta.text = "Add selected"; break; case "Cancel" : myta.text = "Cancel selected"; break; case "Delete" : myta.text = "Delete selected"; break; case "Edit" : myta.text = "Edit selected"; break; case "Search" : myta.text = "Search selected"; break; default : myta.text = "Error"; ]]> </fx:script> <s:viewmenuitems> <s:viewmenuitem label="add" click="itemclickinfo(event);"/> <s:viewmenuitem label="cancel" click="itemclickinfo(event);"/> <s:viewmenuitem label="delete" click="itemclickinfo(event);"/> <s:viewmenuitem label="edit" click="itemclickinfo(event);"/> <s:viewmenuitem label="search" click="itemclickinfo(event);"/> </s:viewmenuitems> <s:vgroup paddingtop="10" paddingleft="10"> <s:textarea id="myta" text="select a menu item"/> <s:button label="open Menu" click="mx.core.flexglobals.toplevelapplication.viewmenuopen=true;"/> <s:button label="close Menu" click="mx.core.flexglobals.toplevelapplication.viewmenuopen=false;"/> </s:vgroup> </s:view> Dans cet exemple, vous utilisez la propriété View.viewMenuItems pour ajouter cinq éléments de menu, où chaque élément de menu est représenté par un contrôle ViewMenuItem. Chaque contrôle ViewMenuItem utilise la propriété label pour spécifier le texte qui apparaît dans le menu correspondant à cet élément. Remarquez que vous ne définissez pas explicitement le conteneur ViewMenu. Le conteneur View crée automatiquement une instance du conteneur ViewMenu pour contenir les contrôles ViewMenuItem.

Interface utilisateur et présentation 76 Utilisez le style icône ducontrôle de ViewMenuItem. Le contrôle ViewMenuItem définit la propriété de style icône que vous pouvez utiliser pour inclure une image. Vous pouvez utiliser le style icône avec ou sans la propriété label. Gestion de l événement click du contrôle ViewMenuItem Chaque contrôle de ViewMenuItem définit également un gestionnaire d événement pour l événement click. Le contrôle ViewMenuItem envoie l événement click lorsque l utilisateur sélectionne l événement. Dans cet exemple, tous les éléments de menu utilisent le même gestionnaire d événement. Vous pouvez toutefois choisir de définir un gestionnaire d événement distinct pour chaque événement click. Ouverture du contrôle ViewMenuItem par programmation Vous ouvrez le menu en utilisant la touche de menu matérielle de votre périphérique. Cette application définit également deux contrôles Button pour ouvrir et fermer le menu par programmation. Pour ouvrir le menu par programmation, définissez la propriété viewmenuopen du conteneur d application sur true. Pour fermer le menu, définissez la propriété sur false. La propriété viewmenuopen est définie dans la classe ViewNavigatorApplicationBase, la classe de base des conteneurs ViewNavigatorApplication et TabbedViewNavigatorApplication. Application d un habillage aux composants ViewMenu et ViewMenuItem Utilisez les habillages pour contrôler l aspect des composants ViewMenu et ViewMenuItem. La classe d habillages par défaut de ViewMenu est spark.skins.mobile.viewmenuskin. La classe d habillages par défaut de ViewMenuItem est spark.skins.mobile.viewmenuitemskin. Le blogueur Daniel Demmel explique de quelle manière appliquer un habillage Gingerbread black à la commande ViewMenu. Les classes d habillages utilisent les états d habillage, tels que normal, fermé et désactivé, pour contrôler l aspect de l habillage. Les habillages définissent également les transitions permettant de contrôler l aspect du menu lorsqu il change d état d affichage. Pour plus d informations, voir «Notions de base sur l habillage mobile» à la page 174. Définition de la présentation d un conteneur ViewMenu La classe ViewMenuLayout définit la présentation du menu des vues. Le menu peut contenir plusieurs lignes selon le nombre d éléments de menu. Règles de présentation de ViewMenuItem La propriété requestedmaxcolumncount de la classe ViewMenuLayout définit le nombre maximum d éléments de menu sur une ligne. Par défaut, la propriété requestedmaxcolumncount est définie sur trois. Les règles suivantes définissent la manière dont la classe ViewMenuLayout réalise la présentation : Si vous définissez trois éléments de menu ou moins, où la propriété requestedmaxcolumncount contient la valeur par défaut de trois, les éléments de menu s affichent sur une seule ligne. Tous les éléments de menu ont la même taille. Si vous définissez quatre éléments de menu ou plus, soit davantage d éléments de menu que ceux spécifiés par la propriété requestedmaxcolumncount, le conteneur ViewMenu crée plusieurs lignes. Si le nombre d éléments de menu est divisible par la propriété requestedmaxcolumncount, chaque ligne contient le même nombre d éléments de menu. Tous les éléments de menu ont la même taille.

Interface utilisateur et présentation 77 Par exemple, la propriété requestedmaxcolumncount est définie sur la valeur par défaut de trois et vous définissez six éléments de menu. Le menu affiche deux lignes, chacune contenant trois éléments de menu. Si le nombre d éléments de menu n est pas divisible par la propriété requestedmaxcolumncount, les lignes peuvent contenir un nombre différent d éléments de menu. La taille des éléments de menu dépend du nombre d éléments de menu par ligne. Par exemple, la propriété requestedmaxcolumncount est définie sur la valeur par défaut de trois et vous définissez huit éléments de menu. Le menu affiche trois lignes. La première ligne contient deux éléments de menu. Les deuxième et troisième lignes contiennent chacune trois éléments. Création d une présentation ViewMenuItem personnalisée La classe ViewMenuLayout contient des propriétés permettant de modifier les espaces entre les éléments de menu et le nombre par défaut d éléments de menu figurant sur chaque ligne. Vous pouvez aussi créer votre propre présentation personnalisée pour le menu en créant votre classe de présentations. Par défaut, la classe spark.skins.mobile.viewmenuskin définit l habillage du conteneur ViewMenu. Pour appliquer une classe ViewMenuLayout personnalisée au conteneur ViewMenu, définissez une nouvelle classe d habillages pour le conteneur ViewMenu. La classe ViewMenuSkin par défaut inclut une définition pour un conteneur Group nommé contentgroup, comme le montre l exemple suivant :...... <s:group id="contentgroup" left="0" right="0" top="3" bottom="2" minwidth="0" minheight="0"> <s:layout> <s:viewmenulayout horizontalgap="2" verticalgap="2" id="contentgrouplayout" requestedmaxcolumncount="3" requestedmaxcolumncount.landscapegroup="6"/> </s:layout> </s:group> Votre classe d habillages doit également définir un conteneur nommé contentgroup. Ce conteneur utilise la propriété layout pour spécifier votre classe de présentation personnalisée. Vous pouvez alors appliquer votre classe d habillages personnalisés dans l application, comme le montre l exemple suivant : <!-- components\mobile\viewmenuskin.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.viewmenuhome"> <fx:style> @namespace s "library://ns.adobe.com/flex/spark"; s ViewMenu { skinclass: ClassReference("skins.MyVMSkin"); </fx:style> </s:viewnavigatorapplication>

Interface utilisateur et présentation 78 Affichage d une indication visuelle pour une opération longue durée dans une application mobile Le contrôle Spark BusyIndicator affiche un bouton fléché à 12 rayons. Vous utilisez le contrôle BusyIndicator pour fournir une indication visuelle signalant qu une opération de longue durée est en cours. La figure suivante présente le contrôle BusyIndicator dans la zone de barre de contrôle d un conteneur Spark Panel, à côté du bouton Envoyer : Rendez visible le contrôle BusyIndicator pendant le déroulement d une opération de longue durée. Une fois l opération terminée, masquez le contrôle. Par exemple, vous pouvez créer une instance du contrôle BusyIndicator dans un gestionnaire d événement, éventuellement le gestionnaire d événement qui démarre le processus de longue durée. Dans le gestionnaire d événement, appelez la méthode addelement() pour ajouter le contrôle à un conteneur. Une fois le processus terminé, appelez removeelement() pour supprimer le contrôle BusyIndicator du conteneur. Une autre option consiste à utiliser la propriété visible du contrôle pour l afficher et le masquer. Dans l exemple suivant, vous ajoutez le contrôle BusyIndicator à la zone de barre de contrôle d un conteneur Spark Panel dans un conteneur View :

Interface utilisateur et présentation 79 <!-- components\mobile\views\simplebusyindicatorhomeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="homeview"> <s:panel id="panel" title="busy Indicator Example" width="100%" height="100%"> <s:controlbarcontent> <s:button label="submit" /> <s:busyindicator id="bi" visible="false" symbolcolor="red"/> </s:controlbarcontent> <s:vgroup left="10" right="10" top="10" bottom="10"> <s:label width="100%" color="blue" text="click the Busy button to see the BusyIndicator."/> <s:button label="busy" click="{bi.visible =!bi.visible" /> </s:vgroup> </s:panel> </s:view> Dans cet exemple, la propriété visible du contrôle BusyIndicator est initialement définie sur false pour être masquée. Cliquez sur le bouton Occupé pour définir la propriété visible sur true afin d afficher le contrôle. Le contrôle BusyIndicator ne tourne que lorsqu il est visible. Par conséquent, lorsque vous définissez la propriété visible sur false, le contrôle ne requiert aucun cycle de traitement. Remarque : la définition de la propriété visible sur false masque le contrôle, mais celui-ci est encore inclus dans la présentation de son conteneur parent. Pour exclure le contrôle de la présentation, définissez les propriétés visible et includeinlayout sur false. Le contrôle Spark BusyIndicator ne prend pas en charge les habillages. Vous pouvez cependant utiliser les styles pour définir la couleur et l intervalle de rotation du bouton fléché. Dans l exemple précédent, vous définissez la couleur de l indicateur à l aide de la propriété symbolcolor. Ajout d un bouton bascule à une application mobile Le contrôle Spark ToggleSwitch définit un bouton binaire simple. Le contrôle est composé d un curseur et d un rail le long duquel vous déplacez le curseur. Le contrôle ToggleSwitch est similaire aux contrôles ToggleButton et CheckBox. Tous ces contrôles vous permettent de choisir entre une valeur sélectionnée et une valeur désélectionnée.

Interface utilisateur et présentation 80 L illustration suivante présente le contrôle ToggleSwitch dans une application : Le contrôle ToggleSwitch dispose de deux positions : sélectionné (selected) et désélectionné (unselected). Le contrôle est en position Désélectionné lorsque le curseur se trouve à gauche. Tandis qu il est en position Sélectionné lorsque le curseur se trouve à droite. Dans la figure, le bouton est en position désélectionnée. Lorsque vous cliquez sur le contrôle, sa position bascule. Vous pouvez également déplacer le curseur le long du rail pour modifier sa position. Lorsque vous relâchez le curseur, il se déplace vers la position (sélectionnée ou désélectionnée) la plus proche de son emplacement. Par défaut, le libellé OFF correspond à la position désélectionnée et ON à la position sélectionnée. Création d un contrôle ToggleSwitch Le conteneur View qui définit le contrôle ToggleSwitch de l exemple précédent est présenté ci-dessous : <!-- components\mobile\views\toggleswitchsimplehomeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="homeview"> <s:layout> <s:verticallayout paddingtop="10" paddingleft="5"/> </s:layout> <s:toggleswitch id="ts" slideduration="1000"/> <s:form> <s:formitem label="toggle Label: "> <s:label text="{ts.selected? 'ON' : 'OFF'"/> </s:formitem> <s:formitem label="toggle Position: "> <s:label text="{ts.thumbposition"/> </s:formitem> </s:form> </s:view> Dans cet exemple, ON ou OFF s affiche dans le premier contrôle Label en fonction de la position du curseur. Le deuxième contrôle Label affiche la position actuelle du curseur sous forme de valeur 0.0 (désélectionné) ou 1.0 (sélectionné). Le style slideduration est également défini sur 1 000 dans cet exemple. Ce style détermine la durée, en millisecondes, de l animation du curseur lorsqu il est déplacé entre les positions Sélectionné et Désélectionné. Le fichier de l application principale est illustré ci-dessous :

Interface utilisateur et présentation 81 <!-- components\mobile\toggleswitchsimple.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.toggleswitchsimplehomeview"> </s:viewnavigatorapplication> Modification de la légende par défaut d un contrôle ToggleSwitch Dans l exemple précédent, le contrôle ToggleSwitch utilisait les valeurs par défaut ON et OFF des libellés sélectionné et désélectionné. Pour personnaliser les libellés ou d autres caractéristiques visuelles du contrôle, définissez une classe d habillage en tant que sous-classe de spark.skins.mobile.toggleswitchskin ou créez votre propre classe d habillage. La classe d habillage suivante définit les libellés sur Yes et No : package skins // components\mobile\skins\mytoggleswitchskin.as { import spark.skins.mobile.toggleswitchskin; public class MyToggleSwitchSkin extends ToggleSwitchSkin { public function MyToggleSwitchSkin() { super(); // Set properties to define the labels // for the selected and unselected positions. selectedlabel="yes"; unselectedlabel="no"; Le conteneur View suivant utilise cette classe d habillage :

Interface utilisateur et présentation 82 <!-- components\mobile\views\toggleswitchskinhomeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="homeview"> <s:layout> <s:verticallayout paddingtop="10" paddingleft="5"/> </s:layout> <s:toggleswitch id="ts" slideduration="1000" skinclass="skins.mytoggleswitchskin"/> <s:form> <s:formitem label="toggle Label: "> <s:label text="{ts.selected? 'Yes' : 'No'"/> </s:formitem> <s:formitem label="toggle Position: "> <s:label text="{ts.thumbposition"/> </s:formitem> </s:form> </s:view> Ajout d un conteneur Callout à une application mobile Dans une application mobile, un conteneur Callout (légende, en français) est un conteneur qui apparaît au-dessus de l application. Ce conteneur peut contenir un ou plusieurs composants et il prend en charge différents types de présentations. Un conteneur Callout peut être modal ou non modal. Un conteneur modal accepte toutes les entrées clavier et souris jusqu à sa fermeture. Tandis qu un conteneur non modal permet aux autres composants de l application d accepter toutes les entrées tant que le conteneur reste ouvert. Flex fournit deux composants que vous pouvez utiliser afin d ajouter des conteneurs Callout à une application mobile : CalloutButton et Callout. Utilisation du contrôle CallouButton pour créer un conteneur Callout Le contrôle CalloutButton permet de créer facilement un conteneur Callout. Ce composant vous permet de définir les composants apparaissant dans la légende ainsi que définir la présentation du conteneur.

Interface utilisateur et présentation 83 Lorsque vous sélectionnez le contrôle CalloutButton dans une application mobile, celui-ci ouvre alors le conteneur Callout. Flex trace automatiquement à l écran une flèche partant du conteneur Callout et pointée vers le contrôle CalloutButton, tel qu illustré ci-dessous : L exemple suivant présente l application mobile qui permet de créer le contrôle CalloutButton apparaissant dans la figure précédente : <!-- components\mobile\views\calloutbuttonsimplehomeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="homeview"> <s:layout> <s:verticallayout paddingleft="10" paddingtop="10"/> </s:layout> <s:label text="select the button to open the callout"/> <s:calloutbutton id="mycb" horizontalposition="end" verticalposition="after" label="open callout"> <s:calloutlayout> <s:horizontallayout/> </s:calloutlayout> <!-- Define buttons that appear in the callout. --> <s:button label="ok" click="mycb.closedropdown();"/> <s:button label="cancel" click="mycb.closedropdown();"/> </s:calloutbutton> </s:view> CalloutButton définit deux contrôles Button qui apparaissent à l intérieur du conteneur Callout. Le contrôle CalloutButton spécifie également d utiliser HorizontalLayout comme présentation du conteneur Callout. Par défaut, le conteneur utilise la présentation BasicLayout. Ouverture et fermeture du conteneur Callout à l aide du contrôle CalloutButton Le conteneur Callout s ouvre lorsque l utilisateur sélectionne le contrôle CalloutButton ou lorsque vous appelez la méthode CalloutButton.openDropDown(). Les propriétés horizontalposition et verticalposition déterminent la position du conteneur Callout par rapport au contrôle CalloutButton. Pour obtenir un exemple, voir «Dimensionnement et positionnement d un conteneur Callout» à la page 93.

Interface utilisateur et présentation 84 Le conteneur Callout ouvert par le contrôle CalloutButton est toujours non modal. Cela signifie que les autres composants de l application peuvent recevoir des entrées tant que la légende est ouverte. Utilisez le conteneur Callout pour créer une légende modale. Le conteneur Callout reste ouvert jusqu à ce que vous cliquiez à l extérieur de celui-ci ou que vous appeliez la méthode CalloutButton.closeDropDown(). Dans cet exemple, la méthode closedropdown() est appelée dans le gestionnaire d événement de click pour les deux contrôles Button dans le conteneur Callout. Utilisation du conteneur Callout pour créer une légende Le contrôle CalloutButton encapsule dans un même contrôle le conteneur Callout ainsi que toute la logique requise pour ouvrir et fermer la légende. Le contrôle CalloutButton devient dans ce cas l hôte du conteneur Callout. Vous pouvez également utiliser le conteneur Callout dans une application mobile. L avantage d un conteneur Callout est qu il n est pas associé à un seul hôte et peut donc être réutilisé dans l application. Utilisez les méthodes Callout.open() et Callout.close() pour ouvrir un conteneur Callout, généralement en réponse à un événement. Lors de l appel de la méthode open(), vous pouvez transmettre un argument optionnel de façon à spécifier que le conteneur Callout est modal. Par défaut, le conteneur Callout est non modal. La position du conteneur Callout est relative au composant hôte. Les propriétés horizontalposition et verticalposition permettent de déterminer l emplacement du conteneur par rapport à l hôte. Pour obtenir un exemple, voir «Dimensionnement et positionnement d un conteneur Callout» à la page 93. Etant donné qu il s agit d une fenêtre contextuelle, le conteneur Callout ne fait pas partie du code de présentation MXML standard de votre application. Il se trouve en effet défini dans un composant MXML personnalisé à l intérieur d un fichier MXML. Dans l exemple suivant, un conteneur Callout est défini dans le fichier MyCallout.mxml du répertoire comps de votre application :

Interface utilisateur et présentation 85 <!-- components\mobile\comps\mycallout.mxml --> <s:callout xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" horizontalposition="start" verticalposition="after"> <s:vgroup paddingtop="10" paddingleft="5" paddingright="10"> <s:hgroup verticalalign="middle"> <s:label text="first Name: " fontweight="bold"/> <s:textinput width="225"/> </s:hgroup> <s:hgroup verticalalign="middle"> <s:label text="last Name: " fontweight="bold"/> <s:textinput width="225"/> </s:hgroup> <s:hgroup> <s:button label="ok" click="close();"/> <s:button label="cancel" click="close();"/> </s:hgroup> </s:vgroup> </s:callout> MyCallout.mxml définit une fenêtre contextuelle simple permettant à l utilisateur de saisir ses nom et prénom. Remarquez que les boutons appellent la méthode close() afin de fermer la légende suite à un événement click. L exemple suivant présente un conteneur View qui ouvre MyCallout.mxml en réponse à un événement click :

Interface utilisateur et présentation 86 <!-- components\mobile\views\calloutsimplehomeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="homeview"> <s:layout> <s:verticallayout paddingleft="10" paddingtop="10"/> </s:layout> <fx:script> <![CDATA[ import comps.mycallout; // Event handler to open the Callout component. protected function button1_clickhandler(event:mouseevent):void { var mycallout:mycallout = new MyCallout(); // Open as a modal callout. mycallout.open(calloutb, true); ]]> </fx:script> <s:label text="select the button to open the callout"/> <s:button id="calloutb" label="open Callout container" click="button1_clickhandler(event);"/> </s:view> Importez tout d abord le composant MyCallout.mxml dans l application. En réponse à un événement click, le bouton calloutb crée une instance de MyCallout.mxml avant d appeler la méthode open(). La méthode open() spécifie deux arguments. Le premier argument spécifie que calloutb est le composant hôte de la légende. La légende se positionne par conséquent dans l application par rapport à l emplacement de calloutb. Le second argument, true, permet de créer une légende modale. Définition d un conteneur Callout intégré Il n est pas nécessaire de définir le conteneur Callout dans un fichier distinct. L exemple suivant utilise la balise <fx:declaration> de façon à le définir au sein d un composant intégré d un conteneur View :

Interface utilisateur et présentation 87 <!-- components\mobile\views\calloutinlinehomeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="homeview"> <s:layout> <s:verticallayout paddingleft="10" paddingtop="10"/> </s:layout> <fx:script> <![CDATA[ // Event handler to open the Callout component. protected function button1_clickhandler(event:mouseevent):void { var mycallout:mycallout = new MyCallout(); // Open as a modal callout. mycallout.open(calloutb, true); ]]> </fx:script> <fx:declarations> <fx:component classname="mycallout"> <s:callout horizontalposition="end" verticalposition="after"> <s:vgroup paddingtop="10" paddingleft="5" paddingright="10"> <s:hgroup verticalalign="middle"> <s:label text="first Name: " fontweight="bold"/> <s:textinput width="225"/> </s:hgroup> <s:hgroup verticalalign="middle"> <s:label text="last Name: " fontweight="bold"/> <s:textinput width="225"/> </s:hgroup> <s:hgroup> <s:button label="ok" click="close();"/> <s:button label="cancel" click="close();"/> </s:hgroup> </s:vgroup> </s:callout> </fx:component> </fx:declarations> <s:label text="select the button to open the callout"/> <s:button id="calloutb" label="open Callout container" click="button1_clickhandler(event);"/> </s:view> Transfert de données à partir du conteneur Callout Utilisez la méthode close() du conteneur Callout pour transférer des données vers l application. La méthode close() présente la signature suivante :

Interface utilisateur et présentation 88 public function close(commit:boolean = false, data:*):void où : commit a pour valeur true si l application doit valider les données renvoyées. data correspond aux données renvoyées. Appeler la méthode close() envoie un événement close. L objet d événement associé à l événement close est un objet de type spark.events.popupevent. La classe PopUpEvent définit deux propriétés, commit et data contenant les valeurs des arguments correspondants de la méthode close(). Utilisez ces propriétés dans le gestionnaire d événement close afin d inspecter les données éventuellement renvoyées par la légende. Le conteneur Callout constitue une sous-classe de la classe SkinnablePopUpContainer qui utilise le même mécanisme pour transférer des données vers l application principale. Pour obtenir un exemple de transfert de données à partir du conteneur SkinnablePopUpContainer, voir Transfert de données à partir du conteneur Spark SkinnablePopUpContainer. L exemple suivant modifie le composant Callout présenté ci-dessus de façon à ce qu il renvoie les valeurs de nom et prénom. <!-- components\mobile\comps\mycalloutpassback.mxml --> <s:callout xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" horizontalposition="start" verticalposition="after"> <fx:script> <![CDATA[ import spark.events.indexchangeevent; public var retdata:string = new String(); // Event handler for the click event of the OK button. protected function clickhandler(event:mouseevent):void { //Create the return data. retdata = firstname.text + " " + lastname.text; // Close the Callout. // Set the commit argument to true to indicate that the // data argument contains a valid value. close(true, retdata); ]]>

Interface utilisateur et présentation 89 </fx:script> <s:vgroup paddingtop="10" paddingleft="5" paddingright="10"> <s:hgroup verticalalign="middle"> <s:label text="first Name: " fontweight="bold"/> <s:textinput id="firstname" width="225"/> </s:hgroup> <s:hgroup verticalalign="middle"> <s:label text="last Name: " fontweight="bold"/> <s:textinput id="lastname" width="225"/> </s:hgroup> <s:hgroup> <s:button label="ok" click="clickhandler(event);"/> <s:button label="cancel" click="close();"/> </s:hgroup> </s:vgroup> </s:callout> Dans cet exemple, une chaîne est créée afin de renvoyer le nom et le prénom lorsque l utilisateur sélectionne le bouton OK. Le conteneur View utilise ensuite l événement close du conteneur Callout pour afficher les données renvoyées : <!-- components\mobile\views\calloutpassbackdatahomeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="homeview"> <s:layout> <s:verticallayout paddingleft="10" paddingtop="10"/> </s:layout> <fx:script> <![CDATA[ import comps.mycalloutpassback; import spark.events.popupevent; public var mycallout:mycalloutpassback = new MyCalloutPassBack(); // Event handler to open the Callout component. protected function clickhandler(event:mouseevent):void { // Add an event handler for the close event to check for // any returned data. mycallout.addeventlistener('close', closehandler); // Open as a modal callout. mycallout.open(calloutb, true); // Handle the close event from the Callout. protected function closehandler(event:popupevent):void {

Interface utilisateur et présentation 90 // If commit is false, no data is returned. if (!event.commit) return; // Write the returned Data to the TextArea control. myta.text = String(event.data); // Remove the event handler. mycallout.removeeventlistener('close', closehandler); ]]> </fx:script> <s:label text="select the button to open the callout"/> <s:button id="calloutb" label="open Callout container" click="clickhandler(event);"/> <s:textarea id="myta"/> </s:view> Ajout d un conteneur ViewNavigator à un conteneur Callout Il est possible d utiliser un conteneur ViewNavigator à l intérieur d un conteneur Callout. Le conteneur ViewNavigator vous permet d ajouter une barre d action et des vues multiples à la légende. Par exemple, la vue suivante ouvre un conteneur Callout défini dans le fichier MyCalloutPassBackVN : <!-- components\mobile\views\calloutpassbackdatahomeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="homeview"> <s:layout> <s:verticallayout paddingleft="10" paddingtop="10"/> </s:layout> <fx:script> <![CDATA[ import comps.mycalloutpassbackvn; import spark.events.popupevent; public var mycallout:mycalloutpassbackvn = new MyCalloutPassBackVN(); // Event handler to open the Callout component. protected function clickhandler(event:mouseevent):void { mycallout.addeventlistener('close', closehandler); mycallout.open(calloutb, true);

Interface utilisateur et présentation 91 // Handle the close event from the Callout. protected function closehandler(event:popupevent):void { if (!event.commit) return; myta.text = String(event.data); mycallout.removeeventlistener('close', closehandler); ]]> </fx:script> <s:label text="select the Open button to open the callout"/> <s:textarea id="myta"/> <s:actioncontent> <s:button id="calloutb" label="open" click="clickhandler(event);"/> </s:actioncontent> </s:view> Le fichier MyCalloutPassBackVN.mxml définit le conteneur Callout qui comprend un conteneur ViewNavigator :

Interface utilisateur et présentation 92 <!-- components\mobile\comps\mycalloutvn.mxml --> <s:callout xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" contentbackgroundappearance="none" horizontalposition="start" verticalposition="after"> <fx:script> <![CDATA[ import mx.events.flexmouseevent; import views.settingsview; protected function done_clickhandler(event:mouseevent):void { // Create an instance of SettingsView, and // initialize it as a copy of the current View of the ViewNavigator. var settings:settingsview = (viewnav.activeview as SettingsView); // Create the String to represent the returned data. var retdata:string = new String(); // Initialze the String from the current View. retdata = settings.firstname.text + " " + settings.lastname.text; // Close the Callout and return thhe data. this.close(true, retdata); ]]> </fx:script> <s:viewnavigator id="viewnav" width="100%" height="100%" firstview="views.settingsview"> <s:navigationcontent> <s:button label="cancel" click="close(false)"/> </s:navigationcontent> <s:actioncontent> <s:button id="done" label="ok" emphasized="true" click="done_clickhandler(event);"/> </s:actioncontent> </s:viewnavigator> </s:callout> Dans le fichier MyCalloutPassBackVN.mxml, vous spécifiez que la première vue du conteneur ViewNavigator est SettingsView. SettingsView définit les contrôles TextInput pour le nom et le prénom de l utilisateur. Lorsque l utilisateur sélectionne le bouton OK, vous fermez la légende et transférez les données éventuellement renvoyées vers MyCalloutPassBackVN. Remarque : si un conteneur ViewNavigator apparaît au sein d un conteneur Callout, le contrôle ActionBar présente une couleur d arrière-plan transparente. Dans cet exemple, contentbackgroundappearance est défini sur none dans le conteneur Callout. Ce paramètre permet d éviter l apparition de la couleur blanche par défaut de la propriété contentbackgroundcolor du conteneur Callout au niveau de la zone du contrôle ActionBar transparent.

Interface utilisateur et présentation 93 La figure suivant montre l application avec la légende ouverte : Le fichier SettingsView.mxml est reproduit ci-dessous : <!-- components\mobile\views\settingsview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="settings"> <s:vgroup paddingtop="10" paddingleft="5" paddingright="10"> <s:hgroup verticalalign="middle"> <s:label text="first Name: " fontweight="bold"/> <s:textinput id="firstname" width="225"/> </s:hgroup> <s:hgroup verticalalign="middle"> <s:label text="last Name: " fontweight="bold"/> <s:textinput id="lastname" width="225"/> </s:hgroup> </s:vgroup> </s:view> Remarque : le contrôle ActionBar défini par un conteneur ViewNavigator au sein d un conteneur Callout possède un arrière-plan transparent. Par défaut, une transition d une vue à une autre apparaît correctement dans la légende. Toutefois, si vous spécifiez une transition différente de celle par défaut, telle que CrossFadeViewTransition ou ZoomViewTransition, il est possible que les contrôles ActionBar des deux vues viennent à se chevaucher. Pour éviter ce problème, créez une classe d habillage personnalisé pour ActionBar et Callout qui utilise un arrière-plan non transparent. Dimensionnement et positionnement d un conteneur Callout Le contrôle CalloutButton et le conteneur Callout ont recours à deux propriétés pour spécifier l emplacement du conteneur Callout par rapport à son hôte : horizontalposition et verticalposition. Ces propriétés peuvent présenter les valeurs suivantes : before, start, middle, end, after et auto (valeur par défaut). Vous pouvez par exemple définir ces propriétés comme dans l exemple ci-dessous : horizontalposition="before" verticalposition="after" Le conteneur Callout s ouvre à gauche et en dessous du composant hôte. Si vous les définissez comme ci-dessous :

Interface utilisateur et présentation 94 horizontalposition="middle" verticalposition="middle" Le conteneur Callout s ouvre au-dessus du composant hôte avec le centre de la légende aligné au centre du composant hôte. Traçage d une flèche partant de la légende et pointant vers l hôte Pour toutes les combinaisons des propriétés horizontalposition et verticalposition, excepté cinq d entre elles, la légende prend la forme d une flèche pointant vers l hôte. Les cinq combinaisons pour lesquelles aucune flèche n apparaît correspondent au positionnement de la légende dans un coin ou à son centrage au niveau du centre de l hôte. Les combinaisons suivantes ne créent pas de flèche : // Centered horizontalposition="middle" verticalposition="middle" // Upper-left corner horizontalposition="before" verticalposition="before" // Lower-left corner horizontalposition="before" verticalposition="after" // Upper-right corner horizontalposition="after" verticalposition="before" // Lower-right corner horizontalposition="after" verticalposition="after" Pour le conteneur Callout, les propriétés horizontalposition et verticalposition déterminent également la valeur de la propriété Callout.arrowDirection en lecture seule. La position du conteneur Callout par rapport à l hôte vient déterminer la valeur de la propriété arrowdirection. up et left en sont des valeurs possibles. Le composant d habillage Callout.arrow utilise la valeur de la propriété arrowdirection pour tracer la flèche en fonction de la position de la légende. Gestion de la mémoire pour un conteneur Callout Lors de l utilisation d un conteneur Callout, il est nécessaire de gérer la mémoire utilisée par ce conteneur. Par exemple, si vous souhaitez réduire la mémoire utilisée par l application, créez une instance de Callout à chaque ouverture. Cette instance est ensuite détruite à la fermeture. Veillez toutefois à supprimer toutes les références à l instance de Callout, notamment les gestionnaires d événement, à défaut de quoi elle ne sera pas supprimée. Dans le cas où le conteneur Callout est d une taille relativement réduite, vous avez également la possibilité de réutiliser plusieurs fois dans l application la même instance de Callout. Dans cette configuration, l application crée une instance unique du conteneur Callout. Elle réutilise ensuite cette instance qui reste en mémoire entre les différentes utilisations. Cette configuration a l avantage de réduire le temps d exécution de l application car une instance de Callout ne doit pas être recréée à chaque ouverture. Gestion de la mémoire avec le contrôle CalloutButton

Interface utilisateur et présentation 95 Pour configurer l instance de Callout utilisée par le contrôle CalloutButton, définissez la propriété CalloutButton.calloutDestructionPolicy. La valeur Auto configure le contrôle pour qu il détruise l instance à la fermeture. Alors que la valeur never le configure pour qu il mette en cache l instance. Gestion de la mémoire avec le conteneur Callout Le conteneur Callout ne définit pas la propriété calloutdestructionpolicy. Vous contrôlez son utilisation de la mémoire selon la façon dont vous créez les instances du conteneur Callout dans votre application. Dans l exemple suivant, une instance du conteneur Callout est créée à chaque ouverture : protected function button1_clickhandler(event:mouseevent):void { // Create a new instance of the callout container every time you open it. var mycallout:mycallout = new MyCallout(); mycallout.open(calloutb, true); Il vous également possible de définir une instance unique du conteneur Callout que vous pouvez réutiliser à chaque ouverture du conteneur : // Create a single instance of the callout container. public var mycallout:mycallout = new MyCallout(); protected function button1_clickhandler(event:mouseevent):void { mycallout.open(calloutb, true); Définition de transitions dans une application mobile Les transitions entre vues Spark définissent la manière dont le passage d un conteneur View à un autre apparaît à l écran. Les transitions fonctionnent en appliquant une animation au cours du changement de vue. Utilisez les transitions pour créer des interfaces attrayantes pour vos applications mobiles. Par défaut, le conteneur View existant glisse hors de l écran tandis que la nouvelle vue glisse sur l écran. Vous pouvez aussi personnaliser ces transitions. Par exemple, votre application définit un formulaire dans le conteneur View qui présente seulement quelques champs, mais un conteneur View suivant présente des champs supplémentaires. Au lieu de glisser d une vue à l autre, vous pouvez utiliser une transition par retournement ou fondu-enchaîné. Flex fournit les classes suivantes de transition entre vues que vous pouvez utiliser lorsque vous modifiez les conteneurs View : Transition CrossFadeViewTransition FlipViewTransition SlideViewTransition ZoomViewTransition Description Effectue une transition par fondu-enchaîné entre la vue existante et la nouvelle vue. La vue existante s efface progressivement pour laisser place à la nouvelle vue. Effectue une transition par retournement entre la vue existante et la nouvelle vue. Vous pouvez définir la direction et le type de retournement. Effectue une transition par glissement entre la vue existante et la nouvelle vue. La vue existante glisse hors de l écran, tandis que la nouvelle vue glisse dans l écran. Vous pouvez contrôler la direction et le type du glissement. Cette transition correspond à la transition entre vues par défaut utilisée par Flex. Effectue une transition par zoom entre la vue existante et la nouvelle vue. Vous pouvez effectuer un zoom arrière sur la vue existante ou un zoom avant sur la nouvelle vue.

Interface utilisateur et présentation 96 Remarque : les transitions entre vues dans les applications mobiles ne sont pas associées aux transitions Flex standard. Les transitions Flex standard définissent les effets affichés au cours d un changement d état. Les opérations de navigation du conteneur ViewNavigator déclenchent les transitions entre vues. Les transitions entre vues ne peuvent pas être définies en MXML et elles n interagissent pas avec les états. Application d une transition Vous appliquez une transition lorsque vous modifiez le conteneur View actif. Dans la mesure où les transitions entre vues interviennent lorsque vous changez de conteneur View, vous les contrôlez par le biais du conteneur ViewNavigator. Par exemple, vous pouvez utiliser les méthodes suivantes de la classe ViewNavigator pour changer la vue actuelle : pushview() popview() poptofirstview() popall() replaceview() Ces méthodes utilisent toutes un argument facultatif qui définit la transition à utiliser lors du changement de vue. Vous pouvez également changer la vue actuelle en utilisant les touches de navigation de votre périphérique, telles que le bouton retour. Lorsque vous changez la vue à l aide d une touche matérielle, ViewNavigator utilise les transitions par défaut définies par les propriétés ViewNavigator.defaultPopTransition et ViewNavigator.defaultPushTransition. Par défaut, ces propriétés spécifient l utilisation de la classe SlideViewTransition. L exemple suivant montre le fichier d application principal qui initialise les propriétés defaultpoptransition et defaultpushtransition de façon à utiliser une transition FlipViewTransition :

Interface utilisateur et présentation 97 <!-- containers\mobile\sparkviewtrans.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.employeemainviewtrans" creationcomplete="creationcompletehandler(event);"> <fx:script> <![CDATA[ import mx.events.flexevent; import spark.transitions.flipviewtransition; // Define a flip transition. public var fliptrans:flipviewtransition = new FlipViewTransition(); // Set the default push and pop transitions of the navigator // to use the flip transition. protected function creationcompletehandler(event:flexevent):void { navigator.defaultpoptransition = fliptrans; navigator.defaultpushtransition = fliptrans; protected function button1_clickhandler(event:mouseevent):void { // Switch to the first view in the section. // Use the default pop view transition defined by // the ViewNavigator.defaultPopTransition property. navigator.poptofirstview(); ]]> </fx:script> <s:navigationcontent> <s:button icon="@embed(source='assets/home.png')" click="button1_clickhandler(event)"/> </s:navigationcontent> </s:viewnavigatorapplication> La première vue, EmployeeMainViewTrans.mxml, définit une transition CrossFadeViewTransition. Elle transmet ensuite la transition CrossFadeViewTransition en tant qu argument à la méthode pushview() lors d un passage à la vue EmployeeView :

Interface utilisateur et présentation 98 <!-- containers\mobile\views\employeemainviewtrans.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="employees"> <s:layout> <s:verticallayout paddingtop="10"/> </s:layout> <fx:script> <![CDATA[ import spark.events.indexchangeevent; import spark.transitions.crossfadeviewtransition; // Define two transitions: a cross fade and a flip. public var xfadetrans:crossfadeviewtransition = new CrossFadeViewTransition(); // Use the cross fade transition on a push(), // with a duration of 100 ms. protected function mylist_changehandler(event:indexchangeevent):void { xfadetrans.duration = 1000; navigator.pushview(views.employeeview, mylist.selecteditem, null, xfadetrans); ]]> </fx:script> <s:label text="select an employee name"/> <s:list id="mylist" width="100%" height="100%" labelfield="firstname" change="mylist_changehandler(event);"> <s:arraycollection> <fx:object firstname="bill" lastname="smith" companyid="11233"/> <fx:object firstname="dave" lastname="jones" companyid="13455"/> <fx:object firstname="mary" lastname="davis" companyid="11543"/> <fx:object firstname="debbie" lastname="cooper" companyid="14266"/> </s:arraycollection> </s:list> </s:view> La vue EmployeeView est définie dans le fichier EmployeeView.mxml, comme le montre l exemple suivant : <!-- containers\mobile\views\employeeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="employee View"> <s:layout> <s:verticallayout paddingtop="10"/> </s:layout> <s:vgroup> <s:label text="{data.firstname"/> <s:label text="{data.lastname"/> <s:label text="{data.companyid"/> </s:vgroup> </s:view>

Interface utilisateur et présentation 99 Application d une transition au contrôle ActionBar Par défaut, le contrôle ActionBar n est pas inclus dans la transition d une vue à l autre. A la place, le contrôle ActionBar utilise une transition par glissement lors du changement de vue, quelle que soit la transition spécifiée. Pour inclure le contrôle ActionBar dans la transition lors du changement de vue, définissez la propriété transitioncontrolswithcontent de la classe de transition sur true. Utilisation d une classe d amortissement Une transition se déroule en deux phases : une phase d accélération suivie d une phase de décélération. Vous pouvez modifier les propriétés d accélération et de décélération d une transition en utilisant une classe d amortissement. L amortissement permet de créer un rythme plus réaliste d accélération et de décélération. Vous pouvez aussi utiliser une classe d amortissement pour créer un effet de rebond ou contrôler d autres types de mouvement. Flex fournit les classes d amortissement Spark dans le package spark.effects.easing. Ce package comprend des classes pour les types d amortissement les plus courants, parmi lesquels Bounce, Linear et Sine (Rebond, Linéaire et Sinusoïdal). Pour plus d informations sur l utilisation de ces classes, voir Utilisation de classes d amortissement Spark. L exemple suivant présente une modification de l application définie dans la section précédente. Cette version ajoute une classe d amortissement Bounce à la transition FlipView : <!-- containers\mobile\sparkviewtranseasier.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.employeemainviewtranseaser" creationcomplete="creationcompletehandler(event);"> <fx:script> <![CDATA[ import mx.events.flexevent; import spark.transitions.flipviewtransition; // Define a flip transition. public var fliptrans:flipviewtransition = new FlipViewTransition(); // Set the default push and pop transitions of the navigator // to use the flip transition. // Specify the Bounce class as the easer for the flip. protected function creationcompletehandler(event:flexevent):void { fliptrans.easer = bounceeasing; fliptrans.duration = 1000; navigator.defaultpoptransition = fliptrans; navigator.defaultpushtransition = fliptrans;

Interface utilisateur et présentation 100 protected function button1_clickhandler(event:mouseevent):void { // Switch to the first view in the section. // Use the default pop view transition defined by // the ViewNavigator.defaultPopTransition property. navigator.poptofirstview(); ]]> </fx:script> <fx:declarations> <s:bounce id="bounceeasing"/> </fx:declarations> <s:navigationcontent> <s:button icon="@embed(source='assets/home.png')" click="button1_clickhandler(event)"/> </s:navigationcontent> </s:viewnavigatorapplication> Pour visualiser le rebond, veillez à utiliser le bouton Retour sur le périphérique. Cycle de vie de la transition entre vues Une transition entre vues s effectue en deux phases principales : la phase de préparation et la phase d exécution. Trois méthodes de la classe de transition définissent la phase de préparation. Ces méthodes sont appelées dans l ordre suivant : 1 capturestartvalues() Lorsque cette méthode est appelée, le conteneur ViewNavigator a créé la nouvelle vue mais n a pas validé la nouvelle vue ou mis à jour le contenu du contrôle ActionBar et de la barre d onglets. Utilisez cette méthode pour capturer les valeurs initiales des composants qui jouent un rôle dans la transition. 2 captureendvalues() Lorsque cette méthode est appelée, la nouvelle vue a été entièrement validée et le contrôle ActionBar et la barre d onglets reflètent l état de la nouvelle vue. La transition peut utiliser cette méthode pour capturer les éventuelles valeurs dont elle a besoin à partir de la nouvelle vue. 3 prepareforplay() Cette méthode permet à la transition d initialiser l instance d effet utilisée pour animer les composants de la transition. La phase d exécution débute lorsque le conteneur ViewNavigator appelle la méthode play() de la transition. A ce stade, la nouvelle vue a été créée et validée, et le contrôle ActionBar et la barre d onglets ont été initialisés. La transition envoie un événement start et les éventuelles instances d effet créées au cours de la phase de préparation sont maintenant invoquées en appelant la méthode play() de l effet. Une fois la transition entre vues terminée, la transition envoie un événement end. La classe de base des transitions ViewTransitionBase définit la méthode transitioncomplete() que vous pouvez appeler pour envoyer l événement end. Il est important que la transition nettoie les éventuels objets temporaires et supprime les écouteurs qu elle a créés avant d envoyer l événement de fin.

Interface utilisateur et présentation 101 Après l appel de la méthode transitioncomplete(), le conteneur ViewNavigator finalise le processus de changement de vue et réinitialise la transition à son état non initialisé. Sélection des dates et des heures dans une application mobile Le contrôle DateSpinner permet aux utilisateurs de sélectionner des dates et des heures dans une application mobile. Il utilise pour ce faire une interface mobile intuitive composée de trois roues adjacentes, appelées ici «compteurs», indiquant chacune une partie différente de la date et/ou de l heure. Les contrôles DateSpinner se déclinent suivant trois types de base qu il vous est possible d utiliser. La figure suivante présente les trois types de contrôles DateSpinner : A B C A. Date. B. Heure. C. Date et heure. Le tableau suivant décrit les types de DateSpinner : Type Constante (chaîne équivalente) Description Date DateSelectorDisplayMode.DATE («date») Affiche le mois, le jour du mois et l année. Par exemple : June 11 2011 Date est le type par défaut. Ainsi, si vous ne définissez pas la propriété displaymode d un contrôle DateSpinner, Flex la définit sur date. La date actuelle est mise en évidence à l aide de la couleur définie par la propriété de style accentcolor. Le 1er janvier 1601 correspond à la plus ancienne date prise en charge et le 31 décembre 9999 à la date la plus éloignée possible. Heure DateSelectorDisplayMode.TIME («time») Affiche les heures et les minutes. Un indicateur AM/PM est également affiché pour les paramètres régionaux utilisant un système horaire sur 12 heures. Par exemple : 2 57 PM L heure actuelle n est pas mise en évidence. Il n est pas possible d afficher les secondes dans le contrôle DateSpinner. Vous ne pouvez pas basculer entre les formats horaires sur 12 et 24 heures. DateSpinner utilise le format correspondant aux paramètres régionaux actuels.

Interface utilisateur et présentation 102 Type Constante (chaîne équivalente) Description Date et heure DateSelectorDisplayMode.DATE_AND_TIME («dateandtime») Affiche les jours, les heures et les minutes. Un indicateur AM/PM est également affiché pour les paramètres régionaux utilisant un système horaire sur 12 heures. Par exemple : Mon Jun 13 2 57 PM La date actuelle est mise en évidence à l aide de la couleur définie par la propriété de style accentcolor. L heure actuelle n est pas mise en évidence. Il n est pas possible d afficher les secondes dans le contrôle DateSpinner. Le nom du mois est affiché dans un format réduit. L année n est pas affichée. Le contrôle DateSpinner est composé de plusieurs contrôles SpinnerList. Chaque SpinnerList affiche la liste des valeurs valides pour un emplacement spécifique au sein du contrôle DateSpinner. Par exemple, un contrôle DateSpinner affichant la date contient trois listes SpinnerList : une pour la date, une pour le mois et une autre pour l année. Un DateSpinner affichant uniquement l heure contient deux ou trois listes SpinnerList, une pour les heures, une pour les minutes et optionnellement une autre pour l indication AM/PM (dans le cas où l heure est représentée à l aide du système sur 12 heures). Modification du type du contrôle DateSpinner Vous sélectionnez le type de DateSpinner en définissant la valeur de la propriété displaymode au niveau du contrôle. Vous pouvez définir la propriété displaymode sur les valeurs constantes définies par la classe DateSelectionDisplayMode ou ses chaînes équivalentes. L exemple suivant vous permet de basculer entre les différents types de DateSpinner :

Interface utilisateur et présentation 103 <!-- datespinner/views/datespinnertypes.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="datespinner Types"> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ import spark.components.calendarclasses.dateselectordisplaymode; ]]> </fx:script> <s:combobox id="modelist" selectedindex="0" change="ds1.displaymode=modelist.selecteditem.value"> <s:arraylist> <fx:object value="date" label="date"/> <fx:object value="time" label="time"/> <fx:object value="dateandtime" label="date and Time"/> </s:arraylist> </s:combobox> <s:datespinner id="ds1" displaymode="{dateselectordisplaymode.date"/> <s:label text="{ds1.selecteddate"/> </s:view> Lorsque l utilisateur interagit avec le contrôle DateSpinner, les compteurs s alignent alors avec l élément le plus proche dans la liste. Au repos, les compteurs ne se trouvent jamais à cheval entre deux sélections. Liaison d une sélection de contrôle DateSpinner à d autres contrôles Vous pouvez lier la propriété selecteddate d un contrôle DateSpinner à d autres contrôles dans une application mobile. La propriété selecteddate étant un pointeur vers un objet Date, les méthodes d un objet sont accessibles de cette façon. L exemple suivant permet de lier le jour, le mois et l année aux contrôles Label :

Interface utilisateur et présentation 104 <!-- datespinner/views/datespinnerbinding.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="datespinner Binding" creationcomplete="initac()"> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ import spark.components.calendarclasses.dateselectordisplaymode; import mx.collections.arraycollection; [Bindable] private var dayarrayc:arraycollection = new ArrayCollection(); [Bindable] private var selecteddateproperty:date; private function initac():void { dayarrayc.additem("sunday"); dayarrayc.additem("monday"); dayarrayc.additem("tuesday"); dayarrayc.additem("wednesday"); dayarrayc.additem("thursday"); dayarrayc.additem("friday"); dayarrayc.additem("saturday"); ]]> </fx:script> <s:datespinner id="ds1" displaymode="{dateselectordisplaymode.date"/> <fx:binding source="ds1.selecteddate" destination="selecteddateproperty"/> <s:label id="label1" text="day: {dayarrayc.getitemat(ds1.selecteddate.day)"/> <s:label id="label2" text="day of month: {selecteddateproperty.getdate()"/> <s:label id="label3" text="month: {ds1.selecteddate.getmonth() + 1"/> <s:label id="label4" text="year: {selecteddateproperty.getfullyear()"/> </s:view> Sélection des dates par programmation dans un contrôle Datespinner Il est possible de modifier la date d un contrôle DateSpinner par voie de programmation en affectant un nouvel objet Date à la valeur de la propriété selecteddate. L exemple suivant vous invite à saisir un jour, un mois et une année. Si vous cliquez sur le bouton, DateSpinner affiche alors la nouvelle date :

Interface utilisateur et présentation 105 <!-- datespinner/views/datespinnerprogrammaticselection.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="datespinner Programmatic Selection" creationcomplete="init()"> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ import mx.events.flexevent; import spark.components.calendarclasses.dateselectordisplaymode; private function init():void { // change event is dispatched when DateSpinner changes from user interaction ds1.addeventlistener("change", spinnereventhandler); // valuecommit event is dispatched when DateSpinner programmatically changes ds1.addeventlistener("valuecommit", spinnereventhandler); private function b1_clickhandler(e:event):void { ds1.selecteddate = new Date(ti3.text,ti1.text,ti2.text); protected function spinnereventhandler(event:event):void { eventlabel.text = event.type; ]]> </fx:script> <s:textinput id="ti1" prompt="enter a Month"/> <s:textinput id="ti2" prompt="enter a Day"/> <s:textinput id="ti3" prompt="enter a Year"/> <s:button id="b1" label="go!" click="b1_clickhandler(event)"/> <s:datespinner id="ds1" displaymode="{dateselectordisplaymode.date"/> <s:label id="eventlabel"/> </s:view> Lorsque la date est modifiée par voie de programmation, le contrôle DateSpinner envoie un événement change et un événement valuecommit. Si la date est modifiée par l interaction de l utilisateur, le contrôle DateSpinner envoie un événement change. Dans le cas où la date sélectionnée est modifiée par programmation, les valeurs sélectionnées sont affichées à l écran sans animation des valeurs intermédiaires. Restriction des plages de dates dans un contrôle DateSpinner Il est possible de restreindre les dates pouvant être sélectionnées par les utilisateurs dans un contrôle DateSpinner avec les propriétés mindate et maxdate. Ces propriétés acceptent des objets Date. Les dates antérieures à la propriété mindate et postérieures à maxdate ne sont pas accessibles dans le contrôle DateSpinner. De plus, les années non valides ne sont pas affichées en mode date, ni les dates non valides en mode dateandtime.

Interface utilisateur et présentation 106 L exemple suivant crée deux contrôles DateSpinner présentant deux plages différentes de dates disponibles : <!-- datespinner/views/minmaxdates.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="min/max Dates"> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ import spark.components.calendarclasses.dateselectordisplaymode; ]]> </fx:script> <!-- Min date today, max date October 31, 2012. --> <s:label text="{datespinner1.selecteddate"/> <s:datespinner id="datespinner1" displaymode="{dateselectordisplaymode.date" mindate="{new Date()" maxdate="{new Date(2012,9,31)"/> <!-- Min date 3 days ago, max date 7 days from now. --> <s:label text="{datespinner2.selecteddate"/> <s:datespinner id="datespinner2" displaymode="{dateselectordisplaymode.date" mindate="{new Date(new Date().getTime() - 1000*60*60*24*3)" maxdate="{new Date(new Date().getTime() + 1000*60*60*24*7)"/> </s:view> Il n est possible de définir qu une seule date minimale et qu une seule date maximale. Vous ne pouvez pas définir de tableau de dates ou plusieurs plages de sélection. Il vous est également possible d utiliser les propriétés mindate et maxdate pour restreindre un DateSpinner en mode time. L exemple suivant permet de limiter la sélection de l heure entre 8 et 14 heures (8 AM et 2 PM).

Interface utilisateur et présentation 107 <!-- datespinner/views/minmaxtime.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="min/max Time"> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ import spark.components.calendarclasses.dateselectordisplaymode; ]]> </fx:script> <!-- Limit time selection to between 8am and 2pm --> <s:datespinner id="datespinner1" displaymode="{dateselectordisplaymode.time" mindate="{new Date(0,0,0,8,0)" maxdate="{new Date(0,0,0,14,0)"/> </s:view> Réponse aux événements d un contrôle DateSpinner Le contrôle DateSpinner envoie un événement change lorsque l utilisateur modifie la date. La propriété target de cet événement change contient une référence à DateSpinner, qu il vous est possible d utiliser afin d accéder à la date sélectionnée, comme l indique l exemple suivant :

Interface utilisateur et présentation 108 <!-- datespinner/views/datespinnerchangeevent.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="datespinner Change Event"> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ import spark.components.calendarclasses.dateselectordisplaymode; private var dayarray:array = new Array( "Sunday","Monday","Tuesday", "Wednesday","Thursday","Friday","Saturday"); private function ds1_changehandler(e:event):void { // Optionally cast the DateSpinner's selecteddate as a Date var d:date = new Date(e.currentTarget.selectedDate); ta1.text = "You selected:"; ta1.text += "\n Day of Week: " + dayarray[d.day]; ta1.text += "\n Year: " + d.fullyear; // Month is 0-based in ActionScript, so add 1: ta1.text += "\n Month: " + int(d.month + 1); ta1.text += "\n Day: " + d.date; ]]> </fx:script> <s:datespinner id="ds1" displaymode="{dateselectordisplaymode.date" change="ds1_changehandler(event)"/> <s:textarea id="ta1" height="200" width="350"/> </s:view> L événement change est envoyé (et la valeur de la propriété selecteddate est mise à jour) uniquement lorsque tous les compteurs ont terminé leur rotation suite aux interactions de l utilisateur. Pour capturer la modification d une date effectuée par voie de programmation, écoutez l événement value_commit. Modification de l intervalle des minutes d un contrôle DateSpinner Vous pouvez modifier l intervalle de minutes affiché par un contrôle DateSpinner à l aide de la propriété minutestepsize. Cette propriété s applique uniquement à un contrôle DateSpinner dont le mode displaymode est défini sur time ou dateandtime. Par exemple, si vous sélectionnez la propriété minutestepsize sur 10, le contrôle DateSpinner affiche alors les valeurs 0, 10, 20, 30, 40 et 50 sur le compteur des minutes. L exemple suivant vous permet de définir la valeur de la propriété minutestepsize. Le compteur des minutes est mis à jour en conséquence.

Interface utilisateur et présentation 109 <!-- datespinner/views/datespinnerminuteinterval.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="datespinner Minute Interval"> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ import spark.components.calendarclasses.dateselectordisplaymode; ]]> </fx:script> <s:label text="select an interval:"/> <s:combobox id="intervallist" selectedindex="0" change="ds1.minutestepsize=intervallist.selecteditem.value"> <s:arraylist> <fx:object value="1" label="1"/> <fx:object value="2" label="2"/> <fx:object value="3" label="3"/> <fx:object value="4" label="4"/> <fx:object value="5" label="5"/> <fx:object value="6" label="6"/> <fx:object value="10" label="10"/> <fx:object value="12" label="12"/> <fx:object value="15" label="15"/> <fx:object value="20" label="20"/> <fx:object value="30" label="30"/> </s:arraylist> </s:combobox> <s:datespinner id="ds1" displaymode="{dateselectordisplaymode.time"/> </s:view> Les valeurs de la propriété minutestepsize doivent pouvoir diviser 60 en parts égales. Si vous spécifiez une valeur, telle que 25, qui ne permet pas de diviser 60 de façon égale, la propriété minutestepsize prend dans ce cas la valeur par défaut de 1. Si vous spécifiez un intervalle de minutes et que l heure actuelle ne correspond pas à une valeur du compteur des minutes, le contrôle arrondit alors la sélection actuelle à l intervalle le plus proche. Par exemple, si l heure est 10:29 et minutestepsize est défini sur 15, DateSpinner arrondit l heure à 10:15, en supposant que la valeur 10:15 soit conforme au paramètre mindate. Personnalisation de l aspect d un contrôle DateSpinner Le contrôle DateSpinner prend en charge la plupart des styles de texte, tels que fontsize, color et letterspacing. Il ajoute en outre une nouvelle propriété de style appelée accentcolor. Ce style vient modifier la couleur de la date ou de l heure actuelle au niveau des listes des compteurs. L exemple suivant permet de définir la couleur sur rouge :

Interface utilisateur et présentation 110 <!-- datespinner/views/datespinnerstyles.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="datespinner Styles"> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ import spark.components.calendarclasses.dateselectordisplaymode; ]]> </fx:script> <!-- Acceptable style formats are color_name (e.g., 'red') or hex colors (e.g., '0xFF0000') --> <s:datespinner id="datespinner1" accentcolor="0xff0000" displaymode="{dateselectordisplaymode.date"/> </s:view> Le contrôle DateSpinner ne prend pas en charge la propriété textalign. L alignement du texte est défini par le contrôle. Pour personnaliser d autres caractéristiques de l aspect d un contrôle DateSpinner, vous pouvez créer un habillage personnalisé pour le contrôle ou modifier certains des sous-composants avec CSS. La classe DateSpinnerSkin contrôle le dimensionnement du contrôle DateSpinner. Chacun des compteurs dans un contrôle DateSpinner est un objet SpinnerList avec son propre SpinnerListSkin. Les compteurs d un contrôle DateSpinner sont les enfants d un même conteneur SpinnerListContainer, qui dispose de son propre habillage, SpinnerListContainerSkin. Vous pouvez définir la propriété height (hauteur) d un contrôle DateSpinner de manière explicite. Si vous définissez la propriété width (largeur), le contrôle se positionne au centre d une zone qui est dimensionnée en fonction de la largeur demandée. Pour modifier les paramètres des compteurs dans un contrôle DateSpinner, vous pouvez également utiliser les sélecteurs de type CSS SpinnerList, SpinnerListContainer et SpinnerListItemRenderer. Par exemple, le sélecteur de type SpinnerList contrôle les propriétés des marges au niveau des compteurs. L exemple suivant permet de modifier les marges au niveau des compteurs :

Interface utilisateur et présentation 111 <!-- datespinner/datespinnerexamples2.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.customspinnerlistskinexample"> <fx:style> @namespace s "library://ns.adobe.com/flex/spark"; s SpinnerListItemRenderer { paddingtop: 7; paddingbottom: 7; paddingleft: 5; paddingright: 5; </fx:style> </s:viewnavigatorapplication> Pour les applications mobiles, les sélecteurs de type doivent se trouver dans le fichier d application de niveau supérieur et non dans une vue enfant de l application. En cas de tentative de définition du sélecteur de type SpinnerListItemRenderer dans un bloc de style au sein d une vue, Flex lève un avertissement de compilateur. Il est possible d étendre la classe SpinnerListContainerSkin afin de personnaliser davantage l aspect des compteurs d un contrôle DateSpinner. L exemple suivant permet d appliquer un habillage personnalisé à un conteneur SpinnerListContainer : <!-- datespinner/datespinnerexamples3.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.customspinnerlistskinexample"> <fx:style> @namespace s "library://ns.adobe.com/flex/spark"; /* Change SpinnerListContainer for all DateSpinner controls */ s SpinnerListContainer { skinclass: ClassReference("customSkins.CustomSpinnerListContainerSkin"); /* Change padding for all DateSpinner controls */ s SpinnerListItemRenderer { paddingtop: 7; paddingbottom: 7; paddingleft: 5; paddingright: 5; fontsize: 12; </fx:style> </s:viewnavigatorapplication> La classe CustomSpinnerListContainerSkin suivante vient réduire la taille de l indicateur de sélection de manière à ce qu il reflète fidèlement la nouvelle taille des polices et des marges au niveau des lignes du compteur :

Interface utilisateur et présentation 112 // datespinner/customskins/customspinnerlistcontainerskin.as package customskins { import mx.core.dpiclassification; import spark.skins.mobile.spinnerlistcontainerskin; import spark.skins.mobile.supportclasses.mobileskin; import spark.skins.mobile160.assets.spinnerlistcontainerbackground; import spark.skins.mobile160.assets.spinnerlistcontainerselectionindicator; import spark.skins.mobile160.assets.spinnerlistcontainershadow; import spark.skins.mobile240.assets.spinnerlistcontainerbackground; import spark.skins.mobile240.assets.spinnerlistcontainerselectionindicator; import spark.skins.mobile240.assets.spinnerlistcontainershadow; import spark.skins.mobile320.assets.spinnerlistcontainerbackground; import spark.skins.mobile320.assets.spinnerlistcontainerselectionindicator; import spark.skins.mobile320.assets.spinnerlistcontainershadow; public class CustomSpinnerListContainerSkin extends SpinnerListContainerSkin { public function CustomSpinnerListContainerSkin() { super(); switch (applicationdpi) { case DPIClassification.DPI_320: { borderclass = spark.skins.mobile320.assets.spinnerlistcontainerbackground; selectionindicatorclass = spark.skins.mobile320.assets.spinnerlistcontainerselectionindicator; shadowclass = spark.skins.mobile320.assets.spinnerlistcontainershadow; cornerradius = 10; borderthickness = 2; selectionindicatorheight = 80; // was 120 break; case DPIClassification.DPI_240: { borderclass = spark.skins.mobile240.assets.spinnerlistcontainerbackground; selectionindicatorclass = spark.skins.mobile240.assets.spinnerlistcontainerselectionindicator; shadowclass = spark.skins.mobile240.assets.spinnerlistcontainershadow; cornerradius = 8; borderthickness = 1;

Interface utilisateur et présentation 113 selectionindicatorheight = 60; // was 90 break; default: // default DPI_160 { borderclass = spark.skins.mobile160.assets.spinnerlistcontainerbackground; selectionindicatorclass = spark.skins.mobile160.assets.spinnerlistcontainerselectionindicator; shadowclass = spark.skins.mobile160.assets.spinnerlistcontainershadow; cornerradius = 5; borderthickness = 1; selectionindicatorheight = 40; // was 60 break; Pour plus d informations sur l habillage des composants mobiles, voir «Notions de base sur l habillage mobile» à la page 174. Utilisation des dates et heures localisées avec un contrôle DateSpinner Le contrôle DateSpinner prend en charge tous les paramètres régionaux pris en charge par le périphérique sur lequel l application est exécutée. Si vous définissez les paramètres régionaux sur ja-jp, DateSpinner est alors modifié pour représenter les dates selon le système standard au Japon. Vous pouvez définir la propriété locale directement sur le contrôle DateSpinner ou alors dans un conteneur, tel que l application. Le contrôle DateSpinner hérite de la valeur de cette propriété. Les paramètres régionaux par défaut sont les paramètres régionaux du périphérique sur lequel l application est exécutée, à moins que vous ne les remplaciez à l aide de la propriété locale. L exemple suivant permet de définir les paramètres régionaux sur ja-jp. Vous pouvez sélectionner des paramètres régionaux afin de modifier le format de DateSpinner.

Interface utilisateur et présentation 114 <!-- datespinner/localizeddatespinner.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="localized DateSpinner" locale="ja_jp"> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ private function localechangehandler():void { ds1.setstyle('locale',localeselector.selecteditem); ]]> </fx:script> <s:combobox id="localeselector" change="localechangehandler()"> <s:arraylist> <fx:string>en-us</fx:string> <fx:string>en-uk</fx:string> <fx:string>es-ar</fx:string> <fx:string>he-il</fx:string> <fx:string>ko-kr</fx:string> <fx:string>ja-jp</fx:string> <fx:string>vi-vn</fx:string> <fx:string>zh-cn</fx:string> <fx:string>zh-tw</fx:string> </s:arraylist> </s:combobox> <s:datespinner id="ds1" displaymode="dateandtime"/> </s:view> Utilisation d une liste de compteur dans une application mobile Le composant SpinnerList est une liste spécifique généralement utilisée pour la sélection de données dans les applications mobiles. Par défaut, lorsque l utilisateur fait défiler les éléments de la liste, celle-ci revient au début quand l utilisateur atteint la fin de la liste. Le contrôle SpinnerList est couramment utilisé en tant que composant de liste numérique dans les applications mobiles. L illustration suivante offre un aperçu de l aspect du contrôle SpinnerList dans une application mobile :

Interface utilisateur et présentation 115 Contrôle SpinnerList SpinnerList se comporte comme un tambour cylindrique rotatif. Les utilisateurs peuvent faire pivoter la liste en la jetant vers le haut ou vers le bas ou la faire glisser vers le haut ou le bas et cliquer sur un élément dans la liste. En général, un contrôle SpinnerList est encapsulé dans un contrôle SpinnerListContainer. Cette classe fournit la majorité des éléments constituant le chrome de SpinnerList et définit la présentation. Le chrome inclut les bordures, les ombres ainsi que l aspect de l indicateur de sélection. Les données de SpinnerList sont stockées sous forme de liste. Elles apparaissent dans le compteur à l aide du rendu d élément SpinnerListItemRenderer. Vous pouvez remplacer le rendu d élément pour personnaliser l aspect ou le contenu des éléments de la liste. Le contrôle DateSpinner est un exemple d ensemble de contrôles SpinnerList avec un rendu d élément personnalisé. Actuellement, vous ne pouvez pas désactiver les éléments d un contrôle SpinnerList sans désactiver le contrôle entier. Cette limitation ne s applique pas au contrôle DateSpinner qui fournit une logique supplémentaire pour la configuration des plages de dates désactivées. Définition de donnés pour une liste de compteur Pour définir des données pour un contrôle SpinnerList, procédez de l une des manières suivantes : Définissez l intégration des données dans la propriété dataprovider du contrôle SpinnerList. Définissez les données en tant que balises enfant de la balise <s:spinnerlist>. Définissez les données en ActionScript ou MXML et liez-les au contrôle SpinnerList. Ces données peuvent provenir d un service externe, d une ressource incorporée, telle qu un fichier XML, ou d une autre source de données. Liez le contrôle SpinnerList à une opération de service de données à l aide de l assistant des services de Flash Builder. Pour plus d informations sur la création d applications centrées sur les données avec Flash Builder, voir Connexion aux services de données. Le contrôle SpinnerList prend en charge les classes qui mettent en œuvre l interface IList comme fournisseur de données. Ces classes incluent ArrayCollection, ArrayList, NumericDataProvider et XMLListCollection.

Interface utilisateur et présentation 116 Si vous ne définissez pas de fournisseur de données pour le contrôle SpinnerList lorsqu il est instancié, il apparaît alors avec une seule ligne vide. Après l ajout d un fournisseur de données, SpinnerList se redimensionne pour afficher cinq éléments (nombre par défaut) dans la liste. Dans l exemple suivant, les données du contrôle SpinnerList sont définies dans les balises enfant de la balise <s:spinnerlist> : <!-- mobile_spinnerlist/views/spinnerlistcomplexdataprovider.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="complex Data Provider"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout paddingtop="10" paddingleft="10"/> </s:layout> <s:label text="select a person:"/> <s:spinnerlistcontainer> <s:spinnerlist id="peoplelist" width="200" labelfield="name"> <s:arraylist> <fx:object name="friedeman Friese" companyid="14266"/> <fx:object name="stephen Glenn" companyid="14266"/> <fx:object name="reiner Knizia" companyid="11233"/> <fx:object name="alan Moon" companyid="11543"/> <fx:object name="klaus Teuber" companyid="13455"/> <fx:object name="dale Yu" companyid="14266"/> </s:arraylist> </s:spinnerlist> </s:spinnerlistcontainer> <s:label text="selected ID: {peoplelist.selecteditem.companyid"/> </s:view> Dans l exemple suivant, les données de SpinnerList sont définies dans la balise <s:spinnerlist> :

Interface utilisateur et présentation 117 <!-- mobile_spinnerlist/views/spinnerlistinlinedataprovider.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="inline Data Provider"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout paddingtop="10" paddingleft="10"/> </s:layout> <fx:script> <![CDATA[ import mx.collections.arraylist; ]]> </fx:script> <s:spinnerlistcontainer> <!-- Create data provider inline. --> <s:spinnerlist id="smalllist" dataprovider="{new ArrayList([1,5,10,15,30])" wrapelements="false" typicalitem="44"/> </s:spinnerlistcontainer> <s:label text="selected Item: {smalllist.selecteditem"/> </s:view> Dans l exemple suivant, les données de SpinnerList sont définies en ActionScript :

Interface utilisateur et présentation 118 <!-- mobile_spinnerlist/views/spinnerlistbasicdataprovider.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="basic Data Provider" creationcomplete="initapp()"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout paddingtop="10" paddingleft="10"/> </s:layout> <fx:script> <![CDATA[ import mx.collections.arraylist; [Bindable] public var daysofweek:arraylist; private function initapp():void { daysofweek = new ArrayList(["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]); ]]> </fx:script> <s:spinnerlistcontainer> <s:spinnerlist id="dayslist" width="100" dataprovider="{daysofweek"/> </s:spinnerlistcontainer> <s:label text="selected Day: {dayslist.selecteditem"/> </s:view> Dans le cas où des objets complexes se trouvent sous la forme de données en ActionScript, spécifiez la propriété labelfield de sorte que SpinnerList affiche les libellés corrects, comme le montre l exemple suivant :

Interface utilisateur et présentation 119 <!-- mobile_spinnerlist/views/spinnerlistcomplexasdp.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="complex Data Provider in AS" creationcomplete="initapp()"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout paddingtop="10" paddingleft="10"/> </s:layout> <fx:script> <![CDATA[ import mx.collections.arraylist; [Bindable] private var myac:arraylist; private function initapp():void { myac = new ArrayList([ {name:"alan Moon",id:42, {name:"friedeman Friese",id:44, {name:"dale Yu",id:45, {name:"stephen Glenn",id:47, {name:"reiner Knizia",id:48, {name:"klaus Teuber",id:49 ]); ]]> </fx:script> <s:spinnerlistcontainer> <s:spinnerlist id="peoplelist" dataprovider="{myac" width="200" labelfield="name"/> </s:spinnerlistcontainer> <s:label text="selected ID: {peoplelist.selecteditem.id"/> </s:view> Vous pouvez également utiliser une classe de commodité NumericDataProvider pour fournir des données numériques au contrôle SpinnerList. Cette classe vous permet de définir facilement un ensemble de données numériques avec une valeur minimale, une valeur maximale et une taille d incrément. Dans l exemple suivant, la classe NumericDataProvider est utilisée comme source de données pour les contrôles SpinnerList :

Interface utilisateur et présentation 120 <!-- mobile_spinnerlist/views/minmaxspinnerlist.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="min/max SpinnerLists" backgroundcolor="0x000000"> <fx:script> <![CDATA[ import mx.collections.arraylist; ]]> </fx:script> <s:spinnerlistcontainer top="10" left="10"> <s:spinnerlist typicalitem="100"> <s:dataprovider> <s:numericdataprovider minimum="0" maximum="23" stepsize="1"/> </s:dataprovider> </s:spinnerlist> <s:spinnerlist typicalitem="100"> <s:dataprovider> <s:numericdataprovider minimum="0" maximum="59" stepsize="1"/> </s:dataprovider> </s:spinnerlist> <s:spinnerlist typicalitem="100"> <s:dataprovider> <s:numericdataprovider minimum="0" maximum="59" stepsize="1"/> </s:dataprovider> </s:spinnerlist> <s:spinnerlist typicalitem="100" dataprovider="{new ArrayList(['AM','PM'])" wrapelements="false"/> </s:spinnerlistcontainer> </s:view> La valeur de la propriété stepsize peut être négative. Dans ce cas, la valeur maximale est la première valeur affichée. Le compteur démarre à la valeur maximale et s échelonne par incrément jusqu à la valeur minimale. Sélection d éléments dans une liste de compteur Le contrôle SpinnerList prend en charge la sélection d un seul élément à la fois. L élément sélectionné se trouve toujours au centre du composant et il est affiché, par défaut, sous l indicateur de sélection. Si SpinnerList ne pivote pas, c est qu un élément est sélectionné. Vous ne pouvez pas sélectionner un élément désactivé ou une ligne sans élément. Pour obtenir l élément actuellement sélectionné dans le contrôle SpinnerList, accédez aux propriétés selectedindex ou selecteditem du contrôle. Pour définir l élément actuellement sélectionné dans le contrôle SpinnerList, définissez la valeur des propriétés selectedindex ou selecteditem. Ces propriétés peuvent être définies dans la balise <s:spinnerlist>, de manière à ce que l élément soit sélectionné lors de la création de SpinnerList. Si vous ne définissez pas la valeur des propriétés selectedindex ou selecteditem de manière explicite dans SpinnerList, l élément sélectionné par défaut devient le premier élément de la liste.

Interface utilisateur et présentation 121 Vous pouvez utiliser les propriétés selectedindex ou selecteditem pour modifier l élément sélectionné dans le compteur par voie de programmation. Lorsque vous définissez l une de ces propriétés, le contrôle s aligne sur l élément ; il n anime pas (ou ne fait pas pivoter) le compteur vers l élément. Dans l exemple suivant, le contrôle SpinnerList est utilisé comme minuteur. L objet Timer change l élément sélectionné dans le compteur en modifiant la valeur de la propriété selectedindex toutes les secondes : <!-- mobile_spinnerlist/views/spinnerlistcountdowntimer.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="countdown Timer" creationcomplete="initapp()"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <fx:script> <![CDATA[ private var mytimer:timer; private function initapp():void { mytimer = new Timer(1000, 0); // 1 second mytimer.addeventlistener(timerevent.timer, changespinner); mytimer.start(); private function changespinner(e:event):void { seclist.selectedindex = seclist.selectedindex - 1; ]]> </fx:script> <s:spinnerlistcontainer left="50" top="50"> <s:spinnerlist id="seclist" width="100" selectedindex="60"> <s:dataprovider> <s:numericdataprovider minimum="0" maximum="60" stepsize="1"/> </s:dataprovider> </s:spinnerlist> </s:spinnerlistcontainer> </s:view> Evénements et interactions utilisateur avec une liste de compteur Lorsque l élément sélectionné du contrôle SpinnerList est modifié, le contrôle envoie les événements change et valuecommit. Cette distribution se produit généralement en réponse à une interaction utilisateur, telle qu un balayage. Si un utilisateur sélectionne un élément en le touchant, le contrôle distribue les événements click, change et valuecommit. Lorsque l élément sélectionné est modifié par voie de programmation, le contrôle SpinnerList envoie uniquement un événement valuecommit. Lorsque le contrôle SpinnerList pivote, il ne distribue aucun événement pour les éléments qu il transmet. Il distribue uniquement l événement change ou valuecommit lorsqu il est au repos sur un nouvel élément. Lorsque le contrôle SpinnerList est instancié pour la première fois avec un fournisseur de données, il distribue les événements change et valuecommit. Dans cet exemple, des événements courants sont distribués lors de l utilisation du contrôle SpinnerList :

Interface utilisateur et présentation 122 <!-- mobile_spinnerlist/views/spinnerlistevents.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="spinnerlist Events" creationcomplete="initapp()"> <s:layout> <s:verticallayout paddingtop="10" paddingleft="10" paddingright="10" paddingbottom="10"/> </s:layout> <fx:script> <![CDATA[ import mx.collections.arraylist; [Bindable] public var daysofweek:arraylist; private function initapp():void { daysofweek = new ArrayList(["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]); private function eventhandler(e:event):void { ta1.text += "Event: " + e.type + " (selecteditem: " + e.currenttarget.selecteditem + ")\n"; ]]> </fx:script> <s:spinnerlistcontainer> <s:spinnerlist id="dayslist" width="300" dataprovider="{daysofweek" change="eventhandler(event)" gestureswipe="eventhandler(event)" click="eventhandler(event)" gesturezoom="eventhandler(event)" /> </s:spinnerlistcontainer> <s:textarea id="ta1" width="100%" height="100%"/> </s:view> L illustration suivante présente la sortie après l interaction avec le contrôle SpinnerList :

Interface utilisateur et présentation 123 Evénements du contrôle SpinnerList Définition du retour au premier élément d une liste de compteur Par défaut, le nombre d éléments du fournisseur de données du contrôle SpinnerList est inférieur au nombre d éléments affichés dans le compteur. Dans ce cas, le compteur ne revient pas au premier élément, il s arrête au dernier élément de la liste. Dans le cas contraire, le compteur revient au premier élément de la liste lorsque l utilisateur passe le dernier élément. Par défaut, le nombre d éléments affichés dans la liste est de 5. Si vous souhaitez modifier le nombre d éléments, il vous faut créer un habillage personnalisé. Pour plus d informations, voir «Création d un habillage personnalisé pour une liste de compteur» à la page 125. La valeur de la propriété wrapelements détermine le retour ou non du contrôle SpinnerList au premier élément lorsque le dernier élément de la liste est atteint. Si la propriété wrapelements est définie sur false, le compteur s arrête lorsqu il atteint la fin de la liste, quel que soit le nombre d éléments dans la liste et le nombre d éléments affichés. Si la propriété wrapelements est définie sur true, le compteur revient au premier élément si la liste contient au moins un élément de plus que le nombre d éléments pouvant être affichés. Par exemple, si le contrôle SpinnerList peut afficher cinq éléments mais que la liste n en comporte que quatre, celle-ci ne reviendra pas au premier élément, quelle que soit la configuration de la propriété wrapelements. Vous pouvez remplacer le comportement de retour au premier élément par défaut du contrôle SpinnerList en définissant la propriété wrapelements sur true ou false. L exemple suivant vous permet de basculer la valeur de la propriété wrapelements :

Interface utilisateur et présentation 124 <!-- mobile_spinnerlist/views/spinnerlistwrapelements.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="wrap Elements"> <s:layout> <s:verticallayout paddingtop="10" paddingleft="10"/> </s:layout> <fx:script> <![CDATA[ import mx.collections.arraylist; ]]> </fx:script> <s:spinnerlistcontainer> <s:spinnerlist id="smalllist" typicalitem="45" dataprovider="{new ArrayList([1,5,6,10,15,30])" wrapelements="{cb1.selected"/> </s:spinnerlistcontainer> <!-- By default, cause the elements to be wrapped by setting this to true --> <s:checkbox id="cb1" label="wrap Elements" selected="true"/> </s:view> De manière générale, les utilisateurs s attendent à ce que la liste comporte un retour au premier élément s il existe plus d éléments que la liste ne peut en afficher. S il existe moins d éléments dans la liste que le compteur ne peut en afficher, les utilisateurs s attendent à ce que la liste s arrête au dernier élément. Définition de styles pour une liste de compteur Le contrôle SpinnerList prend en charge tous les styles de texte courants du thème mobile Spark. Ces styles incluent les propriétés fontsize, fontweight, color, textdecoration et les propriétés d alignement. Vous pouvez définir ces propriétés de style directement sur le contrôle dans le code MXML ou CSS. Le contrôle SpinnerList hérite également de ces propriétés si ces dernières sont définies sur un conteneur parent. Vous pouvez également définir les propriétés de marge en modifiant les propriétés de style de SpinnerListItemRenderer. Dans l exemple suivant, les propriétés de style relatives au texte sont définies sur le sélecteur de type SpinnerList et les propriétés de marge sur le sélecteur de type SpinnerListItemRenderer :

Interface utilisateur et présentation 125 <!-- mobile_spinnerlist/spinnerlistexamples2.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.spinnerliststyles"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <fx:style> @namespace s "library://ns.adobe.com/flex/spark"; s SpinnerList { textalign: right; fontsize: 13; fontweight: bold; color: red; s SpinnerListItemRenderer { paddingtop: 5; paddingbottom: 5; paddingright: 5; </fx:style> </s:viewnavigatorapplication> Dans une application mobile, définissez le bloc <fx:style> sur le fichier d application de niveau supérieur si vous utilisez des sélecteurs de type. Dans le cas contraire, le compilateur génère un avertissement et les styles ne sont pas appliqués. Le contrôle SpinnerList ne prend pas en charge les propriétés de style accentcolor, backgroundalpha, backgroundcolor ou chromecolor. Création d un habillage personnalisé pour une liste de compteur Vous pouvez créer un habillage personnalisé pour un contrôle SpinnerList ou pour le contrôle SpinnerListContainer. Pour ce faire, copiez la source de SpinnerListSkin ou de SpinnerListContainerSkin afin de l utiliser comme base pour votre classe d habillage personnalisée. En général, les habillages SpinnerList personnalisés sont créés afin de modifier les aspects suivants d un contrôle SpinnerList ou de son conteneur : Taille ou forme du cadre autour de l élément actuellement sélectionné (selectionindicator) : cette modification est effectuée en créant une classe SpinnerListContainerSkin personnalisée. Hauteur de chaque ligne (rowheight) : cette modification est effectuée en créant une classe SpinnerListSkin personnalisée. Nombre de lignes affichées (requestedrowcount) : cette modification est effectuée en créant une classe SpinnerListSkin personnalisée. Aspect du conteneur, tel que le rayon de l angle ou l épaisseur de la bordure : cette modification est effectuée en créant une classe SpinnerListContainerSkin personnalisée. Pour obtenir des exemples d habillages SpinnerListSkin et SpinnerListContainerSkin personnalisés, voir «Personnalisation de l aspect d un contrôle DateSpinner» à la page 109.

Interface utilisateur et présentation 126 Utilisation d images dans une liste de compteur Vous pouvez utiliser des images au lieu de libellés dans un contrôle SpinnerList en définissant IconItemRenderer comme rendu d élément pour le contrôle SpinnerList. Pour utiliser des images dans un objet IconItemRenderer, vous pouvez soit les incorporer, soit les charger lors de l exécution. Pour les utilisateurs de périphérique mobile, il est peut-être plus approprié de les incorporer afin de réduire l utilisation du réseau de données. Dans l exemple suivant, les images sont incorporées dans le contrôle SpinnerList : <!-- mobile_spinnerlist/views/spinnerlistembeddedimage.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="embedded Images"> <s:layout> <s:verticallayout paddingtop="10" paddingleft="10"/> </s:layout> <fx:script> <![CDATA[ import mx.collections.arraylist; [Embed(source="../../assets/product_icons/flex_50x50.gif")] [Bindable] public var icon0:class; [Embed(source="../../assets/product_icons/acrobat_reader_50x50.gif")] [Bindable] public var icon1:class; [Embed(source="../../assets/product_icons/coldfusion_50x50.gif")] [Bindable] public var icon2:class; [Embed(source="../../assets/product_icons/flash_50x50.gif")] [Bindable] public var icon3:class; [Embed(source="../../assets/product_icons/flash_player_50x50.gif")] [Bindable] public var icon4:class; [Embed(source="../../assets/product_icons/photoshop_50x50.gif")] [Bindable] public var icon5:class; // Return an ArrayList of icons for each spinner private function geticonlist():arraylist { var a:arraylist = new ArrayList(); a.additem({icon:icon0); a.additem({icon:icon1); a.additem({icon:icon2); a.additem({icon:icon3); a.additem({icon:icon4); a.additem({icon:icon5); return a; ]]> </fx:script> <s:spinnerlistcontainer>

Interface utilisateur et présentation 127 <s:spinnerlist id="productlist1" width="90" dataprovider="{geticonlist()" selectedindex="0"> <s:itemrenderer> <fx:component> <s:iconitemrenderer labelfield="" iconfield="icon"/> </fx:component> </s:itemrenderer> </s:spinnerlist> <s:spinnerlist id="productlist2" width="90" dataprovider="{geticonlist()" selectedindex="2"> <s:itemrenderer> <fx:component> <s:iconitemrenderer labelfield="" iconfield="icon"/> </fx:component> </s:itemrenderer> </s:spinnerlist> <s:spinnerlist id="productlist3" width="90" dataprovider="{geticonlist()" selectedindex="1"> <s:itemrenderer> <fx:component> <s:iconitemrenderer labelfield="" iconfield="icon"/> </fx:component> </s:itemrenderer> </s:spinnerlist> </s:spinnerlistcontainer> </s:view> L illustration suivante présente la manière dont l application apparaît sur un périphérique mobile : Contrôle SpinnerList avec des images incorporées

128 Chapitre 4 : Conception d applications et flux de travail Activation de la persistance dans une application mobile Une application destinée à un périphérique mobile est souvent interrompue par d autres actions, telles qu un texto, un appel téléphonique ou d autres applications mobiles. Généralement, lorsqu une application interrompue est relancée, l utilisateur s attend à ce que l état précédent de l application soit restauré. Le mécanisme de persistance permet au périphérique de restaurer l application dans son état antérieur. La structure Flex fournit deux types de persistance pour les applications mobiles. La persistance en mémoire conserve les données de la vue lorsque l utilisateur navigue dans l application. La persistance de session restaure les données si l utilisateur quitte l application, puis la redémarre. La persistance de session est importante dans les applications mobiles car un système d exploitation mobile peut fermer des applications à tout moment (par exemple, lorsque la mémoire est insuffisante). Le blogueur Steve Mathews a créé une entrée de cookbook sur la persistance des données simples dans une application Flex mobile. La blogueuse Holly Schinsky a publié un article sur la persistance et la gestion des données dans la gestion des données mobiles de Flex. Persistance en mémoire Les conteneurs View prennent en charge la persistance en mémoire à travers la propriété View.data. La propriété data d une vue existante est automatiquement enregistrée lorsque la section sélectionnée change ou qu une nouvelle vue est placée sur la pile ViewNavigator, provoquant l élimination de la vue existante. La propriété data de la vue est restaurée lorsque le contrôle revient à la vue et que celle-ci est réinstanciée et activée. Par conséquent, la persistance en mémoire permet de conserver les informations d état d une vue au moment de l exécution. Persistance de session La persistance de session conserve des informations d état relatives à l application entre deux exécutions de l application. Les conteneurs ViewNavigatorApplication et TabbedViewNavigatorApplication définissent la propriété persistnavigatorstate pour l implémentation de la persistance de session. Définissez persistnavigatorstate sur true pour activer la persistance de session. Par défaut, persistnavigatorstate est défini sur false. Si elle est activée, la persistance de session enregistre l état de l application sur disque en utilisant un objet partagé local, nommé FxAppCache. L application peut également faire appel à des méthodes du spark.managers.persistencemanager pour enregistrer des informations supplémentaires dans l objet partagé local. Persistance de session ViewNavigator Le conteneur ViewNavigator prend en charge la persistance de session en enregistrant l état de sa pile de vues sur disque lors de l arrêt de l application. Cet enregistrement inclut la propriété data de la vue actuelle.

Conception d applications et flux de travail 129 Lors du redémarrage de l application, la pile de ViewNavigator est réinitialisée et l utilisateur obtient la même vue et le même contenu que ceux visibles lors de l arrêt de l application. Dans la mesure où la pile contient une copie de la propriété data pour chaque vue, les vues qui appartenaient auparavant à la pile peuvent être recréées lorsqu elles sont activées. Persistance de session TabbedViewNavigator Pour le conteneur TabbedViewNavigator, la persistance de session enregistre l onglet actuellement sélectionné dans la barre d onglets à la fermeture de l application. L onglet correspond au conteneur ViewNavigator et à la pile de vues qui compose l onglet. L enregistrement comprend la propriété data de la vue actuelle. Ainsi, lors du redémarrage de l application, l onglet actif et le conteneur ViewNavigator associé sont restaurés à l état auquel ils se trouvaient lors de l arrêt de l application. Remarque : dans le cas d une application définie par le conteneur TabbedViewNavigatorApplication, seule la pile du conteneur ViewNavigator actif est enregistrée. Ainsi, lors du redémarrage de l application, seul l état du conteneur ViewNavigator actif est restauré. Représentation des données de persistance de session Le mécanisme de persistance utilisé par Flex n est ni chiffré ni protégé. Par conséquent, les données conservées sont stockées dans un format qui peut facilement être interprété par un autre programme ou un autre utilisateur. N utilisez pas ce mécanisme de persistance pour conserver des informations sensibles telles que les identifiants de connexion. Vous avez la possibilité de rédiger votre propre gestionnaire de persistance qui vous offre une meilleure protection. Pour plus d informations, voir «Personnalisation du mécanisme de persistance» à la page 131. Utilisation de la persistance de session L exemple suivant définit la propriété persistnavigatorstate sur true d une application, ce qui permet d activer la persistance de session : <!-- containers\mobile\sparksinglesectionpersist.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.employeemainview" persistnavigatorstate="true"> <fx:script> <![CDATA[ protected function button1_clickhandler(event:mouseevent):void { // Switch to the first view in the section. navigator.poptofirstview(); ]]> </fx:script> <s:navigationcontent> <s:button icon="@embed(source='assets/home.png')" click="button1_clickhandler(event)"/> </s:navigationcontent> </s:viewnavigatorapplication> Cette application utilise le fichier EmployeeMainView.mxml en tant que première vue. Celui-ci définit un contrôle Liste qui vous permet de sélectionner un nom d utilisateur :

Conception d applications et flux de travail 130 <!-- containers\mobile\views\employeemainview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="employees"> <s:layout> <s:verticallayout paddingtop="10"/> </s:layout> <fx:script> <![CDATA[ import spark.events.indexchangeevent; protected function mylist_changehandler(event:indexchangeevent):void { navigator.pushview(views.employeeview,mylist.selecteditem); ]]> </fx:script> <s:label text="select an employee name"/> <s:list id="mylist" width="100%" height="100%" labelfield="firstname" change="mylist_changehandler(event)"> <s:arraycollection> <fx:object firstname="bill" lastname="smith" companyid="11233"/> <fx:object firstname="dave" lastname="jones" companyid="13455"/> <fx:object firstname="mary" lastname="davis" companyid="11543"/> <fx:object firstname="debbie" lastname="cooper" companyid="14266"/> </s:arraycollection> </s:list> </s:view> Pour afficher la persistance de session, ouvrez l application et sélectionnez «Dave» dans le contrôle Liste pour accéder à la vue EmployeeView.mxml : <!-- containers\mobile\views\employeeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="employee View"> <s:layout> <s:verticallayout paddingtop="10"/> </s:layout> <s:vgroup> <s:label text="{data.firstname"/> <s:label text="{data.lastname"/> <s:label text="{data.companyid"/> </s:vgroup> </s:view> La vue EmployeeView.mxml affiche les données relatives à «Dave». Ensuite, quittez l application. Au redémarrage de l application, la vue EmployeeView.mxml est à nouveau disponible et affiche les même données que celles visibles lors de l arrêt de l application.

Conception d applications et flux de travail 131 Accès aux données dans un objet partagé local Les informations dans un objet partagé local sont enregistrées sous la forme d une paire clé:valeur. Les méthodes de PersistenceManager, par exemple setproperty() et getproperty(), reposent sur la clé permettant d accéder à la valeur associée dans l objet partagé local. Vous pouvez utiliser la méthode setproperty() permettant d enregistrer vos propres paires clé:valeur dans l objet partagé local. La méthode setproperty() présente la signature suivante : setproperty(key:string, value:object):void Utilisez la méthode getproperty() pour accéder à la valeur pour une clé spécifique. La méthode getproperty() présente la signature suivante : getproperty(key:string):object Lorsque la propriété persistnavigatorstate est définie sur true, le gestionnaire de persistance enregistre automatiquement deux paires clé:valeur dans l objet partagé local lors de l arrêt de l application : applicationversion Version de l application telle que décrite par le fichier application.xml. navigatorstate Etat de vue du navigateur, correspondant à la pile du conteneur ViewNavigator actif. Réalisation de la persistance manuelle Si la propriété persistnavigatorstate est définie sur true, Flex réalise automatiquement la persistance de session. Il vous est tout de même possible de conserver des données d application lorsque la propriété persistnavigatorstate est définie sur false. Dans ce cas, implémentez votre propre mécanisme de persistance en faisant appel aux méthodes du PersistenceManager. Utilisez les méthodes setproperty() et getproperty() pour enregistrer et lire les informations de l objet partagé local. Appelez la méthode load() pour initialiser le PersistenceManager. Appelez les méthodes save() pour enregistrer des données sur disque. Remarque : si la propriété persistnavigatorstate est définie sur false, Flex n enregistre pas automatiquement la pile de vues du conteneur ViewNavigator actif lors de l arrêt de l application, ni ne la restaure lors du démarrage de l application. Gestion des événements de persistance Vous pouvez utiliser les événements suivants des conteneurs d application mobile pour développer un mécanisme de persistance personnalisé : navigatorstatesaving navigatorstateloading Vous pouvez annuler l enregistrement de l état d une application en appelant la méthode preventdefault() dans le gestionnaire de l événement navigatorstatesaving. Annulez le chargement de l application au redémarrage en appelant la méthode preventdefault() dans le gestionnaire de l événement navigatorstateloading. Personnalisation du mécanisme de persistance Lorsque la persistance de session est activée, l application s ouvre sur la vue qui était affichée au moment du dernier arrêt de l application. Vous devez stocker suffisamment d informations dans la propriété data de la vue (ou ailleurs, par exemple en tant qu objet partagé) afin de pouvoir restaurer complètement l état de l application.

Conception d applications et flux de travail 132 Par exemple, la vue restaurée doit effectuer des calculs basés sur la propriété data de la vue. L application doit alors reconnaître le moment où elle est redémarrée et réaliser les calculs nécessaires. Il est également possible de substituer les méthodes serializedata() et deserializepersisteddata() de la vue de sorte à réaliser vos propres actions à l arrêt ou au redémarrage de l application. Types de données intégrées pris en charge pour la persistance de session Le mécanisme de persistance prend automatiquement en charge tous les types de données intégrées, y compris : Number, String, Array, Vector, Object, uint, int et Boolean. Ces types de données sont enregistrées automatiquement par le mécanisme de persistance. Classes personnalisées prises en charge pour la persistance de session De nombreuses applications font appel à des classes personnalisées pour définir les données. Si une classe personnalisée contient des propriétés définies par des types de données intégrées, le mécanisme de persistance peut automatiquement enregistrer et charger la classe. Toutefois, vous devez enregistrer la classe à l aide du mécanisme de persistance en appelant la méthode flash.net.registerclassalias(). Généralement, vous appelez cette méthode dans l événement preinitialize de l application, avant que le stockage de persistance ne soit initialisé ou que des données y soient enregistrées. Si vous définissez une classe complexe, une qui utilise des types de données autres que ceux des données intégrées, vous devez convertir ce type de données en type pris en charge, par exemple, String. De même, si la classe définit des variables privées, celles-ci ne sont pas automatiquement conservées. Pour prendre en charge la classe complexe dans le mécanisme de persistance, la classe doit implémenter l interface flash.utils.iexternalizable. Cette interface nécessite que la classe implémente les méthodes writeexternal() et readexternal() permettant d enregistrer et de restaurer une instance de la classe. Prise en charge de plusieurs tailles d écran et valeurs PPP dans une application mobile Consignes pour la prise en charge de plusieurs tailles d écran et valeurs PPP Pour développer une application indépendante de la plateforme, soyez conscient des différents périphériques de sortie. Les périphériques peuvent avoir une taille, ou résolution, d écran différente et une valeur PPP, ou densité, différente. L ingénieur Flex Jason SJ présente deux approches différentes en termes de création d applications mobiles indépendantes de la résolution sur son blog. Terminologie La résolution correspond au nombre de pixels en hauteur fois le nombre de pixels en largeur : à savoir le nombre total de pixels qu un périphérique prend en charge. La valeur PPP est le nombre de points par pouce carré : à savoir la densité de pixels sur l écran d un périphérique. Le terme PPP peut également être interprété comme le nombre de pixels par pouce. Prise en charge des valeurs PPP par Flex Les fonctionnalités Flex ci-dessous simplifient le processus de création d applications indépendantes de la résolution et de la valeur PPP : Habillages : habillages prenant en charge les valeurs PPP pour les composants mobiles. Les habillages mobiles par défaut n ont pas besoin de codage supplémentaire pour être adaptés à la résolution de la plupart des écrans.

Conception d applications et flux de travail 133 applicationdpi : propriété qui définit la taille pour laquelle vos habillages personnalisés sont créés. Supposez que vous définissez cette propriété sur une valeur PPP quelconque et qu un utilisateur exécute l application sur un périphérique doté d une valeur PPP différente. Flex redimensionne tous les élément d une application sur la valeur PPP du périphérique utilisé. Les habillages mobiles par défaut sont dépendants des PPP, avec ou sans redimensionnement des PPP. En conséquence, si vous n utilisez pas de composants présentant des tailles statiques ou des habillages personnalisés, vous n avez généralement pas besoin de définir la propriété applicationdpi. Présentations dynamiques Les présentations dynamiques vous permettent de surmonter les différences de résolution. Par exemple, la définition de la largeur d un contrôle sur 100 % remplit toujours toute la largeur de l écran, que sa résolution soit de 480x854 ou de 480x800. Définition de la propriété applicationdpi Lorsque vous créez des applications indépendantes de la densité, vous pouvez définir la valeur PPP cible sur la balise d application racine. (Pour les applications mobiles, la balise racine est <s:viewnavigatorapplication>, <s:tabbedviewnavigatorapplication> ou <s:application>.) Vous définissez la valeur de la propriété applicationdpi sur 160, 240 ou 320, selon la résolution approximative de votre périphérique cible. Par exemple : <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.densityview1" applicationdpi="320"> Lorsque vous définissez la propriété applicationdpi, vous définissez effectivement une échelle pour l application lorsqu elle est comparée à la résolution réelle du périphérique cible (runtimedpi) au moment de l exécution. Par exemple, si vous définissez la propriété applicationdpi sur 160 et que le périphérique possède une valeur runtimedpi de 160, le facteur d échelle est de 1 (pas de redimensionnement). Si vous définissez la propriété applicationdpi sur 240, le facteur d échelle est de 1,5 (Flex agrandit tout de 150 %). Avec une valeur de 320, le facteur d échelle est de 2 et Flex agrandit tout de 200 %. Dans certains cas, un redimensionnement par un facteur non entier peut générer des artefacts indésirables en raison de l interpolation, comme par exemple des lignes floues. Désactivation du redimensionnement des PPP Pour désactiver le redimensionnement des PPP pour l application, ne définissez pas la valeur de la propriété applicationdpi. Compréhension des propriétés applicationdpi et runtimedpi Le tableau suivant décrit deux propriétés de la classe Application qui interviennent lors de l utilisation d applications à des résolutions différentes :

Conception d applications et flux de travail 134 Propriété applicationdpi Description La densité cible ou PPP de l application. Lorsque vous spécifiez une valeur pour cette propriété, Flex applique un facteur d échelle à l application racine. Par conséquent, une application conçue pour une valeur PPP est redimensionnée et présente un aspect correct sur un autre périphérique doté d une valeur PPP différente. Le facteur d échelle est calculé en comparant la valeur de cette propriété à la propriété runtimedpi. Ce facteur d échelle est appliqué à toute l application, y compris les éléments de préchargement, les pop-ups et tous les composants de l image. Lorsqu elle n est pas spécifiée, cette propriété retourne la même valeur que la propriété runtimedpi. Cette propriété ne peut pas être définie en ActionScript ; elle ne peut être définie qu en MXML. Vous ne pouvez pas modifier la valeur de cette propriété au moment de l exécution. runtimedpi La densité, ou valeur PPP, du périphérique sur lequel l application est en cours d exécution. Retourne la valeur de la propriété Capabilities.screenDPI, arrondie à l une des constantes définies par la classe DPIClassification. Cette propriété est en lecture seule. Création d applications indépendantes de la résolution et des PPP Les applications indépendantes de la résolution et de la valeur PPP présentent les caractéristiques suivantes : Images : les images vectorielles sont redimensionnées en toute transparence pour correspondre à la résolution réelle du périphérique cible. En revanche, les images bitmap ne sont pas toujours redimensionnées aussi efficacement. Dans ce cas, vous pouvez charger les images bitmap à des résolutions différentes, en fonction de la résolution du périphérique, en utilisant la classe MultiDPIBitmapSource. Texte : la taille de la police de texte (pas le texte lui-même) est redimensionnée pour correspondre à la résolution. Structures : utilisez des présentations dynamiques pour vous assurer que l application présente un aspect correct une fois redimensionnée. En général, évitez d utiliser des présentations basées sur les contraintes lorsque vous spécifiez les bordures des pixels par des valeurs absolues. Si vous utilisez des contraintes, choisissez la propriété de la valeur applicationdpi en tenant compte du redimensionnement. Redimensionnement : n utilisez pas les propriétés scalex et scaley sur l objet Application. Lorsque vous définissez la propriété applicationdpi, Flex se charge du redimensionnement. Styles : vous pouvez utiliser des feuilles de style pour personnaliser les propriétés de style pour le système d exploitation du périphérique cible et les paramètres PPP de l application. Habillages : les habillages Flex du thème mobile utilisent la valeur PPP de l application pour déterminer les éléments à utiliser au moment de l exécution. Tous les éléments d habillage visuels définis par des fichiers FXG sont adaptés au périphérique cible. Taille de l application : ne définissez pas explicitement la hauteur et la largeur de l application. De même, lors du calcul de la taille des composants personnalisés ou des popups, n utilisez pas les propriétés stagewidth et stageheight. Utilisez de préférence la propriété SystemManager.screen. Détermination de la valeur PPP de l environnement d exécution Au démarrage de votre application, celle-ci obtient la valeur de la propriété runtimedpi auprès de la propriété Flash Player Capabilities.screenDPI. Cette propriété est mappée sur l une des constantes définies par la classe DPIClassification. Par exemple, un Droid s exécutant à 232 PPP est mappé sur la valeur PPP 240 de l environnement d exécution. Les valeurs PPP des périphériques ne correspondent pas toujours exactement aux constantes DPIClassification (160, 240 ou 320). Ils sont plutôt mappés sur ces classifications, en fonction d un certain nombre de valeurs cibles.

Conception d applications et flux de travail 135 Les mappages sont les suivants : Constante DPIClassification 160 PPP 240 PPP 320 PPP PPP du périphérique réel <200 >=200 et <280 >=280 Vous pouvez personnaliser ces mappages pour remplacer le comportement par défaut ou pour régler les périphériques qui signalent de manière incorrecte leur propre valeur PPP. Pour plus d informations, voir «Remplacement de la valeur PPP par défaut» à la page 144. Choix de la mise à l échelle automatique ou non Choisir d utiliser la mise à l échelle automatique (en définissant la valeur de la propriété applicationdpi) revient à trouver un compromis entre la commodité et le niveau de précision en termes de pixels. Si vous définissez la propriété applicationdpi de sorte que l application soit automatiquement mise à l échelle, Flex utilise les habillages destinés à la propriété applicationdpi. Flex adapte ces habillages à la densité réelle du périphérique. D autres éléments de l application et les positions de la présentation sont également adaptés. Si vous souhaitez utiliser la mise à l échelle automatique et que vous créez vos propres habillages ou éléments destinés à une valeur PPP unique, généralement vous effectuez les opérations suivantes : créer un jeu unique d habillages et de présentations vue/composant qui sont destinés à la propriété applicationdpi que vous spécifiez ; créer plusieurs versions des éléments de bitmap utilisés dans vos habillages ou ailleurs dans votre application et spécifiez-les à l aide de la classe MultiDPIBitmapSource. Les éléments vectoriels et le texte contenu dans vos habillages n ont pas besoin de dépendre de la densité si vous utilisez la mise à l échelle automatique. N utilisez pas la règle @media dans vos feuilles de style, car l application prend en compte une seule valeur PPP cible. testez l application sur des périphériques de différentes densités pour vérifier si l apparence de l application mise à l échelle est acceptable sur chaque périphérique ; En particulier, vérifiez les périphériques qui entraînent un redimensionnement par un facteur non entier. Par exemple, si applicationdpi a la valeur 160, testez l application sur des périphériques dotés d une valeur PPP de 240. Si vous choisissez de ne pas utiliser la mise à l échelle automatique (en ne définissant pas la propriété applicationdpi), obtenez la valeur applicationdpi. Utilisez cette propriété pour déterminer la classification PPP réelle du périphérique et adaptez l application au moment de l exécution en procédant comme suit : créez plusieurs jeux d habillages et de présentations destinés à chaque classification PPP d environnement d exécution, ou créez un seul jeu d habillages et de présentations qui s adapte de façon dynamique aux différentes densités (les habillages Flex intégrés adoptent la deuxième approche : chaque classe d habillage contrôle la propriété applicationdpi et se définit automatiquement en conséquence) ; utilisez des règles @media dans vos feuilles de style pour filtrer les règles CSS en fonction de la classification PPP du périphérique (généralement, les polices et les valeurs de marge sont personnalisées pour chaque valeur PPP) ; testez l application sur des périphériques de différentes densités pour garantir l adaptation appropriée des habillages et des présentations.

Conception d applications et flux de travail 136 Sélection de styles en fonction des PPP Flex inclut la prise en charge de l application des styles en fonction du système d exploitation cible et de la valeur PPP de l application en CSS. Vous appliquez les styles en utilisant la règle @media qui figure dans votre feuille de style. La règle @media fait partie de la spécification CSS ; Flex développe cette règle pour inclure des propriétés supplémentaires : application-dpi et os-platform. Vous utilisez ces propriétés pour appliquer de manière sélective les styles en fonction de la valeur PPP de l application et de la plateforme sur laquelle l application est exécutée. L exemple suivant définit la propriété de style par défaut du contrôle Spark Button, fontsize, sur 12. Si le périphérique utilise 240 PPP et s exécute sur le système d exploitation Android, la propriété fontsize est 10. <!-- mobile_skins/mediaqueryvaluesmain.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" applicationdpi="320"> <fx:style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s Button { fontsize: 12; @media (os-platform: "Android") and (application-dpi: 240) { s Button { fontsize: 10; </fx:style> </s:viewnavigatorapplication> Valeurs de la propriété application-dpi La propriété CSS application-dpi est comparée à la valeur de la propriété de style applicationdpi qui est définie sur l application racine. Les valeurs valides pour la propriété CSS application-dpi sont les suivantes : 160 240 320 Chacune des valeurs prises en charge pour application-dpi possède une constante correspondante dans la classe DPIClassification. Valeurs de la propriété os-platform La propriété CSS os-platform est mise en correspondance avec la valeur de la propriété flash.system.capabilities.version de Flash Player. Les valeurs valides pour la propriété CSS os-platform sont les suivantes : Android ios Macintosh Linux QNX

Conception d applications et flux de travail 137 Windows La correspondance ne respecte pas la casse. Si aucune des entrées ne correspond, Flex recherche une correspondance secondaire en comparant les trois premiers caractères avec la liste des plateformes prises en charge. Valeurs par défaut des propriétés application-dpi et os-platform Si vous ne définissez pas explicitement une expression contenant les propriétés application-dpi ou os-platform, toutes les expressions sont supposées correspondre. Opérateurs dans la règle @media La règle @media prend en charge les opérateurs courants «and» et «not». Elle prend également en charge les listes séparées par des virgules. La séparation des expressions par une virgule implique une condition «or». Lorsque vous utilisez l opérateur «not», le mot «not» doit être le premier mot-clé dans l expression. Cet opérateur nie l expression entière et pas seulement la propriété qui suit le mot «not». En raison du bogue SDK-29191, l opérateur «not» doit être suivi d un type de support, tel que «all», avant une ou plusieurs expressions. L exemple suivant présente l utilisation de ces opérateurs courants : <!-- mobile_skins/mediaqueryvaluesmain.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" applicationdpi="320"> <fx:style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; /* Every os-platform @ 160dpi */ @media (application-dpi: 160) { s Button { fontsize: 10; /* IOS only @ 240dpi */ @media (application-dpi: 240) and (os-platform: "IOS") { s Button { fontsize: 11; /* IOS at 160dpi or Android @ 160dpi */ @media (os-platform: "IOS") and (application-dpi:160), (os-platform: "ANDROID") and

Conception d applications et flux de travail 138 (application-dpi: 160) { s Button { fontsize: 13; /* Every os-platform except Android @ 240dpi */ @media not all and (application-dpi: 240) and (os-platform: "Android") { s Button { fontsize: 12; /* Every os-platform except IOS @ any DPI */ @media not all and (os-platform: "IOS") { s Button { fontsize: 14; </fx:style> </s:viewnavigatorapplication> Sélection d éléments bitmap en fonction des PPP Les éléments d image bitmap s affichent généralement de façon optimale seulement à la résolution pour laquelle ils sont conçus. Cette limitation peut poser des problèmes lorsque vous concevez des applications pour différentes résolutions. La solution consiste à créer plusieurs bitmaps, chacun ayant sa propre résolution, puis à charger le fichier approprié en fonction de la valeur de la propriété runtimedpi de l application. Les composants Spark BitmapImage et Image ont une propriété source de type Objet. En raison de cette propriété, vous pouvez passer une classe qui définit les éléments à utiliser. Dans ce cas, vous passez la classe MultiDPIBitmapSource pour mapper différentes sources, selon la valeur de la propriété runtimedpi. L exemple suivant charge une image différente, selon les PPP :

Conception d applications et flux de travail 139 <!-- mobile_skins/views/multisourceview3.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="image with MultiDPIBitmapSource"> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ import mx.core.flexglobals; private function dosomething():void { /* The MultiDPIBitmapSource's source data. */ myta.text = myimage.source.getsource(flexglobals.toplevelapplication.applicationdpi).tostring(); ]]> </fx:script> <s:image id="myimage"> <s:source> <s:multidpibitmapsource source160dpi="assets/low-res/bulldog.jpg" source240dpi="assets/med-res/bulldog.jpg" source320dpi="assets/high-res/bulldog.jpg"/> </s:source> </s:image> <s:button id="mybutton" label="click Me" click="dosomething()"/> <s:textarea id="myta" width="100%"/> </s:view> Lorsque vous utilisez les classes BitmapImage et Image avec MultiDPIBitmapSource dans une application de bureau, la propriété source160dpi est utilisée pour la source. La propriété icon du contrôle Button utilise également une classe en tant qu argument. En conséquence, vous pouvez aussi utiliser un objet MultiDPIBitmapSource en tant que source pour l icône de Button. Vous pouvez définir la source de l icône en ligne, comme le présente l exemple suivant :

Conception d applications et flux de travail 140 <!-- mobile_skins/views/multisourceview2.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="icons Inline"> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ import mx.core.flexglobals; private function dosomething():void { /* The MultiDPIBitmapSource's source data. */ myta.text = dogbutton.getstyle("icon").getsource(flexglobals.toplevelapplication.applicationdpi).tostrin g(); ]]> </fx:script> <s:button id="dogbutton" click="dosomething()"> <s:icon> <s:multidpibitmapsource id="dogicons" source160dpi="@embed('../../assets/low-res/bulldog.jpg')" source240dpi="@embed('../../assets/med-res/bulldog.jpg')" source320dpi="@embed('../../assets/high-res/bulldog.jpg')"/> </s:icon> </s:button> <s:textarea id="myta" width="100%"/> </s:view> Vous pouvez également définir des icônes en les déclarant dans un bloc <fx:declarations> et en attribuant la source par liaison des données, comme le montre l exemple suivant :

Conception d applications et flux de travail 141 <!-- mobile_skins/views/multisourceview1.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" title="icons in Declarations"> <fx:declarations> <s:multidpibitmapsource id="dogicons" source160dpi="@embed('../../assets/low-res/bulldog.jpg')" source240dpi="@embed('../../assets/med-res/bulldog.jpg')" source320dpi="@embed('../../assets/high-res/bulldog.jpg')"/> </fx:declarations> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ import mx.core.flexglobals; private function dosomething():void { /* The MultiDPIBitmapSource's source data. */ myta.text = dogicons.getsource(flexglobals.toplevelapplication.applicationdpi).tostring(); ]]> </fx:script> <s:button id="dogbutton" icon="{dogicons" click="dosomething()"/> <s:textarea id="myta" width="100%"/> </s:view> Si la propriété runtimedpi est mappe sur une propriété sourcexxxdpi qui est null ou sur une chaîne vide (""), Flash Player utilise la densité la plus élevée suivante comme source. Si cette valeur est également null ou vide, la densité la plus basse suivante est utilisée. Si cette valeur est égalementnull ou vide, Flex attribue null comme source et aucune image n est affichée. En d autres termes, vous ne pouvez pas spécifier explicitement qu aucune image ne doit être affichée pour une valeur PPP particulière. Sélection des éléments d habillage en fonction des PPP La logique dans les constructeurs des habillages mobiles par défaut choisit les éléments en fonction de la valeur de la propriété applicationdpi. Ces classes sélectionnent les éléments qui correspondent le mieux à la valeur PPP cible. Lorsque vous créez des habillages personnalisés qui fonctionnent avec et sans redimensionnement des PPP, utilisez la propriété applicationdpi et non pas la propriété runtimedpi. Par exemple, la classe spark.skins.mobile.buttonskin utilise une instruction switch/case qui sélectionne les éléments FXG conçus pour des valeurs PPP particulières, comme ci-après :

Conception d applications et flux de travail 142 switch (applicationdpi) { case DPIClassification.DPI_320: { upborderskin = spark.skins.mobile320.assets.button_up; downborderskin = spark.skins.mobile320.assets.button_down;... break; case DPIClassification.DPI_240: { upborderskin = spark.skins.mobile240.assets.button_up; downborderskin = spark.skins.mobile240.assets.button_down;... break; Outre la sélection conditionnelle des éléments FXG, les classes d habillages mobiles définissent également les valeurs des autres propriétés de style comme les écarts de présentation et les marges intérieures. Ces paramètres sont basés sur la valeur PPP du périphérique cible. Non-définition de la propriété applicationdpi Si vous ne définissez pas la propriété applicationdpi, les habillages utilisent par défaut la propriété runtimedpi. Ce mécanisme garantit qu un habillage dont les valeurs sont basées sur la propriété applicationdpi, et non pas sur la propriété runtimedpi, utilise la ressource appropriée avec et sans redimensionnement des PPP. Lors de la création d habillages personnalisés, vous pouvez choisir d ignorer le paramètre applicationdpi. Cela produit un habillage toujours redimensionné pour correspondre à la valeur PPP du périphérique cible, mais son aspect risque de ne pas être parfait si ses éléments ne sont pas spécifiquement conçus pour cette valeur PPP. Utilisation de la propriété applicationdpi en CSS Utilisez la valeur de la propriété applicationdpi dans le sélecteur CSS @media pour personnaliser les styles utilisés par votre application pour périphérique mobile ou tablette sans créer d habillages personnalisés. Pour plus d informations, voir «Sélection de styles en fonction des PPP» à la page 136. Détermination manuelle du facteur d échelle et de la valeur PPP actuelle Pour demander manuellement à une application de périphérique mobile ou de tablette de sélectionner des éléments en fonction de la valeur PPP du périphérique cible, vous pouvez calculer le facteur d échelle au moment de l exécution. Pour ce faire, vous divisez la valeur de la propriété runtimedpi par celle de la propriété de style applicationdpi : import mx.core.flexglobals; var curdensity:number = FlexGlobals.topLevelApplication.runtimeDPI; var curappdpi:number = FlexGlobals.topLevelApplication.applicationDPI; var currentscalingfactor:number = curdensity / curappdpi; Vous pouvez utiliser le facteur de mise à l échelle calculé pour sélectionner manuellement des éléments. L exemple suivant définit les emplacements personnalisés des éléments bitmap pour chaque valeur PPP. Il charge ensuite une image à partir de cet emplacement personnalisé :

Conception d applications et flux de travail 143 <!-- mobile_skins/densitymain.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.densityview1" applicationdpi="240" initialize="initapp()"> <fx:script> <![CDATA[ [Bindable] public var densitydependentdir:string; [Bindable] public var curdensity:number; [Bindable] public var appdpi:number; [Bindable] public var curscalefactor:number; public function initapp():void { curdensity = runtimedpi; appdpi = applicationdpi; curscalefactor = appdpi / curdensity; switch (curscalefactor) { case 1: { densitydependentdir = "../../assets/low-res/"; break; case 1.5: { densitydependentdir = "../../assets/med-res/"; break; case 2: { densitydependentdir = "../../assets/high-res/"; break; ]]> </fx:script> </s:viewnavigatorapplication> La vue qui utilise le facteur d échelle est comme suit :

Conception d applications et flux de travail 144 <!-- mobile_skins/views/densityview1.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="home" creationcomplete="initview()"> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ import mx.core.flexglobals; [Bindable] public var imagepath:string; private function initview():void { label0.text = "App DPI:" + FlexGlobals.topLevelApplication.appDPI; label1.text = "Cur Density:" + FlexGlobals.topLevelApplication.curDensity; label2.text = "Scale Factor:" + FlexGlobals.topLevelApplication.curScaleFactor; imagepath = FlexGlobals.topLevelApplication.densityDependentDir + "bulldog.jpg"; ta1.text = myimage.source.tostring(); ]]> </fx:script> <s:image id="myimage" source="{imagepath"/> <s:label id="label0"/> <s:label id="label1"/> <s:label id="label2"/> <s:textarea id="ta1" width="100%"/> </s:view> Remplacement de la valeur PPP par défaut Une fois la valeur PPP de l application définie, votre application est redimensionnée en fonction de la valeur PPP signalée par le périphérique sur lequel elle s exécute. Dans certains cas, les périphériques signalent des valeurs PPP incorrectes ou vous souhaitez remplacer la méthode de sélection de la valeur PPP par défaut par une méthode de redimensionnement personnalisée. Vous pouvez remplacer le comportement de redimensionnement par défaut d une application en remplaçant les mappages PPP par défaut. Par exemple, si un périphérique signale à tort être doté de 240 PPP au lieu de 160 PPP, vous pouvez créer un mappage personnalisé qui recherche ce périphérique et le classe comme doté de 160 PPP. Pour remplacer la valeur PPP d un périphérique particulier, pointez la propriété runtimedpiprovider de la classe Application sur une sous-classe de la classe RuntimeDPIProvider. Dans votre sous-classe, remplacez la méthode Get de runtimedpi et ajoutez une logique fournissant un mappage de valeur PPP personnalisé. N ajoutez pas de dépendances aux autres classes dans la structure, telles que UIComponent. Cette sous-classe ne peut appeler que les API Player. L exemple suivant définit un mappage de valeur PPP personnalisé pour un périphérique dont la propriété Capabilities.os correspond à «Mac 10.6.5» :

Conception d applications et flux de travail 145 package { import flash.system.capabilities; import mx.core.dpiclassification; import mx.core.runtimedpiprovider; public class DPITestClass extends RuntimeDPIProvider { public function DPITestClass() { override public function get runtimedpi():number { // Arbitrary mapping for Mac OS. if (Capabilities.os == "Mac OS 10.6.5") return DPIClassification.DPI_320; if (Capabilities.screenDPI < 200) return DPIClassification.DPI_160; if (Capabilities.screenDPI <= 280) return DPIClassification.DPI_240; return DPIClassification.DPI_320; L application ci-dessous utilise DPITestClass pour déterminer une valeur PPP de l environnement d exécution à utiliser pour le redimensionnement. Elle pointe sur la propriété de la classe ViewNavigatorApplicationruntimeDPIProvider : <!-- mobile_skins/dpimappingoverridemain.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.dpimappingview" applicationdpi="160" runtimedpiprovider="dpitestclass"> </s:viewnavigatorapplication> L exemple suivant illustre également une sous-classe de la classe RuntimeDPIProvider. Dans ce cas, la classe personnalisée vérifie la résolution x et y du périphérique pour déterminer si ce dernier signale de manière incorrecte sa valeur PPP :

Conception d applications et flux de travail 146 package { import flash.system.capabilities; import mx.core.dpiclassification; import mx.core.runtimedpiprovider; public class SpecialCaseMapping extends RuntimeDPIProvider { public function SpecialCaseMapping() { override public function get runtimedpi():number { /* A tablet reporting an incorrect DPI of 240. We could use Capabilities.manufacturer to check the tablet's OS as well. */ if (Capabilities.screenDPI == 240 && Capabilities.screenResolutionY == 1024 && Capabilities.screenResolutionX == 600) { return DPIClassification.DPI_160; if (Capabilities.screenDPI < 200) return DPIClassification.DPI_160; if (Capabilities.screenDPI <= 280) return DPIClassification.DPI_240; return DPIClassification.DPI_320;

147 Chapitre 5 : Texte Utilisation de texte dans une application mobile Consignes liées au texte dans une application mobile Certains contrôles de texte Spark ont été optimisés pour être utilisés dans les applications mobiles. Dans la mesure du possible, utilisez les contrôles de texte suivants : Spark TextArea Spark TextInput Spark Label Les contrôles de texte permettant l interaction avec l utilisateur (TextArea et TextInput) utilisent la classe StageText comme mécanisme d entrée sous-jacent. StageText vient se connecter aux contrôles de texte natifs du système d exploitation sous-jacent. En conséquence, ces contrôles de texte se comportent comme des contrôles natifs plutôt que des contrôles Flex typiques. L utilisation de StageText présente les avantages suivants sur les périphériques compatibles : performances natives associées à l aspect unique du clavier logiciel ; saisie semi-automatique ; correction automatique ; sélection tactile du texte ; claviers logiciels personnalisables ; restrictions des touches. Le spécialiste Adobe, Christian Cantrell, présente les avantages et les inconvénients des contrôles basés sur StageText. Il existe également des versions basées sur TextField du contrôle TextArea et TextInput. Ces versions peuvent être utilisées afin d intégrer des polices ou de tirer parti d autres fonctionnalités qui ne sont pas encore proposées par les versions basées sur StageText. Habillages pour les contrôles de texte mobiles Lorsque vous créez une application mobile, Flex applique automatiquement le thème mobile. En conséquence, les contrôles Spark TextInput et TextArea utilisent par défaut les habillages mobiles basés sur StageText suivants : StageTextAreaSkin StageTextInputSkin Les classes StageTextAreaSkin et StageTextInputSkin sont optimisées pour les applications mobiles et sont basées sur la classe StageTextSkinBase. Ces classes jouent un rôle de wrapper venant envelopper les classes d entrée de texte natives, mais elles ne prennent toutefois pas en charge les fonctions suivantes des habillages non basés sur TextField :

Texte 148 Pris en charge par les contrôles basés sur TextField Défilement des formulaires Mesure de texte Découpage Polices intégrées Valeurs alpha fractionnelles Non pris en charge par les contrôles basés sur TextField Texte TLF ( Layout Framework) Bidirectionnalité et mise en miroir CFF (Compact Font Format) RichEditableText pour le rendu du texte Texte HTML FTE (Flash Text Engine) Accès aux événements clavier de bas niveau, tels que keyup et keydown Certaines de ces limitations peuvent être évitées en utilisant les versions basées sur TextField. Afin d utiliser les versions basées sur TextField des contrôles d entrée de texte, pointez leurs classes d habillage vers les versions TextField, TextInputSkin et TextAreaSkin, par exemple : <s:textinput skinclass="spark.skins.mobile.textinputskin" text="textfield-based Skin"/> Le contrôle Spark Label n utilise pas d habillage, mais il n utilise pas non plus TLF. TLF dans une application mobile D une manière générale, évitez les contrôles de texte qui utilisent la structure TLF (Text Layout Framework) dans les applications mobiles. Les habillages mobiles des contrôles TextArea et TextInput sont optimisés pour les applications mobiles et, à la différence de leurs équivalents pour les applications d ordinateur et basées sur le Web, ils n utilisent pas TLF. TLF est utilisé dans les applications pour fournir un ensemble riche de contrôles sur le rendu de texte. Evitez d utiliser les contrôles de texte suivants dans une application mobile, car ils utilisent TLF et leurs habillages ne sont pas optimisés pour les applications mobiles : Spark RichText Spark RichEditableText Saisie à l aide d un clavier logiciel Lorsqu un utilisateur met le focus sur un contrôle de texte qui accepte la saisie, les périphériques mobiles sans clavier affichent un clavier logiciel à l écran. Vous devez disposer d un certain contrôle sur les touches disponibles et les autres propriétés du clavier logiciel. Il vous est par exemple possible d activer la correction et la mise en majuscules automatiques ainsi que de choisir parmi différentes dispositions de clavier prédéterminées. Pour plus d informations, voir «Utilisation du clavier logiciel dans une application mobile» à la page 158. Défilement avec les contrôles d entrée de texte Les habillages mobiles par défaut des contrôles TextInput et TextArea ne prennent pas en charge les formulaires de défilement. Cela signifie qu il ne vous est pas possible d afficher ces contrôles au sein de formulaires ou de vues nécessitant le défilement du formulaire. Une telle utilisation risquerait en effet de générer des artefacts visuels. De manière à utiliser les contrôles d entrée de texte dans un conteneur de défilement, préférez les habillages basés sur TextField à ceux basés sur StageText. Pour plus d informations, voir «Considérations relatives au défilement avec StageText» à la page 71. Transitions avec les contrôles d entrée de texte Pour une animation fluide, le moteur d exécution remplace les contrôles StageText par des fichiers bitmap capturés à partir de ces contrôles dès la lecture d une animation. Vous pouvez ainsi obtenir un léger délai au début des animations de transition et certains artefacts visuels au début et à la fin des animations.

Texte 149 Le léger délai correspond à la durée nécessaire pour la capture de représentations bitmap du texte des composants. Cette durée augmente avec la surface et le nombre des contrôles StageText. Pour la réduire, évitez d animer des composants StageText importants ou nombreux. Fenêtres contextuelles avec les contrôles d entrée de texte Les entrées de texte StageText en dehors de la fenêtre contextuelle supérieure sont remplacées par des représentations bitmap lorsqu une fenêtre contextuelle s affiche. Par conséquent : Utilisez des fenêtres contextuelles modales plutôt que non modales. Lorsqu une fenêtre contextuelle modale est affichée, les composants en dehors de la fenêtre contextuelle doivent perdre leur interactivité. Dans ce cas, le remplacement des éléments StageText par des fichiers bitmap est moins visible. Les composants StageText doivent uniquement être utilisés dans les fenêtres contextuelles qui implémentent l interface IFocusManagerContainer. Par exemple, utilisez SkinnableContainer ou l un de ses dérivés comme base pour les fenêtres contextuelles. Utilisez un conteneur Callout lorsque les composants de texte dans les couches inférieures doivent rester actifs. Si un composant de texte est propriétaire d un conteneur Callout, il reste actif et définit la flèche du composant Callout de manière à pointer sur ce composant de texte. Il s agit d un repère naturel indiquant à l utilisateur que le composant de texte reste utilisable. Evitez d utiliser plusieurs fenêtres contextuelles simultanément. Lorsque plusieurs fenêtres contextuelles sont visibles à la fois, seule la fenêtre contextuelle supérieure est interactive. Toutefois, si les fenêtres contextuelles ne se recouvrent pas, les utilisateurs ne peuvent pas déterminer laquelle est située au-dessus. Lorsque des fenêtres contextuelles non modales recouvrent des contrôles de texte, positionnez la fenêtre contextuelle pour optimiser le recouvrement. Si l utilisateur ne peut pas voir le texte, il risque moins de supposer que le contrôle de texte devrait encore être actif. Intégration de polices dans une application mobile Il ne vous est pas possible d utiliser des polices intégrées dans un contrôle d entrée de texte utilisant StageText. Vous pouvez cependant utiliser les habillages basés sur TextField pour les contrôles d entrée de texte. Le contrôle Label ne peut pas être utilisé avec des polices intégrées car celui-ci utilise FTE qui requiert des polices basées sur CFF. Les polices CFF n apparaissent pas de façon optimale dans les applications mobiles. Pour plus d informations, voir «Intégration de polices dans une application mobile» à la page 172. Hiérarchie des classes de contrôle StageText Les classes StageText (TextInput et TextArea) présentent une hiérarchie de classe complexe. Les classes de base suivent la hiérarchie suivante : UIComponent SkinnableComponent SkinnableTextBase TextInput/TextArea Comme toutes les classes Spark, les classes d habillage possèdent leur propre hiérarchie :

Texte 150 UIComponent MobileSkin StyleableStageText StageTextSkinBase: textdisplay StageTextInputSkin/StageTextAreaSkin Au sein de la classe d habillage de base, la propriété textdisplay fournit le hook à l entrée de texte native sous la forme d un objet StyleableStageText. Cette classe est également responsable de la définition des classes disponibles pour les contrôles d entrée de texte basés sur StageText. Utilisation du contrôle Label dans une application mobile Le contrôle Spark Label est idéalement adapté aux lignes uniques de texte non modifiable et non sélectionnable. L exemple suivant utilise un simple contrôle Label dans une application mobile : <!-- mobile_text/views/simplelabel.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="simple Label"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout/> </s:layout> <s:label text="this is a simple Label control."/> </s:view> Le contrôle Label utilise FTE, lequel n est pas aussi performant que les contrôles de texte qui ont été optimisés pour les applications mobiles, tels que TextInput et TextArea. Toutefois, le contrôle Label n utilise pas TLF, de sorte qu il est généralement plus performant que les contrôles tels que RichText et RichEditableText, lesquels implémentent TLF. D une manière générale, utilisez de manière limitée les contrôles Spark Label dans les applications mobiles. N utilisez pas le contrôle Spark Label dans des habillages ou des rendus d élément. Lors de la création d un rendu d élément basé sur ActionScript, utilisez la classe StyleableTextField pour le rendu du texte. Pour un composant basé sur MXML, vous pouvez toujours utiliser Label. N utilisez pas le contrôle Label lorsque vous intégrez des polices dans une application mobile, car le contrôle Label utilise CFF. Utilisez plutôt la version basée sur TextField du contrôle TextArea. Pour plus d informations, voir «Intégration de polices dans une application mobile» à la page 172. Utilisation du contrôle TextArea dans une application mobile Le contrôle Spark TextArea est un contrôle d entrée de texte qui permet aux utilisateurs de saisir et de modifier plusieurs lignes de texte. Il est optimisé pour les applications mobiles. Par défaut, le comportement du contrôle TextArea est d utiliser le clavier logiciel fournissant des hooks se connectant aux méthodes natives du système d exploitation sous-jacent. Cela permet la prise en charge de certaines fonctionnalités, telles que la correction automatique, la saisie semi-automatique et la personnalisation du clavier logiciel.

Texte 151 L exemple suivant utilise un contrôle TextArea dans une application mobile : <!-- mobile_text/views/simpletextarea.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="simple TextArea"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ // Note the use of \n to add line feeds/carriage returns // and \" to add quotation marks. [Bindable] public var mytext:string ="\"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\"\n\n\"ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.\""; ]]> </fx:script> <!-- Basic TextArea control with multiple lines of text. --> <s:textarea id="myta" height="75%" text="{mytext" paddingleft="20" paddingtop="20" paddingright="20" paddingbottom="20"/> </s:view> Dans une application mobile, le contrôle TextArea utilise par défaut la classe StageTextAreaSkin pour son habillage. Cet habillage utilise la classe StyleableStageText plutôt que la classe RichEditableText pour le rendu de texte. En conséquence, le contrôle TextArea ne prend pas en charge TLF. Il prend en charge uniquement un sous-ensemble de styles disponibles sur le contrôle TextArea avec l habillage non mobile. Pour disposer d un bloc de texte multiligne et non interactif, définissez la propriété editable du contrôle TextArea sur false (la propriété selectable n est pas honorée au cours de l exécution). Vous pouvez également supprimer la bordure en définissant la propriété bordervisible sur false. La couleur de l arrière-plan peut être modifiée en définissant les propriétés contentbackgroundcolor et contentbackgroundalpha. L exemple suivant crée un bloc de texte non interactif qui vient se mélanger à l arrière-plan de l application :

Texte 152 <!-- mobile_text/views/blockoftext.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="block of Text"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout/> </s:layout> <s:hgroup> <s:image source="@embed(source='../../assets/myimage.jpg')" width="30%"/> <!-- Create a multi-line block of text. --> <s:textarea width="65%" editable="false" bordervisible="false" contentbackgroundcolor="0xffffff" contentbackgroundalpha="0" height="400" text="lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/> </s:hgroup> </s:view> Dans la mesure où le contrôle TextArea ne prend pas en charge TLF, vous ne pouvez pas utiliser le contenu textflow, content, ni les propriétés selectionhighlighting. En outre, vous ne pouvez pas utiliser les méthodes suivantes : getformatofrange() setformatofrange() Utilisation du contrôle TextInput dans une application mobile Le contrôle Spark TextInput est un contrôle d entrée de texte qui permet aux utilisateurs de saisir et de modifier une seule ligne de texte. Il est optimisé pour les applications mobiles. Par défaut, le comportement du contrôle TextInput est d utiliser le clavier logiciel fournissant des hooks se connectant aux méthodes natives du système d exploitation sous-jacent. Cela permet la prise en charge de certaines fonctionnalités, telles que la correction automatique, la saisie semi-automatique et la personnalisation du clavier logiciel. L exemple suivant illustre l utilisation des contrôles TextInput avec un texte d invite et des anneaux de focus personnalisés dans une application mobile :

Texte 153 <!-- mobile_text/views/simpletextinput.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="simple TextInput"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout paddingtop="20" paddingleft="20" paddingright="20"/> </s:layout> <s:textinput prompt="enter text here" focuscolor="green" focusthickness="5" focusalpha=".1"/> <s:textinput prompt="enter text here, too" focuscolor="red" focusthickness="5" focusalpha=".1"/> </s:view> Dans une application mobile, le contrôle TextInput utilise par défaut la classe StageTextInputSkin pour son habillage. Cet habillage utilise la classe StyleableStageText plutôt que la classe RichEditableText pour le rendu de texte. En conséquence, le contrôle TextInput ne prend pas en charge TLF. Il prend en charge uniquement un sous-ensemble de styles disponibles sur le contrôle TextInput avec l habillage non mobile. Utilisation des contrôles RichText et RichEditableText dans une application mobile Essayez d éviter d utiliser les contrôles RichText et RichEditableText dans les applications mobiles. Ces contrôles ne possèdent pas d habillage mobile et ne sont pas optimisés pour les applications mobiles. Si vous utilisez ces contrôles, vous utilisez TLF, ce qui exige une importante puissance de traitement. Contrôles de texte MX Vous ne pouvez pas utiliser des contrôles de texte MX tels que MX Text et MX Label dans les applications mobiles. Utilisez les équivalents Spark à la place. Définition de styles sur les contrôles d entrée de texte dans une application mobile Les contrôles TextInput et TextArea prennent en charge uniquement un jeu partiel de styles dans le thème mobile. La classe StyleableStageText définit ces styles. Les styles suivants sont les seuls pris en charge par les contrôles TextInput et TextArea dans une application mobile : color ; contentbackgroundalpha ;

Texte 154 contentbackgroundcolor ; Styles d anneau de focus : focusalpha, focusblendmode, focuscolor et focusthickness ; fontfamily ; fontstyle ; fontsize ; fontweight ; locale ; Styles de marge : paddingbottom, paddingleft, paddingright et paddingtop ; showpromptwhenfocused ; textalign. Dans une application mobile, le contrôle Label prend en charge ces styles ainsi que le style textdecoration. Utilisation du style fontfamily Au sein des habillages mobiles par défaut, la propriété fontfamily ne prend pas en charge les listes de polices séparées par des virgules. Vous pouvez en revanche spécifier une police unique que le moteur d exécution tentera ensuite de mapper avec une police existant sur le périphérique. Par exemple, si vous spécifiez Arial, le périphérique effectue le rendu du texte avec la police Arial si celle-ci est disponible. Le moteur d exécution détermine la police à utiliser, en choisissant la meilleure correspondance, si la police n est pas disponible. Dans le cas où vous spécifiez un nom de police que le moteur d exécution ne reconnaît pas, alors le périphérique effectue le rendu du texte en utilisant sa police par défaut. La police par défaut des périphériques mobiles est généralement sans sérif. Vous pouvez spécifier _sans, _serif ou _typewriter afin d obtenir toujours respectivement une police sans sérif, sérif ou code sur un périphérique mobile. L exemple suivant illustre de quelle façon le texte est rendu en fonction de la valeur du style fontfamily : <!-- mobile_text/views/fontfamilyexample.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="the fontfamily style"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout/> </s:layout> <s:textinput prompt="this is _sans" fontsize="14" fontfamily="_sans"/> <s:textinput prompt="this is _serif" fontsize="14" fontfamily="_serif"/> <s:textinput prompt="this is _typewriter" fontsize="14" fontfamily="_typewriter"/> <s:textinput prompt="this is Arial" fontsize="14" fontfamily="arial"/> <s:textinput prompt="this is Times" fontsize="14" fontfamily="times"/> <s:textinput prompt="this is Times New Roman" fontsize="14" fontfamily="times New Roman"/> <!-- Try a gibberish font name to see what the device's default font is: --> <s:textinput prompt="this is bugblatter" fontsize="14" fontfamily="bugblatter"/> </s:view>

Texte 155 Création d un habillage mobile personnalisé sur un contrôle d entrée de texte En utilisant du code MXML et ActionScript, vous pouvez contrôler certains composants de l aspect visuel et du comportement des contrôles d entrée de texte dans une application mobile. Vous pouvez, par exemple, définir la couleur de la bordure ou activer/désactiver l apparence des bordures des contrôles TextArea et TextInput. Dans certains cas, il vous faut créer un habillage personnalisé afin de modifier l aspect de certaines parties des contrôles de texte. Les classes StageTextAreaSkin et StageTextInputSkin définissent les habillages TextInput et TextArea par défaut dans le thème mobile. Ces habillages obtiennent la majorité des éléments constituant leur mise en forme et leur logique de chrome de la classe StageTextSkinBase. Pour créer un habillage personnalisé, créez une classe StageTextSkinBase définissant le nouvel aspect. Créez ensuite une classe StageTextAreaSkin ou StageTextInputSkin personnalisée qui étend cette classe personnalisée. Pour plus d informations sur la création d habillages personnalisés pour le thème mobile, voir «Notions de base sur l habillage mobile» à la page 174. Restriction des touches dans un contrôle d entrée de texte Si vous utilisez les habillages basés sur StageText pour les contrôles d entrée de texte, vous avez la possibilité de restreindre les caractères autorisés à l aide de la propriété restrict du contrôle TextInput ou TextArea. La valeur par défaut de la propriété restrict est null, ce qui signifie que l utilisateur peut saisir n importe quel caractère par défaut. La propriété restrict accepte une chaîne de caractères autorisés. Pour les plages de caractères, utilisez un trait d union (-). Ne séparez pas les plages à l aide d une espace, d une virgule ou d un autre caractère, à moins que vous ne vouliez ajouter ce caractère à la définition. L exemple suivant présente différents exemples de l utilisation de la syntaxe de restriction : <!-- mobile_text/views/restrictstrings.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="examples of restrict"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout paddingtop="20" paddingleft="20" paddingright="20"/> </s:layout> <s:textinput prompt="alpha-numeric only" restrict="a-za-z0-9"/> <s:textinput prompt="numbers only" restrict="0-9"/> <s:textinput prompt="all chars, only uppercase alpha" restrict="^a-z"/> <!-- ASCII chars 32 (space) through 126 (tilde) only: --> <s:textinput prompt="" restrict="\u0020-\u007e"/> <s:textinput prompt="all chars but not the caret or hyphen" restrict="^\^\-"/> </s:view> La valeur de la chaîne envoyée à la propriété restrict est lue de gauche à droite. Tous les caractères suivant un caret (^) sont interdits. Par exemple : ta1.restrict = "A-Z^Q"; // All uppercase alpha characters, but exclude Q

Texte 156 Si le premier caractère de la chaîne est un caret (^), alors tous les caractères sont acceptés, à l exception des caractères suivant le caret. Par exemple : ta1.restrict = "^a-z"; // All characters, but exclude lowercase alpha La barre oblique inverse peut être utilisée comme caractère d échappement pour les caractères spéciaux. Par exemple, pour restreindre l utilisation du caret : ta1.restrict = "^\^"; // All characters, but exclude the caret Vous pouvez utiliser \u afin de saisir des codes de touche ASCII, par exemple : ta1.restrict = "\u0020-\u007e"; // ASCII chars 32 through 126 only Interventions de l utilisateur liées à du texte dans une application mobile Vous pouvez utiliser des gestes tels que le glissement avec les contrôles de texte. L exemple suivant écoute un événement de glissement et vous indique la direction dans laquelle le glissement a été effectué :

Texte 157 <!-- mobile_text/views/textareaeventsview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="textarea swipe event" viewactivate="view1_viewactivatehandler()"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <fx:script> <![CDATA[ import flash.events.transformgestureevent; import mx.events.flexevent; is left) protected function swipehandler(event:transformgestureevent):void { // event.offsetx shows the horizontal direction of the swipe (1 is right, -1 swipeevent.text = event.type + " " + event.offsetx; if (swipetext.text.length == 0) { swipetext.text = "Swipe again to make text go away." else { swipetext.text = ""; protected function view1_viewactivatehandler():void { swipetext.addeventlistener(transformgestureevent.gesture_swipe,swipehandler); ]]> </fx:script> <s:vgroup> <s:textarea id="swipetext" height="379" editable="false" selectable="false" text="swipe to make text go away."/> <s:textinput id="swipeevent" /> </s:vgroup> </s:view> Les gestes de toucher-glisser sélectionnent toujours du texte, mais seulement si le contrôle de texte est sélectionnable ou modifiable. Dans certains cas, vous ne souhaiterez peut-être pas sélectionner du texte en effectuant un geste de toucher+glisser ou de glissement seul sur un contrôle de texte. Dans ce cas, définissez les propriétés selectable et editable sur false ou réinitialisez la sélection en appelant la méthode selectrange(0,0) dans le gestionnaire d événements de glissement. Si le texte se trouve dans un composant Scroller, ce dernier n effectue un défilement que si le geste est effectué en dehors du composant de texte.

Texte 158 Utilisation du clavier logiciel dans une application mobile De nombreux périphériques ne sont pas équipés d un clavier physique. Ils utilisent un clavier qui apparaît à l écran lorsque cela est nécessaire. Le clavier logiciel, également appelé clavier virtuel ou clavier à l écran, se ferme une fois que l utilisateur a saisi les informations ou lorsqu il annule l opération. La figure suivante montre une application qui utilise le clavier logiciel : Le clavier logiciel présente différents jeux de fonctions, en fonction du composant qui déclenche son apparition : Fonctions natives : le clavier utilisé avec les contrôles d entrée de texte par défaut, TextArea et TextInput, se connecte à l interface native pour profiter de fonctions, telles que la correction automatique, la saisie semiautomatique et les dispositions de clavier personnalisées. La prise en charge du jeu complet de fonctions est intégrée aux classes d habillage par défaut basées sur StageText des contrôles d entrée de texte. Les périphériques ne prennent pas tous en charge l intégralité des fonctions natives. Fonctions restreintes : le clavier utilisé par un contrôle autre que TextArea et TextInput, ou avec TextArea et TextInput lorsqu ils utilisent des habillages basés sur TextField. Le jeu de fonctions restreint ne prend pas en charge les fonctions natives du système d exploitation, comme la correction automatique, la saisie semi-automatique et les dispositions de clavier personnalisées. Dans la mesure où le clavier occupe une partie de l écran, Flex doit s assurer qu une application fonctionne toujours dans la zone réduite de l écran. Par exemple, l utilisateur sélectionne un contrôle TextInput, provoquant l ouverture du clavier logiciel. Une fois le clavier ouvert, Flex redimensionne automatiquement l application en fonction de la zone d écran disponible. Flex peut ensuite repositionner le contrôle TextInput sélectionné de façon à ce qu il soit visible audessus du clavier. Le blogueur Peter Elst a publié un article sur le contrôle du clavier programmable dans les applications Flex Mobile.

Texte 159 Ouvez un clavier logiciel dans une application Flex mobile. Il existe trois façons différentes d ouvrir un clavier logiciel dans une application mobile : Mise du focus sur contrôle avec un contrôle d entrée de texte, tel que TextInput ou TextArea. Définition de la propriété needssoftkeyboard sur true et mise du focus sur ce contrôle. Appel de la méthode requestsoftkeyboard() sur un contrôle (pas sous ios). Le clavier reste ouvert jusqu à ce que les actions suivantes soient réalisées : L utilisateur active un contrôle qui ne reçoit pas d entrée de texte. Cela peut se produire lorsque l utilisateur pointe manuellement vers un autre contrôle d entrée de texte, ou si l utilisateur appuie sur la touche Entrée du clavier et que l application met le focus sur un autre contrôle. Si l utilisateur passe à un autre contrôle d entrée de texte ou à un contrôle dont la propriété needssoftkeyboard est définie sur true, le clavier reste ouvert. L utilisateur annule la saisie en appuyant sur le bouton retour du périphérique. Vous mettez le focus sur un contrôle non interactif, par voie de programmation, ou définissez stage.focus sur null. Présentation d un contrôle d entrée de texte à l utilisateur Si vous présentez un contrôle d entrée de texte à un utilisateur, un clavier logiciel apparaît lorsque l utilisateur met le focus sur ce contrôle, à moins que la propriété editable soit définie sur false. Le comportement par défaut des contrôles TextInput et TextArea est d utiliser la classe StageText pour effectuer le rendu du texte. Il en résulte que le clavier s affichant pour ces contrôles prend en charge les fonctions natives, telles que la correction automatique, la mise en majuscules automatique et les types de clavier. Les périphériques ne prennent pas tous en charge l intégralité des fonctions. Si vous modifiez les classes d habillage afin d utiliser les habillages basés sur TextField pour les contrôles d entrée de texte, alors les fonctions sont restreintes. Le clavier est le même, mais il ne prend pas en charge les fonctions natives. Définition de la propriété needssoftkeyboard Vous pouvez configurer des contrôles qui ne sont pas des contrôles d entrée pour ouvrir le clavier, tels que les contrôles Button ou ButtonBar. Pour ouvrir le clavier lorsqu un contrôle autre qu un contrôle d entrée de texte est activé, définissez la propriété needssoftkeyboard du contrôle sur true. Tous les composants Flex héritent cette propriété de la classe InteractiveObject. Le clavier qui s ouvre pour les contrôles autres que TextInput et TextArea ne prend pas en charge les fonctions natives, telles que la mise en majuscules automatique, la correction automatique ainsi que les types de clavier personnalisés. Remarque : les contrôles d entrée de texte ouvrent toujours le clavier lorsqu ils sont activés. Ils ignorent la propriété needssoftkeyboard et sa définition est sans effet sur les contrôles d entrée de texte. Appel de la méthode requestsoftkeyboard() Pour faire apparaître un clavier logiciel par voie de programmation, vous pouvez appeler la méthode requestsoftkeyboard(). La propriété needssoftkeyboard de l objet appelant cette méthode doit être définie sur true. Cette méthode met le focus sur l objet ayant appelé la méthode et fait apparaître un clavier logiciel si le périphérique ne dispose pas d un clavier physique. La classe InteractiveObject définit la méthode requestsoftkeyboard(). Il en résulte que cette méthode peut être appelée sur tout composant se trouvant être une sous-classe de InteractiveObject.

Texte 160 Si vous appelez la méthode requestsoftkeyboard() sur le contrôle TextArea ou TextInout, alors les fonctions de clavier natives, telles que la correction et la mise en majuscules automatiques sont prises en charge (si le périphérique les prend en charge). La méthode requestsoftkeyboard() ne fonctionne pas sur les périphériques ios. Utilisation de fonctions natives avec un clavier logiciel Les classes StageTextInputSkin et StageTextAreaSkin définissent les habillages pour les contrôles TextInput et TextArea au sein d une application mobile. Ces habillages utilisent la classe StageText pour effectuer le rendu du texte et tirer parti des fonctions natives du clavier logiciel. Ces fonctions incluent : correction automatique ; mise en majuscules automatique ; libellés personnalisés de touche Entrée ; types de clavier personnalisés. Les contrôles d entrée de texte peuvent également utiliser les habillages basés sur TextField pour effectuer le rendu du texte. Ces habillages ne prennent pas en charge les fonctions natives. Ils fournissent toutefois des fonctions supplémentaires au contrôle de texte sous-jacent, telles que la prise en charge des formulaires de défilement, l intégration des polices, l accès aux événements keyup et keydown, l écrêtage, la mesure du texte et les valeurs alpha fractionnelles. Pour utiliser les habillages basés sur TextField, définissez la propriété skinclass du contrôle d entrée de texte de manière à ce qu elle pointe sur les classes TextInputSkin et TextAreaSkin. Par exemple : <s:textinput skinclass="spark.skins.mobile.textinputskin"/> <s:textarea skinclass="spark.skins.mobile.textareaskin"/> Utilisation de la correction automatique pour les claviers logiciels dans une application Flex mobile La correction automatique correspond à un comportement du système d exploitation qui tente de corriger les erreurs d orthographe et d appliquer la saisie prédictive au texte saisi par l utilisateur. Selon le périphérique, ce comportement peut être implémenté sous la forme d une bulle au-dessus du texte, d une extension du clavier logiciel ou d une façon différente. Vous pouvez utiliser la correction automatique pour les claviers logiciels dans une application mobile en définissant la propriété autocorrect du contrôle d entrée de texte sur true. Il s agit de la valeur par défaut. L exemple suivant permet d activer et de désactiver la correction automatique.

Texte 161 <!-- mobile_keyboard/views/autocorrectionexample.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="auto-correction"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout/> </s:layout> <s:textinput prompt="enter your text" autocorrect="{mycb.selected"/> <s:checkbox id="mycb" label="enable auto-correct" enabled="true"/> </s:view> Les périphériques ne prennent pas tous en charge la correction automatique. Si vous activez ou désactivez la propriété autocorrect sur un périphérique non compatible, la valeur est ignorée au moment de l exécution et le comportement par défaut du périphérique est utilisé à la place. Utilisation de la mise en majuscules automatique pour les claviers logiciels dans une application Flex mobile La mise en majuscules automatique correspond à un paramètre qui indique au contrôle d entrée de texte de mettre en majuscules certains mots ou certaines lettres, au cours de la saisie. Par exemple, toutes les lettres peuvent être mises en majuscules automatiquement, ou uniquement la première lettre de chaque phrase. Il s agit là d un avantage pour l utilisateur qui n a plus à se soucier d utiliser des majuscules lorsqu il saisit du texte dans une application mobile. La mise en majuscules automatique peut être utilisée dans les claviers logiciels en définissant la valeur de la propriété autocapitalize sur le contrôle d entrée de texte. Les valeurs possibles sont none (aucun), word (mot), sentence (phrase) et all (tous). La classe AutoCapitalize définit les valeurs possibles. La valeur par défaut est None. L exemple suivant permet de sélectionner différentes valeurs pour la mise en majuscules automatique :

Texte 162 <!-- mobile_keyboard/views/autocapitalizeexample.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="auto-capitalization"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout/> </s:layout> <s:label text="select a capitalization setting:"/> <s:spinnerlistcontainer> <s:spinnerlist id="captypelist" width="300" labelfield="name" fontsize="12"> <s:arraycollection> <fx:object name="all" value="all"/> <fx:object name="none" value="none"/> <fx:object name="sentence" value="sentence"/> <fx:object name="word" value="word"/> </s:arraycollection> </s:spinnerlist> </s:spinnerlistcontainer> <s:textinput autocapitalize="{captypelist.selecteditem.value"/> </s:view> Les périphériques ne prennent pas tous en charge la mise en majuscules automatique. Si vous définissez la valeur de la propriété autocapitalize sur un périphérique non compatible, la valeur est ignorée au moment de l exécution et le comportement par défaut du périphérique est utilisé à la place. Changement de type de clavier logiciel dans une application Flex mobile La classe SoftKeyboardType définit les types de claviers logiciels pour les applications mobiles. Le type de clavier peut être sélectionné à l aide de la propriété softkeyboardtype sur le contrôle d entrée de texte. Les différences entre les claviers, tels que email et contact sont mineures. Par exemple, le clavier email offre à l utilisateur les mêmes touches que le clavier contact, à la seule différence que le micro est remplacé par le symbole @. Le clavier URL utilise le symbole /. La seule exception est le clavier number. Celui-ci ressemble à une calculatrice affichant les chiffres et les opérateurs. L exemple suivant présente les différents types de claviers logiciels disponibles :

Texte 163 <!-- mobile_keyboard/views/keyboardtypes.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="keyboard Types"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout/> </s:layout> <s:label text="select a keyboard type:"/> <s:spinnerlistcontainer> <s:spinnerlist id="keyboardtypelist" width="300" labelfield="name"> <s:arraycollection> <fx:object name="contact" value="contact"/> <fx:object name="default" value="default"/> <fx:object name="email" value="email"/> <fx:object name="number" value="number"/> <fx:object name="punctuation" value="punctuation"/> <fx:object name="url" value="url"/> </s:arraycollection> </s:spinnerlist> </s:spinnerlistcontainer> <s:textinput softkeyboardtype="{keyboardtypelist.selecteditem.value" text=""/> </s:view> Les périphériques ne prennent pas tous en charge l intégralité des types de claviers logiciels. Dans le cas où vous spécifiez un type non pris en charge, la valeur est ignorée au moment de l exécution et le paramètre par défaut du périphérique est utilisé à la place. Modification du libellé de la touche Entrée d un clavier logiciel dans une application Flex mobile Lorsque le clavier logiciel apparaît à l écran et que l utilisateur saisit du texte, il doit exister un moyen pour l utilisateur d indiquer qu il a terminé sa saisie et souhaite passer au champ suivant ou envoyer les données saisies. Sur un clavier logiciel, cette action est généralement permise par la touche Entrée. Cette touche n a pas pour effet d ajouter un caractère à l entrée de texte, mais de signaler au contrôle d entrée de texte que l utilisateur a terminé sa saisie. La classe ReturnKeyLabel définit les différents libellés possibles pour la touche Entrée. Les valeurs possibles sont default (par défaut), done (terminé), go (accès), next (suivant) et search (rechercher). Vous spécifiez le libellé de la touche Entrée à l aide la propriété returnkeylabel sur le contrôle d entrée de texte. L exemple suivant vous permet de sélectionner différents libellés de touche Entrée :

Texte 164 <!-- mobile_keyboard/views/returnkeylabels.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="return Key Labels"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout/> </s:layout> <s:label text="select a return key label:"/> <s:spinnerlistcontainer> <s:spinnerlist id="returnkeylabellist" width="300" labelfield="name"> <s:arraycollection> <fx:object name="default" value="default"/> <fx:object name="done" value="done"/> <fx:object name="go" value="go"/> <fx:object name="next" value="next"/> <fx:object name="search" value="search"/> </s:arraycollection> </s:spinnerlist> </s:spinnerlistcontainer> <s:textinput returnkeylabel="{returnkeylabellist.selecteditem.value" text=""/> </s:view> Les différents types de touche Entrée ne présentent aucune différence en termes d événements ou d interaction. Modifier la propriété returnkeylabel change uniquement le libellé de la touche. Les périphériques ne prennent pas tous en charge la définition du libellé de la touche Entrée. Si vous définissez la valeur de la propriété returnkeylabel sur un périphérique non compatible, la valeur est ignorée au moment de l exécution et le comportement par défaut du périphérique est utilisé à la place. Utilisation d événements avec un clavier logiciel dans une application mobile L interaction avec un clavier logiciel sur un périphérique mobile est différente de celle avec un clavier physique dans une application d ordinateur ou basée sur le Web. Le tableau suivant répertorie les événements liés à l utilisation des claviers logiciels : Evénement enter keydown et keyup Moment où il est distribué Lorsque l utilisateur appuie sur la touche Entrée. Pour les habillages basés sur StageText, lorsque seulement certaines touches sont enfoncées et relâchées. Pour les habillages basés sur TextField, lorsque toutes les touches sont enfoncées et relâchées. Ces événements ne sont pas distribués pour toutes les touches sur tous les périphériques. N utilisez pas ces méthodes pour capturer la saisie au clavier avec des claviers logiciels à moins que vous n utilisiez les habillages basés sur TextField pour des contrôles faisant apparaître le clavier. softkeyboardactivating softkeyboardactivate Juste avant l ouverture du clavier. Juste après l ouverture du clavier.

Texte 165 Evénement softkeyboarddeactivate Moment où il est distribué Après la fermeture du clavier. Pour déterminer lorsqu un utilisateur a fini d utiliser le clavier logiciel, vous pouvez écouter l événement FlexEvent.ENTER sur le contrôle d entrée de texte. Le contrôle distribue cet événement lorsque l utilisateur appuie sur la touche Entrée. En écoutant l événement enter, vous pouvez effectuer une validation, modifier le focus ou réaliser d autres opérations sur le texte récemment saisi. Dans certains cas, l événement enter n est pas distribué. Cette limitation est rencontrée sur les périphériques Android lorsque vous utilisez un clavier logiciel sur le dernier contrôle d entrée de texte de la vue. Pour éviter ce problème, définissez la propriété returnkeylabel sur go, next ou search sur le dernier contrôle d entrée de texte de la vue. L exemple suivant permet de passer le focus d un champ au suivant lorsque l utilisateur appuie sur la touche Next du clavier logiciel : <!-- mobile_keyboard/views/usenextliketab.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="change Focus"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout paddingtop="10" paddingleft="10" paddingright="10"/> </s:layout> <fx:script> <![CDATA[ private function changefield(ti:textinput):void { // Before changing focus to a new control, set the stage's focus to null: stage.focus = null; // Set focus on the TextInput that was passed in: ti.setfocus(); ]]> </fx:script> <s:hgroup> <s:label text="1:" paddingtop="15"/> <s:textinput id="ti1" prompt="first Name"

Texte 166 width="80%" returnkeylabel="next" enter="changefield(ti2)"/> </s:hgroup> <s:hgroup> <s:label text="2:" paddingtop="15"/> <s:textinput id="ti2" prompt="middle Initial" width="80%" returnkeylabel="next" enter="changefield(ti3)"/> </s:hgroup> <s:hgroup> <s:label text="3:" paddingtop="15"/> <s:textinput id="ti3" prompt="last Name" width="80%" returnkeylabel="next" enter="changefield(ti1)"/> </s:hgroup> </s:view> Lorsque l utilisateur interagit avec le clavier logiciel par défaut pour les contrôles TextInput et TextArea, les événements keyup et keydown sont uniquement distribués pour un jeu partiel réduit de touches. Pour capturer les frappes de touches individuelles pour toutes les touches, utilisez l événement change. L événement change est distribué à chaque modification du contenu du contrôle d entrée de texte. L inconvénient résultant est que vous n avez pas accès aux propriétés de la touche qui a été enfoncée et qu il vous faut coder votre propre logique de frappe de touches. L exemple suivant permet d afficher le code de caractère de la dernière touche enfoncée. <!-- mobile_keyboard/views/comparemobilekeypresses.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="keyboard Events"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ private var storedvalueoftext:string = null; // Compare the new text against the stored value to see what key was pressed. private function comparekey(e:event):void { var key:string = ""; if (storedvalueoftext == null) { key = ti1.text.charcodeat(0).tostring(); // Capture the first key pressed.

Texte 167 else { // Compare the stored value against the current value and extract the difference. for (var i:int = 0; i<ti1.text.length; i++) { if (ti1.text.charat(i) == storedvalueoftext.charat(i)) { // Do nothing if they're equal. else { key = ti1.text.charcodeat(i).tostring(); ti2.text = "The '" + key + "' key was pressed."; storedvalueoftext = ti1.text; ]]> </fx:script> <s:textinput id="ti1" change="comparekey(event)"/> <s:textinput id="ti2" editable="false"/> </s:view> Cet exemple identifie uniquement la dernière touche enfoncée si le curseur se trouvait à la fin du champ d entrée de texte. Lorsqu un utilisateur interagit avec le clavier logiciel pour les contrôles basés sur TextField, les événements, tels que keyup et keydown fonctionnent pour l ensemble des touches. L exemple suivant utilise le gestionnaire keyup pour obtenir la touche actuelle et appliquer un style au contrôle Label en fonction du code de la touche. La méthode requestsoftkeyboard() faisant apparaître le clavier pour le contrôle Label et non pour les contrôles TextInput ou TextArea, l application utilise le clavier basé sur TextField. <!-- mobile_text/views/requestsoftkeyboardexample.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="requestsoftkeyboard()"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ private function handlebuttonclick():void { mylabel.requestsoftkeyboard(); /* Ok to use keyup handler on limited screen keyboard. */ private function handlekeys(event:keyboardevent):void { var c:int;

Texte 168 switch(event.keycode) { case(82): // 82 = "r" c = 0xFF0000; break; case(71): // 71 = "g" c = 0x00FF00; break; case(66): // 66 = "b" c = 0x0000FF; break; event.currenttarget.setstyle("color",c); ]]> </fx:script> <s:label id="mylabel" text="this is a label." needssoftkeyboard="true" keyup="handlekeys(event)"/> <s:button id="b1" label="click Me" click="handlebuttonclick()"/> </s:view> Pour fermer le clavier logiciel par voie de programmation, définissez stage.focus sur null. Pour fermer le clavier logiciel et mettre le focus sur un autre contrôle, définissez stage.focus sur null et passez ensuite le focus sur le contrôle cible. Il vous également possible d appeler la méthode requestsoftkeyboard() d un autre contrôle afin de modifier le focus et d ouvrir le clavier logiciel sur un autre contrôle. Certaines des propriétés du clavier logiciel sont accessibles à partir des gestionnaires d événément. Afin d accéder à la taille et à l emplacement du clavier logiciel, utilisez la propriété softkeyboardrect de la classe flash.display.stage, comme le montre l exemple suivant : <!-- mobile_keyboard/views/softkeyboardevents.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="soft Keyboard Events"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:layout> <s:verticallayout/> </s:layout> <s:textinput prompt="enter your text" softkeyboardactivate="ta1.text+=stage.softkeyboardrect + '\n'" softkeyboarddeactivate="ta1.text+=stage.softkeyboardrect + '\n'" softkeyboardactivating="ta1.text+=stage.softkeyboardrect + '\n'"/> <s:textarea id="ta1" width="100%" height="100%" editable="false"/> </s:view> Configuration de l application pour le clavier logiciel Pour prendre en charge le clavier logiciel, l application peut effectuer les actions suivantes à l ouverture du clavier : Redimensionner l application en fonction de l espace disponible à l écran afin que le clavier ne soit pas superposé à l application.

Texte 169 Faite défiler le conteneur parent du contrôle d entrée de texte activé afin de s assurer que le contrôle est visible. Configuration du système pour le clavier logiciel Le clavier logiciel n est pas pris en charge dans les applications qui s exécutent en mode plein écran. Par conséquent, dans le fichier app.xml, assurez-vous que l attribut <fullscreen> est défini sur false, la valeur par défaut. Assurez-vous que le mode de rendu de l application est défini sur le mode du processeur. Le mode de rendu est contrôlé dans le fichier descripteur app.xml de l application par l attribut <rendermode>. Assurez-vous que l attribut <rendermode> est défini sur cpu, la valeur par défaut, et non sur gpu. Remarque : l attribut <rendermode> n est pas inclus par défaut dans le fichier app.xml. Pour modifier son paramètre, ajoutez-le en tant qu entrée dans l attribut <initialwindow>. S il n est pas inclus dans le fichier app.xml, il a la valeur par défaut de cpu. Défilement dans le conteneur parent à l ouverture du clavier logiciel La propriété resizeforsoftkeyboard du conteneur Application détermine le comportement de redimensionnement de l application. Si la propriété resizeforsoftkeyboard est définie sur false, la valeur par défaut, le clavier peut apparaître dans la partie supérieure de l application. Si la valeur est true, alors l application est redimensionnée en soustrayant la taille du clavier. Afin de permettre le défilement, les contrôles d entrée de texte doivent utiliser les habillages basés sur TextField, plutôt que les habillages basés sur StageText. Cela est possible en pointant la propriété skinclass du contrôle TextInput ou TextArea respectivement sur la classe TextInputSkin ou TextAreaSkin. Pour prendre en charge le défilement, incluez le conteneur parent des éventuels contrôles d entrée de texte dans un composant Scroller. Lorsqu un composant qui ouvre le clavier est activé, le composant Scroller fait automatiquement défiler le composant dans la vue. Le composant peut aussi être l enfant de plusieurs conteneurs imbriqués du composant Scroller. Le conteneur parent doit être une classe GroupBase ou SkinnableContainer ou une sous-classe de GroupBase ou de SkinnableContainer. Le composant activé doit implémenter l interface IVisualElement et doit être activable. En enveloppant le conteneur parent dans un composant Scroller, vous pouvez faire défiler le conteneur pendant que le clavier est ouvert. Par exemple, un conteneur détient plusieurs contrôles d entrée de texte. Vous défilez alors d un contrôle d entrée de texte à un autre pour saisir des données. Lorsque le clavier se ferme, le conteneur parent peut être plus petit que l espace disponible à l écran. Si le conteneur est plus petit que l espace disponible à l écran, le composant Scroller rétablit les positions à 0, c est-à-dire en haut du conteneur. L exemple suivant présente un conteneur View contenant plusieurs contrôles TextInput et un composant Scroller :

Texte 170 <!-- containers\mobile\views\sparkmobilekeyboardhomeview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="compose Email"> <s:scroller width="100%" top="10" bottom="50"> <s:vgroup paddingtop="3" paddingleft="5" paddingright="5" paddingbottom="3"> <!-- Use TextField-based skins so that scrolling works. --> <s:textinput prompt="to" width="100%" skinclass="spark.skins.mobile.textinputskin"/> <s:textinput prompt="cc" width="100%" skinclass="spark.skins.mobile.textinputskin"/> <s:textinput prompt="subject" width="100%" skinclass="spark.skins.mobile.textinputskin"/> <s:textarea height="400" width="100%" prompt="compose Mail" skinclass="spark.skins.mobile.textareaskin"/> </s:vgroup> </s:scroller> <s:hgroup width="100%" gap="20" bottom="5" horizontalalign="left"> <s:button label="send" height="40"/> <s:button label="cancel" height="40"/> </s:hgroup> </s:view> Le conteneur VGroup est le conteneur parent des contrôles TextInput. Le composant Scroller enveloppe le conteneur VGroup, de sorte que chaque contrôle TextInput apparaît au-dessus du clavier lorsqu il est activé. Pour plus d informations à propos du composant Scroller, voir Scrolling Spark containers. Redimensionnement de l application à l ouverture du clavier logiciel Si la propriété resizeforsoftkeyboard du conteneur Application est définie sur true, l application se redimensionne elle-même afin de remplir correctement la zone d écran disponible à l ouverture du clavier. L application reprend sa taille normale à la fermeture du clavier. L exemple ci-dessous montre le fichier d application principal pour une application qui prend en charge le redimensionnement de l application en définissant la propriété resizeforsoftkeyboard sur true : <!-- containers\mobile\sparkmobilekeyboard.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.sparkmobilekeyboardhomeview" resizeforsoftkeyboard="true"> </s:viewnavigatorapplication> Pour activer le redimensionnement de l application, assurez-vous que l attribut <softkeyboardbehavior> qui figure dans le fichier descripteur app.xml de l application est défini sur none. La valeur par défaut de l attribut <softkeyboardbehavior> est none. Cette valeur par défaut configure AIR pour un déplacement de l ensemble de l espace disponible afin que le composant texte activé soit visible.

Texte 171 Bien que les événements de clavier logiciel soient suffisamment fiables pour permettre le fonctionnement des comportements automatiques la plupart du temps, évitez de positionner les éléments d interface utilisateur à des endroits où ils peuvent être couverts par le clavier logiciel en cas d échec d un événement de clavier logiciel. Par exemple, évitez de positionner les boutons OK, Connexion ou Envoyer dans la moitié inférieure d une vue. Lorsqu un contrôle basé sur StageText est animé ou participe à une animation, le moteur d exécution le remplace temporairement par un fichier bitmap pour que le mouvement du texte soit synchronisé avec les autres éléments. Si le contrôle a le focus, il le perd temporairement. Dans certains cas, le clavier logiciel masque ou déclenche un événement softkeyboarddeactivate sans masquer le clavier logiciel. Ceci peut poser problème notamment lorsque le focus est défini par programmation sur des composants StageText dans les fenêtres contextuelles, qui animent des changements de taille causés par le clavier logiciel. Pour éviter cela, essayez d utiliser dans les fenêtres contextuelles des composants StageText sans redimensionnement causé par le clavier logiciel. Si vous devez utiliser dans les fenêtres contextuelles des composants StageText à redimensionnement, essayez d afficher d abord le clavier logiciel, puis d attendre la fin de l animation de la fenêtre contextuelle avant de définir le focus par programmation sur le composant StageText. Sinon, évitez de définir le focus par programmation dans les fenêtres contextuelles. Configuration d une fenêtre contextuelle pour le clavier logiciel Un conteneur Callout apparaît dans une fenêtre contextuelle dans la partie supérieure d une application mobile. Le conteneur Callout peut contenir un ou plusieurs composants qui acceptent l entrée provenant du clavier. Pour plus d informations sur le conteneur Callout, voir «Utilisation du conteneur Callout pour créer une légende» à la page 84. Utilisez les propriétés du conteneur SkinnablePopUpContainer, la classe parente de Callout, afin de configurer l interaction de la fenêtre contextuelle avec le clavier : moveforsoftkeyboard : si la valeur est définie sur true (valeur par défaut), la fenêtre contextuelle se déplace audessus du clavier à l ouverture de ce dernier. resizeforsoftkeyboard : si la valeur est définie sur true (valeur par défaut), la fenêtre contextuelle se redimensionne pour remplir correctement l espace disponible au-dessus du clavier à l ouverture de ce dernier. Si les propriétés moveforsoftkeyboard ou resizeforsoftkeyboard d un conteneur SkinnablePopUpContainer sont définies sur true, le conteneur peut se déplacer ou se redimensionner lorsque la visibilité du clavier logiciel change. Ces deux comportements automatiques peuvent causer un redimensionnement ou un déplacement d autres composants. La manière la plus simple d éviter ce scénario consiste à ne pas définir resizeforsoftkeyboard sur true. Si l application n est pas redimensionnée pour le clavier logiciel, le clavier logiciel ne peut pas causer le déplacement d un composant situé sous le doigt d un utilisateur. Toutefois, le clavier logiciel peut masquer une partie de l interface utilisateur de l application. Si votre application nécessite un redimensionnement automatique, placez les composants interactifs de telle façon que les changements de la visibilité du clavier logiciel ne les écartent pas du doigt d un utilisateur lorsqu ils sont ciblés. Pour ce faire, vous pouvez utiliser les techniques suivantes : N attribuez pas de contraintes aux boutons, cases à cocher ou à d autres cibles réduites et ne les placez pas sous d autres composants avec des pourcentages de hauteur. Essayez de concevoir votre présentation de façon à ce que le haut du composant le plus bas reste stationnaire lorsque le clavier est affiché ou masqué.

Texte 172 Sur les plateformes dépourvues de zone intégrée pour le masquage du clavier logiciel, fournissez un élément d interface utilisateur stationnaire correspondant. Il peut s agir d un bouton dédié au masquage du clavier logiciel ou juste d une marge vide stationnaire suffisamment large pour pouvoir être sélectionnée afin de supprimer le focus d un composant de texte. N arrangez pas de manière verticale les composants pouvant se déplacer. Vous évitez ainsi que les gestes trouvent des cibles erronées lorsque le clavier logiciel change de visibilité. Intégration de polices dans une application mobile Il vous est possible d intégrer des polices afin qu elles puissent être utilisées dans les applications mobiles, avec toutefois quelques restrictions. Dans la mesure où le contrôle Label utilise FTE (et par conséquent, des polices CFF), utilisez les contrôles TextArea ou TextInput, avec leurs habillages basés sur TextField, lors de l intégration de polices dans une application mobile. Vous ne pouvez pas intégrer de polices avec des habillages basés sur StageText. En général, évitez d utiliser FTE dans une application mobile. Dans votre CSS, définissez embedascff sur false et appliquez l habillage basé sur TextField, tel qu indiqué dans l exemple suivant : <!-- mobile_text/main.mxml --> <s:viewnavigatorapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstview="views.embeddingfontsview"> <fx:style> @namespace s "library://ns.adobe.com/flex/spark"; @font-face { src: url("../assets/myriadwebpro.ttf"); fontfamily: myfontfamily; embedascff: false;.customstyle { fontfamily: myfontfamily; fontsize: 24; skinclass: ClassReference("spark.skins.mobile.TextAreaSkin"); </fx:style> </s:viewnavigatorapplication> Le contrôle TextArea de la vue EmbeddingFontView applique le sélecteur de type :

Texte 173 <!-- mobile_text/embeddingfontsview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="embedded Fonts"> <s:layout> <s:verticallayout paddingtop="20" paddingleft="20" paddingright="20"/> </s:layout> <s:textarea id="ta1" width="100%" stylename="customstyle" text="this is a TextArea control that uses an embedded font."/> <s:textarea id="ta2" width="100%" text="this TextArea control does not use an embedded font."/> </s:view> Si vous utilisez des sélecteurs de classe (tels que s TextArea) pour appliquer des styles (ou intégrer des polices), définissez le sélecteur de classe dans le fichier de l application principale. Vous ne pouvez pas définir des sélecteurs de classe dans une vue d une application mobile. Pour plus d informations, voir Intégration de polices.

174 Chapitre 6 : Habillage Notions de base sur l habillage mobile Comparaison entre les habillages de bureau et mobiles Les habillages mobiles sont plus légers que leurs homologues de bureau. En conséquence, ils présentent de nombreuses différences, par exemple : Les habillages mobiles sont rédigés en ActionScript. Les habillages ActionScript exclusifs fournissent les meilleures performances sur les périphériques mobiles. Les habillages mobiles étendent la classe spark.skins.mobile.supportclasses.mobileskin. Cette classe étend UIComponent, comparée à la classe SparkSkin qui étend la classe Skin. Les habillages mobiles utilisent le FXG compilé ou le dessin ActionScript simple pour que leurs éléments graphiques améliorent les performances. Les habillages destinés aux applications d ordinateur, en revanche, utilisent généralement des graphiques MXML pour une grande partie de leurs dessins. Les habillages mobiles n ont pas besoin de déclarer les états d habillage. Comme les habillages sont rédigés en ActionScript, les états doivent être implémentés dans le cadre de procédures. Les habillages mobiles ne prennent pas en charge les transitions entre états. Les habillages mobiles sont disposés manuellement. Comme les habillages mobiles n étendent pas Group, ils ne prennent pas en charge les présentations Spark. Par conséquent, leurs enfants sont positionnés manuellement en ActionScript. Les habillages mobiles ne prennent pas en charge tous les styles. Le thème mobile omet certains styles en fonction des performances ou d autres différences dans les habillages mobiles. Outre les différences liées aux performances, Flash Builder utilise également les fichiers d habillage mobile de manière différente. Cela se vérifie tout spécialement pour les thèmes mobiles utilisés pour les projets de la bibliothèque. Le blogueur Jeffry Houser explique comment régler ce problème. Composant d hôte mobile Les habillages mobiles déclarent généralement une propriété publique hostcomponent. Cette propriété n est pas obligatoire, mais elle est recommandée. La propriété hostcomponent doit être du même type que le composant qui utilise l habillage. Par exemple, l habillage ActionBarSkin déclare hostcomponent comme étant du type ActionBar : public var hostcomponent:actionbar; Flex définit la valeur de la propriété hostcomponent lorsque le composant charge l habillage pour la première fois. Comme avec les habillages de bureau, vous pouvez utiliser le composant hôte pour accéder aux propriétés et aux méthodes du composant auxquelles l habillage est attaché. Vous pouvez par exemple accéder aux propriétés publiques du composant hôte ou ajouter un écouteur d événement au composant hôte depuis l intérieur de la classe d habillages. Styles mobiles Les habillages mobiles prennent en charge un sous-ensemble des propriétés de style que leurs homologues de bureau prennent en charge. Le thème mobile définit cet ensemble de styles.

Habillage 175 Le tableau suivant définit les propriétés de style disponibles pour les composants lors de l utilisation du thème mobile : Propriété Style Prise en charge par Héritant/N héritant pas accentcolor Button, ActionBar, ButtonBar Héritant backgroundalpha ActionBar N héritant pas backgroundcolor Application N héritant pas borderalpha List N héritant pas bordercolor List N héritant pas bordervisible List N héritant pas chromecolor ActionBar, Button, ButtonBar, CheckBox, HSlider, RadioButton Héritant color Tous les composants avec du texte Héritant contentbackgroundalpha TextArea, TextInput Héritant contentbackgroundcolor TextArea, TextInput Héritant focusalpha Tous les composants pouvant être actifs N héritant pas focusblendmode Tous les composants pouvant être actifs N héritant pas focuscolor Tous les composants pouvant être actifs Héritant focusthickness Tous les composants pouvant être actifs N héritant pas locale ; Tous les composants Héritant paddingbottom TextArea, TextInput N héritant pas paddingleft TextArea, TextInput N héritant pas paddingright TextArea, TextInput N héritant pas paddingtop TextArea, TextInput N héritant pas selectioncolor ViewMenuItem Héritant Les composants de type texte prennent également en charge les styles de texte standards, tels que fontfamily, fontsize et fontweight. Pour voir si le thème mobile prend en charge une propriété de style, ouvrez la description du composant dans le Guide de référence du langage ActionScript. Un grand nombre de ces limitations de style proviennent du fait que les composants mobiles de type texte n utilisent pas la structure TLF (Text Layout Framework). En effet, les habillages mobiles remplacent les contrôles de texte basés sur TLF par des composants plus légers. Pour plus d informations, voir «Utilisation de texte dans une application mobile» à la page 147. Le thème mobile ne prend pas en charge les propriétés de style rollovercolor, cornerradius ni dropshadowvisible. L ingénieur Flex Jason SJ présente les styles et les thèmes pour les applications mobiles sur son blog. Parties de l habillage mobile En ce qui concerne les parties de l habillage, les habillages mobiles doivent respecter les mêmes normes que les habillages de bureau. Si un composant comporte une partie d habillage obligatoire, l habillage mobile doit déclarer une propriété publique du type approprié.

Habillage 176 Exceptions Toutes les parties d habillage ne sont pas obligatoires. Par exemple, le composant Spark Button comporte les parties d habillage facultatives icondisplay et labeldisplay. En conséquence, la classe mobile ButtonSkin peut déclarer une propriété icondisplay du type BitmapImage. Elle peut aussi déclarer une propriété labeldisplay du type StyleableTextField. La partie labeldisplay ne définit pas de propriété id car les styles qu elle utilise sont tous des styles de texte héritant. En outre, le type StyleableTextField n est pas un composant UIComponent et ne possède donc pas de propriété id. La partie icondisplay ne prend pas en charge les styles, de sorte qu elle ne définit pas de propriété id. Définition de styles à l aide des fonctionnalités CSS avancées Si vous souhaitez définir des styles sur la partie habillage avec le sélecteur avancé CSS id, l habillage doit également définir la propriété id de la partie habillage. Par exemple, la partie d habillage d ActionBartitleDisplay définit une propriété id, de sorte qu elle peut être stylée à l aide des fonctionnalités CSS avancées ; par exemple : @namespace s "library://ns.adobe.com/flex/spark"; s ActionBar #titledisplay { color:red; Thème mobile Le thème mobile détermine les styles qu une application mobile prend en charge. Le nombre de styles disponibles avec le thème mobile est un sous-ensemble du thème Spark (avec quelques ajouts mineurs). Vous pouvez voir une liste complète des styles pris en charge par le thème mobile dans «Styles mobiles» à la page 174. Thème par défaut des applications mobiles Le thème des applications mobiles est défini dans le fichier themes/mobile/mobile.swc. Ce fichier définit les styles globaux pour les applications mobiles, ainsi que les paramètres par défaut de chacun des composants mobiles. Les habillages mobiles de ce fichier de thème sont définis dans le package spark.skins.mobile.*. Ce package contient la classe de base MobileSkin. Le fichier de thème mobile.swc est inclus par défaut dans les projets mobiles Flash Builder, mais le fichier SWC ne figure pas dans l Explorateur de packages. Lorsque vous créez un nouveau projet mobile dans Flash Builder, ce thème est appliqué par défaut. Modification du thème Pour modifier le thème, utilisez l argument de compilateur theme pour spécifier le nouveau thème ; par exemple : -theme+=mythemes/newmobiletheme.swc Pour plus d informations sur les thèmes, voir A propos des thèmes. L ingénieur Flex Jason SJ présente de quelle façon créer et incruster un thème dans une application sur son blog. Etats des habillages mobiles La classe MobileSkin remplace le mécanisme d états de la classe UIComponent et n utilise pas l implémentation des états d affichage des applications de bureau. En conséquence, les habillages mobiles déclarent seulement les états d habillage du composant hôte qui sont implémentés par l habillage. Ils modifient l état dans le cadre de procédures, en fonction seulement du nom de l état. A l opposé, les habillages de bureau doivent déclarer tous les états, qu ils soient utilisés ou non. Les habillages de bureau utilisent également les classes dans le package mx.states.* pour modifier les états.

Habillage 177 La plupart des habillages mobiles implémentent moins d états que leurs homologues de bureau. Par exemple, la classe spark.skins.mobile.buttonskin implémente les états up, down et disabled. L habillage spark.skins.spark.buttonskin implémente tous ces états ainsi que l état over. L habillage mobile ne définit pas le comportement de l état over car cet état ne serait pas couramment utilisé sur un périphérique tactile. Méthode commitcurrentstate() Les classes d habillages mobiles définissent le comportement de leurs états dans la méthode commitcurrentstate(). Vous pouvez ajouter un comportement à un habillage mobile pour prendre en charge des états supplémentaires en modifiant la méthode commitcurrentstate() dans votre classe d habillages personnalisés. Propriété currentstate L aspect d un habillage dépend de la valeur de la propriété currentstate. Par exemple, dans la classe mobile ButtonSkin, la valeur de la propriété currentstate détermine la classe FXG qui est utilisée comme classe limitrophe : if (currentstate == "down") return downborderskin; else return upborderskin; Pour plus d informations sur la propriété currentstate, voir Create and apply view states. Graphiques mobiles Les habillages mobiles utilisent généralement le FXG compilé pour leurs éléments graphiques. Les habillages destinés aux applications de bureau, en revanche, utilisent généralement des graphiques MXML pour une grande partie de leurs dessins. Graphiques bitmap intégrés Vous pouvez utiliser des graphiques bitmap intégrés dans vos classes, car ils se comportent correctement en général. Toutefois, le redimensionnement des images bitmap pour plusieurs densités d écran pose parfois problème. Le redimensionnement peut être plus efficace si vous créez plusieurs éléments différents, un pour chaque densité d écran. Graphiques dans le thème mobile par défaut Les habillages mobiles dans le thème mobile par défaut utilisent les graphiques FXG qui sont optimisés pour la valeur PPP du périphérique cible. Les habillages chargent les graphiques en fonction de la valeur de la propriété applicationdpi de l application racine. Par exemple, lorsqu un contrôle CheckBox est chargé sur un périphérique doté d une valeur PPP de 320, la classe CheckBoxSkin utilise le graphique spark.skins.mobile320.assets.checkbox_up.fxg pour la propriété upiconclass. Pour une valeur PPP de 160, elle utilise le graphique spark.skins.mobile160.assets.checkbox_up.fxg. L exemple de bureau suivant monte les différents graphiques utilisés par l habillage CheckBox pour différentes valeurs PPP :

Habillage 178 <?xml version="1.0"?> <!-- mobile_skins/showcheckboxskins.mxml --> <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" xmlns:skins160="spark.skins.mobile160.assets.*" xmlns:skins240="spark.skins.mobile240.assets.*" xmlns:skins320="spark.skins.mobile320.assets.*"> <s:layout> <s:verticallayout/> </s:layout> <!-- NOTE: You must add the mobile theme directory to source path to compile this example. For example: mxmlc -source-path+=\frameworks\projects\mobiletheme\src\ ShowCheckBoxSkins.mxml --> <s:label text="160 DPI" fontsize="24" fontweight="bold"/> <s:hgroup> <skins160:checkbox_down/> <skins160:checkbox_downsymbol/> <skins160:checkbox_downsymbolselected/> <skins160:checkbox_up/> <skins160:checkbox_upsymbol/> <skins160:checkbox_upsymbolselected/> </s:hgroup> <mx:spacer height="30"/> <s:label text="240 DPI" fontsize="24" fontweight="bold"/> <s:hgroup> <skins240:checkbox_down/> <skins240:checkbox_downsymbol/> <skins240:checkbox_downsymbolselected/> <skins240:checkbox_up/> <skins240:checkbox_upsymbol/> <skins240:checkbox_upsymbolselected/> </s:hgroup> <mx:spacer height="30"/> <s:label text="320 DPI" fontsize="24" fontweight="bold"/> <s:hgroup> <skins320:checkbox_down/> <skins320:checkbox_downsymbol/> <skins320:checkbox_downsymbolselected/> <skins320:checkbox_up/> <skins320:checkbox_upsymbol/> <skins320:checkbox_upsymbolselected/> </s:hgroup> <s:label text="down, downsymbol, downsymbolselected, up, upsymbol, upsymbolselected"/> </s:application> Pour plus d informations sur les résolutions et les valeurs PPP dans les applications mobiles, voir «Prise en charge de plusieurs tailles d écran et valeurs PPP dans une application mobile» à la page 132.

Habillage 179 Dans les habillages ActionScript, vous pouvez aussi utiliser des vecteurs mis en mémoire cache en tant que bitmaps. Le seul inconvénient tient au fait que vous ne pouvez pas utiliser de transitions qui nécessitent la recréation des pixels, telles que les transitions alpha. Pour plus d informations, voir www.adobe.com/devnet/air/flex/articles/writing_multiscreen_air_apps.html. Création d habillages pour une application mobile Lors de la personnalisation d habillages mobiles, vous créez une classe d habillages mobile personnalisée. Dans certains cas, vous modifiez également les éléments utilisés par une classe d habillages mobiles. Lorsque vous modifiez une classe d habillages mobiles, vous pouvez modifier les interactions basées sur l état, implémenter la prise en charge de nouveaux styles ou ajouter ou supprimer des composants enfants de l habillage. En général, vous commencez par le code source d un habillage existant et l enregistrez en tant que nouvelle classe. Vous pouvez également modifier les éléments utilisés par les habillages mobiles pour modifier les propriétés visuelles de l habillage, telles que sa taille, sa couleur ou ses dégradés et arrière-plans. Dans ce cas, vous modifiez également les éléments FXG utilisés par les habillages. Les fichiers *.fxg utilisés par les habillages mobiles sont stockés dans le répertoire spark/skins/mobile/assets. Toutes les propriétés visuelles des habillages mobiles ne sont pas définies dans des fichiers *.fxg. Par exemple, la couleur d arrière-plan de l habillage Button est définie par la propriété de style chromecolor dans la classe ButtonSkin. Elle n est pas définie dans un élément FXG. Dans ce cas, vous modifieriez la classe d habillage pour changer la couleur d arrière-plan. Création d une classe d habillages mobiles Lors de la création d une classe d habillages mobiles personnalisée, la solution la plus simple consiste à utiliser comme base une classe d habillages mobiles existante. Modifiez ensuite cette classe et utilisez-la comme un habillage personnalisé. Pour créer une classe d habillages personnalisés : 1 Créez un répertoire dans votre projet (par exemple, customskins). Ce répertoire correspond au nom du package de vos habillages personnalisés. La création d un package n est pas requise, mais il est judicieux d organiser les habillages personnalisés dans un package individuel. 2 Créez une classe d habillages personnalisés dans le nouveau répertoire. Donnez à cette nouvelle classe le nom de votre choix, par exemple CustomButtonSkin.as. 3 Copiez le contenu de la classe d habillages que vous utilisez comme base pour la nouvelle classe. Par exemple, si vous utilisez ButtonSkin comme classe de base, copiez le contenu du fichier spark.skins.mobile.buttonskin dans la nouvelle classe d habillages personnalisés. 4 Modifiez la nouvelle classe. Par exemple, apportez les modifications minimales suivantes à la classe CustomButtonSkin : Modifiez l emplacement du package : package customskins //was: package spark.skins.mobile Modifiez le nom de la classe dans la déclaration de classe. Développez également la classe sur laquelle votre nouvel habillage est basé, pas la classe d habillages de base : public class CustomButtonSkin extends ButtonSkin // was: public class ButtonSkin extends ButtonSkinBase

Habillage 180 Modifiez le nom de la classe dans le constructeur : public function CustomButtonSkin() //was: public function ButtonSkin() 5 Modifiez la classe d habillages personnalisés. Par exemple, ajoutez la prise en charge d états supplémentaires ou de nouveaux composants enfants. De même, certains composants graphiques sont définis dans la classe d habillages elle-même, de sorte que vous pouvez modifier certains éléments. Pour faciliter la lecture de votre classe d habillages, vous pouvez en général supprimer des méthodes quelconques de l habillage personnalisé que vous ne remplacez pas. La classe d habillages personnalisés ci-dessous étend ButtonSkin et remplace la méthode drawbackground() par une logique personnalisée. Elle remplace le dégradé linéaire par un dégradé radial pour le remplissage de l arrière-plan. package customskins { import mx.utils.colorutil; import spark.skins.mobile.buttonskin; import flash.display.gradienttype; import spark.skins.mobile.supportclasses.mobileskin; import flash.geom.matrix; public class CustomButtonSkin extends ButtonSkin { public function CustomButtonSkin() { super(); private static var colormatrix:matrix = new Matrix(); private static const CHROME_COLOR_ALPHAS:Array = [1, 1]; private static const CHROME_COLOR_RATIOS:Array = [0, 127.5]; override protected function drawbackground(unscaledwidth:number, unscaledheight:number):void { super.drawbackground(unscaledwidth, unscaledheight); var chromecolor:uint = getstyle("chromecolor"); /* if (currentstate == "down") { graphics.beginfill(chromecolor); else { */ var colors:array = []; colormatrix.creategradientbox(unscaledwidth, unscaledheight, Math.PI / 2, 0, 0); colors[0] = ColorUtil.adjustBrightness2(chromeColor, 70); colors[1] = chromecolor; graphics.begingradientfill(gradienttype.radial, colors, CHROME_COLOR_ALPHAS, CHROME_COLOR_RATIOS, colormatrix); // graphics.drawroundrect(layoutbordersize, layoutbordersize, unscaledwidth - (layoutbordersize * 2), unscaledheight - (layoutbordersize * 2), layoutcornerellipsesize, layoutcornerellipsesize); graphics.endfill();

Habillage 181 6 Dans votre application, appliquez l habillage personnalisé en utilisant l une des méthodes décrites dans «Application d un habillage mobile personnalisé» à la page 186. L exemple suivant utilise la propriété skinclass de la balise du composant pour appliquer l habillage customskins.custombuttonskin : <!-- mobile_skins/views/custombuttonskinview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="home"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:button label="click Me" skinclass="customskins.custombuttonskin"/> </s:view> Méthodes de cycle de vie des habillages mobiles Lors de la création de classes d habillages personnalisés, familiarisez-vous avec les méthodes UIComponent suivantes. Ces méthodes protégées héritées définissent les enfants et les membres d un habillage et l aident à interagir avec d autres composants de la liste d affichage. createchildren() Permet de créer tous les graphiques ou les objets de texte enfants requis par l habillage. commitproperties() Permet de copier les données du composant dans l habillage, le cas échéant. measure() Permet de mesurer l habillage aussi efficacement que possible et de stocker les résultats dans les propriétés measuredwidth et measuredheight de l habillage. updatedisplaylist() Permet de définir la position et la taille des graphiques et du texte. Réalisez tout schéma ActionScript requis. Cette méthode appelle les méthodes drawbackground() et layoutcontents() dans l habillage. Pour plus d informations à propos de l utilisation de ces méthodes, voir Implémentation du composant. Méthodes courantes de personnalisation des habillages mobiles De nombreux habillages mobiles implémentent les méthodes suivantes : layoutcontents() Positionne les enfants pour l habillage, tels que les éléments dropshadow et label. Les classes d habillages mobiles ne prennent pas en charge les présentations Spark telles que HorizontalLayout et VerticalLayout. Présentez manuellement les enfants de l habillage dans une méthode telle que layoutcontents(). drawbackground() Restitue un arrière-plan pour l habillage. Les cas d utilisation standard incluent le dessin des styles chromecolor, backgroundcolor ou contentbackgroundcolor en fonction de la forme de l habillage. Cette méthode peut également être utilisée pour teinter, comme par exemple avec la méthode applycolortransform(). commitcurrentstate() Définit les comportements d état pour les habillages mobiles. Vous pouvez ajouter ou supprimer des états pris en charge, ou changer le comportement d états existants en modifiant cette méthode. Cette méthode est appelée lorsque l état a été modifié. La plupart des classes d habillages remplacent cette méthode. Pour plus d informations, voir «Etats des habillages mobiles» à la page 176.

Habillage 182 Création d éléments FXG personnalisés La plupart des éléments visuels des habillages mobiles sont définis à l aide de FXG. FXG est une syntaxe déclarative permettant de définir les graphiques statiques. Vous pouvez utiliser un outil graphique tel qu Adobe Fireworks, Adobe Illustrator ou Adobe Catalyst pour exporter un document FXG. Vous pouvez alors utiliser le document FXG dans votre habillage mobile. Vous pouvez aussi créer des documents FXG dans un éditeur de texte, même si les graphiques complexes peuvent être difficiles à écrire entièrement. Les habillages mobiles utilisent généralement des fichiers FXG pour définir les états d un habillage. Par exemple, la classe CheckBoxSkin utilise les fichiers FXG suivants pour définir l aspect de sa case et de son symbole de coche : CheckBox_down.fxg CheckBox_downSymbol.fxg CheckBox_downSymbolSelected.fxg CheckBox_up.fxg CheckBox_upSymbol.fxg CheckBox_upSymbolSelected.fxg Si vous ouvrez ces fichiers dans un éditeur de texte, ils apparaissent comme suit : Etats des cases (down, downsymbol, downsymbolselected, up, upsymbol et upsymbolselected) Fichiers FXG pour différentes résolutions La plupart des habillages mobiles possèdent trois jeux de fichiers graphiques FXG, un pour chaque résolution cible par défaut. Par exemple, des versions différentes des six classes CheckBoxSkin figurent dans les répertoires spark/skins/mobile160, spark/skins/mobile240 et spark/skins/mobile320. Lorsque vous créez un habillage personnalisé, vous pouvez procéder d une des façons suivantes : Utilisez l un des habillages par défaut comme base (habituellement 160 PPP). Ajoutez une logique qui redimensionne l habillage personnalisé pour l adapter au périphérique sur lequel l application s exécute en définissant la propriété applicationdpi sur l objet Application. Créez les trois versions de l habillage personnalisé (160, 240 et 320 PPP) pour un affichage optimal. Certains habillages mobiles utilisent un jeu individuel de fichiers FXG pour leurs éléments graphiques et ne possèdent pas de graphiques pour des valeurs PPP spécifiques. Ces éléments sont stockés dans le répertoire spark/skins/mobile/assets. Par exemple, les habillages ViewMenuItem et les habillages de barre de boutons TabbedViewNavigator ne possèdent pas de versions pour des valeurs PPP spécifiques, si bien que tous leurs éléments FXG sont stockés dans ce répertoire. Personnalisation d un fichier FXG Vous pouvez ouvrir un fichier FXG existant et le personnaliser, ou en créer un et l exporter à partir d un éditeur graphique tel qu Adobe Illustrator. Après avoir modifié le fichier FXG, appliquez-le à votre classe d habillages. Pour créer un habillage personnalisé en modifiant un fichier FXG : 1 Créez une classe d habillage personnalisé et placez-la dans le répertoire customskins, tel que décrit dans «Création d une classe d habillages mobiles» à la page 179. 2 Créez un sous-répertoire sous le répertoire customskins, par exemple assets. La création d un sous-répertoire est facultative, mais permet d organiser vos fichiers FXG et vos classes d habillages.

Habillage 183 3 Créez un fichier dans le répertoire assets et copiez à l intérieur le contenu d un fichier FXG existant. Par exemple, créez un fichier nommé CustomCheckBox_upSymbol.fxg. Copiez le contenu du fichier spark/skins/mobile160/assets/checkbox_upsymbol.fxg dans le nouveau fichier CustomCheckBox_upSymbol.fxg. 4 Modifiez le nouveau fichier FXG. Par exemple, remplacez la logique permettant de tracer un symbole de coche par un «X» rempli avec des entrées de dégradé : <?xml version='1.0' encoding='utf-8'?> <!-- mobile_skins/customskins/assets/customcheckbox_upsymbol.fxg --> <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2.0" viewwidth="32" viewheight="32"> <!-- Main Outer Border --> <Rect x="1" y="1" height="30" width="30" radiusx="2" radiusy="2"> <stroke> <SolidColorStroke weight="1" color="#282828"/> </stroke> </Rect> <!-- Replace check mark with an "x" --> <Group x="2" y="2"> <Line xfrom="3" yfrom="3" xto="25" yto="25"> <stroke> <LinearGradientStroke caps="none" weight="8" joints="miter" miterlimit="4"> <GradientEntry color="#ff0033"/> <GradientEntry color="#0066ff"/> </LinearGradientStroke> </stroke> </Line> <Line xfrom="25" yfrom="3" xto="3" yto="25"> <stroke> <stroke> <LinearGradientStroke caps="none" weight="8" joints="miter" miterlimit="4"> <GradientEntry color="#ff0033"/> <GradientEntry color="#0066ff"/> </LinearGradientStroke> </stroke> </stroke> </Line> </Group> </Graphic> 5 Dans la classe d habillages personnalisés, importez la nouvelle classe FXG et appliquez-la à une propriété. Par exemple, dans la classe CustomCheckBox : 1 Importez le nouveau fichier FXG. //import spark.skins.mobile.assets.checkbox_upsymbol; import customskins.assets.customcheckbox_upsymbol; 2 Ajoutez le nouvel élément à la classe d habillages personnalisés. Par exemple, modifiez la valeur de la propriété upsymboliconclass pour qu elle pointe sur votre nouvel élément FXG : upsymboliconclass = CustomCheckBox_upSymbol; La classe complète d habillages personnalisés se présente comme suit :

Habillage 184 // mobile_skins/customskins/customcheckboxskin.as package customskins { import spark.skins.mobile.checkboxskin; import customskins.assets.customcheckbox_upsymbol; public class CustomCheckBoxSkin extends CheckBoxSkin { public function CustomCheckBoxSkin() { super(); upsymboliconclass = CustomCheckBox_upSymbol; // was CheckBox_upSymbol Pour plus d informations sur l utilisation et l optimisation des éléments FXG pour les habillages, voir Optimisation des FXG. Affichage des fichiers FXG dans des applications Dans la mesure où les fichiers FXG sont écrits en langage XML, il peut être difficile de visualiser l aspect final du produit. Vous pouvez écrire une application Flex qui importe et rend les fichiers FXG en les ajoutant en tant que composants, puis en les enveloppant dans un conteneur Spark. Pour ajouter des fichiers FXG en tant que composants à votre application, ajoutez l emplacement des fichiers source au chemin source de votre application. Par exemple, pour monter des éléments FXG mobiles dans une application Web, ajoutez le thème mobile à votre chemin source. Le compilateur peut alors trouver les fichiers FXG. L exemple de bureau ci-dessous restitue les différents éléments FXG du composant CheckBox lorsque vous l utilisez dans une application mobile. Ajoutez le répertoire frameworks\projects\mobiletheme\src\ à l argument source-path du compilateur lorsque vous compilez cet exemple. <?xml version="1.0"?> <!-- mobile_skins/showcheckboxskins.mxml --> <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" xmlns:skins160="spark.skins.mobile160.assets.*" xmlns:skins240="spark.skins.mobile240.assets.*" xmlns:skins320="spark.skins.mobile320.assets.*"> <s:layout> <s:verticallayout/> </s:layout> <!-- NOTE: You must add the mobile theme directory to source path to compile this example. For example: mxmlc -source-path+=\frameworks\projects\mobiletheme\src\ ShowCheckBoxSkins.mxml --> <s:label text="160 DPI" fontsize="24" fontweight="bold"/> <s:hgroup> <skins160:checkbox_down/> <skins160:checkbox_downsymbol/> <skins160:checkbox_downsymbolselected/> <skins160:checkbox_up/> <skins160:checkbox_upsymbol/> <skins160:checkbox_upsymbolselected/> </s:hgroup>

Habillage 185 <mx:spacer height="30"/> <s:label text="240 DPI" fontsize="24" fontweight="bold"/> <s:hgroup> <skins240:checkbox_down/> <skins240:checkbox_downsymbol/> <skins240:checkbox_downsymbolselected/> <skins240:checkbox_up/> <skins240:checkbox_upsymbol/> <skins240:checkbox_upsymbolselected/> </s:hgroup> <mx:spacer height="30"/> <s:label text="320 DPI" fontsize="24" fontweight="bold"/> <s:hgroup> <skins320:checkbox_down/> <skins320:checkbox_downsymbol/> <skins320:checkbox_downsymbolselected/> <skins320:checkbox_up/> <skins320:checkbox_upsymbol/> <skins320:checkbox_upsymbolselected/> </s:hgroup> <s:label text="down, downsymbol, downsymbolselected, up, upsymbol, upsymbolselected"/> </s:application> Utilisation de texte dans les habillages mobiles personnalisés Pour effectuer le rendu du texte dans les habillages mobiles, vous utilisez la classe StyleableStageText ou la classe StyleableTextField. Ces classes de texte sont optimisées pour les applications mobiles. StyleableStageText fournit aux contrôles TextInput et TextArea l accès aux entrées de texte natives. Cette classe étend la classe UIComponent et implémente les interfaces IEditableText et ISoftKeyboardHintClient. StyleableTextField est également utilisé par les contrôles TextInput et TextArea lorsque vous ne souhaitez pas utiliser les entrées natives. Cette classe est également utilisée par des contrôles de texte qui ne sont pas des contrôles d entrée, tels que ActionBar et Button. Elle développe la classe TextField et implémente les interfaces ISimpleStyleClient et IEditableText. Pour plus d informations sur l utilisation des contrôles de texte au sein des applications mobiles, voir «Utilisation de texte dans une application mobile» à la page 147. TLF dans les habillages mobiles Pour des raisons de performances, essayez d éviter les classes qui utilisent TLF dans les habillages mobiles. Dans certains cas, comme par exemple avec le composant Spark Label, vous pouvez utiliser des classes qui utilisent FTE. htmltext dans les habillages mobiles La propriété htmltext ne peut pas être utilisée dans les applications mobiles. Gestes avec du texte Les gestes de toucher-glisser sélectionnent toujours du texte (lorsque le texte est sélectionnable ou modifiable). Si le texte se trouve dans un composant Scroller, ce dernier n effectue un défilement que si le geste est effectué en dehors du composant de texte. Ces gestes fonctionnent uniquement lorsque le texte est modifiable et sélectionnable. Modification du texte en texte modifiable et sélectionnable Pour rendre le texte modifiable et sélectionnable, définissez les propriétés editable et selectable sur true:

Habillage 186 textdisplay.editable = true; textdisplay.selectable = true; Bidirectionnalité La bidirectionnalité n est pas prise en charge pour le texte dans les classes StyleableStageText et StyleableTextField. Application d un habillage mobile personnalisé Vous pouvez appliquer un habillage personnalisé à votre composant mobile de la même manière que vous appliquez un habillage personnalisé à un composant dans une application d ordinateur. Application d un habillage en ActionScript // Call the setstyle() method: mybutton.setstyle("skinclass", "MyButtonSkin"); Application d un habillage en MXML <!-- Set the skinclass property: --> <s:button skinclass="mybuttonskin"/> Application d un habillage en CSS // Use type selectors for mobile skins, but only in the root document: s Button { skinclass: ClassReference("MyButtonSkin"); ou // Use class selectors for mobile skins in any document:.mystyleclass { skinclass: ClassReference("MyButtonSkin"); Exemple d application d un habillage mobile personnalisé L exemple suivant montre les trois méthodes qui permettent d appliquer un habillage mobile personnalisé à des composants mobiles :

Habillage 187 <!-- mobile_skins/views/applyingmobileskinsview.mxml --> <s:view xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="home"> <s:layout> <s:verticallayout/> </s:layout> <fx:script> <![CDATA[ import customskins.custombuttonskin; private function changeskin():void { b3.setstyle("skinclass", customskins.custombuttonskin); ]]> </fx:script> <fx:style> @namespace s "library://ns.adobe.com/flex/spark";.custombuttonstyle { skinclass: ClassReference("customSkins.CustomButtonSkin"); </fx:style> <s:button id="b1" label="click Me" skinclass="customskins.custombuttonskin"/> <s:button id="b2" label="click Me" stylename="custombuttonstyle"/> <s:button id="b3" label="click Me" click="changeskin()"/> </s:view> Lorsque vous utilisez un sélecteur CSS type pour appliquer un habillage personnalisé, définissez-le dans le fichier d application mobile racine. Vous ne pouvez pas définir des sélecteurs de type dans une vue mobile, qui est identique à un composant personnalisé. Vous pouvez néanmoins définir des styles en ActionScript, MXML ou CSS avec un sélecteur de classe dans toute vue ou document de votre application mobile.

188 Chapitre 7 : Test et débogage Gestion des configurations de lancement Flash Builder utilise des configurations de lancement lorsque vous exécutez ou déboguez des applications mobiles. Vous pouvez spécifier s il faut lancer l application sur le bureau ou sur un périphérique connecté à votre ordinateur. Pour créer une configuration de lancement, procédez comme suit : 1 Sélectionnez Exécuter > Exécuter les configurations pour ouvrir la boîte de dialogue d exécution des configurations. Pour ouvrir la boîte de dialogue Configurations de débogage, sélectionner Exécuter > Configurations de débogage. Voir «Test et débogage d une application mobile sur un périphérique» à la page 189. Vous pouvez également accéder à la commande Exécuter ou Déboguer les configurations dans la liste déroulante du bouton Exécuter ou Déboguer de la barre d outils Flash Builder. 2 Développez le nœud de l application mobile. Cliquez sur le bouton Crée une configuration de lancement dans la barre d outils de la boîte de dialogue. 3 Spécifiez une plateforme cible dans la liste déroulante. 4 Spécifiez une méthode de lancement : Sur le bureau Exécute ou débogue l application sur votre ordinateur à l aide d AIR Debug Launcher (ADL), selon une configuration de périphérique que vous avez spécifiée. Cette méthode de lancement n est pas une vraie émulation d exécution de l application sur un périphérique. Elle vous permet toutefois de voir la mise en forme de l application et d interagir avec l application. Voir «Prévisualisation des applications avec ADL» à la page 189. Cliquez sur Configurer pour modifier les configurations du périphérique. Voir «Configuration des informations du périphérique pour un aperçu sur l ordinateur» à la page 189. Sur le périphérique Installe et exécute l application sur le périphérique. Pour la plateforme Google Android, Flash Builder installe l application sur votre périphérique et lance l application. Flash Builder accède au périphérique connecté au port USB de l ordinateur. Pour plus d informations, voir «Test et débogage d une application mobile sur un périphérique» à la page 189. Windows nécessite un pilote USB pour connecter un périphérique Android à l ordinateur. Pour plus d informations, voir «Installation des pilotes de périphérique USB pour les périphériques Android (Windows)» à la page 19. 5 Indiquez si vous souhaitez effacer les données de l application à chaque lancement, le cas échéant.

Test et débogage 189 Test et débogage d une application mobile sur l ordinateur Pour des tâches initiales de test ou de débogage, ou si vous ne possédez pas de périphérique mobile, Flash Builder vous permet de tester et de déboguer les applications sur l ordinateur en utilisant AIR Debug Launcher (ADL). Avant de tester ou de déboguer une application mobile pour la première fois, vous devez définir une configuration de lancement. Spécifiez la plateforme cible et Sur le bureau comme méthode de lancement. Voir «Gestion des configurations de lancement» à la page 188. Configuration des informations du périphérique pour un aperçu sur l ordinateur Les propriétés d une configuration de périphérique déterminent la manière dont l application apparaît dans ADL et dans le mode Création de Flash Builder. «Définition des configurations de périphériques» à la page 15 répertorie les configurations prises en charge. Les configurations des périphériques n affectent pas l aspect de l application sur le périphérique. Densité d écran Vous pouvez afficher votre application sur l ordinateur de développement ou afficher la présentation de l application dans le mode Création de Flash Builder. Flash Builder utilise une densité d écran de 240 PPP. L aspect d une application lors de sa prévisualisation diffère parfois de son aspect sur un périphérique qui prend en charge une densité de pixels différente. Prévisualisation des applications avec ADL Lors de la prévisualisation d une application sur l ordinateur, Flash Builder lance l application à l aide d ADL. ADL fournit un menu Périphérique avec les raccourcis correspondants pour émuler les boutons du périphérique. Par exemple, pour émuler le bouton Retour d un périphérique, sélectionnez Périphérique > Retour. Sélectionnez Périphérique > Rotation gauche ou Périphérique > Rotation droite pour émuler la rotation du périphérique. Les options de rotation sont désactivées si vous n avez pas sélectionné l orientation automatique. Faites glisser le curseur dans une liste pour émuler le défilement de la liste sur un périphérique. Brent Arnold, expert Flex certifié par Adobe, a créé un didacticiel vidéo sur l utilisation d ADL pour obtenir un aperçu d une application mobile sur l ordinateur. Test et débogage d une application mobile sur un périphérique Vous pouvez utiliser Flash Builder pour tester ou déboguer une application mobile à partir de votre ordinateur de développement ou d un périphérique. Vous testez et déboguez les applications en fonction d une configuration de lancement que vous définissez. Flash Builder partage la configuration de lancement entre l exécution et le débogage de l application. Lorsque vous utilisez Flash Builder pour déboguer une application sur un périphérique, Flash Builder installe une version de débogage de l application sur le périphérique.

Test et débogage 190 Remarque : si vous exportez une version validée vers un périphérique, vous installez une version non déboguée de l application. La version non déboguée ne convient pas au débogage. Pour plus d informations, voir Gestion des configurations de lancement. Débogage d une application sur un périphérique Google Android Sur un périphérique Android, le débogage requiert Android 2.2 ou version ultérieure. Vous pouvez effectuer le débogage dans l un des scénarios suivants : Débogage via USB : pour déboguer une application via une connexion USB, connectez le périphérique à l ordinateur hôte par le biais d un port USB. Lors d un débogage via USB, Flash Builder groupe toujours l application, puis l installe et la lance sur le périphérique avant le démarrage du débogage. Assurez-vous que le périphérique est connecté au port USB de l ordinateur hôte au cours de la session de débogage complète. Débogage via un réseau : lorsque vous déboguez une application via le réseau, le périphérique et l ordinateur hôte doivent utiliser le même réseau. L ordinateur hôte et le périphérique peuvent être connectés au réseau via Wi-Fi, Ethernet ou Bluetooth. Lors d un débogage via un réseau, Flash Builder vous permet de déboguer une application qui est déjà installée sur un périphérique connecté, sans réinstaller l application. Connectez le périphérique à l ordinateur hôte via un port USB seulement au cours de la création de package et au cours de l installation de l application sur le périphérique. Vous pouvez déconnecter le périphérique du port USB au cours du débogage. Toutefois, assurez-vous qu il existe une connexion réseau entre le périphérique et l ordinateur hôte tout au long de la session de débogage. Préparation au débogage de l application Avant de commencer le débogage via USB ou via un réseau, procédez comme suit : 1 (Windows) Vérifiez que le pilote USB approprié est installé. Dans Windows, installez le pilote Android USB. Reportez-vous à la documentation accompagnant la version du SDK Android pour plus d informations. Pour plus d informations, voir «Installation des pilotes de périphérique USB pour les périphériques Android (Windows)» à la page 19. 2 Veillez à ce que le débogage USB soit activé sur le périphérique. Dans les paramètres du périphérique, accédez à Applications > Développement, et activez le débogage USB. Recherche de périphériques connectés Lorsque vous exécutez ou déboguez une application mobile sur un périphérique, Flash Builder vérifie les périphériques connectés. Si Flash Builder détecte un seul périphérique connecté en ligne, il déploie et lance l application. Dans le cas contraire, Flash Builder lance la boîte de dialogue Choisir un périphérique pour les scénarios suivants : Aucun périphérique n est trouvé Un seul périphérique déconnecté est trouvé ou sa version du système d exploitation n est pas prise en charge Plusieurs périphériques connectés trouvés Si plusieurs périphériques sont détectés, la boîte de dialogue Choisir un périphérique répertorie les périphériques et leur état (en ligne ou hors connexion). Sélectionnez le périphérique à lancer. La boîte de dialogue Choisir un périphérique répertorie la version du système d exploitation et la version d AIR. Si Adobe AIR n est pas installé sur le périphérique, Flash Builder l installe automatiquement.

Test et débogage 191 Configuration du débogage réseau Effectuez cette procédure seulement si vous déboguez une application via un réseau. Préparation au débogage par le biais du réseau Avant de déboguer une application via le réseau, procédez comme suit : 1 Dans Windows, ouvrez le port 7935 (port du débogueur Flash Player) et le port 7 (port echo/ping). Pour obtenir des instructions détaillées, reportez-vous à cet article Microsoft TechNet. Sous Windows Vista, désélectionnez Connexion réseau sans fil dans Pare-feu Windows > Modifier les paramètres > Avancés. 2 Sur le périphérique, configurez les paramètres sans fil dans Paramètres > Sans fil et Réseau. Sélection d une interface réseau principale Votre ordinateur hôte peut être connecté à plusieurs interfaces réseau simultanément. Toutefois, vous pouvez sélectionner une interface réseau principale à utiliser pour le débogage. Vous sélectionnez cette interface en ajoutant une adresse d hôte dans le fichier de package Android APK. 1 Dans Flash Builder, ouvrez la fenêtre Préférences. 2 Sélectionnez Flash Builder > Plateformes cibles. La boîte de dialogue répertorie toutes les interfaces réseau disponibles sur l ordinateur hôte. 3 Sélectionnez l interface réseau que vous souhaitez incorporer dans le package Android APK. Assurez-vous que l interface réseau sélectionnée est accessible à partir du périphérique. Si le périphérique ne peut pas accéder à l interface réseau sélectionnée pendant qu il établit une connexion, Flash Builder affiche une boîte de dialogue vous invitant à fournir l adresse IP de l ordinateur hôte. Débogage de l application 1 Connectez le périphérique par le biais d un port USB ou via une connexion réseau. 2 Sélectionnez Exécuter > Déboguer les configurations afin de paramétrer une configuration de lancement destinée au débogage. Pour la Méthode de lancement, choisissez Sur le périphérique. Sélectionnez Déboguer via USB ou Déboguer par le biais du réseau. Lors du premier débogage de l application via un réseau, vous pouvez installer l application sur le périphérique via USB. Pour déboguer une application via connexion USB, connectez le périphérique à l ordinateur hôte par le biais d un port USB. Une fois l application installé, si vous ne voulez pas vous connecter via USB pour des sessions de débogage suivantes, désélectionnez l option Installer l application sur le périphérique via USB. (Facultatif) Effacez les données de l application à chaque lancement. Sélectionnez cette option pour conserver l état de l application pour chaque session de débogage. Cette option s applique uniquement si l occurrence sessioncachingenabled est définie sur True dans votre application. 3 Sélectionnez Déboguer pour lancer une session de débogage. Le débogueur se lance et attend le démarrage de l application. La session de débogage commence lorsque le débogueur établit une connexion avec le périphérique.

Test et débogage 192 Lorsque vous essayez de déboguer sur un périphérique via un réseau, l application affiche parfois une boîte de dialogue qui vous invite à saisir une adresse IP. Cette boîte de dialogue indique que le débogueur n a pas pu se connecter. Assurez-vous que le périphérique est correctement connecté au réseau sans fil et que l ordinateur qui exécute Flash Builder est accessible depuis ce réseau. Remarque : sur un réseau d entreprise, le réseau d un hôtel ou un autre réseau invité, parfois le périphérique ne peut pas se connecter à l ordinateur, même si les deux sont sur le même réseau. Si vous effectuez un débogage via un réseau et que l application a été installée auparavant sur le périphérique, démarrez le débogage en tapant l adresse IP de l ordinateur hôte. Brent Arnold, expert Flex certifié par Adobe, a conçu un didacticiel vidéo traitant du débogage d une application sur USB pour un périphérique Android. Voir aussi Débogage et applications groupées pour les périphériques (vidéo) Débogage d une application sur un périphérique Apple ios Pour déboguer une application sur un périphérique Apple ios, déployez et installez manuellement le package ios de débogage (fichier IPA) sur le périphérique ios. Le déploiement automatique n est pas pris en charge pour la plateforme Apple ios. Important : avant de déboguer une application sur un périphérique ios, veillez à suivre la procédure décrite dans «Préparation à la génération, au débogage et au déploiement d une application ios» à la page 22. 1 Connectez le périphérique Apple ios à votre ordinateur de développement. 2 Lancez itunes sur le périphérique ios. Remarque : vous devez disposer d itunes pour installer l application sur le périphérique ios et obtenir l ID du périphérique ios. 3 Dans Flash Builder, sélectionnez Exécuter > Déboguer les configurations. 4 Dans la boîte de dialogue Déboguer les configurations, procédez comme suit : a b c Sélectionnez l application que vous souhaitez déboguer. Sélectionnez la plateforme cible Apple ios. Sélectionnez la méthode de lancement Sur le périphérique. d Sélectionnez l une des méthodes de création de package suivantes : Standard : utilisez cette méthode pour créer le package d une version de l application de qualité analogue à une version validée qui peut s exécuter sur des périphériques Apple ios. L application dont le package a été effectué de cette façon offre des performances semblables à celles du package final de la version validée et peut être soumise à l App Store d Apple. Toutefois, notez que cette méthode de création d un fichier ios de débogage (IPA) prend plusieurs minutes. Rapide : utilisez cette méthode pour créer rapidement un fichier IPA, puis exécutez et déboguez le fichier sur le périphérique. Cette méthode est appropriée à des fins de test d application. L application traitée de cette façon présente des performances inférieures à celles d une version validée et ne peut donc pas être soumise à l App Store d Apple. e Cliquez sur Configurer pour sélectionner le certificat de signature de code, le fichier de configuration et le contenu du package appropriés.

Test et débogage 193 f Cliquez sur Configuration du débogage réseau pour sélectionner l interface réseau que vous souhaitez incorporer dans le package ios de débogage. Remarque : votre ordinateur hôte peut être connecté à plusieurs interfaces réseau simultanément. Toutefois, vous pouvez sélectionner une interface réseau principale à utiliser pour le débogage. g Cliquez sur Déboguer. Flash Builder affiche une boîte de dialogue vous invitant à fournir un mot de passe. Saisissez le mot de passe de votre certificat P12. Flash Builder génère le fichier IPA de débogage et le place dans le dossier bin-debug. 5 Sur le périphérique ios, procédez comme suit : 1 (Facultatif) Dans itunes, sélectionnez Fichier > Ajouter à la bibliothèque et recherchez dans l arborescence le fichier de profil de configuration mobile (avec l extension de nom de fichier.mobileprovision) que vous avez obtenu auprès d Apple. 2 Dans itunes, sélectionnez Fichier > Ajouter à la bibliothèque et recherchez dans l arborescence le fichier IPA de débogage que vous avez généré à l étape 4. 3 Synchronisez le périphérique ios avec itunes en sélectionnant Fichier > Synchroniser. 4 Flash Builder essaie de se connecter à l adresse d hôte spécifiée dans le fichier IPA de débogage. Si l application ne peut pas se connecter à l adresse d hôte, Flash Builder affiche une boîte de dialogue vous invitant à fournir l adresse IP de l ordinateur hôte. Remarque : si vous n avez pas modifié votre code ni vos ressources depuis la création du dernier package IPA de débogage, Flash Builder ignore la création de package et effectue le débogage de l application. Cela signifie que vous pouvez lancer l application installée sur le périphérique et cliquer sur Déboguer pour vous connecter au débogueur Flash Builder. De cette manière, vous pouvez effectuer plusieurs débogages successifs sans chaque fois créer le package de l application.

194 Chapitre 8 : Installation sur les périphériques Installation d une application sur un périphérique Google Android Au cours des phases de développement, de test et de déploiement de votre projet, vous avez la possibilité d installer votre application directement sur un périphérique. Vous pouvez utiliser Flash Builder pour installer une application directement sur un périphérique Android. Lorsque vous installez un package sur un périphérique sur lequel Adobe AIR n est pas installé, Flash Builder installe automatiquement AIR. 1 Connectez le périphérique Google Android à votre ordinateur de développement. Flash Builder accède au périphérique connecté au port USB de l ordinateur. Assurez-vous d avoir configuré les pilotes de périphérique USB requis. Voir «Connexion des périphériques Google Android» à la page 18 2 Dans Flash Builder, sélectionnez Exécuter > Exécuter les configurations. Dans la boîte de dialogue Exécuter les configurations, sélectionnez l application mobile que vous voulez déployer. 3 Sélectionnez la méthode de configuration de lancement Sur le périphérique. 4 (Facultatif) Indiquez si vous souhaitez effacer les données de l application à chaque lancement. 5 Cliquez sur Appliquer. Flash Builder installe et lance l application sur le périphérique Android. Si vous installez un package sur un périphérique sur lequel Adobe AIR n est pas installé, Flash Builder installe automatiquement AIR. Brent Arnold, expert Flex certifié par Adobe, a conçu un didacticiel vidéo traitant de la configuration et de l exécution de votre application sur un périphérique Android. Installation d une application sur un périphérique Apple ios Sur un périphérique ios, les applications (fichiers IPA) doivent être installées manuellement, car la plateforme Apple ios ne prend pas en charge le déploiement automatique. Important : avant d installer une application sur périphérique ios, il vous faut un certificat de développement Apple ios (au format P12) ainsi qu un profil de configuration de développeur. Veillez à suivre la procédure décrite dans «Préparation à la génération, au débogage et au déploiement d une application ios» à la page 22. 1 Connectez le périphérique Apple ios à votre ordinateur de développement. 2 Lancez itunes sur votre ordinateur de développement. Remarque : vous devez disposer d itunes pour installer l application sur le périphérique ios et obtenir l UDID (Unique Device Identifier) du périphérique ios. 3 Dans Flash Builder, sélectionnez Exécuter > Exécuter les configurations.

Installation sur les périphériques 195 4 Dans la boîte de dialogue Exécuter les configurations, procédez comme suit : a b c Sélectionnez l application que vous souhaitez installer. Sélectionnez la plateforme cible Apple ios. Sélectionnez la méthode de lancement Sur le périphérique. d Sélectionnez l une des méthodes de création de package suivantes : e Standard : utilisez cette méthode pour créer le package d une version de l application de qualité analogue à une version validée qui peut s exécuter sur des périphériques Apple ios. La méthode standard de création de packages traduit le code en octets du fichier SWF de l application en instructions ARM avant de créer le package. En raison de cette étape de traduction supplémentaire, cette méthode de création d un fichier d application (IPA) prend plusieurs minutes. La méthode standard prend plus de temps que la méthode rapide. Toutefois, l application traitée de cette façon présente des performances dignes d une version validée et peut donc être soumise à l App Store d Apple. Rapide : utilisez cette méthode pour créer rapidement un fichier IPA. La méthode rapide de création de packages fait l impasse sur la traduction du code en octets et regroupe simplement le fichier SWF et les ressources de l application avec l environnement d exécution AIR précompilé. La méthode rapide de création de packages est plus rapide que la méthode standard. Toutefois, l application traitée de cette façon présente des performances inférieures à celle d une version validée et ne peut donc pas être soumise à l App Store d Apple. Remarque : entre les méthodes de création de packages standard et rapide, la différence réside dans l environnement d exécution ou le fonctionnement. Cliquez sur Configurer pour sélectionner le certificat de signature de code, le fichier de configuration et le contenu du package appropriés. f Cliquez sur Exécuter. Flash Builder affiche une boîte de dialogue vous invitant à fournir un mot de passe. Entrez votre mot de passe de certificat P12. Flash Builder génère le fichier IPA et le place dans le dossier bin-debug. 5 Suivez les étapes ci-dessous sur votre ordinateur de développement : 1 Dans itunes, sélectionnez Fichier > Ajouter à la bibliothèque et recherchez dans l arborescence le fichier de profil de configuration mobile (avec l extension de nom de fichier.mobileprovision) que vous avez obtenu auprès d Apple. Vous pouvez également ajouter le fichier de profil de configuration mobile par glisser-déposer dans itunes. 2 Dans itunes, sélectionnez Fichier > Ajouter à la bibliothèque et recherchez dans l arborescence le fichier IPA que vous avez généré à l étape 4. Vous pouvez également ajouter le fichier IPA par glisser-déposer dans itunes. 3 Synchronisez le périphérique ios avec itunes en sélectionnant Fichier > Synchroniser. L application est déployée sur le périphérique ios et vous pouvez la lancer.

196 Chapitre 9 : Création de package et exportation Création du package et exportation d une application mobile vers une boutique en ligne Utilisez la fonction Flash Builder Exporter vers une version validée pour créer un package de la version validée d une application mobile et l exporter. La version validée correspond généralement à la version finale de l application que vous souhaitez télécharger vers une boutique en ligne, telle que Android Market, Amazon Appstore ou l App Store d Apple. Lors de l exportation d une application, vous pouvez choisir d installer l application sur un périphérique. Si le périphérique est connecté à votre ordinateur au cours de l exportation, Flash Builder installe l application sur le périphérique. Vous pouvez également choisir d exporter un package d application spécifique à une plateforme pour l installer ultérieurement sur un périphérique. Le package ainsi obtenu peut être déployé et installé de la même manière qu une application native. Pour plus d informations sur l exportation d une application vers Android Market ou Amazon Appstore, voir «Exportation de packages Android APK pour publication» à la page 196. Pour plus d informations sur l exportation d une application ios vers l App Store d Apple, voir «Exportation de packages Apple ios pour publication» à la page 197. Exportation de l application avec un moteur d exécution captif Lorsque vous utilisez la fonction Exporter vers une version validée pour exporter une application mobile, vous pouvez choisir d intégrer l environnement d exécution AIR au package de l application. Les utilisateurs peuvent ensuite exécuter l application sur un périphérique ne disposant pas d AIR. Selon la plateforme vers laquelle le package est exporté, il vous est possible de choisir un moteur d exécution captif ou un environnement d exécution partagé. Exportation de packages Android APK pour publication Avant d exporter une application mobile, vous pouvez personnaliser les autorisations Android. Personnalisez manuellement les paramètres dans le fichier descripteur de l application. Ces paramètres figurent dans le bloc <android> du fichier bin-debug/nom_application-app.xml. Pour plus d informations, voir Définition des propriétés d une application AIR. Si vous exportez l application pour l installer ultérieurement sur un périphérique, installez le package d application à l aide des outils fournis par le fournisseur du système d exploitation du périphérique. 1 Dans Flash Builder, sélectionnez Projet > Exporter vers une version validée. 2 Sélectionnez le projet et l application que vous souhaitez exporter. 3 Sélectionnez les plateformes cibles et l emplacement où exporter le projet. 4 Exportez et signez un package d application spécifique à la plateforme.

Création de package et exportation 197 Vous pouvez créer un package de votre application avec une signature numérique pour chaque plateforme cible ou en tant qu application AIR signée numériquement pour l ordinateur. Vous pouvez également exporter l application en tant que fichier AIRI intermédiaire qui peut être signé ultérieurement. Si vous sélectionnez cette option, utilisez ultérieurement l outil de ligne de commande AIR adt pour créer un package du fichier AIRI sous la forme d un fichier APK. Installez ensuite le fichier APK sur le périphérique à l aide d outils spécifiques à la plateforme (par exemple, avec le SDK Android, utilisez adb). Pour plus d informations sur l utilisation des outils de ligne de commande pour créer le package de votre application, voir «Création, test et déploiement à l aide de la ligne de commande» à la page 198. 5 Sur la page des paramètres de package, vous pouvez sélectionner le certificat numérique ainsi que le contenu du package et les éventuelles extensions natives. Déploiement : si vous voulez également installer l application sur un périphérique, cliquez sur la page Déploiement et sélectionnez Installer et lancer l application sur tout périphérique connecté. Assurez-vous que vous avez connecté un ou plusieurs périphériques aux ports USB de votre ordinateur. Exportation d une application avec moteur d exécution captif Sélectionnez cette option si vous souhaitez intégrer l environnement d exécution AIR au fichier APK lors de l exportation du package de l application. Les utilisateurs peuvent ensuite exécuter l application sur un périphérique ne disposant pas d AIR. Exporter l application qui utilise un environnement d exécution partagé Sélectionnez cette option si vous ne souhaitez pas intégrer l environnement d exécution AIR au fichier APK lors de l exportation du package de l application. Vous pouvez sélectionner ou spécifier une URL afin de télécharger Adobe AIR pour le package de l application si AIR n est pas déjà installé sur le périphérique de l utilisateur. L URL par défaut pointe vers Android Market. Vous pouvez toutefois remplacer l URL par défaut en saisissant votre propre URL ou en sélectionnant l URL qui pointe vers un emplacement de l Amazon Appstore. Signature numérique : cliquez sur l onglet Signature numérique pour créer ou localiser un certificat numérique qui représente l identité de l éditeur de l application. Vous pouvez aussi spécifier un mot de passe pour le certificat sélectionné. Si vous créez un certificat, il est auto-signé. Vous pouvez obtenir un certificat commercial signé auprès d un fournisseur de certificats. Voir Signature numérique de vos applications AIR. Contenu du package : (facultatif) cliquez sur l onglet Contenu du package pour spécifier les fichiers à inclure dans le package. Extensions natives : (facultatif) sélectionnez les extensions que vous souhaitez inclure dans le package de l application. Pour plus d informations sur les extensions natives, voir «Utilisation d extensions natives» à la page 13. 6 Cliquez sur Terminer. Flash Builder crée ApplicationName.apk dans le répertoire spécifié dans le premier volet (par défaut, au niveau supérieur de votre projet). Si le périphérique a été connecté à votre ordinateur au cours de l exportation, Flash Builder installe l application sur le périphérique. Exportation de packages Apple ios pour publication Vous pouvez créer et exporter un package ios pour une distribution ponctuelle ou pour une soumission à l App Store d Apple.

Création de package et exportation 198 Important : avant d exporter un package ios, veillez à obtenir les certificats requis ainsi qu un profil de configuration de distribution auprès d Apple. Pour ce faire, suivez la procédure décrite dans «Préparation à la génération, au débogage et au déploiement d une application ios» à la page 22. 1 Dans Flash Builder, sélectionnez Projet > Exporter vers une version validée. 2 Sélectionnez Apple ios en tant que plateforme cible pour exporter et signer un package IPA. Cliquez sur Suivant. 3 Sélectionnez le certificat P12 ainsi que le profil de configuration de distribution obtenu auprès d Apple. 4 Sur la page des paramètres de package, vous pouvez sélectionner le certificat de configuration, le certificat numérique ainsi que le contenu du package et les éventuelles extensions natives. Déploiement : lorsque vous exportez un package ios, l environnement d exécution AIR est intégré par défaut au fichier IPA. Signature numérique : sélectionnez le certificat P12 ainsi que le profil de configuration de distribution obtenu auprès d Apple. Vous pouvez sélectionner l un des types de packages suivants : Ad Hoc Distribution For Limited Distribution (Package ad hoc destiné à une distribution limitée du package) dans le cas d une distribution limitée de l application Final Release Package For Apple App Store (Package de version finale pour l App Store d Apple) pour envoyer l application à l App Store d Apple Contenu du package : (facultatif) cliquez sur l onglet Contenu du package pour spécifier les fichiers à inclure dans le package. Extensions natives : (facultatif) sélectionnez les extensions que vous souhaitez inclure dans le package de l application. Dans le cas où l extension native utilise les fonctionnalités du SDK ios5, sélectionnez l emplacement de ce SDK. Pour plus d informations, voir «Prise en charge des extensions natives ios5» à la page 14. 5 Cliquez sur Terminer. Flash Builder valide la configuration des paramètres du package, puis compile l application. Une fois le package créé, vous pouvez installer le fichier IPA sur un périphérique Apple ios connecté ou l envoyer à l App Store d Apple. Pour associer le fichier IPA au package à l aide de l outil ADT (AIR Developer Tool), voir Packages ios dans Création d applications AIR. Création, test et déploiement à l aide de la ligne de commande Vous pouvez créer une application mobile sans Flash Builder. Vous pouvez utiliser à la place les outils de ligne de commande mxmlc, adl et adt. Le processus général de développement et d installation d une application mobile sur un périphérique à l aide des outils de ligne de commande est détaillé ci-dessous. Chacune de ces étapes sera décrite ultérieurement de façon plus détaillée : 1 Compilez l application à l aide de l outil mxmlc.

Création de package et exportation 199 mxmlc +configname=airmobile MyMobileApp.mxml Cette étape requiert que vous transmettiez le paramètre configname défini sur airmobile. 2 Testez l application dans AIR Debug Launcher (ADL) à l aide de l outil adl. adl MyMobileApp-app.xml -profile mobiledevice Cette étape nécessite la création d un fichier descripteur de l application et sa transmission en tant qu argument à l outil adl. Vous devez également spécifier le profil mobiledevice. 3 Groupez l application à l aide de l outil adt. adt -package -target apk SIGN_OPTIONS MyMobileApp.apk MyMobileApp-app.xml MyMobileApp.swf Cette étape requiert la création préalable d un certificat. 4 Installez l application sur votre périphérique mobile. Pour installer l application sur un périphérique Android, utilisez l outil adb. adb install -r MyMobileApp.apk Cette étape requiert la connexion préalable de votre périphérique mobile à votre ordinateur via USB. 5 Déployez l application mobile dans des magasins en ligne. Compilation d une application mobile à l aide de mxmlc Vous pouvez compiler des applications mobiles avec le compilateur de ligne de commande mxmlc. Pour utiliser mxmlc, affectez au paramètre configname la valeur airmobile ; par exemple : mxmlc +configname=airmobile MyMobileApp.mxml En affectant +configname=airmobile, vous invitez le compilateur à utiliser le fichier airmobile-config.xml. Ce fichier se trouve dans le répertoire sdk/frameworks. Ce fichier effectue les tâches suivantes : S applique au thème mobile.swc. Effectuez les modifications suivantes dans le chemin d accès à la bibliothèque : Supprime libs/air du chemin d accès à la bibliothèque. Les applications mobiles ne prennent pas en charge les classes Window et WindowedApplication. Supprime libs/mx du chemin d accès à la bibliothèque. Les applications mobiles ne prennent pas en charge les composants MX (autres que les graphiques). Ajoute libs/mobile au chemin d accès à la bibliothèque. Supprime les espaces de nom ns.adobe.com/flex/mx et www.adobe.com/2006/mxml. Les applications mobiles ne prennent pas en charge les composants MX (autres que les graphiques). Désactive l accessibilité. Supprime les entrées RSL ; les applications mobiles ne prennent pas en charge les RSL. Le compilateur mxmlc génère un fichier SWF. Test d une application mobile à l aide d adl Vous utilisez AIR Debug Launcher (ADL) pour tester une application mobile. Vous utilisez ADL pour exécuter et tester une application sans être tenu de la grouper ni de l installer auparavant sur un périphérique. Débogage à l aide de l outil adl

Création de package et exportation 200 ADL imprime les instructions trace et les erreurs d exécution au format de sortie standard, mais ne prend pas en charge les points d arrêt ni d autres fonctions de débogage. Vous pouvez utiliser un environnement de développement intégré tel que Flash Builder pour les problèmes complexes de débogage. Lancement de l outil adl Pour lancer l outil adl à partir de la ligne de commande, passez votre fichier descripteur d application de l application mobile et définissez le paramètre profile sur mobiledevice, comme le montre l exemple suivant : adl MyMobileApp-app.xml -profile mobiledevice Le profil mobiledevice définit un ensemble de fonctionnalités pour les applications qui sont installées sur des périphériques mobiles. Pour obtenir des informations précises à propos du profil mobiledevice, voir Capacités des différents profils. Création d un descripteur d application Si vous n avez pas utilisé Flash Builder pour compiler votre application, vous devez créer manuellement le fichier descripteur de l application. Vous pouvez utiliser le fichier /sdk/samples/descriptor-sample.xml en tant que base. En général, au minimum, effectuez les modifications suivantes : Pointez l élément <initialwindow><content> sur le nom du fichier SWF de votre application mobile : <initialwindow> <content>mymobileapp.swf</content>... </initialwindow> Modifiez le titre de l application, car c est ainsi qu il apparaît sous l icône de l application sur votre périphérique mobile. Pour modifier le titre, éditez l élément <name><text> : <name> <text xml:lang="en">mymobileapp by Nick Danger</text> </name> Ajoutez un bloc <android> pour définir les autorisations spécifiques à Android pour l application. Selon les services utilisés par votre périphérique, vous pouvez souvent utiliser l autorisation suivante : <application>... <android> <manifestadditions> <![CDATA[<manifest> <uses-permission android:name="android.permission.internet"/> </manifest>]]> </manifestadditions> </android> </application> Vous pouvez aussi utiliser le fichier descripteur pour définir la hauteur et la largeur de l application, l emplacement des fichiers d icône, les informations relatives à la version et d autres détails concernant l emplacement d installation. Pour plus d informations à propos de la création et de la modification des fichiers descripteurs de l application, voir fichiers descripteurs d application AIR. Groupement d une application mobile à l aide d adt Vous utilisez AIR Developer Tool (ADT) pour grouper les applications mobiles sur la ligne de commande. L outil adt peut créer un fichier APK que vous pouvez déployer sur un périphérique mobile Android.

Création de package et exportation 201 Création d un certificat Avant de créer un fichier APK, créez un certificat. A des fins de développement, vous pouvez utiliser un certificat autosigné. Vous pouvez créer un certificat auto-signé avec l outil adt, comme le montre l exemple suivant : adt -certificate -cn SelfSign -ou QE -o "Example" -c US 2048-RSA newcert.p12 password L outil adt crée le fichier newcert.p12 dans le répertoire en cours. Vous passez ce certificat à adt lorsque vous groupez votre application. N utilisez pas de certificats auto-signés pour les applications de production. Ils fournissent uniquement une assurance restreinte aux utilisateurs. Pour plus d informations sur la signature des fichiers d installation AIR à l aide d un certificat émis par une autorité de certification reconnue, voir Signature des applications AIR. Création du fichier de package Pour créer le fichier APK pour Android, passez les détails sur l application à l outil adt, y compris le certificat, comme l illustre l exemple suivant : adt -package -target apk -storetype pkcs12 -keystore newcert.p12 -keypass password MyMobileApp.apk MyMobileApp-app.xml MyMobileApp.swf La sortie de l outil adt est un fichier appname.apk. Groupement pour ios Pour grouper des applications mobiles pour ios, vous devez obtenir un certificat de développement d Apple, ainsi qu un fichier de configuration. Cela exige que vous rejoigniez le programme des développeurs Apple. Pour plus d informations, voir «Préparation à la génération, au débogage et au déploiement d une application ios» à la page 22. Piotr Walczyszyn, expert en programmation Flex, explique comment grouper l application avec ADT en utilisant Ant pour les périphériques ios. Dans son blog, Valentin Simonov fournit des informations supplémentaires sur la façon de publier votre application sur ios. Installation d une application mobile sur un périphérique à l aide d adb Vous utilisez Android Debug Bridge (adb) pour installer l application (fichier APK) sur un périphérique mobile qui exécute Android. L outil adb fait partie du SDK Android. Connexion du périphérique à un ordinateur Avant d exécuter adb pour installer le fichier APK sur votre périphérique mobile, connectez le périphérique à votre ordinateur. Sur les systèmes Windows et Linux, la connexion d un périphérique requiert les pilotes USB. Pour plus d informations sur l installation des pilotes USB pour votre périphérique, voir Utilisation des périphériques matériels. Installation de l application sur un périphérique connecté Après avoir connecté le périphérique à l ordinateur, vous pouvez installer l application sur le périphérique. Pour installer l application à l aide de l outil adb, utilisez l option install et affectez le nom de votre fichier APK, comme le montre l exemple suivant : adb install -r MyMobileApp.apk Utilisez l option -r pour remplacer l application si vous l avez installée au préalable. Dans le cas contraire, vous devez désinstaller l application chaque fois que vous souhaitez installer une version plus récente sur le périphérique mobile.

Création de package et exportation 202 Voir aussi Android Debug Bridge Déploiement de l application dans des magasins en ligne Vous pouvez déployer l application sur des magasins d applications en ligne, tels qu Android Market, Amazon Appstore ou l App Store d Apple. Lee Brimlow montre comment déployer une nouvelle application AIR pour Android dans Android Market. Christian Cantrell explique comment déployer l application sur Amazon Appstore pour Android.