Flex with Rails; presented at Ruby Ireland Meetup

1. Adobe Flex with Rails
Philip Sexton
• The Rails Way
• Flex Architecture
• Demonstration
• Code
• Finish

2. Other Flex/Rails
Presentations
• Flex on Rails; RailsConf 2007 BOF; Peter
Armstrong
• Using Adobe Flex with Rails; RailsConf 2007
Berlin; Borre Wessel
• Building Rich Internet Applications with Flex and
Rails; RailsConf 2007 Berlin; Simon Bateman

3. Web Apps for Data
Management

4. Web Apps for Data
Management
• Responsive

5. Web Apps for Data
Management
• Responsive
• html/css

6. Web Apps for Data
Management
• Responsive
• html/css
• + Ajax (Async Javascript and XML)

7. Web Apps for Data
Management
• Responsive
• html/css
• + Ajax (Async Javascript and XML)
• Scaleable

8. Web Apps for Data
Management
• Responsive
• html/css
• + Ajax (Async Javascript and XML)
• Scaleable
• REST architecture

9. Ajax and REST
• IBM article: Ajax and REST, Part 1
•

10. Ajax Engine

11. The best answer to the
client requirement???
• Single HTML Page
• Ajax
• CSS
• Stateful Client
• Cross-browser

12. Adobe Flex
• Technical overview

13. Flex runtime architecture
- from Adobe: Flex 2, technical overview
Flex runtime architecture
e Flex runtime architecture is closely aligned with the just-in-time deployment model of web
applications. e client portion of a Flex application is deployed as a binary le that contains the
compiled bytecode for the application. Users then deploy this le to a web server just as they
would an HTML le or an image. When the le is requested by a browser, it is downloaded and
the bytecode is executed by the Flash Player runtime.
As illustrated in Figure 3, once started, the application can request additional data or content over the
network via standard HTTP calls (sometimes referred to as REST services) or through web services
(SOAP). Flex clients are server agnostic and can be used in conjunction with any server environment,
including standard web servers and common server scripting environments such as JavaServer
Pages (JSP), Active Server Pages (ASP), ASP.NET, PHP, and ColdFusion®.
Browser
Browser
MXML and ActionScript
Flash Player
Data Data
Web Server
Web Server
XML/HTTP
XML/HTTP Flex Data Services 2
REST
REST
SOAP Web Services
SOAP Web Services Java EE Application Server
J2EE Application Server
Existing Applications and Infrastructure
Existing Applications and Infrastructure
Figure 3: Flex runtime architecture.
If the Flex client application is used in conjunction with Flex Data Services, the application has
access to additional services. Flex clients can make direct calls to Java objects as well as subscribe
to real-time data feeds, send messages to other clients, and integrate with existing Java Message
Service (JMS) messaging systems. e Flex Data Services application runs on the server within
the Java web container.
Flex development model and application framework
e development process for Flex applications mirrors the process for Java, C#, C++, or other
traditional client development languages. Developers write MXML and ActionScript source code
using the Flex Builder IDE or a standard text editor. As shown in Figure 4, the source code is then
compiled into bytecode by the Flex compiler, resulting in a binary le with the *.swf extension.

14. including standard web servers and common server scripting environments such as JavaServer
Pages (JSP), Active Server Pages (ASP), ASP.NET, PHP, and ColdFusion®.
Browser
Browser
MXML and ActionScript
Flash Player
Data Data
Flex Framework
Web Server
Web Server
XML/HTTP
XML/HTTP Flex Data Services 2
REST
REST
SOAP Web Services
SOAP Web Services Java EE Application Server
J2EE Application Server
- from Adobe: Flex 2, technical overview
Existing Applications and Infrastructure
Existing Applications and Infrastructure
Figure 3: Flex runtime architecture.
If the Flex client application is used in conjunction with Flex Data Services, the application has
access to additional services. Flex clients can make direct calls to Java objects as well as subscribe
to real-time data feeds, send messages to other clients, and integrate with existing Java Message
Service (JMS) messaging systems. e Flex Data Services application runs on the server within
the Java web container.
Flex development model and application framework
e development process for Flex applications mirrors the process for Java, C#, C++, or other
traditional client development languages. Developers write MXML and ActionScript source code
using the Flex Builder IDE or a standard text editor. As shown in Figure 4, the source code is then
compiled into bytecode by the Flex compiler, resulting in a binary le with the *.swf extension.
Flex Application Framework
MXML ActionScript
Compile
Flex Class Library
Figure 4: The Flex framework comprises MXML, ActionScript, and the Flex class library.
As shown in Figure 4, the Flex application framework consists of MXML, ActionScript 3.0, and
the Flex class library. Developers use MXML to declaratively de ne the application user interface
elements and use ActionScript for client logic and procedural control.
Adobe Flex 2 7

