Flex i AIR » Flex

Flex SDK + Flash Player 10

Jarek — Sat, 24 Oct 2009 11:05:50 +0000

Wpis w związku z powtarzającymi się pytaniami na różnych forach.

Jak włączyć w Flex Builderze kompilowanie dla Flash Playera 10 (czyli mieć dostęp do klasy Vector i metody „save” w klasie FileReference):

zakładam, że mamy nowe SDK (najlepiej 3.4)
w właściwościach projektu wybieramy zakładkę „Flex Compiler” i…
- wpisujemy w „Additional compiler arguments” -target-player=10.0.0
  .
LUB
- zaznaczamy „Require Flash Player version:” i podajemy wartości: 10 0 0
  .

Więcej informacji na stronach Adobe – Targeting Flash Player 10

Wysyłanie formularzy multipart/form-data

Jarek — Tue, 08 Sep 2009 13:08:04 +0000

Trafiłem ostatnio na dość dziwny problem. Potrzebowałem mianowicie wysłać z poziomu Flexa dane formularza, które po stronie serwera zostałyby odebrane przez PHP (lub inny język server-side).

Jednak cały kłopot polegał na tym, że:

dane te miały wykorzystać istniejący już kod obsługiwany przez formularz w HTML’u – czyli niejako miałem się podszyć pod zwykłą stronę www, nie wykorzystując żadnych udogodnień typu AMF, Webservice czy RemoteObject,
chciałem wysłać jednocześnie dane tekstowe (np. dane rejestracyjne) oraz binarne (np. obrazki JPG), bez limitu ilości,
obrazki nie były pobierane z dysku użytkownika przez FileReference.browse, ale tworzone w locie jako zrzuty komponentów przez ImageSnapshot i trzymane w pamięci w zmiennych typu ByteArray.

Jedyne co udało mi się znaleźć to artykuł na blogu Neer’a Friedman’a i jego projekt na Google Code. Był to dobry początek do zmian…
BTW: niejaki Mike Stead, którego komentarz widnieje pod wpisem Neer’a też zajmował się tym problemem i zdaje się, że nawet go jakoś elegancko rozwiązał, jednak jego stronka padła kompletnie i nie ma jej nawet w Google Cache…

Wywaliłem kod odpowiedzialny za używanie Socketów zamieniając go na zwykłego URLLoader’a oraz troche zrefaktoryzowałem kod (uporzadkowałem). Tym sposobem pojawiła się biblioteka MultipartRequestLoader

Przykładowa aplikacja (wraz z kodem źródłówym pod prawym klikiem myszki), a tutaj kod biblioteki: multipart_loader_imrahil.zip

Kod przykładowej aplikacji:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54

xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" viewSourceURL="srcview/index.html">

import multipart.MultipartVariables;
import multipart.MultipartRequestLoader;

private var loader:MultipartRequestLoader;

private function init():void
{
loader = new MultipartRequestLoader('http://flex.imrahil.com/work/multipart_loader/upload.php');
var variables:MultipartVariables = new MultipartVariables();
var myByteArray:ByteArray = new ByteArray();

// we will create a fake file content here, you should replace this with the binary data you want to upload
for(var i:int=0; i<100;i++)
{
myByteArray.writeUTFBytes("123by\nAR\r\nRA\x65\x0156");
}

variables.add('file_data', myByteArray, 'filename.bin');
variables.add('another_var','extra data');

loader.variables = variables;
loader.addEventListener(Event.COMPLETE, fileUploaded);
loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
loader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
}

private function fileUploaded(event:Event):void
{
outputTxt.text += 'Result:';
outputTxt.text += MultipartRequestLoader(event.target).responseBody;
}
private function securityErrorHandler(event:SecurityErrorEvent):void
{
outputTxt.text = "securityErrorHandler: " + event;
}
private function ioErrorHandler(event:IOErrorEvent):void
{
outputTxt.text = "ioErrorHandler: " + event;
}
private function upload(event:MouseEvent):void
{
loader.load();
}
]]>

width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
label="Upload!" click="upload(event)" />
id="outputTxt" width="500" height="250" />
>
>

Flex SDK 3.4 – niespodzianka z wykresami

Jarek — Thu, 27 Aug 2009 12:30:41 +0000

Adobe opublikowało dzisiaj oficjalnie nowe Flex SDK 3.4 (chodzi oczywiście o to ze strony głównej, a nie z opensource.adobe.com gdzie leżało już jakiś czas temu).

W zasadzie jest to ten sam build (3.4.0.9271) tyle tylko, że dorzucono do niego paczkę z komponentami do wykresów (Flex Data Visualization Component) w tejże wersji.

Największe zaskoczenie jednak to fakt, że paczka z wykresami zawiera kod źródłowy oraz nie ma klasy odpowiedzialnej za watermarki! Ok, wcześniej można było rozpakować kod źródłowy posiadając klucz licencyjny do Flex Buildera, ale brak watermarków to całkowita nowość. Teraz każdy może robić wykresy czy używać AdvancedDataGrid bez żadnych problemów.

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.

Adobe i Facebook – oficjalne AS3 API

Jarek — Tue, 31 Mar 2009 09:03:51 +0000

Adobe i Facebook ogłosiły dzisiaj, że łączą wysiłki w celu ułatwienia deweloperom Flash Platform pracy nad aplikacjami działającymi na Facebook Platform. W tym celu opublikowana została oficjalna biblioteka AS3 umożliwiająca korzystanie z API Facebook’a z poziomu aplikacji Flex/Flash. Pojawił się także specjalny dział na stronach Adobe Devnet poświęcony temu zagadnieniu.

