RIA Rich Internet Application

´ Attekint´ es

RIA – Rich Internet Application Komplex felhaszn´al´oi fel¨ ulettel rendelkez˝o web-alkalmaz´asok

I

Bevezet˝o

I

Flex – ´attekint´es

I

ActionScript

I

Felhaszn´al´oi fel¨ ulet tervez´ese

I

Esem´enyek

I

Szerver oldali szolg´altat´asokkal val´o kommunik´aci´o

1 / 22

2 / 22

RIA – Rich Internet Application web alkalmaz´as vs. desktop alkalmaz´as – el˝ony¨ok: I

web alkalmaz´as – k¨ozpontilag karbantarthat´o

I

desktop alkalmaz´as – felhaszn´al´obar´at fel¨ ulet

RIA – ´altal´anos jellemz˝ok I

Web 1.0 (RIA-t megel˝oz˝o alkalmaz´asok): I I

I

a felhaszn´al´ok mindkett˝o el˝ony´et szeretn´ek kihaszn´alni

Web 2.0: I

desktop alkalmaz´as haszn´alat´ahoz hasonl´o ´elm´eny ny´ujt´as´ara val´o t¨orekv´es: I

I

I I I

alkalmaz´as-logika egy r´esz´enek kliens oldalra val´o k¨olt¨oztet´ese (JavaScript keretrendszerek seg´ıts´eg´evel) ... b¨ong´esz˝of¨ ugg˝os´eg

I I

RIA – platformf¨ uggetlens´eg

I I

3 / 22

hipersz¨ ovegen alapul´ o alkalmaz´ as HTML, JavaScript, CSS vizu´ alis elemek domin´ alnak ´ altal´ aban b¨ ong´esz˝ o plug-in sz¨ uks´eges aszinkron kommunik´ aci´ o a szerverrel az alkalmaz´ as jelent˝ os r´esze a kliens g´epen fut (cs¨ okkentett h´ al´ ozati forgalom) komplex desktop alkalmaz´ ashoz hasonl´ o biztons´ agi korl´ atoz´ asok (korl´ atozott hozz´ af´er´es a kliens g´ephez) nem haszn´ alhat´ ok a b¨ ong´esz˝ ok vez´erl˝ ogombjai nem indexelhet˝ o keres˝ omotrok ´ altal

4 / 22

Flex keretrendszer - RIA developement toolkit

Flex keretrendszer RIA fejleszt˝o eszk¨oz¨ok I

Flex (Adobe)

I

Silverlight (Microsoft)

I I

gazdag f¨ uggv´enyk¨onyvt´arat, komponenseket bocs´at rendelkez´esre az al´abbi nyelvekre alapoz: I I

I

JavaFX (Sun Microsystems → Oracle)

I

... AJAX

ActionScript – ECMA szabv´ anynak megfelel˝ o szkript-nyelv MXML – XML alap´ u deklarat´ıv nyelv (ActionScript-t´e fordul)

az alkalmaz´as telep´ıthet˝o: I I

web alkalmaz´ask´ent (Flash Player - plug-in haszn´alata) desktop alkalmaz´ask´ent (Adobe Integrated Runtimer -AIRhaszn´alata)

5 / 22

6 / 22

Fejleszt´eshez sz¨uks´eges eszk¨oz¨ok

I I

Flex keretrendszer – ny´ılt forr´ask´od´ u Flex SDK (ford´ıt´o, debugger) – ingyenes → .swf

I

tetsz˝oleges (ingyenes) szerkeszt˝o vagy Flash Builder 4 fejleszt˝oi k¨ornyezet (Eclipse plug-in) – kereskedelmi (kor´abbi neve: Flex Builder)

I

Flash Player (b¨ong´esz˝o plug-in)

Flash vs. Flex I

Flash – ink´abb anim´aci´o l´etrehoz´as´ara (id˝ ovonal, r´etegek, keretek)

I

Flex – adatfeldolgoz´as

A szerverrel val´o kommunik´aci´o egy SWF-b˝ol

7 / 22

8 / 22

ActionScript + MXML

I

MXML – tipikusan a felhaszn´al´oi fel¨ ulet megad´as´ara

I

ActionScript – alkalmaz´as-logika implement´al´as´ara

ActionScript (3.0)

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" <s:Button label="Klikk" click="Alert.show(’Proba’)"/>

I

ECMAScript szabv´anynak megfelel˝o (JavaScript-hez hasonl´oan), objektumorient´alt script nyelv

I

Pontos adatt´ıpus meghat´aroz´ast haszn´al (strict data typing) var myVar:String="Bla";

I

statikus (ford´ıt´asidej˝ u) illetve dinamikus (fut´asidej˝ u) t´ıpusellen˝orz´es

I

a v´altoz´ok mind objektumok (Flex 4)

v´altoz´o t´ıpusok (top-level package): I

egyszer˝ u: int, uint, Number, String, Boolean, null, void

I

o¨sszetett: Object, Array, Date, Error, Function, RegExp, XML, XMLList

stb.

9 / 22

Szintaxis

I

nyelvi elemek (JavaScript-hez hasonl´o): l´asd ActionScript 3.0 referencia → Statements, Keywords & Directives (itt)

I

t¨omb, objektum eset´en az ´ert´ekad´as t¨ort´enhet JSON-hoz hasonl´o szintaxissal

10 / 22

Binding pl. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:TextInput id="text1"/> <s:Button label="Update" click="s=text1.text" x="130" /> <s:Label x="0" y="30" text="{s}" />

