Introduction to Java Graphical User Interface


•GUI (Graphical User Interface) : Metode grafis interaksi yang menghubungkan  antara user and computer.
•API (Application Programming Interface) : sekumpulan function, procedure, class dalam sistem opoerasi, library yang mendukung program apa yang diminta.

•Class GUI  dikelompokkan menjadi 3: 

1.Container Classes 
– JFrame
– JPanel
– JApplet
2.Component Classes 
– JButton
– JTextField
– JTextArea
– JComboBox
– JList
– JRadioButton
– JMenu , are subclasses of JComponent
3.Helper Classes 
– Graphics
– Color
– Font
– FontMetrics
– Dimension

Swing vs AWT 

AWT (Abstract Windows Toolkit)
–Cocok untuk pengembangan GUI yang simpel.
–Tidak cocok  untuk pengembangan GUI Projector.
–Rentan terhadap bug.
–Heavyweight components
–Example of Class:
• Button, Label, List Component, Canvas, etc from java.awt

–Lebih kuat.
–Lebih serbaguna.
–Flexible library.
–Platform dependent components
–Lightweight components
–Example of class :
• JButton, JLabel, JList, JComponent, etc from javax.swing
•Commonly all its classes using “J” in front of the name of the class


Container Classes 

Container classes are GUI components that used to contain other GUI components

•AWT Container Class :
– Window
– Frame 
– Dialog 
– Applet 
– Panel 

•Swing Container Class :
– Container
– JFrame 
– JDialog
– JApplet
– JPanel 


Library : javax.swing.Jframe
•Jframe is used to create Frame in Java
•Heighest level of container that holds other GUI component.
•Method :
JFrame() : menciptakan default frame tanpa title.
JFrame (title : String) : menciptakan frame dengan title.
setSize(width,height) :  to mengatur ukuran frame.
setLocation(x,y) : to mengatur koordinat frame.
setVisible(boolean) : to set visibility.
setDefaultCloseOperation(int) : untuk menspesifikasikan operasi close pada frame.
setLocationRelativeTo(component) : to set frame location to specific componen. If the component is null then the frame will be right in center of the screen.
pack() : automatically setting frame size with all components in the frame.


Contoh code 1 :


Output 1 : 


Contoh code 2 :


Output 2 :



Windows Closing Event

–Function or behavior that will run window closing operation on frame : setDefaultCloseOperation(…)
–On that function should be filled with one of below values :
DO_NOTHING_ON_CLOSE : Nothing happens when the user is requesting for window closing.
HIDE_ON_CLOSE : Hide the window when the user closes the window.
DISPOSE_ON_CLOSE : Hide and delete window when the user closes the window.
EXIT_ON_CLOSE : Close the application, use System.exit(0)


Layout Manager 

•Layout managers are set in containers using the setLayout(aLayoutManager) method. For example, you can use the following statements to create an instance of XLayout and set it in a container:
LayoutManager layoutManager  = new XLayout();

Layout manager terdiri atas:
– FlowLayout
– GridLayout
– BorderLayout 


Flow Layout

2013-12-31_160805FlowLayout adalah layout manager yang paling simpel. The components are arranged in the container from left to right in the order in which they were added. When one row is filled, a new row is started. You can specify the way the components are aligned by using one of three constants: FlowLayout.RIGHT, FlowLayout.CENTER, or FlowLayout.LEFT.  

Contoh code 3 :


Output 3 :2013-12-31_163141

Grid Layout

2013-12-31_163626 The GridLayout manager arranges components in a grid (matrix) formation. The components are placed in the grid from left to right, starting with the first row, then the second, and so on, in the order in which they are added.

Contoh code 4 :

2013-12-31_164548 2013-12-31_164631

Output 4 :2013-12-31_164658

Border Layout

2013-12-31_165055The BorderLayout manager divides a container into five areas: East, South, West, North, and Center. Components are added to aBorderLayout by using add(Component, index), where index is a constant BorderLayout.EAST, BorderLayout.SOUTH, BorderLayout.WEST, BorderLayout.NORTH, or BorderLayout.CENTER. 

Contoh code 5 :

2013-12-31_165901 2013-12-31_165930

Output 5 :


Advanced Learn : Panel + Border




Output Advanced Learn : Panel + Border



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s