Cercul De Rich Internet Applications Introducere

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
Obiectelor vizuale (scalare, vectoriale, text, ierarhii, aplicarea de efecte, filtre, realizarea de animații etc.)

http://www.info.uaic.ro/~flash
2

Î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)
3

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
4

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]
5

GO GOGO ….
6

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;
7

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;
8

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
9

Ce este RIA ?
Aplicațiile RIAîncearcă să facă tot mai invizibilă granița dintre aplicațiile desktop și cele care lucreazăîn browser
10

Î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 … ?
11

Microsoft Silverlight
http://flashenabledblog.com/2007/07/09/from-a-to-z-50-silverlight-applications/
http://www.microsoft.com/silverlight/default.aspx
12

Java / Java FX
http://www.javafx.com/launch/
http://www.javafx.com/docs/tutorials/mediabrowse
13

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
14

15

În ce putem să realizăm aplicații RIA?(Adobe)
16

Produse Adobe
17

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)
18

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
19

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
20

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
21

Puteţirealizaaplicaţii Flash cu:
Dar și altele: FlashDevelop, Crimson Editor, EmeraldEditor, Eclipse + FDT, Eclipse + ASDT/AXDT, Eclipse + Aptana, Aptana Studio, SEPY, SciTE, Dreqmweaveretc.
22

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
23

Primul cod…
24

Trebuie să importăm o clasă pentru a o utiliza
25

Clasa Sprite este printre cele mai “renumite” în AS3
26

Clasa Sprite este printre cele mai “renumite” în AS3
27

Toate datele din AS3 sunt considerate obiecte.
28

Chiar și aplicația noastră este un obiect…
29

Clasele sunt “definiții” ale obiectelor.
30

Aici definim clasa pentru aplicația noastră:
31

Clasa pe care am creat-o este intitulată “HelloWorld”
32

Este publică – în acest mod, oricine poate construi un obiect pe baza definiției (de care ziceam mai sus)
33

Ce înseamnă că extinde Sprite vom vedea în alt episod
34

Fiecare clasă are o funcție specială denumită constructor
35

Constructorul este executat primul atunci când este creat un obiect
36

Pentru a se diferenția de alte metode, constructorul are același nume ca și clasa.
37

Comanda trace afișează un mesaj în consolă
38

Să vedem cum compilăm codul…
Secțiune aplicativăăăăă…..
39

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.
40

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)
41

AS3 Livedocs
Cum se extind clasele puteți afla din pagina de manual pentru clasa respectivă. http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/
42

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)
43

Întrebări ?
44