Rich Internet Application (RIA)

RIA adalah aplikasi web yang memiliki kesamaan karakteristik dengan aplikasi desktop.
Sejarah RIA : Macromedia (sekarang bagian dari adobe) memperkenalkan RIA pada tahun 2001 RIA menyediakan penggunaan UI lebih baik contoh : menghindari refresh halaman, interaktif, responsif, Banyak pemain web beralih ke Teknologi RIA.

Perjalanan RIA

Keuntungan RIA

Teknologi RIA
OpenLaszlo
JavaFX Silverlight Flex Google Web Toolkit

 What is Flex ? Its is a framework which allows you to develop a web application quickly and easily build RIA It is Cross Platform Flex applications serve as the presentation tier Flex SDK is an open source although Flex Builder IDE still remains proprietary and commercial Flex applications are rendered using Flash player. Why Flex ? Adobe Flex is a cross-platform development framework for creating RIA. Flex enables you to create expressive highperformance application that run identically on major browsers and operating systems.

 Flex menjembatani antara Adobe Flash yang ekspresif dan ada di mana-mana dengan kemampuan development desktop. Flex termasuk baru namun sudah berkembang dengan sangat cepat. Bukan hanya karena pemasaran yang bagus namun juga dikarenakan flex itu sendiri yang sudah matured (robust dan open platform) yang menyebabkan para developer yakin untuk menambahkan flex ini sebagai salah satu skill mereka

Arsitektur Flex

Bagaimana cara flex bekerja ?

User Interface Adobe Flex

Di flex terdapat 2 tipe komponen UI. Controls dan

Containers Contoh Controls :

AdvancedDataGrid Button CheckBox ColorPicker ComboBox DataGrid DateChooser DateField HScrollBar HSlider HorizontalList Image Label LinkButton List NumericStepper PopUpButton PopUpMenuButton ProgressBar RadioButton RadioButtonGroup RichTextEditor Text TextArea TextInput TileList Tree VSlider VideoDisplay VScrollbar

User Interface Adobe Flex (Cont..)

Containers terdiri dari 2 yaitu Layout Containers dan

Navigator Containers
Layout Containers Box Canvas ControlBar Form FormHeading Grid Hbox HDividedBox Hrule ModuleLoader Panel Spacer Tile TitleWindow Vbox VDividedBox Vrule Navigator Containers Accordian ApplicationControlBar ButtonBar LinkBar MenuBar TabBar TabNavigator ToggleButtonBar ViewStack

Bagaimana cara menggunakan Flex?

Untuk menggunakan flex 3, diperlukan flex_sdk_3.zip
http://www.adobe.com/products/flex/flexdownloads/#sdk

Adobe Flex juga menggunakan Suns Java

Environment. Code flex dicompile menjadi file berformat swf. Adobe menyediakan Flex Builder 3 yang dapat diinstall stand alone atau diinstall ke dalam Eclipse IDE. Pada perkuliahan ini kita akan menggunakan flex builder stand alone

Flex Compiler
mxmlc Converts .mxml into ActionScript code Compiles ActionScript code to .swf Compc Similar to mxmlc Used to create libraries

.swc archives Similar to Java .jar files

Flex Sites
http://flex.org/showcase
http://www.volkswagen.co.uk/used/search http://www.sonyericsson.com/cws/products/mobilep

hones?lc=id&cc=id http://flauntr.com http://scalenine.com/themes/brownie/Brownie.html http://www.ultrashock.com/

Macromedia XML (MXML)

Varian XML yang diperkenalkan oleh Macromedia
Digunakan untuk mengatur interface dari aplikasi Tag tag pada MXML digunakan untuk membuat

object object seperti data grid, tree, tab, menu. MXML akan dirubah menjadi action script terlebih dahulu sebelum di-compile Mempersingkat script.

Penulisan MXML
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <! your code goes here -->

</mx:Application>
Note : 1. Deklarasi xml tidak wajib tapi lebih baik ada 2. xmlns:mx=http://www.adobe.com/2006/mxml create an xml namespace called mx and point it to location http://www.adobe.com/2006/mxml 3. Layout : absolute, vertical, horizontal

Contoh MXML

Properties yang sering digunakan dalam MXML

x y

visible
includeLayout tooltip label

text
alpha enable source

XML in MXML
<book title="Learning Flex" author="Alaric Cole"> <chapter title="Getting Up to Speed"/> <chapter title="Setting Up Your Environment"/> </book> Sama dengan <book> <title>Learning Flex</title> <author>Alaric Cole</author> <chapter> <title>Getting Up to Speed</title> </chapter> <chapter> <title>Setting Up your Environment</title> </chapter> </book>

st 1

Flex Application

1. File New Flex Project 2. Masukkan Project name MyFirstFlexApp Click Finish 3. Ketik kode dibawah pada file MyFirstFlexApp.mxml

Untuk menjalankan aplikasi flex : Ctrl + F11

Explanation
Components
id properties attributes events styles effects bindings

st 1

Flex Application

Latihan 1
Buatlah tampilan seperti dibawah ini. Gunakan

Controls Label, Button, TextInput, TextArea

Latihan 2
Buatlah tampilan seperti dibawah ini. Gunakan

Controls Label, Button, TextInput, TextArea dan Layout Containers Hbox, Vbox

Action Script
Core of the Flex Framework
Action Script adalah bahasa pemograman

