1. Daniel Wanja
Tony Hillerson

2. We wrote a
book!
• Yea, us!
• What the heck?

3. Why Flex on Rails?
• You already know “why Rails?”
• Flex is another tool in the toolbox
• Service oriented

4. Agenda
• A bit about Flex
• Highlights and source from the book
• Drinking

5. Flex is...
• Part of Adobe’s Flash platform
• Open Source (framework) and free

6. Flex is...
• A compiler
• An XML language - MXML
• A set of components

7. Flex ...
• A way to write ActionScript declaratively
• Compiles to ActionScript
• ActionScript -> SWF
• Runs in the Flash Player

8. Flex on Rails
• Compiled source - keep
separate
• SWF -> /public during
deployment
• Flex talks to Rails with
XML, JSON, or AMF

9. Development
Workflow
• Open SWF or HTML Wrapper from Public
• HTML Wrapper - can use relative urls
• SWF - Hardcode localhost:3000 :-(
• Either - Load an url from config :-)

10. Codes!
git@github.com:danielwanja/flexonrails.git
• Passing Data with XML
• RESTful Services
• Passing Data with AMF
• Data Visualization
• Building Flex with Rake
• Read the Source!
• Observers in Flex
• Authentication
• Hierarchical Data With AMF
• Advanced Data Grid with Awesome Nested Set
• Server Push with Juggernaut
• Flex and Javascript
• File Upload

11. Passing Data with XML
Rails Person.new(:first_name => 'daniel', :last_name =>
'wanja').to_xml
var person:XML = <person>
Flex <first_name>tony</first_name>
<last_name>hillerson</last_name></person>
Getting <mx:HTTPService id=quot;indexquot;
url=quot;http://localhost:3000/people.xmlquot;
XML to resultFormat=quot;e4xquot; />
Flex index.send()
<mx:HTTPService id=quot;updatequot;
url=quot;http://localhost:3000/people/{id}.xml?_method=putquot;
Sending contentType=quot;application/xmlquot;
resultFormat=quot;e4xquot;
XML to method=quot;POSTquot;
Rails result=quot;index.send()quot; />
02
update.send(person)

12. RESTful Services
HTTP verb URL Controller
GET /accounts/:account_id/positions {:action=>quot;indexquot;,
:controller=>quot;positionsquot;}
POST /accounts/:account_id/positions {:action=>quot;createquot;,
:controller=>quot;positionsquot;}
GET /accounts/:account_id/positions/:id {:action=>quot;showquot;,
:controller=>quot;positionsquot;}
PUT /accounts/:account_id/positions/:id {:action=>quot;updatequot;,
:controller=>quot;positionsquot;}
DELETE /accounts/:account_id/positions/:id {:action=>quot;destroyquot;,
:controller=>quot;positionsquot;}
03

13. Nested Resources
class Account < ActiveRecord::Base class Position < ActiveRecord::Base class Movement < ActiveRecord::Base
has_many :positions, belongs_to :account belongs_to :position
:dependent => :destroy has_many :movements, end
end :dependent => :destroy
end
/accounts/:id
/accounts/:account_id/positions/:id
/accounts/:account_id/positions/:position_id/movements/:id

14. Data Visualization
07

15. Authentication
• All Flex service calls go through the
browser
• AIR manages cookies
• = Standard cookie based credentials work
fine

16. Hierarchical Data with
AMF
• Works nicely with Awesome Nested Set
• Good for retrieving Object Graphs
• More work when sending Object Graphs

17. Read the Source!
• Flex source is available in Flex Builder
• MXML is compiled to ActionScript

18. Observers in Flex
• Binding is sweet
• {} notation
• BindingUtils
• ChangeWatcher

19. Building Flex with Rake
• Simple shell command to mxmlc
• mxmlc needs to be in the path

20. Flex and Javascript
• HTML *and* Flex is sometimes the right
answer
• Flex Ajax Bridge
• ExternalInterface

21. Advanced Data Grid with
Awesome Nested Set
class Category < ActiveRecord::Base
acts_as_nested_set
def full_xml(builder=nil)
xml = builder ||= Builder::XmlMarkup.new(:indent => 2)
xml.category(:id => id,
:name => name,
:description => description,
:qty_in_stock => qty_in_stock) do
children.each { |child| child.full_xml(xml) }
end
end
end
<mx:HTTPService id=quot;categoriesquot; url=quot;http://localhost:3000/categoriesquot; resultFormat=quot;e4xquot; />
18

22. Server Push with Juggernaut
message to socket
localhost:3000/
1. post to http://
3. push JSON
Nt
messenger/
O cke
message
JS so
h
us e to
p
3. sag
es
m
2. send_to_channels
Juggernaut
Rails Application
Push Server
20

23. Server Push with Juggernaut
class MessengerController <
ApplicationController
def message
data = {:user => params[:user], :message =>
params[:message]}
message to socket
localhost:3000/
1. post to http://
3. push JSON
Nt
messenger/
O ke
message
JS soc
h
us to
. p age
Juggernaut.send_to_channel(data, :im_channel)
3s
es
m
render :nothing => true
end
2. send_to_channels
end
Juggernaut
Rails Application
Push Server
<mx:HTTPService id=quot;sendMessagequot; url=quot;http://
<net:XMLSocket id=quot;socketquot;
localhost:3000/messenger/messagequot;
connect=quot;connectHandler(event)quot;
method=quot;POSTquot; result=quot;msg.text=''quot;
data=quot;dataHandler(event)quot;
fault=quot;mx.controls.Alert.show(event.fault.faultS
close=quot;closeHandler(event)quot;
tring);quot;>
ioError=quot;ioErrorHandler(event)quot;
<mx:request xmlns=quot;quot;>
<user>{user.text}</user>
securityError=quot;securityErrorHandler(event)quot; />
<message>{msg.text}</message>
</mx:request>
socket.connect(hostName, port);
</mx:HTTPService>

24. File Upload
class Asset < ActiveRecord::Base
<net:FileReference id=quot;fileReferencequot; has_attachment :storage => :file_system
select=quot;selectHandler(event)quot; /> end
private function selectHandler(event:Event):void class AssetsController < ApplicationController
{ def create
var request:URLRequest = @asset = Asset.new(params[:asset])
new URLRequest(quot;http://localhost:3000/assetsquot;) if @asset.save
var uploadDataFieldName:String = render(:nothing => true, :status => 200)
'asset[uploaded_data]' else
fileReference.upload(request, render(:nothing => true, :status => 500)
uploadDataFieldName); end
} end
end
22