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



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

Narzędzia i aplikacje Java EE. Usługi sieciowe Paweł Czarnul pczarnul@eti.pg.gda.pl

JDK 7u25 NetBeans Zajęcia 1 strona - 1

Zaawansowane aplikacje internetowe

Tworzenie natywnych aplikacji na urządzenia mobilne - PhoneGap Tomasz Margalski

Java jako język programowania

Google Web Toolkit. Piotr Findeisen

XML extensible Markup Language. część 5

Sposoby tworzenia projektu zawierającego aplet w środowisku NetBeans. Metody zabezpieczenia komputera użytkownika przed działaniem apletu.

Podstawy JavaScript ćwiczenia

Audio i Video w HTML5

- dodaj obiekt tekstowy: /** Maciej */ Stage { title : "First JavaFX App" scene: Scene { width: 300 height: 300 content: [ ] } }

TECHNOLOGIE SIECI WEB

WYKONANIE APLIKACJI OKIENKOWEJ OBLICZAJĄCEJ SUMĘ DWÓCH LICZB W ŚRODOWISKU PROGRAMISTYCZNYM. NetBeans. Wykonał: Jacek Ventzke informatyka sem.

Programowanie obiektowe

Java Platform Micro Edition

WPROWADZENIE DO JĘZYKA JAVA

Wybrane Działy Informatyki Stosowanej LABORATORIUM 1.

Tworzenie Stron Internetowych. odcinek 9

Programowanie Urządzeń Mobilnych. Laboratorium nr 7, 8

Aplikacje WWW - laboratorium

Wybrane działy Informatyki Stosowanej

[Android] Podstawy programowania

I2: J2ME programowanie w NetBeans IDE Wydział Transportu PW semestr /11

Co to jest NODE.JS? Nowoczesne środowisko programistyczne

Tworzenie projektu zawierającego aplet w środowisku NetBeans. lab1. Dr inż. Zofia Kruczkiewicz Programowanie aplikacji internetowych

Zaawansowane aplikacje internetowe - laboratorium Architektura CORBA.

TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty

Funkcje i instrukcje języka JavaScript

Instrukcja użytkownika Platforma transakcyjna mforex Trader dla systemu Linux

Wybrane działy Informatyki Stosowanej

Henryk Budzisz. materiały przygotowane w ramach projektu ZPORR nr POKL /08-00

Instrukcja tworzenia aplikacji EE na bazie aplikacji prezentowanej na zajęciach lab.4 z PIO umożliwiająca przez sieć dostęp wielu użytkownikom.

Warsztaty AVR. Instalacja i konfiguracja środowiska Eclipse dla mikrokontrolerów AVR. Dariusz Wika

Laboratorium 1 Wprowadzenie do PHP

ZSBD ćwiczenie 4. Obiektowe systemy zarządzania bazą danych. Przygotowanie środowiska pracy. Wymagania: ZSBD ćwiczenie 4

Wykład 03 JavaScript. Michał Drabik

Aplikacje WWW - laboratorium

Dokumentacja Skryptu Mapy ver.1.1

Przykłady tworzenia aplikacji komponentowych w technologii JavaServer Faces 2.1 na podstawie

Aplikacje WWW - laboratorium

Zajęcia 4 - Wprowadzenie do Javascript

Język JAVA podstawy. wykład 1, część 2. Jacek Rumiński. Politechnika Gdańska, Inżynieria Biomedyczna

plansoft.org Zmiany w Plansoft.org

Tworzenie nowoczesnych serwisów internetowych z wykorzystaniem Vine/Flex/BlazeDs

Git, Bitbucket, IntelliJ IDEA

Dokumentacja kompilacji źródeł aplikacji 1.0

Zastosowanie komponentów EJB typu Session

Architektury Usług Internetowych. Laboratorium 2. Usługi sieciowe

Zaawansowane aplikacje internetowe laboratorium REST

Kompresja stron internetowych

Projektowanie aplikacji internetowych laboratorium

1. Czynności przygotowujące aplikację działającą na platformie Java SE Biblioteka5 (należy ją pobrać z załącznika z p.1)

Zdarzenia Zdarzenia onload i onunload

Ćwiczenie 1. Przygotowanie środowiska JAVA

Materiały oryginalne: ZAWWW-2st1.2-l11.tresc-1.0kolor.pdf. Materiały poprawione

XML extensible Markup Language. część 5

