Jon Lipsky’s Weblog

I mentioned it 2 months ago, but I’ve got a couple of other components laying around that I’ll release the source code to once I get the time to add copyright notices, comment/cleanup the code and create samples for. Here’s a list (and some screenshots) of the controls that I’ll be releasing next:

1) An image panel with features such as zoom and rotate. In the screenshot below, I’ve hooked up the image panel to a few spinner controls to test the functionality of the panel:

2) An extended version of the image panel, which is really a drop-in image viewer control that adds a standard toolbar exposing additional features such as zooming in on a region, dragging (when it larger than the viewport), rotating, etc:

3) A datamapper control that allows you to visually build a Map by using drag and drop to map keys to values. The screenshot below is from a tool I wrote a few years ago with the control to take data from an input source (in this case a delimited text file) and map it to a java object:

As the datamapper control is a little more involved, I want to make sure I have good samples created as well as well documented code before I release it. I think it will be nice example of how to use multiple swing controls to create a compound control.

Stay tuned! (I’ll try to be quicker about posting these than in the past. ) More news by category Topic -: Buy phentermine saturday delivery ohio Tramadol hydrochloride tablets Picture of xanax pills Free shipping cheap phentermine Buying phentermine without prescription Safety of phentermine Pyridium Generic viagra cialis Cialis generic india Pink oval pill 17 xanax identification Buy free phentermine shipping Best price for generic viagra Information about street drugs or xanax bars Ordering viagra Snorting phentermine Hydrocodone overdose Lithium Amiodarone Get online viagra Order viagra prescription Order xanax paying cod Cheap phentermine free shipping Imiquimod Tramadol next day Linkdomain buy online viagra info domain buy onlin Pfizer viagra sperm Vidarabine Cheapest viagra price Prevacid Viagra cialis levitra comparison Dutasteride Lisinopril Thiotepa Female spray viagra Black market phentermine Betamethasone Cialis forums What does xanax look like Loss phentermine story success weight Order xanax overnight Viagra alternative uk Diet online phentermine pill Order xanax cod Mecamylamine Eulexin Cheap hydrocodone Buy cheapest viagra Viagra xenical Phentermine with no prior prescription Xanax in urine Macrodantin Cheap phentermine with online consultation Epivir Buy phentermine epharmacist Ditropan Woman use viagra Cialis erectile dysfunction Xanax withdrawl message boards Viagra online store Atorvastatin Generic ambien Is phentermine addictive Next day delivery on phentermine Buy online viagra Ethanol Natural phentermine Avandamet Xanax long term use Diet page phentermine pill yellow 5 cheap Cheapest secure delivery cialis uk Information medical phentermine Cialis experience Phentermine no perscription Compare ionamin phentermine Viagra cialis levivia dose comparison Noroxin Effects of viagra on women Buy cheap cialis Viagra shelf life Hydroxyurea Phentermine discount no prescription Buy cheap online viagra Dog xanax Online cialis Viagra class action Viagra price Phentermine without prescription and energy pill Hydrocodone cod only Nicoumalone Cheapest viagra Cheap ambien Vicodin without prescription Phentermine prescription online Phentermine snorting Mirtazapine Quazepam Isradipine Buy generic viagra online Xanax look alike Moxifloxacin Viagra experiences Piroxicam Nicorette Free try viagra Sotalol Cash on delivery shipping of phentermine How do i stop taking phentermine Xanax prescriptions Cheapest phentermine 90 day order Niacinamide Phentermine weight loss Phentermine

Well, it only took a month and a half longer than I thought, but I’ve finally had the time to post the source code and an example of how to use my iTunes-like tree table control. If you are already using the JXTreeTable from the swingx project, then this should be a drop in replacement.

Here is a screenshot of the sample application:

It demonstrates how to use JXTreeTable to create a treetable displaying the component hiearchy of a running Swing application. It should be a good starting point for anyone wanting to use JXTreeTable, as well as how to use my look and feel with it. Here are the download links:

• Compiled version of my TreeTable (and the rest of my iTunes-like components/delegates)
• Source code version of my TreeTable (and the rest of my iTunes-like components/delegates)
• Source code for the sample application

