http www infoiasi roflashprezentaricerc Tehnologii RIA Cosmin Varlan

http: //www. infoiasi. ro/~flash/prezentari_cerc Tehnologii RIA Cosmin Varlan Cosmin Vârlan 1

http: //www. infoiasi. ro/~flash/prezentari_cerc Rich Internet Applications • Rich Internet applications (RIAs) offer a rich, engaging experience that improves user satisfaction and increases productivity. Using the broad reach of the Internet, RIAs can be deployed across browsers and desktops. (sursa: www. adobe. com) Cosmin Vârlan 2

http: //www. infoiasi. ro/~flash/prezentari_cerc Rich Internet Applications - tech • Java Script / AJAX ( +SVG ) = RIA [ex: gmail, noul Yahoo mail] • Microsoft Silverlight = RIA [chrome? ] http: //www. theregister. co. uk/2008/08/18/sil verlight_pros_and_cons/ http: //memorabilia. hardrock. com/ • Adobe Flash, Flex, AIR? = RIA restul … (poate exista si altele) Cosmin Vârlan 3

http: //www. infoiasi. ro/~flash/prezentari_cerc Rich Internet Applications Cosmin Vârlan 4

http: //www. infoiasi. ro/~flash/prezentari_cerc Rich Internet Applications - Flash = Adobe Flash CS 3 Cosmin Vârlan 5

http: //www. infoiasi. ro/~flash/prezentari_cerc Rich Internet Applications - Flash + Crearea de obiecte vectoriale + Permite crearea animatiilor in modul de editare timeline + Atasare de comportamente obiectelor + OOP Cosmin Vârlan 6

http: //www. infoiasi. ro/~flash/prezentari_cerc Rich Internet Applications - Flash + Dimensiuni mici + Independenta de platforma - Sa aiba player flash instalat - Vectori multi -> procesor incarcat - Incompatibilitatea cu motoarele de cautare (pentru text static) Cosmin Vârlan 7

http: //www. infoiasi. ro/~flash/prezentari_cerc Rich Internet Applications - Flex • Mediu de programare pentru AS 3 • Nu permite editarea grafica a obiectelor (editorul in schimb este “prea tare”) • Putem realiza proiecte tip Flex / Action. Script • Bazat pe Eclipse (editor java) Cosmin Vârlan 8

http: //www. infoiasi. ro/~flash/prezentari_cerc Rich Internet Applications - AIR • http: //www. adobe. com/resources/business/ri ch_internet_apps/getting_started/ Adauga o serie de bibliotei suplimentare flexului pentru a permite crearea de aplicatii desktop utilizand AS 3. Cosmin Vârlan 9

http: //www. infoiasi. ro/~flash/prezentari_cerc Ce vom utiliza ? Cosmin Vârlan 10

http: //www. infoiasi. ro/~flash/prezentari_cerc Ce vom utiliza ? Cosmin Vârlan 11

http: //www. infoiasi. ro/~flash/prezentari_cerc Cosmin Vârlan 12

http: //www. infoiasi. ro/~flash/prezentari_cerc Cosmin Vârlan 13

http: //www. infoiasi. ro/~flash/prezentari_cerc Cosmin Vârlan 14

http: //www. infoiasi. ro/~flash/prezentari_cerc Cosmin Vârlan 15

http: //www. infoiasi. ro/~flash/prezentari_cerc Cosmin Vârlan 16

http: //www. infoiasi. ro/~flash/prezentari_cerc Eu sunt o clasa Cosmin Vârlan 17

http: //www. infoiasi. ro/~flash/prezentari_cerc Am numele proiectului si sunt salvata in fisierul “Nume. Proiect. as” Cosmin Vârlan 18

http: //www. infoiasi. ro/~flash/prezentari_cerc Si aproape mereu voi extinde clasa “Sprite” Cosmin Vârlan 19

http: //www. infoiasi. ro/~flash/prezentari_cerc Oare ce insemna “Sprite” ? !? ! Cosmin Vârlan 20

http: //www. infoiasi. ro/~flash/prezentari_cerc Cosmin Vârlan Imi zice aceasta comanda (care e la fel ca include din C, C++) 21

http: //www. infoiasi. ro/~flash/prezentari_cerc Impreuna cu mai multe clase ce-mi seamana, pot forma un pachet Cosmin Vârlan 22

http: //www. infoiasi. ro/~flash/prezentari_cerc Daca as face parte dintr-un pachet, as fi trecut si numele acestuia… Cosmin Vârlan 23

