Kilka miesięcy temu w swojej pracy zacząłem wykorzystywać nowy framework Tequila, główny pomysłodawca oparł jego działanie na bazie już istniejących rozwiązań PureMVC oraz Fabrication. Twórca Fabrication zaprzestał pracy nad jego rozwojem – Rafałowi udało się z nim skontaktować i obecnie to on jest głównym programistą czuwającym nad rozbudową tego popularnego frameworka. Jak się można było spodziewać wszelkie dobrodziejstawa, które stworzył w Tequil-i zostały całkowicie przeniesione do Fabrication (lista dobrodziejstw tu) :). Od samego początku śledziłem oraz starałem się wykorzystywać przeniesione z Tequili do Fabrication usprawnienia. Zaowocowało to tym że Rafał postanowił dodać mnie do projektu Fabrication. :)

Za co mu bardzo dziękuję! Mam nadzieję, że uda mi się wnieść coś dobrego do tworzonych przez niego rozwiązań.

Załadowana ikona w tray-u reprezentowana jest przez klasę SystemTrayIcon, która udostępnia szereg zdarzeń, niestety wśród nich brakuje obsługi podwójnego kliknięcia. Do opisywanej sytuacji pasuję przysłowie "Jak się nie ma co się lubi, to się lubi co się ma"
- innymi słowy postanowiłem wykorzystać to co mam dostępne czyli pojedyncze kliknięcie. ;)

Klasa zdarzenia "DoubleClick" dla mojej ikonki:

public class ExtendedSystemTrayIconEvent extends ScreenMouseEvent
{
	 public static const DOUBLE_CLICK:String = "doubleClick";

	 public function ExtendedSystemTrayIconEvent(type:String, bubbles:Boolean=false,
						   cancelable:Boolean=false, screenX:Number=undefined,
						   screenY:Number=undefined, ctrlKey:Boolean=false,
					    altKey:Boolean=false, shiftKey:Boolean=false,
						   buttonDown:Boolean=false, commandKey:Boolean=false,
						   controlKey:Boolean=false)
	 {
		   super(type, bubbles, cancelable, screenX, screenY,
		   ctrlKey, altKey, shiftKey, buttonDown, commandKey, controlKey);
	 }
}

Klasa dostarczająca obsługę zdarzenia:

