[개인 프로젝트] 화면디자인 구성

 

 

실제 존재하는 관리시스템과 최대한 유사하게 프로그램을 구현하는 것이 목표였습니다. 

 

 

그래서 구현한 프로그램의 구조적 특징은 1. 로그인 시스템 2. 작업화면의 탭전환 입니다.

 

 

 

 

 

 

 

 JFrame의 GUI 구현방식은 JFrame에 직접 컴퍼넌트를 넣는 것이 아니라

핸드폰의 보호필름처럼 JFrame에 있는 Layer위*에 컴퍼넌트를 담은 컨테이너를(e.g. JPanel) 씌우는 개념이기 때문에

조건(로그인 유무)에 따라  화면을 볼 수 있게 하였습니다.

 

 

 > JPanel과 같은 Container에 원하는 컴퍼넌트를 배치한 뒤 JFrame의 ContentPane위에 씌우면 원하는 디자인으로 GUI프로그램이 구현됩니다.

 

 

https://docs.oracle.com/javase/tutorial/uiswing/components/toplevel.html

 

 

 

 e.g. 로그인을 통한 JPanel 화면전환

public class LoginPanel extends JPanel {
...
    public LoginPanel() {
        super();
        ...
    }
    
public class WorkPanel extends JPanel {
...
    public WorkPanel() {
        super();
        ...
    }
    
public class ERPsysApp extends JFrame {
    ...
    public boolean isLogOn; // 로그인 상태에 따라 보이는 화면을 지정하기 위한 논리형변수
    
    LoginPanel logPanel;
    WorkPanel workPanel;
    
    public ERPsysApp(String title) {
        super(title);
        ...
        isLogOn=false;
        workPanel = new WorkPanel();
        logPanel = new LoginPanel();
        
        getContentPane().add(workPanel);
        getContentPane().add(logPanel);
        
        workPanel.setVisible(isLogOn);
        ...
        
        // 로그인 패널의 컴퍼넌트에 이벤트핸들러를 추가하여 로그인 조건에 맞으면
        // 화면을 전환하도록 알고리즘 작성
        logPanel.loginBtn.addActionListener(new ActionListener() {

            @Override
            public void actionPerformed(ActionEvent e) {
                if(logPanel.idField.getText().equals(adminId) && logPanel.pwField.getText().equals(adminPw)) {
                    isLogOn = true;
                    logPanel.setVisible(!isLogOn);
                    workPanel.setVisible(isLogOn);
                    
                    setContentPane(workPanel);
                    JOptionPane.showMessageDialog(null, "로그인에 성공하였습니다.");
                    ...
            }
        });
        
        
        workPanel.logoutBtn.addActionListener(new ActionListener() {
			
            @Override
            public void actionPerformed(ActionEvent e) {
                isLogOn = false;
                logPanel.setVisible(!isLogOn);
                workPanel.setVisible(isLogOn);
                
                setContentPane(logPanel);
            	...
            }
        });
    
    ...
    
    }
    
    ...

 

 

 

 접속 후 화면의 디자인은 아래처럼 크게 3부분으로 구분하였습니다.

 

    1. JToolbar     2. JTree     3. JTabbedPane

 

 

 

 

 

 

 JToolbar와 JTree 쪽은 변경 없이 JTree의 노드를 클릭하면 노드값에 해당하는 탭화면이 생성되도록 구현했습니다.

 

 

 <참고>

파일탐색기의 좌측에 폴더를 클릭하면 아래 파일들이 보이는 형태의 구조를 트리구조라고 부르며 폴더를 눌러 확인되는

내용을 노드(Node)라고 합니다.

 

 

    ...
    ...
    ...
    
    // JTree 노드 선택에 따른 탭 생성
    jTree.addTreeSelectionListener(new TreeSelectionListener() {
			
        @Override
        public void valueChanged(TreeSelectionEvent e) {
            DefaultMutableTreeNode selectedNode = (DefaultMutableTreeNode)jTree.getLastSelectedPathComponent();

            if(selectedNode.toString().equals("재고등록")) {
                if(!isRegTab) { // isRegTab은 "재고등록" 탭이 생성되었는지 유무를 나타냅니다.
                    motherTab.addTab("register", regPane);
                    motherTab.setTabComponentAt(motherTab.indexOfTab("register"), tabOne);
                    motherTab.setSelectedIndex(motherTab.indexOfTab("register"));
                    isRegTab=true;
                    
                } else {
                    motherTab.setSelectedIndex(motherTab.indexOfTab("register"));
                }
                
            } else if (selectedNode.toString().equals("재고조회/변경")) {
                if(!isReadTab) {
                    motherTab.addTab("read", readPanel);
                    motherTab.setTabComponentAt(motherTab.indexOfTab("read"), tabTwo);
                    motherTab.setSelectedIndex(motherTab.indexOfTab("read"));
                    isReadTab=true;
                    
                }else {
                    motherTab.setSelectedIndex(motherTab.indexOfTab("read"));
                }
                
            } else return;
        }
    });
    
    // tabCloseOne은 tabOne에 있는 컴퍼넌트 입니다.
    tabCloseOne.addActionListener(new ActionListener() {
			
        @Override
        public void actionPerformed(ActionEvent e) {
            motherTab.remove(motherTab.indexOfTab("register"));
            isRegTab=false;
        }
    });
	
    // tabCloseTwo는 tabTwo에 있는 컴퍼넌트입니다.
    tabCloseTwo.addActionListener(new ActionListener() {
			
        @Override
        public void actionPerformed(ActionEvent e) {
				
            motherTab.remove(motherTab.indexOfTab("read"));
            isReadTab=false;
				
        }
    });
    
    ...

 

 

컨테이너 및 컴포넌트의 사용법은 Language > java 에서 확인해주시길 바랍니다.

---

 깃허브의 erp 디렉토리에서 해당 소스를 확인하실 수 있습니다.   >    erp / gui / WorkPanel.java

 

 

https://github.com/JaewookMun/Itwill

JaewookMun/Itwill