Gaurav » user interface http://allyourcodearebelongto.me/blog All About Everything Sun, 23 Nov 2008 19:44:48 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Using RubyAmf for creating a CRUD application in Rails http://allyourcodearebelongto.me/blog/2008/11/12/using-rubyamf-for-creating-a-crud-application-in-rails/ http://allyourcodearebelongto.me/blog/2008/11/12/using-rubyamf-for-creating-a-crud-application-in-rails/#comments Wed, 12 Nov 2008 11:35:45 +0000 Gaurav http://allyourcodearebelongto.me/blog/2008/11/12/using-rubyamf-for-creating-a-crud-application-in-rails/ CRUD applications can be easily created using Ruby on Rails as the backend and Flex as the frontend app using the XML format as demonstrated here.

Another way to create such applications is using the AMF protocol which is optimized for network communications and stores objects in binary format so consumes less bandwidth. Another compelling reason for using this library is that it doesn’t feel like a hack as it integrates very nicely with Rails :)

The Ruby port of this protocol known as RubyAmf can be downloaded from from here. More information about this protocol can be found here.

Lets start making the application.

 

Create a Rails Application:

   1: > rails amf_demo

This will create a rails application. Please note that I am using Rails 2.1.2 for this example and it is not tested on any other Rails version.

Generate a scaffold:

   1: > ruby script/generate scaffold blog_post title:string body:text

Create Tables and run Migrations:

   1: > rake db:migrate

   1: > rake db:create

Install the RubyAmf Plugin:

 

 

Step 1: Lets try if everything is working fine by creating a new Flex Project

Open Flex Builder and create a new Flex Project

image

 

Select all the default options and click Finish.

Now right click on the project you just created in Flex Navigator and select Properties. The Flex Build Path should have the following settings:

image

The Output folder will point to the public folder of the amf_demo Rails application and the Output folder URL will point to the Rails server which in  my case is localhost on port 80.

 

Start the Rails server:

   1: > ruby script/server -p 80

And start the project in Debugging mode. The Web Browser will show up a blank page.

image

 

Some helper files can be downloaded from the RubyAmf project site here

These are located in the “flash9_helloworld\flash9_helloworld\app\flash\org” of the archive.

Or just download the extracted archive from here. Put these files in the “src” directory of your Flex project. So the “src” folder should now have a folder with name “org” inside it.

Fetching Data off the server:

Firstly we will need to update the “BlogPostsController” so that it can generate amf content. It can be done by modifying the the index action to following:

   1: def index
   2:   @blog_posts = BlogPost.find(:all)
   3:  
   4:   respond_to do |format|
   5:     format.html # index.html.erb
   6:     format.amf  { render :amf => @blog_posts }
   7:     format.xml  { render :xml => @blog_posts }
   8:   end
   9: end

 

Now change the main mxml file of the Flex project to include code that fetches data off the server. In the current project the name of the file should be “amf_demo.mxml”

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
   3:     creationComplete="creationCompleteEvent(event)" xmlns:ssr="org.rubyamf.remoting.ssr.*">
   4:     <mx:Script>
   5:         <![CDATA[
   6:             import org.rubyamf.remoting.ssr.FaultEvent;
   7:             import org.rubyamf.remoting.ssr.ResultEvent;
   8:             import org.rubyamf.remoting.ssr.RemotingService;
   9:             private function creationCompleteEvent(evemt:Event):void{
  10:                 var service:RemotingService = new RemotingService("/rubyamf/gateway", "BlogPostsController");
  11:                 service.index([], onIndexResult, onFault);
  12:             }
  13:             private function onIndexResult(event:ResultEvent):void{
  14:                 trace(event.result);
  15:             }
  16:             private function onFault(event:FaultEvent):void{
  17:                 trace(event.fault);
  18:             }
  19:         ]]>
  20:     </mx:Script>
  21: </mx:Application>

 

The main component of this code is the “RemoteService” class and in the above given example it is invoking the index action on the server. On running this example the onIndexResult should be triggered and the debug window should show all the BlogPosts in the db. You can also put  a break-pointer to analyze the results.

image

One thing you will notice here is that the output result are plain ActionScript Objects. In the next step I will show how to map these objects to an ActionScript class.

Download code for upto this point:

  1. Rails Code
  2. Flex Code

 

Step 2: Mapping results to Action Script classes

Generate Mappings:

In the project root directory run the following command.

   1: > ruby script/generate rubyamf_mappings

