(국비교육) 43 - 자바 그래픽 + jQuery + vs code

■ 패턴

 

패턴이란 되풀이 되는 사건이나 물체의 형태를 말한다. 

즉 계속 반복되는 것을 패턴으로 지정하여 사용하면 편리하다. 

 

https://ko.wikipedia.org/wiki/%ED%8C%A8%ED%84%B4

패턴 - 위키백과, 우리 모두의 백과사전

 

■ 자바 그래픽

 

 

* 자바 그래픽스

- CLI 커맨드 라인 인터페이스 -> 명령치고 그에 반응

EX) cmd 
- GUI 그래픽 유저 인터페이스 

 

* 자바의 그래픽 

- AWT = 해당 OS의 특징을 따라 화면을 구성합니다. -> 운영체제마다 다른 화면

- Swing = 자바에서 화면을 만듭니다. (Look And Feel) -> 모든 운영체제가 같은 화면을 그립니다.

- JAVAFX = RIA 를 디자인하고 테스트, 디버그, 배포까지 가능한 일련의 그래픽과 미디어의 통합 패키지

 

※ 참고

리치 인터넷 애플리케이션(Rich Internet Application; RIA)은 웹 애플리케이션의 장점은 유지하면서 기존 웹 브라우저 기반 인터페이스의 단점인 늦은 응답 속도, 데스크톱 애플리케이션에 비해 떨어지는 조작성 등을 개선하기 위한 기술의 통칭

 

https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%B9%98_%EC%9D%B8%ED%84%B0%EB%84%B7_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98

리치 인터넷 애플리케이션 - 위키백과, 우리 모두의 백과사전

https://www.bodnara.co.kr/bbs/article.html?num=69014 

썬, 자바FX 1.0 플랫폼 발표 :: 보드나라

 

* 용어

 

 

- Container = 자바에서 창 역할을 한다.
한 개 이상의 컨테이너 위에 컨테이너/컨포넌트들이 올라간다. 
컨테이너는 컴포넌트보다 작은 개념
EX) JFrame, window, panel, dialog, applet

- Component = 실제로 컨테이너 위에 올려져 화면 구성을 담당합니다. 

EX) Button, TextField, TextArea, List

 

- LayoutManager = 컨테이너 위에 컴포넌트/컨테이들이 올려질 떄 자리 배치 방법

EX) FlowLayout, BorderLayout, GridLayout, CardLayout....

 

상속을 받을 때는 많이 사용하는 요소를 상속받는 것이 좋다.

화면 생성은 프로그램 초기에 이뤄져야 하므로 주로 생성자로 작업한다.

 

■ AWT 만들어보기

 

 

* 기본코드 

- 프레임.add(컴포넌트);

- 프레임.setSize(int x, int y); : 가로 세로 길이 설정

- 프레임.setVisible(boolean a); :보여주기

 

먼저 Frame 객체를 생성해주고 컴포넌트에 해당하는 버튼 객체도 생성해준다.

이제 프레임에 컴포넌트 추가하고, size 및 보여주기 설정하면 다음과 같이 창이 뜬다. 

 

 

생성자안에 넣어주고 객체를 생성해서 불러줄 수도 있다.

단순히 보여주기만 할 것이기 때문에 변수로 따로 지정하지 않아도 된다. 

 

 

객체 생성을 아예 인스턴스 변수로 넣어도 된다. 

 

■ Swing 만들어보기

 

 

이제 swing 으로도 만들어본다.

조금 더 이쁘게 출력된다. 

 

 

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 누르면 닫기 기능이 추가된다. 

 

■ 메뉴 만들기

 

 

JScrollPane은 스크롤바가 있는 컨테이너로, textArea를 포함하는 스크롤 가능한 뷰를 생성합니다.

 

메뉴바 만들어주고 파일과 도움말 메뉴를 만든다. 

 

 

각 아래에 해당하는 메뉴를 설정해준다. 

 

 

단축키 지정도 가능하다.

getItem(0) 은 새파일 열기 부분이다. 0부터 시작이다.

 

 

add 는 붙인다 개념으로 생각한다.

메뉴바는 특이해서 set 으로 지정해준다.

 

■ Launch4j 이용해보기

 

 

runnable jar 그냥 실행하는 파일이다.

 

 

다음과 같이 jar 파일을 생성해준다. 

 

 

 

다운로드 받는다. 

 

http://launch4j.sourceforge.net/

Launch4j - Cross-platform Java executable wrapper

 

 

우리가 받은 jar 파일 아래에 넣고

output 부분에 exe 넣어서 바꿔준다. 

 

 

다음과 같이 아이콘도 변경 가능하다.

