Jednakże jak się okazuje, jego autor (Rafał Szemraj) przejął pełną kontrolę (=)) nad projektem Fabrication.
Od tej pory Fabrication będzie wchłaniało funkcjonalności Tequili, dlatego też praca nad Tequilą została zawieszona (komentarz Rafała w poście).

Dodam tylko, że zauważyłem, że 2 dni temu została opublikowana najnowsza wersja Fabrication 0.7.1.

Przydatke linki:
http://code.google.com/p/fabrication/ – oficjalna stronka Fabrication
http://blog.szemraj.eu – blog Rafała

Dlatego postanowiłem znaleźć jakiś sposób integracji, który będzie szybki i dobry :). Przeglądając różne stronki o Flexie, odnalazłem prezentację (niestety nie pamiętam adresu), na której ładnie przedstawiony był fakt, że AMF to idealny protokół komunikacji z Flexem. Nic dziwnego, w końcu to twór Adobe.

Ok, protokół mamy. Teraz wypada wybrać implementację. Jako, że jestem użytkownikiem frameworka Symfony, to właśnie z nim chciałbym zintegrować Flexa.

Wiem, że istnieje plugin do symfony sfAmfPlugin (strona głowna). Nie będe się o nim rozpisywał. Jak ktoś jest ciekawy, to niech śmiga na jego stronę główną. Powiem tylko, że jest on oparty na bibliotece SabreAMF, której szczerze mówiąc nie znam. Wiem natomiast, że biblioteka Zend’a jest dobra do wsyztskiego :), dlatego właśnie z niej korzystam.

Poniżej przedstawiam opis jak zrobić szybko HelloWorld we Flexie, z wykorzystaniem Symfony i AMF oraz bibliotek Zenda. We wszystkich HelloWorld’ach w necie brakowało mi tego połączenia.

Zaczynamy

Na początku trzeba postawić zwykły projekt Symfony i dodać jakąś aplikację – ja dodałem aplikacje o nazwie frontend. Zakładam, że ludzie czytający wpis o symfony wiedzą jak to zrobić :)

Następnie należy zintegrować odpowiednie biblioteki Zenda. Integracja została opisana we wpisie Integracja Symfony + Zend.

Oto lista plików jakie należy umieścić w katalogu /lib/vendor/Zend:

• Amf/
• Loader/
• Server/
• Auth.php
• Loader.php
• Exception.php

Następnie tworzymy moduł amf, w którym będzie nasz Zend_Amf_Endpoint, czyli miejsce do którego będziemy się odwoływać z Flexa.

Ja umieściłem swój endpoint w akcji server (tak dla niepoznaki ;)). Oto kod akcji:

public function executeServer(sfWebRequest $request) {

$server = new Zend_Amf_Server();

$server->setClass('helloService');

$this->renderText($server->handle());
return sfView::NONE;
}

Nic innego jak stworzenie instancji serwera, przypisanie mu klas, które są service’ami oraz wyświetlenie wyniku metody handle(). Istotne jest też wyłączenie renderowania template’u.

Services

Jak pisałem w opisie akcji, serwer Zend_Amf_Server składa się z klas (lub funkcji). Najwygodniejszym sposobem jest stworzenie oddzielnych klas, które będziemy traktować jako przestrzenie nazw. Poniżej nasza klasa dla helloWorld.

class helloService {

/**
* Method returns hello mesage
*
* @return string
*/
public function helloWorld() {
return 'hello world';
}

}

Jak widać service hello posiada tylko jedną metodę bezparametrową helloWorld(), która zwraca string. AMF to potęga bo mapuje typy :), więc we Flexie nie trzeba będzie parsować odpowiedzi, jak by to miało miejsce w przypadku np. XML czy JSON. Należy jednak określic w PHPDoc (nad metodą) wszystkie parametry oraz zwracany typ. Dobrą praktyką jest też krótkie opisanie działania metody.

Flex

Przed rozpoczęciem implementowania trzeba dodać do projektu (do folderu src) plik services-config.xml, który jest konfiguracją połączenie Flexa z endpointem. Założmy, że nasz serwer amf znajduje się pod adresem:

Wtedy przykładowy plik services-config.xml wygląda następująco

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="amfphp-flashremoting-service"

messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="amfphp">
<channels>
<channel ref="my-amfphp"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>

<channels>
<channel-definition id="my-amfphp"  class="mx.messaging.channels.AMFChannel">
<endpoint  uri="http://localhost/helloServer/amf/server"  class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>

Nastepnie należy wejść do ustawień projektu. Przejść do „Flex compiler” i w polu „Additonal compiler arguments” dopisać:

Komunikacja

Z poziomu flexa do komunikacji będziemy wykorzystywać klasę RemoteObject. Poniżej przedstawiam przykład klasy fasady do komunikacji z serwerem PHP oraz jej wykorzystanie w przykładowej aplikacji. Fasada posiada obiekt RemoteObject, do którego mamy dostęp zabroniony. Wszelkie zapytania do serwera AMF będą przechodziły przez nasza fasadę.

public class ServerFacade {

private var helloService:RemoteObject = null;

public function ServerFacade() {
//połączenie z endpointem oznaczonym w pliku services-config.xml
helloService = new RemoteObject("amfphp");
helloService.showBusyCursor = true;
//przypisanie nazwy klasy do źródła
helloService.source = "helloService";
//określenie co ma sie dziać jak wystąpi błąd
helloService.addEventListener(FaultEvent.FAULT, globalFault);

//przypisanie Listenerów, które są wywoływaja jak zostanie zwrócona wartość z serwera
addApiListeners();
}

//METHODS
public function hello_helloWorld():void {
helloService.helloWorld();
}

//HELLO_WORLD
public var hello_helloWorld_resultHandler:Function = null;
private function hello_helloWorld_internalResultHandler(event:ResultEvent):void {
if (hello_helloWorld_resultHandler != null) {
hello_helloWorld_resultHandler(event);
}
}

//PRIVATE

private function addApiListeners():void {
helloService.helloWorld.addEventListener(ResultEvent.RESULT, hello_helloWorld_internalResultHandler);
}

private function globalFault(event:FaultEvent):void {
Alert.show(event.fault.message, "Fault: " + event.type);
}

}

Jak widać funkcja helloWorld została połączona z dwoma resultHandlerami. Jest to mój sposób implementacji asynchronicznych zapytań do serwera. Oczywiście asynchroniczność powoduje, że nie otrzymujemu wyniku od razu, tylko musimy dodać Listener’a, który obsłuży zwracany wynik (w bliżej nieokreślonym czasie).

Wewnętrzny handler (internalHandler) nasłuchuje na zdarzenie. Gdy je przechwyci:

1. Wykonuje wewnętrzne akcję (przykład podam poniżej)
2. Wywołuje funkcję zewnętrzną ‘hello_helloWorld_resultHandler‘, jeśli została zdefiniowana przez użytkownika.

Przykład zastosowania fasady jest następujący:

var sF:ServerFacade = new ServerFacade();
sF.hello_helloWorld_resultHandler = function(event:ResultEvent) {
Alert.show(event.result);
}
sF.hello_helloWorld();

Przed wywołaniem funkcji określamy, co ma zostać wykonane z jej wynikiem – wyświetlenie w boxie Alert. Następnie wywołujemy funkcję.

Przykładem wykorzystania wewnętrznych handlerów jest zachowanie stanu sesji uzytkownika. Na przykład w wewnętrznym handlerze akcji logowania można zapisać rolę użytkownika i wynik innych metod odpowiednio modyfikować w zależności od roli zalogowanego użytkownika.

Niestety nie mam tego przykładu jeszcze popartego kodem, ale jak tylko będę mógł pokazać kod, który wykorzystuje taki mechanizm, to umieszczę go na blogu.

Ciekawym rozwiązaniem jest dołączenie do frameworka konsoli napisanej w AIR, która pomaga debugować program.

Po więcej informacji odsyłam na stronę autora.

However, when working with services (PHP in my case) it is risky to load all data  to the DataGrid. It may lead to an application crash, ie. when we work on 1000′s of items.

Therefore I decided to create the component that handles pagination itself – it is similar to ExtJS’ data grid (however much simpler :) ).

The example is below… (You can view source by right-clicking on application)

This components dispatches 2 events (for now):

• when page is changes
• when data is sorted

I also added DATA_FILTER event, but I do not have idea how to include the filtration form in the component GUI.