15. Flex product line
- from Adobe, Flex 2, technical overview
Flex product line overview
As shown in Figure 2, the Flex product family comprises four separate products:
• Flex So ware Development Kit (SDK)— e core component library, development languages,
and compiler for Flex applications
• Flex Builder IDE—An Eclipse-based development environment that includes code editors,
visual layout tools, project management tools, and an integrated debugger
• Flex Data Services—A Java server-based application that enables high-performance data
transfer, cross-tier data synchronization and con ict management, and real-time data
messaging
• Flex Charting—A library of extensible charting components that enables rapid construction of
data visualization applications
Figure 2: Members of the Flex product line.
Flash Player
No discussion of the Flex product would be complete without mentioning Flash Player. Flex
applications are deployed as compiled bytecode that is executed within the Flash Player runtime.
Installed on over 97% of Internet-connected PCs, Flash Player provides a consistent runtime
environment that works across browsers and operating systems, enabling Flex applications to
deliver much greater cross-platform compatibility than other RIA technologies.
Flash Player provides a unique combination of capabilities that developers can use in their applications,
including rich text rendering, powerful graphics APIs, an animation engine, and an integrated
audio/video codec. ese capabilities not only contribute to the rich out-of-the-box look and feel
displayed in Flex applications, but they are also available to developers who need to construct

16. Actionscript
• Wikipedia: ECMAScript

17. Demonstrate Sample
User Interfaces

18. Flex and Rails
- request / response
• code samples from Peter Armstrong: pages
10..12
• other code samples

19. package com.anbawn.eile.trn.command {
import com.adobe.cairngorm.commands.ICommand;
import com.adobe.cairngorm.control.CairngormEvent;
import mx.controls.Alert;
import mx.rpc.IResponder;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
...
public class AccGjDocUpdate implements ICommand, IResponder {
public function AccGjDocUpdate() {
}
public function execute(event : CairngormEvent) : void {
var model : AccGjDocsModel = AppModelLocator.getInstance().accGjDocs;
var delegate : AccGjDocsDelegate = new AccGjDocsDelegate(this);
var doc :AccGjDoc = event.data as AccGjDoc;
if (...) {
delegate.update(event.data);
...
}
}
public function result(event : Object) : void {
var result:Object = event.result;
var model : AccGjDocsModel = AppModelLocator.getInstance().accGjDocs;
var doc :AccGjDoc;
if (result is XML) {
var x:XML = XML(result);
if (x.name().localName == ...) {
doc = AccGjDoc.fromXML(x);
model.updateDoc(doc);
...
}
else if (...errors...) {
var errors :ServerErrors;
...
Alert.show(quot;Save Record FAILED - see errorsquot;);
} else {
Alert.show(quot;Save Record FAILED - But errors not available - Unexpected response from serverquot;);
}
}
else {
Alert.show(quot;Save Record - Unexpected response from serverquot;);
}
}
}
public function fault(event : Object) : void {
Main.debug(quot;AccGjDocSave#fault, event = quot; + event);
var faultEvent : FaultEvent = FaultEvent(event);
Alert.show(quot;AccGjDoc could not be saved!quot;);
}
}
}

20. package com.anbawn.eile.trn.business {
import mx.rpc.IResponder;
import mx.controls.Alert;
import com.anbawn.eile.util.ServiceUtils;
import com.anbawn.eile.model.AccGjDoc;
public class AccGjDocsDelegate {
private var _responder : IResponder;
public function AccGjDocsDelegate(responder : IResponder) {
_responder = responder;
}
public function index() : void {
ServiceUtils.send(quot;/acc_gj_docs.xmlquot;, _responder);
}
public function neww() : void {
ServiceUtils.send(quot;/acc_gj_docs/new.xmlquot;, _responder);
}
public function create(rec : AccGjDoc) : void {
ServiceUtils.send(quot;/acc_gj_docs.xmlquot;, _responder,
quot;POSTquot;, rec.toXML(), true);
}
public function update(rec : AccGjDoc) : void {
ServiceUtils.send(quot;/acc_gj_docs/quot; + rec.id + quot;.xmlquot;,
_responder,
quot;PUTquot;, rec.toUpdateObject(), false);
}
public function destroy(rec : AccGjDoc) : void {
var params:Object = {};
params[quot;acc_gj_doc[lock_version]quot;] = rec.lock_version;
ServiceUtils.send(quot;/acc_gj_docs/quot; + rec.id + quot;.xmlquot;,
_responder,
quot;DELETEquot;, params, false);
}
public function show(rec : AccGjDoc) : void {
ServiceUtils.send(quot;/acc_gj_docs/quot; + rec.id + quot;.xmlquot;,
_responder);
}
}
}

