Programowanie Adobe Flex, Php itd. To co tutaj znajdziecie ;)

Czwarta odsłona Flex SDK przyniosła ze sobą nowe rodzaje kontenerów ułatwiających rozmieszczanie komponentów w aplikacjach flex-owych. Jednym z nich jest DataGroup. Nie chcę tutaj opisywać możliwości kontenera tylko przedstawić sposób w jaki uzyskałem dostęp do utworzonych w moim DataGroup itemrenderer-ów.

Mój itemrenderer wyświetla imię i nazwisko na podstawie danych zawartych w obiekcie "PersonVo".

Klasa PersonVo.

public dynamic class PersonVo
{
		public var firstName:String;
		public var surname:String;

		public function PersonVo(firstName:String = null,
					surname:String = null)
		{
			this.firstName = firstName;
			this.surname =surname;
		}
}

Kod itemrenderer-a

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:mx="library://ns.adobe.com/flex/mx"
		autoDrawBackground="true">
	<s:HGroup gap="5"
			  height="100%">
		<s:Label id="firstName"
			 text="{data.firstName}"/>
		<s:Label id="surname"
			 text="{data.surname}"/>
	</s:HGroup>
</s:ItemRenderer>

Dostęp do każdego utworzonego obiektu itemrenderera uzyskuję rejestrując metodę dla zdarzenia "rendererAdd". W jej argumencie zostaje dostarczony obiekt "event" typu "RendererExistenceEvent", który to zawiera instancję itemrenderera. Wszystkie obiekty itemrenderer-ów umieszczam w tablicy i udostępniam na zewnątrz kontenera DataGroup poprzez publiczną właściwość.

DataGroup z przechowanymi obiektami itemrenderer-ów.

<s:DataGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
	        xmlns:s="library://ns.adobe.com/flex/spark"
	        xmlns:mx="library://ns.adobe.com/flex/mx"
                   itemRenderer="dgControls.DgControlRenderer"
	        rendererAdd="onRendererAdd(event)">
	<fx:Script>
		<![CDATA[
			import spark.events.RendererExistenceEvent;
			private var _itemRenderers:Array = [];

			/**
			 * Array of itemrenderers
			 * */
			public function get itemRenderers():Array
			{
				return _itemRenderers;
			}

			/**
			 * Add renderer to array
			 * */
			protected function onRendererAdd(event:RendererExistenceEvent):void
			{
				_itemRenderers.push(event.renderer);
			}
		]]>
	</fx:Script>
</s:DataGroup>

Do dataprovidera kontenera DataGroup dostaczyłem następującą tablicę oraz przeprowadziłem prostą iterację wraz ze zmianą właściwości wewnątrz itemrenderera. W zasadzie było to dość proste, ale czy to jedyne rozwiązanie? ;)

Tablica elementów "dataProvidera" w DataGroup.

var dpDataGroup:ArrayCollection = new ArrayCollection([
						new PersonVo("Piotr", "Zarzycki"),
						new PersonVo("Marian", "Zakrzewski"),
						new PersonVo("Damian", "Zarzycki")
					]);

Zmiana właściwości obiektów itemrenderer-ów.

var count:int = dg.itemRenderers.length;

for(var i:int = 0; i < count; i++)
{
					var dgRenderer:DgControlRenderer = dg.itemRenderers[i];
					dgRenderer.firstName.text = "Ola";
					dgRenderer.surname.text = "O.";
}

Podczas pracy nad pewną funkcjonalnością musiałem pogrubić zawartość wybranych wierszy w datagrid-zie. „Decyzja” o pogrubieniu zawartości danego wiersza miała być zawarta w każdym pojedyńczym obiekcie dostarczonym do datagrid-a w postaci tablicy (Array). Wewnątrz takiego obiektu zawarta zostanie właściwość „mówiąca” o pogrubieniu.

Przykładowa klasa zawierająca informację każdego wiersza w datagrid-zie mogła by wyglądać następnująco (właściwość „isSpecial” decyduję o pogrubieniu):

public dynamic class PersonVo
{
		public var name:String;
		public var surname:String;
		public var email:String;

  /**
		 * If this property is true, row in DataGrid is bold
		 *
		 * @var Boolean
		 * */
		public var isSpecial:Boolean;

		private var _date:Date;

		/**
		 * Get formatted date
		 *
		 * @retrun String
		 * */
		public function get dateStr():String
		{
			var dateFormatter:DateFormatter = new DateFormatter();
			dateFormatter.formatString = "DD-MM-YYYY";

			return dateFormatter.format(_date);
		}

		public function set dateStr(value:String):void
		{
			_date = DateFormatter.parseDateString(value);
		}

		public function PersonVo(name:String = null, surname:String = null,
					date:Date = null, email:String = null, isSpecial:Boolean = false)
		{
			this.name = name;
			this.surname = surname;
			this._date = date;
			this.email = email;
			this.isSpecial = isSpecial;
		}
}

Następnie należy utworzyć DataGrid-a wraz z kolumnami wyświetlającymi informację, którymi jesteśmy zainteresowani oraz itemrenderer w którym obsłużone zostanie pogrubienie poszczególnych wierszy. Kod mojego przykładowego datagrid-a zawiera kolumnę „Imię i nazwisko” łączącą dwie właściwości z klasy PersonVo za pomocą funkcji anonimowej, email oraz sformatowaną datę urodzenia.

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
				 xmlns:s="library://ns.adobe.com/flex/spark"
				 xmlns:mx="library://ns.adobe.com/flex/mx"
				 itemRenderer="{new ClassFactory(DGItemRenderer)}">
	<mx:columns>
		<!--This simple anonymous function in DataGridColumn concatenates two string: name and surname from value object-->
		<mx:DataGridColumn headerText="Imię i Nazwisko"
		labelFunction="{function(personVo:PersonVo,
									dgColumn:DataGridColumn):String
						{return personVo.name + ' ' + personVo.surname; }}"
						   width="200"/>
		<mx:DataGridColumn headerText="Email"
						   dataField="email"
						   width="250"/>
		<mx:DataGridColumn headerText="Data urodzenia"
						   dataField="dateStr"
						   width="120"/>
	</mx:columns>
	<fx:Script>
		<![CDATA[
			import dataGridItermRenderers.DGItemRenderer;
			import vo.PersonVo;
		]]>
	</fx:Script>
</mx:DataGrid>

Najważniejsza część całej zabawy-jest klasa itemrenderera zawierająca przesłoniętą właściwość „data”. W jej wnętrzu sprawdzany jest typ dostarczonej wartości ponieważ podczas tworzenia DataGrida przekazywane są do niej obiekty poszczególnych kolumn, którymi nie byłem zainteresowany. W dalszej kolejności właściwość wykonuję się przy wypełnieniu każdej komórki poszczególnych kolumn co jak widać daję możliwość sterowania wyglądem ich zawartości poprzez ręczne ustawienie styli.

public class DGItemRenderer extends DataGridItemRenderer
{
		public function DGItemRenderer()
		{
			super();
		}

		/**
		 * Property is execute on each column in each row
		 *
		 * @param PersonVo|Object value Object using in item renderer
		 */
		override public function set data(value:Object):void
		{
			if (value is PersonVo && value)
			{
				//In this property i check if PersonVo is special
				//When isSpecial == true i bold cell in this column
				var boldValue:String = (PersonVo)(value).isSpecial == true ? "bold" : "normal";
				setStyle("fontWeight", boldValue);
			}
			super.data = value;
		}
}

Wynikiem tych zabiegów są oczekiwane pogrubione zawartości wierszy w DataGridzie. link