f¨uggv´enydeklar´aci´o: function funcName([param0, param1, ...paramN]) : retType{ // k´ od }

Adatkapcsol´as (binding) implement´al´asa (a h´att´erben) az esem´enykezel˝ o rendszer seg´ıts´eg´evel t¨ort´enik

A k´od eredm´enye:

11 / 22

12 / 22

Oszt´alyok/objektumok

Felhaszn´al´oi fel¨ulet tervez´ese – tipikusan MXML seg´ıts´eg´evel t¨ort´enik

komponens k´eszletek:

lehet˝os´egek: I

oszt´aly deklar´al´asa (class kulcssz´o)

I

mez˝ok, met´odusok hat´ok¨ore: public, protected, private, internal, static

I I

oszt´aly hozz´af´er´es m´odos´ıt´o: public, internal, (dynamic, final) (egyszeres) ¨or¨okl˝od´es

I

absztrakt oszt´aly

I

interf´esz

I

Halo (MX) – r´egebbi (Flex 3)

I

Spark – u ´jabb (Flex 4)

komponensek elrendez´ese a kont´eneren bel¨ul (Spark) – Layouts I

BasicLayout (absolute layout), HorizontalLayout, VerticalLayout, TileLayout

Kont´enerek: I

Spark: Application, Group, SkinnableContainer, Panel, DataGroup, SkinnableDataContainer

I

MX (Spark megfelel˝o n´elk¨ ul): Form, Grid

13 / 22

14 / 22

kontrol-ok: I

egyszer˝ u form-kontrolok

I

rich text editor, cs´ uszka, sz´aml´al´o, d´atum-kiv´alaszt´o, sz´ınkiv´alaszt´o

I

adatvez´erelt kontrolok (dataProvider objektum seg´ıts´eg´evel megadott tartalom) – list´ak, r´acsok, faszerkezet

I

I

Adathelyess´eg ellen˝orz´ese, adatform´az´as

navig´aci´os komponensek (men¨ u, men¨ usor, gombsor, f¨ ulek (TabNavigator), n´ezetverem (ViewStack), harmonika (Accordion)) diagramk´esz´ıt´es

PopUpManager oszt´aly seg´ıts´eg´evel

I

k¨ ul¨onb¨oz˝o kont´enerek szolg´alhatnak alapul

I

drag-and-drop lehet˝os´eg (DragManager oszt´aly)

Adathelyess´eg ellen˝orz˝ok: StringValidator, NumberValidator, DateValidator, EmailValidator, RegExpValidator, stb.

I

Adatform´az´ok: NumberFormatter, DateFormatter, stb.

´ Allapotok (States)

el˝ougr´o ablakok (pop-up windows): I

I

15 / 22

I

egy RIA felhaszn´al´oi fel¨ ulete t¨obb n´ezetb˝ol ´allhat

I

egy n´ezetnek k¨ ul¨onb¨oz˝o ´allapotai lehetnek

16 / 22

Esem´enyek esem´enykezel´es MXML, illetve ActionScript esem´enykezel˝o seg´ıts´eg´evel: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:Button label="Button 1" click="onClick(event)" />

A Flex esem´ enyorient´ alt keretrendszer (a k¨ ul¨onb¨oz˝o komponensek/oszt´alyok esem´enyeken kereszt¨ ul kommunik´alhatnak egym´assal)

I

az esem´enykezel˝o param´eterk´ent megkap egy u ´n. esem´enyobjektumot (inform´aci´o az esem´eny eredet´er˝ol, u ´jrafelhaszn´alhat´o k´od)

I

esem´eny k´ezbes´ıt´es folyamata – ki(k)/ milyen sorrendben ´ertes¨ ulhet(nek) az esem´enyr˝ol

I

lehet˝os´eg saj´at esem´enyobjektum defini´al´as´ara

17 / 22

18 / 22

Szerver oldali szolg´altat´asokkal val´o kommunik´aci´o

Pl. click esem´eny kezel´es´ere ActionScript seg´ıts´eg´evel: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" applicationComplete="init()"> <s:Button id="button1" label="Button 1" />

I

a Flex kommunik´alhat k¨ ul¨onb¨oz˝o szerver oldali technol´ogi´akkal: PHP, Java, ASP.NET, ColdFusion, stb.

kommunik´aci´os protokollok: I I

HTTP AMF (Action Message Format) – bin´aris adatcsere I I

I

19 / 22

AMF+PHP: Zend AMF modul AMF+Java: BlazeDS, LiveCycle Data Services

SOAP/WSDL – webszolg´altat´assal (WebService) val´o kommunik´aci´o

20 / 22

Flex alkalmaz´as fel´ep´ıt´ese

Hasznos hivatkoz´asok

A Flex keretrendszer MVC-elvre alapoz

– Adobe Flex hivatalos oldala: www.adobe.com/products/flex/ – ActionScript 3.0 Referencia: help.adobe.com/en US/FlashPlatform/reference/actionscript/3/

Mikroarchitekt´ura: keretrendszer, mely bizonyos tervez´esi mint´akat alkalmaz, illetve az alkalmaz´as szerkezet´ere vonatkoz´o szab´alyok betart´as´ara ¨oszt¨on¨oz – haszn´alata hat´ekonyabb´a teheti komplex Flex alkalmaz´asok fejleszt´es´et

Dokument´aci´o, p´eld´ak, video-tutorialok:

Mikroarchitekt´ur´ak

I

Flex and Flash Builder Documentation www.adobe.com/devnet/flex/documentation.html

I

Adobe Flex 4 help.adobe.com/en US/flex/using/

I

Flex Test Drive - Build an application in an hour www.adobe.com/devnet/flex/testdrive.html Flex in a Week video training www.adobe.com/devnet/flex/videotraining.html

Els˝ o gener´aci´os mikroarchitekt´ ur´ak: I

PureMVC

I

Cairngorm

M´asodik gener´aci´os mikroarchitekt´ ur´ak: I

Swiz

I

Mate

I

Robotlegs

I

21 / 22

22 / 22