03. 메인 페이지

안녕하세요 Becca입니다!

 

단축키 안내 프로그램의 세 번째 시간입니다.

이번 글에서는 메인 페이지를 만들어보도록 하겠습니다.

---

메인 페이지는 프로그램을 실행시켰을 때 가장 먼저 볼 수 있는 화면입니다.

그러면, 나중에 만들 단축키 사전과 단축키 검색 패널(Panel)으로 이동할 수 있어야 합니다.

그리고, 저번 시간에 타이틀바를 삭제하여 프레임을 종료시키지 못하는 문제도 해결해야 합니다.

[메인 페이지 생성]

main_page 패키지에서 Mainpg 클래스를 생성합니다.

(main_page 패키지에서 우클릭 → New → Class)

 

 

[메인 페이지 Panel]

1. javax.swing.* / java.awt.* / java.awt.event.* 을 import 합니다.

 

package main_page;

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class Mainpg
{

}

 

 

2. Mainpg 클래스에 JPanel을 상속받습니다.

 

public class Mainpg extends JPanel
{

}

 

 

3. Mainpg() 생성자의 매개변수를 mframe로 하고, 아래 코드를 작성합니다.

 

public class Mainpg extends JPanel
{
	private MainFrame mf;

	public Mainpg(MainFrame mframe)
	{
		this.mf = mframe; // MainFrame 정보를 저장
		setLayout(null); // 배치관리자 제거
	}
}

 

 

4. Dictionary와 Search 버튼을 생성하고 크기, 위치, 글씨체를 설정해줍니다.

4. - 크기, 위치를 설정하는 이유는 배치관리자를 제거하였기 때문입니다.

4. - 배치관리자를 제거하면 버튼이 보이지 않거나 겹치기 때문에 크기, 위치를 설정해야 합니다.

4. - 글씨체는 나중에 디자인을 하면 삭제할 것이므로 하지 않아도 무관합니다.

 

public class Mainpg extends JPanel
{
	private MainFrame mf;

	public Mainpg(MainFrame mf)
	{
		this.mf = mf;
		setLayout(null);
		
		// Dictionary 버튼
		JButton dict = new JButton("Dictionary"); // 버튼 생성
		
		dict.setSize(250, 70); // 버튼의 크기
		dict.setFont(new Font("나눔바른고딕", Font.PLAIN, 30)); // 버튼의 글씨체, 스타일, 크기
		dict.setLocation(170, 450); // 버튼의 위치
		
		dict.addActionListener(new DictionaryBtn()); // event
		add(dict); // 패널에 버튼 추가
		
		// Search 버튼
		JButton search = new JButton("Search");
		
		search.setSize(250, 70);
		search.setFont(new Font("나눔바른고딕", Font.PLAIN, 30));
		search.setLocation(680, 450);
		
		search.addActionListener(new SearchBtn());
		add(search);
	}
	
	// Dictionary 버튼 이벤트
	class DictionaryBtn implements ActionListener 
	{
		public void actionPerformed(ActionEvent e) 
		{
            
		}
	}
	
	// Search 버튼 이벤트
	class SearchBtn implements ActionListener 
	{ 
		public void actionPerformed(ActionEvent e) 
		{
            
		}
	}
}

 

 

5. X 버튼을 생성하고, Mainpg() 생성자 위에 ExitDialog를 선언해줍니다.

5. 그리고, X 버튼을 클릭했을 때의 event로 ExitDialog를 생성하고 보이도록 합니다.

 

public class Mainpg extends JPanel
{
	private MainFrame mf;
	
	private ExitDialog ed; // 종료 여부를 묻는 다이얼로그
	
	public Mainpg(MainFrame mf)
	{
		/* 생략 */
    
		// Exit 버튼
		ed = null;
		
		JButton exit = new JButton("X");
		
		exit.setSize(45, 45);
		exit.setLocation(1025, 30);

		exit.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e)
			{
				ed = new ExitDialog(mframe, "Exit"); // ExitDialog 생성
				ed.setVisible(true); // 화면에 보이도록 함
			}
		});
		add(exit);
	}
}

 

 