[Event(name="doubleClick", type="ExtendedSystemTrayIconEvent"]
/**
*SystemTrayIcon DoubleClick
*This class provide double click on tray icon
*
* @author Piotr Zarzycki
*
*/
public class SystemTrayIconWraper extends EventDispatcher
{
   private var _systemTrayIcon:SystemTrayIcon;
   private var _clickCounter:int = 0;
   private var _timer:Timer;

   public function SystemTrayIconWraper(systemTrayIcon:SystemTrayIcon)
   {
		   _systemTrayIcon = systemTrayIcon;
		   _timer = new Timer(1000, 1);
		   _timer.addEventListener(TimerEvent.TIMER_COMPLETE,
                            onTimeComplete);

		   _systemTrayIcon.addEventListener(ScreenMouseEvent.CLICK,
                            onClickTrayIcon);
   }

   public function onClickTrayIcon(event:ScreenMouseEvent):void
   {
		   if (!_timer.running)
		   {
			   _timer.start();
		   }
		   _clickCounter++;
		   if (_clickCounter > 1)
		   {
			      _systemTrayIcon.dispatchEvent(
              new ExtendedSystemTrayIconEvent("doubleClick",
                     event.bubbles, event.cancelable, event.screenX,
                     event.screenY, event.ctrlKey, event.altKey,
                     event.shiftKey, event.buttonDown, event.commandKey,
                     event.controlKey));

			      _clickCounter = 0;
		   }
   }

   override public function addEventListener(type:String, listener:Function,
                                   useCapture:Boolean=false, priority:int=0,
                                   useWeakReference:Boolean=false):void
   {
		      _systemTrayIcon.addEventListener(type, listener, useCapture, priority,
                                          useWeakReference);
   }

   private function onTimeComplete(event:TimerEvent):void
   {
		   _clickCounter = 0;
		   _timer.reset();
   }
}

Klasa "SystemTrayIconWraper" dziedziczy po klasie "EventDispatcher", obsługuję zdarzenie "CLICK" dla obiektu SystemTrayIcon dostarczonego w jej konstruktorze oraz inicjalizuję klasę "Timer" wartością 1 sekundy. Dodatkowo w jej wnętrzu tworzę zmienną przechowującą ilość kliknięć na ikonkę tray-a – wartość większa niż jeden oznacza podwójny klik. Przy pierwszy klik-u zostaje uruchomiony timer i zwiększony licznik kliknięć. Jeżeli w ciągu sekundy nie nastąpi kolejne kliknięcie licznik i timer są resetowane.

Na koniec pozostaje pytanie – Dlaczego zabrakło obsługi właśnie tego zdarzenia w klasie SystemTrayIcon?

EDIT (08-08-2010): Do powyższego rozwiązania wkradł się niewielki błąd – jest to dość późna edycja, ale wcześniej brak chęci i czasu na blogowe poczynania. W metodzie „onClickTrayIcon” wywołanie event-a „doubleClick” odbywa się na instancji obiektu „SystemTrayIcon”. Przesłonięta została także metoda „addEventListener”.

/**
 * Test function
 *
 * @param string $name
 * @param string $surname
 * @return array
 */
 public function testFunction($name, $surname)
 {
      return $name.' '.$surname;
 }

Po całym rytuale komentowania doszedłem do wniosku, że nie będzie mi potrzebny jeden z parametrów. Radośnie usunąłem go, po czym przystąpiłem do sprawdzenia działania funkcji w ZAmfBrowser otrzymałem błąd o sygnaturze:

PHP Fatal error: Uncaught exception ‘Zend_Server_Reflection_Exception’ with message ‘Variable number of arguments is not supported for services (except optional parameters). Number of function arguments must correspond to actual number of arguments described in a docblock.’

Dość długo zastanawiałem się, co jest nie tak, a to, dlatego, że w pośpiechu zwróciłem uwagę tylko na pierwsze zdanie – drugie z kolei mówi mi o wiele więcej.

Ilość argumentów funkcji musi odpowiadać ilości argumentów opisanych
w docblock-u.

Jednak na to wszystko zwrócił mi uwagę kolega z pracy, który zerknął na mój kod. Morał z całego "zajścia":

• Analizuj błędy w całości, bo może ich rozwiązanie kryje się na samym końcu opisu otrzymanego wyjątku
• Czasami warto aby ktoś spojrzał na Twój kod "świeżym" okiem, to może przynieść nie tylko rozwiązanie, ale niejednokrotnie poprawę funkcjonalności

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.";
}

Chyba każdy programista zetknął się z problemem paginacji czy to na tworzonej przez siebie stronie internetowej, czy też(jak w moim przypadku) w aplikacji flex-owej.
W rozwiązaniach tworzonych w pracy zazwyczaj duże ilości danych prezentowałem za pomocą kontrolki DataGrid w połączeniu z paginatorem udostępnionym pod adresem – link. Jednak wciąż rosnąca ich ilość szybko sprawiła, że wygrzebana w czeluściach internetu kontrolka przestała spełniać oczekiwania. Postanowiłem zmierzyć się z paginacją i stworzyć samodzielnie komponent, który znacznie ułatwił by, a w szczególności przyśpieszył poruszanie się po tysiącach stron udostępnianych danych. Właściwie żeby być szczerym do rozpoczęcia pracy nad kontrolką zachęcił mnie Redliquid, a jej obecny wygląd-funkcjonalność jest w 100% jego pomysłem. :) Zaprezentowany flex-paginator jest zbudowany jeszcze na bazie kontrolek udostępnianych we Flex-ie 3 – planuję jednak jego dalszy rozwój, a więc poprawę wszelkich znalezionych błędów ;), a przy odrobinie większej ilości wolnego czasu przepisanie całości z wykorzystaniem dobrodziejstw Flex-a 4.

Diabeł tkwi w szczegółach, a więc poniżej prezentuję opis kilku najważniejszych opcji FlexPaginator-a.

Do pliku swc paginatora niezbędne jest dołączenie pliku css o nazwie StyleButtons.css, który odpowiada za wygląd wszystkich przycisków. Najważniejsze właściwości paginatora, które powinny zostać ustawione
w kodzie ActionScript lub po stronie mxml-a to:

