<?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; wpf</title>
	<atom:link href="http://allyourcodearebelongto.me/blog/tag/wpf/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>Creating a User Interface in Ruby using WPF</title>
		<link>http://allyourcodearebelongto.me/blog/2007/10/09/creating-a-user-interface-in-ruby-using-wpf/</link>
		<comments>http://allyourcodearebelongto.me/blog/2007/10/09/creating-a-user-interface-in-ruby-using-wpf/#comments</comments>
		<pubDate>Tue, 09 Oct 2007 11:41:23 +0000</pubDate>
		<dc:creator>Gaurav</dc:creator>
				<category><![CDATA[ruby]]></category>
		<category><![CDATA[user interface]]></category>
		<category><![CDATA[windows]]></category>
		<category><![CDATA[wpf]]></category>
		<category><![CDATA[xaml]]></category>
		<category><![CDATA[ui]]></category>
		<category><![CDATA[win32ole]]></category>

		<guid isPermaLink="false">http://techblogging.wordpress.com/2007/10/09/creating-a-user-interface-in-ruby-using-wpf/</guid>
		<description><![CDATA[Let me first explain what is WPF?
WPF is the graphical subsystem if the .NET 3.0 framework and it is there to take the place of window forms which we used with earlier versions of .NET
So what&#8217;s so great about WPF?
Actually WPF is has its roots in DirectX API so you can easily create 2D and [...]]]></description>
			<content:encoded><![CDATA[<p>Let me first explain what is WPF?</p>
<p>WPF is the graphical subsystem if the .NET 3.0 framework and it is there to take the place of window forms which we used with earlier versions of .NET</p>
<h5>So what&#8217;s so great about WPF?</h5>
<p>Actually WPF is has its roots in DirectX API so you can easily create 2D and 3D interfaces in it without putting ant load on the processor. Also it is vector based and stores the information for the generating the UI in separate XAML files. So we have logical separation of a control from its appearance.</p>
<p>Further details: <a title="http://en.wikipedia.org/wiki/Windows_Presentation_Foundation" href="http://en.wikipedia.org/wiki/Windows_Presentation_Foundation" target="_blank">http://en.wikipedia.org/wiki/Windows_Presentation_Foundation</a></p>
<p>The following are the requirements for running this example:</p>
<ul>
<li>rubyclr gem. Use <strong>gem install rubyclr -y</strong>
<li>.NET framework 3.0 </li>
</ul>
<p>In this example I will creating a creating a textarea along with a button, trapping the events on the button and logging it inside the textarea .</p>
<p>Here is the code for the xaml file. Store this file with filename ui.xaml. This file contains the UI for the application.</p>
<div style="border-right:gray 1px solid;border-top:gray 1px solid;font-size:8pt;overflow:auto;border-left:gray 1px solid;width:97.5%;cursor:text;max-height:200px;line-height:12pt;border-bottom:gray 1px solid;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;margin:20px 0 10px;padding:4px;">
<div 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;padding:0;">
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">   1:</span> <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">Window</span></pre>
<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:#606060;">   2:</span> <span style="color:#ff0000;">xmlns</span><span style="color:#0000ff;">="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span></pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">   3:</span> <span style="color:#ff0000;">xmlns:x</span><span style="color:#0000ff;">="http://schemas.microsoft.com/winfx/2006/xaml"</span><span style="color:#0000ff;">&gt;</span></pre>
<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:#606060;">   4:</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:#0000ff;">&gt;</span></pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">   5:</span> <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">Button</span> <span style="color:#ff0000;">Margin</span><span style="color:#0000ff;">="8,0,8,5.723"</span> <span style="color:#ff0000;">VerticalAlignment</span><span style="color:#0000ff;">="Bottom"</span> <span style="color:#ff0000;">Content</span><span style="color:#0000ff;">="Button"</span> <span style="color:#ff0000;">Name</span><span style="color:#0000ff;">="the_button"</span><span style="color:#0000ff;">/&gt;</span></pre>
<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:#606060;">   6:</span> <span style="color:#0000ff;">&lt;</span><span style="color:#800000;">TextBox</span> <span style="color:#ff0000;">Margin</span><span style="color:#0000ff;">="8,8,8,38"</span> <span style="color:#ff0000;">Name</span><span style="color:#0000ff;">="the_text_box"</span><span style="color:#0000ff;">/&gt;</span></pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">   7:</span> <span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">Grid</span><span style="color:#0000ff;">&gt;</span></pre>
<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:#606060;">   8:</span> <span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">Window</span><span style="color:#0000ff;">&gt;</span></pre>
</div>
</div>
<div>&nbsp;</div>
<p>Next I will be creating the codebehind file in ruby. Here in this file we have all the application logic. Save this file as logic.rb.</p>
<div style="border-right:gray 1px solid;border-top:gray 1px solid;font-size:8pt;overflow:auto;border-left:gray 1px solid;width:97.5%;cursor:text;max-height:200px;line-height:12pt;border-bottom:gray 1px solid;font-family:consolas, 'Courier New', courier, monospace;background-color:#f4f4f4;margin:20px 0 10px;padding:4px;">
<div 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;padding:0;">
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">   1:</span> # load the libraries</pre>
<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:#606060;">   2:</span> require <span style="color:#008000;">'rubygems'</span></pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">   3:</span> require <span style="color:#008000;">'wpf'</span></pre>
<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:#606060;">   4:</span> # load the xaml file</pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">   5:</span> window = XamlReader.Load(System::IO::File.open_read(<span style="color:#008000;">'ui.xaml'))</span></pre>
<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:#606060;">   6:</span>&nbsp; </pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">   7:</span> # <span style="color:#0000ff;">get</span> the controls</pre>
<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:#606060;">   8:</span> button = window.find_name(<span style="color:#008000;">'the_button')</span></pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">   9:</span> txt_box = window.find_name(<span style="color:#008000;">'the_text_box')</span></pre>
<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:#606060;">  10:</span> # trap the mouse enter <span style="color:#0000ff;">event</span></pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">  11:</span> button.mouse_enter <span style="color:#0000ff;">do</span> |sender, args|</pre>
<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:#606060;">  12:</span> txt_box.text += <span style="color:#006080;">"MOUSE ENTERED\n"</span></pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">  13:</span> <span style="color:#0000ff;">end</span></pre>
<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:#606060;">  14:</span> # trap the mouse leave <span style="color:#0000ff;">event</span></pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">  15:</span> button.mouse_leave <span style="color:#0000ff;">do</span> |sender, args|</pre>
<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:#606060;">  16:</span> txt_box.text += <span style="color:#006080;">"MOUSE LEFT\n"</span></pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">  17:</span> <span style="color:#0000ff;">end</span></pre>
<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:#606060;">  18:</span> # trap the mouse click <span style="color:#0000ff;">event</span></pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">  19:</span> button.click <span style="color:#0000ff;">do</span> |sender, args|</pre>
<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:#606060;">  20:</span> txt_box.text += <span style="color:#006080;">"MOUSE CLICKED\n"</span></pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">  21:</span> <span style="color:#0000ff;">end</span></pre>
<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:#606060;">  22:</span> # run the application (most important)</pre>
<pre style="font-size:8pt;overflow:visible;width:100%;color:black;line-height:12pt;font-family:consolas, 'Courier New', courier, monospace;background-color:white;border-style:none;margin:0;padding:0;"><span style="color:#606060;">  23:</span> Application.<span style="color:#0000ff;">new</span>.run(window)</pre>
</div>
</div>
<p>The code given above explains itself.</p>
<p>We are first loading the ui.xaml file and then finding the two controls in the lines 8, 9.</p>
<p>Then the three event handlers are declared in lines 11, 14, 19. So whenever the mouse events are fired the corresponding event if traced into the textbox.</p>
<h2>And here is the output.</h2>
<p><a href="http://allyourcodearebelongto.me/blog/wp-content/uploads/2007/10/image.png"><img style="border-width:0;" height="349" alt="image" src="http://allyourcodearebelongto.me/blog/wp-content/uploads/2007/10/image-thumb.png" width="540" border="0"></a></p>
<div class="wlWriterSmartContent" id="38ca0925-19ba-445d-831b-fb8a30569fe5" style="display:inline;float:none;margin:0;padding:0;">del.icio.us Tags: <a href="http://del.icio.us/popular/ruby" rel="tag">ruby</a>,<a href="http://del.icio.us/popular/user%20interface" rel="tag">user interface</a>,<a href="http://del.icio.us/popular/windows" rel="tag">windows</a>,<a href="http://del.icio.us/popular/wpf" rel="tag">wpf</a>,<a href="http://del.icio.us/popular/xaml" rel="tag">xaml</a></div>
]]></content:encoded>
			<wfw:commentRss>http://allyourcodearebelongto.me/blog/2007/10/09/creating-a-user-interface-in-ruby-using-wpf/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