Note: As usual the source code for this is released under the Apache license.

I’m working on cleaning up the code a bit for the new components and UI delegates, so I thought I would post a screenshot of one of my personal applications that uses them. (It’s a small tool to manage metadata about Java classes).

In the screenshot below, you can see an example of the new iTunes-like JXTreeTable implementation, as well as an MacOSX-like toolbar UI delegate.

The UI delegate for the toolbar was simple to create wheras customizing the look and feel of JXTreeTable was a little trickier. I didn’t want to rewrite JXTreeTable, only subclass it, which made creating this control a little harder than normal. I think I tried 3 or 4 approaches before I finally found one that worked.

Wow! It’s been around 5 months since I lasted posted!

Mostly, I’ve been so busy with work that I haven’t had time for my pet projects. However, I’ve been able to do a little GUI work the past few days, so I’ll be adding some new posts here shortly. I’ve created a version of the “swingx” JXTreeTable control that looks like an iTunes, as well as a new JToolbar delegate. Both should make it up on the blog quickly.

I’ve also decided to share the source code of a custom control that will show people what’s involved in something more complex that the standard buttons, toolbars, etc… It’s going to take a while to package it up with examples and documenation, so it may be a week or so before that becomes available.

Look for some posts later this week. Also, I’ve been thinking of packaging up all of my custom controls into a real deliverable… Anyone interested in something like that?

Instead of just posting my source code that shows how to simulate the iTunes user interface, I decided to write a few more of my "tutorial" style posts about how I simulated the look. The first thing that I'll demonstrate is how to create the "info panel" that appears at the top of the iTunes window:

In order to implement this, I decided to implement a JPanel UI delegate as opposed to subclassing JPanel iteself. The first thing we obviously need to do is create a new java class that extends BasicPanelUI.

Next, the default behavior for a JPanel is to have it be opaque, which means we wouldn't be able to see any panels drawn behind it (such as a brushed metal or gradient panel). In order to ensure any JPanel using ourUI delegate would not be opaque we need to override the installDefaults method to have it set the panel as not opaque:

Now that we have that small detail out of the way, we can begin the implement the code to paint the panel. We do this by overriding the paint method. The first thing we will need to do is take the insets into consideration and calculate the x, y, width and height of the panel. Additionally, since this panel has rounded corners, we need to consider the size of the corner arc:

Now that we know the position and size of the panel, we can begin to draw it. In order to do this, we are going to create a rounded rectangle clipping area, and then use fillRect to draw the two different background colors.

At this point, we have enough implemented where we can write and run a test application to view the panel. In my test application, I added a gradient panel behind the info panel to simulate how it would look in an application that looked like iTunes. Here is what our panel looks like:

Now that the background is done, we need to draw the border and the shadows of the panel. The first thing will do is reset the clipping region to it's original value, then we will create a gradient paint and rounded rectangle border:

If we run our test application now, this is what we will see:

Obviously, with just that border, the panel doesn't look very good, so we need to draw a few more highlights. The next thing we will do, is set a new clipping area so we don't draw a shadow at the bottom, and then we will draw a shadow with a transparent version of the border color:

If we run our test application now, this is what we will see:

This looks alot closer to the desired look we are trying to get, but if you look at the original version in iTunes, there is a slight shadow at the bottom of the panel. In order to create this, we will use an even more transparent version of the border color than we used before, and then draw another rounded rectangle:

If we run our test application now, this is what we will see:

As you see, this is pretty close to the panel that is used in iTunes, and really wasn't too hard to create.

As with all of my examples, I'm releasing the source code under the Apache license so that you can use this in your own applications. Here are the links to download the source code:

• Download the source code to the UI delegate
• Download the source code to the test application
• Download the source code to the gradient panel used by the test application

I was browsing through JavaBlogs yesterday and I stumbled upon this post from Adam Walker where he was adding a Tiger/iTunes 5 look to his application. After seeing this I was inspired (and had some free time for once) to try to update my iTunes in Swing demo to look like the newly released iTunes 5.

I have a little more work to do, but here is what I have so far:

