Hello Designers,
Today I am going to explain you about GUI designing using Java Programming practically. So, hoping that you have already installed all required software if not, then you need to install it fast to go withe flow. Here I will give you the links for software that I didn't provided earlier because I want you to search it online on your own.
1. Eclipse IDE 32-bit
2. JDK 1.7 for 32 and 64 bit
3. Adobe Photoshop CS3/7.0
Now you are ready for doing it, so we will design this form:
Step1: Create a New Java Project
This is the only basic login page that we will design today:
In the above image you see I have created a Java Project because before writing any Java code you need to create a Java Project.
To create a Java Project you need to select-Menu>File>New>Java Project. Then you will see a Dialog box "New Java Project", just write the name of project and choose your java environment as I selected as "JavaSE 1.7", This will come by Default otherwise select it from the list.(Considering you have installed JDK1.7).
Now just click Finish and done.
Step2: Create your Class:
Next, you will see your project in Package explorer(You can enable all windows by going Menu>Window>Show View). Now right click on the Project on Package Explorer and select New and then select class to create a Java class. Here is the view of mine:
After that you will see a Dialog box"New java Class", provide a name to class and check all boxes below as shown in the above figure and click finish and done.
Step3: Start programming
Now you will face a new class named "FirstGUI.java" with some predefined codes as shown below:
Here is the declarations you need to include in class:
public class FirstGUI{
//declaration
public static JFrame fr;
public static JLabel back,login,loginl,text1,text2,rapid;
public static JTextField user;
public static JPasswordField pass;
public static Font f;
public static Container c;
public static Image backI,eleI;
public static ImageIcon backi,elei;
.
.
.
}
First you need to create a Frame in Swing so I used JFrame class. Then, for background I used a JLabel instead of Button I used login and loginl JLabel for designing it well. And for textfields background I used again JLabel text1 and text2. rapid JLabel is for Heading I have given on top.
I have used JTextField for user name entry and JPasswordField for password entry. To set Font other than default one I used Font.
To store all this components on the Frame I have used Container class that hold up all the components.
Here is the code snippet for the initialization of components inside constructor:
.
.
.
public FirstGUI() throws Exception {
fr=new JFrame();//Frame initialization
//font for headings
f=new Font("Arial Rounded MT Bold", Font.BOLD, 32);
//container pane for adding controls
c=fr.getContentPane();
c.setLayout(null);
//initialization of controls
back=new JLabel();
user=new JTextField("User name");
pass=new JPasswordField("Password");
login=new JLabel();
loginl=new JLabel("Login",JLabel.CENTER);// centered text
text1=new JLabel();
text2=new JLabel();
rapid = new JLabel();
.
.
.
}
In the above code, I have initialized all components with new keyword. We need to attach our container to Frame and it can be done with the help of getContentPane();. We have to make our layout null otherwise the components are stored on one another filling whole Frame.
Now after Initialization we need to set the size and location of components on Frame by using setBounds() functions.
.
.
.
//setting bounds of the frame and other components
fr.setBounds(0,0, 500, 500);
back.setBounds(0,0,fr.getWidth(),fr.getHeight());
user.setBounds(172, 138, 180, 61);
pass.setBounds(172, 210, 180, 65);
loginl.setBounds(155, 286, 197, 65);
login.setBounds(loginl.getBounds());
rapid.setBounds(0, 38, 484, 71);
//background image bounds
text1.setBounds(user.getBounds());
text2.setBounds(pass.getBounds());
.
.
.
The above code will provide us with the size and location of components and now we need to set image to labels that are declared for that purpose e.g back for background image:
.
.
.
//background image
backI = ImageIO.read(new File("/MyFirst/src/images/back1.jpg"));
backI = backI.getScaledInstance(fr.getWidth(), fr.getHeight(),Image.SCALE_REPLICATE);
backi = new ImageIcon(backI);
back.setIcon(backi);
//login click
eleI = ImageIO.read(new File("/MyFirst/src/images/login.png"));
eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
elei = new ImageIcon(eleI);
login.setIcon(elei);
backI = ImageIO.read(new File("/MyFirst/src/images/textbox.png"));
backI = backI.getScaledInstance(user.getWidth(), user.getHeight(),Image.SCALE_REPLICATE);
backi = new ImageIcon(backI);
text1.setIcon(backi);
text2.setIcon(backi);
backI = ImageIO.read(new File("/MyFirst/src/images/RapidAbcd.png"));
backI = backI.getScaledInstance(rapid.getWidth(), rapid.getHeight(),Image.SCALE_REPLICATE);
backi = new ImageIcon(backI);
rapid.setIcon(backi);
user.setFont(new Font("Arial", Font.BOLD, 15));
user.setForeground(Color.gray);
pass.setFont(new Font("Arial", Font.BOLD, 15));
pass.setForeground(Color.gray);
loginl.setFont(new Font("Arial", Font.BOLD, 20));
loginl.setForeground(Color.white);
//add all components
c.add(rapid);
c.add(user);
c.add(pass);
c.add(text1);
c.add(text2);
c.add(loginl);
c.add(login);
c.add(back);
fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
fr.setVisible(true);
.
.
.
}
ImageIO.read() function will provide us with the facilty of loading image from the computer but this function requires a object of File which I used directly in the function otherwise I can use in this way too:
File path=new File("/MyFirst/src/images/back1.jpg");
ImageIO.read(path);
getScaledInstance() function give us facility og scaling the image as per the size of Label on which we need to assign image as icon.
And we need to use finally ImageIcon object to set icon to JLabel.
Similarly, assign image to all labels required. Finally add all components to Container by using add() function.
And then make frame closable by using default Close Operation and make visible the frame by using setVisible() to true.
Now we need to add events to lables and textFields as shown below snippets:
.
.
.
login.addMouseListener(new MouseListener() {
@Override
public void mouseReleased(MouseEvent arg0) {
try {
eleI = ImageIO.read(new File("/MyFirst/src/images/loginhover.png"));
eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
elei = new ImageIcon(eleI);
login.setIcon(elei);
} catch (IOException e) {
// TODO Auto-generated catch block
}
}
@Override
public void mousePressed(MouseEvent arg0) {
try {
eleI = ImageIO.read(new File("/MYFirst/src/images/loginclick.png"));
eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
elei = new ImageIcon(eleI);
login.setIcon(elei);
} catch (IOException e) {
// TODO Auto-generated catch block
}
}
@Override
public void mouseExited(MouseEvent arg0) {
try {
eleI = ImageIO.read(new File("/MYFirst/src/images/login.png"));
eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
elei = new ImageIcon(eleI);
login.setIcon(elei);
} catch (IOException e) {
// TODO Auto-generated catch block
}
}
@Override
public void mouseEntered(MouseEvent arg0) {
try {
eleI = ImageIO.read(new File("/MyFirst/src/images/loginhover.png"));
eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
elei = new ImageIcon(eleI);
login.setIcon(elei);
} catch (IOException e) {
// TODO Auto-generated catch block
}
}
@Override
public void mouseClicked(MouseEvent arg0) {
// TODO Auto-generated method stub
}
});
.
.
.
Don't worry about the code because you do not need to write it just use ctrl+space after (dot.) to addMouseListener and again inside () enter new, again enter addMouseListener and it will generate auto codes. and type the codes.
These codes are actually help for creating some effects on the JLabel Login. After every events I just changed the image and that's it.
The Entire file is on the next tutorial, must read!
If you have found any difficulty, please comment me here!
Happy Programming with Designing!
Today I am going to explain you about GUI designing using Java Programming practically. So, hoping that you have already installed all required software if not, then you need to install it fast to go withe flow. Here I will give you the links for software that I didn't provided earlier because I want you to search it online on your own.
1. Eclipse IDE 32-bit
2. JDK 1.7 for 32 and 64 bit
3. Adobe Photoshop CS3/7.0
Now you are ready for doing it, so we will design this form:
Step1: Create a New Java Project
This is the only basic login page that we will design today:
 |