21. package com.anbawn.eile.util {
import mx.rpc.IResponder;
import mx.rpc.AsyncToken;
import mx.rpc.http.HTTPService;
public class ServiceUtils {
/**
* Note: PUT and DELETE don't work with XML since the _method hack
* workaround doesn't work.
*/
public static function send(
url:String,
responder:IResponder = null,
method:String = null,
request:Object = null,
sendXML:Boolean = false,
resultFormat:String = quot;e4xquot;,
useProxy:Boolean = false) : void
{
var service:HTTPService = new HTTPService();
service.url = url;
service.contentType = sendXML ? quot;application/xmlquot; :
quot;application/x-www-form-urlencodedquot;;
service.resultFormat = resultFormat;
if (method == null) {//the method wasn't set, so default sensibly
service.method = (request == null) ? quot;GETquot; : quot;POSTquot;;
} else if ((method == quot;PUTquot;) || (method == quot;DELETEquot;)) {
service.method = quot;POSTquot;;//PUT and DELETE don't work in Flash yet
if (request == null) {
request = new Object();
}
request[quot;_methodquot;] = method;
} else {
service.method = method;
}
service.request = request;
service.useProxy = useProxy;
var call:AsyncToken = service.send();
if (responder != null) {
call.addResponder(responder);
}
}
}
}

22. Flex - views and
components
• code samples

23. <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
<!-- ABCList.mxml -->
<mx:Panel
xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;
title=quot;Listquot;
label=quot;AbcThingsquot;
layout=quot;verticalquot;
width=quot;100%quot;
height=quot;100%quot;>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
...
[Bindable]
public var model:AbcThingsModel = AppModelLocator.getInstance().abcThings;
private function onSelect() : void {
...
}
private function statusName(item:Object, column:DataGridColumn):String {
return item.status.name;
}
private function currencyCode(item:Object, column:DataGridColumn):String {
return item.currency.currency;
}
]]>
</mx:Script>
<mx:DataGrid
id=quot;dgquot;
x=quot;0quot;
y=quot;0quot;
width=quot;100%quot;
height=quot;100%quot;
dataProvider=quot;{model.abcThings}quot;
change=quot;onSelect()quot;>
<mx:columns>
<mx:DataGridColumn headerText=quot;Codequot; dataField=quot;codequot;/>
<mx:DataGridColumn headerText=quot;Namequot; dataField=quot;namequot;/>
<mx:DataGridColumn headerText=quot;Currencyquot;
dataField=quot;currency_idquot; labelFunction=quot;currencyCodequot;/>
<mx:DataGridColumn headerText=quot;Statusquot;
dataField=quot;status_codequot; labelFunction=quot;statusNamequot;/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>

24. <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
<!-- ABCEdit.mxml -->
<mx:Panel
xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;
xmlns:anb=quot;com.anbawn.components.*quot;
xmlns=quot;*quot;
title=quot;Editquot;
layout=quot;verticalquot;
width=quot;100%quot;
height=quot;100%quot;>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.core.Application;
import mx.events.ValidationResultEvent;
import mx.events.CloseEvent;
...
[Bindable]
public var datarec:AbcThing;
[Bindable]
private var appModel : AppModelLocator = AppModelLocator.getInstance();
[Bindable]
private var model : AbcThingsModel = AppModelLocator.getInstance().abcThings;
private function validateAndSubmit():void {
var invalid:Boolean = false;
var vResult:ValidationResultEvent = nameV.validate();
if (vResult.type == ValidationResultEvent.INVALID) invalid = true;
if (invalid) {
Alert.show(quot;Validation errors, record not saved.quot;);
return;
}
var rec:AbcThing = new AbcThing(
dr_name.text,
dr_code.text,
0, //currency_id:int = 0;
Currency(cb1.selectedItem),
0, //status_code:int = 0;
StatusOfMasterEntity(cb2.selectedItem),
datarec.created_by,
datarec.created_at,
datarec.updated_by,
datarec.updated_at,
datarec.lock_version,
datarec.id);
CairngormUtils.dispatchEvent(EventNames.SAVE_ABC_THING, rec);
}

