Graphical User Interface (GUI) in Java
|
Next
Events in JAVA>| |
A graphical user interface is a set of classes for the visual part of an application. It consists of forms, dialogues, components that can be found on a form.
The required classes are contained in packages (java.awt and javax. Swing).
AWT (Abstract Window Toolkit) library that provides the use of a minimal set of graphical interface components, which is owned by all Java-enabled platforms. It looks "equally mediocre" across all platforms. Packages:
Javafx is a class library used to create rich internet applications. RIA is a more user-oriented, web-based, multiplatform, desktop-like application
The required classes are contained in packages (java.awt and javax. Swing).
AWT (Abstract Window Toolkit) library that provides the use of a minimal set of graphical interface components, which is owned by all Java-enabled platforms. It looks "equally mediocre" across all platforms. Packages:
- java.awt
- java.awt.event
- java.awt.image
- java.awt.datatransfer
Javafx is a class library used to create rich internet applications. RIA is a more user-oriented, web-based, multiplatform, desktop-like application
Swing Package in java
Forms can be created dynamically by writing their own code or statically using programming tools e.g. Netbeans by dragging components to form.
Dynamic form creation.
It consists of making objects that represent components on a form. We use the following objects:
- Font Object
- Color Object.
- JFrame Object
- Frame Layout and Centering
- as well as swing controls:
- JButton Control
- JLabel Control
- JTextField Control
- JTextArea Control
- JCheckBox Control
- JRadioButton Control.
- JPanel Control
- JList Control
- JScrollPane Control
- JComboBox Control
JFrame class
Each graphics application in java must have at least one dialog box. To create such a window, a JFrame class object must be created (the class is in the swing package in the class library). In doing so, this package must be imported into the application with the command:
import javax.swing.JOptionPane;
javax is a package containing a subpackage swing, while JFrame is a class that is imported into the program. Otherwise, all the components that need to be put on the dialog later are mostly in the swing package. The object that represents the dialog is called win and is defined as follows:
win = new JFrame();
Next, the attributes of the win object need to be defined. Attribute values are set using "setter", the methods they employ with set ... For example, to set the title we use setter setTitle:
win.setTitle(“Naslov grafike”);
In order for the JFrame dialog to be displayed, at least the following must be set:
- Size (setSize method)
- Behavior of the application after clicking the close button (x-button in the upper left corner of the window), the method is setDefaultCloseOperation
- visibility, using the setVisible (true) method
import javax.swing.JOptionPane;
package solarsystem;
import import javax.swing.JFrame; //Import of class JFrame
public class SolarSystemFrame {
package solarsystem;
import import javax.swing.JFrame; //Import of class JFrame
public class SolarSystemFrame {
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
}* @param args the command line arguments
*/
public static void main(String[] args) {
//Creating object
JFrame win = new JFrame();
//Sets attributes
JFrame win.setTitle("Solar system"); //Sets the title
JFrame win.setSize(800, 600); //Setting the window size to 800 * 600px
//clicking the close button exits the program
JFrame win.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
/*
* visibility is set, the JFrame object
* is invisible by default
*/
JFrame win.setVisible(true);//the last command will remain
}JFrame win = new JFrame();
//Sets attributes
JFrame win.setTitle("Solar system"); //Sets the title
JFrame win.setSize(800, 600); //Setting the window size to 800 * 600px
//clicking the close button exits the program
JFrame win.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
/*
* visibility is set, the JFrame object
* is invisible by default
*/
JFrame win.setVisible(true);//the last command will remain
Figure 8: Swing User Package. Creating a JFrame class object
Upon startup we will get an empty JFrame window with a title bar. The image also shows the coordinate system:
Figure 9: Swing user package. JFrame Class Object (Window)
EXAMPLE: Graphics with text and image:
Task: Create a JFrame window and place two labels on it with one text and one with an image.
Solution:
Our graphics should look like the following:
Solution:
Our graphics should look like the following:
Figure 10: Swing User Package. JFrame object with text and image
It can be noticed that 3 components should be placed on the JFrame window. make three objects: a panel of blue that carries two labels, one with text, the other with a picture.
To display an image, you need to find the appropriate image and copy it somewhere inside the folder that represents the application. It is best to put all the pictures in a subfolder that, for example. called "pictures." If the file representing our image is called the Solar System and has an extension of .jpg, the relative URL of the file path relative to the application folder is:
To display an image, you need to find the appropriate image and copy it somewhere inside the folder that represents the application. It is best to put all the pictures in a subfolder that, for example. called "pictures." If the file representing our image is called the Solar System and has an extension of .jpg, the relative URL of the file path relative to the application folder is:
String putanja=”images/SolarSystem.jpg”;
The following code is required to create the blue panel:
import javax.swing.JOptionPane;
package solarsystem;
import import javax.swing.JFrame; //Import of class JFrame
public class SolarSystemFrame {
package solarsystem;
import import javax.swing.JFrame; //Import of class JFrame
public class SolarSystemFrame {
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
}* @param args the command line arguments
*/
public static void main(String[] args) {
//Creating object
JFrame win = new JFrame();
//Sets attributes
JFrame win.setTitle("Solar system"); //Sets the title
JFrame win.setSize(800, 600); //Setting the window size to 800 * 600px
//clicking the close button exits the program
JFrame win.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
* visibility is set, the JFrame object
* is invisible by default
*/
JFrame win.setVisible(true);//the last command will remain
}JFrame win = new JFrame();
//Sets attributes
JFrame win.setTitle("Solar system"); //Sets the title
JFrame win.setSize(800, 600); //Setting the window size to 800 * 600px
//clicking the close button exits the program
JFrame win.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel pan = new JPanel(); //A panel carrying other components
pan.setLayout(null); /*The setLayout method passes a null object
in charge of component layout per panel yes
the layout would be done using coordinates
*/ pan.setBackground(Color.BLUE); //Panel color
win.setContentPane(pan); //Connecting the panel to the win object
/*pan.setLayout(null); /*The setLayout method passes a null object
in charge of component layout per panel yes
the layout would be done using coordinates
*/ pan.setBackground(Color.BLUE); //Panel color
win.setContentPane(pan); //Connecting the panel to the win object
* visibility is set, the JFrame object
* is invisible by default
*/
JFrame win.setVisible(true);//the last command will remain
Figure 11: Swing User Package. JPanel object.
The setLayout method is responsible for the layout of the panel and should be passed to an object of the class inherited from the LayoutManager class. It is the object responsible for the arrangement of components per panel. If this object is null, then it will be arranged by defining the coordinates within which the component will be located (setBounds method).
The setContentPane method connects a panel to a win object.
Next, we create a label for the text (object of the class JLabel), place text on it, define borders ie. the rectangle within which it will be placed, and finally we add it to the panel. A rectangle is defined by 4 numbers where the first two refer to the position of the rectangle defined by the x and y coordinates of the point of the upper left corner of the rectangle, while the remaining two numbers represent the size, ie. the width and height of the rectangle.
The setContentPane method connects a panel to a win object.
Next, we create a label for the text (object of the class JLabel), place text on it, define borders ie. the rectangle within which it will be placed, and finally we add it to the panel. A rectangle is defined by 4 numbers where the first two refer to the position of the rectangle defined by the x and y coordinates of the point of the upper left corner of the rectangle, while the remaining two numbers represent the size, ie. the width and height of the rectangle.
pan.setBackground(Color.BLUE); //Panel color
/*
* visibility is set, the JFrame object
*is invisible by default
*/
win.setVisible(true);//the last command will
remain
}
/*
* Makes a label with text
*/
JLabel textLabel = new JLabel();//Defining a label object
textLabel.setText("Solar system");
textLabel.setForeground(Color.white);//Font color
Font f = new Font("Vedrana", Font.BOLD, 20);
textLabel.setFont(f);
/*defines a rectangle that represents the boundary within which the component is placed
adds a label to the panel*/
textLabel.setBounds(5, 5, 300, 30);
pan.add(textLabel);
win.setContentPane(pan); //Connecting the panel to the win object* Makes a label with text
*/
JLabel textLabel = new JLabel();//Defining a label object
textLabel.setText("Solar system");
textLabel.setForeground(Color.white);//Font color
Font f = new Font("Vedrana", Font.BOLD, 20);
textLabel.setFont(f);
/*defines a rectangle that represents the boundary within which the component is placed
adds a label to the panel*/
textLabel.setBounds(5, 5, 300, 30);
pan.add(textLabel);
/*
* visibility is set, the JFrame object
*is invisible by default
*/
win.setVisible(true);//the last command will
remain
Figure 12: Swing User Package. JLabel text object.
To make the text more visible, we created an object of class Font f, type "Vedrana", bold style, 20px in size, and set it for the current font label with text.
Creating an image label is similar, except that the setText method now uses the setIcon method to set the image. The image here is actually an object of the ImageIcon class. The constructor of this class is passed the path to the file representing the image. Of course, the image file must be copied to the application folder as explained earlier.
Creating an image label is similar, except that the setText method now uses the setIcon method to set the image. The image here is actually an object of the ImageIcon class. The constructor of this class is passed the path to the file representing the image. Of course, the image file must be copied to the application folder as explained earlier.
pan.setBackground(Color.BLUE); //Panel color
/*
* visibility is set, the JFrame object
*is invisible by default
*/
win.setVisible(true);//the last command will
remain
}
JLabel imageLabel = new JLabel();//Defining a label object
ImageIcon image = new ImageIcon("images/SolarSystem.jpg");
imageLabel.setIcon(image);
imageLabel.setBounds(5, 40, 450, 338);
pan.add(imageLabel); //Adding a label to the panel
win.setContentPane(pan); //Connecting the panel to the win objectImageIcon image = new ImageIcon("images/SolarSystem.jpg");
imageLabel.setIcon(image);
imageLabel.setBounds(5, 40, 450, 338);
pan.add(imageLabel); //Adding a label to the panel
/*
* visibility is set, the JFrame object
*is invisible by default
*/
win.setVisible(true);//the last command will
remain
Figure 13: Swing User Package. JLabel image object.
EXAMPLE: Friction force:
Task: Body mass m slides on a flat surface. It is necessary to calculate the friction force that occurs between the body mass m and the substrate.
- Create a GUI to enter the coefficient of friction and body mass m.
- Calculate the friction force for the default mass values of 1kg, as well as the coefficient. friction of 0.03 and display the result in the report.
Figure 14: Swing User Package. GUI friction force
The following should be created: a JFrame class object (main application window), a JPanel class panel that carries other components. These are two text labels (JLabel), two text boxes (JTextField), a JButton class input button, and the text area where the report (JTextArea) will be written.
Initially, a JFrame object is created, that is, an object of the class that inherits the JFrame.
Initially, a JFrame object is created, that is, an object of the class that inherits the JFrame.
public static void main(String[] args) {
FrictionGUI app=new FrictionGUI("Friction of Force GUI");
}Figure 15: Swing user package. Friction force GUI-object creation
The constructor controls the execution of the program:
/**
* @param args the command line arguments
*/
public FrictionGUI(String title) throws HeadlessException{
* @param args the command line arguments
*/
public FrictionGUI(String title) throws HeadlessException{
super(title);
createGUI();
force = new FrictionForce();
force.calculate();
reportTA.append(force.toString());
}createGUI();
force = new FrictionForce();
force.calculate();
reportTA.append(force.toString());
First, using the official word super, the constructor of the parent class is called and the title is passed to it. The graphic creation was moved to the special createGUI () method. Then a Friction class object is created in which the data related to the friction force is stored. The attributes of this object, as well as the friction force calculation method and the toString method, which returns text for the result report, are also in the same class:
package frictionforcegui;
public class FrictionForce{
public class FrictionForce{
public double m = 1,koefTrenja = 0.03, silaTrenja, g = 9.81;
public void calculate() {
@Override
public String toString() {
}public void calculate() {
silaTrenja = m * g * koefTrenja;
}@Override
public String toString() {
return "Sila trenja iznosi"+silaTrenja+" N";
} Figure 17: Friction force - class
Now let's look at how to create a GUI:
In Part One, the code is similar to the previous example where the JFrame object is first created. The official word this is used to access the object of the class in which this method is located. A panel is then created and linked to the main application window by the setContentPane method.
In Part One, the code is similar to the previous example where the JFrame object is first created. The official word this is used to access the object of the class in which this method is located. A panel is then created and linked to the main application window by the setContentPane method.
/**
* @param args the command line arguments
*/
private void createGUI() {
* @param args the command line arguments
*/
private void createGUI() {
this.setSize(400, 300);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel pan = new JPanel(null);
pan.setBackground(Color.LIGHT_GRAY);
this.setContentPane(pan);
JLabel coeffOfFrictionLab = new JLabel("Coefficient of friction:");
coeffOfFrictionLab.setBounds(5, 10, 200, 25);
pan.add(coeffOfFrictionLab);
JTextField coeffOfFrictionTF= new JTextField();
coeffOfFrictionTF.setBounds(220, 10, 50, 25);
pan.add(coeffOfFrictionTF);
JLabel massLab=new JLabel("Enter mass:");
massLab.setBounds(5, 50, 200, 25);
pan.add(massLab);
JTextField masaTF = new JTextField();
masaTF.setBounds(220, 50, 50, 25);
pan.add(masaTF);
JButton inputBtn = new JButton("Input");
inputBtn.setBounds(5, 100, 120, 25);
pan.add(inputBtn);
reportTA = new JTextArea(10, 20);
reportTA.setBounds(5, 130, 300, 120);
pan.add(reportTA);
this.setVisible(true);
}this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel pan = new JPanel(null);
pan.setBackground(Color.LIGHT_GRAY);
this.setContentPane(pan);
JLabel coeffOfFrictionLab = new JLabel("Coefficient of friction:");
coeffOfFrictionLab.setBounds(5, 10, 200, 25);
pan.add(coeffOfFrictionLab);
JTextField coeffOfFrictionTF= new JTextField();
coeffOfFrictionTF.setBounds(220, 10, 50, 25);
pan.add(coeffOfFrictionTF);
JLabel massLab=new JLabel("Enter mass:");
massLab.setBounds(5, 50, 200, 25);
pan.add(massLab);
JTextField masaTF = new JTextField();
masaTF.setBounds(220, 50, 50, 25);
pan.add(masaTF);
JButton inputBtn = new JButton("Input");
inputBtn.setBounds(5, 100, 120, 25);
pan.add(inputBtn);
reportTA = new JTextArea(10, 20);
reportTA.setBounds(5, 130, 300, 120);
pan.add(reportTA);
this.setVisible(true);
Figure 18: CreateGUI method
Then, two text labels are created, two text boxes (JTextField), one button (JButton) and one text area (JTextArea).
We see that for each of these objects it is necessary to create an instance of the object, adjust the boundaries and add the object to the panel containing them.
Netbeans forms in Java
IDEs have support for working with Forms (windows of the JFrame class or the class that inherits the JFrame). The following text shows how to create forms using the Netbeans (IDE) development environment.
To create an object that represents a form, it is entered by clicking on the appropriate package, and clicking on new - JFrame Forms, as shown in the image below.
To create an object that represents a form, it is entered by clicking on the appropriate package, and clicking on new - JFrame Forms, as shown in the image below.
Figure 19: Graphical User Interface. Creating netbeans forms.
A dialog will appear where you need to specify a name and location:
Figure 20: Graphical User Interface. Creating netbeans forms. Name and location
Clicking Finish opens a window for designers to drag controls from the toolbox:
Figure 21: Graphical User Interface. Creating netbeans forms. Designer
In the lower right corner there is a Properties dialog showing the properties of the selected controls.
Example 3: Entering User Information
Task: Create a form to enter user information for a cd club.
Solution: After dragging components onto a form, it should look like:
Solution: After dragging components onto a form, it should look like:
Figure 22: Graphical User Interface. Creating netbeans forms. Example - CD club
The following objects are on the form:
- JLabel class objects that contain static text: name, surname, etc.
Figure 23: Graphical User Interface. Creating netbeans forms. Example - CD club - label display
- Objects of the JTextField class into which the user enters their data:
Figure 24: Graphical User Interface. Creating netbeans forms. Example - CD Club - View the input field
JButton Class Objects:
Slika 26: Grafički Korisnički Interfejs. Kreiranje netbeans formi. Primer- CD klub-prikaz dugmadi za akcije
JTable object to display data from the database
Figure 26: Graphical User Interface. Creating netbeans forms. Example - CD club - view of empty table
After launching the application, this form will look like this:
Figure 27: Graphical User Interface. Creating netbeans forms. Example - CD club - view of user table
For any component, we can adjust the attributes in the Properties window by first selecting the appropriate component.
Figure 28: Graphical User Interface. Creating netbeans forms. Example - CD club - feature view
|
Next
Events in JAVA>| |