Flex i AIR » Serwer Side

Flex + Java w jednym projekcie w Flex Builderze – część II

Jarek — Fri, 31 Jul 2009 20:41:32 +0000

Czas na stworzenie prostej aplikacji wykorzystującej Jave (BlazeDS) i Flex w jednym projekcie Flex Buildera. Będzie to klasyczne „Hello World”

Wymagane oprogramowanie:

Flex Builder 3.0.2 – dostępny do ściągnięcia w wersji trial ze stron Adobe lub w specjalnej wersji dla studentów lub bezrobotnych programistów ze strony Free RIA Tools,
BlazeDS 3.2.0.3978 – dostępny na stronach Adobe Open Source (jest to wersja z samymi binariami – dostępna jest także wersja z zintegrowanym Tomcatem) – rozpakowujemy w dowolne miejsce, np.: C:\Work\BlazeDS
Tomcat 6.0.20 – dostępny na stronach Apache Software Foundation – rozpakowujemy w dowolne miejsce, np.: C:\apache-tomcat-6.0.20
BlazeMonster – bardzo przydatne narzędzie do testowania świeżo stworzonych metod BlazeDS – do ściągnięcia z bloga Sujit Reddy G.

Do dzieła!

Po odpaleniu Flex Buildera tworzymy nowy projekt wybierając w sekcji „Server technology” opcję „J2EE” i zaznaczając „Create combined Java/Flex project using WTP”:

Następnym krokiem jest stworzenie lokalnej instancji serwera Tomcat – wskazujemy katalog z rozpakowanymi binariami Tomcata:

oraz wskazanie lokalizacji pliku blazeds.war:

Następny ekran i projekt jest już utworzony:

Struktura nowego projektu powinna przedstawiać się następująco:

Katalog flex_src to nasz główny katalog ze kodem Flexa, src z kodem Java, a WebContent to nasz lokalny serwer WWW.
Aby upewnić się czy wszystko działa dodajmy do kodu Flexa kawałek prostego kodu:

1
2
3
4

"1.0" encoding="utf-8"?>
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
text="Hello World!" horizontalCenter="0" verticalCenter="0" />
>

i odpalmy całą aplikację na serwerze – klikamy prawym klawiszem myszy na projekcie wybieramy Run -> Run on Server, a następnie Next, Next, Finish:

W oknie konsoli Flex Buildera widzimy logi uruchamianego Tomcata, a na koniec otrzymujemy przepiękny error HTTP Status 404
Jednak nie ma się co zrażać! Wracamy do Flex Buildera i wciskamy klawisz F11 (Run debug) w efekcie czego otwiera nam się domyślna przeglądarka, a w niej nasza mikro-aplikacja:

Taadaa! Serwer śmiga aż miło. Czas przystąpić do stworzenia czegoś bardziej konkretnego! Do dzieła!
Na początek tworzymy nową klasę w Javie – File -> New -> Other -> Class:

i dodajemy do niej dwie metody: helloWorld i repeatAfterMe:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

package com.imrahil.tutorial;

public class HelloWorld
{
public String helloWorld()
{
return "Server said: Hello World!";
}

public String repeatAfterMe(String sayHello)
{
return "You said: " + sayHello;
}
}

Skompilowana klasa powinna znaleźć się w katalogu /WebContent/WEB-INF/classes/com/imrahil/tutorial.
Żeby jednak BlazeDS potrafił z niej skorzystać trzeba ją dodać do pliku remoting-config.xml, który powinien wyglądać następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

version="1.0" encoding="UTF-8"?>
id="remoting-service"
class="flex.messaging.services.RemotingService">

>

id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>

ref="my-amf"/>
>

id="HelloWorld">
>
>com.imrahil.tutorial.HelloWorld>
>
>
>

Przy okazji można wywalić pliki: messaging-config.xml oraz proxy-config.xml bo z tych opcji nie będziemy wogóle korzystać. Trzeba jednak zmodyfikować wtedy plik services-config.xml, który powinien wyglądać tak:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

version="1.0" encoding="UTF-8"?>

file-path="remoting-config.xml" />

>

>

class="flex.messaging.security.TomcatLoginCommand" server="Tomcat"/>

>

>

id="my-amf" class="mx.messaging.channels.AMFChannel">

url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"/>
>
>