• totaItems – ilość wszystkich elementów
• itemsPerPage – ilość elementów wyświetlanych na stronie
• pageToDisplay – ilość wyświetlonych przycisków z numerami stron – ustawienie parzystej liczby wyświetlanych stron, skutkuję zamianę jej na nieparzystą ich ilość (takie „zachowanie” wynika z działania paginatora)

Opcjonalna jest natomiast właściwość:

• selectedPage – numer zaznaczonej strony, po utworzeniu kontrolki domyślnie zostaje zanaczona środkowa strona/przycisk spośród aktualnie wyświetlonych.

Moja kontrolka paginacji zawiera przyciski umożliwiające odpowiednio:

• skok o jedną stronę do przodu lub do tyłu
• skok o wybraną ilość stron – wartości w wyświetlonym menu są wygenerowane automatycznie, ta para przycisków pojawia się tylko w przypadku gdy całkowita ilość stron przekracza 50.
• skok na koniec i początek.

Dodatkowo obsługa zdarzenia „selectedPageChanged” daje możliwość odczytu aktualnie zaznaczonej strony. Wygenerowany paginator wyświetla nieparzystą liczbę stron,
a aktualnie zanaczony numer strony jest podkreślony

Przykładowy kod z zaznaczoną stroną nr 3 oraz plik css odpowiadający za poniższy wygląd paginatora pod linkiem

Wszelkiego rodzaju błędy, sugestię co mogę poprawić lub co zrobiłem tragicznie proszę zgłaszać na code-google (gdzie udostępnie kod projektu oraz plik swc – zakładka Download) lub w komentarzach pod tym czy też kolejnymi wpisami dotyczącymi FlexPaginator-a. ;)

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

Rozważmy następujące kody dwóch przykładowych klas:

class SampleClass
{
	public function __construct()
	{

	}

	/**
	 * Przykladowa funkcja
	 *
	 * @param String $str Obiekt string
	 * @param array $arr Obiekt array
	 * @param String|array $obj Obiekt mieszany
	 *
	 * @return array
	 */
	public function myFunction($str, $arr, $obj)
	{
		return array('str' => $str, 'arr' => $arr, 'obj' => $obj);
	}
}

class MyClass
{
	/**
	 * Przykladowa klasa
	 *
	 * @var SampleClass
	 */
	private $_sampleClass;

	public function __construct()
	{
		$this->_sampleClass = new SampleClass();
		$this->_sampleClass->myFunction('str', array('arr' => 'dd'), 'str2');
	}
}

W zasadzie nic nadzwyczajnego. W jednej klasie przykładowa metoda, w drugiej natomiast utworzenie instancji klasy oraz wywołanie metody „myFunction”. Wszystko opatrzone w odpowiednie komentarze.

Dwa powody dla których nie zrezygnuję ze starego poczciwego eclipse 3.3:

Powód I:

Podczas korzystania z utworzonej wcześniej instancji klasy wywołanie metody sprowadza się do wpisania strzałki tuż po nazwie obiektu. Taka operacja skutkuję piękną chmurką prezentującą listę metod czy też zmiennych danej klasy.

Eclipse w wersji 3.5 „wypluwa” owe podpowiedzi niezwykle wolno Od momentu pojawienia się strzałki do chwili „wyplucia” listy metod i zmiennych mija katastrofalnie dużo czasu!!!! Osobiście piszę bardzo szybko na klawiaturze przez co jakiekolwiek opóźnienie w pojawieniu się podpowiedzi jest niezwykle irytujące. Żadnych efektów poprawiających powyższy stan rzeczy nie przynosi ustawienie opóźnienia autoaktywacji na 1 czy też 0 milisekund w opcjach znajdujących się: Window->Preferences->PHP->Editor-CodeAssist.

Całkowicie inaczej wygląda to w Eclipse 3.3. Tam niemal każde „strzałkowe” odwołanie powoduję natychmiastową podpowiedz.

Powód II:

Poniżej przedstawiam szereg screenów ukazujących proces wywołania metody „myFunction” z klasy „SampleClass” w eclipse 3.3 oraz 3.5.