25. private function resetForm():void {
...
}
private function confirmResetForm(event:CloseEvent):void {
if (event.detail == Alert.YES)
CairngormUtils.dispatchEvent(EventNames.RESET_NEW_THING);
}
private function doDelete():void {
...
}
private function confirmDelete(event:CloseEvent):void {
if (event.detail == Alert.YES)
CairngormUtils.dispatchEvent(EventNames.DELETE_THING, datarec);
}
]]>
</mx:Script>
<mx:StringValidator
id=quot;nameVquot;
source=quot;{dr_name}quot;
property=quot;textquot;
required=quot;truequot;/>
<mx:HBox>
<mx:VBox>
<mx:Form id=quot;formH1quot;
x=quot;0quot;
y=quot;0quot;
width=quot;100%quot;
height=quot;100%quot;
>
<mx:FormItem label=quot;Code:quot; required=quot;truequot;>
<mx:TextInput id=quot;dr_codequot; text=quot;{datarec.code}quot; />
</mx:FormItem>
<mx:FormItem label=quot;Name:quot; required=quot;truequot;>
<mx:TextInput id=quot;dr_namequot; text=quot;{datarec.name}quot; />
</mx:FormItem>
<mx:FormItem label=quot;Currency:quot;>
<mx:ComboBox id=quot;cb1quot;
dataProvider=quot;{appModel.currencies}quot;
selectedItem=quot;{datarec.currency}quot;
labelField=quot;namequot;/>
</mx:FormItem>
<mx:FormItem label=quot;Status:quot;>
<mx:ComboBox id=quot;cb2quot;
dataProvider=quot;{appModel.statusesOfMasterEntity}quot;
selectedItem=quot;{datarec.status}quot;
labelField=quot;namequot;/>
</mx:FormItem>
</mx:Form>

26. <mx:HBox>
<mx:Button
visible=quot;{datarec.deleting==false}quot;
label=quot;Savequot;
click=quot;validateAndSubmit()quot;/>
<mx:Button
visible=quot;{model.viewState == AppModelLocator.VIEW_STATE_NEW}quot;
label=quot;Resetquot;
click=quot;resetForm()quot;/>
<mx:Button
visible=
quot;{model.viewState == AppModelLocator.VIEW_STATE_EDIT}quot;
label=quot;Deletequot;
click=quot;doDelete()quot;/>
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:Panel>

27. <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?>
<!-- CheckBoxXYZ.mxml -->
<mx:HBox xmlns:mx=quot;http://www.adobe.com/2006/mxmlquot;
horizontalAlign=quot;centerquot;>
<mx:Script>
<![CDATA[
import mx.controls.DataGrid;
public var dataGrid:DataGrid;
private function selectRow(event:Event) :void {
if ( ... ) {
data.selected = !data.selected;
if (dataGrid != null)
dataGrid.dispatchEvent(new Event(quot;rowSelectEventquot;));
}
else //discard the user action by resetting the box
cb1.selected = data.selected;
}
]]>
</mx:Script>
<mx:CheckBox id=quot;cb1quot; selected=quot;{data.selected}quot;
click=quot;selectRow(event)quot; />
</mx:HBox>

28. package com.anbawn.components {
import mx.controls.DataGrid;
import mx.collections.ArrayCollection;
import flash.display.Sprite;
[Event(quot;rowSelectEventquot;)]
public class DataGridPlus extends DataGrid {
override protected function drawRowBackground(s:Sprite, rowIndex:int,
y:Number, height:Number, color:uint, dataIndex:int):void {
var dp:ArrayCollection = dataProvider as ArrayCollection;
var item:Object;
if (dp != null) {
if( dataIndex < dp.length ) item = dp.getItemAt(dataIndex);
if (item != null && item.selected) color = 0xFFFF00; //yellow
//0xFF8800;//orange
}
super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
}
public function myDrawRowBackgrounds() :void {
super.drawRowBackgrounds();
}
}
}

29. Flash Player?
• Adobe says...
• on more than 97% of internet-enabled
PCs
• Flash Player 9: 90.3% (June 2007)

30. Flex?
• see Peter Armstrong’s Presentation: pages
15..18

31. Flex, Be Aware
• not html, hence search engines !
• printing !
• no back button

32. Flex / Rails
• Cairngorm
• RubyAMF (Aaron Smith)
• Resources
• www.adobe.com/products/flex
• www.flexiblerails.com (see links and
resources there)