Copy the output of this command to config/rubyamf_config.rb in the Rails project and now this file should look like this after some modifications:

   1: require 'app/configuration'
   2: module RubyAMF
   3:   module Configuration
   4:     #set the service path used in all requests
   5:     # RubyAMF::App::RequestStore.service_path = File.expand_path(RAILS_ROOT) + '/app/controllers'
   6:  
   7:     # => CLASS MAPPING CONFIGURATION
   8:     
   9:     # => Global Property Ignoring
  10:     # By putting attribute names into this array, you opt in to globally ignore these properties on incoming objects.
  11:     # If you want to ignore specific properties on certain objects, use the :ignore_fields property in a 
  12:     # Class Mapping definition (see CLASS MAPPING DEFINITIONS)
  13:     # ClassMappings.ignore_fields = ['created_at','created_on','updated_at','updated_on']
  14:   
  15:     # => Case Translations
  16:     # Most actionscript uses camelCase instead of snake_case. Set ClassMappings.translate_case to true if want translations to occur.
  17:     # The translations only occur on object properties
  18:     # An incoming property like: myProperty gets turned into my_property
  19:     # An outgoing property like my_property gets turned into myProperty
  20:     ClassMappings.translate_case = true
  21:   
  22:     # => Force Active Record Ids
  23:     # includes the id field for activerecord objects even if you don't specify it when using custom attributes. This is important for deserialization
  24:     # where ids are needed to keep active record association integrity.
  25:     # ClassMappings.force_active_record_ids = true
  26:     
  27:     # => Hash key access
  28:     # You can choose how keys in hashes are created. As :string, :symbol, or :indifferent. 
  29:     # :string creates keys as hash['key']
  30:     # :symbol creates keys as hash[:key]
  31:     # :indifferent uses rails HashWithIndifferentAccess so you can use hash[:key] of hash['key']
  32:     # There are performance issues with HashWithIndifferentAccess. Use :symbol or :string for best performance.
  33:     # The default is :symbol
  34:     ClassMappings.hash_key_access = :string
  35:     
  36:     # => Assume Class Types
  37:     # This tells RubyAMF to assume class type transfers. So when you register a class Alias from Flash or Flex like this:
  38:     # Flash::   fl.net.registerClassAlias('User',User)
  39:     # Flex::    [RemoteClass(alias='User')]
  40:     # RubyAMF will automagically convert it to a User active record without you having to create a class mapping.
  41:     # This also works with non active record class mappings. See the wiki on the google code page for a downloadable example.
  42:     # ClassMappings.assume_types = false
  43:     
  44:     # => Class Mapping Definitions
  45:     # A Class Mapping definition conists of at least these two properties:
  46:     # :actionscript   # The incoming action script class to watch for
  47:     # :ruby           # The ruby class to turn it into
  48:     #
  49:     # => Optional value object properties:
  50:     # :type           # Used to spectify the type of VO, valid options are 'active_record', 'custom',  (or don't specify at all)
  51:     # :associations   # Specify which associations to read on the active record (only applies to active records)
  52:     # :attributes     # Specifically which attributes to include in the serialization
  53:     # :methods        # An array of methods to call and place values in a similarly named attribute on the Actionscript Object (outgoing, or Rails => Actionscript only)
  54:     # :ignore_fields  # An array of field names you want to ignore on incoming classes
  55:     #
  56:     # If you are using ActiveRecord VO's you do not need to specify a fully qualified class path to the model, you can just define the class name, 
  57:     # EX: ClassMappings.register(:actionscript => 'vo.Person', :ruby => 'Person', :type => 'active_record')
  58:     #
  59:     # If you are using custom VO's you would need to specify the fully qualified class path to the file
  60:     # EX: ClassMappings.register(:actionscript => 'vo.Person', :ruby => 'org.mypackage.Person')
  61:     #
  62:     # ClassMappings.register(:actionscript => 'Person', :ruby => 'Person', :type => 'active_record', :attributes => ["id", "address_id"])
  63:     # ClassMappings.register(:actionscript => 'User', :ruby => 'User', :type => 'active_record', :associations=> ["addresses", "credit_cards"])
  64:     # ClassMappings.register(:actionscript => 'Address', :ruby => 'Address', :type => 'active_record')
  65:     # ClassMappings.register(:actionscript => 'User', :ruby => 'User', :type => 'active_record', :associations=> ["addresses", "credit_cards"], :methods => ["friends"])
  66:     #
  67:     # => Class Mapping Scope (Advanced Usage)
  68:     # You can also specify a class mapping scope if you want. For example, lets say you need certain attributes for a book when you are viewing a book
  69:     # in flex as opposed to editing a book (where you would need more parameters). You can define a scope mapping parameter for ":attributes"
  70:     # or for ":associations." You're mapping would look something like this.
  71:     # ClassMappings.register(
  72:     #   :actionscript  => 'com.mixbook.vo.books.BookVO',      
  73:     #   :ruby          => 'Book',      
  74:     #   :type          => 'active_record',
  75:     #   :associations  => ["access_info", "pages", "page_ratio"],  
  76:     #   :attributes    => {:viewing => ["description", "title"], :editing => ["id","published_at","theme_id"] }    <=== notice the hash instead of an array
  77:     #
  78:     # Now, to call the class mapping scope of editing (you are sending objects to the editing application), your controller call would look like this:
  79:     # EX: render :amf => book, :class_mapping_scope => :editing
  80:     #
  81:     # You can also specify a default scope to use. If you don't set this and you don't specify a class mapping scope on an attribute or association, then 
  82:     # it will not have a scope to use and will not add any attributes or associations (whichever it cant match) to that association.
  83:     # ClassMappings.default_mapping_scope = :viewing
  84:   
  85:     # => Date Conversion
  86:     # Incoming dates from Flash by default are Time objects, this can conver to DateTime if needed
  87:     # ClassMappings.use_ruby_date_time = false
  88:   
  89:     # => Use Array Collection
  90:     # By setting this to true, you opt in to using array collections for all the arrays generated by the body of your request.
  91:     # Note: This only works for amf3 with Remote Object, NOT with Net Connection.
  92:     # ClassMappings.use_array_collection = false
  93:   
  94:     # => Check for Associations
  95:     # Enabling this will automagically pick up eager loaded association data on objects returned through RubyAMF.
  96:     # If this is disabled, you will need to specify any associations you DO want picked up in the ClassMapping
  97:     # ClassMappings.check_for_associations = true
  98:     
  99:     # => NAMED PARAMETER MAPPING CONFIGURATION
 100:     
 101:     #=> Always Put Remoting Parameters into the "params" hash
 102:     # If set to true, arguments from Flash/Flex will come in to the controllers as params[0], params[1], etc.. This is especally useful if you are sending huge objects
 103:     # from Flex into Ruby so it doesnt eat up all your output window with outputting the params in the controller/action header information while in dev mode.
 104:     # Even if its set to false, if you specify specific ParameterMappings, those will still get entered as the param keys you specify. Likewise, you
 105:     # always have access to the parameters from rubyamf in your controller by calling rubyamf_params[0], rubyamf_params[1], etc regardless of
 106:     # if it this is set or not.
 107:     # ParameterMappings.always_add_to_params = true
 108:      
 109:     # => Return Top Level Hash
 110:     # For those scaffolding users out there, who want the top-level object to come as a hash so scaffolding works out of the box.
 111:     ParameterMappings.scaffolding = true
 112:   
 113:     # => Incoming Remoting Parameter Mappings
 114:     # Incoming Remoting Parameter mappings allow you to map an incoming requests parameters into rails' params hash
 115:     #
 116:     # Here's an example:
 117:     # ParameterMappings.register(:controller => :UserController, :action => :find_friend, :params => { :friend => "[0]['friend']" })
 118:     ClassMappings.register(
 119:       :actionscript  => 'BlogPost',
 120:       :ruby          => 'BlogPost',
 121:       :type          => 'active_record',
 122:       :attributes    => ["id", "title", "body", "created_at", "updated_at"])
 123:   end
 124: end

 