Faktem jest, że język php nie jest językiem silnie typowanym, więc teoretycznie każda przekazywana wartość do metody „myFunction” może być dowolnego typu. O ile w obu omawianych przeze mnie wersjach eclipse, chmurki zawierające opis metody i parametrów wyglądają identycznie o tyle już sam proces uzupełniania wartościami argumentów funkcji jest nieco inny. Eclipse 3.3 także na tym etapie sugeruję jakiego typu powinny być wartości parametrów przekazywane do metody. Niestety zabrakło tego w nowszym wydaniu i od dawna nic się w tej kwestii nie zmienia.

Być może eclipse 3.5 gdzieś w swoim gąszczu ustawień konfiguracyjnych zawiera opcję, które pozwalają zrównać tą wersję w wygodzie użytkowania do eclipse 3.3 niestety jak dotąd nie było mi dane ich odnaleźć. Ubolewam nad tym faktem ponieważ niektóre najnowsze wersję wykorzystywanych przeze mnie eclipsowych pluginów odmawiają już współpracy z wersją 3.3.

Szybkość oraz wygoda jaką ze sobą niosą powyższe opcję sprawia, że wciąż kurczowo trzymam się eclipse 3.3.

Okazuję się, że problem stanowiła tutaj nazwa folderu w którym umieściłem eclipse – jej zmiana przyniosła porządany efekt. Trywialne, ale dłuższą chwilę zajęło mi dotarcie do rozwiązania. :)

Utworzyłem tabelę „person” której strukturę wraz z przykładowymi danymi prezentuję poniżej:

Oczekiwana postać pliku to – linia pierwsza reprezentująca nazwy kolumn, kolejne linie zawierające pobrane dane jako separator zostanie użytyh przecinek.

Zapytanie formatujące dane:

SELECT CONCAT_WS(',', name, surname, age) AS 'Imię, Nazwisko, Wiek' FROM person

Funkcja „Concat_Ws” jako jeden z argumentów przyjmuje separator którym oddzieli zwracane wyniki. Nazwa kolumny w zapytaniu jest odpowiednikiem pierwszego wiersza
z pliku csv.

Wynik zapytania:

Wewnątrz skryptu tworzącego csv wystarczy już tylko przeiterować po otrzymanych wynikach zapisując je do oczekiwanego pliku. :)

public static function dateCompare(a:Date, b:Date):int
{
				if (a == null && b == null)
					return 0;

				if (a == null)
					return 1;

				if (b == null)
					return -1;

				var na:Number = a.getTime();
				var nb:Number = b.getTime();

				if (na < nb)
					return -1;

				if (na > nb)
					return 1;

				return 0;
}

Jam można zauwazyć wewnątrz metody daty porównywane są na podstawie zwróconej ilości milisekund od roku 1970 metodą getTime. Potrzebowałem jednak czegoś bardziej specyficznego, mianowicie chciałem porównać daty pomijając przy tym czas (godziny, minuty itd.). Utworzyłem w tym celu nową metodę w której trzeci parametr określa taką możliwość.

public function compareDate(a:Date, b:Date, compareWithTime:Boolean=false):int
{
				var aa:Date;
				var bb:Date;

				if (a == null && b == null)
				{
						return 0;
				}

				if (a == null)
				{
						return 1;
				}

				if (b == null)
				{
						return -1;
				}

				if (compareWithTime)
				{
						return ObjectUtil.dateCompare(a, b);
				}
				else
				{
						//porownanie bez czasu
						//tworze nowe obiekty dat wylaczajac przy tym czas
						aa = new Date(a.fullYear, a.getMonth(), a.getDate());
						bb = new Date(b.fullYear, b.getMonth(), b.getDate());

						return ObjectUtil.dateCompare(aa, bb);
				}
}

Przeprowadziłem test dla dwóch dat i otrzymałem następujące wyniki:

var dOne:Date = new Date(2010, 2, 20, 12, 12, 12);
var dTwo:Date = new Date(2010, 2, 20, 12, 11, 12);

var resultOne:int = compareDate(dOne, dTwo, false);
var resultTwo:int = compareDate(dOne, dTwo, true);

//resultOne = 0; dOne = dTwo
//resultTwo = 1; dOne > dTwo