http: //www. infoiasi. ro/~flash/prezentari_cerc La fel ca orice clasa (Din C++, Java, etc) am un constructor Cosmin Vârlan 24

http: //www. infoiasi. ro/~flash/prezentari_cerc Flex a fost de treaba, a scris totul pentru mine… (chiar si constuctorul) Cosmin Vârlan 25

http: //www. infoiasi. ro/~flash/prezentari_cerc Constructorul este functia pe care o execut de fiecare data cand sunt instantiata Cosmin Vârlan 26

http: //www. infoiasi. ro/~flash/prezentari_cerc Constructorul are mereu acelasi nume ca si clasa din care face parte… Cosmin Vârlan 27

http: //www. infoiasi. ro/~flash/prezentari_cerc Prima noastra variabilaaaaaaa…. Salut, eu sunt o variabila ! (de tip String ) Cosmin Vârlan 28

http: //www. infoiasi. ro/~flash/prezentari_cerc Prima noastra variabilaaaaaaa…. Din cauza ca sunt de tip String, pot tine minte “texte” Cosmin Vârlan 29

http: //www. infoiasi. ro/~flash/prezentari_cerc Prima noastra variabilaaaaaaa…. Mi-ar place sa am valoarea: “Hello World” Cosmin Vârlan 30

http: //www. infoiasi. ro/~flash/prezentari_cerc Prima noastra variabilaaaaaaa…. done… Cosmin Vârlan 31

http: //www. infoiasi. ro/~flash/prezentari_cerc Primul textfield ………………. Cosmin Vârlan Eu sunt un obiect de tip Text. Field si pot afisa ceva intr-o zona ecran 32

http: //www. infoiasi. ro/~flash/prezentari_cerc Primul textfield ………………. Nu te cunosc ! Cosmin Vârlan 33

http: //www. infoiasi. ro/~flash/prezentari_cerc Primul textfield Cosmin Vârlan O sa marchez linia pe care esti cu rosu (sa te vada programatoru’) 34

http: //www. infoiasi. ro/~flash/prezentari_cerc Primul textfield Cosmin Vârlan Paiii. . Sa-ti dau cartea mea de vizita: import flash. text. Text. Field; 35

http: //www. infoiasi. ro/~flash/prezentari_cerc Primul textfield Toate importurile se fac inainte de declararea clasei Cosmin Vârlan 36

http: //www. infoiasi. ro/~flash/prezentari_cerc Primul textfield Cosmin Vârlan Perfect, acum stiu totul despre tine. . . [ce poti sa faci, ce proprietati ai … TOT] 37

http: //www. infoiasi. ro/~flash/prezentari_cerc Primul textfield Cosmin Vârlan Pentru a putea exista pe ecran, am nevoie de fiu instantiat apoi adaugat in lista obiectelor afisate… 38

http: //www. infoiasi. ro/~flash/prezentari_cerc Primul textfield Cosmin Vârlan De fapt eu e. Xist ca variabila dar nu am o zona de memorie in care sa imi tin “catrafusele” 39

http: //www. infoiasi. ro/~flash/prezentari_cerc Primul textfield Cosmin Vârlan Operatorul “new” poate crea un nou obiect in memorie si daca voi fi atibuit acestui obiect. . ar fi PERFECT 40

http: //www. infoiasi. ro/~flash/prezentari_cerc Primul textfield Cosmin Vârlan Pe langa a crea un obiect, eu apelez si constructorul acestuia… adica Text. Field() 41

http: //www. infoiasi. ro/~flash/prezentari_cerc Primul textfield Cum ramane cu adaugarea pe ecran ? !? ! Cosmin Vârlan 42

http: //www. infoiasi. ro/~flash/prezentari_cerc Rezolv eu astaaaa… Cosmin Vârlan 43

http: //www. infoiasi. ro/~flash/prezentari_cerc Da tu cine esti ? ! Cosmin Vârlan 44

http: //www. infoiasi. ro/~flash/prezentari_cerc O metoda a clasei Sprite pe care tu o extinzi… daca extinzi o clasa, mostenesti toate proprietatile si metodele acelei clase… ai uitat deja ? ! Cosmin Vârlan 45

http: //www. infoiasi. ro/~flash/prezentari_cerc Scuze, ai dreptate… de fapt eu insumi sunt un Sprite si e firesc sa cunosc metoda add. Child (pentru ca este a mea) Cosmin Vârlan 46