아이콘은 ICO 로 다운받아야 된다. 

 

■ 옵션 설정하기

 

 

extends 는 상속 표기할 때 씀

 

Option01 클래스가 JFrame을 상속받고 있으므로, JFrame의 기능을 사용할 수 있다.

 

super 키워드는 상위 클래스인 JFrame의 생성자를 호출하는 역할

 

JOptionPane의 showMessageDialog를 사용하여,

현재 JFrame을 부모로 하는 다이얼로그 창을 띄우고 "성공했습니다."라는 메시지를 보여준다.

여기서 this는 현재 Option01 객체를 가리킨다.

 

JOptionPane의 showConfirmDialog를 사용하여,

현재 JFrame을 부모로 하는 확인 대화상자를 띄우고 "선택하세요."라는 메시지를 보여줍니다.

사용자가 확인, 취소 또는 닫기 버튼 중 하나를 선택하면 해당 버튼의 값을 반환합니다.

YES는 0, NO는 1, CANCEL은 2로 반환됩니다.

 

JOptionPane의 showInputDialog를 사용하여,

현재 JFrame을 부모로 하는 입력 대화상자를 띄우고 "이름을 입력하세요."라는 메시지를 표시합니다.

사용자가 입력하고 확인 버튼을 누르면, 입력한 문자열을 name 변수에 저장합니다.

 

JOptionPane의 showMessageDialog를 사용하여, 현재 JFrame을 부모로 하는 다이얼로그 창을 띄우고,

사용자가 입력한 이름을 포함한 메시지를 보여줍니다.

 

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);: JFrame을 닫을 때 프로그램이 종료되도록 설정합니다.

 

Option01 클래스의 main 메서드를 실행

 

■ final 만들어보기

 

 

* 레이아웃 설정 

그리드 레이아웃을 생성하여 컴포넌트들을 3x2 그리드 형태로 배치하고,
컴포넌트 간의 수평 및 수직 간격을 10픽셀로 설정합니다.

 

* JLabel 추가

"이름"이라는 텍스트를 가진 JLabel을 생성합니다.

이전에 설정한 텍스트를 "이름은?"으로 변경합니다.

 

 

"버튼입니다."라는 텍스트를 가진 JButton을 생성합니다.

이전에 설정한 텍스트를 "버튼"으로 변경합니다.

 

 

* JFileChooser 추가

파일을 선택할 수 있는 JFileChooser 객체를 생성합니다.

 

* TextField 추가

텍스트 입력을 받을 수 있는 TextField를 생성합니다.

 

* JPanel 추가

JPanel jPanel = new JPanel(); 패널을 생성합니다.

jPanel.setLayout(new GridLayout(1,2)); 이 패널에 1x2 그리드 레이아웃을 설정합니다.

JButton jbtn1 = new JButton("버튼1"); "버튼1"이라는 텍스트를 가진 JButton을 생성합니다.

jPanel.add(jbtn1); JButton을 패널에 추가합니다.

jPanel.add(new JButton("버튼2")); "버튼2"라는 텍스트를 가진 새로운 JButton을 생성하여 패널에 추가합니다. frame.add(jPanel); 위에서 설정한 패널을 JFrame에 추가합니다.

 

 

* 기능추가(ActionListener)

 

"버튼1"에 ActionListener를 추가합니다.

이는 버튼이 클릭되었을 때 수행할 동작을 정의하는 익명 클래스를 생성하여 ActionListener로 등록하는 것을 의미합니다. 이 때 actionPerformed 메서드가 오버라이드되며, 해당 메서드 안에 버튼을 눌렀을 때 수행할 동작들을 정의합니다.

여기서는 jl(Label)의 텍스트와 색상, 그리고 jbtn1(Button)의 글자색을 변경하는 동작들을 수행합니다.

 

 

* JFrame 설정

JFrame의 크기를 가로 800픽셀, 세로 600픽셀로 설정합니다

JFrame을 화면에 보이도록 설정한다.

 

이를 밑에다 둬야지 위에 작업을 한 뒤 만들어주기 떄문에 하단에 둔다. 

 

■ 비만도 구하기

 

 

5줄에 1칸

 

 

1줄에 2칸

 

 

사진에서 nameP.add(heightTF) 는 오타

원래 nameTF 가 들어가야 한다. 

 

package jul31;

import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;

class GUI03 extends JFrame{
	private JTextField nameTF;
	private JTextField heightTF;
	private JTextField weightTF;
	private JButton resultBtn;
	private JButton resetBtn;
	private JLabel resultLb;
	
