<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>chris moos&#039;s blog &#187; plugin</title>
	<atom:link href="http://chrismoos.com/tag/plugin/feed/" rel="self" type="application/rss+xml" />
	<link>http://chrismoos.com</link>
	<description>developer by day, developer by night</description>
	<lastBuildDate>Wed, 11 Aug 2010 15:41:00 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>AjaxTask &#8211; a rails plugin for managing background&#160;tasks</title>
		<link>http://chrismoos.com/2010/02/09/ajaxtask-a-rails-plugin-for-managing-background-tasks/</link>
		<comments>http://chrismoos.com/2010/02/09/ajaxtask-a-rails-plugin-for-managing-background-tasks/#comments</comments>
		<pubDate>Wed, 10 Feb 2010 06:14:27 +0000</pubDate>
		<dc:creator>Chris Moos</dc:creator>
				<category><![CDATA[Technology]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[rails]]></category>
		<category><![CDATA[workling]]></category>

		<guid isPermaLink="false">http://chrismoos.com/?p=684</guid>
		<description><![CDATA[SOAP, Background Tasks, and AJAX
Recently in Rails I&#8217;ve been interacting with various SOAP services and running them in the background with Workling. I needed to relay the SOAP response to the client&#8217;s web browser, so I decided to use AJAX to poll the status of my background tasks.
This is great if you have < 30 [...]]]></description>
			<content:encoded><![CDATA[<h3>SOAP, Background Tasks, and AJAX</h3>
<p>Recently in Rails I&#8217;ve been interacting with various SOAP services and running them in the background with Workling. I needed to relay the SOAP response to the client&#8217;s web browser, so I decided to use AJAX to poll the status of my background tasks.</p>
<p>This is great if you have < 30 second background tasks running, but don't want to block a user (and a request). </p>
<p>The Solution</p>
<p>I created a Rails plugin, called <a href="http://github.com/chrismoos/ajaxtask">AjaxTask</a>, that has two components:</p>
<ul>
<li>Methods to use in your controller to define a task handler and create tasks</li>
<li>Javascript library to manage the AJAX between the browser and the handler.</li>
</ul>
<p>GitHub Link: <a href="http://github.com/chrismoos/ajaxtask">http://github.com/chrismoos/ajaxtask</a></p>
<p>In a nutshell, the client initiates a task, the handler responds with a task ID, and the client polls at a user defined interval until the task has finished, or has an error.</p>
<p>The plugin takes the pain out of implementing the handler, as well as the Javascript. All you have to do is run code for your task, and periodically update the status.</p>
<p>I am using <a href="http://github.com/purzelrakete/workling">Workling</a> to run my background tasks, as well as maintain the status using Workling&#8217;s return store.</p>
<p>Okay, enough with the intro, here is the example.</p>
<p><span id="more-684"></span></p>
<h3>Example</h3>
<h4>Controller/Routes</h4>
<p>The first thing to do is define the handler. This instructs the AjaxTask plugin to create a handler that will respond to ajax requests, as well as dispatch to your actual tasks. The only parameter to <em>ajaxtask_handler</em> is a symbol, which <strong>MUST</strong> be identical to a named route. This is how a URL gets from Rails to the plugin.</p>
<p><em>routes.rb</em>:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">map.<span style="color:#9900CC;">ajaxtask_demo</span> <span style="color:#996600;">'/ajaxtask/handler/:task'</span>, <span style="color:#ff3333; font-weight:bold;">:controller</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#ff3333; font-weight:bold;">:demo</span>, <span style="color:#ff3333; font-weight:bold;">:action</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#ff3333; font-weight:bold;">:ajaxtask_demo</span></pre></div></div>

<p><em>demo_controller.rb</em>:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">ajaxtask_handler <span style="color:#ff3333; font-weight:bold;">:ajaxtask_demo</span></pre></div></div>

<p>Now we will define a task:</p>
<p><em>demo_controller.rb</em>:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">ajaxtask <span style="color:#ff3333; font-weight:bold;">:mytask</span></pre></div></div>

<p>This tells the plugin to respond to a task named <em>mytask</em>.</p>
<p>By doing this, we must implement two methods in our controller. </p>
<p><em>mytask_start</em> is called when a browser starts a new task. You should probably fire off your background task in this method.</p>
<p><em>mytask_start</em> should return a unique ID for the task. By using Workling and calling .async, a unique ID is returned.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">def</span> mytask_start
    <span style="color:#0000FF; font-weight:bold;">return</span> MyWorklingWorker.<span style="color:#9900CC;">async_mytask</span>
<span style="color:#9966CC; font-weight:bold;">end</span>
&nbsp;
<span style="color:#9966CC; font-weight:bold;">def</span> mytask_status<span style="color:#006600; font-weight:bold;">&#40;</span>uid<span style="color:#006600; font-weight:bold;">&#41;</span>
    Workling.<span style="color:#0000FF; font-weight:bold;">return</span>.<span style="color:#9900CC;">get</span><span style="color:#006600; font-weight:bold;">&#40;</span>uid<span style="color:#006600; font-weight:bold;">&#41;</span>
<span style="color:#9966CC; font-weight:bold;">end</span></pre></div></div>

<h4>The Worker</h4>
<p>The worker is the meat of our background task. In this we will do something that might take a while, and also update the status.</p>
<p><em>my_workling_worker.rb</em>:</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#9966CC; font-weight:bold;">class</span> MyWorklingWorker <span style="color:#006600; font-weight:bold;">&lt;</span> <span style="color:#6666ff; font-weight:bold;">Workling::Base</span>
  <span style="color:#9966CC; font-weight:bold;">def</span> mytask<span style="color:#006600; font-weight:bold;">&#40;</span>options<span style="color:#006600; font-weight:bold;">&#41;</span>
    Workling.<span style="color:#0000FF; font-weight:bold;">return</span>.<span style="color:#9900CC;">set</span><span style="color:#006600; font-weight:bold;">&#40;</span>options<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:uid</span><span style="color:#006600; font-weight:bold;">&#93;</span>, <span style="color:#006600; font-weight:bold;">&#123;</span>:pending <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'i am just starting...wait up!'</span><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
    <span style="color:#9966CC; font-weight:bold;">begin</span>
      <span style="color:#008000; font-style:italic;"># your long running task goes here</span>
			<span style="color:#CC0066; font-weight:bold;">sleep</span> <span style="color:#006666;">10</span>
    <span style="color:#9966CC; font-weight:bold;">rescue</span> <span style="color:#006600; font-weight:bold;">=&gt;</span> e
      Workling.<span style="color:#0000FF; font-weight:bold;">return</span>.<span style="color:#9900CC;">set</span><span style="color:#006600; font-weight:bold;">&#40;</span>options<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:uid</span><span style="color:#006600; font-weight:bold;">&#93;</span>, <span style="color:#006600; font-weight:bold;">&#123;</span>:error <span style="color:#006600; font-weight:bold;">=&gt;</span> e.<span style="color:#9900CC;">to_s</span><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
      <span style="color:#0000FF; font-weight:bold;">return</span>
    <span style="color:#9966CC; font-weight:bold;">end</span>
    Workling.<span style="color:#0000FF; font-weight:bold;">return</span>.<span style="color:#9900CC;">set</span><span style="color:#006600; font-weight:bold;">&#40;</span>options<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#ff3333; font-weight:bold;">:uid</span><span style="color:#006600; font-weight:bold;">&#93;</span>, <span style="color:#006600; font-weight:bold;">&#123;</span>:done <span style="color:#006600; font-weight:bold;">=&gt;</span> <span style="color:#996600;">'i finished!})
  end
end</span></pre></div></div>

<p>The important things to note here are what we set the <em>return</em> to. AjaxTask recognizes the following:</p>
<ul>
<li>:error</li>
<li>:pending</li>
<li>:done</li>
</ul>
<p>They should be pretty self explanatory. Now let&#8217;s see what the client side looks like.</p>
<h3>The Client</h3>
<p>For the client, we will be interacting with the AjaxTask javascript library. Make sure you copy the <em>ajaxtask.js</em> file to your javascripts directory, and include it in your page. The following will copy the javascript for you:</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #7a0874; font-weight: bold;">cd</span> vendor<span style="color: #000000; font-weight: bold;">/</span>plugins<span style="color: #000000; font-weight: bold;">/</span>ajaxtask
rake ajax_task_js</pre></div></div>

<p>Here is an example of what an HTML page that uses AjaxTask:</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;html<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;head<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;">&lt;%= javascript_include_tag <span style="color: #ff0000;">'ajaxtask.js'</span> %<span style="color: #000000; font-weight: bold;">&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/head<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;body<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
function mytaskHandler() {
	$(this).bind('onTaskError', onTaskError);
	$(this).bind('onTaskFinished', onTaskFinished);
	$(this).bind('onTaskPending', onTaskPending);
&nbsp;
	function onTaskError(event, error) {
		alert('error: ' + error);
	}
&nbsp;
	function onTaskPending(event, data) {
		alert(&quot;pending: &quot; + data);
	}
&nbsp;
	function onTaskFinished(event, data) {
		alert(&quot;finished: &quot; + data);
	}
}
&nbsp;
$(document).ready(function() {	
	var myTask = new AjaxTask({
		url: &quot;<span style="color: #009900;">&lt;%= ajaxtask_demo_url :task =<span style="color: #000000; font-weight: bold;">&gt;</span></span> :mytask %&gt;&quot;,
		handler: new mytaskHandler(),
		taskStatusDiv: $(&quot;#taskStatus&quot;),
		taskStatusLoadingMsg: 'Please wait while my task runs...',
		taskStatusLoadingImg: '/images/smallactivity.gif',
		taskStatusErrorMsg: 'Oops...something bad happened.'
	});
	myTask.start();
});
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;taskStatus&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/body<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/html<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>Looking at the above client code, you can see how easy it is to present a background task&#8217;s processing to a user. </p>
<p>That does it for now, I&#8217;ll try to document and post more soon abou AjaxTask.</p>
]]></content:encoded>
			<wfw:commentRss>http://chrismoos.com/2010/02/09/ajaxtask-a-rails-plugin-for-managing-background-tasks/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
