<?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>Addictive Software &#187; JavaFX</title>
	<atom:link href="http://blog.addictivesoftware.net/tag/javafx/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.addictivesoftware.net</link>
	<description>ramblings of a chaotic mind</description>
	<lastBuildDate>Tue, 06 Jul 2010 09:04:27 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>JavaFX data binding to Java</title>
		<link>http://blog.addictivesoftware.net/2009/11/data-binding-in-javafx/</link>
		<comments>http://blog.addictivesoftware.net/2009/11/data-binding-in-javafx/#comments</comments>
		<pubDate>Thu, 26 Nov 2009 21:01:51 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[JavaFX]]></category>

		<guid isPermaLink="false">http://blog.addictivesoftware.net/?p=3</guid>
		<description><![CDATA[Data binding in JavaFX is pretty straightforward.
You should think binding to Java Objects should be just as simple, well it is a little complicater then just doing

var someObject : bind myJavaclass.getProperty&#40;&#41;;

JavaFX needs to be aware of any changes to the bound variables to be able to update the related objects. It does this automagically for [...]]]></description>
			<content:encoded><![CDATA[<p>Data binding in JavaFX is pretty straightforward.<br />
You should think binding to Java Objects should be just as simple, well it is a little complicater then just doing</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;">var someObject <span style="color: #339933;">:</span> bind myJavaclass.<span style="color: #006633;">getProperty</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>JavaFX needs to be aware of any changes to the bound variables to be able to update the related objects. It does this automagically for all javafx objects.<br />
It seems JavaFX uses the Observer/Observable pattern for all its internal objects, well we can do the same to bind with JavaObjects.<br />
To get myself familiar with JavaFX i decided to write a photoviewer/editor. This application has a java backend with in particular a Photo class which contains all the information of a certain picture, filename, path, tags, exif information etcetera</p>
<p>To get changes in the Java class to appear in the gui I create a PhotoAdapter javafx class that extends Observer and implemented the properties I need in my GUI.</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> PhotoAdapter <span style="color: #000000; font-weight: bold;">extends</span> <span style="color: #003399;">Observer</span> <span style="color: #009900;">&#123;</span>
    public<span style="color: #339933;">-</span>read var filename<span style="color: #339933;">:</span> <span style="color: #003399;">String</span><span style="color: #339933;">;</span>
    public<span style="color: #339933;">-</span>read var tags<span style="color: #339933;">:</span> <span style="color: #003399;">String</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
    public<span style="color: #339933;">-</span>read var exif<span style="color: #339933;">:</span> <span style="color: #003399;">String</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
    public<span style="color: #339933;">-</span>init var photo<span style="color: #339933;">:</span> Photo
         on replace <span style="color: #009900;">&#123;</span>
            photo.<span style="color: #006633;">addObserver</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            filename<span style="color: #339933;">=</span>photo.<span style="color: #006633;">getFilename</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            tags <span style="color: #339933;">=</span> photo.<span style="color: #006633;">getTags</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            exif <span style="color: #339933;">=</span> photo.<span style="color: #006633;">getExif</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
         <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
    override function update<span style="color: #009900;">&#40;</span>observable<span style="color: #339933;">:</span> <span style="color: #003399;">Observable</span>, arg<span style="color: #339933;">:</span> <span style="color: #003399;">Object</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        filename <span style="color: #339933;">=</span> photo.<span style="color: #006633;">getFilename</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        tags <span style="color: #339933;">=</span> photo.<span style="color: #006633;">getTags</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        exif <span style="color: #339933;">=</span> photo.<span style="color: #006633;">getExif</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span></pre></div></div>

<p>after that I had my existing Java Photo class extend Observable and in every method that made changes I added the methods setChanged() and NotifyObservers() to inform the Observers about the change</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> Photo <span style="color: #000000; font-weight: bold;">extends</span> <span style="color: #003399;">Observable</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">private</span> Map<span style="color: #339933;">&lt;</span>String, String<span style="color: #339933;">&gt;</span> exifInformation<span style="color: #339933;">;</span> 
    ....
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> setExifInformation<span style="color: #009900;">&#40;</span><span style="color: #003399;">Map</span> exifInfo<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">this</span>.<span style="color: #006633;">exifInformation</span> <span style="color: #339933;">=</span> exifInfo<span style="color: #339933;">;</span>
        setChanged<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        notifyObservers<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>in my main javafx class I can then use it as follows</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;">    var photoAdapter <span style="color: #339933;">=</span> PhotoAdapter <span style="color: #009900;">&#123;</span>
        photo <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">new</span> Photo<span style="color: #009900;">&#40;</span>startImage<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>and use to fill a ListView swing object with for instance the tags:</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;">    <span style="color: #003399;">ListView</span> <span style="color: #009900;">&#123;</span>
        items<span style="color: #339933;">:</span>     bind photoAdapter.<span style="color: #006633;">tags</span><span style="color: #339933;">;</span>
        width<span style="color: #339933;">:</span>     <span style="color: #cc66cc;">200</span><span style="color: #339933;">;</span>
        height<span style="color: #339933;">:</span>    <span style="color: #cc66cc;">300</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span></pre></div></div>

<p>et viola, thats all that there is to it</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.addictivesoftware.net/2009/11/data-binding-in-javafx/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
