Cercul de Rich Internet Applications<br />Facultatea de Informatică<br />Iași<br />
Cam ce o să facem la acest cerc ?<br />Învățăm să facem aplicații Flash (Flash, Flex, AIR) astfel:<br /><ul><li>Curs intro...
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.)</li></u...
Cam ce o să facem la acest cerc ?<br />Învățăm să facem aplicații Flash (Flash, Flex, AIR) astfel:<br /><ul><li>Evenimente...
Media (sunet, video)
Salvarea datelor (sharedobjects, ByteArrayîn AIR, XML, SQL.)
Conectivitate în ActionScript 3</li></ul>Orice altceva vreți voi să facem (jocuri în Flash)<br />http://www.info.uaic.ro/~...
Cam ce o să facem la acest cerc ?<br />Realizăm tutoriale[nu gratis :D]<br />Facem concursuri pe teme legate de Flash / Fl...
Ce NU facem la acest cerc ?<br />NU primim puncte la logică <br />NUprimim puncte la Java<br />[ș-acum vreo doi sigur se...
GO GOGO ….<br />6<br />http://www.info.uaic.ro/~flash<br />
Ce este RIA ?<br />Caracteristicile unei aplicații “rich” sunt:<br />Să permită comunicarea cu unul sau mai multe servere ...
Ce este RIA ?<br />Aplicaţiile RIA au un nivel ridicat de complexitate<br />Îmbunătăţirea aplicaţiilor Web prin adăugarea ...
Ce este RIA ?<br />Indexate de către motoarele de căutare;<br />Procesarea datelor va fi realizată de către client, în ace...
Ce este RIA ?<br />Aplicațiile RIAîncearcă să facă tot mai invizibilă granița dintre aplicațiile desktop și cele care lucr...
În ce putem să realizăm aplicații RIA?<br />AJAX (Asynchronous Java Script and XML) [http://www.ajaxdaddy.com/]<br />http:...
În ce putem să realizăm aplicații RIA?<br />Microsoft Silverlight<br />http://flashenabledblog.com/2007/07/09/from-a-to-z-...
În ce putem să realizăm aplicații RIA?<br />Java / Java FX<br />http://www.javafx.com/launch/<br />http://www.javafx.com/d...
În ce putem să realizăm aplicații RIA?<br />Adobe Flex / Flash / AIR<br />http://ge.ecomagination.com/smartgrid/#/augmente...
În ce putem să realizăm aplicații RIA?<br />15<br />http://www.info.uaic.ro/~flash<br />
În ce putem să realizăm aplicații RIA?(Adobe)<br />16<br />http://www.info.uaic.ro/~flash<br />
Produse Adobe<br />17<br />http://www.info.uaic.ro/~flash<br />
Flash – istoric<br />SuperPaint<br />IntelliDraw (obiecte, comportamente)<br />SmartSketch (Creionul Optic) – 1993<br />Fu...
Flex – istoric<br />Flex 1.0 – Martie 2004<br />Flex 2.0 – Iunie 2006<br />Flex 3.0 – Februarie 2008<br />Acum:<br />Flex ...
Browser<br />Flash Player<br />Flex SDK<br />SOAP<br />HTTP/S<br />AMF/S<br />RTMP/S<br />Web Server<br />XML/HTTP<br />RE...
Puteţirealizaaplicaţii Flash cu:<br />Adobe Flash Professional authoring tool (CS4)<br />Adobe Flex Builder (3) – gratuit ...
Puteţirealizaaplicaţii Flash cu:<br />Dar și altele: FlashDevelop, Crimson Editor,  EmeraldEditor, Eclipse + FDT, Eclipse ...
Tipuri de fișiere:<br />AS – fișier ce conține cod ActionScript 3<br />FLA – fișier nativ Flash AuthoringTool ce conține l...
Primul cod…<br />24<br />http://www.info.uaic.ro/~flash<br />
Trebuie să importăm o clasă pentru a o utiliza<br />25<br />http://www.info.uaic.ro/~flash<br />
Clasa Sprite este printre cele mai “renumite” în AS3<br />26<br />http://www.info.uaic.ro/~flash<br />
Clasa Sprite este printre cele mai “renumite” în AS3<br />27<br />http://www.info.uaic.ro/~flash<br />
Toate datele din AS3 sunt considerate obiecte.<br />28<br />http://www.info.uaic.ro/~flash<br />
Chiar și aplicația noastră este un obiect…<br />29<br />http://www.info.uaic.ro/~flash<br />
Clasele sunt “definiții” ale obiectelor.<br />30<br />http://www.info.uaic.ro/~flash<br />
Aici definim clasa pentru aplicația noastră:<br />31<br />http://www.info.uaic.ro/~flash<br />
Clasa pe care am creat-o este intitulată “HelloWorld”<br />32<br />http://www.info.uaic.ro/~flash<br />
Este publică – în acest mod, oricine poate construi un obiect pe baza definiției (de care ziceam mai sus)<br />33<br />htt...
Ce înseamnă că extinde Sprite vom vedea în alt episod<br />34<br />http://www.info.uaic.ro/~flash<br />
Fiecare clasă are o funcție specială denumită constructor<br />35<br />http://www.info.uaic.ro/~flash<br />
Constructorul este executat primul atunci când este creat un obiect<br />36<br />http://www.info.uaic.ro/~flash<br />
Pentru a se diferenția de alte metode, constructorul are același nume ca și clasa.<br />37<br />http://www.info.uaic.ro/~f...
Comanda trace afișează un mesaj în consolă<br />38<br />http://www.info.uaic.ro/~flash<br />
Upcoming SlideShare
Loading in...5
×

Cercul De Rich Internet Applications Introducere

1,631

Published on

Prezentarea de la primul Cerc de RIA ce s-a desfășurat la data de 3.10.2009. Este realizată o prezentare a ceea ce înseamnă RIA, câteva exemple, cum se face o primă aplicație în Flex (Ca proiect Action Script).

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,631
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Cercul De Rich Internet Applications Introducere

  1. 1. Cercul de Rich Internet Applications<br />Facultatea de Informatică<br />Iași<br />
  2. 2. Cam ce o să facem la acest cerc ?<br />Învățăm să facem aplicații Flash (Flash, Flex, AIR) astfel:<br /><ul><li>Curs introductiv
  3. 3. Variabile, metode și alte chestii “simpluțe” dar fără de care nu se poate
  4. 4. Programare OOP
  5. 5. Obiectelor vizuale (scalare, vectoriale, text, ierarhii, aplicarea de efecte, filtre, realizarea de animații etc.)</li></ul>http://www.info.uaic.ro/~flash<br />2<br />
  6. 6. Cam ce o să facem la acest cerc ?<br />Învățăm să facem aplicații Flash (Flash, Flex, AIR) astfel:<br /><ul><li>Evenimente (producerea, tratarea)
  7. 7. Media (sunet, video)
  8. 8. Salvarea datelor (sharedobjects, ByteArrayîn AIR, XML, SQL.)
  9. 9. Conectivitate în ActionScript 3</li></ul>Orice altceva vreți voi să facem (jocuri în Flash)<br />http://www.info.uaic.ro/~flash<br />3<br />
  10. 10. Cam ce o să facem la acest cerc ?<br />Realizăm tutoriale[nu gratis :D]<br />Facem concursuri pe teme legate de Flash / Flex / AIR<br />Puteți să prezentați* sau doar să căscați gura<br />Ieșim și la pizza – hrana de bază a oricărui programator bun…<br />Noaptea devoratorilor de FLA :&gt;)<br />Dacă rezistați până la sfârșit, primiți și diplome<br />* Pentru a nu reduce nivelul cercului, este nevoie de aprobare din partea cuiva care cunoaște deja limbajul<br />http://www.info.uaic.ro/~flash<br />4<br />
  11. 11. Ce NU facem la acest cerc ?<br />NU primim puncte la logică <br />NUprimim puncte la Java<br />[ș-acum vreo doi sigur se ridică și pleacă oftând]<br />5<br />http://www.info.uaic.ro/~flash<br />
  12. 12. GO GOGO ….<br />6<br />http://www.info.uaic.ro/~flash<br />
  13. 13. Ce este RIA ?<br />Caracteristicile unei aplicații “rich” sunt:<br />Să permită comunicarea cu unul sau mai multe servere în scopul îmbunătăţirii interacţiunii cu utilizatorul (exemplu cu AJAX);<br />Poate fi utilizat offline numai dacă resursele adiţionale au fost descărcate; <br />7<br />http://www.info.uaic.ro/~flash<br />
  14. 14. Ce este RIA ?<br />Aplicaţiile RIA au un nivel ridicat de complexitate<br />Î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;<br />8<br />http://www.info.uaic.ro/~flash<br />
  15. 15. Ce este RIA ?<br />Indexate de către motoarele de căutare;<br />Procesarea datelor va fi realizată de către client, în acest fel performanţa aplicaţiei Web va creşte.<br />Necesită instalarea unui software adiţional ce va fi utilizat de navigator<br />Sunt securizate în sensul de interzicerea interacţiunilor „neplăcute” cu sistemul de operare<br />9<br />http://www.info.uaic.ro/~flash<br />
  16. 16. Ce este RIA ?<br />Aplicațiile RIAîncearcă să facă tot mai invizibilă granița dintre aplicațiile desktop și cele care lucreazăîn browser<br />10<br />http://www.info.uaic.ro/~flash<br />
  17. 17. În ce putem să realizăm aplicații RIA?<br />AJAX (Asynchronous Java Script and XML) [http://www.ajaxdaddy.com/]<br />http://www.ajaxdaddy.com/bouncer-demo.html<br />http://www.ajaxdaddy.com/35mm-photo-viewer.html<br />http://www.ajaxdaddy.com/demo-loupe.html<br />http://www.google.com<br />http://webdeveloper.econsultant.com/ajax-demos-examples-code-samples/<br />http://www.facebook.com<br />etc … ?<br />11<br />http://www.info.uaic.ro/~flash<br />
  18. 18. În ce putem să realizăm aplicații RIA?<br />Microsoft Silverlight<br />http://flashenabledblog.com/2007/07/09/from-a-to-z-50-silverlight-applications/<br />http://www.microsoft.com/silverlight/default.aspx<br />12<br />http://www.info.uaic.ro/~flash<br />
  19. 19. În ce putem să realizăm aplicații RIA?<br />Java / Java FX<br />http://www.javafx.com/launch/<br />http://www.javafx.com/docs/tutorials/mediabrowse<br />13<br />http://www.info.uaic.ro/~flash<br />
  20. 20. În ce putem să realizăm aplicații RIA?<br />Adobe Flex / Flash / AIR<br />http://ge.ecomagination.com/smartgrid/#/augmented_realityhttp://www.mono-1.com/monoface/main.html<br />http://dragonfly.labs.autodesk.com/<br />http://tankionline.com/battle.html<br />http://www.taaz.com/makeover.html<br />http://timesreader.nytimes.com/timesreader/index.html?campaignId=34W88<br />http://aviary.com/<br />http://www.miniclip.com<br />14<br />http://www.info.uaic.ro/~flash<br />
  21. 21. În ce putem să realizăm aplicații RIA?<br />15<br />http://www.info.uaic.ro/~flash<br />
  22. 22. În ce putem să realizăm aplicații RIA?(Adobe)<br />16<br />http://www.info.uaic.ro/~flash<br />
  23. 23. Produse Adobe<br />17<br />http://www.info.uaic.ro/~flash<br />
  24. 24. Flash – istoric<br />SuperPaint<br />IntelliDraw (obiecte, comportamente)<br />SmartSketch (Creionul Optic) – 1993<br />FutureSplash Animator - 1995 &gt; Flash 1.0 - 1996<br />Flash 2 (1997), Flash 3 (1998), Flash 4 (1999)<br />Flash 5 (2000) – AS1, Flash MX(2002), Flash MX 2004 (2003) – AS2, Flash 8 (2005)<br />Flash CS3 (2007), Flash CS4 (2008) <br />18<br />http://www.info.uaic.ro/~flash<br />
  25. 25. Flex – istoric<br />Flex 1.0 – Martie 2004<br />Flex 2.0 – Iunie 2006<br />Flex 3.0 – Februarie 2008<br />Acum:<br />Flex 3.4.0.9271 | Flex 4 Milestone 1 4.0.0.7219<br />19<br />http://www.info.uaic.ro/~flash<br />
  26. 26. Browser<br />Flash Player<br />Flex SDK<br />SOAP<br />HTTP/S<br />AMF/S<br />RTMP/S<br />Web Server<br />XML/HTTP<br />REST<br />SOAP Web Services<br />LC Data Services<br />J2EE Application Server<br />Existing Applications & Infrastructure <br />Flex<br />Flex Builder IDE<br />MXML<br />ActionScript<br />Flex Class Library<br />Compile<br />20<br />http://www.info.uaic.ro/~flash<br />
  27. 27. Puteţirealizaaplicaţii Flash cu:<br />Adobe Flash Professional authoring tool (CS4)<br />Adobe Flex Builder (3) – gratuit (educaţie) la: <br />https://freeriatools.adobe.com/<br />Adobe Flex SDK (3) – open la adresa:<br />http://opensource.adobe.com<br />21<br />http://www.info.uaic.ro/~flash<br />
  28. 28. Puteţirealizaaplicaţii Flash cu:<br />Dar și altele: FlashDevelop, Crimson Editor, EmeraldEditor, Eclipse + FDT, Eclipse + ASDT/AXDT, Eclipse + Aptana, Aptana Studio, SEPY, SciTE, Dreqmweaveretc.<br />22<br />http://www.info.uaic.ro/~flash<br />
  29. 29. Tipuri de fișiere:<br />AS – fișier ce conține cod ActionScript 3<br />FLA – fișier nativ Flash AuthoringTool ce conține librăria, animațiile din scenă sau cod AS3<br />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)<br />MXML – XML special utilizat pentru descrierea interfeței în aplicațiile Flex<br />http://www.info.uaic.ro/~flash<br />23<br />
  30. 30. Primul cod…<br />24<br />http://www.info.uaic.ro/~flash<br />
  31. 31. Trebuie să importăm o clasă pentru a o utiliza<br />25<br />http://www.info.uaic.ro/~flash<br />
  32. 32. Clasa Sprite este printre cele mai “renumite” în AS3<br />26<br />http://www.info.uaic.ro/~flash<br />
  33. 33. Clasa Sprite este printre cele mai “renumite” în AS3<br />27<br />http://www.info.uaic.ro/~flash<br />
  34. 34. Toate datele din AS3 sunt considerate obiecte.<br />28<br />http://www.info.uaic.ro/~flash<br />
  35. 35. Chiar și aplicația noastră este un obiect…<br />29<br />http://www.info.uaic.ro/~flash<br />
  36. 36. Clasele sunt “definiții” ale obiectelor.<br />30<br />http://www.info.uaic.ro/~flash<br />
  37. 37. Aici definim clasa pentru aplicația noastră:<br />31<br />http://www.info.uaic.ro/~flash<br />
  38. 38. Clasa pe care am creat-o este intitulată “HelloWorld”<br />32<br />http://www.info.uaic.ro/~flash<br />
  39. 39. Este publică – în acest mod, oricine poate construi un obiect pe baza definiției (de care ziceam mai sus)<br />33<br />http://www.info.uaic.ro/~flash<br />
  40. 40. Ce înseamnă că extinde Sprite vom vedea în alt episod<br />34<br />http://www.info.uaic.ro/~flash<br />
  41. 41. Fiecare clasă are o funcție specială denumită constructor<br />35<br />http://www.info.uaic.ro/~flash<br />
  42. 42. Constructorul este executat primul atunci când este creat un obiect<br />36<br />http://www.info.uaic.ro/~flash<br />
  43. 43. Pentru a se diferenția de alte metode, constructorul are același nume ca și clasa.<br />37<br />http://www.info.uaic.ro/~flash<br />
  44. 44. Comanda trace afișează un mesaj în consolă<br />38<br />http://www.info.uaic.ro/~flash<br />
  45. 45. Să vedem cum compilăm codul…<br />Secțiune aplicativăăăăă…..<br />39<br />http://www.info.uaic.ro/~flash<br />
  46. 46. Ce înseamnă că o clasă extinde altă clasă?<br />Atunci când clasa A extinde clasa B spunem că A este subclasă a clasei B. Clasa B se numește superclasă pentru A.<br />O subclasă “moștenește” proprietățile și metodele din superclasă.<br />Există o multitudine de astfel de “extensii”, limbajul AS3 fiind construit în jurul unui obiect de bază: Object.<br />40<br />http://www.info.uaic.ro/~flash<br />
  47. 47. Ce înseamnă că o clasă extinde altă clasă?<br />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ă”).<br />Scena este un container grafic (pentru că Sprite este o extensie a DisplayObjectContainer)<br />41<br />http://www.info.uaic.ro/~flash<br />
  48. 48. AS3 Livedocs<br />Cum se extind clasele puteți afla din pagina de manual pentru clasa respectivă. http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/<br />42<br />http://www.info.uaic.ro/~flash<br />
  49. 49. Ce puteți face cu un Sprite ?<br />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)<br />43<br />http://www.info.uaic.ro/~flash<br />
  50. 50. Întrebări ?<br />44<br />http://www.info.uaic.ro/~flash<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×