Drag&Drop with widgets 2.3 3.0

In the we did a simple tweeter. Now what if we’d like to dump an item? Besides that twitter doesn’t allow deleting (do they?), let’s start writing a trashbin widget.

When dropping an item the bin widget deletes it from the database. To stay in sync with our model, the list should also redraw. You’ll learn how to do that using event triggering in this lesson.

Dragging items

Drag&Drop with JavaScript is well done in jQuery UI. We need to include the new JS lib in our project.

%html
%head
  = javascript_include_tag "jquery-1.4.2.min"
  = javascript_include_tag "jquery-ui-1.8.4.custom.min"
  = stylesheet_link_tag "app"

%body
  = yield

Next, the listed items have to be draggable.

 - widget_div do
   %ul
     - for tweet in @tweets
       %li{'data-id' => tweet.id}
         = tweet.text
 
   %p
     What are you up to?
   
  - form_tag "", "data-event-url" => url_for_event(:submit) do
    = text_field_tag 'text'
  
    = submit_tag "Tweet!"
  
  :javascript
    var form = $("##{widget_id} form");
  
    form.submit(function() {
      $.ajax({url: form.attr("data-event-url"), data: form.serialize()})
      return false;
    });
    
    $("##{widget_id} li").draggable({revert: "invalid"});

This happens in line 23 using the Draggable API.

Creating the trashbin widget

The bin widget is just a generator away.

$ script/generate widget trashbin_widget display --haml
    exists  app/cells/
    create  app/cells/trashbin_widget
    exists  test/widgets
    create  app/cells/trashbin_widget.rb
    create  app/cells/trashbin_widget/display.html.haml
    create  test/widgets/trashbin_widget_test.rb

The TrashbinWidget is bloody simple.

 class TrashbinWidget < Apotomo::Widget
   responds_to_event :drop, :with => :trash
   
   def display
     render
   end
   
   def trash
     Tweet.find(params[:id]).delete
    trigger :tweetDeleted
    
    replace :view => :display
  end
end

Our standard view draws the bin image that I’d stole somewhere.

 - widget_div do
   = image_tag "trashbin_empty.png", 'data-event-url' => url_for_event(:drop), :id => "trashbin"
   
   :javascript
     $("#trashbin").droppable({
       drop: function(event, ui) {
         $.ajax({url: $("#trashbin").attr("data-event-url") + "&id=" + ui.draggable.attr("data-id")});
       }
     });

In line 5 we define the image from line 3 as Droppable.

On drop, we send an AJAX request to the widget’s :drop event url appending the dropped item’s id.

Catching the dropped

Remember that the trashbin widget handles drop events.

 class TrashbinWidget < Apotomo::Widget
   responds_to_event :drop, :with => :trash

Simply put, when the bin sees a drop event, it will invoke its trash state.

   def trash
     Tweet.find(params[:id]).delete
    trigger :tweetDeleted
    
    replace :view => :display
  end

In line 12 we replace the current widget on the page with the display view.

Triggering events

What’s that trigger statement in line 10?

Well, we simply inform the outer world that we altered the tweets table – since we ruthlessly deleted an item.

Bubbling events

According to Apotomo’s bubbling event concept, the tweetDeleted event will bubble up to root. Why not instruct the list widget to catch it and update itself?

 class TwitterWidget < Apotomo::Widget
   responds_to_event :submit, :with => :process_tweet
   
   def display_form
     @tweets = Tweet.find(:all)
     render
   end
   
   def process_tweet
    Tweet.new(:text => param(:text)).save
    
    @tweets = Tweet.find(:all) # this is wet!
    replace :view => :display_form
  end
  
  def redraw
    replace :state => :display_form
  end
  
end

We just add the redraw state (line 16) which invokes display_form and replaces the widget content in the browser (line 17).

Since events bubble up, we need to attach an event handler to root. That can be done in the controller.

 class DashboardController < ApplicationController
   include Apotomo::Rails::ControllerMethods
 
   has_widgets do |root|
     root << widget(:twitter_widget, 'parrot', :display_form)
     root << widget(:trashbin_widget, 'bin', :display)
     root.respond_to_event :tweetDeleted, :with => :redraw, :on => 'parrot'
   end
 
  def index
  end
end

Line 7 instructs root to call updating on the list widget 'parrot' when encountering the respective event.

However, putting observer instructions in the controller is not very clean and breaks widget encapsing, since the controller knows details about the widgets’ internals.

There are two ways to make this suck less.

• Have a container that wraps both widgets.
• Use the after_add hook to add an observer.

Both approaches use Apotomo’s event bubbling.

Apotomo is a Nick Sutterer product.