PROGRAMOWANIE W ŚRODOWISKU FLASH wykład 3

MeetingHelper. Aplikacja Android ułatwiająca przekazywanie materiałów pomiędzy uczestnikami spotkania. Instrukcja obsługi dla programisty

Aplikacje WWW - laboratorium

Instrukcja instalacji aplikacji Comarch Smart Card ToolBox

Dokumentacja imapliteapi

JAVA. Java jest wszechstronnym językiem programowania, zorientowanym. apletów oraz samodzielnych aplikacji.

Załącznik 1 instrukcje instalacji

Zaawansowane aplikacje internetowe - laboratorium Architektura Spring.

1.Wstęp. 2.Generowanie systemu w EDK

Wprowadzenie do laboratorium. Zasady obowiązujące na zajęciach. Wprowadzenie do narzędzi wykorzystywanych podczas laboratorium.

Flex 3. Piotr Strzelczyk Wydział EAIiE Katedra Automatyki. Kraków, 2008

How To? Konfiguracja podglądu strumienia z kamer IP ACTi

Testowanie podstawowej konfiguracji serwera w środowisku NetBeans

MVC w praktyce tworzymy system artykułów. cz. 2

Narzędzia i platformy programowania w Internecie

Instrukcja instalacji aplikacji Comarch Smart Card ToolBox

Instytut Chemii Bioorganicznej PAN Poznańskie Centrum Superkomputerowo-Sieciowe

Zaawansowane aplikacje internetowe - laboratorium Architektura CORBA.

Instalacja Wirtualnego Serwera Egzaminacyjnego

Aktualizacja dodatku Saba Security Plugin w przeglądarce Firefox 56

Wczytywanie cenników z poziomu programu Norma EXPERT Tworzenie własnych cenników w programie Norma EXPERT... 4

Wybrane działy Informatyki Stosowanej

Javadoc. Piotr Dąbrowiecki Sławomir Pawlewicz Alan Pilawa Joanna Sobczyk Alina Strachocka

Wprowadzenie. 1. Terminal WebRTC. LABORATORIUM 5: WebRTC komunikacja między terminalami.

Laboratorium Kierunki Rozwoju oprogramowania REST, Django

Java Podstawy. Michał Bereta

Systemy zarządzania produkcją - MES

Aplikacje internetowe - laboratorium

Szybko, prosto i tanio - ale czy na pewno?

Podstawy programowania w języku JavaScript

Zaawansowane aplikacje internetowe laboratorium

Ilość cyfr liczby naturalnej

Jak wygenerować, sprawdzić i wysłać JPK?

Aktualizacja dodatku Saba Security Plugin w przeglądarce Firefox 56

Laboratorium 6 Tworzenie bloga w Zend Framework

D:\DYDAKTYKA\ZAI_BIS\_Ćwiczenia_wzorce\04\04_poprawiony.doc 2009-lis-23, 17:44

Spis treści. 1 Aplet. 2 Od aplikacji do apletu. 1 Aplet 1. 2 Od aplikacji do apletu 1. 3 Budowa apletu 3. 4 Cykl życia apletu 4

Programowanie w języku Java dla urządzeń BlackBerry z pomocą Blackberry JDE Plugin for Eclipse

Instrukcja instalacji oprogramowania dla środowiska Linux

Program Total Commander można pobrać np. ze strony

Podstawy, środowisko JDK, kompilacja programów z linii poleceń

Transkrypt:

FLEX (16.03.2013) Przygotowanie środowiska developerskiego 1. Uruchomić system operacyjny Linux 2. Pliki z pkt 3 oraz 5 dostępne są pod adresem http://kask.eti.pg.gda.pl/studium/ 3. Pobrać ze strony http://www.adobe.com/devnet/flex/flex-sdk-download-all.html najnowsze SDK (Software Development Kit) FLEX 4. Rozpakować zawartość w folderze ~/flex 5. Pobrać ze strony http://sourceforge.net/projects/flexbean/files/flexbean/ 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 4. 8. 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="http://www.adobe.com/2006/mxml"> <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

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="http://www.adobe.com/2006/mxml" 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" />

</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 (http://localhost/...) Komunikacja Javascript->Flex Funkcja Javascript function wywolaj(){ var elem = document.getelementbyid("swf"); elem.wywolajflash(document.getelementbyid("inputtext").value);

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="http://www.adobe.com/2006/mxml" 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%" >

<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 (http://localhost/..) 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