Drag&Drop with widgets 2.3 3.0 apotomo-1.0

In the we covered 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.5.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.

$ rails generate apotomo:widget trashbin display -e haml
    exists  app/widgets/
    create  app/widgets/trashbin
    exists  test/widgets
    create  app/widgets/trashbin_widget.rb
    create  app/widgets/trashbin_widget/display.html.haml
    create  test/widgets/trashbin_widget_test.rb

The TrashbinWidget is bloody simple.

 class TrashbinWidget < Apotomo::Widget
   responds_to_event :trash
   
   def display
     render
   end
   
   def trash(evt)
     Tweet.find(evt[:id]).delete
    trigger :tweetDeleted
    
    update :view => :display
  end
end

Our standard view draws the bin image (that I’ve stolen from somewhere).

 = image_tag "trashbin_empty.png", 'data-event-url' => url_for_event(:trash), 
   :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 1 as Droppable.

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

Catching the dropped

Remember that the trashbin widget handles trash events.

 class TrashbinWidget < Apotomo::Widget
   responds_to_event :trash

Simply put, when the bin sees a trash event, it will invoke its trash state. Notice how I can omit the :with => ... portion if the names of event and triggered method are equal.

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

In line 12 we update the current widget’s div 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
     @tweets = Tweet.find(:all)
     render
   end
   
   def process_tweet(evt)
    Tweet.new(:text => evt[:text]).save

    @tweets = Tweet.find(:all) # this is wet!
    replace :view => :display
  end
  
  def redraw
    replace :state => :display
  end
end

We just add the redraw state (line 16) which invokes display 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
 
   has_widgets do |root|
     root << widget(:twitter)
     root << widget(:trashbin)
     root.respond_to_event :tweetDeleted, :with => :redraw, :on => :twitter
   end
 
   def index
  end
end

Line 7 instructs root to call updating on our twitter widget 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.