To download source click here.

Any comments would be welcomed.

1. Użycie wydarzenia creationComplete

Polega na ustawieniu w kontruktorze Listenera, żeby nasłuchiwał na zdarzenie creationComplete. W metodzie obsługującej zdarzenie zmieniamy odpowiednio width i height komponentu.

public class FirstBox extends Box {
	public function FirstBox() {
		super();
		this.addEventListener(FlexEvent.CREATION_COMPLETE, creationComplete);
	}

	protected function creationComplete(ev:FlexEvent):void {
		this.width = 150;
		this.height = 50;
	}
}

2. Nadpisanie metody measure
Drugie rozwiązanie polega na nadpisaniu metody measure i ustawieniu w niej wartosci pol measuredWidth i measuredHeight, które odpowiadają szerokości i wysokości.

public class SecondBox extends Box {

	public function SecondBox() {
		super();
	}

	protected override function measure():void {
		super.measure();
		measuredWidth = 150;
		measuredHeight = 50;
	}
}

Poniżej przedstawiam przykład, który prezentuje problem i rozwiązania.

O ile oba rozwiązania dają ten sam efekt, to jednak rozwiązanie drugie jest szybsze, prostsze, bardziej logiczne i w ogóle lepsze :) Dlaczego?

Logicznie rzecz biorąc, wymiary komponentu nie powinny być uzależnione od żadnego zewnętrznego czynnika (zgodnie z obiektowym podejściem do programowania). W pierwszym przypadku ta zasada nie jest spełniona, gdyż komponent czeka na zdarzenie creationComplete, które jest sygnalizowane przez aplikację.

W drugim zadaniu nie wykorzystujemy żadnych mechanizmów (=zdarzeń), tylko nadpisujemy jedną metodę. Oczywiście jest to prostsze rozwiązanie :) Poza tym jest całkowicie uniezależnione od innych komponentów, czy ogólnie aplikacji.

Na początek spójrzmy jak będzie wyglądał nasz preloader.

Aby osiągnąć taki cel musimy:

1. Stworzyć klasę która dziedziczy po DownloadProgressBar lub implementuje IPreloaderDisplay
2. Zaimplementować w niej odpowiednie metody
3. Dodać nasz preloader do aplikacji

Najłatwiej będzie zacząć od końca. Aby dodać nasz preloader do aplikacji, należy go wpisać w jej tagu.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" preloader="my.loader.MyPreloader">

Jak widać mój preloader znajduje się w pakiecie my.loader i nazywa się MyPreloader. W moim przypadku dziedziczy on po klasie Sprite, tak żebym mógł po nim rysować i implementuje interfejs IPreloaderDisplay.

package my.loader {
  public class MyPreloader extends Sprite implements IPreloaderDisplay {
  }
}

Gdy tworzymy klasę dziedziczącą po Sprite i implementującą IPreloaderDisplay, to otrzymujemy pakiet wygenerowanych funkcji. Wiekszość z nich możemy usunąć i zostawić:

        private var _backgroundColor	: uint = 0x000000;
        private var _stageHeight		: Number = 1;
        private var _stageWidth			: Number = 1;

        public function set backgroundAlpha(alpha:Number):void{}
        public function get backgroundAlpha():Number { return 1; }

        public function set backgroundColor(color:uint):void { _backgroundColor = color; }
        public function get backgroundColor():uint { return _backgroundColor; }

        public function set backgroundImage(image:Object):void {}
        public function get backgroundImage():Object { return null; }

        public function set backgroundSize(size:String):void {}
        public function get backgroundSize():String { return "auto"; }

        public function set stageHeight(height:Number):void { _stageHeight = height; }
        public function get stageHeight():Number { return _stageHeight; }

        public function set stageWidth(width:Number):void { _stageWidth = width; }
        public function get stageWidth():Number { return _stageWidth; }

Dodatkowo musimy zmodyfikowac metody set preloader oraz initialize. W metodzie set preloader musimy ustawić eventy dla preloadera.

    private var _preloader			: Sprite;

    public function set preloader(value:Sprite):void {
            _preloader = value;

            value.addEventListener(ProgressEvent.PROGRESS, progressHandler);
            value.addEventListener(Event.COMPLETE, completeHandler);

            value.addEventListener(FlexEvent.INIT_PROGRESS, initProgressHandler);
            value.addEventListener(FlexEvent.INIT_COMPLETE, initCompleteHandler);
        }