Create a new ActionScript Class with name “BlogPost” and it should have the following code:

   1: package
   2: {
   3:     [RemoteClass(alias='BlogPost')]
   4:     public class BlogPost
   5:     {
   6:         public var id:int;
   7:         public var title:String; 
   8:         public var body:String;
   9:     }
  10: }

 

And modify the “amf_demo.mxml” file to include this file. Also change the “service.index” method to to use this file:

   1: service.index([], onIndexResult, onFault, BlogPost);

 

Now when you debug and check the output in the “onIndexResult” it should look like:

image

 

Download code for upto this point:

  1. Rails Code
  2. Flex Code

 

Step 3: Creating a UI

Change the amf_demo.mxml to the following code.

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
   3:     creationComplete="creationCompleteEvent(event)" xmlns:ssr="org.rubyamf.remoting.ssr.*">
   4:     <mx:Script>
   5:         <![CDATA[
   6:             import mx.collections.ArrayCollection;
   7:             import org.rubyamf.remoting.ssr.FaultEvent;
   8:             import org.rubyamf.remoting.ssr.ResultEvent;
   9:             import org.rubyamf.remoting.ssr.RemotingService;
  10:             [Bindable]
  11:             private var blogPosts:ArrayCollection;
  12:             
  13:             private function creationCompleteEvent(evemt:Event):void{
  14:                 var service:RemotingService = new RemotingService("/rubyamf/gateway", "BlogPostsController");
  15:                 service.index([], onIndexResult, onFault, BlogPost);
  16:             }
  17:             private function onIndexResult(event:ResultEvent):void{
  18:                 blogPosts = new ArrayCollection(event.result as Array);
  19:             }
  20:             private function onFault(event:FaultEvent):void{
  21:                 trace(event.fault);
  22:             }
  23:         ]]>
  24:     </mx:Script>
  25:     
  26:     <mx:List width="300" dataProvider="{blogPosts}" labelField="title" />
  27: </mx:Application>

Here the result of the onIndexResult event is bound to a list to Display all the blog posts in the database. This is probably the simplest way to do this. The output will look like:

image

Download code for upto this point:

  1. Rails Code (no changes)
  2. Flex Code

 

Step 4: Refactoring Completing CRUD

As a single page can display more than one list, it would make more sense if we move the code into separate files for each list. So I will be moving all the BlogPost related code in the “BlogPost” class.