>
class="flex.messaging.log.ConsoleTarget" level="Debug">
>
>[BlazeDS] >
>false>
>false>
>false>
>false>
>
>
>Endpoint.*>
>Service.*>
>Configuration>
>
>
>

>
>
>false>
>
>
>

Cenną zmianą jest zwłaszcza opcja target=”Debug” w sekcji – pozwoli nam ona obserwować odpowiedzi BlazeDS w konsoli serwera Tomcat.

Czas zatem stworzyć aplikację Flex komunikującą się z nowo stworzonymi metodami Javy.

Tworzymy nową MXML Application i piszemy:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

"1.0" encoding="utf-8"?>
xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="left">

id="myservice" fault="faultHandler(event)" showBusyCursor="true" destination="HelloWorld">
name="helloWorld" result="resultHandler(event)" />
name="repeatAfterMe" result="resultHandler(event)" />
>

import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;

private function resultHandler(evt:ResultEvent):void
{
outputTxt.text += evt.message.body.toString() + "\n";
}

private function faultHandler(fault:FaultEvent):void
{
outputTxt.text = "Code: " + fault.fault.faultCode + "\n";
outputTxt.text += "Message: " + fault.fault.faultString + "\n";
outputTxt.text += "Detail: " + fault.fault.faultDetail + "\n";
}
]]>

text="Output:"/>
width="500" height="100" id="outputTxt"/>
label="Hello World!" click="myservice.getOperation('helloWorld').send();"/>

width="100%">
label="Repeat After Me:" click="myservice.getOperation('repeatAfterMe').send(myText.text);"/>
id="myText" text="Sent to Server"/>
>

label="Invoke wrong method" click="myservice.getOperation('wrongMethod').send();"/>
>