I'll clean up the code, add copyright notices and get it posted this weekend for whoever's curious. In the process, I've also fixed a few bugs and made a few improvements to some of the UI delegates, so when I post the source code, it'll include the previous (brushed-metal) example as well.

I want to apologize for the delay in getting this posted as I had planned on posting this a few weeks ago. Unfortunately, I got swamped with real work.

You can download the source code for the sample here. I've included an ANT build script to compile and run the application. Simply execute the "run" target to compile and start it.

Let me know if there are any questions!

Note: You will need Java 5 to run and compile this example.

Last night I had a chance to (finally) implement 2 of 3 missing UI items from my Swing based iTunes clone. I implemented a UI delegate for the buttons at the bottom of the window, as well as implementing the delegate for the volume slider. I still haven't implemented anything for the scroll bars, and I have a laundry list of things that I'd like to improve, but I now think it is "good enough" to show.

I took the time to create a WebStartable version of the example in case anyone wants to see what it looks like on their machine. You'll need to have Java 5 installed in order to run it. Here is the link:

• Run the example with Webstart

If you don't want to run the example to see what it looks like, here is the most recent screenshot:

As I haven't had time to write tutorials on how to create something like this as fast as I would have liked, I am thinking about releasing the source code and then explaining it later. Any thoughts?

As the first entry about how to create a brushed metal application with Swing, I am going to show how to create a brushed metal texture programatically.

Note: You probably won't want to use this code in a real application as it requires alot a memory (and time) to draw a large panel. In my next post, I'll provide an example image that can be tiled to create the same effect much more efficiently.

In order to create this, the first thing we are going to do is create a new class JPanel delegate and override the paint() method:

public class BrushedMetalPanelUI2 extends BasicPanelUI
{
	public void paint(Graphics g, JComponent c)
	{
	
	}
}

Next, I am going to create a test application to create a JPanel that uses our new UI delegate and shows it to us:

public class TestBrushedPanelUI2
{
	public static void main(String[] args)
	{
	try
		{
			UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
		}
		catch (Exception exc)
		{
			// Do nothing...
		}
	
		JFrame vFrame = new JFrame(\"Brushed Metal Example\");
		vFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		vFrame.setSize(300, 300);
		JPanel vPanel = new JPanel();
		vPanel.setUI(new BrushedMetalPanelUI2());
	
		vFrame.getContentPane().add(vPanel);
	
		vFrame.show();
	}
}

Now that we have the basics in place, we can start writing the code to create the brushed metal background. The first thing we need to do is simulate some "noise". We can do this by randomly generating colors (within a certain range) for each pixel in our image. In order to do this quickly, we are going to work directly with a Raster as opposed through the Graphics API.

	public void paint(Graphics g, JComponent c)
	{
		Dimension vSize = c.getSize();
	
		int vWidth = vSize.width;
		int vHeight = vSize.height;
	
		Image vImage = new BufferedImage(vWidth, vHeight, BufferedImage.TYPE_INT_RGB);
		WritableRaster vRaster = ((BufferedImage)vImage).getRaster();
	
		int[] vColor = new int[3];
		Random vRandom = new Random(System.currentTimeMillis());
	
		for (int x = 0; x < vWidth; x++)
		{
			for (int y = 0; y < vHeight; y++)
			{
				vColor[0] = 160 + (int) (vRandom.nextFloat() * 90);
				vColor[1] = vColor[0];
				vColor[2] = vColor[0];
	
				vRaster.setPixel(x, y, vColor);
			}
		}
	
		Graphics2D g2d = (Graphics2D)g;
		g2d.drawImage(vImage, 0, 0, null);
	}

If we run our application now, it will give us something like this:

Next, in order to get that brushed metal look, we need to apply a motion blur to the image we just created. For motion blurs, I've always used the image filter that Jerry Huxtable includes with his (free to use) Java Image Processing Filters examples.

In order to use the filter, you need to decide what type of motion blur you want, what the angle you want, and how many repetitions you want (how far you want to blur) . In our case, we want a linear motion blur, and after playing around, I decided on the factor of 1.5666666666666f for the angle and 50 for the repetitions. Here is the updated code after we have applied the filter:

