Archives du mot-clé SetStyle

Flex 4 – Différences entre Flex 3 et Flex 4 (4-Nouvelle syntaxe des States)

Traduction de l’article Differences between Flex 3 and Flex 4 beta de Joan Lafferty.

Flex 4 introduit une nouvelle syntaxe MXML pour les States. Celle-ci est plus « inline », permettant de faire des modifications sur les States en fonction du contexte. Voici les grandes différences de la syntaxe Flex 4 par rapport à Flex 3:

  • Seuls des states sont définis sans le tableau « states »
  • Dans la nouvelle syntaxe des states, vous ne pouvez pas utiliser AddChild ni RemoveChild. A la place, vous devez définissez si un composant fait partie d’un state en utilisant les attributs includeIn et excludeFrom.

Dans l’exemple Flex 3 suivant, les States sont utilisées pour inclure un Button et supprimer un TextInput, seulement quand le « currentState » du document est « submitState ». Cette approche peut être très lourde avec des states complexes:

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:AddChild relativeTo="{loginForm}" >
           <mx:Button label="submit" bottom="10" right="10"/>
        </mx:AddChild>
        <mx:RemoveChild target="{firstTextInput}"/>
    </mx:State>
</mx:states>

<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />

Voici le même exemple en Flex 4 en utilisant includeIn et excludeFrom:

<s:states>
    <s:State name="submitState" />
</s:states>
<s:TextInput id="firstTextInput" excludeFrom="submitState" />
<s:Group id="loginForm" >
    <s:Button label="submit" bottom="10" right="10" includeIn="submitState"/>
</s:Group>

Les tags SetProperty, SetStyle et SetEventHandler ont été remplacés par la nouvelle syntaxe par point, qui vous permet de préciser un attribut MXML avec un identifiant de State.

Dans le code Flex 3 suivant, le code définit une propriété, un style et un event pour un Button dans l’état submitState:

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="submit" />
        <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/>
        <mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/>
    </mx:State>
    <mx:State name="clearState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="clear" />
        <mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" />
    </mx:State>
</mx:states>

<mx:Button id="submitButton" />

Voici à quoi ressemble le même code dans Flex 4:

<s:states>
    <s:State name="submitState" />
    <s:State name="clearState" />
</s:states>

<s:Button label.submitState="submit" textDecoration.submitState="underline"
   click.submitState="trace('done')" click.clearState="emptyDocument()"
   label.clearState="clear" textDecoration.clearState="none"/>

Un composant ne peut plus être dans un état undefined ou null. Par défaut, le premier state déclaré est le State initial du composant. La nouvelle syntaxe est disponible quand vous utiliser le namespace MXML 2009. Vous ne pouvez pas mélanger l’ancienne et la nouvelle syntaxe. L’ancienne syntaxe est uniquement disponible avec le namespace MXML 2006.

Lire la suite

Flex Chart – Modifier les styles d’un LineChart en MXML et ActionScript

Dans l’article précédent, je présentais le composant Flex LineChart et ses différentes représentations. Comme pour les autres composants Charting de Flex, vous pouvez modifier de nombreux styles, notamment le style d’affichage de la ligne en question.