So the “BlogPost.as” will look like:

   1: package
   2: {
   3:     import mx.collections.ArrayCollection;
   4:     import org.rubyamf.remoting.ssr.FaultEvent;
   5:     import org.rubyamf.remoting.ssr.ResultEvent;
   6:     import org.rubyamf.remoting.ssr.RemotingService;
   7:             
   8:     [RemoteClass(alias='BlogPost')]
   9:     public class BlogPost
  10:     {
  11:         public var id:int;
  12:         public var title:String; 
  13:         public var body:String;
  14:         
  15:         [Bindable]
  16:         public static var blogPosts:ArrayCollection;
  17:         private var service:RemotingService = new RemotingService("/rubyamf/gateway", "BlogPostsController");
  18:         
  19:         public static function getBlogPosts():void{
  20:             (new BlogPost()).getBlogPosts();
  21:         }
  22:         private function getBlogPosts():void{
  23:             service.index([], onIndexResult, onFault, BlogPost);
  24:         }
  25:         private function onIndexResult(event:ResultEvent):void{
  26:             BlogPost.blogPosts = new ArrayCollection(event.result as Array);
  27:         }
  28:         private function onFault(event:FaultEvent):void{
  29:             trace(event.fault);
  30:         }
  31:     }
  32: }

 

And “amf_demo.mxml”:

   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
   3:     creationComplete="creationCompleteEvent(event)" xmlns:ssr="org.rubyamf.remoting.ssr.*">
   4:     <mx:Script>
   5:         <![CDATA[
   6:             private function creationCompleteEvent(evemt:Event):void{
   7:                 BlogPost.getBlogPosts();
   8:             }
   9:         ]]>
  10:     </mx:Script>
  11:     <mx:List width="300" dataProvider="{BlogPost.blogPosts}" labelField="title" />
  12: </mx:Application>

 

Download code for upto this point:

  1. Rails Code (no changes)
  2. Flex Code

 

Step 5: Completing CRUD

