Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

AIR Mobile – Modifier les styles du composant ActionBar

iEncore un article de Jason San José, que vous trouverez sur son blog:

http://blogs.adobe.com/jasonsj/2011/05/tutorial-styling-the-actionbar.html

Le dernier présentait comment modifier les styles d'une TabbedViewNavigatorApplication, celui là s'occupe de l'ActionBar de votre application. Il est donc valable pour les ViewNavigatorApplication et les TabbedViewNavigatorApplication qui utilisent toutes les 2 le composant ActionBar.

Vu que beaucoup est dit dans son article, je vais me contenter de reprendre ces éléments

La propriété chromeColor

On commence par le plus simple, la propriété chromeColor qui permet de définir la couleur de l'ActionBar (gris par défaut). Le style de l'ActionBar a un léger "gloss" qui sera conservé, quelle que soit la couleur choisie. Voici son exemple en rouge:

Pour effectuer cette modification, il vous suffit d'ajouter un sélecteur de type sur s|ActionBar dans votre application et de définir la propriété CSS chromeColor comme ceci:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.holrHomeView">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
 s|ActionBar
{
chromeColor: #990000;
}
</fx:Style>
</s:ViewNavigatorApplication>

Comme vous avez utilisé un sélecteur de type (et pas de classe), cette modification sera apportée à toutes les ActionBar de votre application.

La propriété titleAlign

L'alignement par défaut du titre de l'ActionBar se fait à gauche. Dans les interfaces de type iOS, le titre est plus souvent centré. Pour définir l'alignement du titre, encore une fois il suffit de modifier la valeur d'une propriété CSS nommée "titleAlign":

s|ActionBar
{
  chromeColor: #990000;
  titleAlign: center;
}

Les valeurs possibles sont "left", "center", "right". Voici le rendu pour "center":

La propriété defaultButtonAppearance

Par défaut, le composant ActionBar assigne une Skin arbitraire pour tout composant Button intégré dans navigationContent (partie de gauche) et actionContent (partie de droite). De base, cette skin est assez "simple" dans le sens où elle n'a pas de contours.

Si vous assignez un texte ou un icone, vous ne verrez que lui avec simplement des séparateurs entre les boutons:

Il y a aussi un autre style qui est pris en charge par défaut (mais non actif) qui permet à ce boutons de ressembler à des boutons iOS. Pour cela, il faut modifier la propriété defaultButtonAppearance directement sur l'ActionBar:

s|ActionBar
{
  chromeColor: #990000;
  defaultButtonAppearance: beveled;
}
...
<s:navigationContent>
  <s:Button label="Back">
</s:navigationContent>
<s:actionContent>
  <s:Button label="Buy">
</s:actionContent>

Le second "style de base" se nomme "beveled", voici son rendu:

La modification de la propriété defaultButtonAppearance modifie plusieurs propriétés de style à la fois (paddings, tailles de font, et titleAlign).

Aller plus loin avec les CSS Selectors

Rien qu'avec ces quelques propriétés, vous pouvez modifier les styles principaux de l'ActionBar. Mais pour certains points de détail, vous allez avoir besoin d'être plus précis que ces sélecteurs de type CSS. Pour cela, on va utiliser des selecteurs CSS "avancés" qui vont vous permettre de cibler seulement certaines parties de l'ActionBar. Par exemple, vous pourrez modifier uniquement le style des boutons pour supprimer la flèche automatiquement ajoutée sur les éléments de navigationContent.

L'utilisation de ces propriétés n'est pas simple à aborder car il faut connaître le nom des "skin parts" pour n'atteindre que celles-ci. Il vous faudra donc aller fouiller dans la documentation ou dans le code de Flex pour connaitre ces noms. Voici un exemple:

s|ActionBar
{
  chromeColor: #990000;
  defaultButtonAppearance: beveled;
}

s|ActionBar #titleDisplay
{
    fontWeight: normal;
    fontStyle: italic;
}

s|ActionBar.beveled s|Group#navigationGroup s|Button
{
    /* use the rounded button instead of the arrow button */
    skinClass: ClassReference("spark.skins.mobile.BeveledActionButtonSkin");
}

Ici, on modifie la couleur de l'ActionBar, on lui donne un style iOS, on modifie les styles du titre et on supprime la flèche des boutons du "navigationContent":