<?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>Silveira Neto &#187; Duke Potato</title>
	<atom:link href="http://silveiraneto.net/tag/duke-potato/feed/" rel="self" type="application/rss+xml" />
	<link>http://silveiraneto.net</link>
	<description>the world is a pixel</description>
	<lastBuildDate>Mon, 19 Jul 2010 21:59:29 +0000</lastBuildDate>
	<language>pt-br</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>JavaFX, Duke Potato</title>
		<link>http://silveiraneto.net/2008/10/04/javafx-duke-potato/</link>
		<comments>http://silveiraneto.net/2008/10/04/javafx-duke-potato/#comments</comments>
		<pubDate>Sat, 04 Oct 2008 19:04:01 +0000</pubDate>
		<dc:creator>Silveira</dc:creator>
				<category><![CDATA[english]]></category>
		<category><![CDATA[draggable]]></category>
		<category><![CDATA[duke]]></category>
		<category><![CDATA[Duke Potato]]></category>
		<category><![CDATA[JavaFX]]></category>
		<category><![CDATA[Mr Potato Head]]></category>
		<category><![CDATA[netbeans]]></category>
		<category><![CDATA[screencast]]></category>
		<category><![CDATA[vídeo]]></category>

		<guid isPermaLink="false">http://silveiraneto.net/?p=1327</guid>
		<description><![CDATA[Do you know the toy Mr. Potato Head? Now meet the Java Potato. Duke images here from previous dukes I posted and other images from Open Clipart Project. Java Web Start: The code: package dukepotato; &#160; import javafx.application.Frame; import javafx.application.Stage; import javafx.scene.CustomNode; import javafx.scene.Node; import javafx.scene.Group; import javafx.input.MouseEvent; import javafx.scene.geometry.Circle; import javafx.scene.paint.Color; import javafx.scene.image.ImageView; import [...]]]></description>
			<content:encoded><![CDATA[<p>Do you know the toy <a title="Wikipédia, inglês" href="http://en.wikipedia.org/wiki/Mr_potato_head">Mr. Potato Head</a>? Now meet the Java Potato.</p>
<p style="text-align: center;"><object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/6NrUdp5XX_o&amp;rel=0&amp;color1=0x3a3a3a&amp;color2=0x999999"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/6NrUdp5XX_o&amp;rel=0&amp;color1=0x3a3a3a&amp;color2=0x999999" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></object></p>
<p>Duke images here from <a title="Dukes" href="http://silveiraneto.net/tag/duke">previous dukes I posted</a> and other images from <a title="Open Clipart" href="http://openclipart.org/">Open Clipart Project</a>.</p>
<p>Java Web Start:</p>
<p style="text-align: center;"><a title="Click to launch" href="http://silveiraneto.net/downloads/dukepotato/launch.jnlp"><img class="size-full wp-image-1474 aligncenter" title="webstart" src="http://silveiraneto.net/wp-content/uploads/2008/10/webstart.png" alt="" width="88" height="23" /></a></p>
<p>The code:</p>
<div class="wp_syntax">
<div class="code">
<pre class="java java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">dukepotato</span>;
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.application.Frame</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.application.Stage</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.CustomNode</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.Node</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.Group</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.input.MouseEvent</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.geometry.Circle</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.paint.Color</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.image.ImageView</span>;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javafx.scene.image.Image</span>;
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> Img <span style="color: #000000; font-weight: bold;">extends</span> ImageView<span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">public</span>  attribute content<span style="color: #339933;">:</span> Node<span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span>;
    <span style="color: #000000; font-weight: bold;">public</span>  attribute src<span style="color: #339933;">:</span> <span style="color: #003399;">String</span>;
&nbsp;
    <span style="color: #000000; font-weight: bold;">private</span> attribute endX <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0.0</span>;
    <span style="color: #000000; font-weight: bold;">private</span> attribute endY <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0.0</span>;
    <span style="color: #000000; font-weight: bold;">private</span> attribute startX <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0.0</span>;
    <span style="color: #000000; font-weight: bold;">private</span> attribute startY <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0.0</span>;
&nbsp;
    override attribute translateX <span style="color: #339933;">=</span> bind endX;
    override attribute translateY <span style="color: #339933;">=</span> bind endY;
    override attribute blocksMouse <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">true</span>;
&nbsp;
    init <span style="color: #009900;">&#123;</span>
        image <span style="color: #339933;">=</span> <span style="color: #003399;">Image</span> <span style="color: #009900;">&#123;</span>
            url<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;{__DIR__}/{src}&quot;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    override attribute onMousePressed <span style="color: #339933;">=</span> function<span style="color: #009900;">&#40;</span>e<span style="color: #339933;">:</span><span style="color: #003399;">MouseEvent</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span><span style="color: #003399;">Void</span> <span style="color: #009900;">&#123;</span>
        startX <span style="color: #339933;">=</span> e.<span style="color: #006633;">getDragX</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-</span>endX;
        startY <span style="color: #339933;">=</span> e.<span style="color: #006633;">getDragY</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-</span>endY;
    <span style="color: #009900;">&#125;</span>
&nbsp;
    override attribute onMouseDragged <span style="color: #339933;">=</span> function<span style="color: #009900;">&#40;</span>e<span style="color: #339933;">:</span><span style="color: #003399;">MouseEvent</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span><span style="color: #003399;">Void</span> <span style="color: #009900;">&#123;</span>
        endX <span style="color: #339933;">=</span> e.<span style="color: #006633;">getDragX</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-</span>startX;
        endY <span style="color: #339933;">=</span> e.<span style="color: #006633;">getDragY</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-</span>startY;
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
var dukesimages <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #0000ff;">&quot;duke1.png&quot;</span>, <span style="color: #0000ff;">&quot;duke2.png&quot;</span>, <span style="color: #0000ff;">&quot;duke3.png&quot;</span>, <span style="color: #0000ff;">&quot;duke4.png&quot;</span><span style="color: #009900;">&#93;</span>;
var dukes <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>image in dukesimages<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #003399;">Image</span> <span style="color: #009900;">&#123;</span>
        url<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;{__DIR__}/{image}&quot;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
var index <span style="color: #339933;">=</span> 0;
var duke <span style="color: #339933;">=</span> ImageView <span style="color: #009900;">&#123;</span>
    x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">200</span>, y<span style="color: #339933;">:</span><span style="color: #cc66cc;">170</span>
    image<span style="color: #339933;">:</span> bind dukes<span style="color: #009900;">&#91;</span>index<span style="color: #009900;">&#93;</span>;
    onMouseClicked<span style="color: #339933;">:</span> function<span style="color: #009900;">&#40;</span> e<span style="color: #339933;">:</span> <span style="color: #003399;">MouseEvent</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span><span style="color: #003399;">Void</span> <span style="color: #009900;">&#123;</span>
        index <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>index <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span> mod sizeof dukesimages;
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
var hat <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;hat.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">370</span> <span style="color: #009900;">&#125;</span>
var partyhat <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;party_hat.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">160</span>, y<span style="color: #339933;">:</span> <span style="color: #cc66cc;">5</span> <span style="color: #009900;">&#125;</span>
var cap <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;cap.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">230</span>, y<span style="color: #339933;">:</span> <span style="color: #cc66cc;">10</span> <span style="color: #009900;">&#125;</span>
var cake <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;cake.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">526</span>, y<span style="color: #339933;">:</span> <span style="color: #cc66cc;">190</span> <span style="color: #009900;">&#125;</span>
var glove <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;glove.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">338</span>, y<span style="color: #339933;">:</span> <span style="color: #cc66cc;">363</span> <span style="color: #009900;">&#125;</span>
var baseball <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;baseball.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">548</span>, y<span style="color: #339933;">:</span><span style="color: #cc66cc;">373</span> <span style="color: #009900;">&#125;</span>
var pencil <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;pencil.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">451</span>, y<span style="color: #339933;">:</span> <span style="color: #cc66cc;">365</span> <span style="color: #009900;">&#125;</span>
var camera <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;camera.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">125</span>, y<span style="color: #339933;">:</span> <span style="color: #cc66cc;">380</span> <span style="color: #009900;">&#125;</span>
var coffee <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;coffee.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">541</span>, y<span style="color: #339933;">:</span> <span style="color: #cc66cc;">114</span> <span style="color: #009900;">&#125;</span>
var burger <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;burger.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">542</span>, y<span style="color: #339933;">:</span> <span style="color: #cc66cc;">282</span> <span style="color: #009900;">&#125;</span>
var diamond <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;diamond.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">243</span>, y<span style="color: #339933;">:</span> <span style="color: #cc66cc;">383</span> <span style="color: #009900;">&#125;</span>
var pliers <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;pliers.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">20</span>, y<span style="color: #339933;">:</span> <span style="color: #cc66cc;">368</span> <span style="color: #009900;">&#125;</span>
var rubikcube <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src <span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;rubikcube.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">37</span>, y<span style="color: #339933;">:</span> <span style="color: #cc66cc;">295</span> <span style="color: #009900;">&#125;</span>
var syringe <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;syringe.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">35</span>, y<span style="color: #339933;">:</span> <span style="color: #cc66cc;">245</span> <span style="color: #009900;">&#125;</span>
var hourglass <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;hourglass.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">35</span>, y<span style="color: #339933;">:</span> <span style="color: #cc66cc;">127</span> <span style="color: #009900;">&#125;</span>
var adventurehat <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;adventurehat.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">8</span>, y<span style="color: #339933;">:</span><span style="color: #cc66cc;">30</span> <span style="color: #009900;">&#125;</span>
var tie <span style="color: #339933;">=</span> Img <span style="color: #009900;">&#123;</span> src<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;tie.png&quot;</span>, x<span style="color: #339933;">:</span> <span style="color: #cc66cc;">547</span>, y<span style="color: #339933;">:</span><span style="color: #cc66cc;">35</span> <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003399;">Frame</span> <span style="color: #009900;">&#123;</span>
    title<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;Duke Potato&quot;</span>
    width<span style="color: #339933;">:</span> <span style="color: #cc66cc;">640</span>
    height<span style="color: #339933;">:</span> <span style="color: #cc66cc;">480</span>
    closeAction<span style="color: #339933;">:</span> function<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        java.<span style="color: #006633;">lang</span>.<span style="color: #003399;">System</span>.<span style="color: #006633;">exit</span><span style="color: #009900;">&#40;</span> 0 <span style="color: #009900;">&#41;</span>;
    <span style="color: #009900;">&#125;</span>
    visible<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">true</span>
&nbsp;
    stage<span style="color: #339933;">:</span> Stage <span style="color: #009900;">&#123;</span>
        content<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>duke, hat, partyhat, cake, adventurehat, cap, glove,
            baseball, pencil, camera, coffee, burger, diamond,
            pliers, rubikcube, syringe, hourglass, tie<span style="color: #009900;">&#93;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre>
</div>
</div>
<ul>
<li>Lines 14 to 42 is the same dragging approach I showed in the post <a href="http://silveiraneto.net/2008/08/11/javafx-draggable-node/">Draggable Nodes</a>, but this time creating a class that inherits the behavior of ImageView.</li>
<li>Lines 44 to 57 is the Duke that changes when you click on it. It cycles over the dukesimages list.</li>
<li>Lines 59 to 75 is just instantiations of all toys and objects we will use to dress the Duke. Look how easier was to create and place a image.</li>
<li>Lines 78 to the end is just creating a Frame and putting all elements on it.</li>
</ul>
<p><strong>Download</strong> a package with the NetBeans project, sources, libraries and images, <a href="http://silveiraneto.net/downloads/DukePotato.tar.gz">DukePotato.tar.gz</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://silveiraneto.net/2008/10/04/javafx-duke-potato/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>