W metodzie initialize wypełniam tło białym prostokątem, wczytuje plik loga oraz inicjuje Timer, który będzie wywoływany co 50ms, aby update’ować stan preloadera.

        public function initialize():void {
		//Wypełnienie tła
		graphics.beginFill( _backgroundColor, 1);
 		graphics.drawRect( 0, 0, stageWidth, stageHeight);
		graphics.endFill();

                loadingImage = new flash.display.Loader();
		loadingImage.contentLoaderInfo.addEventListener( Event.COMPLETE, loader_completeHandler); //metoda wywołana jak obrazek sie wczyta
		loadingImage.load(new URLRequest("../assets/logo.jpg")); // Scieżka do obrazka
        }

Po wczytaniu obrazka umieszczam go na środku preloadera, zaś label z wartością procentową (początkowo równą 0) umieszczam zaraz pod nim.

        private var _timer 				: Timer;

        private function loader_completeHandler(event:Event):void
        {
            addChild(loadingImage);
            loadingImage.x = stage.fullScreenWidth / 2 - loadingImage.width / 2;
            loadingImage.y = stage.fullScreenHeight / 3 - loadingImage.height / 2;

	    loadingText = new TextField();
	    loadingText.width = 20;
	    loadingText.height = 20;
	    loadingText.autoSize = TextFieldAutoSize.CENTER;
	    loadingText.text = "0";
	    loadingText.textColor = 0x0000ff;
    	    loadingText.x = stage.fullScreenWidth / 2 - loadingText.width / 2;
	    loadingText.y = loadingImage.y + loadingImage.height + 20;
	    addChild(loadingText);

            _timer = new Timer(50);
            _timer.addEventListener(TimerEvent.TIMER, timerHandler);
            _timer.start();
        }

Timer, który zainicjowaliśmy w metodzie initialize, ma za zadanie odświeżenie labela oraz obrysowanie go paskami widocznymi na przykładzie, do którego link podałem powyżej.

        private var _fractionLoaded 	: Number = 0;
        private var _IsInitComplete		: Boolean = false;

        private function timerHandler(event:Event):void {
            if ( _IsInitComplete ) {
                _timer.stop();
                _timer.removeEventListener(TimerEvent.TIMER,timerHandler);

		dispatchEvent(new Event(Event.COMPLETE));
            }
            else {
            	loadingText.text = Math.ceil(_fractionLoaded*100).toString();
            	loadingText.x = stage.fullScreenWidth / 2 - loadingText.width / 2;

            	// Tutaj następuje przerysowanie pasków otaczających label, kod prezentuje na końcu wpisu
                draw();
            }
        }

Preloader dostarcza nam 4 zdarzenia, które wywołuje w odpowiednim czasie. Są to:

1. progressHandler – wywoływany za każdym razem, gdy przeglądarka ściągnie kolejną część aplikacji
2. completeHandler – wywoływany, gdy aplikacja skończy się ściągać
3. initProgressHandler – wywoływana podczas postępu inicjalizacji
4. initCompleteHandler – wywoływana, gdy inicjalizacja się zakończy

Naszym zadaniem jest implementacja metod progressHandler oraz initCompleteHandler. W progressHandler updatujemy pola odpowiedzialne za procent wczytania aplikacji:

        private var _bytesLoaded 		: uint = 0;
        private var _bytesExpected 		: uint = 1;

       private function progressHandler(event:ProgressEvent):void {
            _bytesLoaded = event.bytesLoaded;
            _bytesExpected = event.bytesTotal;
            _fractionLoaded = Number(_bytesLoaded) / Number(_bytesExpected);
        }

W metodzie initCompleteHandler ustawiamy pole odpowiedzialne za zakończenie działania preloadera na true. Dzięki temu nasz Timer, może zakończyć działanie. Robi to poprzez wywołanie zdarzenia Event.COMPLETE, tak jak to widać w metodzie timerHandler.

        private function initCompleteHandler(event:Event):void {
        	_IsInitComplete = true;
        }

