<?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>Gaurav &#187; rails</title>
	<atom:link href="http://allyourcodearebelongto.me/blog/category/rails/feed/" rel="self" type="application/rss+xml" />
	<link>http://allyourcodearebelongto.me/blog</link>
	<description>All About Everything</description>
	<lastBuildDate>Sun, 23 Nov 2008 19:44:48 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Autocompleting ssh, rake, cap command parameters using PowerShell</title>
		<link>http://allyourcodearebelongto.me/blog/2008/11/23/autocompleting-ssh-rake-cap-command-parameters-using-powershell/</link>
		<comments>http://allyourcodearebelongto.me/blog/2008/11/23/autocompleting-ssh-rake-cap-command-parameters-using-powershell/#comments</comments>
		<pubDate>Sun, 23 Nov 2008 19:42:54 +0000</pubDate>
		<dc:creator>Gaurav</dc:creator>
				<category><![CDATA[powerpoint]]></category>
		<category><![CDATA[rails]]></category>
		<category><![CDATA[ssh]]></category>

		<guid isPermaLink="false">http://allyourcodearebelongto.me/blog/2008/11/23/autocompleting-ssh-rake-cap-command-parameters-using-powershell/</guid>
		<description><![CDATA[I have mentioned in my previous posts that PowerShell has excellent and customizabme autocompletion support.   And some awesome plugins like powertab exist to take this functionality to another level.    Here is one easy way you can customize autocompletion easily by writing a couple of lines of code. 
Open your PowerShell [...]]]></description>
			<content:encoded><![CDATA[<p>I have mentioned in my previous posts that PowerShell has excellent and customizabme autocompletion support.   <br />And some awesome plugins like <a href="http://thepowershellguy.com/blogs/posh/default.aspx">powertab</a> exist to take this functionality to another level.    <br />Here is one easy way you can customize autocompletion easily by writing a couple of lines of code. </p>
<p>Open your PowerShell profile file (<a href="http://allyourcodearebelongto.me/blog/2008/10/12/displaying-git-branch-on-your-powershell-prompt/)">for help see here</a>) and create a function with name &quot;global:TabExpansion&quot; in it.    <br />This function basically overrides default autocompletion and sends your values to the prompt. For example for it to read your ssh files and display hosts in it the function would look something like this: </p>
<div style="border-right: gray 1px solid; padding-right: 4px; border-top: gray 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, &#39;Courier New&#39;, courier, monospace; background-color: #f4f4f4">
<div style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"># customized tab expansion</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">function global:TabExpansion {</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  param($line, $lastWord)</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  </pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  <span style="color: #0000ff">if</span> ($line -match <span style="color: #006080">'ssh'</span>){</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    <span style="color: #0000ff">return</span> cat C:\Users\Gaurav\.ssh\config | Select-String <span style="color: #006080">'^Host '</span> | % { <span style="color: #0000ff">if</span>($_.Line -match <span style="color: #006080">&quot;^Host ($lastword\S*)&quot;</span> ){ $matches[1] }}</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  }</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">}</pre>
</p></div>
</div>
<p><span id="more-152"></span></p>
<p>Here it is just parsing the config file and running it through a regular-expression and returning the results as an array. Here is what a typical ssh config file looks like:</p>
<div style="border-right: gray 1px solid; padding-right: 4px; border-top: gray 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, &#39;Courier New&#39;, courier, monospace; background-color: #f4f4f4">
<div style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">Host blog</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  User username</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  HostName sitename.com</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  IdentityFile ~/.ssh/id_dsa</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  </pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">Host blog_2</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  User username</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  HostName sitename.com</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  IdentityFile ~/.ssh/id_dsa</pre>
</p></div>
</div>
<p>&#160;</p>
<p>Here is what the output looks like if I write “ssh ” and the press tab key twice:</p>
<p><a href="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/11/image7.png"><img title="image" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="51" alt="image" src="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/11/image-thumb7.png" width="178" border="0" /></a> </p>
<p><a href="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/11/image8.png"><img title="image" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="50" alt="image" src="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/11/image-thumb8.png" width="157" border="0" /></a> </p>
<p>&#160;</p>
<p>Also this same function can easily be modded to autocomplete for ruby/rails commands like <strong>rake</strong> and <strong>cap.</strong></p>
<p>Here is is my complete function:</p>
</p>
<div style="border-right: gray 1px solid; padding-right: 4px; border-top: gray 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, &#39;Courier New&#39;, courier, monospace; background-color: #f4f4f4">
<div style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"># customized tab expansion</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"><span style="color: #0000ff">function</span> <span style="color: #0000ff">global</span>:TabExpansion {</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  param($line, $lastWord)</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  </pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  <span style="color: #0000ff">if</span> ($line -match <span style="color: #008000">'ssh'){</span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    <span style="color: #0000ff">return</span> cat C:\Users\Gaurav\.ssh\config | <span style="color: #0000ff">Select</span>-<span style="color: #0000ff">String</span> <span style="color: #008000">'^Host ' | % { if($_.Line -match &quot;^Host ($lastword\S*)&quot; ){ $matches[1] }}</span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  }</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  <span style="color: #0000ff">elseif</span> ($line -match <span style="color: #008000">'rake'){</span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">    rake -T | % { <span style="color: #0000ff">if</span>($_ -match <span style="color: #006080">&quot;^rake ($lastword\S*)&quot;</span> ){ $matches[1] }}</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  } </pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  <span style="color: #0000ff">elseif</span> ($line -match <span style="color: #008000">'cap'){</span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    cap -T | % { <span style="color: #0000ff">if</span>($_ -match <span style="color: #006080">&quot;^cap ($lastword\S*)&quot;</span> ){ $matches[1] }}</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  }</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">}</pre>
</p></div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://allyourcodearebelongto.me/blog/2008/11/23/autocompleting-ssh-rake-cap-command-parameters-using-powershell/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Using Flex with Ruby on Rails</title>
		<link>http://allyourcodearebelongto.me/blog/2008/03/26/using-flex-with-rubyonrails/</link>
		<comments>http://allyourcodearebelongto.me/blog/2008/03/26/using-flex-with-rubyonrails/#comments</comments>
		<pubDate>Wed, 26 Mar 2008 19:08:39 +0000</pubDate>
		<dc:creator>Gaurav</dc:creator>
				<category><![CDATA[adobe]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[mxml]]></category>
		<category><![CDATA[rails]]></category>
		<category><![CDATA[ruby]]></category>
		<category><![CDATA[ruby on rails]]></category>
		<category><![CDATA[silverlight]]></category>
		<category><![CDATA[xaml]]></category>

		<guid isPermaLink="false">http://techblogging.wordpress.com/2008/03/26/using-flex-with-rubyonrails/</guid>
		<description><![CDATA[This is the second blog post in a series of three posts comparing Flex with Silverlight. In my previous post I demonstrated how to integrate a scaffolded Rails application with Silverlight. Here I will be showing the same with Flex. The steps needed to create the Rails application are also mentioned here.
&#160;
Creating a new Flex [...]]]></description>
			<content:encoded><![CDATA[<p>This is the second blog post in a series of three posts comparing Flex with Silverlight. In my <a href="http://techblogging.wordpress.com/2008/03/26/using-silverlight-with-rubyonrails/">previous</a> post I demonstrated how to integrate a scaffolded Rails application with Silverlight. Here I will be showing the same with Flex. The steps needed to create the Rails application are also mentioned <a href="http://techblogging.wordpress.com/2008/03/26/using-silverlight-with-rubyonrails/">here</a>.</p>
<p>&nbsp;</p>
<h5><u>Creating a new Flex project:</u></h5>
<p>Open Flex builder and create a new Flex project.</p>
<p><a href="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/image8.png"><img style="border-width:0;" height="484" alt="image" src="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/image-thumb8.png" width="517" border="0"></a></p>
<p>Leave all the options to default and click Finish. A blank project is now created for you.</p>
</p>
<p><span id="more-74"></span>
</p>
<p>Add a List control to the default mxml file. It should look like:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">&lt;?</span><span style="color:#800000;">xml</span> <span style="color:#ff0000;">version</span><span style="color:#0000ff;">="1.0"</span> <span style="color:#ff0000;">encoding</span><span style="color:#0000ff;">="utf-8"</span>?<span style="color:#0000ff;">&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Application</span> <span style="color:#ff0000;">xmlns:mx</span><span style="color:#0000ff;">="http://www.adobe.com/2006/mxml"</span> <span style="color:#ff0000;">layout</span><span style="color:#0000ff;">="vertical"</span><span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:List</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userList"</span> <span style="color:#ff0000;">width</span><span style="color:#0000ff;">="200"</span> <span style="color:#ff0000;">height</span><span style="color:#0000ff;">="200"</span><span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">mx:Application</span><span style="color:#0000ff;">&gt;</span></pre>
</div>
<p>&nbsp;</p>
<p>Now create a script tag inside the source and add a Bindable element to it:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;">[Bindable]
<span style="color:#0000ff;">private</span> <span style="color:#0000ff;">var</span> users:XMLListCollection = <span style="color:#0000ff;">new</span> XMLListCollection();</pre>
</div>
<p>I am using an XMLListCollection because I can easily add/remove elements from it.</p>
<p>&nbsp;</p>
<h5><u>Now send request to the server and bind the result to the list box:</u></h5>
<p>First create a new HTTPService element:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;">&lt;mx:HTTPService id=<span style="color:#006080;">"userIndexService"</span> resultFormat=<span style="color:#006080;">"e4x"</span> result=<span style="color:#006080;">"userIndexServiceResult(event)"</span> url=<span style="color:#006080;">"http://localhost:3000/users.xml"</span>/&gt;</pre>
</div>
<p>&nbsp;</p>
<p>and handle its result:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">private</span> <span style="color:#0000ff;">function</span> userIndexServiceResult(<span style="color:#0000ff;">event</span>:ResultEvent):<span style="color:#0000ff;">void</span>{
    <span style="color:#0000ff;">for</span> each(<span style="color:#0000ff;">var</span> xml:XML <span style="color:#0000ff;">in</span> <span style="color:#0000ff;">event</span>.result.user <span style="color:#0000ff;">as</span> XMLList){
        users.addItem(xml);
    }
}</pre>
</div>
<p>&nbsp;</p>
<p>To invoke this service we need to call its &#8220;send()&#8221; method with appropriate paramater, which in this case are none.</p>
<p>So the code now looks like:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">&lt;?</span><span style="color:#800000;">xml</span> <span style="color:#ff0000;">version</span><span style="color:#0000ff;">="1.0"</span> <span style="color:#ff0000;">encoding</span><span style="color:#0000ff;">="utf-8"</span>?<span style="color:#0000ff;">&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Application</span> <span style="color:#ff0000;">xmlns:mx</span><span style="color:#0000ff;">="http://www.adobe.com/2006/mxml"</span> <span style="color:#ff0000;">layout</span><span style="color:#0000ff;">="vertical"</span> <span style="color:#ff0000;">initialize</span><span style="color:#0000ff;">="sendServiceRequest(event)"</span><span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Script</span><span style="color:#0000ff;">&gt;</span>
        <span style="color:#0000ff;">&lt;!</span>[CDATA[
            import mx.rpc.events.ResultEvent;
            import mx.collections.XMLListCollection;
            [Bindable]
            private var users:XMLListCollection = new XMLListCollection();

            private function sendServiceRequest(event:Event):void{
                userIndexService.send();
            }
            private function userIndexServiceResult(event:ResultEvent):void{
                for each(var xml:XML in event.result.user as XMLList){
                    users.addItem(xml);
                }
            }
        ]]<span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">mx:Script</span><span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HTTPService</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userIndexService"</span> <span style="color:#ff0000;">resultFormat</span><span style="color:#0000ff;">="e4x"</span> <span style="color:#ff0000;">result</span><span style="color:#0000ff;">="userIndexServiceResult(event)"</span> <span style="color:#ff0000;">url</span><span style="color:#0000ff;">="http://localhost:3000/users.xml"</span><span style="color:#0000ff;">/&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:List</span> <span style="color:#ff0000;">dataProvider</span><span style="color:#0000ff;">="{users}"</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userList"</span> <span style="color:#ff0000;">width</span><span style="color:#0000ff;">="200"</span> <span style="color:#ff0000;">height</span><span style="color:#0000ff;">="200"</span> <span style="color:#ff0000;">labelField</span><span style="color:#0000ff;">="name"</span><span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">mx:Application</span><span style="color:#0000ff;">&gt;</span></pre>
</div>
<p>&nbsp;</p>
<p>And the output looks like:</p>
<p><a href="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/image9.png"><img style="border-width:0;" height="411" alt="image" src="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/image-thumb9.png" width="454" border="0"></a></p>
<p>Notice that we are sending the index request in the initialize method of the application.</p>
<p>Now to add controls which show the currently selected element. Its really easy. Just add the folowwing to the code and DataBinding will do the rest:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HBox</span><span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Label</span> <span style="color:#ff0000;">text</span><span style="color:#0000ff;">="Name"</span> <span style="color:#ff0000;">width</span><span style="color:#0000ff;">="50"</span><span style="color:#0000ff;">/&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:TextInput</span> <span style="color:#ff0000;">text</span><span style="color:#0000ff;">="{userList.selectedItem.name}"</span> <span style="color:#ff0000;">width</span><span style="color:#0000ff;">="150"</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userName"</span><span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">mx:HBox</span><span style="color:#0000ff;">&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HBox</span><span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Label</span> <span style="color:#ff0000;">text</span><span style="color:#0000ff;">="Address"</span> <span style="color:#ff0000;">width</span><span style="color:#0000ff;">="50"</span><span style="color:#0000ff;">/&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:TextInput</span> <span style="color:#ff0000;">text</span><span style="color:#0000ff;">="{userList.selectedItem.address}"</span> <span style="color:#ff0000;">width</span><span style="color:#0000ff;">="150"</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userAddress"</span><span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">mx:HBox</span><span style="color:#0000ff;">&gt;</span></pre>
</div>
<h5><u></u>&nbsp;</h5>
<p>Now it loooks like:</p>
<p><a href="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/image10.png"><img style="border-width:0;" height="442" alt="image" src="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/image-thumb10.png" width="442" border="0"></a></p>
<h5><u></u>&nbsp;</h5>
<h5><u>Implementing the full CRUD:</u></h5>
<p>Now we need to add the other three HTTPServices.</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HTTPService</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userIndexService"</span> <span style="color:#ff0000;">resultFormat</span><span style="color:#0000ff;">="e4x"</span> <span style="color:#ff0000;">result</span><span style="color:#0000ff;">="userIndexServiceResult(event)"</span> <span style="color:#ff0000;">url</span><span style="color:#0000ff;">="http://localhost:3000/users.xml"</span><span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HTTPService</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userCreateService"</span> <span style="color:#ff0000;">resultFormat</span><span style="color:#0000ff;">="e4x"</span> <span style="color:#ff0000;">result</span><span style="color:#0000ff;">="userCreateServiceResult(event)"</span> <span style="color:#ff0000;">method</span><span style="color:#0000ff;">="POST"</span> <span style="color:#ff0000;">url</span><span style="color:#0000ff;">="http://localhost:3000/users.xml"</span><span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HTTPService</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userUpdateService"</span> <span style="color:#ff0000;">resultFormat</span><span style="color:#0000ff;">="e4x"</span> <span style="color:#ff0000;">method</span><span style="color:#0000ff;">="POST"</span><span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HTTPService</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userDeleteService"</span> <span style="color:#ff0000;">resultFormat</span><span style="color:#0000ff;">="e4x"</span> <span style="color:#ff0000;">method</span><span style="color:#0000ff;">="POST"</span><span style="color:#0000ff;">/&gt;</span></pre>
</div>
<p>&nbsp;</p>
<p>And their corresponding callbacks.</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">private</span> <span style="color:#0000ff;">function</span> userCreateServiceResult(<span style="color:#0000ff;">event</span>:ResultEvent):<span style="color:#0000ff;">void</span>{
    users.addItem(<span style="color:#0000ff;">event</span>.result <span style="color:#0000ff;">as</span> XML);
}</pre>
</div>
<p>&nbsp;</p>
<p>Some controls to invoke these services:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HBox</span><span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Button</span> <span style="color:#ff0000;">label</span><span style="color:#0000ff;">="Create"</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="createUser"</span> <span style="color:#ff0000;">click</span><span style="color:#0000ff;">="sendServiceRequest(event)"</span><span style="color:#0000ff;">/&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Button</span> <span style="color:#ff0000;">label</span><span style="color:#0000ff;">="Update"</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="updateUser"</span> <span style="color:#ff0000;">click</span><span style="color:#0000ff;">="sendServiceRequest(event)"</span><span style="color:#0000ff;">/&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Button</span> <span style="color:#ff0000;">label</span><span style="color:#0000ff;">="Delete"</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="deleteUser"</span> <span style="color:#ff0000;">click</span><span style="color:#0000ff;">="sendServiceRequest(event)"</span><span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">mx:HBox</span><span style="color:#0000ff;">&gt;</span></pre>
</div>
<p>&nbsp;</p>
<p>And their event handlers (just one in this case):</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">private</span> <span style="color:#0000ff;">function</span> sendServiceRequest(<span style="color:#0000ff;">event</span>:Event):<span style="color:#0000ff;">void</span>{
    <span style="color:#0000ff;">if</span>(<span style="color:#0000ff;">event</span>.target.id == <span style="color:#006080;">'createUser'</span>){
        userCreateService.send({<span style="color:#006080;">'user[name]'</span>: userName.text, <span style="color:#006080;">'user[address]'</span>: userAddress.text});
    }<span style="color:#0000ff;">else</span> <span style="color:#0000ff;">if</span>(<span style="color:#0000ff;">event</span>.target.id == <span style="color:#006080;">'updateUser'</span>){
        userUpdateService.url = <span style="color:#006080;">'http://localhost:3000/users/'</span>+ userList.selectedItem.id +<span style="color:#006080;">'.xml'</span>;
        userUpdateService.send({<span style="color:#006080;">'user[name]'</span>: userName.text, <span style="color:#006080;">'user[address]'</span>: userAddress.text, _method: <span style="color:#006080;">'put'</span>});
        users[userList.selectedIndex].name = userName.text;
        users[userList.selectedIndex].address = userAddress.text;
    }<span style="color:#0000ff;">else</span> <span style="color:#0000ff;">if</span>(<span style="color:#0000ff;">event</span>.target.id == <span style="color:#006080;">'deleteUser'</span>){
        userDeleteService.url = <span style="color:#006080;">'http://localhost:3000/users/'</span>+ userList.selectedItem.id +<span style="color:#006080;">'.xml'</span>;
        userDeleteService.send({_method: <span style="color:#006080;">'delete'</span>});
        users.removeItemAt(userList.selectedIndex);
    }<span style="color:#0000ff;">else</span>{
        userIndexService.send();
    }
}</pre>
</div>
<p>&nbsp;</p>
<p>Little bit of&nbsp; knowledge of how REST is implemented in Rails is required to understand the parameters to the&nbsp;&nbsp;&nbsp;&nbsp; &#8220;send()&#8221; method of HTTPService class is required, which is out of scope of this blog post.</p>
<p>The TestFrontEnd.mxml should now have the folowwing code:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">&lt;?</span><span style="color:#800000;">xml</span> <span style="color:#ff0000;">version</span><span style="color:#0000ff;">="1.0"</span> <span style="color:#ff0000;">encoding</span><span style="color:#0000ff;">="utf-8"</span>?<span style="color:#0000ff;">&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Application</span> <span style="color:#ff0000;">xmlns:mx</span><span style="color:#0000ff;">="http://www.adobe.com/2006/mxml"</span> <span style="color:#ff0000;">layout</span><span style="color:#0000ff;">="vertical"</span> <span style="color:#ff0000;">initialize</span><span style="color:#0000ff;">="sendServiceRequest(event)"</span><span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Script</span><span style="color:#0000ff;">&gt;</span>
        <span style="color:#0000ff;">&lt;!</span>[CDATA[
            import mx.collections.XMLListCollection;
            import mx.controls.Alert;
            import mx.rpc.events.ResultEvent;
            import mx.collections.ArrayCollection;
            [Bindable]
            private var users:XMLListCollection = new XMLListCollection();

            private function sendServiceRequest(event:Event):void{
                if(event.target.id == 'createUser'){
                    userCreateService.send({'user[name]': userName.text, 'user[address]': userAddress.text});
                }else if(event.target.id == 'updateUser'){
                    userUpdateService.url = 'http://localhost:3000/users/'+ userList.selectedItem.id +'.xml';
                    userUpdateService.send({'user[name]': userName.text, 'user[address]': userAddress.text, _method: 'put'});
                    users[userList.selectedIndex].name = userName.text;
                    users[userList.selectedIndex].address = userAddress.text;
                }else if(event.target.id == 'deleteUser'){
                    userDeleteService.url = 'http://localhost:3000/users/'+ userList.selectedItem.id +'.xml';
                    userDeleteService.send({_method: 'delete'});
                    users.removeItemAt(userList.selectedIndex);
                }else{
                    userIndexService.send();
                }
            }

            private function userIndexServiceResult(event:ResultEvent):void{
                for each(var xml:XML in event.result.user as XMLList){
                    users.addItem(xml);
                }
            }
            private function userCreateServiceResult(event:ResultEvent):void{
                users.addItem(event.result as XML);
            }
        ]]<span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">mx:Script</span><span style="color:#0000ff;">&gt;</span>

    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HTTPService</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userIndexService"</span> <span style="color:#ff0000;">resultFormat</span><span style="color:#0000ff;">="e4x"</span> <span style="color:#ff0000;">result</span><span style="color:#0000ff;">="userIndexServiceResult(event)"</span> <span style="color:#ff0000;">url</span><span style="color:#0000ff;">="http://localhost:3000/users.xml"</span><span style="color:#0000ff;">/&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HTTPService</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userCreateService"</span> <span style="color:#ff0000;">resultFormat</span><span style="color:#0000ff;">="e4x"</span> <span style="color:#ff0000;">result</span><span style="color:#0000ff;">="userCreateServiceResult(event)"</span> <span style="color:#ff0000;">method</span><span style="color:#0000ff;">="POST"</span> <span style="color:#ff0000;">url</span><span style="color:#0000ff;">="http://localhost:3000/users.xml"</span><span style="color:#0000ff;">/&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HTTPService</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userUpdateService"</span> <span style="color:#ff0000;">resultFormat</span><span style="color:#0000ff;">="e4x"</span> <span style="color:#ff0000;">method</span><span style="color:#0000ff;">="POST"</span><span style="color:#0000ff;">/&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HTTPService</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userDeleteService"</span> <span style="color:#ff0000;">resultFormat</span><span style="color:#0000ff;">="e4x"</span> <span style="color:#ff0000;">method</span><span style="color:#0000ff;">="POST"</span><span style="color:#0000ff;">/&gt;</span>

    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:List</span> <span style="color:#ff0000;">dataProvider</span><span style="color:#0000ff;">="{users}"</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userList"</span> <span style="color:#ff0000;">width</span><span style="color:#0000ff;">="200"</span> <span style="color:#ff0000;">height</span><span style="color:#0000ff;">="200"</span> <span style="color:#ff0000;">labelField</span><span style="color:#0000ff;">="name"</span><span style="color:#0000ff;">/&gt;</span>

    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HBox</span><span style="color:#0000ff;">&gt;</span>
        <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Label</span> <span style="color:#ff0000;">text</span><span style="color:#0000ff;">="Name"</span> <span style="color:#ff0000;">width</span><span style="color:#0000ff;">="50"</span><span style="color:#0000ff;">/&gt;</span>
        <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:TextInput</span> <span style="color:#ff0000;">text</span><span style="color:#0000ff;">="{userList.selectedItem.name}"</span> <span style="color:#ff0000;">width</span><span style="color:#0000ff;">="150"</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userName"</span><span style="color:#0000ff;">/&gt;</span>
    <span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">mx:HBox</span><span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HBox</span><span style="color:#0000ff;">&gt;</span>
        <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Label</span> <span style="color:#ff0000;">text</span><span style="color:#0000ff;">="Address"</span> <span style="color:#ff0000;">width</span><span style="color:#0000ff;">="50"</span><span style="color:#0000ff;">/&gt;</span>
        <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:TextInput</span> <span style="color:#ff0000;">text</span><span style="color:#0000ff;">="{userList.selectedItem.address}"</span> <span style="color:#ff0000;">width</span><span style="color:#0000ff;">="150"</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="userAddress"</span><span style="color:#0000ff;">/&gt;</span>
    <span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">mx:HBox</span><span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:HBox</span><span style="color:#0000ff;">&gt;</span>
        <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Button</span> <span style="color:#ff0000;">label</span><span style="color:#0000ff;">="Create"</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="createUser"</span> <span style="color:#ff0000;">click</span><span style="color:#0000ff;">="sendServiceRequest(event)"</span><span style="color:#0000ff;">/&gt;</span>
        <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Button</span> <span style="color:#ff0000;">label</span><span style="color:#0000ff;">="Update"</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="updateUser"</span> <span style="color:#ff0000;">click</span><span style="color:#0000ff;">="sendServiceRequest(event)"</span><span style="color:#0000ff;">/&gt;</span>
        <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">mx:Button</span> <span style="color:#ff0000;">label</span><span style="color:#0000ff;">="Delete"</span> <span style="color:#ff0000;">id</span><span style="color:#0000ff;">="deleteUser"</span> <span style="color:#ff0000;">click</span><span style="color:#0000ff;">="sendServiceRequest(event)"</span><span style="color:#0000ff;">/&gt;</span>
    <span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">mx:HBox</span><span style="color:#0000ff;">&gt;</span>

<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">mx:Application</span><span style="color:#0000ff;">&gt;</span></pre>
</div>
<p>&nbsp;</p>
<p>This is the end result:</p>
<p><a href="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/image11.png"><img style="border-width:0;" height="483" alt="image" src="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/image-thumb11.png" width="441" border="0"></a></p>
<p>As I mentioned in my last blog post it is not the best way to make this application as there is no error handling. But I think this is the simplest way to make this application.</p>
<p>You also might have noticed Flex requires a lot less lines of code as compared to Silverlight. But that is also dependent on my coding approach.</p>
<p>Full code for this application can be downloaded from:</p>
<ul>
<li><a href="http://cid-49208a72e4eb818c.skydrive.live.com/self.aspx/world/code/test.rar">Rails code</a>
<li><a href="http://cid-49208a72e4eb818c.skydrive.live.com/self.aspx/world/code/TestFrontEndFlex.rar">Flex code</a> </li>
</ul>
<div class="wlWriterSmartContent" id="9cde01ca-f4d1-4e36-94d6-1cd81702baf9" style="display:inline;margin:0;padding:0;">del.icio.us Tags: <a href="http://del.icio.us/popular/adobe" rel="tag">adobe</a>,<a href="http://del.icio.us/popular/flex" rel="tag">flex</a>,<a href="http://del.icio.us/popular/mxmx" rel="tag">mxmx</a>,<a href="http://del.icio.us/popular/rails" rel="tag">rails</a>,<a href="http://del.icio.us/popular/ruby" rel="tag">ruby</a>,<a href="http://del.icio.us/popular/ruby%20on%20rails" rel="tag">ruby on rails</a>,<a href="http://del.icio.us/popular/silverlight" rel="tag">silverlight</a>,<a href="http://del.icio.us/popular/xaml" rel="tag">xaml</a></div>
]]></content:encoded>
			<wfw:commentRss>http://allyourcodearebelongto.me/blog/2008/03/26/using-flex-with-rubyonrails/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Using Silverlight with Ruby on Rails</title>
		<link>http://allyourcodearebelongto.me/blog/2008/03/26/using-silverlight-with-rubyonrails/</link>
		<comments>http://allyourcodearebelongto.me/blog/2008/03/26/using-silverlight-with-rubyonrails/#comments</comments>
		<pubDate>Wed, 26 Mar 2008 12:55:12 +0000</pubDate>
		<dc:creator>Gaurav</dc:creator>
				<category><![CDATA[C#]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[crud]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[microsoft]]></category>
		<category><![CDATA[mxml]]></category>
		<category><![CDATA[rails]]></category>
		<category><![CDATA[ruby]]></category>
		<category><![CDATA[ruby on rails]]></category>
		<category><![CDATA[silverlight]]></category>
		<category><![CDATA[xaml]]></category>

		<guid isPermaLink="false">http://techblogging.wordpress.com/2008/03/26/using-silverlight-with-rubyonrails/</guid>
		<description><![CDATA[In this post I will be showing a really simple example of creating a Silverlight frontend for a Rails backend. This is what I think will be a three part series comparing Silverlight with Flex.
The steps will be:

Creating a Rails application.
Creating a frontend for it in silverlight.
Creating a frontend for it in Flex.
Comparing the approaches [...]]]></description>
			<content:encoded><![CDATA[<p>In this post I will be showing a really simple example of creating a Silverlight frontend for a Rails backend. This is what I think will be a three part series comparing Silverlight with Flex.</p>
<p>The steps will be:</p>
<ol>
<li>Creating a Rails application.
<li>Creating a frontend for it in silverlight.
<li>Creating a frontend for it in Flex.
<li>Comparing the approaches taken in both the frontends. </li>
</ol>
<p> I will try to keep changes in the backend Rails application to a minimum.</p>
</p>
<p><span id="more-55"></span>
</p>
<h5><u>Creating a Rails Application</u></h5>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;">F:\<span style="color:#0000ff;">&gt;</span>rails test
F:\<span style="color:#0000ff;">&gt;</span>cd test
F:\test<span style="color:#0000ff;">&gt;</span>ruby script\generate scaffold user name:string address:text
F:\test<span style="color:#0000ff;">&gt;</span>rake db:create
F:\test<span style="color:#0000ff;">&gt;</span>rake db:migrate
F:\test<span style="color:#0000ff;">&gt;</span>ruby script\server</pre>
</div>
<p>Before running the migrations add the following code in the first migration file (./db/migrate/001_create_users.rb) to create some initial data.&nbsp; So it should look like:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">class</span> CreateUsers &lt; ActiveRecord::Migration
  def self.up
    create_table :users <span style="color:#0000ff;">do</span> |t|
      t.<span style="color:#0000ff;">string</span> :name
      t.text :address
      t.timestamps
    end

    User.create(:name=&gt; <span style="color:#006080;">"Gaurav"</span>, :address=&gt; <span style="color:#006080;">"Gaurav's address"</span>)
    User.create(:name=&gt; <span style="color:#006080;">"Rishav"</span>, :address=&gt; <span style="color:#006080;">"Rishav's address"</span>)
    User.create(:name=&gt; <span style="color:#006080;">"Bhavesh"</span>, :address=&gt; <span style="color:#006080;">"Bhavesh's address"</span>)
  end

  def self.down
    drop_table :users
  end
end</pre>
</div>
<p>&nbsp;</p>
<h5><u>Creating a new C# based Silverlight project</u></h5>
<p>&nbsp;</p>
<p>Open up Visual Studio 2008 (with Silverlight <a href="http://techblogging.wordpress.com/2008/03/05/silverlight-20-beta-1-now-available-and-10-version-ported-to-nokia-mobiles/">tools</a> installed. You can also download a trial version of Visual Studio 2008 from <a href="http://msdn2.microsoft.com/en-us/vstudio/products/aa700831.aspx">here</a>). And create a new project:</p>
<p><a href="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/vs-step1.png"><img style="border-width:0;" height="415" alt="vs_step1" src="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/vs-step1-thumb.png" width="609" border="0"></a></p>
<p><a href="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/vs-step2.png"><img style="border-width:0;" height="368" alt="vs_step2" src="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/vs-step2-thumb.png" width="439" border="0"></a></p>
<p>&nbsp;</p>
<p>Open the page.xaml file and add a ListBox to it. It should look like:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">&lt;</span><span style="color:#800000;">UserControl</span> <span style="color:#ff0000;">x:Class</span><span style="color:#0000ff;">="TestFrontEnd.Page"</span>
    <span style="color:#ff0000;">xmlns</span><span style="color:#0000ff;">="http://schemas.microsoft.com/client/2007"</span>
    <span style="color:#ff0000;">xmlns:x</span><span style="color:#0000ff;">="http://schemas.microsoft.com/winfx/2006/xaml"</span>
    <span style="color:#ff0000;">Width</span><span style="color:#0000ff;">="400"</span> <span style="color:#ff0000;">Height</span><span style="color:#0000ff;">="300"</span><span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">Grid</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="LayoutRoot"</span> <span style="color:#ff0000;">Background</span><span style="color:#0000ff;">="White"</span><span style="color:#0000ff;">&gt;</span>
        <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">ListBox</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="userList"</span> <span style="color:#ff0000;">Height</span><span style="color:#0000ff;">="200"</span><span style="color:#0000ff;">/&gt;</span>
    <span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">Grid</span><span style="color:#0000ff;">&gt;</span>
<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">UserControl</span><span style="color:#0000ff;">&gt;</span></pre>
</div>
<p>&nbsp;</p>
<p>Now when the server responds with xml, we will parse that using <a href="http://msdn2.microsoft.com/en-us/netframework/aa904594.aspx">Linq</a>. For that we need a User class that is like the user model on the Rails side. So it should have 3 fields:</p>
<ol>
<li>id
<li>name
<li>address </li>
</ol>
<p>It should look like:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">namespace</span> TestFrontEnd {
    <span style="color:#0000ff;">public</span> <span style="color:#0000ff;">class</span> User {
        <span style="color:#0000ff;">public</span> <span style="color:#0000ff;">int</span> id { get; set; }
        <span style="color:#0000ff;">public</span> <span style="color:#0000ff;">string</span> name { get; set; }
        <span style="color:#0000ff;">public</span> <span style="color:#0000ff;">string</span> address { get; set; }
    }
}</pre>
</div>
<p>&nbsp;</p>
<p>To make things simpler I have created a HTTPService class that behaves something like the Flex based HTTPService class. <a href="http://pastie.caboo.se/170803">Here is the source</a> (too big to paste inline). Add it to your project. You will need to include System.Net assembly your project to to make it work. Its usage is quite simple.</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;">HTTPService userIndexService = <span style="color:#0000ff;">new</span> HTTPService();
userIndexService.Url = <span style="color:#006080;">"http://localhost:3000/users.xml"</span>;
userIndexService.ServiceComplete += <span style="color:#0000ff;">new</span> HttpServiceCompleteEventHandler(userIndexService_ServiceComplete);
userIndexService.send();</pre>
</div>
<p>&nbsp;</p>
<p>You can also give the request method like:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;">userIndexService.Method = <span style="color:#006080;">"POST"</span>;</pre>
</div>
<p>&nbsp;</p>
<p>Now add an ObservableCollection to the Page class:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">private</span> ObservableCollection&lt;User&gt; userListItems = <span style="color:#0000ff;">new</span> ObservableCollection&lt;User&gt;();</pre>
</div>
<p>&nbsp;</p>
<p>We will be using this for <a href="http://msdn2.microsoft.com/en-us/library/ms752347.aspx">databinding</a> with the ListBox to display all the users.</p>
<p>Add the System.Xml.Linq to your project. In the userIndexService_ServiceComplete event handler write:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">void</span> userIndexService_ServiceComplete(HttpServiceCompleteEventArgs e) {
    XDocument users = XDocument.Parse(e.Response);
    User[] usersList = (from x <span style="color:#0000ff;">in</span> users.Descendants(<span style="color:#006080;">"user"</span>)
            select <span style="color:#0000ff;">new</span> User
            {
                id = <span style="color:#0000ff;">int</span>.Parse(x.Descendants(<span style="color:#006080;">"id"</span>).First().Value),
                name = x.Descendants(<span style="color:#006080;">"name"</span>).First().Value,
                address = x.Descendants(<span style="color:#006080;">"address"</span>).First().Value,
            }).ToArray();
    <span style="color:#0000ff;">foreach</span> (User user <span style="color:#0000ff;">in</span> usersList)
        userListItems.Add(user);
}</pre>
</div>
<p>&nbsp;</p>
<p>So when the service completes all the users will be filled in the ObserveableCollection. Now to bind it to the userList ListBox. In the constructor of the Page class write:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;">userList.DataContext = userListItems;</pre>
</div>
<p>&nbsp;</p>
<p>And modify the code for the userList ListBox to look like:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">&lt;</span><span style="color:#800000;">ListBox</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="userList"</span> <span style="color:#ff0000;">Height</span><span style="color:#0000ff;">="200"</span> <span style="color:#ff0000;">ItemsSource</span><span style="color:#0000ff;">="{Binding}"</span> <span style="color:#ff0000;">DisplayMemberPath</span><span style="color:#0000ff;">="name"</span> <span style="color:#0000ff;">/&gt;</span></pre>
</div>
<p>&nbsp;</p>
<p>Add a crossdomain.xml file to the rails project&#8217;s public folder:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">&lt;?</span><span style="color:#800000;">xml</span> <span style="color:#ff0000;">version</span><span style="color:#0000ff;">="1.0"</span>?<span style="color:#0000ff;">&gt;</span>
<span style="color:#0000ff;">&lt;!</span><span style="color:#800000;">DOCTYPE</span> <span style="color:#ff0000;">cross-domain-policy</span> <span style="color:#ff0000;">SYSTEM</span> <span style="color:#0000ff;">"http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"</span><span style="color:#0000ff;">&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">cross-domain-policy</span><span style="color:#0000ff;">&gt;</span>
  <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">allow-access-from</span> <span style="color:#ff0000;">domain</span><span style="color:#0000ff;">="*"</span> <span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">cross-domain-policy</span><span style="color:#0000ff;">&gt;</span></pre>
</div>
<p>We are basically allowing our Silverlight app to access the rails server. You won&#8217;t be requiring this file if the Rails server is serving the Silverlight application, but currently it is not the case.</p>
<p>Now when you run the code you should see:</p>
<p><a href="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/vs-step3.png"><img style="border-width:0;" height="416" alt="vs_step3" src="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/vs-step3-thumb.png" width="480" border="0"></a></p>
<p>Now I will add a few more lines of code to show the selected item in TextBox. Add/Update the following to page.xaml:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">&lt;</span><span style="color:#800000;">ListBox</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="userList"</span> <span style="color:#ff0000;">Height</span><span style="color:#0000ff;">="200"</span> <span style="color:#ff0000;">ItemsSource</span><span style="color:#0000ff;">="{Binding}"</span> <span style="color:#ff0000;">DisplayMemberPath</span><span style="color:#0000ff;">="name"</span> <span style="color:#ff0000;">SelectionChanged</span><span style="color:#0000ff;">="userList_SelectionChanged"</span><span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">StackPanel</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="controls"</span><span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">TextBox</span> <span style="color:#ff0000;">Text</span><span style="color:#0000ff;">="{Binding name, Mode=Twoway}"</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="userName"</span><span style="color:#0000ff;">/&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">TextBox</span> <span style="color:#ff0000;">Text</span><span style="color:#0000ff;">="{Binding address, Mode=Twoway}"</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="userAddress"</span><span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">StackPanel</span><span style="color:#0000ff;">&gt;</span></pre>
</div>
<p>The first TextBox is showing name and second is showing the password. The binding mode is set to TwoWay so that the changes in TextBox are automatically to the userListItems.</p>
<p>Add the corresponding event handler to Page class:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">private</span> <span style="color:#0000ff;">void</span> userList_SelectionChanged(<span style="color:#0000ff;">object</span> sender, SelectionChangedEventArgs e) {
    controls.DataContext = userList.SelectedItem <span style="color:#0000ff;">as</span> User;
}</pre>
</div>
<p>&nbsp;</p>
<p>Now when you run the code you should see:</p>
<p><a href="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/image6.png"><img style="border-width:0;" height="423" alt="image" src="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/image-thumb6.png" width="481" border="0"></a></p>
<p>Download the code upto this point:</p>
<ul>
<li><a href="http://cid-49208a72e4eb818c.skydrive.live.com/self.aspx/world/code/test.rar">Rails code</a>
<li><a href="http://cid-49208a72e4eb818c.skydrive.live.com/self.aspx/world/code/TestFrontEnd.rar">Silverlight code</a> </li>
</ul>
<p>&nbsp;</p>
<h5>&nbsp;<u>Implementing the full <a href="http://en.wikipedia.org/wiki/Create,_read,_update_and_delete">CRUD</a> :</u></h5>
<p>&nbsp;</p>
<p>Firstly I willl be doing a bit of refactoring. Move the xml parsing code using Linq to the User class. So it should now look like:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">public</span> <span style="color:#0000ff;">class</span> User {
    <span style="color:#0000ff;">public</span> <span style="color:#0000ff;">int</span> id { get; set; }
    <span style="color:#0000ff;">public</span> <span style="color:#0000ff;">string</span> name { get; set; }
    <span style="color:#0000ff;">public</span> <span style="color:#0000ff;">string</span> address { get; set; }

    <span style="color:#0000ff;">public</span> <span style="color:#0000ff;">static</span> User[] users_from_xml(String xml_string){
        XDocument users = XDocument.Parse(xml_string);
        <span style="color:#0000ff;">return</span> (from x <span style="color:#0000ff;">in</span> users.Descendants(<span style="color:#006080;">"user"</span>)
            select <span style="color:#0000ff;">new</span> User
            {
                id = <span style="color:#0000ff;">int</span>.Parse(x.Descendants(<span style="color:#006080;">"id"</span>).First().Value),
                name = x.Descendants(<span style="color:#006080;">"name"</span>).First().Value,
                address = x.Descendants(<span style="color:#006080;">"address"</span>).First().Value,
            }).ToArray();
    }

    <span style="color:#0000ff;">public</span> <span style="color:#0000ff;">static</span> User user_from_xml(String xml_string) {
        <span style="color:#0000ff;">return</span> users_from_xml(xml_string).First();
    }
}</pre>
</div>
<p>&nbsp;</p>
<p>Change the Page class to:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">using</span> System;
<span style="color:#0000ff;">using</span> System.Collections.Generic;
<span style="color:#0000ff;">using</span> System.Linq;
<span style="color:#0000ff;">using</span> System.Windows;
<span style="color:#0000ff;">using</span> System.Windows.Controls;
<span style="color:#0000ff;">using</span> System.Windows.Documents;
<span style="color:#0000ff;">using</span> System.Windows.Input;
<span style="color:#0000ff;">using</span> System.Windows.Media;
<span style="color:#0000ff;">using</span> System.Windows.Media.Animation;
<span style="color:#0000ff;">using</span> System.Windows.Shapes;
<span style="color:#0000ff;">using</span> System.Collections.ObjectModel;
<span style="color:#0000ff;">using</span> System.Xml.Linq;

<span style="color:#0000ff;">namespace</span> TestFrontEnd {
    <span style="color:#0000ff;">public</span> <span style="color:#0000ff;">partial</span> <span style="color:#0000ff;">class</span> Page : UserControl {
        <span style="color:#0000ff;">private</span> ObservableCollection&lt;User&gt; userListItems = <span style="color:#0000ff;">new</span> ObservableCollection&lt;User&gt;();

        <span style="color:#0000ff;">private</span> HTTPService userIndexService;
        <span style="color:#0000ff;">private</span> HTTPService userCreateService;
        <span style="color:#0000ff;">private</span> HTTPService userUpdateService;
        <span style="color:#0000ff;">private</span> HTTPService userDeleteService;

        <span style="color:#0000ff;">public</span> Page() {
            InitializeComponent();
            <span style="color:#008000;">// setting the databinding</span>
            userList.DataContext = userListItems;
            controls.DataContext = <span style="color:#0000ff;">new</span> User();

            <span style="color:#008000;">// service to get all te users form the server</span>
            userIndexService = <span style="color:#0000ff;">new</span> HTTPService();
            userIndexService.Url = <span style="color:#006080;">"http://localhost:3000/users.xml"</span>;
            userIndexService.ServiceComplete += <span style="color:#0000ff;">new</span> HttpServiceCompleteEventHandler(userIndexService_ServiceComplete);
            userIndexService.send();

            <span style="color:#008000;">// create a new user</span>
            userCreateService = <span style="color:#0000ff;">new</span> HTTPService();
            userCreateService.Url = <span style="color:#006080;">"http://localhost:3000/users.xml"</span>;
            userCreateService.Method = <span style="color:#006080;">"POST"</span>;
            userCreateService.ServiceComplete += <span style="color:#0000ff;">new</span> HttpServiceCompleteEventHandler(userCreateService_ServiceComplete);

            <span style="color:#008000;">// update a user, we will not be trapping the results</span>
            userUpdateService = <span style="color:#0000ff;">new</span> HTTPService();
            userUpdateService.Method = <span style="color:#006080;">"POST"</span>;

            <span style="color:#008000;">// delete a user</span>
            userDeleteService = <span style="color:#0000ff;">new</span> HTTPService();
            userDeleteService.Method = <span style="color:#006080;">"POST"</span>;
        }

        <span style="color:#0000ff;">private</span> <span style="color:#0000ff;">void</span> _userList_SelectionChanged(<span style="color:#0000ff;">object</span> sender, SelectionChangedEventArgs e) {
            controls.DataContext = userList.SelectedItem <span style="color:#0000ff;">as</span> User;
        }

        <span style="color:#0000ff;">private</span> <span style="color:#0000ff;">void</span> userIndexService_ServiceComplete(HttpServiceCompleteEventArgs e) {
            <span style="color:#0000ff;">foreach</span> (User user <span style="color:#0000ff;">in</span> User.users_from_xml(e.Response))
                userListItems.Add(user);
        }
        <span style="color:#0000ff;">private</span> <span style="color:#0000ff;">void</span> userCreateService_ServiceComplete(HttpServiceCompleteEventArgs e) {
            userListItems.Add(User.user_from_xml(e.Response));
        }

        <span style="color:#0000ff;">private</span> <span style="color:#0000ff;">void</span> createButton_Click(<span style="color:#0000ff;">object</span> sender, RoutedEventArgs e) {
            userCreateService.send(String.Format(<span style="color:#006080;">"{0}={1}&amp;{2}={3}"</span>, <span style="color:#006080;">"user[name]"</span>, userName.Text, <span style="color:#006080;">"user[address]"</span>, userAddress.Text));
        }

        <span style="color:#0000ff;">private</span> <span style="color:#0000ff;">void</span> updateButton_Click(<span style="color:#0000ff;">object</span> sender, RoutedEventArgs e) {
            User _selectedUser = userList.SelectedItem <span style="color:#0000ff;">as</span> User;
            userUpdateService.Url = <span style="color:#006080;">"http://localhost:3000/users/"</span> + _selectedUser.id.ToString() + <span style="color:#006080;">".xml"</span>;
            userUpdateService.send(String.Format(<span style="color:#006080;">"{0}={1}&amp;{2}={3}&amp;{4}={5}"</span>, <span style="color:#006080;">"user[name]"</span>, userName.Text, <span style="color:#006080;">"user[address]"</span>, userAddress.Text, <span style="color:#006080;">"_method"</span>, <span style="color:#006080;">"PUT"</span>));
            userListItems[userList.SelectedIndex] = _selectedUser;
        }

        <span style="color:#0000ff;">private</span> <span style="color:#0000ff;">void</span> deleteButton_Click(<span style="color:#0000ff;">object</span> sender, RoutedEventArgs e) {
            User _selectedUser = userList.SelectedItem <span style="color:#0000ff;">as</span> User;
            userDeleteService.Url = <span style="color:#006080;">"http://localhost:3000/users/"</span> + _selectedUser.id.ToString() + <span style="color:#006080;">".xml"</span>;
            userDeleteService.send(String.Format(<span style="color:#006080;">"{0}={1}"</span>, <span style="color:#006080;">"_method"</span>, <span style="color:#006080;">"DELETE"</span>));
            userListItems.Remove(_selectedUser);
        }

    }
}
</pre>
</div>
<p>&nbsp;</p>
<p>To understand the specific parameters to the &#8220;send()&#8221; method of the HTTPService class you will need a little bit of understanding of how REST is implemented in Rails and how parameters are passed to a url, which is out of scope of this blog post.</p>
<p>&nbsp;</p>
<p>Change Page.xaml to:</p>
<div>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;border-style:none;margin:0;padding:0;"><span style="color:#0000ff;">&lt;</span><span style="color:#800000;">UserControl</span> <span style="color:#ff0000;">x:Class</span><span style="color:#0000ff;">="TestFrontEnd.Page"</span>
    <span style="color:#ff0000;">xmlns</span><span style="color:#0000ff;">="http://schemas.microsoft.com/client/2007"</span>
    <span style="color:#ff0000;">xmlns:x</span><span style="color:#0000ff;">="http://schemas.microsoft.com/winfx/2006/xaml"</span>
    <span style="color:#ff0000;">Width</span><span style="color:#0000ff;">="400"</span> <span style="color:#ff0000;">Height</span><span style="color:#0000ff;">="300"</span><span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">Grid</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="LayoutRoot"</span> <span style="color:#ff0000;">Background</span><span style="color:#0000ff;">="White"</span><span style="color:#0000ff;">&gt;</span>
        <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">StackPanel</span> <span style="color:#ff0000;">Orientation</span><span style="color:#0000ff;">="Vertical"</span><span style="color:#0000ff;">&gt;</span>
            <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">ListBox</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="userList"</span> <span style="color:#ff0000;">ItemsSource</span><span style="color:#0000ff;">="{Binding}"</span> <span style="color:#ff0000;">DisplayMemberPath</span><span style="color:#0000ff;">="name"</span> <span style="color:#ff0000;">SelectionChanged</span><span style="color:#0000ff;">="_userList_SelectionChanged"</span> <span style="color:#ff0000;">Height</span><span style="color:#0000ff;">="200"</span><span style="color:#0000ff;">/&gt;</span>
            <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">StackPanel</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="controls"</span><span style="color:#0000ff;">&gt;</span>
                <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">TextBox</span> <span style="color:#ff0000;">Text</span><span style="color:#0000ff;">="{Binding name, Mode=Twoway}"</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="userName"</span><span style="color:#0000ff;">/&gt;</span>
                <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">TextBox</span> <span style="color:#ff0000;">Text</span><span style="color:#0000ff;">="{Binding address, Mode=Twoway}"</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="userAddress"</span><span style="color:#0000ff;">/&gt;</span>
            <span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">StackPanel</span><span style="color:#0000ff;">&gt;</span>
            <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">StackPanel</span> <span style="color:#ff0000;">Orientation</span><span style="color:#0000ff;">="Horizontal"</span><span style="color:#0000ff;">&gt;</span>
                <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">Button</span> <span style="color:#ff0000;">Content</span><span style="color:#0000ff;">="Create"</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="createButton"</span> <span style="color:#ff0000;">Click</span><span style="color:#0000ff;">="createButton_Click"</span><span style="color:#0000ff;">/&gt;</span>
                <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">Button</span> <span style="color:#ff0000;">Content</span><span style="color:#0000ff;">="Update"</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="updateButton"</span> <span style="color:#ff0000;">Click</span><span style="color:#0000ff;">="updateButton_Click"</span><span style="color:#0000ff;">/&gt;</span>
                <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">Button</span> <span style="color:#ff0000;">Content</span><span style="color:#0000ff;">="Delete"</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="deleteButton"</span> <span style="color:#ff0000;">Click</span><span style="color:#0000ff;">="deleteButton_Click"</span><span style="color:#0000ff;">/&gt;</span>
            <span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">StackPanel</span><span style="color:#0000ff;">&gt;</span>
            <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">TextBlock</span> <span style="color:#ff0000;">x:Name</span><span style="color:#0000ff;">="trace"</span> <span style="color:#0000ff;">/&gt;</span>
        <span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">StackPanel</span><span style="color:#0000ff;">&gt;</span>
    <span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">Grid</span><span style="color:#0000ff;">&gt;</span>
<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">UserControl</span><span style="color:#0000ff;">&gt;</span>
</pre>
</div>
<p>&nbsp;</p>
<p>This is how it looks like now:</p>
<p><a href="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/image7.png"><img style="border-width:0;" height="423" alt="image" src="http://allyourcodearebelongto.me/blog/wp-content/uploads/2008/03/image-thumb7.png" width="481" border="0"></a></p>
<p>So this is full CRUD implementation using Silverlight as frontend.</p>
<p>This is not the most optimal way to implement CRUD it is very easy to understand. It also should be noted that I haven&#8217;t added error checking of any type in the code and there is a lot of code repetition. But I guess that could be improved upon further once the most simple scenario is implemented. My style of coding is &#8220;First make it work and then optimize it&#8221;, and as I have mentioned it before it is certainly not the most optimized way to code but it sure works :)</p>
<p>One microsoft releases better databinding capabilities in controls and some simpler classes for HTTP based communication, this code would be much more simpler.</p>
<p>Full code for this aplication can be downloaded from:</p>
<li><a href="http://cid-49208a72e4eb818c.skydrive.live.com/self.aspx/world/code/test.rar">Rails code</a>
<li><a href="http://cid-49208a72e4eb818c.skydrive.live.com/self.aspx/world/code/TestFrontEnd2.rar">Silverlight code</a></li>
<p>&nbsp;</p>
<div class="wlWriterSmartContent" id="5ce5ff6c-9474-4531-909c-9f79bda9013e" style="display:inline;margin:0;padding:0;">del.icio.us Tags: <a href="http://del.icio.us/popular/adobe" rel="tag">adobe</a>,<a href="http://del.icio.us/popular/C#" rel="tag">C#</a>,<a href="http://del.icio.us/popular/crud" rel="tag">crud</a>,<a href="http://del.icio.us/popular/flex" rel="tag">flex</a>,<a href="http://del.icio.us/popular/microsoft" rel="tag">microsoft</a>,<a href="http://del.icio.us/popular/rails" rel="tag">rails</a>,<a href="http://del.icio.us/popular/ruby%20on%20rails" rel="tag">ruby on rails</a>,<a href="http://del.icio.us/popular/silverlight" rel="tag">silverlight</a>,<a href="http://del.icio.us/popular/xaml" rel="tag">xaml</a></div>
]]></content:encoded>
			<wfw:commentRss>http://allyourcodearebelongto.me/blog/2008/03/26/using-silverlight-with-rubyonrails/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

