Flex i AIR » Flex Builder http://flex.imrahil.com Wiadomości ze świata RIA oraz moje zmagania z programowaniem w Flex/AIR Fri, 18 Jun 2010 20:40:18 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Flex + Java w jednym projekcie w Flex Builderze – część II http://flex.imrahil.com/2009/07/31/flex-java-w-jednym-projekcie-w-flex-builderze-czesc-ii/ http://flex.imrahil.com/2009/07/31/flex-java-w-jednym-projekcie-w-flex-builderze-czesc-ii/#comments Fri, 31 Jul 2009 20:41:32 +0000 Jarek http://flex.imrahil.com/?p=260 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”:

FlexJava01

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

FlexJava02

FlexJava03

oraz wskazanie lokalizacji pliku blazeds.war:

FlexJava04

Następny ekran i projekt jest już utworzony:

FlexJava05

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

FlexJava06

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
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Label text="Hello World!" horizontalCenter="0" verticalCenter="0" />
</mx:Application>

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

FlexJava07

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:

FlexJava08

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:

FlexJava09

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
<?xml version="1.0" encoding="UTF-8"?>
<service id="remoting-service"
   class="flex.messaging.services.RemotingService">

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

    <default-channels>
        <channel ref="my-amf"/>
    </default-channels>
   
    <destination id="HelloWorld">
        <properties>
            <source>com.imrahil.tutorial.HelloWorld</source>
        </properties>
    </destination>
</service>

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
<?xml version="1.0" encoding="UTF-8"?>
<services-config>

    <services>
        <service-include file-path="remoting-config.xml" />
    </services>

    <security>
        <login-command class="flex.messaging.security.TomcatLoginCommand" server="Tomcat"/>
    </security>

    <channels>
        <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
            <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
    </channels>

    <logging>
        <target class="flex.messaging.log.ConsoleTarget" level="Debug">
            <properties>
                <prefix>[BlazeDS] </prefix>
                <includeDate>false</includeDate>
                <includeTime>false</includeTime>
                <includeLevel>false</includeLevel>
                <includeCategory>false</includeCategory>
            </properties>
            <filters>
                <pattern>Endpoint.*</pattern>
                <pattern>Service.*</pattern>
                <pattern>Configuration</pattern>
            </filters>
        </target>
    </logging>

    <system>
        <redeploy>
            <enabled>false</enabled>
        </redeploy>
    </system>
</services-config>

Cenną zmianą jest zwłaszcza opcja target=”Debug” w sekcji <logging /> – 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
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="left">

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

    <mx:Script>
       <![CDATA[
           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";
           }
       ]]>
    </mx:Script>

    <mx:Label text="Output:"/>
    <mx:TextArea width="500" height="100" id="outputTxt"/>
    <mx:Button label="Hello World!" click="myservice.getOperation('helloWorld').send();"/>
   
    <mx:HBox width="100%">
        <mx:Button label="Repeat After Me:" click="myservice.getOperation('repeatAfterMe').send(myText.text);"/>
        <mx:TextInput id="myText" text="Sent to Server"/>
    </mx:HBox>
   
    <mx:Button label="Invoke wrong method" click="myservice.getOperation('wrongMethod').send();"/>
</mx:Application>

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ę:

FlexJava10

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.

]]> http://flex.imrahil.com/2009/07/31/flex-java-w-jednym-projekcie-w-flex-builderze-czesc-ii/feed/ 2 Flex Builder 4 „Gumbo” http://flex.imrahil.com/2008/11/18/flex-builder-4-gumbo/ http://flex.imrahil.com/2008/11/18/flex-builder-4-gumbo/#comments Mon, 17 Nov 2008 23:43:27 +0000 Jarek http://flex.imrahil.com/?p=102 Kolejna, rewolucyjna wersja środowiska (IDE) do tworzenia aplikacji Flex. Zawiera takie oto nowości:

  • integrację z Flash Catalyst (do ekspresowego prototypowania interfejsów aplikacji),
  • wbudowane wsparcie dla FlexUnit,
  • wbudowany monitor sieciowy,
  • automatyczne gettery i settery (mały detal, a niezmiernie cieszy…)
  • szablony dla MXML, AS czy CSS,
  • całkiem nowe narzędzia do zarządzania danymi z server-side.

