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.)

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

Cam ce o să facem la acest cerc ?

• Î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)

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

Cam ce o să facem la acest cerc ?

• 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

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

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]

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

GO GO GO ….

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

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;

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

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;

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

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

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

Ce este RIA ?

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

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

Î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.info.uaic.ro/~flash 12

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

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

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

aspx

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

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

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

rowse

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

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

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

ed_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/index.

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

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

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

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

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

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

Produse Adobe

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

• 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

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

• 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

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

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

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

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

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

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:

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

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

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

Primul cod…

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

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

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

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

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

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

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

Toate datele din AS3 sunt considerate obiecte.

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

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

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

Clasele sunt “definiții” ale obiectelor.

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

Aici definim clasa pentru aplicația noastră:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Să vedem cum compilăm codul…

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

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

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.

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

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)

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

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://www.info.uaic.ro/~flash 43

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)

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

Întrebări ?