RIA Rich Internet Application. Komplex felhasználói felülettel rendelkező web-alkalmazások

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

´ Attekint´ es

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

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

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

desktop alkalmaz´as haszn´alat´ahoz hasonl´o ´elm´eny ny´ujt´as´ara val´o t¨orekv´es: 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

RIA – platformf¨ uggetlens´eg

RIA – Rich Internet Application RIA – ´altal´anos jellemz˝ok I

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

I

hipersz¨ ovegen alapul´ o alkalmaz´ as HTML, JavaScript, CSS

Web 2.0: I I I I

I I I I

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

RIA fejleszt˝o eszk¨oz¨ok I

Flex (Adobe)

I

Silverlight (Microsoft)

I

JavaFX (Sun Microsystems → Oracle)

I

... AJAX

Flex keretrendszer - RIA developement toolkit

Flex keretrendszer I I

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

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

web alkalmaz´ask´ent (Flash Player - plug-in haszn´alata)

I

desktop alkalmaz´ask´ent (Adobe Integrated Runtimer -AIRhaszn´alata)

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

I

Flex keretrendszer – ny´ılt forr´ask´ od´ u

I

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

ActionScript + MXML

I

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

I

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

<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’)"/>

ActionScript (3.0)

I

I

ECMAScript szabv´anynak megfelel˝ o (JavaScript-hez hasonl´oan), objektumorient´alt script nyelv 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.

Szintaxis

I

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

I

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

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

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}" /> A k´ od eredm´enye:

Oszt´alyok/objektumok

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

oszt´aly hozz´af´er´es m´ odos´ıt´ o: public, internal, (dinamic, final)

I

(egyszeres) ¨ or¨ okl˝ od´es

I

absztrakt oszt´aly

I

interf´esz

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

komponens k´eszletek: 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

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

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

I

diagramk´esz´ıt´es

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

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´ese, adatform´az´as I

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

I

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

´ Allapotok (States) 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

Esem´enyek

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

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)" />

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" />

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

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

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

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

Flex alkalmaz´as fel´ep´ıt´ese A Flex keretrendszer MVC-elvre alapoz

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

Mikroarchitekt´ur´ak 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

Hasznos hivatkoz´asok

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

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

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

I

Adobe Flex 4 http://help.adobe.com/en US/flex/using/index.html

I

Flex Test Drive - Build an application in an hour http://www.adobe.com/devnet/flex/testdrive.html

I

Flex in a Week video training http://www.adobe.com/devnet/flex/videotraining.html