Cercul de Rich Internet Applications

1. Cercul de Rich Internet Applications Facultatea de Informatică Iași

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 (sharedobjects, ByteArrayîn AIR, XML, SQL.) • Conectivitate în ActionScript 3 Orice 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ă  • NUprimim puncte la Java [ș-acum vreo doi sigur se ridică și pleacă oftând] http://www.info.uaic.ro/~flash

6. GO GOGO …. 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.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://www.facebook.com etc … ? http://www.info.uaic.ro/~flash

12. În ce putem să realizăm aplicații RIA? • Microsoft Silverlight • http://flashenabledblog.com/2007/07/09/from-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/mediabrowse 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/#/augmented_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. Flash – istoric • 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) http://www.info.uaic.ro/~flash

19. Flex – 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 http://www.info.uaic.ro/~flash

20. Browser Flash Player Flex SDK SOAP HTTP/S AMF/S RTMP/S Web Server XML/HTTP REST SOAP Web Services LC Data Services J2EE Application Server Existing Applications & Infrastructure Flex Flex Builder IDE MXML ActionScript Flex Class Library Compile http://www.info.uaic.ro/~flash

21. Puteţirealizaaplicaţii Flash cu: • 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 http://www.info.uaic.ro/~flash

22. Puteţirealizaaplicaţii Flash cu: Dar și altele: FlashDevelop, Crimson Editor, EmeraldEditor, Eclipse + FDT, Eclipse + ASDT/AXDT, Eclipse + Aptana, Aptana Studio, SEPY, SciTE, Dreqmweaveretc. 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 AuthoringTool 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 ? http://www.info.uaic.ro/~flash