Całość dostępna narazie tylko dla uczestników MAX 2008 (grrr…). Dla pozostałych zostaje zabawa z Flex 4 SDK.

Edit: mnóstwo screenshot’ów nowej wersji można znaleźć na blogu Mike’a Morearty.

]]> http://flex.imrahil.com/2008/11/18/flex-builder-4-gumbo/feed/ 0 Tour de Flex http://flex.imrahil.com/2008/11/17/tour-de-flex/ http://flex.imrahil.com/2008/11/17/tour-de-flex/#comments Mon, 17 Nov 2008 10:16:35 +0000 Jarek http://flex.imrahil.com/?p=84 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.

]]> http://flex.imrahil.com/2008/11/17/tour-de-flex/feed/ 0 Google Maps AS3 API i UMap v.0.9.1 http://flex.imrahil.com/2008/05/14/google-maps-as3-api-i-umap-v091/ http://flex.imrahil.com/2008/05/14/google-maps-as3-api-i-umap-v091/#comments Wed, 14 May 2008 21:22:35 +0000 Jarek http://flex.imrahil.com/?p=26 Google opublikowało dzisiaj Google Maps API for Flash. Całość to biblioteka SWC, którą podłączamy do Flexa (Builder lub SDK) i bezproblemowo budujemy mapkę Google Maps. Więcej przykładów do ściągnięcia z repozytorium projektu.

Poniżej mały, naprędce skompilowany przykład (źródło pod prawym przyciskiem myszy)

Niestety nie udało mi się odpalić tej biblioteki w aplikacji AIR. Wypluwało dziwny błąd związany z sandboxem…

Edit:
znany błąd. można na niego zagłosować na gmaps-api-issues.

Ogólnie całość sprawia wrażenie trochę niedopracowanego. Czasem sypie błędami, coś się nie wczytuje, etc

UMap
Jakby tego było mało, chwilę później dostałem informację mailem, że konkurencja z AFComponents nie śpi i nie marnuje czasu, tylko pracuje nad kolejnymi wersjami swojej obsługi map Google (jak też i innych), czyli UMap w najnowszej wersji 0.9.1 – showcase na umapper.com

Edit:
Wygląda na to, że Panowie z Google i Panowie z AFComponent jednak się lubią. Wskazuje na to przykład na oficjalnym blogu Google Maps.

Źródło: ReadWriteWeb.com

]]> http://flex.imrahil.com/2008/05/14/google-maps-as3-api-i-umap-v091/feed/ 1 Adobe AIR dla Linuxa http://flex.imrahil.com/2008/03/31/adobe-air-dla-linuxa/ http://flex.imrahil.com/2008/03/31/adobe-air-dla-linuxa/#comments Mon, 31 Mar 2008 09:27:11 +0000 Jarek http://flex.imrahil.com/2008/03/31/adobe-air-dla-linuxa/ Adobe opublikowało dzisiaj Adobe Integrated Runtime (AIR) w wersji alpha dla Linuxa. Zaktualizowany został także Flex Builder Linux do wersji „alpha 3″.

Dla przypomnienia: Adobe AIR pozwala na przeniesienie na desktop komputera aplikacji typu RIA stworzonych we Flex‘ie, czy XHTML/AJAX (to dzięki silnikowi renderującemu WebKit). Umożliwia także dostęp do lokalnych plików czy przechowywanie danych offline w wbudowanej bazie SQLite. Wszystko to tworzone raz, a uruchamiane na różnych systemach bez najmniejszych zmian w kodzie.

Aktualnie dostępne są wersje 1.0 dla Windowsa i OSX, zaś ostateczna wersja dla Linuxa spodziewana jest w przeciągu kilku najbliższych miesięcy. W planach są już także wersje 1.1 dla wszystkich trzech systemów.

Więcej info: Ted Patrick, ReadWriteWeb, ZDNet, C|Net

]]> http://flex.imrahil.com/2008/03/31/adobe-air-dla-linuxa/feed/ 0