Uwaga! Jeśli po odpaleniu w przeglądarce (klawisz F11 lub CTRL+F11 w Flex Builderze) i wywołaniu metody helloWorld wyskakuje nam błąd Client.Error.MessageSend (a konkretniej: Channel.Connect.Failed error NetConnection.Call.Failed: HTTP: Failed: url: ‘http://localhost:8080/WebContent/messagebroker/amf’) to prawdopodobnie trzeba zmodyfikować parametr Context root w opcjach projektu: Preferences -> Flex Server -> Context root.
Właściwą wartością jest nazwa projektu, czyli w naszym przypadku: BlazeDS-Hello-World. Trzeba jeszcze zrestartować serwer (lub wyczyścić mu cache: prawy klawisz myszy na serwerze w zakładce Servers i opcja Clean)

Gdy już wszystko ustawimy jak trzeba to pod adresem: http://localhost:8080/BlazeDS-Hello-World/hello_world.html znajdziemy naszą śliczną aplikację:

Jeśli ktoś nie miał tyle czasu, żeby samemu stworzyć powyższą aplikację ten może ściągnąć pełen kod wraz z plikami projektu Flex Buildera.

ps.: kod Flexowy bazuje w pewnej części na kodzie Wade’a Arnolda z tego wpisu.

Flex + Java w jednym projekcie w Flex Builderze – część I

Jarek — Sat, 11 Apr 2009 12:10:39 +0000

Chciałbym przedstawić w jaki sposób można przygotować środowisko deweloperskie Flex Builder do kodowania Flex + Java. Chodzi oto, żeby móc tworzyć jednocześnie część aplikacji widoczną dla użytkownika (frontend) jak i backend, czyli kod Javy odpowiedzialny np.: za komunikację z bazami danych i obróbkę tych danych.

Uwaga! Poniższy sposób tworzenia aplikacji sprawdza się tylko w przypadku kodowania przez jedną osobę.

Kod Javy będzie docelowo wykorzystywał BlazeDS/LiveCycle Data Services – będzie to jednak zagadnieniem następnego tutoriala.

Wymagane oprogramowanie: Flex Builder 3.0.2 – dostępny do ściągnięcia w wersji trial ze stron Adobe lub w specjalnej wersji dla studentów lub bezrobotnych programistów ze strony Free RIA Tools.

Zaczynamy od uruchomienia Flex Buildera:

Wybieramy menu Help -> Software Updates -> Find and Install:

Zaznaczamy opcję „Search for new features to install„:

Na liście zaznaczamy Europa Discovery Site i klikamy Finish:

Po wczytaniu listy aplikacji wybieramy ostatnią pozycję „Web and JEE Development„:

oraz wybieramy „Select required„, żeby dodać wszystkie wymagane zależności:

Następny krok to zgoda licencyjna:

oraz wybór komponentów opcjonalnych – wybieramy „Select All” (lub nie ruszamy nic, jeśli wszystko jest już zaznaczone):

Jeszcze tylko ekran podsumowujący i klikamy Finish:

Chwila czekania, aż wszystkie ściągną się na dysk:

Po ściągnięciu plików jeszcze raz zatwierdzamy chęć instalacji wybierając „Install all„.

Po pozytywej i całkowitej instalacji pojawia się monit do restartu Flex Buildera:

Efektem powyższych kroków będzie nowa opcja „Create combined Flex/Java project using WTP” w momencie tworzenia nowego projektu:

Czas na Flex + Java w jednym projekcie w Flex Builderze – część II !

AMF remoting – co wybrać?

Jarek — Tue, 31 Mar 2009 09:11:17 +0000

Co wybrać? AMFPHP, ZendAmf, WebOrb for PHP czy może SabreAMF? A może wogóle język inny niż PHP?

Pytanie na które ciężko ostanim czasy znaleźć dobrą odpowiedź. Żeby choć trochę ułatwić sprawę polecam sprawne porównanie istniejących rozwiązań dla PHP opublikowane przez Mihai Corlan’a.

Dodatkowo dodam, że w dniu dzisiejszym pojawił się update (do wersji 1.7.8) biblioteki ZendAMF – więcej info na blogu Wade’a Arnolda, a kod można ściągnąć ze stron Zend Frameworka.

Red5 ze wsparciem dla H.264

Jarek — Mon, 06 Oct 2008 19:55:56 +0000

Dzięki staraniom panów Paul Gregoire’a i Stevena Gonga open-sourcowy serwer RTMP Red5 wzbogacił się właśnie o obsługę kodowania H.264 (gdyby ktoś nie wiedział o co chodzi polecam takie oto HD demo). Narazie wersja dostępna jest tylko z poziomu svn, ale zapewne wrzucona zostanie do release’a 0.9.

Niestety mój projekt, wykorzystujący jako część serwerową Red5, ostatnio mocno podupadł więc się tym za szybko zapewne nie pobawię

Źródła: Dominick Accattato’s Site oraz Paul Gregoire’s Blog

GAE SWF Project

Jarek — Wed, 07 May 2008 10:07:52 +0000

GAE SWF Project jest to opensource’owy projekt prowadzony przez Arala Balkana mający na celu łatwienie startu Flash/Flex developerom na platformie Google App Engine.

Pośród celów projektu są:

krzewienie dobrych praktyk kodowania,
komunikacja z serwerem oparta o PyAMF
wykorzystanie Google API: Mail API, Users API i Datastore API,
promocja prawidłowego umieszczania plików SWF za pomocą SWFObject,
głębokie linkowanie (deep linking) za pomocą SWFAddress.

Online demo: Flash 9 / Flex 3

Google App Engine to testowa i darmowa (na dzień dzisiejszy) oferta hostingowa udostępniona przez Google dająca możliwość umieszczania aplikacji pisanych w Pythonie i korzystających z tej samej infrastruktury co wyszukiwarka Google. Parametry to: max 3 aplikacje po maksimum 500MB trzymanych w bazie BigTable, 5 milionów odsłon i 10TB transferu miesięcznie. Umożliwiony jest dostęp do usług Google takich jak: GMail, Google Accounts i innych.

PyAMF to kompatybilna z Flash Playerem implementacja protokołu AMF (Action Message Format) stworzona w Pythonie. Jest to binarny protokół służący wymiany danych pomiędzy aplikacją Flash/Flex i serwerem za pomocą zdalnego wywoływania procedur (RPC).
Wywołania mogą być przesyłane poprzez protokół HTTP/HTTPS lub też poprzez RTMP/RTMPS. Dzięki serializacji obiektów do postaci binarnej zwiększa się wydajność wywołań co pozwala wczytywać dane 10 razy szybciej niż gdyby działo się to za pomocą tekstowych formatów takich jak XML czy SOAP. Porównanie wydajności można przeprowadzić na stronie Jamesa Warda.
Przykłady zastosowania PyAMF dostępne są na stronie projektu, a ja polecam jedno z ciekawszych rozwiązań, czyli PyAMF Python Shell Demo.