After further refactoring the code and adding methods for creating/editing/destroying the code looks like:

  • amf_demo.mxml 
   1: <?xml version="1.0" encoding="utf-8"?>
   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
   3:     creationComplete="creationCompleteEvent(event)" xmlns:ssr="org.rubyamf.remoting.ssr.*">
   4:     <mx:Script>
   5:         <![CDATA[
   6:             private function creationCompleteEvent(event:Event):void{
   7:                 BlogPost.parentContainer = this;
   8:                 BlogPost.getBlogPosts();
   9:             }
  10:             private function blogPostCreateEvent(event:Event):void{
  11:                 (new BlogPost(title.text, body.text)).create();
  12:             }
  13:             private function blogPostUpdateEvent(event:Event):void{
  14:                 var blogPost:BlogPost     = currentPost();
  15:                 blogPost.title             = title.text;
  16:                 blogPost.body              = body.text; 
  17:                 blogPost.update();
  18:             }
  19:             private function blogPostdestroyEvent(event:Event):void{
  20:                 currentPost().destroy();
  21:             }
  22:             private function currentPost():BlogPost{
  23:                 return blogPosts.selectedItem as BlogPost;
  24:             }
  25:         ]]>
  26:     </mx:Script>
  27:     <mx:List width="300" dataProvider="{BlogPost.blogPosts}" labelField="title" id="blogPosts"/>
  28:     <mx:Panel layout="vertical" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
  29:         <mx:HBox width="100%">
  30:             <mx:Label text="Post Title" width="60"/>
  31:             <mx:TextInput id="title" text="{blogPosts.selectedItem.title}"/>
  32:         </mx:HBox>
  33:         <mx:HBox width="100%">
  34:             <mx:Label text="Post Body" width="60" />
  35:             <mx:TextArea id="body" text="{blogPosts.selectedItem.body}"/>
  36:         </mx:HBox>
  37:         <mx:ControlBar>
  38:             <mx:Button label="Create" click="blogPostCreateEvent(event)" />
  39:             <mx:Button label="Update" click="blogPostUpdateEvent(event)" />
  40:             <mx:Button label="Destroy" click="blogPostdestroyEvent(event)" />
  41:         </mx:ControlBar>
  42:     </mx:Panel>
  43: </mx:Application>

  • BlogPost.as 
   1: package
   2: {
   3:     import mx.collections.ArrayCollection;
   4:     import mx.core.UIComponent;
   5:     
   6:     import org.rubyamf.remoting.ssr.FaultEvent;
   7:     import org.rubyamf.remoting.ssr.RemotingService;
   8:     import org.rubyamf.remoting.ssr.ResultEvent;
   9:             
  10:     [RemoteClass(alias='BlogPost')]
  11:     public class BlogPost
  12:     {
  13:         public var id:int;
  14:         public var title:String; 
  15:         public var body:String;
  16:         public var simpleErrors:Object;
  17:         
  18:         [Bindable]
  19:         public static var blogPosts:ArrayCollection;
  20:         public static var parentContainer:UIComponent;
  21:         private var service:RemotingService = new RemotingService("/rubyamf/gateway", "BlogPostsController");
  22:         
  23:         public function BlogPost(title:String = "", body:String = ""){
  24:             this.title = title;
  25:             this.body  = body;
  26:         }
  27:         // index methods
  28:         public static function getBlogPosts():void{
  29:             (new BlogPost()).getBlogPosts();
  30:         }
  31:         private function getBlogPosts():void{
  32:             service.index([], onIndexResult, onFault, BlogPost);
  33:         }
  34:         private function onIndexResult(event:ResultEvent):void{
  35:             BlogPost.blogPosts = new ArrayCollection(event.result as Array);
  36:         }
  37:         // create methods
  38:         public function create():void{
  39:             service.create([this], onCreateResult, onFault, BlogPost);
  40:         }
  41:         private function onCreateResult(event:ResultEvent):void{
  42:             var blogPost:BlogPost = event.result as BlogPost;
  43:             if(BlogPost.count(blogPost.simpleErrors) == 0)
  44:                 BlogPost.blogPosts.addItem(blogPost);
  45:             else
  46:                 showErrors(blogPost.simpleErrors);
  47:         }
  48:         // update methods
  49:         public function update():void{
  50:             service.update([this], onUpdateResult, onFault, BlogPost);
  51:         }
  52:         private function onUpdateResult(event:ResultEvent):void{
  53:             var blogPost:BlogPost = event.result as BlogPost;
  54:             if(BlogPost.count(blogPost.simpleErrors) == 0)
  55:                 BlogPost.blogPosts[BlogPost.blogPosts.getItemIndex(this)] = blogPost;
  56:             else
  57:                 showErrors(blogPost.simpleErrors);
  58:         }
  59:         // update methods
  60:         public function destroy():void{
  61:             service.destroy([this], onDestroyResult, onFault, BlogPost);
  62:         }
  63:         private function onDestroyResult(event:ResultEvent):void{
  64:             var blogPost:BlogPost = event.result as BlogPost;
  65:             BlogPost.blogPosts.removeItemAt(BlogPost.blogPosts.getItemIndex(this));
  66:         }
  67:         
  68:         // common methods
  69:         private function showErrors(errors:Object):void{
  70:             for(var error:String in errors){
  71:                 var field:UIComponent =  parentContainer[error] as UIComponent;
  72:                 field.errorString = (errors[error] as Array).join('\r');
  73:             }
  74:         }
  75:         private static function count(object:Object):int{
  76:             var i:int = i;
  77:             for(var obj:* in object) i++;
  78:             return i;
  79:         }
  80:         private function onFault(event:FaultEvent):void{
  81:             trace(event.fault);
  82:         }
  83:     }
  84: }

 

  • BlogPostsController 
   1: class BlogPostsController < ApplicationController
   2:   before_filter :filter_attributes, :only=> [:create, :update]
   3:  
   4:   def filter_attributes
   5:     params[:blog_post] && params[:blog_post][:attributes] && params[:blog_post] = params[:blog_post][:attributes]
   6:   end
   7:   
   8:   # GET /blog_posts
   9:   # GET /blog_posts.xml
  10:   def index
  11:     @blog_posts = BlogPost.find(:all)
  12:  
  13:     respond_to do |format|
  14:       format.html # index.html.erb
  15:       format.amf  { render :amf => @blog_posts }
  16:       format.xml  { render :xml => @blog_posts }
  17:     end
  18:   end
  19:   
  20:   # GET /blog_posts/1
  21:   # GET /blog_posts/1.xml
  22:   def show
  23:     @blog_post = BlogPost.find(params[:id])
  24:  
  25:     respond_to do |format|
  26:       format.html # show.html.erb
  27:       format.xml  { render :xml => @blog_post }
  28:     end
  29:   end
  30:  
  31:   # GET /blog_posts/new
  32:   # GET /blog_posts/new.xml
  33:   def new
  34:     @blog_post = BlogPost.new
  35:  
  36:     respond_to do |format|
  37:       format.html # new.html.erb
  38:       format.xml  { render :xml => @blog_post }
  39:     end
  40:   end
  41:  
  42:   # GET /blog_posts/1/edit
  43:   def edit
  44:     @blog_post = BlogPost.find(params[:id])
  45:   end
  46:  
  47:   # POST /blog_posts
  48:   # POST /blog_posts.xml
  49:   def create
  50:     @blog_post = BlogPost.new(params[:blog_post])
  51:  
  52:     respond_to do |format|
  53:       if @blog_post.save
  54:         flash[:notice] = 'BlogPost was successfully created.'
  55:         format.html { redirect_to(@blog_post) }
  56:         format.amf  { render :amf => @blog_post }
  57:         format.xml  { render :xml => @blog_post, :status => :created, :location => @blog_post }
  58:       else
  59:         format.html { render :action => "new" }
  60:         format.amf  { render :amf => @blog_post }
  61:         format.xml  { render :xml => @blog_post.errors, :status => :unprocessable_entity }
  62:       end
  63:     end
  64:   end
  65:  
  66:   # PUT /blog_posts/1
  67:   # PUT /blog_posts/1.xml
  68:   def update
  69:     @blog_post = BlogPost.find(params[:id])
  70:  
  71:     respond_to do |format|
  72:       if @blog_post.update_attributes(params[:blog_post])
  73:         flash[:notice] = 'BlogPost was successfully updated.'
  74:         format.html { redirect_to(@blog_post) }
  75:         format.amf  { render :amf => @blog_post }
  76:         format.xml  { head :ok }
  77:       else
  78:         format.html { render :action => "edit" }
  79:         format.amf  { render :amf => @blog_post }
  80:         format.xml  { render :xml => @blog_post.errors, :status => :unprocessable_entity }
  81:       end
  82:     end
  83:   end
  84:  
  85:   # DELETE /blog_posts/1
  86:   # DELETE /blog_posts/1.xml
  87:   def destroy
  88:     @blog_post = BlogPost.find(params[:id])
  89:     @blog_post.destroy
  90:  
  91:     respond_to do |format|
  92:       format.html { redirect_to(blog_posts_url) }
  93:       format.amf  { render :amf => @blog_post }
  94:       format.xml  { head :ok }
  95:     end
  96:   end
  97: end

