FLEX ( ) Przygotowanie środowiska developerskiego Hello world w MXML Hello world w ActionScript

Wielkość: px

Rozpocząć pokaz od strony:

Download "FLEX (16.03.2013) Przygotowanie środowiska developerskiego Hello world w MXML Hello world w ActionScript"

Alina Kwiecień
8 lat temu
Przeglądów:

1 FLEX ( ) Przygotowanie środowiska developerskiego 1. Uruchomić system operacyjny Linux 2. Pliki z pkt 3 oraz 5 dostępne są pod adresem 3. Pobrać ze strony najnowsze SDK (Software Development Kit) FLEX 4. Rozpakować zawartość w folderze ~/flex 5. Pobrać ze strony plugin do Netbeansa 6. Uruchomić środowisko Netbeans IDE 7. W menu Tools->Plugins w zakładce Downloaded wybrać przycisk Add Plugin oraz wskazać plik *.nbm, który jest wtyczką do Netbeansa pobraną w punkcie Zainstalować zapoznając się z warunkami licencyjnymi. 9. Zrestartować środowisko Netbeans 10. W menu Tools->Flex Platforms wybrać Add Platform i wskazać rozpakowaną zawartość paczki pobranej w pkt 2 a rozpakowanej w pkt 3 (~/flex) 11. Nadać nazwę platformy i wybrać przycisk Ok 12. Środowisko jest gotowe do użycia Hello world w MXML 13. File->New Project->Flex->Flex Application 14. Nadać nazwę projektu (np. app1) 15. Wybrać z radiobuttona opcję Mxml 16. W oknie Projects w katalogu Sources projektu (app1) otworzyć plik Main.mxml 17. Wprowadzić następującą zawartość <mx:application xmlns:mx=" <mx:label text="hello World!" fontweight="bold" fontsize="20"/> 18. Skompilować aplikację (przycisk F6 lub zielony trójkąt) 19. Skompilowana aplikacja znajduje się w katalogu projektu w folderze build (aby zobaczyć gdzie Netbeans stworzył projekt prawym przyciskiem myszki na nazwę projektu- >Preferences) 20. Stworzony plik swf podejrzeć w przeglądarce internetowej Hello world w ActionScript 21. Tworzymy plik HelloWorld.as o następującej treści package { import flash.display.sprite; import flash.text.textfield; public class HelloWorld extends Sprite{ public function HelloWorld(){ var textfield:textfield = new TextField(); textfield.text = "Hello World!"; addchild(textfield); 22. Kompilujemy poleceniem wydawanym z terminala mxmlc HelloWorld.as 23. Zawartość pliku *.swf podglądamy w przeglądarce internetowej

Pobrać ze strony http://sourceforge.net/projects/flexbean/files/flexbean/ plugin do Netbeansa 6. Uruchomić środowisko Netbeans IDE 7.

