Flex i AIR

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

Adobe MAX 2009

Jarek — Tue, 29 Sep 2009 19:40:06 +0000

W związku z tym, że tegoroczne Adobe MAX rusza w najbliższą niedzielę można już głosować na MAX Awards (nagrody dla najlepszych aplikacji RIA) oraz rejestrować się na transmisję online z keynote (w tym roku w pełni na żywo).

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.

Uaktualnienia Flash Playera i Adobe AIR

Jarek — Fri, 31 Jul 2009 21:03:37 +0000

Na szybko – Adobe udostępniło do ściągnięcia:

nową wersję Adobe AIR 1.5.2 – zmiany wyłącznie kosmetyczne. Zdaje się, że zmienili tylko ekran instalacyjny tak, że już nie straszy komunikatem o zagrożeniach jakie stanowi instalowana aplikacja…
Edit: pełne release notes dla developerów
nowe wersje Flash Playera – w wersji 10.0.32.18 (wcześniejsza była wersja 10.0.22.87 – do sprawdzenia na playerversion.com). Wersje debug jak zwykle dostępne na stronach Support Center. Poprawka podyktowana łataniem poważnej dziury bezpieczeństwa – więcej na ten temat tutaj.

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 !

PIT-37 przez internet, czyli e-Deklaracje Desktop

Jarek — Fri, 10 Apr 2009 08:41:48 +0000

Uwaga! Pojawił się chyba pierwszy duży projekt AIR‘owy w Polsce!. Ministerstwo Finansów zdecydowało się stworzyć aplikację do wypełniania PIT’ów-37 w technologii Adobe AIR. Do ściągnięcia ze strony www.e-deklaracje.gov.pl.

Wielkość tego projektu to jednak nie złożoność aplikacji (bo całość wypełniania i obliczeń opiera się o interaktywny formularz PDF), ale jego nadchodząca popularność. Już widzę, jak w statystykach wystrzelą słupki popularności środowiska Adobe AIR w Polsce

Appka oprócz rozliczeniowego PDF’a dodaje kilka możliwości „desktopowych”, czyli zapisywanie wersji roboczych na dysk, śledzenie statusu wysłanego rozliczenia czy z detali: kontrolę aktywności połączenia internetowego lub uruchamianie na starcie systemu.
Przydałby się jeszcze tylko lepszy system pomocy, bo ten aktualny to po prostu wielgachny PDF w którym na 30 stronach opisana jest cała aplikacja. Dla normalnego użytkownika jest to całkowicie nie do ogarnięcia…

Lupo – szybkie i zgrabne tworzenie tłumaczeń i lokalizacji

Jarek — Thu, 09 Apr 2009 11:07:04 +0000

Lupo Flex Localization Studio – to kolejna fajna rzecz znaleziona na blogu Davida Deraedt’a (wcześniej była prezentacja o Agile+Flex).

Lupo Flex Localization Studio będzie to narzędzie składające się z dwóch modułów z których każdy ułatwiać będzie:

Lupo Manager – proces tworzenia lokalizacji podczas pisania aplikacji, czyli: zamianę tekstów na odnośniki do resourceManager’a, dodawanie nowych jezyków, czy generowanie potrzebnego kodu AS/MXML
Lupo Translator – proces tłumaczenia kolejnych tekstów aplikacji na różne języki, coś na kształt Poedit dla plików *.po/*.mo

Niestety nie ma narazie możliwości ściągnięcia instalki Lupo ani zarejestrowania się do programu beta-testów….

Flex i metodologia Agile

Jarek — Thu, 09 Apr 2009 10:49:23 +0000

Na blogu Davida Deraedt’a znalazłem bardzo ciekawą prezentację dotyczącą kodowania we Flexie przy wykorzystaniu metodyki Agile: