Flex 3 2008/2009

Z JASR Wiki

<<< Powrót do Tworzenie aplikacji wielowarstowych 2008/2009

Spis treści 1 Wprowadzenie 1.1 Instalacja środowiska FlexBuilder 1.2 Krótka prezentacja technologii Flex 2 Ćwiczenie 1: Pierwsza aplikacja 3 Prezentacja możliwości technologii 4 Ćwiczenie 2: Dodanie efektów do aplikacji 5 Komunikacja z serwerami danych 5.1 HTTPServices 5.2 WebServices 5.3 RemoteObjects 6 Ćwiczenie 3: Dodanie połączenia z serwerem do aplikacji 7 Cairngorm Framework MVC 8 Ciekawe linki

Wprowadzenie

Wszystkie ćwiczenia i przykłady są przeznaczone do wykonania na systemie Windows i na nim były sprawdzane. Na innych systemach różnić się będzie tylko proces instalacji środowiska deweloperskiego.

Instalacja środowiska FlexBuilder

• Należy ściągnąć środowisko deweloperskie FlexBuilder, które znajduje się pod jednym z poniższych adresów:
  • http://students.mimuw.edu.pl/~pj248401/FB3_win.exe
  • http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email

• Następnie zainstalować je. Instalacja jest prowadzona przez prosty kreator. Jedynym problematycznym momentem jest wybór foldera instalacji. Na komputerach w pracowniach nie mamy dostępu do wszystkich katalogów więc proponuję wybrać folder:
  • C:\Documents and Settings\<login na students'a>\Pulpit\Flex Builder 3

Krótka prezentacja technologii Flex

Flex jest technologią wymyśloną w celu tworzenia bogatych aplikacji internetowych (w skrócie RIA). Głównymi cechami charakterystycznymi Flex'a są:

• Możliwość przechowywania danych po stronie klienta. (Aplikacja jest stanowa)
• Możliwość asynchronicznej komunikacji z serwerami. (Uwolnienie od schematu Request-Response)
• Estetyczny i dynamiczny interfejs. (Odziedziczone po Flashu)
• Bogaty zbiór gotowych komponentów do budowy interfejsu. (Znaczne przyspiesza tworzenie aplikacji)

Aplikacje we Flex'ie tworzy się w dwóch językach:

• Języku znaczników MXML - w celu tworzenia statycznych elementów interfejsu

<mx:Label text="Imię"/>
<mx:TextInput id="firstNameId"/>

• Języku skryptowym ActionScript - w celu napisania skryptów obsługujących różne zdarzenia

<mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        private function userLogin(firstName:String, lastName:String):void
        {
            Alert.show("Hello World!");
        }
    ]]>
</mx:Script>

A następnie znaczniki MXML tłumaczone są na ActionScript'a i wszystko kompilowane jest do pliku swf. Plik ten jest obsługiwany przez Flash Playera.

Pod poniższym linkiem znajduje się aplikacja demonstrująca między innymi gotowe komponenty dla Flex'a:

http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

Wybierając w menu po lewej stronie "Visual Components" możemy obejrzeć najczęściej używane gotowe komponenty dla Flex'a razem z tagami MXML, które je tworzą.

Ćwiczenie 1: Pierwsza aplikacja

Celem ćwiczenia jest stworzenie pierwszej aplikacji w technologii Flex.

• Odpal środowisko deweloperskie klikając FlexBuilder.exe w katalogu instalacji. Przy zastosowaniu się do poprzednich wskazówek do instalacji lokalizacja tego pliku to:
  • C:\Documents and Settings\<login na students'a>\Pulpit\Flex Builder 3\FlexBuilder.exe

• Utwórz nowy projekt flex'owy
  • Wybierając z górnego menu: "File>New>Flex Project".
  • W polu o nazwie "Project Name" wpisz "ProstaAplikacja"
  • Kliknij przycisk "Finish".