2 Komunikacja Flex -> Javascript Wykorzystanie obiektu ExternalInterface. Wymaga wdrożenia aplikacji na serwerze Funkcja Javascript: function getnavigatorobject(keys) { <param name="allowscriptaccess" value="always samedomain" /> dla obiektu SWF Wywołanie funkcji Javascript z poziomu AS var arr:array = ExternalInterface.call("getNavigatorObject", keys); 24. Wykorzystanie obiektu typu ExternalInterface 25. Tworzymy plik flex.mxml o następującej zawartości <mx:application xmlns:mx=" layout="vertical" verticalalign="middle" backgroundcolor="white" viewsourceurl="index.html"> <mx:script> <![CDATA[ import mx.utils.objectutil; import mx.controls.alert; private function calljavascript():void { Alert.show('Ładowanie informacji o przeglądarce (Alert FLEX)!', 'Alert Box', mx.controls.alert.ok); var keys:array = "appcodename,appname,appversion,cookieenabled,language,platform,systemlanguage,us eragent,userlanguage".split(","); var arr:array = ExternalInterface.call("getNavigatorObject", keys); datagrid.dataprovider = arr; ]]> </mx:script> <mx:applicationcontrolbar dock="true"> <mx:button label="pobierz informacje o przeglądarce" click="calljavascript();" /> </mx:applicationcontrolbar> <mx:datagrid id="datagrid" variablerowheight="true" width="100%" height="100%" > <mx:columns> <mx:datagridcolumn datafield="key" width="120" /> <mx:datagridcolumn datafield="value" wordwrap="true" />

Javascript z poziomu AS var arr:array = ExternalInterface.call("getNavigatorObject", keys); 24. Wykorzystanie obiektu typu ExternalInterface 25. Tworzymy plik flex.

3 </mx:columns> </mx:datagrid> 26. Tworzymy plik javascriptowy pobierający informacje o przeglądarce function getnavigatorobject(keys) { alert("alert Javascript"); var arr = []; var i; var len = keys.length; var key; var value; for (i=0; i<len; i++) { key = keys[i]; value = navigator[key]; arr.push({key:key, value:value); return arr; 27. Tworzymy plik HTML, który będzie dołączał plik swf oraz js <html> <head> <script language="javascript" src="externalinterface.js"></script> </head> <body> <h1>osadzanie object</h1> <object type="application/x-shockwave-flash" data="helloworld.swf" id="swf" width="634" height="300" > <param name="movie" value="helloworld.swf" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="quality" value="high" /> <param name="bgcolor" value="#eeeeee" /> <param name="allowscriptaccess" value="always" /> </object> </body> 28. Podglądamy zawartość pliku HTML w przeglądarce internetowej ( Komunikacja Javascript->Flex Funkcja Javascript function wywolaj(){ var elem = document.getelementbyid("swf"); elem.wywolajflash(document.getelementbyid("inputtext").value);

Tworzymy plik HTML, który będzie dołączał plik swf oraz js <html> <head> <script language="javascript" src="externalinterface.

4 Callback AS ExternalInterface.addCallback("wywolajFlash",odbierzJavascript); Funkcja AS public function odbierzjavascript(str:string):void{ Alert.show('Odebrane '+str, 'Alert Box', mx.controls.alert.ok); 29. Modyfikujemy zawarość pliku mxml do następującej postaci <mx:application xmlns:mx=" layout="vertical" verticalalign="middle" backgroundcolor="white" viewsourceurl="index.html"> <mx:script> <![CDATA[ import mx.utils.objectutil; import mx.controls.alert; public function odbierzjavascript(str:string):void{ Alert.show('Odebrane '+str, 'Alert Box', mx.controls.alert.ok); private function calljavascript():void { Alert.show('Ładowanie informacji o przeglądarce (Alert FLEX)!', 'Alert Box', mx.controls.alert.ok); var keys:array = "appcodename,appname,appversion,cookieenabled,language,platform,systemlanguage,us eragent,userlanguage".split(","); ExternalInterface.addCallback("wywolajFlash",odbierzJavascript); keys); var arr:array = ExternalInterface.call("getNavigatorObject", ]]> </mx:script> datagrid.dataprovider = arr; <mx:applicationcontrolbar dock="true"> <mx:button label="pobierz informacje o przeglądarce" click="calljavascript();" /> </mx:applicationcontrolbar> <mx:datagrid id="datagrid" variablerowheight="true" width="100%" height="100%" >

com/2006/mxml" layout="vertical" verticalalign="middle" backgroundcolor="white" viewsourceurl="index.html"> <mx:script> <![CDATA[ import mx.utils.objectutil; import mx.controls.

5 <mx:columns> <mx:datagridcolumn datafield="key" width="120" /> <mx:datagridcolumn datafield="value" wordwrap="true" /> </mx:columns> </mx:datagrid> 29. plik html modyfikujemy do następującej postaci <html> <head> <script language="javascript" src="externalinterface.js"></script> </head> <body> <h1>osadzanie object</h1> <object type="application/x-shockwave-flash" data="helloworld.swf" id="swf" width="634" height="300" > <param name="movie" value="helloworld.swf" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="quality" value="high" /> <param name="bgcolor" value="#eeeeee" /> <param name="allowscriptaccess" value="always" /> </object> <input type="text" id="inputtext" /> <button onclick="wywolaj()">przycisk</button> <script type="text/javascript"> function wywolaj(){ var elem = document.getelementbyid("swf"); elem.wywolajflash(document.getelementbyid("inputtext").value); </script> </body> </html> 30. podglądamy zawartość pliku w przeglądarce internetowej ( 31. Kompilacja z linii poleceń: mxmlc HelloWorld.mxml w przypadku wystąpienia błędu (Error #2046) - mxmlc -static-link-runtime-shared-libraries=true HelloWorld.mxml - usunięcie katalogu ~/.adobe/flash_player/assetcache

js"></script> </head> <body> <h1>osadzanie object</h1> <object type="application/x-shockwave-flash" data="helloworld.swf" id="swf" width="634" height="300" > <param name="movie" value="helloworld.

Podobne dokumenty

Udostępnianie obrazu z kamer Sanyo HD na stronach WWW PORADNIK

PORADNIK Udostępnianie obrazu z kamer Sanyo HD na stronach WWW 1. Informacje wstępne Istnieje kilka sposobów wyświetlenia płynnego obrazu w formacie H.264 z kamer Sanyo z serii HD na dostępnych publicznie