Serwis InsideRIA.com będzie od przyszłego tygodnia publikował tutoriale pokazujące w jaki sposób wykorzystać w praktyce nowe facebook’owe AS3 API.

Edit: Ryan Stewart opublikował niesamowite demo pokazujące możliwości Facebook API oraz Adobe Flash Collaboration Services (AFCS – dawniej Cocomo)

Tour de Flex 1.2

Jarek — Tue, 31 Mar 2009 08:56:01 +0000

Wyśmienita aplikacja Tour de Flex przedstawiająca możliwości Flex/AIR doczekała się aktualizacji do wersji 1.2. Można ją ściągnąć ze strony http://www.adobe.com/devnet/flex/tourdeflex (uwaga! instalka waży 37MB!) lub wykonać automatyczny update uruchamiając wcześniejszą wersję aplikacji. Więcej informacji o zmianach znajdziecie na stronie Grega Wilsona.

Ciekawostką jest także wersja online.

Relacja z RIA Day 2008

Jarek — Fri, 28 Nov 2008 19:08:51 +0000

27 listopada 2008 roku firma Janmedia zorganizowała we Wrocławiu spotkanie o nazwie RIA Day 2008 (Flex, AIR , LiveCycle & ColdFusion jam). Oprócz zagadnień zawartych w nazwie odbyło się także wręczenie nagród w konkursie Flex Challenge.

Pierwsze wystąpienie miał jeden z głównych Adobe Evangelistów, Ben Forta.

[inspic=8,,fullscreen,thumb,:must]	[inspic=10,,fullscreen,thumb,:must]
[inspic=11,,fullscreen,thumb,:must]	[inspic=12,,fullscreen,thumb,:must]
[inspic=15,,fullscreen,thumb,:must]

Bardzo ciekawie prezentowały się plany Adobe na rok 2009, a zwłaszcza kwestia nowych wersji Flash Playera (codename: „Argo” i „Stratos”) oraz nowego środowiska AIR (codename: „Athena”, „Zephyr” oraz „Stratos”) dla urządzeń innych niż PC (czyli telewizory, smartphone’y czy low-endowe komórki)

[inspic=13,,fullscreen,thumb,:must]

[inspic=14,,fullscreen,thumb,:must]

Bardzo ciekawe było też wystąpienie Piotra Walczyszyna (pierwszy, polski Adobe Evangelist ) które początkowo miało być na temat tworzenia aplikacji AIR za pomocą Flash CS4, a skończyło się na pokazaniu jak korzystać z Adobe Cocomo oraz frameworka Swiz.

[inspic=16,,fullscreen,thumb,:must]

Później techniczną prezentacją na temat Zend + AMF dał Michał Zwoliński, po nim znowu Ben Forta z bardziej deweloperską niż marketingową prezentacją na temat Flex + LiveCycle i mocno marketingowa prezentacja Tadeusza Chełkowskiego o narzędziach z pakietu LiveCycle (wspomaganie decyzji, generowanie PDF’ów, etc)

Po kolejnej przerwie na regenerację sił i konsumpcję organizatorzy wręczyli nagrody w konkursie Flex Challenge. Gdy nagrody rzeczowe zostały rozdane, swoje prezentacje miało 3 finalistów, z których tylko Mateusz Malczak (pierwsze miejsce za aplikację cartoonair.com) pokazał coś technicznego i konkretnego

Niestety zawiodłem się na ekipie ArsThanea, która opowiadała o projekcie MyDeco.com. Chłopaki nie pokazali nic technicznego, a jedynie same ogólniki (że Cairngorm, że Papervision, etc). Odniosłem też wrażenie, że nie lubią tego projekt (strasznie „rozstrzelonego” po świecie – część ekipy w Londynie, część na Ukrainie, część jeszcze w innej części świata, narzucanych narzędzi pracy)

Ogólnie imprezę oceniam bardzo wysoko. Organizacja była perfekcyjna, poruszane tematy ciekawe, a jedzenie bardzo dobre

Tour de Flex

Jarek — Mon, 17 Nov 2008 10:16:35 +0000

Jeśli podobał się wam Flex 3 Component Explorer to nie możecie przejść obojętnie obok tej aplikacji! Tour de Flex to aplikacja AIR umożliwiająca przegląd:

komponentów wizualnych Flexa czy AIR’a,
sposobów komunikacji z stroną serwerową (HTTPService, WebService czy Remoting),
wykorzystania różnorakich API (np.: Twitter, Ebay, Flickr, etc),
zewnętrznych komponentów do generowania wykresów,
komponentów do map (Google Maps, Yahoo Maps)
innych komponentów, np.: Degrafa, cała masa od zewnętrznych deweloperów

Aktualnie aplikacja posiada 217 przykładów, ale dzięki temu, że posiada wbudowany system aktualizacji liczba ta będzie się prawdopodobnie szybko zwiększać

Interfejs Tour de Flex pozwala nam na podgląd źródła każdego komponentu czy przykładu oraz szybkie podejrzenie specyfikacji w Adobe Flex 3 Language Reference (wyświetlanemu dzięki silnikowi WebKit w AIR). Wbudowany jest także system komentarzy.

Dodatkowo ekipa Adobe Evangelist Team przygotowała wtyczkę do Flex Buildera umożliwiającą przeglądanie przykładów prosto z poziomu Flex IDE!
Instaluje się ją tak jak każdą inną wtyczkę z adresu http://tourdeflex.adobe.com/eclipse. Po instalacji trzeba tylko podać ręcznie ścieżkę do pliku exe zainstalowanej wcześniej aplikacji Tour de Flex.