<?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>JavaWords &#187; Swing</title>
	<atom:link href="http://javawords.com/category/ui/swing/feed/" rel="self" type="application/rss+xml" />
	<link>http://javawords.com</link>
	<description>A blog about Java Programming Language. Tips and solutions for common problems, tools and resources, tutorials and guides. A window to share my Java experience with others.</description>
	<lastBuildDate>Tue, 17 Jan 2012 15:53:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Fade on change Label</title>
		<link>http://javawords.com/2007/08/13/fade-on-change-label/</link>
		<comments>http://javawords.com/2007/08/13/fade-on-change-label/#comments</comments>
		<pubDate>Mon, 13 Aug 2007 14:14:26 +0000</pubDate>
		<dc:creator>Christos Fragoulides</dc:creator>
				<category><![CDATA[Swing]]></category>
		<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://javawords.com/2007/08/13/fade-on-change-label/</guid>
		<description><![CDATA[Here is the concept: We want to extend the JLabel swing component and make it perform a simple fade effect each time it&#8217;s value changes. Using this kind of label can be helpful to build a user interface for an application having the need to notify the user for important state changes. The following applet [...]]]></description>
			<content:encoded><![CDATA[<p>Here is the concept: We want to extend the <strong>JLabel swing component</strong> and make it perform a simple <strong>fade effect</strong> each time it&#8217;s value changes. Using this kind of label can be helpful to build a user interface for an application having the need to notify the user for important state changes.<br />
The following applet demonstrates the component:</p>
<div align="center"><applet code="gr.xfrag.swing.FadeOnChangeLabelApplet.class" archive="/wp-content/uploads/applets/FadeOnChangeLabel/fadeonchange.jar" width="250" height="80"></applet></div>
<p>A good example is an application which  continuously tracks a number of important data and represents values on the screen, each one on a separate label. It will be easier for the user to notice a change if the labels perform some kind of animation in response to an update of their value.</p>
<p>It is obvious that to make the above happen, we must &#8220;inject&#8221; animation code inside JLabel. The task is to figure out a way to start an animation thread whenever the text value of the label is updated. Well you can say this one is easy, because there&#8217;s the <strong><em>setText()</em></strong> method which we can override like this:</p>
<p><code>public void setText(String text){<br />
&nbsp;&nbsp;super.setText(text);<br />
&nbsp;&nbsp;if (!text.equals(lastValue)){<br />
&nbsp;&nbsp;&nbsp;&nbsp;lastValue = text;<br />
&nbsp;&nbsp;&nbsp;&nbsp;animate();<br />
&nbsp;&nbsp;}<br />
}<br />
</code></p>
<p>Alright, now that we have set up a mechanism to start the animation, we have to implement the animation procedure itself. The question is: What do we have to put inside <em>animate()</em> method?<br />
When I was trying to find an answer to the above question, I was sure for one thing only: There must be a thread to carry on the animation, witch I had to initiate during the call of <em>animate()</em> method. So I decided to make the class implement the <em>Runnable</em> Interface, and put my core animation code inside the <em>run()</em> method. I ended up with the following body for <em>animate()</em>:</p>
<p><code>private void animate() {<br />
// Only animate if there&#039;s not another animation in progress<br />
// and this Label is actually added to a parent Container, i.e.<br />
// if it is visible.<br />
&nbsp;&nbsp;if(!animating &amp;&amp; this.getParent()!=null){<br />
&nbsp;&nbsp;&nbsp;&nbsp;Thread t = new Thread(this);<br />
&nbsp;&nbsp;&nbsp;&nbsp;t.start();<br />
&nbsp;&nbsp;}<br />
}<br />
</code></p>
<p>Now we have to deal with the animation procedure, which involves the manipulation of the <strong>paintComponent()</strong> method. But this is the most tricky part: Simply having a loop repeating a call to <em>paintComponent()</em> is not a solution, because it requires a <em>Graphics</em> object reference to the screen area where the label resides. This object is normally passed to the method by the Event Model and you actually don&#8217;t have control over the last. The right way to make <em>paintComponent()</em> get called with an appropriate <em>Graphics</em> object is to call the <em>repaint()</em> method of the <em>Component</em>. This will add a request to the event queue and eventually will lead to a call of <em>paintComponent()</em>.<span id="more-10"></span></p>
<p>Ok, so we can have an animation loop inside <em>run()</em> which calls <em>repaint()</em> at the end of every animation frame. Unfortunately, this approach will not work. Subsequent calls to <em>repaint()</em> with sort intervals between them will get stacked in the event queue, but will be treated as one request. Let&#8217;s say we make 10 calls of repaint() with an interval of 200 milliseconds. The most probable result is to get only one call of <em>paintComponent()</em> because it&#8217;s up to the Event Model to decide <strong>when</strong> to dispatch the event.</p>
<p>Here is the workaround I figured out:<br />
First, override <em>paintComponent()</em> and add the necessary code to perform the drawing for every frame of the fade effect. Also add a <em>paintCalled</em> flag to be informed about the method call. </p>
<p><code>public void paintComponent(Graphics g){<br />
&nbsp;&nbsp;// Let the Label perform its normal painting.<br />
&nbsp;&nbsp;super.paintComponent(g);<br />
&nbsp;&nbsp;// Now make the fade effect.<br />
&nbsp;&nbsp;if(fade != 0){<br />
&nbsp;&nbsp;&nbsp;&nbsp;Insets i = this.getInsets();<br />
&nbsp;&nbsp;&nbsp;&nbsp;g.setColor(fadeColor);<br />
&nbsp;&nbsp;&nbsp;&nbsp;g.fillRect(i.left, i.top, <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getWidth() - i.left - i.right, <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getHeight() - i.top - i.bottom);<br />
&nbsp;&nbsp;}<br />
&nbsp;&nbsp;// paintComponent() called, we can continue to the next<br />
&nbsp;&nbsp;// animation frame.<br />
&nbsp;&nbsp;paintCalled = true;<br />
}<br />
</code></p>
<p>Second, inside the animation loop, wait for <em>paintComponent()</em> to be called before proceeding to the next animation frame by checking the value of <em>paintCalled</em> flag. A sleep interval of 100 milliseconds proved to be satisfying.</p>
<p><code>public void run() {<br />
&nbsp;&nbsp;animating = true;<br />
&nbsp;&nbsp;fade = initFade;<br />
&nbsp;&nbsp;try {<br />
&nbsp;&nbsp;&nbsp;&nbsp;while (fade!=0) { //The animation stops when fade reaches 0.<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;... // Animation control code.<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;repaint(); <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Now wait until paintComponent() gets called.<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while(!paintCalled &amp;&amp; fade!=0){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Thread.sleep(100);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;animating = false;<br />
&nbsp;&nbsp;}<br />
&nbsp;&nbsp;catch (Exception e) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;...<br />
&nbsp;&nbsp;}<br />
}</code></p>
<p>And that&#8217;s all. It works like a charm!<br />
You can find the full source code of FadeOnChangeLabel here: <strong><a href='http://javawords.com/wp-content/uploads/2007/08/fadeonchangelabel.java' title='FadeOnChangeLabel source code.'>FadeOnChangeLabel source code</a></strong>. The full class has a method to set fade options(<strong>setParams()</strong>) and there&#8217;s also an additional method named <strong>setRepaintContainer()</strong> that can be used in circumstances where the JLabel doesn&#8217;t control it&#8217;s painting, like when you make custom Renderers for list or tree items. Call <strong>setRepaintContainer()</strong> on the label and pass the Container object that controls it&#8217;s painting.<br />
I&#8217;ve fully documented the file using comments and hope it would be easy for everyone to understand how it works.</p>
<p>A couple of links to broaden your knowledge on the field:</p>
<ol>
<li><a href="http://java.sun.com/products/jfc/tsc/articles/painting/index.html" target="_blank" title="Painting in AWT and Swing">Painting in AWT and Swing</a></li>
<li><a href="http://java.sun.com/docs/books/tutorial/uiswing/components/" target="_blank" title="Using Swing Components">Using Swing Components</a></li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://javawords.com/2007/08/13/fade-on-change-label/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

