cercul de rich internet applications introducere

Cercul de Rich Internet Applications

Facultatea de InformaticăIași

http://www.info.uaic.ro/~flash 2

Cam ce o să facem la acest cerc ?

• Învățăm să facem aplicații Flash (Flash, Flex, AIR) astfel:

- Curs introductiv- Variabile, metode și alte chestii “simpluțe” dar

fără de care nu se poate- Programare OOP- Obiectelor vizuale (scalare, vectoriale, text,

ierarhii, aplicarea de efecte, filtre, realizarea de animații etc.)



• Învățăm să facem aplicații Flash (Flash, Flex, AIR) astfel:

- Evenimente (producerea, tratarea)- Media (sunet, video)- Salvarea datelor (shared objects, ByteArray în

AIR, XML, SQL.)- Conectivitate în ActionScript 3Orice altceva vreți voi să facem (jocuri în Flash)



• Realizăm tutoriale [nu gratis :D]• Facem concursuri pe teme legate de Flash /

Flex / AIR• Puteți să prezentați* sau doar să căscați gura• Ieșim și la pizza – hrana de bază a oricărui

programator bun…• Noaptea devoratorilor de FLA :>)• Dacă rezistați până la sfârșit, primiți și diplome * Pentru a nu reduce nivelul cercului, este nevoie de aprobare din partea cuiva care cunoaște deja limbajul


Ce NU facem la acest cerc ?

• NU primim puncte la logică • NU primim puncte la Java

[ș-acum vreo doi sigur se ridică și pleacă oftând]


GO GO GO ….


Ce este RIA ?

• Caracteristicile unei aplicații “rich” sunt:• Să permită comunicarea cu unul sau mai

multe servere în scopul îmbunătățirii interacțiunii cu utilizatorul (exemplu cu AJAX);

• Poate fi utilizat offline numai dacă resursele adiționale au fost descărcate;


Ce este RIA ?

• Aplicațiile RIA au un nivel ridicat de complexitate

• Îmbunătățirea aplicațiilor Web prin adăugarea de opțiuni noi care nu existau înainte – de exemplu, comunicarea în timp real sau transmiterea de informații video preluate de la camera Web a utilizatorului;


Ce este RIA ?

• Indexate de către motoarele de căutare;• Procesarea datelor va fi realizată de către

client, în acest fel performanța aplicației Web va crește.

• Necesită instalarea unui software adițional ce va fi utilizat de navigator

• Sunt securizate în sensul de interzicerea interacțiunilor „neplăcute” cu sistemul de operare


Ce este RIA ?

• Aplicațiile RIA încearcă să facă tot mai invizibilă granița dintre aplicațiile desktop și cele care lucrează în browser


În ce putem să realizăm aplicații RIA?