	private static final float ANGLE = 1.5666666666666f;
	private static final int REPETITIONS = 50;
	
	public void paint(Graphics g, JComponent c)
	{
		Dimension vSize = c.getSize();
	
		int vWidth = vSize.width;
		int vHeight = vSize.height;
	
		Image vImage = new BufferedImage(vWidth, vHeight, BufferedImage.TYPE_INT_RGB);
		WritableRaster vRaster = ((BufferedImage)vImage).getRaster();
	
		int[] vColor = new int[3];
		Random vRandom = new Random(System.currentTimeMillis());
	
		for (int x = 0; x < vWidth; x++)
		{
			for (int y = 0; y < vHeight; y++)
			{
				vColor[0] = 160 + (int) (vRandom.nextFloat() * 90);
				vColor[1] = vColor[0];
				vColor[2] = vColor[0];
	
				vRaster.setPixel(x, y, vColor);
			}
		}
	
		MotionBlurFilter vFilter = new MotionBlurFilter();
		vFilter.setAngle(ANGLE);
		vFilter.setRepetitions(REPETITIONS);
		vFilter.setType(MotionBlurFilter.LINEAR);
	
		ImageProducer vProducer = new FilteredImageSource(vImage.getSource(),vFilter);
		vImage = Toolkit.getDefaultToolkit().createImage(vProducer);
	
		Graphics2D g2d = (Graphics2D)g;
		g2d.drawImage(vImage, 0, 0, null);
	}

If we run this now, we will see the following:

You will notice that on the right hand side of the image, the texture is not so nice. That is because there are not enough pixels there to continue the bluring effect. This is quite easy to solve, we can just create a wider image than we need, thus the area on the right that is not so nice will be cropped off. Since we are using a factor of 50 for the repetitions (number of pixels), we will just increase the width of the buffered image by that amount:

	public void paint(Graphics g, JComponent c)
	{
		Dimension vSize = c.getSize();
	
		int vWidth = vSize.width + REPETITIONS;
		int vHeight = vSize.height;
	
		Image vImage = new BufferedImage(vWidth, vHeight, BufferedImage.TYPE_INT_RGB);
		WritableRaster vRaster = ((BufferedImage)vImage).getRaster();
	
		int[] vColor = new int[3];
		Random vRandom = new Random(System.currentTimeMillis());
	
		for (int x = 0; x < vWidth; x++)
		{
			for (int y = 0; y < vHeight; y++)
			{
				vColor[0] = 160 + (int) (vRandom.nextFloat() * 90);
				vColor[1] = vColor[0];
				vColor[2] = vColor[0];
	
				vRaster.setPixel(x, y, vColor);
			}
		}
	
		MotionBlurFilter vFilter = new MotionBlurFilter();
		vFilter.setAngle(ANGLE);
		vFilter.setRepetitions(REPETITIONS);
		vFilter.setType(MotionBlurFilter.LINEAR);
	
		ImageProducer vProducer = new FilteredImageSource(vImage.getSource(),vFilter);
		vImage = Toolkit.getDefaultToolkit().createImage(vProducer);
	
		Graphics2D g2d = (Graphics2D)g;
		g2d.drawImage(vImage, 0, 0, null);
	}

Now if we run our test application, we can view our final result:

Like I mentioned earlier, I wouldn't use this UI delegate in a real application as it has serious performance and memory implications. In my next post, we'll create the same effect using a tileable image that I created using the output of this code and Photoshop.

I haven't had much time to work on completing my iTunes-like interface using Swing, but I have made a little bit of progress. The UI delegate for the JTable is almost (but not quite) complete, and I only have 3 more UI delegates to implement from scratch:

• A delegate for the volume slider.
• A replacement for the standard scrollbars
• A delegate for the buttons at the bottom of the iTunes screen

Here is what I've got created so far:

and here is what I'm targetting:

Hopefully this weekend I'll be able to finish things up so I can start writing tutorials about how to create a user interface like this.

Also, for those of you that view this site with Internet Explorer, I think I've fixed all of the formatting problems. If anyone notices any other problems, let me know so that I can fix them.