Flex loves Java

Przygotowuje prezentację możliwości Flex i AIR dla osób z mojej firmy (w ramach nawracania niewiernych . Moje audytorium jest mocno Java-owe, więc przy okazji przygotowywania przykładów integracji Flex’a z Javą pomyślałam, że popełnię posta na temat BlazeDS.

BlazeDS

BlazeDS pozwala w łatwy sposób na połączenie aplikacji napisanej w Flex z backend-em napisanym w Javie. Wykorzystywane są tutaj tzw. remote objects. Pod tą tajemniczą nazwą kryje się po prostu zdalne wywoływanie obiektów napisanych w Javie z poziomu Flexa. Cała komunikacja odbywa się za pomocą bardzo wydajnego, binarnego protokołu AMF (już o nim pisałam w poście poświęconym integracji Flexa z PHP).

Dzięki nowym narzędziom wbudowanym w Flash Builder 4 połączenie z obiektem Javowym jest banalne i bardzo przypomina to co robiliśmy w przypadku PHP (znowu odsyłam do posta na temat PHP i Flex). Większym wyzwaniem, jak to zwykle w przypadku Javy, jest skonfigurowanie wszystkiego prawidłowo po stronie serwera. Zobaczmy zatem jak to zrobić krok po kroku.

Czego potrzebujemy

Zanim cokolwiek z czymkolwiek połączymy, potrzebujemy skonfigurować odpowiednio środowisko. Oto czego będziemy potrzebować:

• Java – jdk
• serwer Apache Tomcat
• BlazeDS – Nightly Builds

Instrukcje dotyczące konfiguracji środowiska dotyczą systemu Windows, bo na takowym pracuje.

Java

Ściągnij JDK np. ze stron Oracle. Rozpakuj archiwum i uruchom instalacje. Po zakończeniu instalacji Java powinna wylądować w folderze Program Files w katalogu Java. U mnie to jest katalog Program Files (x86)/Java, bo pracuje na 64-bitowym systemie.

Teraz musimy dodać zmienne systemowe. Wchodzimy do Panel sterowania -> System i zabezpieczenia -> System -> Zaawansowane ustawienia systemu -> Zmienne środowiskowe. Dodajemy nową zmienną o nazwie: JAVA_HOME. Jako wartość podajemy ścieżkę do naszej instalacji JDK np. C:\Program Files (x86)\Java\jdk1.6.0. Następnie na liście zmiennych znajdź zmienną Path i wybierz edytuj. Na samym końcu, po średniku dodaj ścieżkę do katalogu bin Twojej instalacji JDK np. C:\Program Files (x86)\Java\jdk1.6.0\bin. Zatwierdź zmiany i zamknij wszystkie okna.

Sprawdź poprawność instalacji – odpal konsolę i wpisz komendę java -version. Powinny się pokazać informacje dotyczące zainstalowanej wersji środowiska.

Tomcat

Ściągnij serwer, najlepiej ze strony Tomcat’a: http://tomcat.apache.org/download-60.cgi. Rozpakuj archiwum. Tomcat nie ma instalatora, więc po rozpakowaniu przenieś cały katalog w jakieś sensowne miejsce na dysku np. C:\tomcat-6.0. Dodaj do zmiennych systemowych nową zmienną CATALINA_HOME o wartości zawierającej ścieżkę do Tomcata np. C:\tomcat-6.0. Następnie uruchom konsolę, przejdź do katalogu bin Tomcata i wywołaj komendę startup.bat. Tomcat powinien wystartować. Jeżeli są jakieś błędy np. nie są ustawione prawidłowo zmienne środowiskowe, serwer dość składnie Cię o tym powiadomi. Jeżeli wszystko przebiegło pomyślnie, wejdź na stronę http://localhost:8080. Powinieneś zobaczyć stronę startową Tomcata.

BlazeDS

Ściągnij najnowszą, binarną wersję biblioteki (projekt BlazeDS) i rozpakuj archiwum.

Piszemy klasy w Javie

Założeniem posta nie jest nauka pisania w Javie, ale pokazanie w jaki sposób przebiega integracja Javy z Flexem. Zatem moje dwie klasy, które wykorzystam w przykładzie nie będą bardzo wyszukane. Pierwsza z nich to prosty bean, który reprezentuje obiekt piwa (jest dziś tak gorąco, że marzy mi się zimny browar – stąd wybór .

package pl.flexair;

public class Beer {

	private String name;
	private Float temperature;

	public String getName(){
		return name;
	}

	public void setName(String name){
		this.name = name;
	}

	public Float getTemperature(){
		return temperature;
	}

	public void setTemperature(Float temperature){
		this.temperature = temperature;
	}
}

Druga klasa tworzy i zwraca listę złożoną z 30-stu piw, o różnych nazwach i różnych temperaturach.

package pl.flexair;

import java.util.ArrayList;

public class BeerService {

	public ArrayList getBeerList(){

		List beerList = new ArrayList();

		for(int i = 0; i<30; i++){
			Beer beer = new Beer();
			beer.setName("piwo" + i);
			beer.setTemperature(new Float(i));
			beerList.add(beer);
		}
		return beerList;
	}

}

Skompilowane klasy, razem z hierarchią pakietów możesz znaleźć tutaj.

Mając już skompilowane klasy Javy, możemy zacząć prawdziwą zabawę. Na Tomcat znajdź katalog webapps. Utwórz w nim folder o nazwie swojej aplikacji. W moim przypadku to będzie testblazeds. Następnie w tym katalogu tworzę jeszcze katalog WEB-INF, a w nim z kolei katalog classes. Do utworzonego katalogu classes przenoszę moje skompilowane pliki javy (Beer.class, BeerService.class), razem z hierarchią pakietów.

Konfiguracja BlazeDS na Tomcat

BlazeDS pozwala zdalnie wywołać obiekty Javy, ale zanim będzie to możliwe musimy wystawić klasy Javy jako zdalne usługi BlazeDS. Skonfigurujmy zatem odpowiednio BlazeDS.

Odnajdź ściągniętą i rozpakowaną wersję binarną BlazeDS (jeżeli jeszcze tego nie zrobiłeś to najwyższa pora: projekt BlazeDS). W rozpakowanych folderze znajdziesz plik blazeds.war. Znajdziesz w nim wszystkie niezbędne archiwa jar oraz inne pliki konfiguracyjne, niezbędne do prawidłowego działania BlazeDS. Rozpakuj war-a (możesz skorzystać np. z WinZip).

Skopiuj wszystkie archiwa jar z blazeds\WEB-INF\lib do testblazeds\WEB-INF\lib (testblazeds zastępujesz ewentualnie nazwą swojej aplikacji).

Skopiuj zawartość katalogu blazeds\WEB-INF\flex do testblazeds\WEB-INF\flex - katalog istotny, bo to tutaj znajdują się pliki konfiguracyjne biblioteki, służące do skonfigurowania usług zdalnych, komunikacyjnych i proxy.

Na koniec skopiuj deskryptor wdrożenia (\blazeds\WEB-INF\web.xml) do testblazeds\WEB-INF.

Otwórz skopiowany przed chwilą plik web.xml i odkomentuj mapowanie serwletu RDSDispatchServlet. Flash Builder korzysta z tego serwletu, aby otrzymać szczegóły usługi w naszej aplikacji internetowej. Ponad to, na potrzeby tego tutoriala zmień w mapowaniu tego serwleta param-value na false (init-param).

        RDSDispatchServlet
		RDSDispatchServlet
                flex.rds.server.servlet.FrontEndServlet
		    
useAppserverSecurity
false
		    
        10

Wystawienie klasy Javy jako zdalnej usługi BlazeDS

Otwórz plik testblazeds\WEB-INF\flex\remoting-config.xml i w węźle service dodaj węzeł destination:

  <destination id="BeerServiceDestination">
    <properties>
	<source>pl.flexair.BeerService</source>
    </properties>
</destination>

Dodanie tego węzła powoduje, że serwer wystawi naszą klasę BeerService jako zdalną usługę o identyfikatorze BeerServiceDestination.

Piszemy aplikację Flex (nareszcie!)

Po tych wszystkich zabiegach (ostrzegałam, że trochę tego jest), możemy wreszcie przejść do Flash Buildera i napisać we Flex banalną aplikację, która skorzysta z danych wysłanych przez Javę.

Z menu górnego wybieramy File -> New -> Flex Project. Wpisz nazwę aplikacji, jako typ aplikacji wybierz aplikację webową. Technologia serwera to oczywiście J2EE. Na liście poniżej wybieramy BlazeDS i przechodzimy dalej.

Na kolejnym ekranie jako Root folder podajemy ścieżkę do naszej aplikacji na Tomcat np. C:\tomcat-6.0\webapps\testblazeds, Root URL to adres naszej aplikacji np. http://localhost:8080/testblazeds. jako context root ustawiam /testblazeds. Po przetestowaniu prawidlowości tych ustawień, możemy przejść dalej.

Na kolejnych ekranach możemy zostawić opcje domyślne. Wybieramy Finish i tworzymy aplikację.

Utworzenie połączenia z Javą

Spróbujmy teraz połączyć się z naszą zdalną usługą na serwerze. W tym celu wybieramy z górnego menu Data -> Connect to Data/Service i wybieramy BlezeDS.

Flash Biulder powinien poprosić nas teraz o podanie loginu i hasła. Wybieramy opcję No Password Required (oczywiście jeżeli odpowiednio skonfigurowaliśmy serwlet w web.xml - patrz powyżej).

Teraz Flash Builder powinien połączyć się z serwerem i wyświetlić nam listę wystawionych usług. Zaznaczam moją usługę i wybieram Finish.

Teraz Flash Builder wykonuję za mnie całą pracę. Na podstawie wystawionej usługi generowane są odpowiedniki klas Javowych, ale w ActionScript. W widoku Project Explorer pożesz zobaczyć, że zostały utworzone nowe katalogi - services i valueObject. Katalog valueObject zawiera klasę ActionScript Beer, która odpowiada mojemu beanowi Javowemu.

W widoku Data/Services pokazane są szczegóły usługi np. jakie metody udostępnia usługa. Jak widać metoda getBeerList została tak zmapowana, ze zwraca listę piw.

Wyświetlenie danych z serwera

No to przejdźmy teraz do najprzyjemniejszej części tego tutoriala. Stwórzmy wreszcie coś co nam wyświetli dane z serwera w naszej aplikacji. Skorzystamy z kontroli DataGrid (to takie Flex'owe Hello World), by pokazać jakie mamy piwa i jaką mają temperaturę.

Przechodzimy do widoku Design. Z widoku Outline przeciągamy kontrolkę DataGrid. Klikamy na niej prawym przyciskiem i z menu kontekstowego wybieramy Bind to data ...

W oknie, które nam się pojawia nic nie zmieniamy, tylko zatwierdzamy wybór. Jak widać DataGrid trochę nam się zmieniło. Mamy dwie kolumny, które odpowiadają właściwościom obiektu Beer. Zapisujemy i odpalamy aplikację. Powinna nam się pokazać DataGrid z listą piw.

Teraz już wiemy, że piwa z górnej części listy bardziej nadają się do picia. Dobrze, że mamy taką aplikację, która podpowiada nam jakie wybrać