http: //www. infoiasi. ro/~flash/prezentari_cerc Multumesc add. Child, acum sunt si eu pe ecran. Imi puteti completa proprietatea “text” pentru a afisa ceva… altfel sunt inutil Cosmin Vârlan 47

http: //www. infoiasi. ro/~flash/prezentari_cerc Proprietatea “text” este de tip String, eu voi afisa imediat textul dat ca valoare… Ati putea face ceva de genul: text. Field. text = mesaj; Cosmin Vârlan 48

http: //www. infoiasi. ro/~flash/prezentari_cerc Cosmin Vârlan 49

http: //www. infoiasi. ro/~flash/prezentari_cerc Asa mai merge… Cosmin Vârlan 50

http: //www. infoiasi. ro/~flash/prezentari_cerc OK, ar fi timpul sa facem o compilare: F 11 Cosmin Vârlan 51

http: //www. infoiasi. ro/~flash/prezentari_cerc Cosmin Vârlan 52

http: //www. infoiasi. ro/~flash/prezentari_cerc Cosmin Vârlan O singura chestie cred ca am uitat sa zic. . Ce inseamna “public” care apare ici si colo… 53

http: //www. infoiasi. ro/~flash/prezentari_cerc Cosmin Vârlan Cand pun “public” in fata unei metode sau proprietati, voi face acea met/prop sa poata fi accesata si de alte obiecte nu numai de mine 54

http: //www. infoiasi. ro/~flash/prezentari_cerc Eu nu am “public”… de ce ? !? ! Cosmin Vârlan 55

http: //www. infoiasi. ro/~flash/prezentari_cerc Cosmin Vârlan Variabilele sau functiile din cadrul metodelor nu pot avea “public” sau nimic altceva. Ele vor fi accesibile numai in cadrul metodei in care au definite (adica scopul 56 lor este numai acea metoda)

http: //www. infoiasi. ro/~flash/prezentari_cerc Mai exista si altceva inafara de “public” ? ! Cosmin Vârlan 57

http: //www. infoiasi. ro/~flash/prezentari_cerc Da: public, private, protected, internal… Aceste cuvinte cheie se numesc “Modificatori de acces” Cosmin Vârlan 58

http: //www. infoiasi. ro/~flash/prezentari_cerc Niceee… ce inseamna fiecare ? : D Cosmin Vârlan 59

http: //www. infoiasi. ro/~flash/prezentari_cerc public: accesibil de oriunde; private: accesibil numai in clasa curenta; protected: accesibil in clasa curenta si in cele ce o extind; Cosmin Vârlan 60 internal: accesibil numai in cadrul pachetului

http: //www. infoiasi. ro/~flash/prezentari_cerc Vreau si eu un modificator de acces, ce-mi recomanzi ? ! Cosmin Vârlan 61

http: //www. infoiasi. ro/~flash/prezentari_cerc Cosmin Vârlan - Deoarece alte clase nu cred ca le intereseaza ce reprezinti, recomand private… Numai ca trebuie sa te scot inafara constructorului , esti de acord? 62

http: //www. infoiasi. ro/~flash/prezentari_cerc DA ! Cosmin Vârlan 63

http: //www. infoiasi. ro/~flash/prezentari_cerc Cosmin Vârlan 64

http: //www. infoiasi. ro/~flash/prezentari_cerc Acum pot fi accesat si din alte metode din aceasta clasa, nu numai din constructor, nu ? Cosmin Vârlan 65

http: //www. infoiasi. ro/~flash/prezentari_cerc Da Cosmin Vârlan 66

http: //www. infoiasi. ro/~flash/prezentari_cerc In cazul in care modificatorul de acces lipseste pentru o metoda sau proprietate, este considerata public Cosmin Vârlan 67

http: //www. infoiasi. ro/~flash/prezentari_cerc Recapitulare… & Codding… Cosmin Vârlan 68

http: //www. infoiasi. ro/~flash/prezentari_cerc Creati un nou proiect: Interactiune • Dati click dreapta pe numele proiectului, selectati optiunea New apoi Folder • Noul director se va numi “classes” • Dati click dreapta pe directorul classes si selectati optiunea New apoi Action. Script Class • Denumiti clasa “Minge” dupa care apasati Finish. • Proiectul va contine doua clase in fisierele: Interactiune. as si Minge. as (ultimul aflat in directorul “classes”) Cosmin Vârlan 69

http: //www. infoiasi. ro/~flash/prezentari_cerc Interactiune. as – pasul 1 Cosmin Vârlan 70

