cercul de rich internet applications
DESCRIPTION
Cercul de Rich Internet Applications. Facultatea de Informatică Iași. 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 - PowerPoint PPT PresentationTRANSCRIPT
Cercul de Rich Internet Applications
Facultatea de InformaticăIași
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.)
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)
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ă • NU primim puncte la Java
[ș-acum vreo doi sigur se ridică și pleacă oftând]
http://www.info.uaic.ro/~flash 6
GO GO GO ….
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.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 … ?
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
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
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
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
• 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
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
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
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:
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:
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
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 ?