Please note the before filter in the rails controller which is converting the params in appropriate format so that rest of the code continues to work seamlessly.

 

Here is what the output looks like when you run the application

image

 

Download code for upto this point:

  1. Rails Code
  2. Flex Code

 

So the steps taken in completing this application were:

  1. Creating a Rails app
  2. Install RubyAmf plugin
  3. Configure the RubyAmf plugin
  4. Create a Flex app
  5. Install the appropriate libraries in it
  6. Create and refactor code

 

Questions and comments are welcome :)

]]> http://allyourcodearebelongto.me/blog/2008/11/12/using-rubyamf-for-creating-a-crud-application-in-rails/feed/ 8 Multiple ways to open PowerShell in the current Explorer window http://allyourcodearebelongto.me/blog/2008/10/14/multiple-ways-to-open-powershell-in-the-current-explorer-window/ http://allyourcodearebelongto.me/blog/2008/10/14/multiple-ways-to-open-powershell-in-the-current-explorer-window/#comments Tue, 14 Oct 2008 16:42:35 +0000 Gaurav http://techblogging.wordpress.com/2008/10/14/multiple-ways-to-open-powershell-in-the-current-explorer-window/

These techniques are generic and can be used for other items like command prompt as well. A word of caution, everything given below involves fiddling with the registry so please backup your system’s registry or create a restore point before trying this out.

1) Adding it to Vista Explorer’s toolbar:

image

This is the most convenient one in my opinion, but requires most work to enable it.

Firstly, navigate to the following registry key:

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\explorer\FolderTypes\{7d49d726-3c21-4f05-99aa-fdc2c9474656}

Its should have the following items:

image

Note that it has following two items:

  1. TasksItemsSelected: Enabled when an item is selected in the view.
  2. TasksNoItemsSelected: Enabled when nothing is selected in the view.

Each of these keys have multiple items inside them each pointing to separate shortcut inside the toolbar.

Import the following registry file so that the PowerShell icon appears in the toolbar:

Download From Skydrive

Before importing I will also point out that I am assuming the a batch file exists at the following path:

C:\\Users\\Gaurav\\Programs\\shortcuts\\psh_launch.bat %2

The content of this file should be:

   1: @echo off
   2: pushd %1
   3: %SystemRoot%\system32\WindowsPowerShell\v1.0\powershell.exe
   4: @echo

You can search and replace the location of this file to your custom location inside the just downloaded registry file. Its being used in two places.

Also, remember to take a backup of this registry key or make a restore point before importing this registry key.

That’s it. Now a PowerShell Icon should appear inside the every folder.

 

The PowerShell icon still doesn’t appear?

Actually the registry file only modifies the folders of Document Type and the PowerShell icon will appear only inside folders of Document Type.

An easy way to make all the folders inside a Drive Document Type:

right click on drive/partition –> select Properties –> select Customize tab-> and select following options:

image 

So this way we just forced all the folders in the drive to be of Document Type.

The same procedure can be used to add multiple items on the toolbar. Its a lot of work but the end result is worth it :)

 

2) Using AutoHotKey

AutoHotKey is used for creating keyboard macros.

AutoHotKey will use the same batch file that was created to launch PowerShell in the current directory.

Here is the script:

   1: !p::
   2: IfWinActive ahk_class CabinetWClass
   3: {
   4: WinGetClass explorerClass, A
   5: ControlGetText currentPath, Edit1, ahk_class %explorerClass%
   6: run C:\\Users\\Gaurav\\Programs\\shortcuts\\psh_launch.bat "%currentPath%"
   7: }
   8: return

Just fix path to the batch file, save and reload AutoHotKey.

Now press Alt + P to launch PowerShell inside the current explorer window.

 

3) Right Click Menu

image

To add PowerShell to right click menu navigate to following registry entry:

HKEY_CLASSES_ROOT\Directory\Background\shell

and create a key with name powershell inside shell and a key with name command inside it. Edit the default value of command key to:

C:\Users\Gaurav\Programs\shortcuts\psh_launch.bat “%V”

This is same batch file created earlier and the exact path needs to be fixed.

or just import this file into your registry and fix the path to the batch file:

Download from Skydrive