• Wklej następujący kod do pliku ProstaAplikacja.mxml.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private function userLogin(firstName:String, lastName:String):void
            {
                Alert.show("Hello " + firstName + " " + lastName + "! \n Nice to meet you.");
                dataGridId.visible = true;	
            }
        ]]>
    </mx:Script>
	
    <mx:VBox>
        <mx:HBox>
            <mx:Label text="Imię"/>
            <mx:TextInput id="firstNameId"/>			
        </mx:HBox>
        <mx:HBox>
            <mx:Label text="Nazwisko"/>
            <mx:TextInput id="lastNameId"/>
        </mx:HBox>
        <mx:Button label="Zaloguj" click="userLogin(firstNameId.text, lastNameId.text)"/>
    </mx:VBox>
    
    <mx:DataGrid x="0" y="100" id="dataGridId" visible="false">
        <mx:columns>
            <mx:DataGridColumn headerText="firstName" dataField="firstName"/>
            <mx:DataGridColumn headerText="lastName" dataField="lastName"/>
            <mx:DataGridColumn headerText="happyNumber" dataField="happyNumber"/>
        </mx:columns>
    </mx:DataGrid>
    
</mx:Application>

• Kliknij ikonkę przedstawiającą zielone kółko ze znaczkiem play w środku aby uruchomić aplikację (alternatywny sposób to klikniecie Ctrl+F11).

Prezentacja możliwości technologii

Flex pozwala tworzyć dynamiczny interfejs użytkownika. W tym celu wymyślone zostały efekty.

• Przykład 1 - Przesuwanie obrazka

<mx:Script>
   <![CDATA[
      private function moveImage():void {
         myMove.end();
         myMove.xTo=mouseX-60; 
         myMove.play();
      }
   ]]>
</mx:Script>

<mx:Move id="myMove" target="{img}"/>

<mx:Image id="img" source="@Embed(source='<ścieżka do obrazka>')"/>

• Przykład 2 - Zmienianie wielkości obrazka

<mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200"/>
<mx:Resize id="contract" target="{img}" widthTo="30" heightTo="60"/>
 
<mx:Image id="img" width="30" height="60" source="@Embed(source='<ścieżka do obrazka>')"/>

<mx:Button label="Expand" click="expand.end(); expand.play();"/>
<mx:Button label="Contract" click="contract.end(); contract.play();"/>

• Przykład 3 - Znikanie i pojawianie się obrazka

<mx:Iris id="irisOut" duration="1000" showTarget="true"/>
<mx:Iris id="irisIn" duration="1000" showTarget="false"/>

<mx:Image id="flex" visible="{cb1.selected}" source="@Embed(source='<ścieżka do obrazka>')" showEffect="{irisIn}" hideEffect="{irisOut}"/>

<mx:CheckBox id="cb1" label="visible" selected="true"/>

Więcej efektów (działających + kod) można obejrzeć na stronie:

• http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

Należy wybrać w menu po lewej stronie:

• Effects, View States, and Transitions -> Effects

Szczególnie polecam przyjrzeć się następującym efektom:

• Move

• WipeLeft

• Sequence

• Parallel

Będą one przydatne przy wykonywaniu ćwiczenia 2.

Pod poniższymi linkami znajdziesz ciekawe przykłady zaawansowanych efektów we flex'ie:

• http://www.tricedesigns.com/portfolio/googlestreetview/main.html
• http://www.efflex.org/FlexEffectsExample.html
• http://www.adobe.com/newsletters/edge/june2008/articles/article2/download/GeoGlobe.html
• http://www.returnundefined.com/flexmdi/explorer/
• http://box2dflash.sourceforge.net/
• http://examples.adobe.com/flex3/devnet/dashboard/main.html
• http://demo.quietlyscheming.com/book/FullPage.html
• http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-improvement-flex-carousel-component-and-vertical-coverflow/

Ćwiczenie 2: Dodanie efektów do aplikacji

Celem ćwiczenia jest dodanie efektu do stworzonej wcześniej aplikacji.

• Należy zakomentować wyskakujące okienko podczas logowania
  • //Alert.show("Hello " + firstName + " " + lastName + "! \n Nice to meet you.");

• Następnie za pomocą efektu sprawić, że po zalogowaniu DataGrid pojawi się przy prawej krawędzi strony i podjedzie do lewej.

Wskazówka

Rozwiązanie

Komunikacja z serwerami danych

Flex udostępnia trzy mechanizmy do komunikacji z serwerami.