| Follow to create a Java Project |
To create a Java Project you need to select-Menu>File>New>Java Project. Then you will see a Dialog box "New Java Project", just write the name of project and choose your java environment as I selected as "JavaSE 1.7", This will come by Default otherwise select it from the list.(Considering you have installed JDK1.7).
Now just click Finish and done.
Step2: Create your Class:
 |
| Package Explorer |
 |
| Create a java class |
Step3: Start programming
Now you will face a new class named "FirstGUI.java" with some predefined codes as shown below:
 |
| The FirstGUI.java class |
public class FirstGUI{
//declaration
public static JFrame fr;
public static JLabel back,login,loginl,text1,text2,rapid;
public static JTextField user;
public static JPasswordField pass;
public static Font f;
public static Container c;
public static Image backI,eleI;
public static ImageIcon backi,elei;
.
.
.
}
First you need to create a Frame in Swing so I used JFrame class. Then, for background I used a JLabel instead of Button I used login and loginl JLabel for designing it well. And for textfields background I used again JLabel text1 and text2. rapid JLabel is for Heading I have given on top.
I have used JTextField for user name entry and JPasswordField for password entry. To set Font other than default one I used Font.
To store all this components on the Frame I have used Container class that hold up all the components.
Here is the code snippet for the initialization of components inside constructor:
.
.
.
public FirstGUI() throws Exception {
fr=new JFrame();//Frame initialization
//font for headings
f=new Font("Arial Rounded MT Bold", Font.BOLD, 32);
//container pane for adding controls
c=fr.getContentPane();
c.setLayout(null);
//initialization of controls
back=new JLabel();
user=new JTextField("User name");
pass=new JPasswordField("Password");
login=new JLabel();
loginl=new JLabel("Login",JLabel.CENTER);// centered text
text1=new JLabel();
text2=new JLabel();
rapid = new JLabel();
.
.
.
}
In the above code, I have initialized all components with new keyword. We need to attach our container to Frame and it can be done with the help of getContentPane();. We have to make our layout null otherwise the components are stored on one another filling whole Frame.
Now after Initialization we need to set the size and location of components on Frame by using setBounds() functions.
.
.
.
//setting bounds of the frame and other components
fr.setBounds(0,0, 500, 500);
back.setBounds(0,0,fr.getWidth(),fr.getHeight());
user.setBounds(172, 138, 180, 61);
pass.setBounds(172, 210, 180, 65);
loginl.setBounds(155, 286, 197, 65);
login.setBounds(loginl.getBounds());
rapid.setBounds(0, 38, 484, 71);
//background image bounds
text1.setBounds(user.getBounds());
text2.setBounds(pass.getBounds());
.
.
.
The above code will provide us with the size and location of components and now we need to set image to labels that are declared for that purpose e.g back for background image:
.
.
.
//background image
backI = ImageIO.read(new File("/MyFirst/src/images/back1.jpg"));
backI = backI.getScaledInstance(fr.getWidth(), fr.getHeight(),Image.SCALE_REPLICATE);
backi = new ImageIcon(backI);
back.setIcon(backi);
//login click
eleI = ImageIO.read(new File("/MyFirst/src/images/login.png"));
eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
elei = new ImageIcon(eleI);
login.setIcon(elei);
backI = ImageIO.read(new File("/MyFirst/src/images/textbox.png"));
backI = backI.getScaledInstance(user.getWidth(), user.getHeight(),Image.SCALE_REPLICATE);
backi = new ImageIcon(backI);
text1.setIcon(backi);
text2.setIcon(backi);
backI = ImageIO.read(new File("/MyFirst/src/images/RapidAbcd.png"));
backI = backI.getScaledInstance(rapid.getWidth(), rapid.getHeight(),Image.SCALE_REPLICATE);
backi = new ImageIcon(backI);
rapid.setIcon(backi);
user.setFont(new Font("Arial", Font.BOLD, 15));
user.setForeground(Color.gray);
pass.setFont(new Font("Arial", Font.BOLD, 15));
pass.setForeground(Color.gray);
loginl.setFont(new Font("Arial", Font.BOLD, 20));
loginl.setForeground(Color.white);
//add all components
c.add(rapid);
c.add(user);
c.add(pass);
c.add(text1);
c.add(text2);
c.add(loginl);
c.add(login);
c.add(back);
fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
fr.setVisible(true);
.
.
.
}
ImageIO.read() function will provide us with the facilty of loading image from the computer but this function requires a object of File which I used directly in the function otherwise I can use in this way too:
File path=new File("/MyFirst/src/images/back1.jpg");
ImageIO.read(path);
getScaledInstance() function give us facility og scaling the image as per the size of Label on which we need to assign image as icon.
And we need to use finally ImageIcon object to set icon to JLabel.
Similarly, assign image to all labels required. Finally add all components to Container by using add() function.
And then make frame closable by using default Close Operation and make visible the frame by using setVisible() to true.
Now we need to add events to lables and textFields as shown below snippets:
.
.
.
login.addMouseListener(new MouseListener() {
@Override
public void mouseReleased(MouseEvent arg0) {
try {
eleI = ImageIO.read(new File("/MyFirst/src/images/loginhover.png"));
eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
elei = new ImageIcon(eleI);
login.setIcon(elei);
} catch (IOException e) {
// TODO Auto-generated catch block
}
}
@Override
public void mousePressed(MouseEvent arg0) {
try {
eleI = ImageIO.read(new File("/MYFirst/src/images/loginclick.png"));
eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
elei = new ImageIcon(eleI);
login.setIcon(elei);
} catch (IOException e) {
// TODO Auto-generated catch block
}
}
@Override
public void mouseExited(MouseEvent arg0) {
try {
eleI = ImageIO.read(new File("/MYFirst/src/images/login.png"));
eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
elei = new ImageIcon(eleI);
login.setIcon(elei);
} catch (IOException e) {
// TODO Auto-generated catch block
}
}
@Override
public void mouseEntered(MouseEvent arg0) {
try {
eleI = ImageIO.read(new File("/MyFirst/src/images/loginhover.png"));
eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
elei = new ImageIcon(eleI);
login.setIcon(elei);
} catch (IOException e) {
// TODO Auto-generated catch block
}
}
@Override
public void mouseClicked(MouseEvent arg0) {
// TODO Auto-generated method stub
}
});
.
.
.
Don't worry about the code because you do not need to write it just use ctrl+space after (dot.) to addMouseListener and again inside () enter new, again enter addMouseListener and it will generate auto codes. and type the codes.
These codes are actually help for creating some effects on the JLabel Login. After every events I just changed the image and that's it.
The Entire file is on the next tutorial, must read!
If you have found any difficulty, please comment me here!
Happy Programming with Designing!
No comments:
Post a Comment