Download - Cercul de Rich Internet Applications
![Page 1: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/1.jpg)
Cercul de Rich Internet Applications
Facultatea de InformaticăIași
![Page 2: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/2.jpg)
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.)
![Page 3: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/3.jpg)
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)
![Page 4: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/4.jpg)
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
![Page 5: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/5.jpg)
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]
![Page 6: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/6.jpg)
http://www.info.uaic.ro/~flash 6
GO GO GO ….
![Page 7: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/7.jpg)
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;
![Page 8: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/8.jpg)
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;
![Page 9: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/9.jpg)
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
![Page 10: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/10.jpg)
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
![Page 11: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/11.jpg)
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 … ?
![Page 12: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/12.jpg)
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
![Page 13: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/13.jpg)
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
![Page 14: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/14.jpg)
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
![Page 15: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/15.jpg)
http://www.info.uaic.ro/~flash 15
În ce putem să realizăm aplicații RIA?
![Page 16: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/16.jpg)
http://www.info.uaic.ro/~flash 16
În ce putem să realizăm aplicații RIA?(Adobe)
![Page 17: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/17.jpg)
http://www.info.uaic.ro/~flash 17
Produse Adobe
![Page 18: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/18.jpg)
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
![Page 19: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/19.jpg)
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
![Page 20: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/20.jpg)
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
![Page 21: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/21.jpg)
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:
![Page 22: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/22.jpg)
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:
![Page 23: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/23.jpg)
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
![Page 24: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/24.jpg)
http://www.info.uaic.ro/~flash 24
Primul cod…
![Page 25: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/25.jpg)
http://www.info.uaic.ro/~flash 25
Trebuie să importăm o clasă pentru a o utiliza
![Page 26: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/26.jpg)
http://www.info.uaic.ro/~flash 26
Clasa Sprite este printre cele mai “renumite” în AS3
![Page 27: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/27.jpg)
http://www.info.uaic.ro/~flash 27
Clasa Sprite este printre cele mai “renumite” în AS3
![Page 28: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/28.jpg)
http://www.info.uaic.ro/~flash 28
Toate datele din AS3 sunt considerate obiecte.
![Page 29: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/29.jpg)
http://www.info.uaic.ro/~flash 29
Chiar și aplicația noastră este un obiect…
![Page 30: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/30.jpg)
http://www.info.uaic.ro/~flash 30
Clasele sunt “definiții” ale obiectelor.
![Page 31: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/31.jpg)
http://www.info.uaic.ro/~flash 31
Aici definim clasa pentru aplicația noastră:
![Page 32: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/32.jpg)
http://www.info.uaic.ro/~flash 32
Clasa pe care am creat-o este intitulată “HelloWorld”
![Page 33: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/33.jpg)
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)
![Page 34: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/34.jpg)
http://www.info.uaic.ro/~flash 34
Ce înseamnă că extinde Sprite vom vedea în alt episod
![Page 35: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/35.jpg)
http://www.info.uaic.ro/~flash 35
Fiecare clasă are o funcție specială denumită constructor
![Page 36: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/36.jpg)
http://www.info.uaic.ro/~flash 36
Constructorul este executat primul atunci când este creat un obiect
![Page 37: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/37.jpg)
http://www.info.uaic.ro/~flash 37
Pentru a se diferenția de alte metode, constructorul are același nume ca și clasa.
![Page 38: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/38.jpg)
http://www.info.uaic.ro/~flash 38
Comanda trace afișează un mesaj în consolă
![Page 39: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/39.jpg)
http://www.info.uaic.ro/~flash 39
Să vedem cum compilăm codul…
• Secțiune aplicativăăăăă…..
![Page 40: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/40.jpg)
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.
![Page 41: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/41.jpg)
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)
![Page 42: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/42.jpg)
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/
![Page 43: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/43.jpg)
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)
![Page 44: Cercul de Rich Internet Applications](https://reader035.vdocuments.us/reader035/viewer/2022081520/568167e2550346895ddd47f6/html5/thumbnails/44.jpg)
http://www.info.uaic.ro/~flash 44
Întrebări ?