HTTPServices

   <mx:Script>
       <![CDATA[
           import mx.rpc.events.FaultEvent;
           import mx.rpc.events.ResultEvent;
           
           private function getData():void
           {
               nazwaSerwisu.send();
           }
           
           private function resultHandler(event:ResultEvent):void
           {
               //Tu nastepuje obrobka danych otrzymanych z serwera
           }
           
           private function faultHandler(event:FaultEvent):void
           {
              //Tu nastepuje obsluga bledu polaczenia z serwerem
           }
       ]]>
   </mx:Script>
   <mx:HTTPService 
       id="nazwaSerwisu"
       url="http://adres.serwera" 
       method="GET"
       resultFormat="e4x"
       result="resultHandler(event);"
       fault="faultHandler(event);"
   />

WebServices

   <mx:Script>
       <![CDATA[
           import mx.rpc.events.ResultEvent;
           import mx.rpc.events.FaultEvent;
           
           private function getData():void
           {
               webService.nazwaMetody.send();
           }
                       
           private function result(evt:ResultEvent):void {
               //Tu nastepuje obsluga danych odebranych z metody
           }
           
           private function fault(evt:FaultEvent):void {
               //Tu nastepuje obsluga bledu polaczenia
           }
       ]]>
   </mx:Script>
   
   <mx:WebService id="webService"
           wsdl="http://adres.do.wsdla">
       <mx:operation name="nazwaMetody"
               resultFormat="object"
               result="result(event);"
               fault="fault(event);" />
   </mx:WebService>

RemoteObjects

   <mx:Script>
       <![CDATA[
           import mx.rpc.events.ResultEvent;
           import mx.rpc.events.FaultEvent;
           
           private function getData():void
           {
               remoteObjectId.nazwaMetody();
           }
                       
           private function result(evt:ResultEvent):void {
               //Tu nastepuje obsluga danych odebranych z metody
           }
           
           private function fault(evt:FaultEvent):void {
               //Tu nastepuje obsluga bledu polaczenia
           }
       ]]>
   </mx:Script>
   
   <mx:RemoteObject id="remoteObjectId"
      showBusyCursor="true">
      <mx:method name="nazwaMetody"
             result="result(event)"
             fault="fault(event)"/>
   </mx:RemoteObject>

Materiały dodatkowe:

http://www.dehats.com/drupal/?q=node/33

http://livedocs.adobe.com/flex/3/html/data_access_1.html

http://www.ibm.com/developerworks/webservices/library/ws-macroflex/

http://www.onjava.com/pub/a/onjava/2004/12/01/flexjava.html?page=1

Ćwiczenie 3: Dodanie połączenia z serwerem do aplikacji

Celem ćwiczenia jest dodanie pobierania danych z serwera do napisanej wcześniej aplikacji. Dane należy pobrać z pliku http://students.mimuw.edu.pl/~pj248401/dane.xml i zapisać na zmienną typu XMLList. Następnie należy użyć zmiennej z danymi jako dostawcy danych dla DataGrid'a.

Wskazówka

Wskazówka

Rozwiązanie

Cairngorm Framework MVC

Cairngorm jest frameworkiem wspierającym pisanie aplikacji we Flex'ie zgodnie z wzorcem mikroarchitektonicznym Model-Widok-Kontroler.

http://www.adobe.com/devnet/flex/articles/cairngorm_pt1.html - obszerny artykuł wprowadzający do Cairngorma.

http://www.cairngormdocs.org/tools/CairngormDiagramExplorer.swf - diagram przepływu danych we frameworku.

http://jessewarden.com/2007/08/10-tips-for-working-with-cairngorm.html - artykuł "10 rad do pracy z Cairngormem".

http://weblogs.macromedia.com/swebster/archives/2006/08/why_i_think_you.html - artykuł "5 powodów dlaczego nie należy używać Cairngorma".

Ciekawe linki

http://www.adobe.com/devnet/flex/videotraining/ - tygodniowy kurs wideo dla developerów Flex'a

http://livedocs.adobe.com/flex/3/html/help.html?content=Part2_DevApps_1.html - podręcznik dla developera

http://livedocs.adobe.com/flex/3/langref/index.html - Adobe Flex Language Reference

http://livedocs.adobe.com/flex/3/html/help.html?content=Part1_Using_FB_1.html - podręcznik używania FlexBuildera

http://www.adobe.com/devnet/flex/articles/flex_hibernate.html - Jak zbudować aplikację z następujących klocków: Adobe Flex, BlazeDS, and Hibernate JPA on Tomcat and MySQL

http://flexme.wordpress.com/2007/07/11/internationalization-in-flex/ - opis jak zrobić internacjonalizację we Flex'ie