Sunday, April 1, 2012

A Simple GUI



Creating a basic GUI in Java using NetBeans IDE 7.1
1.       Creating a Project:
In NetBeans:




Click on Next.




Do as shown and click the Finish button.

1.       Building the Front End
Now we create a Java container using JFrame component and place the container in a new package. Follow the steps:
Right Click on the SulavGUI, in the Projects window as shown below.Click New->Other…










In Categories, select “Swing GUI Forms”




In File Types, select “JFrame Form”.
Now click on Next.




Click on Finish.

See the Palette in the Right of the monitor.  If it is not available, then press [Ctrl]+[Shift]+[8] at once.
From this palette, drag and drop the following items into the container (or form, idk):
i)                    1 Panel
ii)                   3 Label
iii)                 3 TextField
                 iv)           3 Button





At first drag the Panel, and position it as shown. Now place the jLabels1, 2, 3 jTextField1,2,3 and jButton1,2 inside it. Place jButton3 outside the Panel. Make it look like image shown below:






Press the [-] sign in the title bar of the Palette to minimize the Palette window, and click the  [double-square] sign for the Properties shown by the 2 blue arrows to restore it or make it visible.
Now click on jLabel1 in the GUI Design Window,





Now in the text field in the Properties window, change jLabel1 to Number 1. Similarly change the text for jLabel2, jLabel3 to Number 2 and Solution respectively.
Also change the Text of the 3 buttons to make as shown below.





Click on the jTextField1 and delete the text in it, resize the field if it reduces in size while deleting. Do the same for jTextField2 and jTextField3.
Now your looks of GUI is ready. Now let’s give functionality to it, aka brain.

Now Right Click on the Exit Button, and do:





Events->Action->actionPerformed

Your insertion pointer reaches to the point shown below:





In the place of “//TODO add your handling code here:”, type:
               
System.exit(0);
    

Go to Design view, by pressing the Design tab as shown:



Similary, for Add button add the following lines of code:

        float
num1,num2,result;
        num1=Float.parseFloat(jTextField1.getText());
        num2=Float.parseFloat(jTextField2.getText());
        result=num1+num2;
        jTextField3.setText(String.valueOf(result));

and for Clear button add the following:
        jTextField1.setText("");
        jTextField2.setText("");
        jTextField3.setText("");

as shown below: 







Now your simple GUI is ready. Click on the Run button to run the main project. 





This is the place where your platform independent, portable, secure, standalone application is present.
Happy Coding
Sulav