Teraz zaprezentuje metody, które używam to obrysowania labela paskami, które tworzą koło. Niestety nie można we Flexie rysować częściowych kół (coś a’la pizza bez kawałka). Mój sposób polega na tym, żeby rysować od trójkąty z jednym punktem wspólnym w środku, zaś kolejnymi parami punktów dookoła labela.

        private function draw():void {
            graphics.clear();

            fillAct(graphics, stage.fullScreenWidth / 2, loadingText.y + loadingText.height/2, _fractionLoaded*360 , 25);
            graphics.beginFill( 0xffffff , 1);
	    graphics.drawCircle(stage.fullScreenWidth / 2, loadingText.y + loadingText.height/2, 20);
            graphics.endFill();
        }

        private function fillAct(g:Graphics, x:Number, y:Number, angle:Number, radius:Number):void {
        	var trCounts:Number = Math.ceil(angle / 5);
        	var radFrom:Number, radTo:Number;

        	g.beginFill(0x000000);
        	for (var i:int = 0; i < trCounts; i+=2) {
        		radFrom = -i*5*Math.PI / 180;
        		radTo = (-i*5 + 5)*Math.PI / 180;

        		g.moveTo(x,y);
        		g.lineTo(x + Math.sin(radFrom)*radius, y + Math.cos(radFrom)*radius);
        		g.lineTo(x + Math.sin(radTo)*radius, y + Math.cos(radTo)*radius);
        		g.lineTo(x,y);
        	}
        	g.endFill();
        }

Ten kod po złączeniu daje efekt zaprezentowany w przykładzie :) Mam nadzieje, że wszystko jest zrozumiałe. W razie pytań, proszę komentować :)

W celu zaprezentowania mechanizmu komunikacji na linii Flex – PHP za pomocą XMLa posłużymy się prostą aplikacją, która będzie posiadała dwa pola tekstowe i jedną listę oraz przycisk wysyłający dane z tych komponentów do skryptu PHP.

Na początek stworzymy graficzny interfejs naszej apliakcji.

Będziemy potrzebować usługi HTTP przesyłającej dane do skryptu PHP. Usługa HTTP będzie mieć dwa zdarzenia “result” i “fault”, z których każde będzie wyświetlać alert boxa odpowiednio z rezultatem działania skryptu i informacją o niepowodzeniu w wykonaniu usługi.

Dalej zgodnie z założeniami dodamy dwa pola tekstowe.

Edytowalna listę wypełnioną przykładowymi danymi. DataProvider będzie znajdował się w zewnętrznym pliku ActionScript.

Oraz przycisk wysyłający dane do pliku PHP.

Na koniec jeszcze musimy dodać referencję do pliku z kodem ActionScript i pierwszą część pracy mamy za sobą.

A tak wygląda to w całości.

Drugi etap na naszej drodze to zbudowanie kodu ActionScript, który to wszystko obsłuży.

Tworzymy DataProvider z przykładowymi danymi dla naszej listy.

Definiujemy funkcję wysyłającą dane do skryptu PHP. Na początku deklarujemy zmienną, która będzie przechowywać nasz kod XML i ustawiamy jej węzeł główny na .

Wartość pierwszego pola tekstowego posłuży nam do ustawienia atrybutu o nazwie textInput1 dla węzła

Wartość drugiego pola tekstowego użyjemy do nadania wartości nowemu węzłowi dodanemu do naszej struktury XML za pomocą operatora kropki.

W celu połączenia danych z listy w ciąg XML użyjemy metody encodeValue klasy SimpleXMLEncoder. Metoda encodeValue przyjmuje trzy parametry: obiekt do serializacji, nazwę węzła w którym umieści zserializowany obiekt oraz zmienną typu XMLDocument, w której zostanie zapisany wynikowy kod XML. Nowy węzeł do naszej struktury XML dodamy za pomocą metody appendChild.

Na koniec dodajemy nasz kod XML do zmiennej typu Object, która zostanie przekazana do skryptu PHP.

Całość prezentuje się następująco:

Pozostaje nam jeszcze tylko napisać prosty skrypt PHP, który przetworzy i wyświetli otrzymany kod XML. Ponieważ klasa XMLReader jest opisana w manualu PHP dlatego daruję sobie rozkład poniżeszego skryptu na czynniki pierwsze i zamiast tego odeślę do wspomnianego źródła: XMLReader PHP Manual