	public GUI03() {
		setLayout(new GridLayout(5, 1));
		JPanel nameP = new JPanel();
		nameP.setLayout(new GridLayout(1, 2));
		nameP.add(new JLabel("이름"));
		nameTF = new JTextField();
		nameP.add(nameTF);
		add(nameP);
		
		JPanel heightP = new JPanel();
		heightP.setLayout(new GridLayout(1, 2));
		heightP.add(new JLabel("키"));
		heightTF = new JTextField();
		heightP.add(heightTF);
		add(heightP);
		
		JPanel weightP = new JPanel();
		weightP.setLayout(new GridLayout(1, 2));
		weightP.add(new JLabel("몸무게"));
		weightTF = new JTextField();
		weightP.add(weightTF);
		add(weightP);
		
		JPanel buttonP = new JPanel();
		buttonP.setLayout(new GridLayout(1, 2));
		resetBtn = new JButton("초기화");
		buttonP.add(resetBtn);
		resultBtn = new JButton("결과보기");
		buttonP.add(resultBtn);
		add(buttonP);
		
		resultLb = new JLabel("결과값이 여기에 나타납니다.");
		add(resultLb);
		
		//초기화
		resetBtn.addActionListener(new ActionListener() {
			
			@Override
			public void actionPerformed(ActionEvent e) {
				nameTF.setText("");
				heightTF.setText("");
				weightTF.setText("");
			}
		});//초기화 버튼 리스너 끝
		
		//계산하기
		resultBtn.addActionListener(new ActionListener() {
			
			@Override
			public void actionPerformed(ActionEvent e) {
				String name = nameTF.getText() ;
				double ki = Double.parseDouble(heightTF.getText());
				double mon = Double.parseDouble(weightTF.getText());
				
				System.out.println(name);
				System.out.println(ki);
				System.out.println(mon);
				
				//계산하기 (키-100) * 0.9 = 표준몸무게
				//비만도 = (몸무게 / 표준몸무게) * 100
				//120 이상이다 비만
				//80 이하 저체중
				//120 ~ 80 사이는 정상
				
				double stdWeight = (ki-100) * 0.9;
				double bimando = (mon / stdWeight) * 100;
				
				System.out.println(stdWeight);
				System.out.println(bimando);
				
				//진짜 마지막 출력
				if (bimando > 120) {
					resultLb.setText(name + "님, 당신은 비만입니다.");
				} else if (bimando < 80) {
					resultLb.setText(name + "님, 당신은 저체중입니다.");
				} else {
					resultLb.setText(name + "님, 당신은 표준입니다.");
				}
				
			}
		}); //결과보기 리스너 끝
	}
}

public class BMD {
	public static void main(String[] args) {
		GUI03 gui03 = new GUI03();
		gui03.setSize(300,600);
		gui03.setTitle(":비만도프로그램: 0.2");
		gui03.setVisible(true);
		gui03.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	}
}

 

■ Spring 이어하기

 

 

 

해당 스타일로 쉽게 변했다. 

 

 

위에서 jQuery, bootstrap 을 선언해줬기 때문

다음과 같이 버튼 스타일 쉽게 바꿀 수 있다. 

 

 

https://www.codingfactory.net/10731

Bootstrap 4 / Buttons / 버튼 꾸미기

 

 

복사한 부분 vs code 에 복사한다. 

다음과 같이 나온다. 

 

https://jquery.com/download/

Download jQuery | jQuery

 

 

 

위에 선언해줬기 때문에 이제 jQuery 사용이 가능하다. 

 

쿼리 선언은 사진과 같다. 

현재 여기 문서 준비가 다 되었다. 

제이쿼리는 $표시로 시작을 해줘야 구동된다. 

 

 

alert 처리하면 다음과 같이 알람창이 뜬다. 

 

 

원래는 $(document).ready(funcion() {}); 길게 표시했으나,

너무 길다는 항의로 다음과 같이 축약하여 실행되게 바뀌었다. 

 

 

h1 을 클릭한다면 해당 함수가 실행된다는 뜻이다.

 

 

따라서 h1 태그를 클릭하면 다음과 같이 알림이 뜬다. 

 

 

이제 $(선택자).명령(); 을 통해서 각 효과를 줄 수 있다. 

id 는 #p1 으로 표시 가능하며, class 는 .p2로 표시 가능하여 텍스트를 바꿀 수 있다. 

 

range 로 다음과 같이 표시할 수도 있다. 

 

 

누르는 값에 따라 값이 도출된다.

 

 

다음과 같이 기본 51로 설정되 있으나, 

만약 값이 바뀌게 된다면 숫자도 변경된다.

 

change 로 설정하면 해당 부분에 대한 val 값을 나오고

mousemove 로 설정하면 마우스 움직이는 값에 대한 값이 나온다.