====== AsWing JFrame  ======

{{tag>aswing tutorial}}

This tutorial will show you how to use the JFrame component using the GridLayout. Lets start
by creating a class, I`ll call mine MyApp.as , which extends JFrame and create our main
method and constructor. Then let us create nine JButton instances. For this tutorial we are
going to create a simple tic tac toe game layout.

<code actionscript >

import org.aswing.*;
import org.aswing.utils.Delegate;
import org.aswing.geom.Dimension;

class MyApp extends JFrame{

  private var j00:JButton;
  private var j01:JButton;
  private var j02:JButton;
  private var j10:JButton;
  private var j11:JButton;
  private var j12:JButton;
  private var j20:JButton;
  private var j21:JButton;
  private var j22:JButton;

  public function MyApp(Void){
    super(_root, true);
  }

  public static function main(Void):Void{
    var myWindow1 : MyApp = new MyApp ();
    myWindow1.setLocation (50, 50);
    myWindow1.setSize (300, 300);
    myWindow1.show ();
  }
}

</code>

Next we instantiate all our JButton instances and add them to the JFrame component. We
use the GridLayout to place our instances equally spaced and aligned from each other. The
GridLayout constructor takes in the first parameter as the number of rows , then the number
of columns , the horizontal gap between each component and the vertical gap between each
component. We create a common function called createIcon for all the JButton.ON_PRESS
events and then add all the JButton instances to the JFrame.


<code actionscript >

j00= new JButton();
j01= new JButton();
j02= new JButton();
j10= new JButton();
j11= new JButton();
j12= new JButton();
j20= new JButton();
j21= new JButton();
j22= new JButton();
j00.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
j01.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
j02.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
j10.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
j11.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
j12.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
j20.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
j21.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
j22.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
getContentPane().setLayout(new GridLayout(3,3,3,3));
getContentPane().append(j00);
getContentPane().append(j01);
getContentPane().append(j02);
getContentPane().append(j10);
getContentPane().append(j11);
getContentPane().append(j12);
getContentPane().append(j20);
getContentPane().append(j21);
getContentPane().append(j22);

</code>


In our createIcon method we will add a different colored Circle icon for each player. The
Event object passed to our createIcon gives us information about which component fired
what event using the getSource() and getType() methods. Let us create a boolean value
to determine which players turn it is and depending on the result add the appropriate icon
to the button instance.


<code actionscript>

private function createIcon(eventObj:Event):Void{
  var obj:JButton=JButton(eventObj.getSource());
  var icon:Circle;
  if(nextPlayer){
    icon= new Circle(new ASColor(0x0000ff,100), new Dimension(50,50));
    nextPlayer=false;
  }
  else{
    icon= new Circle(new ASColor(0xff0000,100), new Dimension(50,50));
    nextPlayer=true;
  }
  obj.setIcon(icon);
  obj.setEnabled(false);
}

</code>

After creating the icon we add to our JButton instance using the setIcon method and then
disable the button instance by using the setEnabled method. If you do not know how to create
your own custom icon please read the CustomIcon tutorial for help. Below is a screenshot of
the application after clicking on the buttons.


{{ :screenshot1.jpg|alt }}

As you can see we can drag the window anywhere on the stage. We can resize the JFrame and
all the JButton instances resize automatically for you. You can maximize , minimize or close the
window using the window buttons on the top right corner. Let us know customize our JFrame
component by not letting the user drag it around on the stage. We can do so with the following
line of code.

<code actionscript>
myWindow1.setDragable(false)
</code>

Now we cannot drag the component. Let us make sure that the user cannot close the window
and cannot resize the window.

<code actionscript>
myWindow1.setClosable(false);
myWindow1.setResizable(false);
</code>

There are many other methods which help you create customize your JFrame but lets take a
look at the setModal method. Basically what this method does is that it sets the modal property
of the component to true or false. If modal is true then it will not allow other windows to be
active at the same time. Lets see this my creating another instance of MyApp and set both
instances modal value to be false;

<code actionscript>
myWindow1.setModal(false);
myWindow1.show ();
var myWindow2 : MyApp = new MyApp ();
myWindow2.setLocation (350, 50);
myWindow2.setSize (150, 150);
myWindow2.setModal(false);
myWindow2.show ()
</code>


In the above example both frames are active and we can select both. Now lets set the modal
property for our second window to be true.

<code actionscript>
myWindow2.setModal(true);
</code> 


As we can see now that only the second window is selectable and the first one is greyed out.
We can also find out which is the current active window by using the isActive() method. Finally
lets give our windows a title by using the setTitle method.

<code actionscript>
myWindow1.setTitle(”Window 1”);
myWindow2.setTitle(”Window 2”);
</code> 

{{ :jframe.swf?550x400 }}

Circle.as
--------------------------
<code actionscript>
/**
 * @author firdosh
 */
import org.aswing.*;
import org.aswing.geom.*;
import 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{		
	}	
}

</code> 



MyApp.as
--------------------------
<code actionscript>

/**
 * @author firdosh
 */ 
import org.aswing.*;
import org.aswing.utils.Delegate;
import org.aswing.geom.Dimension;
 
class MyApp extends  JFrame{
	
	private var j00:JButton;
	private var j01:JButton;
	private var j02:JButton;
	
	private var j10:JButton;
	private var j11:JButton;
	private var j12:JButton;
	
	private var j20:JButton;
	private var j21:JButton;
	private var j22:JButton;
	
	private var nextPlayer:Boolean;
	
	
	public function MyApp(Void){
		super(_root, true);
		nextPlayer=true;
		
		
		j00=new JButton();
		j01=new JButton();
		j02=new JButton();
		
		j10=new JButton();
		j11=new JButton();
		j12=new JButton();
		
		j20=new JButton();
		j21=new JButton();
		j22=new JButton();
		
		j00.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
		j01.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
		j02.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
		
		j10.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
		j11.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
		j12.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
		
		j20.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
		j21.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
		j22.addEventListener(JButton.ON_PRESS,Delegate.create(this,createIcon));
		
		
		getContentPane().setLayout(new GridLayout(3,3,3,3));			
		getContentPane().append(j00);
		getContentPane().append(j01);
		getContentPane().append(j02);
		getContentPane().append(j10);
		getContentPane().append(j11);
		getContentPane().append(j12);
		getContentPane().append(j20);
		getContentPane().append(j21);
		getContentPane().append(j22);		
	}
	
	private function createIcon(eventObj:Event):Void{
		var obj:JButton=JButton(eventObj.getSource());
		var icon:Circle;
		if(nextPlayer){
			icon= new Circle(ASColor.BLUE, new Dimension(50,50));						
			nextPlayer=false;	
		}
		else{
			icon= new Circle(ASColor.RED, new Dimension(50,50));			
			nextPlayer=true;			
		}
		obj.setIcon(icon);
		obj.setEnabled(false);
		
	}
	
	
	public static function main(Void):Void{		
		var myWindow1 : MyApp = new MyApp ();
		myWindow1.setLocation (50, 50);
		myWindow1.setSize (300, 300);
		myWindow1.setDragable(false);
		myWindow1.setClosable(false);
		myWindow1.setResizable(false);
		myWindow1.setModal(false);
		myWindow1.setTitle("Window 1");
		myWindow1.show ();	
		
		var myWindow2 : MyApp = new MyApp ();
		myWindow2.setLocation (350, 50);
		myWindow2.setSize (140, 140);
		myWindow2.setModal(true);
		myWindow2.setTitle("Window 2");		
		myWindow2.show ();	
	}
	
}
</code>

Hope this tutorial gave you a better understanding of the JFrame component.