Dlux Bookmarklet Example

Drag the link below into your bookmark bar.

Fvb Dlux

Initial Setup

XDM and IFrame bookmarklets allow you to insert an iframe from your app into the 'host' page which can communicate seamlessly with the bookmarklet code running in the 'host' page.

To enable cross domain communictaion between your site and other pages on the 'net we need to be able to generate a fully qualified URL to your bookmarklet code. To set the correct host you should add this to each of your confing/environment/*.rb files. Adjust the :host accordingly. :port is optional.

  config.action_controller.default_url_options = {:host => 'localhost', :port => 3000}

XDM Basics

To enable cross-domain communication Easymarklet uses easyXDM to insert an iframe into the remote page which points back to your app. The code running in the context of the remote page is called the consumer. The code running on the page that has been iframed in is called the producer.

Function calls can be passed from the consumer to the producer, and the then the producer can interact with your app and then push a message back to the consumer. You could also use polling or websockets to allow your app to 'push' data to the remote page.

Generating this bookmarklet

  rails g easymarklet:iframe fvb_dlux

You'll get a bunch of files.

$ rails g easymarklet:dlux fvb_dlux
      create  app/assets/javascripts/fvb_dlux_bookmarklet.js
      create  app/assets/javascripts/fvb_dlux_consumer.js
      create  app/assets/javascripts/fvb_dlux_producer.js
      create  app/controllers/fvb_dlux_producer_controller.rb
      create  app/views/fvb_dlux_producer/index.html.erb
      create  app/views/layouts/fvb_dlux_producer.html.erb
      create  app/views/layouts/fvb_dlux_producer_buffer.html.erb
       route  match 'fvb_dlux_producer' => 'fvb_dlux_producer#index'
       route  match 'fvb_dlux_producer/buffer' => 'fvb_dlux_producer#buffer'

You can link to your new bookmarklet with this :

<%= link_to 'Fvb Dlux', easymarklet_js('fvb_dlux_consumer.js') %>

Update the code

Coming soon. For now : Use the source, Luke.