http: //www. infoiasi. ro/~flash/prezentari_cerc Interactiune. as – pasul 1 Cosmin Vârlan Asa se importa o clasa din pachetul classes… 71

http: //www. infoiasi. ro/~flash/prezentari_cerc Interactiune. as – pasul 1 Facem un obiect de tip Minge Cosmin Vârlan 72

http: //www. infoiasi. ro/~flash/prezentari_cerc Interactiune. as – pasul 1 Il adaugam in lista obiectelor ce vor fi afisate Cosmin Vârlan 73

http: //www. infoiasi. ro/~flash/prezentari_cerc Interactiune. as – pasul 1 Minge va extinde sprite si din cauza asta are proprietatile x, y = pozitia pe ecran… Cosmin Vârlan 74

http: //www. infoiasi. ro/~flash/prezentari_cerc Interactiune. as – pasul 1 Cosmin Vârlan 75

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 1 Cosmin Vârlan 76

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 1 Cosmin Vârlan Aceasta clasa nu mai extinde automat Sprite dar putem noi face acest lucru: 77

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 1 Cosmin Vârlan Daca am scris ca extinde Sprite, Flex-ul ne ajuta si scrie el singur importul 78

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 1 Cosmin Vârlan Vom face o figura ce va fi colorata cu rosu (0 xff 0000) si va fi opaca (opacitatea = 1 inseamna complet opaca) 79

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 1 Cosmin Vârlan Figura va fi un cerc. Deoarece acestea sunt scrise in constructor, vor fi apelate de new Minge() – din Interactiune. as 80

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 1 Cosmin Vârlan F 11 81

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 2 (adaugarea miscarii) Cosmin Vârlan 82

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 2 (adaugarea miscarii) La fiecare 10 ms va fi apelata metoda misca Cosmin Vârlan 83

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 2 (adaugarea miscarii) Importul pentru set. Interval este facut automat de Flex Cosmin Vârlan 84

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 2 (adaugarea miscarii) Functia “misca“ va deplasa putin mai in dreapta obiectul curent Cosmin Vârlan 85

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 2 (adaugarea miscarii) Va fi accesibila numai din aceasta clasa… Cosmin Vârlan 86

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 2 (adaugarea miscarii) Si va modifica pozitia pe X a mingei Cosmin Vârlan 87

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 2 (adaugarea miscarii) Tot aici am putea face ceva de genu: if ( this. x > 400) this. x = 0; (in acest fel mingea nu ar mai parasi ecranul) Cosmin Vârlan 88

http: //www. infoiasi. ro/~flash/prezentari_cerc Minge. as – pas 2 (adaugarea miscarii) Cosmin Vârlan 89

http: //www. infoiasi. ro/~flash/prezentari_cerc Interactiune. as – pasul 2 Cosmin Vârlan 90

http: //www. infoiasi. ro/~flash/prezentari_cerc Interactiune. as – pasul 2 Urmarim cand se apasa pe minge Cosmin Vârlan 91

http: //www. infoiasi. ro/~flash/prezentari_cerc Interactiune. as – pasul 2 Si apelam metoda reset. Pos cand se intampla acest lucru Cosmin Vârlan 92

http: //www. infoiasi. ro/~flash/prezentari_cerc Interactiune. as – pasul 2 Care duce mingea apelanta in pozitia initiala Cosmin Vârlan 93

http: //www. infoiasi. ro/~flash/prezentari_cerc Interactiune. as – pasul 2 Importul pentru eveniment este facut iarasi automat (de Flex) Cosmin Vârlan 94

http: //www. infoiasi. ro/~flash/prezentari_cerc Interactiune. as – pasul 2 Cosmin Vârlan 95

http: //www. infoiasi. ro/~flash/prezentari_cerc Interactiune. as – pasul 3 Cosmin Vârlan 96

http: //www. infoiasi. ro/~flash/prezentari_cerc Tema… • Modificati ultima aplicatie astfel: - Constuiti in minge. as o variabila privata de tip Number cu numele “speed” a carei valoare va fi setata aleator (asa cum am setat in Interactiune. as pozitia bilelor) - In Interactiune. as introduceti un text. Field ce va afisa un scor ce va fi incrementat de fiecare data cand o minge este apasata - Nu lasati bilele sa iasa din ecran (este dat un pont in acest sens pe unul din slidurile anterioare) Cosmin Vârlan 97

http: //www. infoiasi. ro/~flash/prezentari_cerc Intrebari ? !? ! Cosmin Vârlan 98