Vous pouvez changer la largeur et la couleur de la ligne pour chaque Series en utilisant le tag <mx:lineStroke>. La ligne par défaut fait 3 pixels de large et a une ombre. L’exemple suivant fixe une autre couleur et une autre largeur pour l’objet Stroke de la series:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script><![CDATA[
		import mx.collections.ArrayCollection;

		[Bindable]
		public var expenses:ArrayCollection = new ArrayCollection([
			{Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
			{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
			{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
		]);
	]]></mx:Script>

	<mx:Panel title="Line Chart With Strokes">
		<mx:LineChart id="myChart"
		dataProvider="{expenses}"
		showDataTips="true"
		>
			<mx:horizontalAxis>
				<mx:CategoryAxis
				dataProvider="{expenses}"
				categoryField="Month"
				/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:LineSeries
				yField="Profit"
				displayName="Profit"
				>
					<mx:lineStroke>
						<mx:Stroke
						color="0x0099FF"
						weight="20"
						alpha=".2"
						/>
					</mx:lineStroke>
				</mx:LineSeries>
				<mx:LineSeries
					yField="Expenses"
					displayName="Expenses"
					>
					<mx:lineStroke>
						<mx:Stroke
						color="0x0044EB"
						weight="20"
						alpha=".8"
						/>
					</mx:lineStroke>
				</mx:LineSeries>
			</mx:series>
		</mx:LineChart>
		<mx:Legend dataProvider="{myChart}"/>
	</mx:Panel>
</mx:Application>

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

This movie requires Flash Player 11

Vous pouvez aussi modifier les lignes d’un LineChart en ActionScript. Pour cela, il faut définir un nouvel objet Stroke, et l’appliquer à la LineSeries en fixant la propriété « lineStroke » avec la méthode setStyle().
Lire la suite

Flex Item Renderer – Optimiser les performances des ItemRenderer

Si vous affichez un grand nombre d’itemRenerers  (que ce soit dans une DataGrid ou dans une AdvancedDataGrid), les performances de votre application Flex pourraient être affectées si vous ne codez pas ces itemRenderer de manière optimale.

Voici quelques conseils qui pourraient vous aider:

  • Limitez le nombre de colonnes utilisant des itemRenderer. Est-ce que vous avez vraiment besoin que chacun colonne utilise un itemRenderer personnalisé? Parfois ce sera le cas mais il faut savoir peser le pour et le contre…
  • Essayer de ne pas changer les styles des éléments de votre itemRenderer trop souvent. Si vous avez besoin de changer de styles (par exemple, afficher du vert pour une valeur positive et du rouge pour une valeur négative), pensez à avoir 2 composants préparés avec ces styles et d’en afficher/cacher un. Le changement de style est une des tâches les plus lourdes en Flex.
  • N’utilisez pas de Container comme base pour votre itemRenderer. Les conteneurs ajoutent beaucoup de code qui ne vous sera pas forcement utile (positionnement des composants automatique). Ils sont ok pour une utilisation limitée, mais il est plus optimal d’écrire vos itemRenderer en se basant sur UIComponent.

Lire la suite

Flex PopUp – Contrôler le style d’une PopUp modale

Par défaut, quand vous ouvrez une fenêtre popUp de type Alert dans Flex grâce à la méthode show(), l’application se recouvre d’une sorte de voile gris qui empêche l’utilisateur d’utiliser l’application. Voici l’apparence d’une fenêtre modale par défaut:

alert yes no

Ce type de fenêtre avec un voile derrière est appelé fenêtre modale.

Vous pouvez bien sur modifier certains paramètres pour changer l’apparence de ce voile modal. Il existe 4 paramètres que vous pouvez modifier:

  •  modalTransparency:Number. Valeur par défaut 0.5. Définit l’opacité du voile appliqué. Une valeur de 0 rend le voile complètement transparent. Une valeur de 1 le rend totalement opaque.
  • modalTransparencyBlur:Number. Valeur par défaut 3. Définit le flou (blur) appliqué au reste de l’application Flex.
  • modalTransparencyColor:uint .Valeur par défaut 0xDDDDDD. Définit la couleur du voile.
  • modalTransparencyDuration:Number. Valeur par défaut 100. Définit en millisecondes, le temps que met l’effet de transparence à se jouer (ouverture et fermeture).

Lire la suite

Flex PopUp – Personnaliser les styles d’une Alert (couleur, icône, alpha, boutons et texte)

Il y a déjà plusieurs articles sur flex-tutorial qui portent sur la manière de personnaliser l’apparence d’une fenêtre Alert. Voici une application trouvée sur ce blog qui résume bien les modifications que vous pouvez faire avec un démonstrateur. Il faut rappeler que l’utilisation des Alert est assez simpliste, si vous voulez affichez de la donnée de manière plus complexe, il vaut mieux ouvrir des fenêtres avec le PopUpManager.

Voici l’application en question (traduite):

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

This movie requires Flash Player 11