6. X 버튼을 클릭했을 때 ExitDialog를 생성하는 과정에서 이 코드로 넘어오게 됩니다.

6. - ExitDialog() 생성자는 5번에서 ExitDialog를 생성할 때 넣은 매개변수(인자)를 받아올 수 있도록 합니다.

6. - super()를 사용하여 다이얼로그 창이 뜰 프레임, 다이얼로그의 타이틀을 위에서 받아온 매개변수로 지정합니다.

6. - 버튼을 만들고 추가하는 과정은 4번과 같습니다.

6. - 종료 버튼을 누르면 프로그램이 종료되고, 취소 버튼을 누르면 다이얼로그 창만 사라지도록 합니다.

과정 : X 버튼 클릭 → 5번, ExitDialog 생성 → 6번, ExitDialog에 버튼 추가 → 5번, 다이얼로그가 화면에 보이도록 함

 

/* Dictionary, Search 버튼 이벤트 아래에 위치 */

// 종료 여부를 묻는 다이얼로그
private class ExitDialog extends JDialog
{
	public ExitDialog(JFrame fr, String title)
	{
		super(fr, title, true); // JFrame, 타이틀, modal(모달) 다이얼로그
			
		// 종료 버튼
		JButton exit_btn = new JButton("종료");

		exit_btn.setSize(100, 40);
		exit_btn.setFont(new Font("나눔바른고딕", Font.PLAIN, 20));
		exit_btn.setLocation(50, 100);
			
		exit_btn.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e)
			{
				// 종료 버튼을 눌렀을 때 시스템 종료
				System.exit(0);
			}
		});
		this.add(exit_btn); // 다이얼로그에 버튼 추가
			
		// 취소 버튼
		JButton cancle_btn = new JButton("취소");

		cancle_btn.setSize(100, 40);
		cancle_btn.setFont(new Font("나눔바른고딕", Font.PLAIN, 20));
		cancle_btn.setLocation(200, 100);
			
		cancle_btn.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e)
			{
				// 취소 버튼을 누를 경우 보이지 않게 하고, 객체 삭제
				setVisible(false);
				ed = null;
			}
		});
		this.add(cancle_btn);
	}
}

 

 

7. mf를 이용하여 프레임이 움직이더라도 다이얼로그 창이 가운데에 위치하도록 합니다.

(mf는 메인 프레임이므로 프레임의 현재 위치를 알 수 있습니다.)

 

private class ExitDialog extends JDialog
{
	public ExitDialog(JFrame fr, String title)
	{
		/* 생략 */
    
		setLayout(null); // 배치관리자 삭제
		setSize(350, 200);

		setLocation(getWidth() / 2 + 210 + mf.getLocation().x, 
			getHeight() / 2 + 120 + mf.getLocation().y);
		// 다이얼로그의 위치를 프레임의 가운데에 띄우도록 하는 코드
		// 프레임이 움직이더라도 다이얼로그가 가운데 뜨도록 함
	}
}

 

[메인 프레임 추가]

프레임에서 메인 페이지를 보이도록 해야 하므로 MainFrame의 코드를 아래와 같이 바꿔줍니다.

 

public class MainFrame extends JFrame
{
	private Mainpg m_pg = null; // Mainpg 불러오기
    
	/* 생략 */

	public static void main(String[] args) 
	{
		MainFrame mf = new MainFrame(); // MainFrame 생성
		mf.m_pg = new Mainpg(mf); // Mainpg 생성
		mf.add(mf.m_pg); // MainFrame에 Mainpg 추가
		mf.revalidate(); // 프레임 새로 고침
		mf.repaint(); // 프레임 다시 그리기
		mf.m_pg.requestFocusInWindow(); // Mainpg 포커스 강제 설정
	}
}

 

 

여기까지 작성하셨다면 메인 페이지와 ExitDialog의 모습이 아래 사진처럼 나올 것입니다.