• AJAX (Asynchronous Java Script and XML) [http://www.ajaxdaddy.com/]

http://www.ajaxdaddy.com/bouncer-demo.htmlhttp://www.ajaxdaddy.com/35mm-photo-viewer.htmlhttp://www.ajaxdaddy.com/demo-loupe.htmlhttp://www.google.comhttp://webdeveloper.econsultant.com/ajax-demos-examples-code-samples/http://www.facebook.cometc … ?

http://www.ajaxdaddy.com/

http://www.ajaxdaddy.com/bouncer-demo.html

http://www.ajaxdaddy.com/35mm-photo-viewer.html

http://www.ajaxdaddy.com/35mm-photo-viewer.html

http://www.ajaxdaddy.com/demo-loupe.html

http://www.google.com/

http://webdeveloper.econsultant.com/ajax-demos-examples-code-samples/

http://webdeveloper.econsultant.com/ajax-demos-examples-code-samples/

http://www.facebook.com/

http://www.facebook.com/



• Microsoft Silverlight• http://flashenabledblog.com/2007/07/09/fro

m-a-to-z-50-silverlight-applications/• http://www.microsoft.com/silverlight/default.

aspx

http://flashenabledblog.com/2007/07/09/from-a-to-z-50-silverlight-applications/

http://flashenabledblog.com/2007/07/09/from-a-to-z-50-silverlight-applications/

http://www.microsoft.com/silverlight/default.aspx

http://www.microsoft.com/silverlight/default.aspx



• Java / Java FX• http://www.javafx.com/launch/• http://www.javafx.com/docs/tutorials/mediab

rowse

http://www.javafx.com/launch/

http://www.javafx.com/docs/tutorials/mediabrowse

http://www.javafx.com/docs/tutorials/mediabrowse



• Adobe Flex / Flash / AIR• http://ge.ecomagination.com/smartgrid/#/augme

nted_realityhttp://www.mono-1.com/monoface/main.html

• http://dragonfly.labs.autodesk.com/• http://tankionline.com/battle.html• http://www.taaz.com/makeover.html• http://timesreader.nytimes.com/timesreader/inde

x.html?campaignId=34W88• http://aviary.com/• http://www.miniclip.com

http://ge.ecomagination.com/smartgrid/

http://ge.ecomagination.com/smartgrid/

http://www.mono-1.com/monoface/main.html

http://dragonfly.labs.autodesk.com/

http://tankionline.com/battle.html

http://www.taaz.com/makeover.html

http://timesreader.nytimes.com/timesreader/index.html?campaignId=34W88

http://timesreader.nytimes.com/timesreader/index.html?campaignId=34W88

http://aviary.com/

http://aviary.com/

http://www.miniclip.com/


În ce putem să realizăm aplicații RIA?(Adobe)


Produse Adobe


• SuperPaint• IntelliDraw (obiecte, comportamente)• SmartSketch (Creionul Optic) – 1993• FutureSplash Animator - 1995 > Flash 1.0 - 1996• Flash 2 (1997), Flash 3 (1998), Flash 4 (1999)• Flash 5 (2000) – AS1, Flash MX(2002), Flash MX

2004 (2003) – AS2, Flash 8 (2005)• Flash CS3 (2007), Flash CS4 (2008)

Flash – istoric


• Flex 1.0 – Martie 2004• Flex 2.0 – Iunie 2006• Flex 3.0 – Februarie 2008

Acum:• Flex 3.4.0.9271 | Flex 4 Milestone 1 4.0.0.7219

Flex – istoric


Flex

Flex Builder IDE

Flex SDK

Flex Class Library

MXML ActionScript

Compile

SOAP HTTP/S AMF/S RTMP/S

Web Server

Existing Applications & Infrastructure

J2EE Application Server

LC Data ServicesXML/HTTPRESTSOAP Web Services

Browser

Flash Player


• Adobe Flash Professional authoring tool (CS4)• Adobe Flex Builder (3) – gratuit (educaţie) la: https://freeriatools.adobe.com/• Adobe Flex SDK (3) – open la adresa:http://opensource.adobe.com

Puteţi realiza aplicaţii Flash cu:


Dar și altele: FlashDevelop, Crimson Editor, Emerald Editor, Eclipse + FDT, Eclipse + ASDT/AXDT, Eclipse + Aptana, Aptana Studio, SEPY, SciTE, Dreqmweaver etc.

Puteţi realiza aplicaţii Flash cu:


Tipuri de fișiere:

• AS – fișier ce conține cod ActionScript 3• FLA – fișier nativ Flash Authoring Tool ce conține

librăria, animațiile din scenă sau cod AS3• SWF – fișierul obținut în urma compilării unei

aplicații Flash conține un cod de octeți ce va fi interpretat de playerul Flash (browser, standalone)

• MXML – XML special utilizat pentru descrierea interfeței în aplicațiile Flex


Primul cod…


Trebuie să importăm o clasă pentru a o utiliza


Clasa Sprite este printre cele mai “renumite” în AS3


Toate datele din AS3 sunt considerate obiecte.


Chiar și aplicația noastră este un obiect…


Clasele sunt “definiții” ale obiectelor.


Aici definim clasa pentru aplicația noastră:


Clasa pe care am creat-o este intitulată “HelloWorld”


Este publică – în acest mod, oricine poate construi un obiect pe baza definiției (de care ziceam mai sus)


Ce înseamnă că extinde Sprite vom vedea în alt episod


Fiecare clasă are o funcție specială denumită constructor


Constructorul este executat primul atunci când este creat un obiect


Pentru a se diferenția de alte metode, constructorul are același nume ca și clasa.


Comanda trace afișează un mesaj în consolă


Să vedem cum compilăm codul…

• Secțiune aplicativăăăăă…..


Ce înseamnă că o clasă extinde altă clasă?

• Atunci când clasa A extinde clasa B spunem că A este subclasă a clasei B. Clasa B se numește superclasă pentru A.

• O subclasă “moștenește” proprietățile și metodele din superclasă.

• Există o multitudine de astfel de “extensii”, limbajul AS3 fiind construit în jurul unui obiect de bază: Object.


Ce înseamnă că o clasă extinde altă clasă?

• Aplicația noastră a trebuit să extindă Sprite pentru că fiecare aplicație Flash trebuie să aibă o zonă în care să se poată desena (care de multe ori este denumită “scenă”).

• Scena este un container grafic (pentru că Sprite este o extensie a DisplayObjectContainer)


AS3 Livedocs

• Cum se extind clasele puteți afla din pagina de manual pentru clasa respectivă. http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/




Ce puteți face cu un Sprite ?

Pentru a răspunde la întrebare, trebuie să cunoașteți ce puteți face cu toate clasele din lista

“Inheritance” (și nu numai – de exemplu clasa Graphics, Point)


Întrebări ?

cercul de rich internet applications introducere

Technology