2013-12-31_165833

Introduction to Java Graphical User Interface


GUI vs API

•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

•Swing

–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 

JFrame

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.

2013-12-31_170444

Contoh code 1 :

2013-12-31_151257

Output 1 : 

2013-12-31_151325

Contoh code 2 :

2013-12-31_152017

Output 2 :

2013-12-31_152040

•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();

container.setLayout(layoutManager);

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 :

2013-12-31_1640452013-12-31_163116

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 :

2013-12-31_165833

Advanced Learn : Panel + Border

2013-12-31_172900

2013-12-31_172932

2013-12-31_172951

Output Advanced Learn : Panel + Border

2013-12-31_173004

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s