- Dictionary 버튼과 Search 버튼은 눌러도 아무 반응이 없고, X 버튼을 누르면 다이얼로그 창이 나와야 합니다.

- Exit 다이얼로그 창에서 종료, 취소 버튼이 보여야 합니다.

- 종료 버튼을 누르면 프로그램이 종료되고, 취소 버튼을 누르면 다이얼로그 창만 사라져야 합니다.

 

 

 

[메인 페이지 전체 코드]

package main_page;

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class Mainpg extends JPanel
{
	private MainFrame mf;
	
	private ExitDialog ed;
	
	public Mainpg(MainFrame mframe)
	{
		this.mf = mframe;
		setLayout(null);
		
		// Dictionary 버튼
		JButton dict = new JButton("Dictionary");
		
		dict.setSize(250, 70);
		dict.setFont(new Font("나눔바른고딕", Font.PLAIN, 30));
		dict.setLocation(170, 450);
		
		dict.addActionListener(new DictionaryBtn());
		add(dict);
		
		// Search 버튼
		JButton search = new JButton("Search");
		
		search.setSize(250, 70);
		search.setFont(new Font("나눔바른고딕", Font.PLAIN, 30));
		search.setLocation(680, 450);
		
		search.addActionListener(new SearchBtn());
		add(search);
		
		// Exit 버튼
		ed = null;
		
		JButton exit = new JButton("X");
		
		exit.setSize(45, 45);
		exit.setLocation(1025, 30);
		
		exit.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e)
			{
				ed = new ExitDialog(mframe, "Exit");
				ed.setVisible(true);
			}
		});
		add(exit);
	}
	
	// Dictionary 버튼 이벤트
	class DictionaryBtn implements ActionListener 
	{
		public void actionPerformed(ActionEvent e) 
		{
            
		}
	}
	
	// Search 버튼 이벤트
	class SearchBtn implements ActionListener 
	{ 
		public void actionPerformed(ActionEvent e) 
		{
            
		}
	}
	
	// 종료 여부를 묻는 다이얼로그
	private class ExitDialog extends JDialog
	{
		public ExitDialog(JFrame fr, String title)
		{
			super(fr, title, true);
			
			// 종료 버튼
			JButton exit_btn = new JButton("종료");

			exit_btn.setSize(100, 40);
			exit_btn.setFont(new Font("나눔바른고딕", Font.PLAIN, 20));
			exit_btn.setLocation(50, 100);
			
			exit_btn.addActionListener(new ActionListener() {
				public void actionPerformed(ActionEvent e)
				{
					// 종료 버튼을 눌렀을 때 시스템 종료
					System.exit(0);
				}
			});
			this.add(exit_btn);
			
			// 취소 버튼
			JButton cancle_btn = new JButton("취소");

			cancle_btn.setSize(100, 40);
			cancle_btn.setFont(new Font("나눔바른고딕", Font.PLAIN, 20));
			cancle_btn.setLocation(200, 100);
			
			cancle_btn.addActionListener(new ActionListener() {
				public void actionPerformed(ActionEvent e)
				{
					// 취소 버튼을 누를 경우 보이지 않게 하고, 객체 삭제
					setVisible(false);
					ed = null;
				}
			});
			this.add(cancle_btn);

			setLayout(null);
			setSize(350, 200);
            
			setLocation(getWidth() / 2 + 210 + mf.getLocation().x, 
				getHeight() / 2 + 120 + mf.getLocation().y);
		}
	}
}

---

여기까지 잘 따라오셨나요?

메인 페이지 전체를 한 페이지에 담으려니 코드가 많이 길어지게 되었습니다.

코드가 어디에 들어가야 할지 헷갈리신다면 전체 코드를 참고해주세요.

 

다음 글에서는 Visual Studio 단축키가 있는 사이트에서 크롤링을 하고, txt 파일로 저장해보도록 하겠습니다.

다음 글에서 만나요!