That’s it, now PowerShell should show up in you right-click menu inside any directory.

]]> http://allyourcodearebelongto.me/blog/2008/10/14/multiple-ways-to-open-powershell-in-the-current-explorer-window/feed/ 2 Silverlight 2.0 Beta-1 now available, version 1.0 ported to Nokia mobiles http://allyourcodearebelongto.me/blog/2008/03/05/silverlight-20-beta-1-now-available-and-10-version-ported-to-nokia-mobiles/ http://allyourcodearebelongto.me/blog/2008/03/05/silverlight-20-beta-1-now-available-and-10-version-ported-to-nokia-mobiles/#comments Wed, 05 Mar 2008 19:23:54 +0000 Gaurav http://techblogging.wordpress.com/2008/03/05/silverlight-20-beta-1-now-available-and-10-version-ported-to-nokia-mobiles/ Microsoft has just released highly anticipated first beta of Silverlight here. The development tools for visual  studio 2008 can be downloaded from here. Tutorials are also available on the same site.

This link reports that Silverlight is now also available on the Nokia mobile devices (specifically S60 on Symbian OS, as well as for Series 40 devices and Nokia Internet tablets). It seems really strange that silverlight wasn’t ported to window mobile devices first. There is a version available for window mobiles as well. I hope it is better than flash lite which really sucks.

If the performance of Silverlight is anywhere near flash then it could be a huge success for Microsoft as .Net as a development platform is already very popular and developers can use their existing skills to create better web experiences. Also IronPython and IronRuby (two of the Silverlight programming languages) are much better (and faster?) languages than Actionscript and .Net provides a much bigger library set.

*Update- I just checked out the demo controls page here and its performance is just fine. I felt no lag while using the demo controls. The mouse wheel still doesn’t work (this site demonstrates how to use mouse wheel in silverlight. here is another example) and the controls look like they need a bit more polish.

image

Here is the list of controls available with Silverlight Beta-1

image

This screenshot was taken from Expression Blend 2.5 march preview which can be downloaded from here.

]]> http://allyourcodearebelongto.me/blog/2008/03/05/silverlight-20-beta-1-now-available-and-10-version-ported-to-nokia-mobiles/feed/ 2 Setting up BlazeDS with Flex http://allyourcodearebelongto.me/blog/2008/03/02/setting-up-blazeds-with-flex/ http://allyourcodearebelongto.me/blog/2008/03/02/setting-up-blazeds-with-flex/#comments Sun, 02 Mar 2008 11:49:42 +0000 Gaurav http://techblogging.wordpress.com/2008/03/02/setting-up-blazeds-with-flex/  

Let me give some introduction first.

BlazeDS is a server-based Java remoting and web messaging technology that allows to connect to back-end distributed data and push data in real-time to Adobe Flex and Adobe AIR rich Internet applications (RIA). Because of its open licensing, BlazeDS is not precluded from being used with other client platforms, such as JavaScript/AJAX. (wikipedia)

Adobe Flex is a collection of technologies released by Adobe Systems for the development and deployment of cross platform, rich Internet applications based on the proprietary Adobe Flash platform. The initial release in March 2004 by Macromedia included a software development kit, an IDE, and a J2EE integration application known as Flex Data Services. Since Adobe acquired Macromedia in 2005, subsequent releases of Flex no longer require a license for Flex Data Services, which has become a separate product rebranded as LiveCycle Data Services. (wikipedia)

Setting up JAVA:

Install the java sdk (jdk) and setup the environment by setting up the following two variables.

image

 

Setting up BlazeDS:

BlazeDS can be downloaded from: here. We will be using the turnkey download as it is preconfigured.

Now unzip blazeds in any folder. In my case I unzipped it to: “D:\Blaze_ds”

Now I will be setting up a new project in this directory: “D:\Blaze_ds\tomcat\webapps\blazeds”

 

Setting up Flex Builder:

A 60 ay trial can be downloaded form: here

Download flex builder 3 and install it. I installed flex builder in: “D:\Flex”

 

Creating a new project:

Now fire up flex builder and create a new flex project inside it.

 image

 image

Now fill in the appropriate entries and click on the “Validate Configuration” button. Now before you click on the button Tomcat needs to be started or the configuration won’t be validated. To start the server start a console and navigate to bin directory of Tomcat which is “D:\Blaze_ds\tomcat\bin” in my case. Now the configuration should validate. I have selected the current project directory as the output directory. Click on finish and a new project should be created.

The configuration is complete now. Just write some code to test the configuration.

   1: <?xml version="1.0" encoding="utf-8"?>

   2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

   3:     creationComplete="consumer.subscribe()">

   4:     

   5:     <mx:Script>

   6:         <![CDATA[

   7:         

   8:             import mx.messaging.messages.AsyncMessage;

   9:             import mx.messaging.messages.IMessage;

  10:             

  11:             private function send():void

  12:             {

  13:                 var message:IMessage = new AsyncMessage();

  14:                 message.body.chatMessage = msg.text;

  15:                 producer.send(message);

  16:                 msg.text = "";

  17:             }

  18:                             

  19:             private function messageHandler(message:IMessage):void

  20:             {

  21:                 log.text += message.body.chatMessage + "n";    

  22:             }

  23:             

  24:         ]]>

  25:     </mx:Script>

  26:     

  27:     <mx:Producer id="producer" destination="data_sample"/>

  28:     <mx:Consumer id="consumer" destination="data_sample" message="messageHandler(event.message)"/>

  29:     

  30:     <mx:Panel title="Chat" width="100%" height="100%">

  31:         <mx:TextArea id="log" width="100%" height="100%"/>

  32:         <mx:ControlBar>

  33:              <mx:TextInput id="msg" width="100%" enter="send()"/>

  34:              <mx:Button label="Send" click="send()"/> 

  35:         </mx:ControlBar>

  36:     </mx:Panel>

  37:     

  38: </mx:Application>