berorientasi obyek yang digunakan dalam pengembagan flex. Digunakan untuk menulis logic client-side seperti event listener and fungsi call-back Case sensitive

Contoh penulisan Action Script

Inline Action Script

Inline ActionScript is script placed in an MXML tag

Format : <mx:Button id="myButton" click="someComponent.someProperty ='something'" /> Contoh : <mx:Button label="Click me" click="fullNameTextInput.text = 'John Smith'"/>

Dot Notation & assignment

Previously, you added attributes to a tag to change the properties of a

component. <mx:TextInput id="fullNameTextInput" text="John Smith"/> With action script you can use dot notation 1. myTextInput.text = Hello World 2. myButton.label = Exit Dua atau lebih assignment dipisahkan oleh semicolon(;) <mx:Button label="Click me" click=myTextInput.text = Hello World ; myButton.label = Exit"/>

Action Script placed at MXML

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ //Your code goes here ]]> </mx:Script> </mx:Application>

Action Script sebagai file .as

Action Script dapat disimpan pada file .as dan

dipanggil menggunakan. Contoh : File IncludedFile.as <mx:Script source = IncludedFile.as />

function (1)
Contoh : function setForm(){ fullNameTextInput.text = 'John Smith'; expertCheckBox.selected = true; } Cara akses function adalah dengan menulis nama disertai dengan parenthress. Contoh : setForm() function dengan parameter : public function setForm(txt, sel){ fullNameTextInput.text = txt; expertCheckBox.selected = sel; }

function (2)
public function setForm(txt = "John Smith", sel = true){ fullNameTextInput.text = txt; expertCheckBox.selected = sel; }

Pemanggilan function diatas dapat berupa : Zero parameter : <mx:Button label="Click me" click="setForm()"/> One parameter : <mx:Button label="Click me" click="setForm('John Smith')"/> Two parameter : <mx:Button label="Click me" click="setForm('John Smith', true)"/>

Variables
Gunakan var statement diikuti dengan nama variables var userName; Setelah itu dapat memberi nilai pada variable tersebut username = "Tom"; Setelah membuat var, anda dapat langsung memberi nilai var username = "Tom"; Menambahkan access modifier pada variables. public var username = "Tom";

Data Types
String

var hi:String = "Hello!"

Number

var pi:Number = 3.14

unit

var ultimate:uint = 42
int

var neg:int -12

Boolean

var neg:int -12

void (khusus void bukan data types tapi return type)

function doNothing():void{ }

Class & Object

Contoh Class : public class Car{ Contoh Membuat Object : var car:Car = new Car(); car.type = "sports car"; car.color = 0xFF0000; car.topSpeed = 170; car.isInsured = false; car.driver = undefined;

var type:String; var color:uint; var topSpeed:int; var isInsured:Boolean; var driver:Person;
}

Cara membuat class di Flex Builder : File New ActionScript Class

Hubungan MXML dan ActionScript

MXML = ActionScript Tags adalah Class <mx:Button id="myButton" />

sama dengan :
import mx.controls.Button; var myButton:Button = new Button(); addChild(myButton); Attributes adalah Properties <mx:Button id="myButton" label="Click Me"/>

sama dengan : import mx.controls.Button;

var myButton:Button = new Button(); myButton.label = "Click Me"; addChild(myButton);

Hubungan MXML dan ActionScript (2)

Attributes adalah Sytles

<mx:Button id="myButton" cornerRadius="14" /> sama dengan : myButton.cornerRadius = 14;

Attributes adalah EventListener <mx:Button id="myButton" click="doSomething()" /> sama dengan : import mx.controls.Button; var myButton:Button = new Button(); myButton.addEventListener("click", doSomething); addChild(myButton);

Contoh penggunaan Action Script:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> public function addition(x:Number, y:Number):Number { return x + y; } public function product(x:Number, y:Number):Number{ return x*y; } public function division(x:Number, y:Number):Number{ return x/y; } public function subtraction(x:Number, y:Number):Number{ return x - y; } </mx:Script>

Contoh (cont..)
<mx:TextInput id = 'value0' /> <mx:TextInput id = 'value1'/> <mx:HBox> <mx:VBox> <mx:Label text = 'Addition result'/> <mx:TextArea id = 'result'/> <mx:Button label = 'Add' click = "result.text = String(addition(Number(value0.text),Number(value1.text)))"/> <mx:Label text = 'Multiplication result'/> <mx:TextArea id = 'result1'/> <mx:Button label = 'Product' click = 'result1.text = String(product(Number(value0.text),Number(value1.text)))'/> </mx:VBox> <mx:VBox> <mx:Label text = 'Division result'/> <mx:TextArea id = 'result2'/> <mx:Button label = 'Divide' click = 'result2.text = String(division(Number(value0.text),Number(value1.text)))'/> <mx:Label text = 'Subtraction result'/> <mx:TextArea id = 'result3'/> <mx:Button label = 'Subtract' click = 'result3.text = String(subtraction(Number(value0.text),Number(value1.text)))'/> </mx:VBox> </mx:HBox> </mx:Application>

Output Contoh :

Latihan
Contoh sebelumnya menggunakan cara yang mana ? a. Inline Action Script b. Action Script placed at MXML c. Action Script sebagai file .as Buatlah aplikasi calculator online seperti berikut :