Archives pour la catégorie CurrencyFormatter

Flex AdvancedDataGrid – Utiliser un renderer pour remplir une colonne

L’exemple Flex suivant montre le résultat de l’utilisation d’un itemRenderer utilisé pour calculé la valeur de la colonne Difference du composant AdvancedDataGrid:

adg-irend

Cet exemple définit une colonne ayant l’id « diffCol » qui n’est pas associée avec un dataField (champ) du dataProvider. Au lieu de cela, on va utiliser la propriété rendererProvider pour assigner un itemRenderer à la colonne. L’itemRenderer va calculer la différence entre les valeurs « Actual » et « Estimate », et ensuite afficher une message différent si cette valeur est positive ou non.

Voici le code de l’application Flex principale:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
	import mx.collections.ArrayCollection;
	[Bindable]
	private var dpHierarchy:ArrayCollection = new ArrayCollection([
	{Region:"Southwest", children: [
		{Region:"Arizona", children: [
			{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
			{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
		{Region:"Central California", children: [
			{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
		{Region:"Nevada", children: [
			{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
		{Region:"Northern California", children: [
			{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
			{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
		{Region:"Southern California", children: [
			{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
			{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
		]}
	]);
	]]>
	</mx:Script>
	<mx:AdvancedDataGrid id="adg" width="100%" height="100%" creationComplete="adg.expandAll()">
		<mx:dataProvider>
			<mx:HierarchicalData source="{dpHierarchy}"/>
		</mx:dataProvider>
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Region"/>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
			headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumn dataField="Actual"/>
			<mx:AdvancedDataGridColumn dataField="Estimate"/>
			<mx:AdvancedDataGridColumn id="diffCol"
			headerText="Difference"/>
		</mx:columns>
		<mx:rendererProviders>
			<mx:AdvancedDataGridRendererProvider column="{diffCol}"
			depth="3" renderer="mycomponents.SummaryRenderer"/>
		</mx:rendererProviders>
	</mx:AdvancedDataGrid>
</mx:Application>

Et le code de l’itemRenderer SummaryRenderer (dans le package mycomponents):
Lire la suite →

Flex AdvancedDataGrid – Utiliser un Formatter dans une colonne

La classe AdvancedDataGridColumn contient une propriété « formatter » à laquelle vous pouvez passer une instance d’une classe de type Formatter, ou un instance d’une classe héritant de Formatter. La classe Formatter va convertir la donnée en une chaîne personnalisée.
Par exemple, vous pouvez utiliser la classe CurrencyFormatter pour préfixer les valeurs de la colonne de prix avec le signe $ ou €.

Vous pouvez utiliser une classe Formatter en même temps qu’une callback pour la labelFunction et pour la styleFunction. Le fomatter sera appelé après ces fonctions de callback.

L’exemple suivant modifie l’exemple sur l’application de styles aux lignes et ajoute un CurrencyFormatter à la colonne de prix pour lui ajouter le signe €:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
		// Include the data for the AdvancedDataGrid control.
		include "StyleData.as"
		// Artist name to highlight.
		protected var artistName:String;
		// Event handler to set the selected artist's name
		// based on the selected Button control.
		public function setArtistName(event:Event):void{
			artistName=Button(event.currentTarget).label;
			// Refresh row display.
			myADG.invalidateList();
		}
		// Callback function that highlights in red
		// all rows for the selected artist.
		public function myStyleFunc(data:Object, col:AdvancedDataGridColumn):Object{
			if (data["Artist"] == artistName){
				return {color:0xFF0000};
			}
			// Return null if the Artist name does not match.
			return null;
		}
	]]>
	</mx:Script>

	<mx:AdvancedDataGrid id="myADG"
		width="100%" height="100%"
		dataProvider="{dpADG}"
		styleFunction="myStyleFunc">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Artist"/>
			<mx:AdvancedDataGridColumn dataField="Album"/>
			<mx:AdvancedDataGridColumn dataField="Price">
				<mx:formatter>
					<mx:CurrencyFormatter currencySymbol="€" alignSymbol="right"/>
				</mx:formatter>
			</mx:AdvancedDataGridColumn>
		</mx:columns>
	</mx:AdvancedDataGrid>
	<mx:HBox>
		<mx:Button label="Pavement" click="setArtistName(event);"/>
		<mx:Button label="Saner" click="setArtistName(event);"/>
		<mx:Button label="The Doors" click="setArtistName(event);"/>
	</mx:HBox>
</mx:Application>

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

This movie requires Flash Player 11

Flex Item Renderer – Créer un ItemRenderer réutilisable avec listData

Voici la suite de la traduction de l’article de Peter Ent. On va maintenant parler de la création d’ItemRenderers réutilisables (génériques). Pour créer ces itemRenderer génériques, on va faire abstraction des champs sur lesquels on cherche les propriétés. Vous verrez qu’en passant par listData et en remontant un peu la chaîne, on peut récupérer l’information qui nous convient sans mettre de valeur « en dur ».

Voici un exemple qui affiche une valeur numérique en utilisant un CurrencyFormatter. Celui-ci va simplement arrondir notre valeur pour qu’elle ait uniquement 2 chiffres après la virgule. Cet ItemRenderer peut être intéressant pour afficher un prix par exemple.

Voici donc le code de l’itemRenderer PriceFormatter:

<?xml version="1.0" encoding="utf-8"?>
<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.controls.dataGridClasses.DataGridListData;

			[Bindable] private var formattedValue:String;

			override public function set data(value:Object):void
			{
				super.data = value;

				formattedValue = cfmt.format( Number(data[(listData as DataGridListData).dataField]) );

			}
		]]>
	</mx:Script>

	<mx:CurrencyFormatter precision="2" id="cfmt" />

	<mx:text>{formattedValue}</mx:text>

</mx:Text>

Le point-clé de cet ItemRenderer est la partie indiquée en orange, qui modifie la variable bindable formattedValue. Tout d’abord, vous pouvez voir que le <mx:CurrencyFormatter> a été défini grâce à un tag MXML (vous pourriez le faire en ActionScript si vous le souhaitiez) avec l’id « cfmt« . Dans cet exemple, formattedValue est donnée par le résultat de l’appel à la fonction format() du CurrencyFormatter.

Lire la suite →

Flex Formatter: Exemple de CurrencyFormatter en MXML

Le composant CurrencyFormatter fonctionne pratiquement de la même manière que le NumberFormatter sauf qu’il ajoute le symbole de la devise (currency) en plus de formater le nombre. Le CurrencyFormatter a toutes les mêmes propriétés que le NumberFormatter sauf qu’il a deux propriétés supplémentaires: currencySymbol et alignSymbol. La valeur par défaut pour currencySymbol est le signe du dollar américain ($). La valeur par défaut de la propriété alignSymbol est « left », l’autre valeur possible est « right », pour l’euro par exemple.

L’exemple suivant montre comment l’utiliser pour formater un nombre en euros:

<?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.events.ValidationResultEvent;
              private var vResult:ValidationResultEvent;

              private function Format():void {

                     vResult = numVal.validate();

                    if (vResult.type==ValidationResultEvent.VALID) {
                        var temp:Number=Number(priceEU.text);
                        formattedEUPrice.text= eurosFormatter.format(temp);
                    }

                    else {
                       formattedEUPrice.text="";
                    }
              }
        ]]>
    </mx:Script>

    <mx:CurrencyFormatter id="eurosFormatter" precision="2"
        currencySymbol="€" useNegativeSign="true"
        alignSymbol="right"/>

    <mx:NumberValidator id="numVal" source="{priceEU}" property="text"
        allowNegative="true"/>

    <mx:Panel title="Exemple de CurrencyFormatter en euros" width="75%" height="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form>
            <mx:FormItem label="Entrer un montant en euros (24 ou 35.4):">
                <mx:TextInput id="priceEU" text="" width="50%"/>
            </mx:FormItem>

            <mx:FormItem label="Montant Formaté: ">
                <mx:TextInput id="formattedEUPrice" text="" width="50%" editable="false"/>
            </mx:FormItem>

            <mx:FormItem>
                <mx:Button label="Valider et Formater" click="Format();"/>
            </mx:FormItem>
        </mx:Form>

    </mx:Panel>
</mx:Application>