DataGrid z pogrubioną zawartością wierszy
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