AsWing Custom Icon with JButton

This tutorial will show you to create your own custom Icon for using it in a JButton component. Our custom icon must implement the org.aswing.Icon interface. Lets take a look at the Icon interface class.

interface org.aswing.Icon
{
	/**
	* Return the icon's width.
	*/
	public function getIconWidth () : Number;
	/**
	* Return the icon's height.
	*/
	public function getIconHeight () : Number;
	/**
	* Draw the icon at the specified component's specified location with the graphics.
	* If this if the first time to paint on the specified component, there
	* may need some install operation, for example create MC on the
	* specified mc if needed.
	* @param com component for which this border is being painted
	* @param g the paint graphics
	* @param x the x corrdinate of the icon(top left of bounds)
	* @param y the y corrdinate of the icon(top left of bounds)
	* @see #uninstallIcon
	*/
	public function paintIcon (com : Component, g : Graphics, x : Number, y : Number) : Void;
	/**
	* Remove things in the icon object related to the component.
	* For example remove the MCs created at the first paint time.
	* <p>
	* There is not installIcon method, so you must install icon related things
	* at the first time of paintIcon, for example attach a MC if needed.
	* @see #paintIcon
	*/
	public function uninstallIcon (com : Component) : Void;
}

Lets start by creating a new class which implements the Icon interface. In my case I have called my class Circle.as because thats exactly what the icon is going to be , a circle. Now lets create all the methods that we have to implement.

/**
* @author firdosh
*/
import org.aswing. *;
import org.aswing.geom. *;
import org.aswing.graphices. *;
class Circle implements Icon 
{
	public function paintIcon (com : Component, g : Graphics, x : Number, y : Number) : Void
	{
	}
	public function getIconWidth () : Number
	{
	}
	public function getIconHeight () : Number
	{
	}
	public function uninstallIcon (com : Component) : Void
	{
	}
}

Next we create our constructor which will accept two parameters an ASColor object and a Dimension onject. An ASColor stores the color value and the alpha value and the Dimension object stores the width and the height. Both these classes if you take a look at them are pretty self explainatory. We create two private member variables to store our size and color.

class Circle implements Icon 
{
	private var fillColor : ASColor;
	private var size : Dimension;
	public function Circle (color : ASColor, size : Dimension)
	{
		fillColor = color;
		this.size = size;
	}
	...........
 

We now complete the code for our getIconWidth() and getIconHeight methods which simply return the width and the height respectively. The uninstallIcon method we leave it empty for now . We will discuss this method in the MCIcon tutorial where it needs to be implemented. For now we can just leave it empty.

public function getIconWidth () : Number
{
	return size.width;
}
public function getIconHeight () : Number
{
	return size.height;
}
public function uninstallIcon (com : Component) : Void
{
}

Now for our main method where we actually do all the drawing, the paintIcon method. The fillEllipse method takes a Brush object ,the x and y top left co ordinates and the width and height as parameters. The Graphics class is an extremely usefull class which aids in drawing various shapes. There are a few Brush classes which are used for drawing lines, solid colours and gradients

public function paintIcon (com : Component, g : Graphics, x : Number, y : Number) : Void
{
	var w : Number = getIconWidth ();
	var h : Number = getIconHeight ();
	var cx : Number = x + w / 2;
	var cy : Number = y + h / 2;
	var xr : Number = w / 2;
	var yr : Number = h / 2;
	var brush : Brush = new SolidBrush (fillColor);
	g.fillEllipse (brush, cx - xr, cy - yr, xr * 2, yr * 2);
}

We have now completed creating our own custom Icon. Now lets add our custom Icon to a JButton. Lets create another class called MyCustomButton.as. Lets add our main method and lets create a JButton instance to display our Icon

import org.aswing.*;
import org.aswing.geom.*;
class MyCustomButton extends JWindow{
	private var jbutton:JButton;
	public function MyCustomButton (Void){
		super(_root, true);
		var icon:Circle=new Circle(new ASColor(0xff0000,100),new Dimension(10,10));
		jbutton= new JButton(”Test”,icon);
		getContentPane().append(jbutton,BorderLayout.NORTH);
	}
	public static function main(Void):Void{
		var myWindow : MyCustomButton = new MyCustomButton ();
		myWindow.setLocation (50, 50);
		myWindow.setSize (300, 300);
		myWindow.show ();
	}
}

In the above code we extend our class to JWindow and add the button to JWindow in the North location. Please read the JButton + BorderLayout tutorial if you do understand the above code. Now when we compile and run our example we see our custom Icon ( in our example its a red circle of radius 10) in the jbutton instance.

Now let us try understanding the difference between the setHorizontalAlignment method and the setHorizontalTextPosition method. The setHorizontalTextPosition sets the horizontal position of the text relative to the icon and the setHorizontalAlignment sets the horizontal alignment of the icon and text. First let us see test the setHorizontalTextPosition method. We align the text to the left of icon with this line of code. We add it right after we instantiate the jbutton instance

jbutton.setHorizontalTextPosition(ASWingConstants.LEFT);

ASWingConstants.RIGHT Alignment

ASWingConstants.LEFT Alignment

As you can see from the above screenshots the text is now left aligned relative to the icon Now lets align the text and icon relative to the button. Lets align them to the right with the following line of code.

jbutton.setHorizontalAlignment(ASWingConstants.RIGHT);

ASWingConstants.RIGHT Alignment

Now we have the text and the icon aligned to the right of the button. Now let us try adjusting the gap / distance between the text and icon.

jbutton.setIconTextGap(25);

You can see that the distance between the icon and the text has increased. Below is the full source code for both files. Hope this tutorial was beneficial to you.

Circle.as

---

 /**
* @author firdosh
*/
import org.aswing. *;
import org.aswing.geom. *;
imporimport org.aswing.graphices. *;
class Circle implements Icon 
{
	private var fillColor : ASColor;
	private var size : Dimension;
	public function Circle (color : ASColor, size : Dimension)
	{
		fillColor = color;
		this.size = size;
	}
	public function paintIcon (com : Component, g : Graphics, x : Number, y : Number) : Void
	{
		var w : Number = getIconWidth ();
		var h : Number = getIconHeight ();
		var cx : Number = x + w / 2;
		var cy : Number = y + h / 2;
		var xr : Number = w / 2;
		var yr : Number = h / 2;
		var brush : Brush = new SolidBrush (fillColor);
		g.fillEllipse (brush, cx - xr, cy - yr, xr * 2, yr * 2);
	}
	public function getIconWidth () : Number
	{
		return size.width;
	}
	public function getIconHeight () : Number
	{
		return size.height;
	}
	public function uninstallIcon (com : Component) : Void
	{
	}
}

MyCustomButton .as

---

import org.aswing. *;
import org.aswing.geom. *;
class MyCustomButton extends JWindow
{
	private var jbutton : JButton;
	public function MyCustomButton (Void)
	{
		super (_root, true);
		var icon : Circle = new Circle (new ASColor (0xff0000, 100) , new Dimension (10, 10));
		jbutton = new JButton ("Test", icon);
		jbutton.setHorizontalTextPosition (ASWingConstants.LEFT);
		jbutton.setHorizontalAlignment (ASWingConstants.RIGHT);
		jbutton.setIconTextGap (25);
		getContentPane ().append (jbutton, BorderLayout.NORTH);
	}
	public static function main (Void) : Void
	{
		var myWindow : MyCustomButton = new MyCustomButton ();
		myWindow.setLocation (50, 50);
		myWindow.setSize (300, 300);
		myWindow.show ();
	}
}