This is some code taken from on of the samples provided. I guess, it is as simple as it can get.

The destination given in the Producer and Consumer needs to be defined in the “messaging-config.xml” file which is located “D:\Blaze_ds\tomcat\webapps\blazeds\WEB-INF\flex\messaging-config.xml”.

Just add <destination id=”data_sample”/> inside the service tag.

Thats it. To test run application in two browser windows and the messages between the two windows showd be synchronized.

image

]]> http://allyourcodearebelongto.me/blog/2008/03/02/setting-up-blazeds-with-flex/feed/ 6 Tabs for windows explorer http://allyourcodearebelongto.me/blog/2007/12/01/tabs-for-windows-explorer/ http://allyourcodearebelongto.me/blog/2007/12/01/tabs-for-windows-explorer/#comments Sat, 01 Dec 2007 14:31:20 +0000 Gaurav http://techblogging.wordpress.com/2007/12/01/tabs-for-windows-explorer/ QT Tab Bar is a new software that I have come across that alows you to have tabs on windows explorer.

Untitled

It integrates very well in the windows interface and adds features that are normally associated to a web browser like firefox. When you middle click on a folder it opens in a new tab, middle click opens a tab and it also stores a history for tabs.

You can optionally make many more changes to the explorer making more usable and easier to navigate.

The download link is on this page.

]]> http://allyourcodearebelongto.me/blog/2007/12/01/tabs-for-windows-explorer/feed/ 0 Creating a User Interface in Ruby using WPF http://allyourcodearebelongto.me/blog/2007/10/09/creating-a-user-interface-in-ruby-using-wpf/ http://allyourcodearebelongto.me/blog/2007/10/09/creating-a-user-interface-in-ruby-using-wpf/#comments Tue, 09 Oct 2007 11:41:23 +0000 Gaurav http://techblogging.wordpress.com/2007/10/09/creating-a-user-interface-in-ruby-using-wpf/ Let me first explain what is WPF?

WPF is the graphical subsystem if the .NET 3.0 framework and it is there to take the place of window forms which we used with earlier versions of .NET

So what’s so great about WPF?

Actually WPF is has its roots in DirectX API so you can easily create 2D and 3D interfaces in it without putting ant load on the processor. Also it is vector based and stores the information for the generating the UI in separate XAML files. So we have logical separation of a control from its appearance.

Further details: http://en.wikipedia.org/wiki/Windows_Presentation_Foundation

The following are the requirements for running this example:

  • rubyclr gem. Use gem install rubyclr -y
  • .NET framework 3.0

In this example I will creating a creating a textarea along with a button, trapping the events on the button and logging it inside the textarea .

Here is the code for the xaml file. Store this file with filename ui.xaml. This file contains the UI for the application.

   1: <Window
   2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   4: <Grid x:Name="LayoutRoot">
   5: <Button Margin="8,0,8,5.723" VerticalAlignment="Bottom" Content="Button" Name="the_button"/>
   6: <TextBox Margin="8,8,8,38" Name="the_text_box"/>
   7: </Grid>
   8: </Window>
 

Next I will be creating the codebehind file in ruby. Here in this file we have all the application logic. Save this file as logic.rb.

   1: # load the libraries
   2: require 'rubygems'
   3: require 'wpf'
   4: # load the xaml file
   5: window = XamlReader.Load(System::IO::File.open_read('ui.xaml'))
   6:  
   7: # get the controls
   8: button = window.find_name('the_button')
   9: txt_box = window.find_name('the_text_box')
  10: # trap the mouse enter event
  11: button.mouse_enter do |sender, args|
  12: txt_box.text += "MOUSE ENTERED\n"
  13: end
  14: # trap the mouse leave event
  15: button.mouse_leave do |sender, args|
  16: txt_box.text += "MOUSE LEFT\n"
  17: end
  18: # trap the mouse click event
  19: button.click do |sender, args|
  20: txt_box.text += "MOUSE CLICKED\n"
  21: end
  22: # run the application (most important)
  23: Application.new.run(window)

The code given above explains itself.

We are first loading the ui.xaml file and then finding the two controls in the lines 8, 9.

Then the three event handlers are declared in lines 11, 14, 19. So whenever the mouse events are fired the corresponding event if traced into the textbox.

And here is the output.

image

del.icio.us Tags: ,,,,
]]> http://allyourcodearebelongto.me/blog/2007/10/09/creating-a-user-interface-in-ruby-using-wpf/feed/ 2