flexonrails derailed talk
Post on 28-Jun-2015
1.543 Views
Preview:
DESCRIPTION
TRANSCRIPT
Daniel WanjaTony Hillerson
We wrote a book!
• Yea, us!
• What the heck?
Why Flex on Rails?
• You already know “why Rails?”
• Flex is another tool in the toolbox
• Service oriented
Agenda
• A bit about Flex
• Highlights and source from the book
• Drinking
Flex is...
• Part of Adobe’s Flash platform
• Open Source (framework) and free
Flex is...
• A compiler
• An XML language - MXML
• A set of components
Flex ...
• A way to write ActionScript declaratively
• Compiles to ActionScript
• ActionScript -> SWF
• Runs in the Flash Player
Flex on Rails
• Compiled source - keep separate
• SWF -> /public during deployment
• Flex talks to Rails withXML, JSON, or AMF
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 :-)
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
Passing Data with XML
Rails Person.new(:first_name => 'daniel', :last_name => 'wanja').to_xml
Flexvar person:XML = <person><first_name>tony</first_name><last_name>hillerson</last_name></person>
Getting XML to
Flex
<mx:HTTPService id="index" url="http://localhost:3000/people.xml" resultFormat="e4x" />
index.send()
Sending XML to
Rails
<mx:HTTPService id="update" url="http://localhost:3000/people/{id}.xml?_method=put" contentType="application/xml" resultFormat="e4x" method="POST" result="index.send()" />
update.send(person) 02
RESTful ServicesHTTP verb URL Controller
GET /accounts/:account_id/positions {:action=>"index", :controller=>"positions"}
POST /accounts/:account_id/positions {:action=>"create", :controller=>"positions"}
GET /accounts/:account_id/positions/:id {:action=>"show", :controller=>"positions"}
PUT /accounts/:account_id/positions/:id {:action=>"update", :controller=>"positions"}
DELETE /accounts/:account_id/positions/:id {:action=>"destroy", :controller=>"positions"}
03
Nested Resources
/accounts/:id
/accounts/:account_id/positions/:id
/accounts/:account_id/positions/:position_id/movements/:id
class Account < ActiveRecord::Base has_many :positions, :dependent => :destroyend
class Position < ActiveRecord::Base belongs_to :account has_many :movements, :dependent => :destroyend
class Movement < ActiveRecord::Base belongs_to :positionend
Data Visualization
07
Authentication
• All Flex service calls go through the browser
• AIR manages cookies
• = Standard cookie based credentials work fine
Hierarchical Data with AMF
• Works nicely with Awesome Nested Set
• Good for retrieving Object Graphs
• More work when sending Object Graphs
Read the Source!
• Flex source is available in Flex Builder
• MXML is compiled to ActionScript
Observers in Flex
• Binding is sweet
• {} notation
• BindingUtils
• ChangeWatcher
Building Flex with Rake
• Simple shell command to mxmlc
• mxmlc needs to be in the path
Flex and Javascript
• HTML *and* Flex is sometimes the right answer
• Flex Ajax Bridge
• ExternalInterface
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="categories" url="http://localhost:3000/categories" resultFormat="e4x" />
18
Server Push with Juggernaut
JuggernautPush Server
2. send_to_channels
1.
po
st
to http://
localhost:3000/
messenger/
message
3.
pu
sh
JS
ON
m
essa
ge
to
so
cke
t
3. p
ush
JSO
N
mes
sage
to s
ocke
t
Rails Application
20
Server Push with Juggernaut
JuggernautPush Server
2. send_to_channels
1. post to
http://
localhost:3000/
messenger/
message
3. push J
SO
N
message to s
ocket
3. p
ush
JSO
N
mes
sage
to s
ocke
t
Rails Application
class MessengerController < ApplicationController def message data = {:user => params[:user], :message => params[:message]} Juggernaut.send_to_channel(data, :im_channel) render :nothing => true endend
<mx:HTTPService id="sendMessage" url="http://localhost:3000/messenger/message" method="POST" result="msg.text=''" fault="mx.controls.Alert.show(event.fault.faultString);"> <mx:request xmlns=""> <user>{user.text}</user> <message>{msg.text}</message> </mx:request></mx:HTTPService>
<net:XMLSocket id="socket" connect="connectHandler(event)" data="dataHandler(event)" close="closeHandler(event)" ioError="ioErrorHandler(event)" securityError="securityErrorHandler(event)" /> socket.connect(hostName, port);
File Upload
<net:FileReference id="fileReference" select="selectHandler(event)" />
private function selectHandler(event:Event):void { var request:URLRequest = new URLRequest("http://localhost:3000/assets") var uploadDataFieldName:String = 'asset[uploaded_data]' fileReference.upload(request, uploadDataFieldName);}
class Asset < ActiveRecord::Base has_attachment :storage => :file_systemend
class AssetsController < ApplicationController def create @asset = Asset.new(params[:asset]) if @asset.save render(:nothing => true, :status => 200) else render(:nothing => true, :status => 500) end endend
22
top related