Cercul De Rich Internet Applications Introducere
-
Upload
university-al-i-cuza-of-iasi-romania -
Category
Technology
-
view
1.641 -
download
5
description
Transcript of Cercul De Rich Internet Applications Introducere
![Page 1: Cercul De Rich Internet Applications Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/html5/thumbnails/1.jpg)
Cercul de Rich Internet Applications
Facultatea de InformaticăIași
![Page 2: Cercul De Rich Internet Applications Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/html5/thumbnails/6.jpg)
http://www.info.uaic.ro/~flash 6
GO GO GO ….
![Page 7: Cercul De Rich Internet Applications Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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/#/augme
nted_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/inde
x.html?campaignId=34W88• http://aviary.com/• http://www.miniclip.com
![Page 15: Cercul De Rich Internet Applications Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/html5/thumbnails/17.jpg)
http://www.info.uaic.ro/~flash 17
Produse Adobe
![Page 18: Cercul De Rich Internet Applications Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/html5/thumbnails/24.jpg)
http://www.info.uaic.ro/~flash 24
Primul cod…
![Page 25: Cercul De Rich Internet Applications Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/html5/thumbnails/30.jpg)
http://www.info.uaic.ro/~flash 30
Clasele sunt “definiții” ale obiectelor.
![Page 31: Cercul De Rich Internet Applications Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/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 Introducere](https://reader035.fdocumente.com/reader035/viewer/2022062514/558a1d03d8b42ae4178b45cd/html5/thumbnails/44.jpg)
http://www.info.uaic.ro/~flash 44
Întrebări ?