Your SlideShare is downloading. ×
Flexonrails Derailed Talk
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Flexonrails Derailed Talk

1,526
views

Published on

Slides from the talk, demoing the source code from out Flex on Rails book, given on January 22nd at Derailed (the Denver Ruby on Rails user group). Source code is available on http://flexonrails.com

Slides from the talk, demoing the source code from out Flex on Rails book, given on January 22nd at Derailed (the Denver Ruby on Rails user group). Source code is available on http://flexonrails.com

Published in: Technology

1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,526
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×