DISLab - User contributions [en]

Sangwon Park

2025-03-09T14:04:24Z

Swpark:

[[Image:Sangwon_Park.jpg|right|110px]]
<h2>공학박사 '''박상원'''</h2>

한국외국어대학교 정보통신공학과 교수<br/>
[[File:Sangwon_Park-emailaddr.png]]

2002.2 - 2003.2 : 세종사이버대학교 디지털콘텐츠학과 학과장 전임강사

2003.3 - 현재 : 한국외국어대학교 정보통신공학과 교수

2012.2 - 2014.1 : 한국외국어대학교 정보지원처장

2016.2 - 2017.1 : 한국외국어대학교 융복합소프트웨어전공 주임교수

2019.8 - 2022.1 : 한국외국어대학교 미네르바교양대학장(서울) 겸 미네르바교양대학장(글로벌) 학장

2022.2 - 2023.2 : 한국외국어대학교 Software&AI 주임교수

2024.2 - 현재 : 한국외국어대학교 글로벌캠퍼스 교무처장<br />

서울대학교 학사, 석사, 박사

__NOTITLE__
__NOTOC__

Sangwon Park

2025-03-09T14:02:00Z

Swpark:

[[Image:Sangwon_Park.jpg|right|110px]]
<h2>공학박사 '''박상원'''</h2>

한국외국어대학교 정보통신공학과 교수<br/>
[[File:Sangwon_Park-emailaddr.png]]

2002.2 - 2003.2 : 세종사이버대학교 디지털콘텐츠학과 학과장 전임강사

2003.3 - 현재 : 한국외국어대학교 정보통신공학과 교수

2012.2 - 2014.1 : 한국외국어대학교 정보지원처장

2016.2 - 2017.1 : 한국외국어대학교 융복합소프트웨어전공 주임교수

2019.8 - 2022.1 : 한국외국어대학교 미네르바교양대학(서울,글로벌) 학장

2022.2 - 2023.2 : 한국외국어대학교 Software&AI 주임교수

2024.2 - 현재 : 한국외국어대학교 글로벌캠퍼스 교무처장<br />

서울대학교 학사, 석사, 박사

__NOTITLE__
__NOTOC__

Java 설치

2022-12-22T04:01:37Z

Swpark: /* 환경 변수 설정 */

=== Java 다운로드 ===
* [https://www.oracle.com/java Oracle Java 홈페이지]
* [https://www.oracle.com/java/technologies/downloads 여러 버전의 Java 다운로드]

Java 설치

2022-12-22T04:01:30Z

Swpark: /* 두 가지 버전 설치 */

=== Java 다운로드 ===
* [https://www.oracle.com/java Oracle Java 홈페이지]
* [https://www.oracle.com/java/technologies/downloads 여러 버전의 Java 다운로드]

=== 환경 변수 설정 ===
* JAVA_HOME 환경 변수 설정 (예: JAVA_HOME, C:\Program Files\Java\jdk-11.0.8)
** Windows 10의 경우 다음 메뉴를 선택하여 환경 변수 설정함 : 설정 / 정보 / 고급 시스템 설정 / 환경 변수

[[File:환경변수설정1.jpg|500px|top]]
[[File:환경변수설정2.jpg|300px|top]]
[[File:환경변수설정3.jpg|300px|top]]
[[File:환경변수설정JAVA_PATH.jpg|500px|top]]

Visual Studio Code에서 Java 프로그래밍

2022-12-22T02:48:47Z

Swpark: Created page with "== Java == === Java 언어의 특징 === * High-level, class-based, object-oriented programming language * Write once, run anywhere (WORA) * Java Virtaul Machine (JVM) ** bytecode (compile 된 기계어 코드) * C, C++와 비슷한 문법 * Dynamic capabilitites ** Reflection ** Runtime code modification === 개발 === * Sun Microsystems에 근무하고 있던 James Gosling에 의해 개발됨 * Sun이 [https://www.oracle.com Oracle]에 인수됨 === 역사 === * 1991..."

== Java ==
=== Java 언어의 특징 ===
* High-level, class-based, object-oriented programming language
* Write once, run anywhere (WORA)
* Java Virtaul Machine (JVM)
** bytecode (compile 된 기계어 코드)
* C, C++와 비슷한 문법
* Dynamic capabilitites
** Reflection
** Runtime code modification

=== 개발 ===
* Sun Microsystems에 근무하고 있던 James Gosling에 의해 개발됨
* Sun이 [https://www.oracle.com Oracle]에 인수됨

=== 역사 ===
* 1991년 James Gosling이 interactive television에 사용할 언어로 개발되기 시작함
* Oak (Gosling의 마당에 있던 나무) -> Green -> Java (인도네시아의 자바 커피에서 이름을 따옴)
* 1996년 Java 1.0 발표
* Write once, run anywhere (compile된 후 어느 기계에서나 실행될 수 있도록)
* Java SE (standard edition), Java EE (enterprise edition), Java ME (micro edition)
* 2006년. Sun은 JVM을 GPL 2.0 라이센스로 공개 (free & open-source software)
* 2009년. Oracle이 Sun을 인수하면서 Java 기술도 인수함
* 2016년. JDK 9부터 browser plugin 중단 (그러므로 Stanford Karel이 동작 안함)

=== 설계 원칙 ===
# It must be simple, object-oriented, and familiar.
# It must be robust and secure.
# It must be architecture-neutral and portable.
# It must execute with high performance.
# It must be interpreted, threaded, and dynamic.

----
[https://en.wikipedia.org/wiki/Java_(programming_language) Wikipedia에서 참조]

== Java 설치 ==
{{본문|Java 설치}}

{{:Java 설치}}

== Visual Studio Code 설치 ==
{{본문|Visual Studio Code 설치}}

{{:Visual Studio Code 설치}}

== 기본 예제 프로그램 및 설명 ==
{{본문|기본 예제 프로그램 및 설명}}

{{:기본 예제 프로그램 및 설명}}

File:SimpleKarelClassDiagram.png

2022-11-10T04:58:51Z

Swpark: Swpark uploaded a new version of File:SimpleKarelClassDiagram.png

File:SimpleKarelClassDiagram.png

2022-11-10T04:54:26Z

Swpark: Swpark uploaded a new version of File:SimpleKarelClassDiagram.png

File:SimpleKarelClassDiagram.png

2022-11-10T04:52:35Z

Swpark: Swpark uploaded a new version of File:SimpleKarelClassDiagram.png

File:SimpleKarelClassDiagram.png

2022-11-10T04:38:14Z

Swpark:

Object Oriented Karel Programming Framework based on Stanford Karel

2022-11-10T04:37:55Z

Swpark:

== Stanford Karel ==
[https://cs.stanford.edu/people/eroberts/karel-the-robot-learns-java.pdf Karel]은 Stanford 대학교에서 학생들이 Java로 프로그래밍 개념을 익히는데 도움을 주기 위하여 만든 Java 라이브러리이다. 이것은 [https://cs.stanford.edu/people/eroberts/jtf/ ACM Java Task Force]에서 만든 라이브러리를 이용하여 작성되었다. 그런데 이 라이브러리는 Applet을 이용하기 때문에 [https://www.oracle.com/kr/java/technologies/javase-java-archive-javase6-downloads.html JDK 6] 이후의 버전에서는 동작하지 않는다. JDK 7 버전을 이용하면 실행하였을 때 빈 화면만 나온다. 그러므로 Karel 프로그래밍을 하려면 반드시 [https://www.oracle.com/kr/java/technologies/javase-java-archive-javase6-downloads.html JDK 6 버전]을 설치하고 이를 이용하여 컴파일 및 실행을 하여야 한다.

* Karel Java library by Stanford University : [[media:karel.jar | karel.jar]]

Karel 프로그램은 [https://www.eclipse.org/ eclipse] 혹은 [https://code.visualstudio.com/ Visual Studio Code]를 이용하여 작성한다.

== HUFS Karel ==
Stanford Karel은 함수 중심의 프로그래밍 기법을 익히기에는 좋은 도구이지만, 객체지향 프로그래밍을 익히기에는 적합하지 않다. 그래서 이 Karel 라이브러리를 객체지향 프로그래밍 방법으로 코딩할 수 있도록 라이브러리를 만들었다. HUFS Karel에서 주요한 클래스는 HProgram, HObject, HKarel이다. HProgram은 Karel 프로그램을 준비하고 실행하는 클래스이다. HObject 객체를 만들어 HProgram에서 동작시킬 수 있다. HObject는 추상 클래스로서 이를 계승 받아 프로그래머가 다양한 객체를 만들어 사용할 수 있다. 기본적으로 Stanford Karel의 SuperKarel과 기능이 동일한 HKarel을 제공한다.

이들을 이용한 간단한 프로그램의 예는 다음과 같다.

<syntaxhighlight lang="java">
import hufs.karel.HKarel;
import hufs.karel.HProgram;

public class SimpleProgram extends HProgram {
@Override
protected void onStart() {
HKarel karel = (HKarel)get("John");
karel.move();
}

public static void main(String[] args) {
HProgram.main(args, new HKarel("John"));
}
}
</syntaxhighlight>

프로그램을 실행하기 위하여 HProgram을 계승 받은 SimpleProgram 클래스를 정의하였다. 프로그램을 실행하면 main 함수가 실행된다.

[[image:SimpleKarelClassDiagram.png]]

Maven Project 생성

2022-11-03T18:21:51Z

Swpark: /* pom.xml에 Karel 라이브러리 추가 */

=== Karel을 위한 프로젝트 생성 ===
아래 그림과 같이 새로운 프로젝트를 생성한다.

<gallery>
file:maven-01.png | 1. 새로운 프로젝트를 생성한다. 탐색기 MAVEN에서 +를 누른 후 maven-archetype-quickstart 선택
file:maven-02.png | 2. 1.4 선택
file:maven-03.png | 3. 생성할 예제의 package 명을 입력한다. 그림에서는 <code>hufs.ice.cp</code>를 입력
file:maven-04.png | 4. artifact id 입력. 예제에서는 <code>example</code>을 입력
file:maven-05.png | 5. 프로젝트 폴더를 선택함. 기존에 연습중이던 프로젝트의 폴더를 선택하거나 새로운 폴더를 선택함
file:maven-06.png | 6. 터미널 창에서 생성하는 프로젝트의 버전을 지정하는데, <code>1.0</code>을 입력하고 다음 질문에는 <code>Y</code>를 선택한다.
file:maven-07.png | 7. 프로젝트를 기존 Workspace에 추가할 지 묻는다. <code>Add to Workspace</code>를 선택하여 기존 Workspace에 추가한다.
file:maven-08.png | 8. 추가한 모습. 정상적으로 보이지 않으면 vscode를 다시 실행한다.
file:maven-09.png | 9. pom.xml 파일에서 Jave 버전은 <code>1.6</code>으로 변경한다. 그렇게 해야 Karel이 동작한다.
</gallery>

=== pom.xml에 Karel 라이브러리 추가 ===
Maven에서 프로젝트에 대한 명세가 pom.xml에 기술되어 있다. 여기에서 필요한 항목을 추가하도록 한다.

* 먼저 Java 1.6으로 컴파일, 실행을 해야 한다. 이것은 아래 명세에서 다음을 변경한다.
<syntaxhighlight lang="xml">
<maven.compiler.source>1.6</maven.compiler.source>
<maven.compiler.target>1.6</maven.compiler.target>
</syntaxhighlight>

* 두 번째로 Karel.jar와 Hufs-karel.jar를 다운로드 받는다. 그리고 방금 만든 프로젝트 폴더에 <code>lib</code> 폴더를 생성한 후, 이 폴더에 다운로드 받은 두 개의 jar 파일을 이 폴더에 저장한다.

* 세 번째로 Stanford Karel 라이브러리를 프로젝트에서 사용할 수 있도록 추가한다. dependencies 엘리먼트에 다음을 추가한다. 여기서 groupId와 artifactId는 적당한 이름으로 저장하도록 한다. version도 1.0으로 적절하게 지정한다. systemPath에서 project.basedir은 프로젝트가 있는 최상위 폴더를 뜻한다.
<syntaxhighlight lang="xml">
<dependency>
<groupId>karel</groupId>
<artifactId>stanford</artifactId>
<version>1.0</version>
<scope>system</scope>
<systemPath>${basedir}/lib/Karel.jar</systemPath>
</dependency>
</syntaxhighlight>

* 마지막으로 Hufs Karel 라이브러리를 다음과 같이 추가한다.
<syntaxhighlight lang="xml">
<dependency>
<groupId>karel</groupId>
<artifactId>hufs</artifactId>
<version>1.0</version>
<scope>system</scope>
<systemPath>${basedir}/lib/Hufs-karel.jar</systemPath>
</dependency>
</syntaxhighlight>

=== pom.xml에서 수정하는 부분 ===
<syntaxhighlight lang="xml">
...

<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.6</maven.compiler.source>
<maven.compiler.target>1.6</maven.compiler.target>
</properties>

<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>karel</groupId>
<artifactId>stanford</artifactId>
<version>1.0</version>
<scope>system</scope>
<systemPath>${basedir}/lib/Karel.jar</systemPath>
</dependency>
<dependency>
<groupId>karel</groupId>
<artifactId>hufs</artifactId>
<version>1.0</version>
<scope>system</scope>
<systemPath>${basedir}/lib/Hufs-karel.jar</systemPath>
</dependency>
</dependencies>

...
</syntaxhighlight>

Maven Project 생성

2022-11-03T18:20:25Z

Swpark: /* pom.xml에서 수정하는 부분 */

=== Karel을 위한 프로젝트 생성 ===
아래 그림과 같이 새로운 프로젝트를 생성한다.

<gallery>
file:maven-01.png | 1. 새로운 프로젝트를 생성한다. 탐색기 MAVEN에서 +를 누른 후 maven-archetype-quickstart 선택
file:maven-02.png | 2. 1.4 선택
file:maven-03.png | 3. 생성할 예제의 package 명을 입력한다. 그림에서는 <code>hufs.ice.cp</code>를 입력
file:maven-04.png | 4. artifact id 입력. 예제에서는 <code>example</code>을 입력
file:maven-05.png | 5. 프로젝트 폴더를 선택함. 기존에 연습중이던 프로젝트의 폴더를 선택하거나 새로운 폴더를 선택함
file:maven-06.png | 6. 터미널 창에서 생성하는 프로젝트의 버전을 지정하는데, <code>1.0</code>을 입력하고 다음 질문에는 <code>Y</code>를 선택한다.
file:maven-07.png | 7. 프로젝트를 기존 Workspace에 추가할 지 묻는다. <code>Add to Workspace</code>를 선택하여 기존 Workspace에 추가한다.
file:maven-08.png | 8. 추가한 모습. 정상적으로 보이지 않으면 vscode를 다시 실행한다.
file:maven-09.png | 9. pom.xml 파일에서 Jave 버전은 <code>1.6</code>으로 변경한다. 그렇게 해야 Karel이 동작한다.
</gallery>

=== pom.xml에 Karel 라이브러리 추가 ===
Maven에서 프로젝트에 대한 명세가 pom.xml에 기술되어 있다. 여기에서 필요한 항목을 추가하도록 한다.

* 먼저 Java 1.6으로 컴파일, 실행을 해야 한다. 이것은 아래 명세에서 다음을 변경한다.
<syntaxhighlight lang="xml">
<maven.compiler.source>1.6</maven.compiler.source>
<maven.compiler.target>1.6</maven.compiler.target>
</syntaxhighlight>

* 두 번째로 Karel.jar와 Hufs-karel.jar를 다운로드 받는다. 그리고 방금 만든 프로젝트 폴더에 <code>lib</code> 폴더를 생성한 후, 이 폴더에 다운로드 받은 두 개의 jar 파일을 이 폴더에 저장한다.

* 세 번째로 Stanford Karel 라이브러리를 프로젝트에서 사용할 수 있도록 추가한다. dependencies 엘리먼트에 다음을 추가한다. 여기서 groupId와 artifactId는 적당한 이름으로 저장하도록 한다. version도 1.0으로 적절하게 지정한다. systemPath에서 project.basedir은 프로젝트가 있는 최상위 폴더를 뜻한다.
<syntaxhighlight lang="xml">
<dependency>
<groupId>stanfordkarel</groupId>
<artifactId>stanfordkarel</artifactId>
<version>1.0</version>
<scope>system</scope>
<systemPath>${project.basedir}/lib/Karel.jar</systemPath>
</dependency>
</syntaxhighlight>

* 마지막으로 Hufs Karel 라이브러리를 다음과 같이 추가한다.
<syntaxhighlight lang="xml">
<dependency>
<groupId>hufskarel</groupId>
<artifactId>hufskarel</artifactId>
<version>1.0</version>
<scope>system</scope>
<systemPath>${project.basedir}/lib/Hufs-karel.jar</systemPath>
</dependency>
</syntaxhighlight>

=== pom.xml에서 수정하는 부분 ===
<syntaxhighlight lang="xml">
...

<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.6</maven.compiler.source>
<maven.compiler.target>1.6</maven.compiler.target>
</properties>

<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>karel</groupId>
<artifactId>stanford</artifactId>
<version>1.0</version>
<scope>system</scope>
<systemPath>${basedir}/lib/Karel.jar</systemPath>
</dependency>
<dependency>
<groupId>karel</groupId>
<artifactId>hufs</artifactId>
<version>1.0</version>
<scope>system</scope>
<systemPath>${basedir}/lib/Hufs-karel.jar</systemPath>
</dependency>
</dependencies>

...
</syntaxhighlight>

컴퓨터프로그래밍및실습 (2022년)/0919

2022-09-26T09:04:22Z

Swpark: /* 향상된 for 문 */

== 데이터 타입 분류 ==
# 기본 타입(primitive type)
#* 정수 타입
#** byte
#** char
#** short
#** int
#** int
#** long
#* 실수 타입
#** float
#** double
#* 논리 타입
#** boolean
# 참조 타입(reference type)
#* 배열 타입(array type)
#* 열거 타입(enumeration type)
#* 클래스(class)
#* 인터페이스(interface)

<syntaxhighlight lang="java">
// 기본 타입 변수
int age = 25;
double price = 100.5

// 참조 타입 변수(reference type variable)
String name = "신용권"; // 객체는 힙(heap) 영역에 존재한다.
String hobby = "독서";
</syntaxhighlight>

* 참조 변수인 name에는 "신용권" 객체가 저장되어 있는 메모리의 주소가 저장되어 있다.
* 교재 p.139 그림 참조

== 메모리 사용 영역 ==
* 교재 p.140 그림 참조

# 메소드(method) 영역
#* Java 소스 코드(XXX.java)를 컴파일하여 만들어진 실행 코드(bytecode) (XXX.class)가 적재된 메모리 영역
#* 클래스 로더(class loader)가 class 파일을 읽어 메모리에 올림
#* 상수풀(runtime constant pool), 필대(field) 데이터, 메소드(method) 데이터, 메소드 코드, 생성자(construct) 코드 등 실행에 필요한 바이트코드 및 상수, 전역 변수(클래스 변수, class field)
# 힙(heap) 영역
#* 프로그래머가 생명 주기(life time)을 제어할 수 있는 메모리가 위치하는 영역임
#* new 연산자를 이용하여 생성하는 객체
#* 배열, String도 객체이므로 힙에 존재함
#* new 연사자를 호출하여 객체를 생성하면 만들어지고, garbage가 되면 사라짐
# 스택(stack) 영역
#* 스택 영역은 스레드 마다 독립적으로 존재함
#* 특별히 스레드를 만들지 않았다면 main 메소드가 실행되고 있는 main 스레드만 존재하므로 스택 영역도 하나임
#* 메소드의 인자, 지역 변수(local variable), 리턴 값, 리턴 주소가 저장됨. 이를 activation record라 부름.
#* p.142 그림 참조

* 아래 코드에서 (1), (2), (3) 지점에서의 스택 영역의 형태는?
<syntaxhighlight lang="java">
char v1 = 'A'; // (1)

if (v1 == 'A') { // (2)
int v2 = 100;
double v3 = 3.14;
}

boolean v4 = true; // (3)
</syntaxhighlight>

== 참조 변수의 <nowikI>==</nowiki>, <nowiki>!=</nowiki> 연산 ==
* 교재 p.143 그림 참조
<syntaxhighlight lang="java">
refVar1 = 객체_1;
refVar2 = 객체_2;
refVar3 = 객체_2;

refVar1 == refVar2 // 결과 : false
refVar1 != refVar2 // 결과 : true

refVar2 == refVar3 // 결과 : true
refVar2 != refVar3 // 결과 : false
</syntaxhighlight>

== null과 NullPointerException ==
<syntaxhighlight lang="java">
refVar1 = 객체_1;
refVar2 = null;

refVar1 == null // 결과 : false
refVar1 != null // 결과 : true

refVar2 == null // 결과 : true
refVar2 != null // 결과 : false

int[] intArray = null;
intArray[0] = 10; // NullPointerException 발생

String str = null;
System.out.println("총 문자수 : " + str.length()); // NullPointerException 발생
</syntaxhighlight>

== String 타입 ==
* String은 상수 객체이다. 왜냐하면 String에는 자신이 가진 값을 변경하는 메소드가 없기 때문이다.
<syntaxhighlight lang="java">
String 변수 = "문자열";

String name;
name = "신용권";

String hobby = "자바";
hobby = null; // garbage가 된다.

String name1 = "신용권";
String name2 = "신용권"; // 리터럴이 동일하면 동일한 객체를 가리킴

name1 = "신민철";
name2 = "신민철";
String name3 = new String("신민철");

boolean result = name1 == name2; // true
result = name1 == name3; // false
result = name1.equals(name3); // true;
</syntaxhighlight>

== 배열 타입 ==
* 동일한 타입을 여러 개 만들어야 할 때

=== 배열이라? ===
* 다음은 성가시다.
<syntaxhighlight lang="java">
int score1 = 83;
int score2 = 90;
int score3 = 87;
int score4 = 99;
int score5 = 48;
int score6 = 21;
int score7 = 38;
int score8 = 83;
int score9 = 78;
int score10 = 92;
int score11 = 95;
int score12 = 29;
int score13 = 55;
int score14 = 66;
int score15 = 88;
int score16 = 77;
int score17 = 44;
int score18 = 34;
int score19 = 84;
int score20 = 81;
int score21 = 60;
int score22 = 85;
int score23 = 44;
int score24 = 23;
int score25 = 84;
int score26 = 48;
int score27 = 40;
int score28 = 58;
int score29 = 78;
int score30 = 75;
</syntaxhighlight>

* 평균을 구하고자 한다면 코드를 어떻게 작성해야 하나?
<syntaxhighlight lang="java">
int sum = score1;
sum += score2;
sum += score3;
sum += score4;
sum += score5;
sum += score6;
sum += score7;
sum += score8;
sum += score9;
sum += score10;
sum += score11;
sum += score12;
sum += score13;
sum += score14;
sum += score15;
sum += score16;
sum += score17;
sum += score18;
sum += score19;
sum += score20;
sum += score21;
sum += score22;
sum += score23;
sum += score24;
sum += score25;
sum += score26;
sum += score27;
sum += score28;
sum += score29;
sum += score30;

int avg = sum / 30;
</syntaxhighlight>

* 얼마나 번거러운가? 아래와 같이 바꿔보자.

<syntaxhighlight lang="java">
// score는 배열이다.
int[] score = {83, 90, 87, 99, 48, 21, 38, 83, 78, 92, 95, 29, 55, 66, 88, 77, 44, 34, 84, 81, 60, 85, 44, 23, 84, 48, 40, 58, 78, 75};

int sum = 0;
for(int i = 0; i < score.length; i++) // 여기서 score.length는 30
sum += score[i]; // score[0]는 83, score[1]은 90 ...
int avg = sum / score.length;
</syntaxhighlight>

* 왜 배열이 필요한지 이해가 되는가?

=== 배열 선언 ===

* 두 표현은 동일하다.
<table2 class=wikitable sep=bar align=lllllll>
int[] intArray; | int intArray[];
double[] doubleArray; | double doubleArray[];
String[] strArray; | String strArray[]
</table2>

* 참고할 배열이 없다면 <code>null</code>로 지정한다.
<syntaxhighlight lang="java">
int[] intArray = null;
</syntaxhighlight>

=== 값 목록으로 배열 선언 ===
<syntaxhighlight lang="java">
String[] names = { "신용권", "홍길동", "감자바" };

names[1] = "홍삼원";

//--------------------------------------

String[] names = null;
names = new String[] { "신용권", "홍길동", "감자바" };

//--------------------------------------

// 다음과 같은 add 메소드가 있다면
int add(int[] scores) {
int sum = 0;
for(int i = 0; i < scores.length; i++)
sum += scores[i];
return sum;
}

// 이를 호출하는 방법으로
int result = add( {95, 85, 90} ); // 컴파일 에러 발생

int result = add( new int[] {95, 85, 90} ); // OK
</syntaxhighlight>

=== new 연산자로 배열 생성 ===
<syntaxhighlight lang="java">
int[] scores = new int[30]; // 앞의 예제에서 빈 배열을 만들고자 한다면. 모두 0으로 초기화된다.
scores[0] = 83; // 인덱스는 0부터 시작한다.
scores[1] = 90;
scores[2] = 75;

String[] names = new String[30]; // 모두 null로 초기화된다.
names[0] = "신용권";
names[1] = "홍길동";
names[2] = "감자바";
</syntaxhighlight>

=== 배열 길이 ===
<syntaxhighlight lang="java">
int[] intArray = { 10, 20, 30 };
System.out.println(intArray.length); // 3이 출력됨

intArray.length = 10; // 에러. length는 상수이다. 즉, 값을 변경할 수 없다.
</syntaxhighlight>

=== 커맨드 라인(command line) 입력 ===
* 명령창에서 다음과 같이 Java 프로그램 실행
<syntaxhighlight lang="text">
C:> java MainStringArrayArgument 10 20
</syntaxhighlight>

* 코드
<syntaxhighlight lang="java">
public class MainStringArrayArgument {
public static void main(String[] args) {
if (args.length != 2) { // 입력 데이터가 2개가 아닌 경우
System.out.println("Usage: java MainStringArrayArgument num1 num2");
System.exit(0); // 프로그램 강제 종료
}

String strNum1 = args[0];
String strNum2 = args[1];

int num1 = Integer.parseInt(strNum1); // Integer 클래스의 parseInt 메소드를 이용하여 문자열을 정수로 변환
int num2 = Integer.parseInt(strNum2);

int result = num1 + num2;
System.out.println(num1 + "+" + num2 + "=" + result);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
10+20=30
</syntaxhighlight>

=== 다차원 배열 ===
<syntaxhighlight lang="java">
int[][] scores = new int[2][3];

System.out.println(scores.length); // 2
System.out.println(scores[0].length); // 3
System.out.println(scores[1].length); // 3

//--------------------------------------------

int[][] scores = new int[2][];
scores[0] = new int[2];
scores[1] = new int[3];

System.out.println(scores.length); // 2
System.out.println(scores[0].length); // 2
System.out.println(scores[1].length); // 3

//--------------------------------------------
// 다차원 배열 초기화

int[][] scores = { {95, 80}, {92, 96} };

System.out.println( scores[0][0] ); // 95
System.out.println( scores[1][1] ); // 96

int[][] javaScores = { {95, 80}, {92, 96, 80} };

for(int i = 0; i < javaScores.length; i++) {
for(int k = 0; k < javaScores[i].length; k++) {
System.out.println( javaScores[i][k] );
}
}
</syntaxhighlight>

=== 배열 복사 ===
* 예제 코드
<syntaxhighlight lang="java">
public class ArrayCopyExample {
public static void main(String[] args) {
// for 문 이용

int[] oldIntArray = { 1, 2, 3 };
int[] newIntArray = new int[5];

for(int i = 0; i < oldIntArray.length; i++)
newIntArray[i] = oldIntArray[i];

for(int i = 0; i < newIntArray.length; i++)
System.out.print(newIntArray[i] + "," );

System.out.println();

// arraycopy 이용
String[] oldStrArray = { "java", "array", "copy" };
String[] newStrArray = new String[5];

System.arraycopy(oldStrArray, 0, newStrArray, 0, oldIntArray.length); // p.169 그림 참조

for(int i = 0; i < newStrArray.length; i++)
System.out.print(newStrArray[i] + ", ");

System.out.println();
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
1,2,3,0,0,
java, array, copy, null, null,
</syntaxhighlight>

=== 향상된 for 문 ===
<syntaxhighlight lang="java">
public class ArrayCopyExample {
public static void main(String[] args) {
// for 문 이용

int[] oldIntArray = { 1, 2, 3 };
int[] newIntArray = new int[5];

for(int i = 0; i < oldIntArray.length; i++)
newIntArray[i] = oldIntArray[i];

for(int value : newIntArray) // ← 배열 전체를 스캔하는데 인덱스가 필요없음
System.out.print(value + "," );
System.out.println();

// arraycopy 이용
String[] oldStrArray = { "java", "array", "copy" };
String[] newStrArray = new String[5];

System.arraycopy(oldStrArray, 0, newStrArray, 0, oldIntArray.length);

for(String str : newStrArray) // ← 배열 전체를 스캔하는데 인덱스가 필요없음
System.out.print(str + ", ");
System.out.println();
}
}
</syntaxhighlight>

== 열거 타입(Enumeration Type) ==
* Java에서 이름 짓는 법
<table2 class=wikitable head=top sep=bar align=lll>
종류 | 예 | 설명
변수 | name | 소문자를 이용하여 짓는다. 영어가 아닌 한국어로 변수 이름을 지어도 되지만 관례적으로 로마자를 사용한다.
| myName, myFirstName | 두 개의 단어가 연이어 나오면 새로운 단어의 시작은 대문자로 한다.
메소드 | move() | 소문자로 짓는다. 이름 뒤에 연이어 괄호가 나오기 때문에 이름으로 변수와 메소드를 구분할 수 있다.
| moveLeft() | 두 개의 단어가 연이어 나오면 새로운 단어의 시작은 대문자로 한다.
클래스, 인터페이스, 열거형 | Car | 시작 문자를 대문자로 한다.
| BlueCar | 두 개의 단어가 연이어 나오면 새로운 단어의 시작은 대문자로 한다.
상수(static final) | COLOR | 모든 문자를 대문자로 한다.
| BLUE_COLOR | 두 개의 단어가 연이어 나오면 단어 사이에 _를 붙인다.
</table2>

=== 열거 타입 선언 ===

* 상수를 여러 개 만들고 싶을 때
<syntaxhighlight lang="java">
public enum Week { MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY, SUNDAY };

public enum LoginResult { LOGIN_SUCCESS, LOGIN_FAILED };

Week today;
Week reservationDay;
Week birthday = null;

today = Week.SUNDAY;

if (today == Week.SUNDAY) { // true
</syntaxhighlight>

* Calendar 객체를 이용한 열거형 연습
<syntaxhighlight lang="java">
Calendar now = Calendar.getInstance();

int year = now.get(Calendar.YEAR); // 년
int month = now.get(Calendar.MONTH) + 1; // 월
int day = now.get(Calendar.DAY_OF_MONTH); // 일
int week = now.get(Calendar.DAY_OF_WEEK); // 요일 (1~7)
int hour = now.get(Calendar.HOUR); // 시간
int minute = now.get(Calendar.MINUTE); // 분
int second = now.get(Calendar.SECOND); // 초
</syntaxhighlight>

=== 열거 객체의 메소드 ===
* 열거 객체는 java.lang.Enum 클래스로부터 상속받음.

<table2 class=wikitable head=top sep=bar align=lll>
리턴 타입 | 메소드(매개 변수) | 설명
String | name() | 열거 객체의 문자열을 리턴
int | ordinal() | 열거 객체의 순번(0부터 시작)을 리턴
int | compareTo() | 열거 객체를 비교하여 순번 차이를 리턴
열거 타입 | valueOf(String name) | 주어진 문자열의 열거 객체를 리턴
열거 배열 | values() | 모든 열거 객체들을 배열로 리턴
</table2>

<syntaxhighlight lang="java">
Week today = Week.SUNDAY;

String name = today.name(); // "SUNDAY"

int ordinal = today.ordinal(); // 6. 0부터 시작하여 6번째 데이터라는 뜻임

Week day1 = Week.MONDAY;
Week day2 = Week.WEDNESDAY;

int result1 = day1.compareTo(day2); // -2 (0 - 2)
int result2 = day2.compareTo(day1); // 2 (2 - 0)

Week weekDay = Week.valueOf("SATURDAY"); // Week.SATURDAY

Week[] days = Week.values();
for(Week day : days)
System.out.println(day);
</syntaxhighlight>

[[category:컴퓨터프로그래밍및실습]]

기본 Karel 프로그램 예제

2022-09-22T04:22:37Z

Swpark: /* 두 번째 HUFS Karel 프로그램 수정 버전 */

=== Karel 라이브러리 ===
* [[media:karel.jar | Stanford Karel Library (karel.jar)]]
* <del>[[media:hufs-karel.jar | HUFS Karel Library (hufs-karel.jar)]]</del>
* [[media:hufs-karel-220915.jar | HUFS Karel Library 2022.09.15 Version (hufs-karel-220915.jar)]]

이 라이브러리는 Java 6 이하의 버전에서만 실행된다. 그 이유는 Java Applet을 이용하기 때문인데, Java 7부터 Applet이 제거되어 Applet은 이후 버전에서는 더 이상 동작하지 않는다. Java 7 이후 버전으로 Karel을 실행하면 빈 화면만 등장한다.

=== 첫 번째 HUFS Karel 프로그램 ===

[[File:HKarel 초기 화면.png|thumb|첫 번째 HUFS Karel 실행 화면]]
<syntaxhighlight lang="java">
import hufs.karel.HKarel;
import hufs.karel.HufsProgram;

public class FirstHKarelProgram extends HufsProgram {

@Override
protected void onStart() {
HKarel karel = (HKarel)getHObject("철수");

karel.move();
karel.move();
}

public static void main(String[] args) {
HufsProgram.main(args, new HKarel("철수"));
}

}
</syntaxhighlight>

* Start 버튼을 누르면 <code>onStart</code>가 실행된다.
* <code>HufsProgram.main</code>에서 인자로 전달한 <code>HKarel("철수")</code>는 <code>getHObject("철수")</code>를 통하여 구할 수 있다.

=== 두 번째 HUFS Karel 프로그램 ===

[[File:SecondHKarelProgram 실행 화면.png|thumb|SecondHKarelProgram 실행 화면]]
[[File:SecondHKarelProgram 에러 화면.png|thumb|SecondHKarelProgram 실행할 경우 발생하는 오류]]
<syntaxhighlight lang="java">
import hufs.karel.HKarel;
import hufs.karel.HufsProgram;

public class SecondHKarelProgram extends HufsProgram {

HKarel karel;

@Override
protected void onInit() {
karel = new HKarel("철수", 5, 5);
}

@Override
protected void onStart() {
while (true) {
if (karel.frontIsBlocked())
karel.turnLeft();
karel.move();
}
}

public static void main(String[] args) {
HufsProgram.main(args, null);
}

}
</syntaxhighlight>

* <code>HufsProgram.main</code> 메소드에서 두 번째 인자로 <code>null</code>을 두었다. 이것은 Karel 객체를 전달하지 않는다는 뜻이다.
* Start 버튼을 누르기 전에 <code>onInit()</code>가 실행된다. 그러므로 Start 버튼을 누르기 전에 초기화 해야 할 코드는 이곳에 작성한다. 여기에서 <code>HKarel</code> 객체를 생성하였다. 하지만 이 객체를 월드에 추가하지는 않았다.
* Start 버튼을 누르면 <code>onStart()</code>가 실행된다.
* <code>add()</code> 메소드를 이용하여 생성한 Karel을 월드에 추가하지 않았기 때문에 오류가 난다.

=== 세 번째 HUFS Karel 프로그램 수정 버전 ===

생성한 객체를 월드에 추가해야 나타남

[[File:SecondHKarelProgram 실행 화면 2.png|thumb|수정한 SecondHKarelProgram 실행 화면]]
<syntaxhighlight lang="java">
import hufs.karel.HKarel;
import hufs.karel.HufsProgram;

public class SecondHKarelProgram extends HufsProgram {

HKarel karel;

@Override
protected void onInit() {
karel = new HKarel("철수", 5, 5);
karel.setColor(BLUE);
karel.setColorOfBody(YELLOW);
karel.setColorOfFoot(GREEN);
karel.setColorOfMouth(RED);
add(karel); // 생성한 HKarel을 월드에 추가
}

@Override
protected void onStart() {
while (true) {
if (karel.frontIsBlocked())
karel.turnLeft();
karel.move();
}
}

public static void main(String[] args) {
HufsProgram.main(args, null);
}

}
</syntaxhighlight>

* 위 예제와 동일한 코드이나, <code>add(karel)</code>을 실행하여 생성한 객체를 월드에 추가하도록 하였다. 그러므로 이 객체가 월드에 있어야만 사용할 수 있는 <code>move()</code> 메소드를 사용할 수 있게 되었다.

File:Hufs-karel-220915.jar

2022-09-15T04:43:33Z

Swpark: category:Karel

== Summary ==
[[category:Karel]]

기본 Karel 프로그램 예제

2022-09-15T04:42:54Z

Swpark: /* Karel 라이브러리 */

=== Karel 라이브러리 ===
* [[media:karel.jar | Stanford Karel Library (karel.jar)]]
* <del>[[media:hufs-karel.jar | HUFS Karel Library (hufs-karel.jar)]]</del>
* [[media:hufs-karel-220915.jar | HUFS Karel Library 2022.09.15 Version (hufs-karel-220915.jar)]]

이 라이브러리는 Java 6 이하의 버전에서만 실행된다. 그 이유는 Java Applet을 이용하기 때문인데, Java 7부터 Applet이 제거되어 Applet은 이후 버전에서는 더 이상 동작하지 않는다. Java 7 이후 버전으로 Karel을 실행하면 빈 화면만 등장한다.

=== 첫 번째 HUFS Karel 프로그램 ===

[[File:HKarel 초기 화면.png|thumb|첫 번째 HUFS Karel 실행 화면]]
<syntaxhighlight lang="java">
import hufs.karel.HKarel;
import hufs.karel.HufsProgram;

public class FirstHKarelProgram extends HufsProgram {

@Override
protected void onStart() {
HKarel karel = (HKarel)getHObject("철수");

karel.move();
karel.move();
}

public static void main(String[] args) {
HufsProgram.main(args, new HKarel("철수"));
}

}
</syntaxhighlight>

* Start 버튼을 누르면 <code>onStart</code>가 실행된다.
* <code>HufsProgram.main</code>에서 인자로 전달한 <code>HKarel("철수")</code>는 <code>getHObject("철수")</code>를 통하여 구할 수 있다.

=== 두 번째 HUFS Karel 프로그램 ===

[[File:SecondHKarelProgram 실행 화면.png|thumb|SecondHKarelProgram 실행 화면]]
[[File:SecondHKarelProgram 에러 화면.png|thumb|SecondHKarelProgram 실행할 경우 발생하는 오류]]
<syntaxhighlight lang="java">
import hufs.karel.HKarel;
import hufs.karel.HufsProgram;

public class SecondHKarelProgram extends HufsProgram {

HKarel karel;

@Override
protected void onInit() {
karel = new HKarel("철수", 5, 5);
}

@Override
protected void onStart() {
while (true) {
if (karel.frontIsBlocked())
karel.turnLeft();
karel.move();
}
}

public static void main(String[] args) {
HufsProgram.main(args, null);
}

}
</syntaxhighlight>

* <code>HufsProgram.main</code> 메소드에서 두 번째 인자로 <code>null</code>을 두었다. 이것은 Karel 객체를 전달하지 않는다는 뜻이다.
* Start 버튼을 누르기 전에 <code>onInit()</code>가 실행된다. 그러므로 Start 버튼을 누르기 전에 초기화 해야 할 코드는 이곳에 작성한다. 여기에서 <code>HKarel</code> 객체를 생성하였다. 하지만 이 객체를 월드에 추가하지는 않았다.
* Start 버튼을 누르면 <code>onStart()</code>가 실행된다.
* <code>add()</code> 메소드를 이용하여 생성한 Karel을 월드에 추가하지 않았기 때문에 오류가 난다.

=== 두 번째 HUFS Karel 프로그램 수정 버전 ===

생성한 객체를 월드에 추가해야 나타남

[[File:SecondHKarelProgram 실행 화면 2.png|thumb|수정한 SecondHKarelProgram 실행 화면]]
<syntaxhighlight lang="java">
import hufs.karel.HKarel;
import hufs.karel.HufsProgram;

public class SecondHKarelProgram extends HufsProgram {

HKarel karel;

@Override
protected void onInit() {
karel = new HKarel("철수", 5, 5);
karel.setColor(BLUE);
karel.setColorOfBody(YELLOW);
karel.setColorOfFoot(GREEN);
karel.setColorOfMouth(RED);
add(karel); // 생성한 HKarel을 월드에 추가
}

@Override
protected void onStart() {
while (true) {
if (karel.frontIsBlocked())
karel.turnLeft();
karel.move();
}
}

public static void main(String[] args) {
HufsProgram.main(args, null);
}

}
</syntaxhighlight>

* 위 예제와 동일한 코드이나, <code>add(karel)</code>을 실행하여 생성한 객체를 월드에 추가하도록 하였다. 그러므로 이 객체가 월드에 있어야만 사용할 수 있는 <code>move()</code> 메소드를 사용할 수 있게 되었다.

컴퓨터프로그래밍및실습 (2022년)/0908

2022-09-04T17:22:50Z

Swpark: /* 이항 연산잔 */

== 연산자와 연산식 ==
<table2 class=wikitable head=top sep=semicolon align=clccl>
연산자 종류 ; 연산자 ; 피연산자 수 ; 산출값 ; 기능 설명 ; 예
산술 ; +, -, *, /, % ; 이항 ; 숫자 ; 사칙연산 및 나머지 연산 ; 2 + 3
부호 ; +, - ; 단항 ; 숫자 ; 음수와 양수의 부호 ; -2
문자열 ; + ; 이항 ; 문자열 ; 두 문자열을 연결 ; "abc" + "def"
대입 ; =, +=, -=, *=, /=, %=, &= <br/>^=, !=, <<=, >>=, >>>= ; 이항 ; 다양 ; 우변의 값을 좌변의 변수에 대입 ; i += 3
증감 ; ++, -- ; 단항 ; 숫자 ; 1만큼 증가/감소 ; i++
비교 ; ==, !=, >, <, >=, <=<br/>instanceof ; 이항 ; boolean ; 값의 비교 ; i > j
논리 ; !, &, |, &&, <nowiki>||</nowiki> ; 단항<br/>이항 ; boolean ; 논리적 NOT, AND, OR 연산 ; !(a < 3), (a < 3) && (a > 1)
조건 ; (조건식) ? A : B ; 삼항 ; 다양 ; 조건식에 따라 A 또는 B 중 하나를 선택 ; a = (x > y) ? x : y
비트 ; ~, &, |, ^ ; 단항<br/>이항 ; 숫자<br/>boolean ; 비트 NOT, AND, OR, XOR 연산 ; ~a, a & b
쉬프트 ; >>, <<, >>> ; 이항 ; 숫자 ; 비트를 좌측/우측으로 밀어서 이동 ; a >> 3
</table2>

== 연산의 방향과 우선순위 ==

<syntaxhighlight lang="java">
x > 0 && y < 0 // 어떤 순으로 연산될 것인가?

v1 = 100 * 2 / 3 % 5; // v1 = (((100 * 2) / 3) % 5)

a = b = c = 5; // (a = (b = (c = 5)));
</syntaxhighlight>

* 연산자 우선순위
<table2 class=wikitable head=top sep=semicolon align="lcc">
연산자 ; 연산 방향 ; 우선 순위
++, --, +, -, ~, ! ; ← ; 높음
*, /, % ; → ;
+, - ; → ;
<<, >>, >>> ; → ;
<, >, <=, >=, instanceof ; → ;
==, != ; → ;
& ; → ;
^ ; → ;
| ; → ;
&& ; → ;
<nowiki>||</nowiki> ; → ;
? : ; → ;
=, +=, -=, *=, /=, %=, &=, ^=, |=, <<=, >>=, >>>= ; ← ; 낮음
</table2>

<syntaxhighlight lang="java">
int var1 = 1;
int var2 = 3;
int var3 = 2;
int result = var1 + var2 * var3;

int result = (var1 + var2) * var3;
</syntaxhighlight>

== 단항 연산자 ==

=== 부호 연산자 ===
<syntaxhighlight lang="java">
int i1 = +100; // 부호 + (양수)
int i2 = -100; // 부호 - (음수)
double d1 = +3.14;

int x = -100;
int result1 = -x; // OK

short s1 = 100;
short s2 = -s1; // 오류. 정수 연산은 int로 바뀌기 때문
int i3 = -s1; // OK
</syntaxhighlight>

=== 증감 연산자(++, --) ===
<syntaxhighlight lang="java">
++i;
i++;

--i;
i--;

//------------------
int x = 10;
int z;

z = ++x;

// 위 코드는 아래와 동일
x = x + 1;
z = x;

//-------------------
int x = 10;
int z;

z = x++;

// 위 코드는 아래와 동일
z = x;
x = x + 1;

//------------------
int x = 10;
int z;

z = --x;

// 위 코드는 아래와 동일
x = x - 1;
z = x;

//-------------------
int x = 10;
int z;

z = x--;

// 위 코드는 아래와 동일
z = x;
x = x - 1;

</syntaxhighlight>

=== 논리 부정 연산자 ! ===
<syntaxhighlight lang="java">
boolean play = true;

play = !play;
</syntaxhighlight>

=== 비트 반전 연산자 ~ ===
<syntaxhighlight lang="java">
byte v1 = 10; // 00001010
byte v2 = ~v1; // 오류. 정수 종류의 연산은 자동으로 int로 변환됨

int i2 = ~v1; // OK. 11111111 11111111 11111111 11110101

int i3 = ~v1 + 1; // -10 (2의 보수)

System.out.println( Integer.toBinaryString(i3) );
</syntaxhighlight>

== 이항 연산자 ==
<syntaxhighlight lang="java">
</syntaxhighlight>

=== 산술 연산자 ===
<syntaxhighlight lang="java">
byte byte1 = 1;
byte byte2 = 1;
byte byte3 = byte1 + byte2; // 오류. 정수 타입의 산술 연산은 32비트인 int로 형변환됨

int result1 = byte1 + byte2; // OK

int int1 = 10;
int int2 = 4;
int result2 = int1 / int2; // 2
double result3 = int1 / int2; // 2.0

double result4 = (double) int1 / int2; // 2.5

char c1 = 'A' + 1; // OK 'B'
char c2 = 'A';
char c3 = c2 + 1; // 컴파일 에러. c2가 int로 형변환됨
</syntaxhighlight>

==== 오버플로우 ====
<syntaxhighlight lang="java">
int x = 1000000;
int y = 1000000;

int z = x * y; // z에는 오버플로우되어 -727379968와 같이 알 수 없는 값이 저장됨

//-------------

long x = 1000000;
long y = 1000000;

long z = x * y; // OK
</syntaxhighlight>

==== 정확한 계산은 정수 사용 ====
<syntaxhighlight lang="java">
int apple = 1;
double priceUnit = 0.1;
int number = 7;

double result = apple - number * priceUnit; // 0.3이 되어야 할 것 같지만 아님. 왜?

System.out.println(result); // 0.29999999999999993
</syntaxhighlight>

==== NaN과 Infinity 연산 ====
<syntaxhighlight lang="java">
5 / 0 → ArithmeticException 예외 발생
5 % 0 → ArithmeticException 예외 발생

5 / 0.0 → Infinity
5 % 0.0 → NaN

double val = Double.valueOf("NaN"); // NaN 입력

if (Double.isNaN(val)) { // NaN인지 검사
System.out.println("OOPS");
}
</syntaxhighlight>

=== 문자열 연결 연산자 (+) ===
<syntaxhighlight lang="java">
String str1 = "JDK" + 6.0; // "JDK6.0"
String str2 = str1 + " 특징"; // "JDK6.0 특징"

String str3 = "JDK" + 3 + 3.0; // ("JDK" + 3) + 3.0 → ("JDK" + "3") + 3.0 → "JDK3" + "3.0" → "JDK33.0"
String str4 = 3 + 3.0 + "JDK"; // (3 + 3.0) + "JDK" → (3.0 + 3.0) + "JDK" → "6.0" + "JDK" → "6.0JDK"
</syntaxhighlight>

=== 비교 연산자 ===
<syntaxhighlight lang="java">
int num1 = 10;
int num2 = 10;

boolean result1 = num1 == num2;
boolean result2 = (num1 != num2);
boolean result3 = (num1 <= num2);

char char1 = 'A';
char char2 = 'B';

boolean result4 = (char1 < char2);

//------------------

'A' == 65 → true
3 == 3.0 → true
0.1 == 0.1f → false // 2진수로 변환하기 때문에 정확한 0.1 표현이 안됨.
// 0.1을 2진수로 바꾸었다가 10진수로 변환하면 0.10000000149011612와 같이 표현됨

//------------------

String strVar1 = "신용권";
String strVal2 = "신용권";
String strVal3 = new String("신용권");

strVal1 == strVal2 → true
strVar2 == strVal3 → false

strVal1.equals(strVal2) → true
strVal2.equals(strVal3) → true // 내용으로 비교하기 때문
</syntaxhighlight>

=== 논리 연산자 ===

<table2 class=wikitable head=top sep=semicolon align=cccc>
구분 ; 연산식 ; 설명
AND ; && ; 모두 참일 때만 참
OR ; <nowiki>||</nowiki> ; 모두 거짓일 때만 거짓
XOR ; ^ ; 배타적 논리합. 하나는 true, 다른 하나는 false 일 때만 true
NOT ; ! ; 피연산자의 논리값을 바꿈
</table2>

<syntaxhighlight lang="java">
int charCode = 'A';

if (charCode >= 'A' && charCode <= 'Z') {
System.out.println("대문자입니다");
}
</syntaxhighlight>

=== 비트 연산자 ===

==== 비트 논리 연산자 ====
<syntaxhighlight lang="java">
byte num1 = 45;
byte num2 = 25;

byte result1 = num1 & num2;
byte result2 = num1 | num2;
byte result3 = num1 ^ num2;
byte result4 = ~num1;
</syntaxhighlight>

<table2 class=wikitable head=top sep=semicolon align=llcl>
변수 ; 값 ; 십진수 ; 연산
num1 ; 00101101 ; 45 ;
num2 ; 00011001 ; 25 ;
result1 ; 00001001 ; 9 ; num1 & num2
result2 ; 00111101 ; 61 ; num1 <nowiki>|</nowiki> num2
result3 ; 00110100 ; 52 ; num1 ^ num2
result4 ; 11010010 ; -46 ; ~num1
</table2>

==== 비트 이동 연산자 ====
<syntaxhighlight lang="java">
int result1 = 1 << 3;
int result2 = -8 >> 3;
int result3 = -8 >>> 3;
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=lllll>
변수 | 값 | 연산 | 이진값 | 비고
| 1 | | 00000000 00000000 0000000 00000001 |
result1 | 8 | 1 << 3 | 00000000 00000000 0000000 00001000 | 2<sup>3</sup>
| -8 | | 11111111 11111111 1111111 11111000 |
resutl2 | -1 | -8 >> 3 | 11111111 11111111 1111111 11111111 |
result3 | 536870911 | -8 >>> 3 | 00011111 11111111 1111111 11111111 |
</table2>

=== 대입 연산자 ===
* 예제 코드
<syntaxhighlight lang="java">
public class AssignmentOperatorExample {
public static void main(String[] args) {
int result = 0;

result += 10; // result = result + 10;
System.out.println(result);

result -= 5; // result = result - 10;
System.out.println(result);

result *= 3; // result = result * 3;
System.out.println(result);

result /= 5; // result = result / 5;
System.out.println(result);

result %= 3;
System.out.println(result);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
10
5
15
3
0
</syntaxhighlight>

* 유용한 경우
<syntaxhighlight lang="java">
int result *= x + y * z; // result = result * (x + y * z);
</syntaxhighlight>

== 삼항 연산자 ==
<syntaxhighlight lang="java">
int score = 95;

char grade = (score > 90) ? 'A' : 'B';

// 아래와 동일한 의미의 코드이다.

int score = 95

char grade;
if (score > 90)
grade = 'A';
else
grade = 'B';
</syntaxhighlight>

[[category:컴퓨터프로그래밍및실습]]

컴퓨터프로그래밍및실습 (2022년)/0908

2022-09-04T16:56:43Z

Swpark: /* 대입 연산자 */

== 연산자와 연산식 ==
<table2 class=wikitable head=top sep=semicolon align=clccl>
연산자 종류 ; 연산자 ; 피연산자 수 ; 산출값 ; 기능 설명 ; 예
산술 ; +, -, *, /, % ; 이항 ; 숫자 ; 사칙연산 및 나머지 연산 ; 2 + 3
부호 ; +, - ; 단항 ; 숫자 ; 음수와 양수의 부호 ; -2
문자열 ; + ; 이항 ; 문자열 ; 두 문자열을 연결 ; "abc" + "def"
대입 ; =, +=, -=, *=, /=, %=, &= <br/>^=, !=, <<=, >>=, >>>= ; 이항 ; 다양 ; 우변의 값을 좌변의 변수에 대입 ; i += 3
증감 ; ++, -- ; 단항 ; 숫자 ; 1만큼 증가/감소 ; i++
비교 ; ==, !=, >, <, >=, <=<br/>instanceof ; 이항 ; boolean ; 값의 비교 ; i > j
논리 ; !, &, |, &&, <nowiki>||</nowiki> ; 단항<br/>이항 ; boolean ; 논리적 NOT, AND, OR 연산 ; !(a < 3), (a < 3) && (a > 1)
조건 ; (조건식) ? A : B ; 삼항 ; 다양 ; 조건식에 따라 A 또는 B 중 하나를 선택 ; a = (x > y) ? x : y
비트 ; ~, &, |, ^ ; 단항<br/>이항 ; 숫자<br/>boolean ; 비트 NOT, AND, OR, XOR 연산 ; ~a, a & b
쉬프트 ; >>, <<, >>> ; 이항 ; 숫자 ; 비트를 좌측/우측으로 밀어서 이동 ; a >> 3
</table2>

== 연산의 방향과 우선순위 ==

<syntaxhighlight lang="java">
x > 0 && y < 0 // 어떤 순으로 연산될 것인가?

v1 = 100 * 2 / 3 % 5; // v1 = (((100 * 2) / 3) % 5)

a = b = c = 5; // (a = (b = (c = 5)));
</syntaxhighlight>

* 연산자 우선순위
<table2 class=wikitable head=top sep=semicolon align="lcc">
연산자 ; 연산 방향 ; 우선 순위
++, --, +, -, ~, ! ; ← ; 높음
*, /, % ; → ;
+, - ; → ;
<<, >>, >>> ; → ;
<, >, <=, >=, instanceof ; → ;
==, != ; → ;
& ; → ;
^ ; → ;
| ; → ;
&& ; → ;
<nowiki>||</nowiki> ; → ;
? : ; → ;
=, +=, -=, *=, /=, %=, &=, ^=, |=, <<=, >>=, >>>= ; ← ; 낮음
</table2>

<syntaxhighlight lang="java">
int var1 = 1;
int var2 = 3;
int var3 = 2;
int result = var1 + var2 * var3;

int result = (var1 + var2) * var3;
</syntaxhighlight>

== 단항 연산자 ==

=== 부호 연산자 ===
<syntaxhighlight lang="java">
int i1 = +100; // 부호 + (양수)
int i2 = -100; // 부호 - (음수)
double d1 = +3.14;

int x = -100;
int result1 = -x; // OK

short s1 = 100;
short s2 = -s1; // 오류. 정수 연산은 int로 바뀌기 때문
int i3 = -s1; // OK
</syntaxhighlight>

=== 증감 연산자(++, --) ===
<syntaxhighlight lang="java">
++i;
i++;

--i;
i--;

//------------------
int x = 10;
int z;

z = ++x;

// 위 코드는 아래와 동일
x = x + 1;
z = x;

//-------------------
int x = 10;
int z;

z = x++;

// 위 코드는 아래와 동일
z = x;
x = x + 1;

//------------------
int x = 10;
int z;

z = --x;

// 위 코드는 아래와 동일
x = x - 1;
z = x;

//-------------------
int x = 10;
int z;

z = x--;

// 위 코드는 아래와 동일
z = x;
x = x - 1;

</syntaxhighlight>

=== 논리 부정 연산자 ! ===
<syntaxhighlight lang="java">
boolean play = true;

play = !play;
</syntaxhighlight>

=== 비트 반전 연산자 ~ ===
<syntaxhighlight lang="java">
byte v1 = 10; // 00001010
byte v2 = ~v1; // 오류. 정수 종류의 연산은 자동으로 int로 변환됨

int i2 = ~v1; // OK. 11111111 11111111 11111111 11110101

int i3 = ~v1 + 1; // -10 (2의 보수)

System.out.println( Integer.toBinaryString(i3) );
</syntaxhighlight>

== 이항 연산잔 ==
<syntaxhighlight lang="java">
</syntaxhighlight>

=== 산술 연산자 ===
<syntaxhighlight lang="java">
byte byte1 = 1;
byte byte2 = 1;
byte byte3 = byte1 + byte2; // 오류. 정수 타입의 산술 연산은 32비트인 int로 형변환됨

int result1 = byte1 + byte2; // OK

int int1 = 10;
int int2 = 4;
int result2 = int1 / int2; // 2
double result3 = int1 / int2; // 2.0

double result4 = (double) int1 / int2; // 2.5

char c1 = 'A' + 1; // OK 'B'
char c2 = 'A';
char c3 = c2 + 1; // 컴파일 에러. c2가 int로 형변환됨
</syntaxhighlight>

==== 오버플로우 ====
<syntaxhighlight lang="java">
int x = 1000000;
int y = 1000000;

int z = x * y; // z에는 오버플로우되어 -727379968와 같이 알 수 없는 값이 저장됨

//-------------

long x = 1000000;
long y = 1000000;

long z = x * y; // OK
</syntaxhighlight>

==== 정확한 계산은 정수 사용 ====
<syntaxhighlight lang="java">
int apple = 1;
double priceUnit = 0.1;
int number = 7;

double result = apple - number * priceUnit; // 0.3이 되어야 할 것 같지만 아님. 왜?

System.out.println(result); // 0.29999999999999993
</syntaxhighlight>

==== NaN과 Infinity 연산 ====
<syntaxhighlight lang="java">
5 / 0 → ArithmeticException 예외 발생
5 % 0 → ArithmeticException 예외 발생

5 / 0.0 → Infinity
5 % 0.0 → NaN

double val = Double.valueOf("NaN"); // NaN 입력

if (Double.isNaN(val)) { // NaN인지 검사
System.out.println("OOPS");
}
</syntaxhighlight>

=== 문자열 연결 연산자 (+) ===
<syntaxhighlight lang="java">
String str1 = "JDK" + 6.0; // "JDK6.0"
String str2 = str1 + " 특징"; // "JDK6.0 특징"

String str3 = "JDK" + 3 + 3.0; // ("JDK" + 3) + 3.0 → ("JDK" + "3") + 3.0 → "JDK3" + "3.0" → "JDK33.0"
String str4 = 3 + 3.0 + "JDK"; // (3 + 3.0) + "JDK" → (3.0 + 3.0) + "JDK" → "6.0" + "JDK" → "6.0JDK"
</syntaxhighlight>

=== 비교 연산자 ===
<syntaxhighlight lang="java">
int num1 = 10;
int num2 = 10;

boolean result1 = num1 == num2;
boolean result2 = (num1 != num2);
boolean result3 = (num1 <= num2);

char char1 = 'A';
char char2 = 'B';

boolean result4 = (char1 < char2);

//------------------

'A' == 65 → true
3 == 3.0 → true
0.1 == 0.1f → false // 2진수로 변환하기 때문에 정확한 0.1 표현이 안됨.
// 0.1을 2진수로 바꾸었다가 10진수로 변환하면 0.10000000149011612와 같이 표현됨

//------------------

String strVar1 = "신용권";
String strVal2 = "신용권";
String strVal3 = new String("신용권");

strVal1 == strVal2 → true
strVar2 == strVal3 → false

strVal1.equals(strVal2) → true
strVal2.equals(strVal3) → true // 내용으로 비교하기 때문
</syntaxhighlight>

=== 논리 연산자 ===

<table2 class=wikitable head=top sep=semicolon align=cccc>
구분 ; 연산식 ; 설명
AND ; && ; 모두 참일 때만 참
OR ; <nowiki>||</nowiki> ; 모두 거짓일 때만 거짓
XOR ; ^ ; 배타적 논리합. 하나는 true, 다른 하나는 false 일 때만 true
NOT ; ! ; 피연산자의 논리값을 바꿈
</table2>

<syntaxhighlight lang="java">
int charCode = 'A';

if (charCode >= 'A' && charCode <= 'Z') {
System.out.println("대문자입니다");
}
</syntaxhighlight>

=== 비트 연산자 ===

==== 비트 논리 연산자 ====
<syntaxhighlight lang="java">
byte num1 = 45;
byte num2 = 25;

byte result1 = num1 & num2;
byte result2 = num1 | num2;
byte result3 = num1 ^ num2;
byte result4 = ~num1;
</syntaxhighlight>

<table2 class=wikitable head=top sep=semicolon align=llcl>
변수 ; 값 ; 십진수 ; 연산
num1 ; 00101101 ; 45 ;
num2 ; 00011001 ; 25 ;
result1 ; 00001001 ; 9 ; num1 & num2
result2 ; 00111101 ; 61 ; num1 <nowiki>|</nowiki> num2
result3 ; 00110100 ; 52 ; num1 ^ num2
result4 ; 11010010 ; -46 ; ~num1
</table2>

==== 비트 이동 연산자 ====
<syntaxhighlight lang="java">
int result1 = 1 << 3;
int result2 = -8 >> 3;
int result3 = -8 >>> 3;
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=lllll>
변수 | 값 | 연산 | 이진값 | 비고
| 1 | | 00000000 00000000 0000000 00000001 |
result1 | 8 | 1 << 3 | 00000000 00000000 0000000 00001000 | 2<sup>3</sup>
| -8 | | 11111111 11111111 1111111 11111000 |
resutl2 | -1 | -8 >> 3 | 11111111 11111111 1111111 11111111 |
result3 | 536870911 | -8 >>> 3 | 00011111 11111111 1111111 11111111 |
</table2>

=== 대입 연산자 ===
* 예제 코드
<syntaxhighlight lang="java">
public class AssignmentOperatorExample {
public static void main(String[] args) {
int result = 0;

result += 10; // result = result + 10;
System.out.println(result);

result -= 5; // result = result - 10;
System.out.println(result);

result *= 3; // result = result * 3;
System.out.println(result);

result /= 5; // result = result / 5;
System.out.println(result);

result %= 3;
System.out.println(result);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
10
5
15
3
0
</syntaxhighlight>

* 유용한 경우
<syntaxhighlight lang="java">
int result *= x + y * z; // result = result * (x + y * z);
</syntaxhighlight>

== 삼항 연산자 ==
<syntaxhighlight lang="java">
int score = 95;

char grade = (score > 90) ? 'A' : 'B';

// 아래와 동일한 의미의 코드이다.

int score = 95

char grade;
if (score > 90)
grade = 'A';
else
grade = 'B';
</syntaxhighlight>

[[category:컴퓨터프로그래밍및실습]]

Visual Studio Code 설치

2022-08-18T17:08:52Z

Swpark: /* Windows Subsystems for Linux (WSL) */

=== Visual Studio Code 다운로드 및 설명서 ===
* 다운로드 사이트 : https://code.visualstudio.com
* [https://www.youtube.com/watch?v=K8qVH8V0VvY&t=865s (Youtube) Visual Studio Code 기본 사용법]

=== 한국어 지원 ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / korean 입력
** Korean Language Pack for Visual Studio Code

=== Java ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / java 입력
** Extension Pack for Java
** Debugger for Java
** Language Support for Java(TM) by RedHat
** Project Manager for Java

* [https://www.youtube.com/watch?v=JBXdaAXtRjk (Youtube) 2022년 자바(Java) 학습 개발 환경 구축 with Visual Studio Code]

=== 프로젝트 관리 ===
Java를 이용하여 앱을 개발할 때 Project를 지원한다.

* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / maven 입력
** IntelliCode
** Maven for Java
** Maven dependency explorer

=== UML(Unified Modeling Language) ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / plantuml 입력
** PlantUML
** PlantUML Previewer
** PlantUML Grammar

* [https://plantuml.com/ko PlantUML 설명서]

=== Python ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-X) / python 입력
** Python

=== C/C++ ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-X) / c++ 입력
** C/C++
** C/C++ Extension Pack
** Better C++ Syntax
** C/C++ Themes

* [https://code.visualstudio.com/docs/cpp/config-mingw MinGW-w64 설치]<syntaxhighlight lang="text">
$ pacman -Syu // 설치 후 실행
$ pacman -Syu // Run "MSYS2 MSYS" from Start menu.
$ pacman -S --needed base-devel mingw-w64-x86_64-toolchain</syntaxhighlight>
* Path에 C:\msys64\mingw64\bin 등록함

* [https://www.youtube.com/watch?v=MUi4U4oV_p0 (Youtube) VS Code를 이용하여 C++ 개발 환경 설정하기]

=== Windows Subsystems for Linux (WSL) ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-X) / wsl 입력
** Remote - WSL

Visual Studio Code 설치

2022-08-18T17:06:25Z

Swpark: /* C/C++ */

=== Visual Studio Code 다운로드 및 설명서 ===
* 다운로드 사이트 : https://code.visualstudio.com
* [https://www.youtube.com/watch?v=K8qVH8V0VvY&t=865s (Youtube) Visual Studio Code 기본 사용법]

=== 한국어 지원 ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / korean 입력
** Korean Language Pack for Visual Studio Code

=== Java ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / java 입력
** Extension Pack for Java
** Debugger for Java
** Language Support for Java(TM) by RedHat
** Project Manager for Java

* [https://www.youtube.com/watch?v=JBXdaAXtRjk (Youtube) 2022년 자바(Java) 학습 개발 환경 구축 with Visual Studio Code]

=== 프로젝트 관리 ===
Java를 이용하여 앱을 개발할 때 Project를 지원한다.

* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / maven 입력
** IntelliCode
** Maven for Java
** Maven dependency explorer

=== UML(Unified Modeling Language) ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / plantuml 입력
** PlantUML
** PlantUML Previewer
** PlantUML Grammar

* [https://plantuml.com/ko PlantUML 설명서]

=== Python ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-X) / python 입력
** Python

=== C/C++ ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-X) / c++ 입력
** C/C++
** C/C++ Extension Pack
** Better C++ Syntax
** C/C++ Themes

* [https://code.visualstudio.com/docs/cpp/config-mingw MinGW-w64 설치]<syntaxhighlight lang="text">
$ pacman -Syu // 설치 후 실행
$ pacman -Syu // Run "MSYS2 MSYS" from Start menu.
$ pacman -S --needed base-devel mingw-w64-x86_64-toolchain</syntaxhighlight>
* Path에 C:\msys64\mingw64\bin 등록함

* [https://www.youtube.com/watch?v=MUi4U4oV_p0 (Youtube) VS Code를 이용하여 C++ 개발 환경 설정하기]

=== Windows Subsystems for Linux (WSL) ===
* WSL 설치 - 확장(Ctrl-<shift>-X) / wsl 입력
** Remote - WSL

Visual Studio Code 설치

2022-08-18T17:06:18Z

Swpark: /* Python */

=== Visual Studio Code 다운로드 및 설명서 ===
* 다운로드 사이트 : https://code.visualstudio.com
* [https://www.youtube.com/watch?v=K8qVH8V0VvY&t=865s (Youtube) Visual Studio Code 기본 사용법]

=== 한국어 지원 ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / korean 입력
** Korean Language Pack for Visual Studio Code

=== Java ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / java 입력
** Extension Pack for Java
** Debugger for Java
** Language Support for Java(TM) by RedHat
** Project Manager for Java

* [https://www.youtube.com/watch?v=JBXdaAXtRjk (Youtube) 2022년 자바(Java) 학습 개발 환경 구축 with Visual Studio Code]

=== 프로젝트 관리 ===
Java를 이용하여 앱을 개발할 때 Project를 지원한다.

* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / maven 입력
** IntelliCode
** Maven for Java
** Maven dependency explorer

=== UML(Unified Modeling Language) ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / plantuml 입력
** PlantUML
** PlantUML Previewer
** PlantUML Grammar

* [https://plantuml.com/ko PlantUML 설명서]

=== Python ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-X) / python 입력
** Python

=== C/C++ ===
* C/C++ 설치 - 확장(Ctrl-<shift>-X) / c++ 입력
** C/C++
** C/C++ Extension Pack
** Better C++ Syntax
** C/C++ Themes

* [https://code.visualstudio.com/docs/cpp/config-mingw MinGW-w64 설치]<syntaxhighlight lang="text">
$ pacman -Syu // 설치 후 실행
$ pacman -Syu // Run "MSYS2 MSYS" from Start menu.
$ pacman -S --needed base-devel mingw-w64-x86_64-toolchain</syntaxhighlight>
* Path에 C:\msys64\mingw64\bin 등록함

* [https://www.youtube.com/watch?v=MUi4U4oV_p0 (Youtube) VS Code를 이용하여 C++ 개발 환경 설정하기]

=== Windows Subsystems for Linux (WSL) ===
* WSL 설치 - 확장(Ctrl-<shift>-X) / wsl 입력
** Remote - WSL

Visual Studio Code 설치

2022-08-18T16:55:43Z

Swpark: /* C/C++ */

=== Visual Studio Code 다운로드 및 설명서 ===
* 다운로드 사이트 : https://code.visualstudio.com
* [https://www.youtube.com/watch?v=K8qVH8V0VvY&t=865s (Youtube) Visual Studio Code 기본 사용법]

=== 한국어 지원 ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / korean 입력
** Korean Language Pack for Visual Studio Code

=== Java ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / java 입력
** Extension Pack for Java
** Debugger for Java
** Language Support for Java(TM) by RedHat
** Project Manager for Java

* [https://www.youtube.com/watch?v=JBXdaAXtRjk (Youtube) 2022년 자바(Java) 학습 개발 환경 구축 with Visual Studio Code]

=== 프로젝트 관리 ===
Java를 이용하여 앱을 개발할 때 Project를 지원한다.

* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / maven 입력
** IntelliCode
** Maven for Java
** Maven dependency explorer

=== UML(Unified Modeling Language) ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / plantuml 입력
** PlantUML
** PlantUML Previewer
** PlantUML Grammar

* [https://plantuml.com/ko PlantUML 설명서]

=== Python ===
* Python 설치 - 확장(Ctrl-<shift>-X) / python 입력
** Python

=== C/C++ ===
* C/C++ 설치 - 확장(Ctrl-<shift>-X) / c++ 입력
** C/C++
** C/C++ Extension Pack
** Better C++ Syntax
** C/C++ Themes

* [https://code.visualstudio.com/docs/cpp/config-mingw MinGW-w64 설치]<syntaxhighlight lang="text">
$ pacman -Syu // 설치 후 실행
$ pacman -Syu // Run "MSYS2 MSYS" from Start menu.
$ pacman -S --needed base-devel mingw-w64-x86_64-toolchain</syntaxhighlight>
* Path에 C:\msys64\mingw64\bin 등록함

* [https://www.youtube.com/watch?v=MUi4U4oV_p0 (Youtube) VS Code를 이용하여 C++ 개발 환경 설정하기]

=== Windows Subsystems for Linux (WSL) ===
* WSL 설치 - 확장(Ctrl-<shift>-X) / wsl 입력
** Remote - WSL

Visual Studio Code 설치

2022-08-18T16:55:30Z

Swpark: /* Python */

=== Visual Studio Code 다운로드 및 설명서 ===
* 다운로드 사이트 : https://code.visualstudio.com
* [https://www.youtube.com/watch?v=K8qVH8V0VvY&t=865s (Youtube) Visual Studio Code 기본 사용법]

=== 한국어 지원 ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / korean 입력
** Korean Language Pack for Visual Studio Code

=== Java ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / java 입력
** Extension Pack for Java
** Debugger for Java
** Language Support for Java(TM) by RedHat
** Project Manager for Java

* [https://www.youtube.com/watch?v=JBXdaAXtRjk (Youtube) 2022년 자바(Java) 학습 개발 환경 구축 with Visual Studio Code]

=== 프로젝트 관리 ===
Java를 이용하여 앱을 개발할 때 Project를 지원한다.

* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / maven 입력
** IntelliCode
** Maven for Java
** Maven dependency explorer

=== UML(Unified Modeling Language) ===
* Vscode extension 설치 - 확장(Ctrl-<shift>-x) / plantuml 입력
** PlantUML
** PlantUML Previewer
** PlantUML Grammar

* [https://plantuml.com/ko PlantUML 설명서]

=== Python ===
* Python 설치 - 확장(Ctrl-<shift>-X) / python 입력
** Python

=== C/C++ ===
* PlantUML 설치 - 확장(Ctrl-<shift>-X) / c++ 입력
** C/C++
** C/C++ Extension Pack
** Better C++ Syntax
** C/C++ Themes

* [https://code.visualstudio.com/docs/cpp/config-mingw MinGW-w64 설치]<syntaxhighlight lang="text">
$ pacman -Syu // 설치 후 실행
$ pacman -Syu // Run "MSYS2 MSYS" from Start menu.
$ pacman -S --needed base-devel mingw-w64-x86_64-toolchain</syntaxhighlight>
* Path에 C:\msys64\mingw64\bin 등록함

* [https://www.youtube.com/watch?v=MUi4U4oV_p0 (Youtube) VS Code를 이용하여 C++ 개발 환경 설정하기]

=== Windows Subsystems for Linux (WSL) ===
* WSL 설치 - 확장(Ctrl-<shift>-X) / wsl 입력
** Remote - WSL

컴퓨터프로그래밍및실습 (2022년)/1128

2022-07-22T06:57:17Z

Swpark:

== JavaFX 컨트롤 ==

=== 버튼 컨트롤 ===
* ButtonBase를 상속하는 하위 컨트롤
* Button, CheckBox, RadioButton, ToggleButton, Hyperlink 등
* p.896 그림 참조

* Button
<syntaxhighlight lang="xml">
<Button text="아이콘버튼">
<graphic>
<ImageView>
<Image url="@iamges/history_view.gif"/>
</ImageView>
</graphic>
</Button>
</syntaxhighlight>

* selected 속성 - CheckBox, RadioButton, ToggleButton : 선택, 미선택 (selected가 true 혹은 false)
<syntaxhighlight lang="xml">
<CheckBox text="라벨1" userData="값1"/>
<CheckBox text="라벨2" userData="값2" selected="true"/>
</syntaxhighlight>

* toggleGroup 속성 - RadioButton, ToggleButton : 하나의 그룹으로 묶이고, 그룹 내에서는 하나만 선택
<syntaxhighlight lang="xml">
<fx:deine>
<ToggleGroup fx:=id="groupName"/>
</fx:define>

<RadioButton text="라벨1" userData="값1" toggleGroup="$groupName" />
<RadioButton text="라벨2" userData="값2" toggleGroup="$groupName" selected="true" />
</syntaxhighlight>

* ActionEvent 발생 - CheckBox, RadioButton, ToggleButton : 컨트롤을 사용하가 클릭할 경우
<syntaxhighlight lang="xml">
<CheckBox ... onAction="#handleChkAction"/>
</syntaxhighlight>

* RadioButton, ToggleButton 그룹 내에서 선택 변경을 감시하고 싶다면
<syntaxhighlight lang="java">
groupName.selectedToggleProperty().addListener(new ChangeListener<Toggle> {
@Override
public void changed(ObservableValue<? extends Toggle> observable, Toggle oldValue, Toggle newValue) {
...
}
});
</syntaxhighlight>

* 예

<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.ToggleGroup?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>

<BorderPane xmlns:fx="http://javafx.com/fxml" fx:controller="ch17.p897.RootController" prefHeight="150.0" prefWidth="420.0">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
</padding>

<center>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="10">
<children>
<VBox prefHeight="200.0" prefWidth="100.0" spacing="20.0" alignment="CENTER_LEFT">
<children>
<CheckBox fx:id="chk1" text="안경" onAction="#handleChkAction" />
<CheckBox fx:id="chk2" text="모자" onAction="#handleChkAction" />
</children>
</VBox>

<ImageView fx:id="checkImageView" fitWidth="200.0" preserveRatio="true">
<image><Image url="@images/geek.gif" /></image>
</ImageView>

<Separator orientation="VERTICAL" prefHeight="200.0" />

<VBox prefHeight="200.0" prefWidth="100.0">
<fx:define>
<ToggleGroup fx:id="group" />
</fx:define>

<children>
<RadioButton fx:id="rad1" text="BubbleChart" userData="BubbleChart" toggleGroup="$group"/>
<RadioButton fx:id="rad2" text="BarChart" userData="BarChart" toggleGroup="$group" selected="true" />
<RadioButton fx:id="rad3" text="AreaChart" userData="AreaChart" toggleGroup="$group"/>
</children>
</VBox>

<ImageView fx:id="radioImageView" fitHeight="100.0" preserveRatio="true">
<image>
<Image url="@images/BarChart.png" />
</image>
</ImageView>
</children>
</HBox>
</center>

<bottom>
<Button fx:id="btnExit" BorderPane.alignment="CENTER" onAction="#handleBtnExitAction">
<graphic>
<ImageView>
<Image url="@images/exit.png" />
</ImageView>
</graphic>
<BorderPane.margin>
<Insets top="20.0" />
</BorderPane.margin>
</Button>
</bottom>
</BorderPane>
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p897;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.application.Platform;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Toggle;
import javafx.scene.control.ToggleGroup;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

public class RootController implements Initializable {
@FXML private CheckBox chk1;
@FXML private CheckBox chk2;
@FXML private ImageView checkImageView;
@FXML private ToggleGroup group;
@FXML private ImageView radioImageView;
@FXML private Button btnExit;

@Override
public void initialize(URL location, ResourceBundle resources) {
group.selectedToggleProperty().addListener(new ChangeListener<Toggle>() {

@Override
public void changed(ObservableValue<? extends Toggle> observable, Toggle oldValue, Toggle newValue) {
Image image = new Image(getClass().getResource("images/" +
newValue.getUserData().toString() + ".png").toString());
radioImageView.setImage(image);
}

});

}

// CheckBox 이벤트 처리
public void handleChkAction(ActionEvent e) {
if (chk1.isSelected() && chk2.isSelected()) {
checkImageView.setImage(new Image(getClass().getResource("images/geek-glasses-hair.gif").toString()));
} else if (chk1.isSelected()) {
checkImageView.setImage(new Image(getClass().getResource("images/geek-glasses.gif").toString()));
} else if (chk2.isSelected()) {
checkImageView.setImage(new Image(getClass().getResource("images/geek-hair.gif").toString()));
} else {
checkImageView.setImage(new Image(getClass().getResource("images/geek.gif").toString()));
}
}

// Button 이벤트 처리
public void handleBtnExitAction(ActionEvent e) {
Platform.exit();
}

}
</syntaxhighlight>

=== 입력 컨트롤 ===

=== 뷰 컨트롤 ===

==== ImageView 컨트롤 ====

==== ListView 컨트롤 ====

==== TableView 컨트롤 ====

=== 미디어 컨트롤 ===

==== Slider 컨트롤 ====

==== ProgressBar와 ProgressIndicator 컨트롤 ====

=== 차트 컨트롤 ===

== JavaFX 메뉴바(MenuBar)와 툴바(Toolbar) ==

=== MenuBar 컨트롤 ===

=== ToolBar 컨트롤 ===

== JavaFX 다이얼로그(Dialog) ==

=== FileChooser, DirectoryChooser ===

=== Popup ===

=== Custom Dialog ===

=== 컨트롤러에서 primaryStage 사용 ===

==== 메인 클래스에 전달하는 방법 ====

==== 컨테이너 또는 컨트롤로부터 얻는 방법 ====

컴퓨터프로그래밍및실습 (2022년)/1124

2022-07-22T06:01:54Z

Swpark:

== JavaFX 개요 ==
# AWT
#* Native UI 컴포넌트 사용
#* 운영체제 마다 UI 모양이 다름
# Swing
#* 운영체제가 제공하는 native UI 사용 안 함
#* 운영체제가 새롭게 제공하는 UI 지원의 어려움
# JavaFX
#* Abode의 flash, Microsoft의 silverlight의 대항마
#* JDK 7부터 지원. JDK 8 권장.
#* JDK 11부터는 별도로 설치해야 함.
#* 화면 레이아웃과 스타일, 애플리케이션 로직 분리
#* Java 코드와 분리해서 스타일 시트(CSS)로 외관 작성 → 개발자와 디자이너의 동시 개발 가능
#* Java 코드에서도 레이아웃과 애플리케이션 로직을 분리하고 싶다면 레이아웃은 FXML로 작성, 로직은 Java로 작성
#* JavaFX 애플리케이션 구성 요소
{| class="wikitable" cellpadding="50"
| rowspan="2" align="center" | '''[레이아웃]'''<br/>자바 코드 파일</br>또는 FXML 파일
| align="center" | '''[외관 및 스타일]'''<br/>CSS 파일
| rowspan="2" align="center" | '''[리소스]'''<br/>그림 파일<br/>동영상 파일<br/>...
|-
| align="center" | '''[비즈니스 로직]'''<br/>자바 코드 파일
|}

== JavaFX 애플리케이션 개발 시작 ==
=== 메인 클래스 ===
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX 라이프사이클(life cycle) ===
* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {
public AppMain() {
System.out.println(Thread.currentThread().getName() + ": AppMain() 호출");
}

@Override
public void init() throws Exception {
System.out.println(Thread.currentThread().getName() + ": init() 호출");
}

@Override
public void start(Stage primaryStage) throws Exception {
System.out.println(Thread.currentThread().getName() + ": start() 호출");
primaryStage.show();
}
@Override
public void stop() throws Exception {
System.out.println(Thread.currentThread().getName() + ": stop() 호출");
}

public static void main(String[] args) throws Exception {
System.out.println(Thread.currentThread().getName() + ": main() 호출");
launch(args);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
main: main() 호출
JavaFX Application Thread: AppMain() 호출
JavaFX-Launcher: init() 호출
JavaFX Application Thread: start() 호출
JavaFX Application Thread: stop() 호출 ← 프로그램을 끝내야 실행된다.
</syntaxhighlight>

=== 메일 클래스 실행 매개값 얻기 ===
<syntaxhighlight lang="text">
C:> java AppMain --ip=192.168.0.5 --port=50001
</syntaxhighlight>

* main()에서 launch(args)를 넘겨 받음
* init() 메소드에서 아래와 같이 실행할 수 있음
<syntaxhighlight lang="java">
Parameters params = getParameters();
List<String> list = params.getRaw();
Map<String, String> map = params.getNamed();
</syntaxhighlight>

=== 무대(Stage)와 장면(Scene) ===
* 윈도우 : Stage
* Stage에는 하나의 Scene을 가질 수 있음
* Scene은 직접 생성해야 함

[[file:CP2022_ch17.2_AppMain.png|thumb|AppMain 실행화면]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
VBox root = new VBox();
root.setPrefWidth(350);
root.setPrefHeight(150);
root.setAlignment(Pos.CENTER);
root.setSpacing(20);

Label label = new Label();
label.setText("Hello, JavaFX");
label.setFont(new Font(50));

Button button = new Button();
button.setText("확인");
button.setOnAction(event->Platform.exit());

root.getChildren().add(label);
root.getChildren().add(button);

Scene scene = new Scene(root); // VBox를 루트 컨테이너(root container)로 해서 Scene 생성

primaryStage.setTitle("AppMain입니다");
primaryStage.setScene(scene); // 윈도우에 장면 설정
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

== JavaFX 레이아웃 ==
=== 프로그램적 레이아웃 ===
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | 프로그램적 레이아웃]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox hbox = new HBox();
hbox.setPadding(new Insets(10));
hbox.setSpacing(10);

TextField textField = new TextField();
textField.setPrefWidth(200);

Button button = new Button();
button.setText("확인");

ObservableList list = hbox.getChildren();
list.add(textField);
list.add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 레이아웃 ===
* FXML 파일 (root.fxml)
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | FXML 레이아웃]]
<syntaxhighlight lang="text">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>

<HBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
<spacing>10</spacing>

<children>
<TextField>
<prefWidth>200</prefWidth>
</TextField>

<Button>
<text>확인</text>
</Button>
</children>
</HBox>
</syntaxhighlight>

* AppMain 클래스
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml")); // ← FXML 로드
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 레이아웃(layout) 여백: 패딩(padding)과 마진(margin) ===
<table2 class=wikitable head=top sep=bar align=cll>
구분 | HBox의 패딩 | Button의 마진
개념 | [[file:CP-17.3.3-padding.png]] | [[file:CP-17.3.3-margin.png]]
자바 코드 | HBox hbox = new HBox();<br/>'''hbox.setPadding(new Insets(50))'''; | Button button = new Button();<br/>'''HBox.setMargin(button, new Insets(50));'''
FXML 태그 | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</padding><br/></HBox> | <Button><br/>{{sp2}}<HBox.margin><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</Hbox.margin><br/></Button>
</table2>

* Margin, Padding 설정 방법
<syntaxhighlight lang="java">
// top, right, bottom, left를 모두 동일한 값으로 설정할 때
// Insets(double topRightBottomLeft)
new Insets(50);

// top, right, bottom, left를 다를 값으로 설정할 때
// Insets(double top, double right, double bottom, double left)
new Insets(10, 20, 30, 40);
</syntaxhighlight>

* 패딩과 마진 적용 예
[[file:CP-17.3.3-AppMain.png|thumb|패딩과 마진 적용 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
// 패딩 설정
HBox hbox = new HBox();
hbox.setPadding(new Insets(50, 10, 10, 50));
Button button = new Button();
button.setPrefSize(100, 100);

// 마진 설정
// HBox hbox = new HBox();
// Button button = new Button();
// button.setPrefSize(100, 100);
// HBox.setMargin(button, new Insets(10, 10, 50, 50));

hbox.getChildren().add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 작성 규칙 ===
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox xmlns:fx="http://javafx.com/fxml"><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
TextField textField = new TextField();<br/>textField.setPrefWidth(200);<br/>{{sp2}} | <TextField><br/>{{sp2}}<prefWidth>200</prefWidth><br/></TextField>
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
ObsetvableList list = hbox.getChildren();<br/>list.add(textField);<br/>list.add(button);<br/><br/><br/><br/><br/>{{sp2}} | <children><br/>{{sp2}}<TextField><br/>{{sp2}}{{sp2}}<prefWidth>200</prefWidth><br/>{{sp2}}</TextField><br/>{{sp2}}<Button><br/>{{sp2}}{{sp2}}<text>확인</text><br/>{{sp2}}</Button><br/></children>
</table2>

==== 패키지(package) 선언 ====
<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML 태그
import javafx.scene.layout.HBox; | <?import javafx.scene.layout.HBox?>
import javafx.scene.control.*; | <?import javafx.scene.control.*?>
</table2>

* <?import?>가 들어가는 위치는 <?xml ...>와 루트 컨테이너 태그 사이이다.
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.*?>

<루트 컨테이너 xmlns:fx="http://javafx.com/fxml">
...
</루트 컨테이너>
</syntaxhighlight>

* import를 제대로 하지 않으면 not a valid type 메시지와 함께 javafx.fxml.LoadException 발생

==== 태그(tag) 선언 ====
* 시작 태그와 끝 태그가 매칭되어야 한다.

<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
</table2>

==== 속성(attribute) 선언 ====
* 속성은 "나 '로 감싸야 한다.
<syntaxhighlight lang="xml">
<태그이름 속성명="값" 속성명='값'> ... </태그이름>
</syntaxhighlight>

* 속성명은 Setter 메소드 명이 옴
* 모든 Setter가 사용될 수 있는 것은 아님. 기본 타입(boolean, byte, short, char, int, long, float, double)의 값을 세팅하거나, String을 세팅하는 Setter만 올 수 있음

* 예
<table2 class=wikitable head=top sep=bar align=lll>
자바 코드 | FXML (Setter 태그) | FXML (Setter 속성)
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button> | <Button text="확인"/><br/><br/>{{sp2}}
</table2>

==== 객체 선언 ====
===== 클래스 속성 =====
* 생성자에 매개 변수가 있고, 매개 변수에 @NamedArg(javafx.beans.NamedArg) 어노테이션이 적용되어 있으면 속성명이나 자식 태그로 작성할 수 있음
<table2 class=wikitable sep=bar align=ll>
<클래스 매개변수="값"><br/><br/>{{sp2}} | <클래스><br/>{{sp2}}<매개변수>값</매개변수><br/></클래스>
</table2>

* 예
** HBox를 패딩할 때 setPadding(Insets value) 메소드를 사용하는데
** Insets는 기본 생성자가 없고,
** Insets(double topRightBottomLeft) 또는 Insets(double top, double right, double bottom, double left)만 있음
** 이 경우 아래와 같이 선언 가능함
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
</table2>

===== 클래스 fx:value =====
* 클래스가 valueOf(String) 메소드를 제공하는 경우
<syntaxhighlight lang="xml">
<클래스 fx:value="값" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
String.valueOf("Hello, World!");<br/>Integer.valueOf("1");<br/>Double.valueOf("1.0");<br/>Boolean.valueOf("false"); | <String fx:value="Hello, World!"/><br/><Integer fx:value="1"/><br/><Double fx:value="1.0"/><br/><Boolean fx:value="false"/>
</table2>

===== 클래스 fx:constant =====
*클래스에 정의된 상수값을 얻고 싶을 경우
<syntaxhighlight lang="xml">
<클래스 fx:constant="상수" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
Button button = new Button();<br/>button.setMaxWidth( Double.MAX_VALUE );<br/><br/><br/>{{sp2}} | <Button><br/>{{sp2}}<maxWidth><br/>{{sp2}}{{sp2}}<Double fx:constant="MAX_VALUE"/><br/>{{sp2}}</maxWidth><br/><Button>
</table2>

===== 클래스 fx:factory =====
* 어떤 클래스는 new 연산자로 객체를 생성할 수 없고,
* 정적 메소드(이를 factory 메소드라 부른다)로 객체를 얻어야 하는 경우가 있음
<syntaxhighlight lang="xml">
<클래스 fx:factory="정적메소드" />
</syntaxhighlight>

* 예: <code>ObservableList</code>의 구현 객체는 <code>javafx.collections.FXCollections</code>의 정적 메소드인 <code>observableArrayList(E... items)</code> 메소드로 얻을 수 있다.
<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
ComboBox combo = new ComboBox();<br/>combo.setItems(FXCollections.observableArrayList("공개", "비공개"));<br/><br/><br/><br/><br/><br/>{{sp2}} | <ComboBox><br/>{{sp2}}<Items><br/>{{sp2}}{{sp2}}<FXCollections fx:factory="observableArrayList"><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="공개"/><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="비공개"/><br/>{{sp2}}{{sp2}}</FXCollections><br/>{{sp2}}</items><br/></ComboBox>
</table2>

=== FXML 로딩과 Scene 생성 ===
* FXML 파일을 작성한 후 이를 이용하여 객체를 만들어야 한다. 이를 '''FXML loading'''이라고 한다.
* javafx.fxml.FXMLLoader를 이용
** 두 개의 load() 메소드 : 정적 메소드, 인스턴스 메소드

<syntaxhighlight lang="java">
Parent root = FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>
* getClass() - 현재 클래스 리턴
* getResource() - 클래스가 위치하는 곳에서 상대 경로로 리소스의 URL을 리턴
* load() - FXML 파일을 로딩

<syntaxhighlight lang="java">
FXMLLoader loader = new FXMLLoader(getClass().getResource("xxx.fxml"));
Parent root = (Parent)loader.load();
</syntaxhighlight>
* load() - Parent 타입을 리턴함. 이것은 FXML 파일에서의 루트 태그로 선언된 컨테이너임
* 만을 루트 태그가 <HBox> 라면 다음과 같이 작성해도 됨

<syntaxhighlight lang="java">
HBox hbox = (HBox) FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>

* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX Scene Builder ===
[[file:CP-SceneBuilder-1.png | thumb | Scene Builder로 root.fxml 띄움]]
* Scene Builder 다운로드 - https://gluonhq.com/products/scene-builder/
* [https://marketplace.visualstudio.com/items?itemName=bilalekrem.scenebuilderextension SceneBuilder extension for Visual Studio Code]
** vscode에서 Ctrl-Shift-P를 눌러 "Configure Scene Builder path"를 실행한다.
*** 경로를 다음과 같이 지정한다 : C:\Users\profs\AppData\Local\SceneBuilder 폴더의 SceneBuilder.exe 지정

* Scene Builder 띄우는 방법
** fxml 파일을 선택한다.
** vscode에서 Ctrl-Shift-P를 누른다.

== JavaFX 컨테이너 ==

<table2 class=wikitable head=top sep=bar align=ll>
컨테이너 | 설명
AnchorPane | 컨트롤을 좌표로 배치하는 레이아웃
BorderPane | 위, 아래, 오른쪽, 왼쪽, 중앙에 컨트롤을 배치하는 레이아웃
FlowPane | 행으로 배치하되 공간이 부족하면 새로운 행에 배치하는 레이아웃
GridPane | 그리드로 배치하되 셀의 크기가 고정적이지 않은 레이아웃
StackPane | 컨트롤을 겹쳐서 배치하는 레이아웃
TilePane | 그리드로 배치하되 고정된 셀의 크기를 갖는 레이아웃
HBox | 수평으로 배치하는 레이아웃
VBox | 수직으로 배치하는 레이아웃
</table2>

=== AnchorPane 컨테이너 ===
[[file:CP-17.4.1-1.png]]

* AnchorPane에서 사용할 수 있는 주요 설정
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
PrefWidth | 폭을 설정 | AnchorPane
PrefHeight | 높이를 설정 | AnchorPane
layoutX | 컨트롤의 X 좌표 | 컨트롤
layoutY | 컨트롤의 Y 좌표 | 컨트롤
<children> | 컨트롤을 포함 | AnchorPane
</table2>

[[file:CP-17.4.1-2.png | thumb | AnchorPane (Scene Builder)]]
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" prefHeight="150.0" prefWidth="300.0">
<children>
<Label layoutX="42.0" layoutY="28.0" text="아이디" />
<Label layoutX="42.0" layoutY="66.0" text="패스워드" />
<TextField layoutX="120.0" layoutY="24.0" />
<PasswordField layoutX="120.0" layoutY="62.0" />
<Button layoutX="97.0" layoutY="106.0" text="로그인" />
<Button layoutX="164.0" layoutY="106.0" text="취소" />
</children>
</AnchorPane>
</syntaxhighlight>

=== HBox와 VBox 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | HBox, VBox
prefHeight | 높이를 설정 | HBox, VBox
alignment | 컨트롤의 정렬을 설정 | HBox, VBox
spacing | 컨트롤의 간격을 설정 | HBox, VBox
fillWidth | 컨트롤의 폭 확장 여부 설정 | VBox
fillHeight | 컨트롤의 높이 확장 여부 설정 | HBox
<children> | 컨트롤을 포함 | HBox, VBox
<HBox.hgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></HBox.hgrow> | HBox의 남은 폭을 채움 | 컨트롤
<VBox.vgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></VBox.vgrow> | VBox의 남을 높이를 채움 | 컨트롤
</table2>

* root2.fxml
** 이 패키지의 하위 폴더로 <code>images</code>를 만들고 여기에 javafx.png 파일을 복사해 넣어둔다. [[file:javafx.png | thumb | javafx.png]]
[[file:CP-17.4.3-project.png | thumb | images 폴더]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.Double?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.Priority?>

<VBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<ImageView fitWidth="200.0" preserveRatio="true"> 
<image>
<Image url="@images/javafx.png" /> 
</image>
</ImageView>
<HBox alignment="CENTER" spacing="20.0">
<children>
<Button text="이전" />
<Button text="다음">
<HBox.hgrow><Priority fx:constant="ALWAYS"/></HBox.hgrow> 
<maxWidth><Double fx:constant="MAX_VALUE"/></maxWidth> 
</Button>
</children>
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
</HBox>
</children>
</VBox>

</syntaxhighlight>

* 예제
[[file:CP-17.4.3-p874.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root2.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== BorderPane 컨테이너 ===
* top, bottom, left, right, center 셀에 컨트롤을 배치하는 컨테이너
* 다른 컨테이너를 배치할 수도 있음
* 각 셀에는 '''하나'''의 컨트롤 또는 컨테이너만 배치할 수 있음

[[file:CP-17.4.4-1.png | 250px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | BorderPane
prefHeight | 높이를 설정 | BorderPane
<top> | top에 배치될 컨트롤을 포함 | BorderPane
<bottom> | bottom에 배치될 컨트롤을 포함 | BorderPane
<right> | right에 배치될 컨트롤을 포함 | BorderPane
<left> | left에 배치될 컨트롤을 포함 | BorderPane
<nowiki><center></nowiki> | center에 배치될 컨트롤을 포함 | BorderPane
</table2>

[[file:CP-17.4.4-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane prefHeight="200.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<top>
<ToolBar prefHeight="40.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<items>
<Button text="Button" />
<Button text="Button" />
</items>
</ToolBar>
</top>
<center>
<TextArea /> 
</center>
<bottom>
<BorderPane>
<center>
<TextField /> 
</center>
<right>
<Button text="Button" />
</right>
</BorderPane>
</bottom>
</BorderPane>
</syntaxhighlight>

=== FlowPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | FlowPane
prefHeight | 높이를 설정 | FlowPane
hgap | 컨트롤의 수평 간격을 설정 | FlowPane
vgap | 컨트롤의 수직 간격을 설정 | FlowPane
<children> | 컨트롤을 포함 | FlowPane
</table2>

[[file:CP-17.4.5-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>

<FlowPane prefHeight="70.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
</children>
</FlowPane>
</syntaxhighlight>

=== TilePane 컨테이너 ===
* 그리드로 컨트롤을 배치하되 고정된 셀(타일) 크기를 갖는 컨테이너
* 오른쪽에 배치할 공간이 부족하면 새로운 행에 컨트롤을 배치함

[[file:CP-17.4.6-TilePane.png | 400px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | TilePane
prefHeight | 높이를 설정 | TilePane
prefTileWidth | 타일의 폭을 설정 | TilePane
prefTileHeight | 타일의 높이를 설정 | TilePane
<children> | 컨트롤을 포함 | TilePane
</table2>

<gallery>
file:fruit1.jpg | fruit1.jpg
file:fruit2.jpg | fruit2.jpg
file:fruit3.jpg | fruit3.jpg
file:fruit4.jpg | fruit4.jpg
file:fruit5.jpg | fruit5.jpg
</gallery>

[[file:CP-17.4.6-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.TilePane?>

<TilePane xmlns:fx="http://javafx.com/fxml" prefHeight="100.0" prefWidth="100.0">
<children>
<ImageView>
<image><Image url="@images/fruit1.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit2.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit3.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit4.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit5.jpg" /></image>
</ImageView>
</children>
</TilePane>
</syntaxhighlight>

=== GridPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | GridPane
prefHeight | 놎이를 설정 | GridPane
hgap | 수평 컨트롤 간격을 설정 | GridPane
vgap | 수직 컨트롤 간격을 설정 | GridPane
<children> | 컨트롤을 포함 | GridPane
GridPane.rowIndex | 컨트롤이 위치하는 행 인덱스를 설정 | 컨트롤
GridPane.columnIndex | 컨트롤이 위치하는 컬럼 인덱스를 설정 | 컨트롤
GridPane.rowSpan | 행 병합 수를 설정 | 컨트롤
GridPane.columnSpan | 컬럼 병합 수를 설정 | 컨트롤
GridPane.hgrow | 수평 빈 공간을 채우기로 설정 | 컨트롤
GridPane.vgrow | 수직 빈 공간을 채우기로 설정 | 컨트롤
GridPane.halignment | 컨트롤의 수평 정렬을 설정 | 컨트롤
GridPane.valignment | 컨트롤의 수직 정렬을 설정 | 컨트롤
</table2>

[[file:CP-17.4.7-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane xmlns:fx="http://javafx.com/fxml" prefWidth="300.0" hgap="10.0" vgap="10.0">
<padding>
<Insets topRightBottomLeft="10.0" />
</padding>

<children>
<Label text="아이디" GridPane.rowIndex="0" GridPane.columnIndex="0" />
<TextField GridPane.rowIndex="0" GridPane.columnIndex="1"
GridPane.hgrow="ALWAYS" /> 

<Label text="패스워드" GridPane.rowIndex="1" GridPane.columnIndex="0" />
<TextField GridPane.columnIndex="1" GridPane.rowIndex="1"
GridPane.hgrow="ALWAYS" /> 
<HBox GridPane.rowIndex="2" GridPane.columnIndex="0"
GridPane.columnSpan="2" GridPane.hgrow="ALWAYS"
alignment="CENTER" spacing="20.0" > 
<children>
<Button text="로그인" />
<Button text="취소" />
</children>
</HBox>
</children>
</GridPane>
</syntaxhighlight>

=== StackPane 컨테이너 ===
* 컨트롤을 겹쳐 배치하는 컨테이너
* 카드 레이아웃(Card Layout)이라고도 함
* 만약 위에 있는 컨트롤이 투명하다면 밑에 있는 컨트롤이 겹쳐 보임

<gallery>
file:duke.jpg | duke.jpg
file:snow.jpg | snow.jpg
</gallery>

[[file:CP-17.4.8-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.StackPane?>

<StackPane xmlns:fx="http://javafx.com/fxml" prefHeight="300.0" prefWidth="500.0">
<children>
<ImageView fitHeight="300.0" fitWidth="500.0">
<image>
<Image url="@images/snow.jpg" />
</image>
</ImageView>
<ImageView preserveRatio="true">
<image>
<Image url="@images/duke.jpg" />
</image>
</ImageView>
</children>
</StackPane>
</syntaxhighlight>

== JavaFX 이벤트 처리 ==

=== 이벤트 핸들러(EventHandler) ===
* JavaFX는 이벤트 발생 콘트롤과 이벤트 핸들러(EventHandler)를 분리하는 위임형(Delegation<ref>Design Pattern 중 Delegation Pattern</ref>) 방식을 사용함
* 이를 위해 먼저 컨트롤에 EventHandler를 등록해야 함 (setOnXXX() 메소드. 예: setOnAction())

<table2 class=wikitable head=top sep=bar align=cccc>
컨트롤(control) | 사건 | 이벤트(event) 발생 | 이벤트 처리 담당 객체 | 이벤트 처리 메소드 실행 | 이벤트 처리 효과
Button | 버튼을 누름 | ActionEvent | EventHandler | public void handle(...) {<br/>{{sp2}}이벤트 처리</br/>} | 1. 윈도우 닫기<br/>2. 컨트롤 내용 변경<br/>3. 다이얼로그 띄우기
</table2>

* Button 클릭 처리하는 이벤트 등록
<syntaxhighlight lang="java">
Button button = new Button();
button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) { ... }
}):
</syntaxhighlight>

* TableView에서 행을 마우스로 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
TableView tableView = new TableView();
tableView.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) { ... }
});
</syntaxhighlight>

* 윈도우 우측 상단(x) 버튼 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
stage.setOnCloseRequest(new EventHandler<WindowEvent>() {
@Override
public void handle(WindowEvent event) { ... }
});
</syntaxhighlight>

* EventHandler는 하나의 메소드를 가진 함수적 인터페이스이므로 람다식을 이용하여 이벤트 등록 가능
<syntaxhighlight lang="java">
button.setOnAction( event->{ ... } );
tableView.setOnMouseClicked( event->{ ... } );
stage.setOnCloseRequest( event->{ ... } );
</syntaxhighlight>

[[file:CP-17.5.1-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox root = new HBox();
root.setPrefSize(200, 50);
root.setAlignment(Pos.CENTER); // 수평 중앙 정렬
root.setSpacing(20);

Button btn1 = new Button("버튼1");
btn1.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
System.out.println("버튼1 클릭");
}
});

Button btn2 = new Button("버튼2");
btn2.setOnAction(event->System.out.println("버튼2 클릭"));

root.getChildren().addAll(btn1, btn2); // HBox에 btn1과 btn2를 추가
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.setOnCloseRequest(event->System.out.println("종료 클릭"));
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

=== FXML 컨트롤러(Controller) ===

==== fx:controller 속성과 컨트롤러 클래스 ====
<syntaxhighlight lang="xml">
<루트컨테이너 xmlns:fx="http://javafx.com/fxml" fx:controller="packageName.ControllerName">
...
</루트컨트롤러>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== fx:id 속성과 @FXML 컨트롤 주입 ====

<syntaxhighlight lang="xml">
<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="sec05.exam02_fxml_controller.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" />
</children>
</HBox>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@FXML private Button btn1;
@FXML private Button btn2;
@FXML
private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== EventHandler 등록 ====

[[file:CP-17.5.2-실행결과.png| thumb | 실행 결과]]
* AppMain.java
<syntaxhighlight lang="java">
package ch17.p889;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

* RootController.java
<syntaxhighlight lang="java">
package ch17.p889;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

public class RootController implements Initializable {
@FXML private Button btn1; // import javafx.fxml.FXML 필요
@FXML private Button btn2;
@FXML private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) {

btn1.setOnAction(new EventHandler<ActionEvent>() { // 직접 EventHandler 생성 후 등록
@Override
public void handle(ActionEvent event) {
handleBtn1Action(event);
}
});

btn2.setOnAction(event->handleBtn2Action(event)); // 람다식 이용
// btn3.setOnAction(event->handleBtn3Action(event));
}

public void handleBtn1Action(ActionEvent event) {
System.out.println("버튼1 클릭");
}

public void handleBtn2Action(ActionEvent event) {
System.out.println("버튼2 클릭");
}
public void handleBtn3Action(ActionEvent event) {
System.out.println("버튼3 클릭");
}

}
</syntaxhighlight>

* root.xml
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.HBox?>

<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="ch17.p889.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" onAction="#handleBtn3Action"/>
</children>
</HBox>
</syntaxhighlight>

==== 이벤트 처리 메소드 매핑 ====
* FXML 파일
<syntaxhighlight lang="xml">
<Button fx:id="btn" text="버튼" onAction="#handleBtnAction" />
</syntaxhighlight>

* Controller 클래스
<syntaxhighlight lang="java">
public void handleBtnAction(ActionEvent event) { ... }
</syntaxhighlight>

== JavaFX 속성 감시와 바인딩 ==

=== 속성 감시 ===
* JavaFX 컨트롤 속성은 세 가지 메소드로 구성
*# Getter
*# Setter
*# Property 객체를 리턴하는 메소드

<syntaxhighlight lang="java">
private StringProperty text = new SimpleStringProperty(); // 값이 저장될 필드

// Setter
public void setText(String newValue) {
text.set(newValue);
}

// Getter
public String getText() {
return text.get();
}

// Property 메소드
public StringProperty textProperty() {
return text;
}
</syntaxhighlight>

* text 속성을 감시하는 리스너 등록
<syntaxhighlight lang="java">
textProperty().addListener(new ChangeListener<String>() {
@Override
public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
...
}
});
</syntaxhighlight>

* Slider의 value 속성에 리스너 등록
<syntaxhighlight lang="java">
Slider slider = new Slider();
slider.valueProperty().addListener( new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
...
}
});
</syntaxhighlight>

* 예제
[[file:CP-17.6.1-실행결과.png | thumb | 예제]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.text.Font?>

<BorderPane xmlns:fx="http://javafx.com/fxml"
fx:controller="ch17.p891.RootController"
prefHeight="250.0" prefWidth="350.0">
<center>
<Label fx:id="label" text="JavaFX">
<font>
<Font size="0" /> 
</font>
</Label>
</center>
<bottom>
<Slider fx:id="slider" />
</bottom>
</BorderPane>
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p891;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.text.Font;

public class RootController implements Initializable {
@FXML private Slider slider;
@FXML private Label label;

@Override
public void initialize(URL location, ResourceBundle resources) {
slider.valueProperty().addListener(new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
label.setFont(new Font(newValue.doubleValue()));
}
});
}

}
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p891;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 속성 바인딩 ===
* JavaFX 속성은 다른 속성과 바인딩될 수 있음
* 바인딩된 속성들은 하나가 변경되면 자동적으로 다른 하나도 변경

* 예: textArea1에서 입력된 내용이 textArea2에 자동으로 입력 (단방향)
<syntaxhighlight lang="java">
TextArea textArea1 = new TextArea();
TextArea textArea2 = new TextArea();
textArea2.textProperty().bind(textArea1.textProperty());
</syntaxhighlight>

* 양방향 바인딩
<syntaxhighlight lang="java">
textArea2.textProperty().bindBidirectional(textArea1.textProperty());
Bindings.bindBidirectional(textArea1.textProperty(), textArea2.textProperty());
</syntaxhighlight>

* Unbind
<syntaxhighlight lang="java">
textArea2.textProperty().unbin(); // 단방향 해제
textArea2.textProperty().unbindBidirectional(textArea1.textProperty()); // 양방향 해제
Bindings.unbindBidirectional(textArea1.textProperty(), textArea2.textProperty()); // 양방향 해제
</syntaxhighlight>

* 예제
[[file:CP-17.6.2-실행결과.png | thumb | 속성 바인딩]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.VBox?>

<VBox xmlns:fx="http://javafx.com/fxml" fx:controller="ch17.p893.RootController" prefHeight="200.0" prefWidth="300.0" spacing="10.0">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<children>
<Label text="textArea1" />
<TextArea fx:id="textArea1" />
<Label text="textArea2" />
<TextArea fx:id="textArea2" />
</children>
</VBox>
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p893;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.binding.Bindings;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TextArea;

public class RootController implements Initializable {
@FXML private TextArea textArea1;
@FXML private TextArea textArea2;

@Override
public void initialize(URL location, ResourceBundle resources) {
Bindings.bindBidirectional(textArea1.textProperty(), textArea2.textProperty());
}

}
</syntaxhighlight>

=== Bindings 클래스 ===

<table2 class=wikitable head=top sep=bar align=ll>
메소드 | 설명
add, substract, multiply, divide | 속성값에 덧셈, 뺄셈, 곱셈, 나눗셈 연산을 수행하고 바인딩함
max, min | 속성값과 어떤 수를 비교해서 최대, 최소값을 얻고 바인딩함
greaterThan, greaterThanOrEqual | 속성값이 어떤 값보다 큰지, 같거나 큰지를 조사해서 true/false로 변환하여 바인딩함
lessThan, lessThanOrEqual | 속성값이 어떤 값보다 작거나, 같거나 작은지를 조사해서 true/false로 변환하여 바인딩함
equal, notEquals | 속성값이 어떤 값과 같은지, 다른지를 조사해서 true/false로 변환하여 바인딩함
equalIgnoreCase, notEqualIgnoreCase | 대소문자와 상관없이 속성값이 어떤 문자열과 같은지, 다른지를 조사해서 true/false로 변환하여 바인딩함
isEmpty, isNotEmpty | 속성값이 비어있는지, 아닌지를 조사해서 true/false로 변환하여 바인딩함
isNull, isNotNull | 속성값이 null 또는 not null인지를 조사해서 true/false로 변환하여 바인딩함
length | 속성값이 문자열일 경우 문자 수를 얻어 바인딩함
size | 속성 타입이 배열, List, Map, Set일 경우 요소 수를 얻어 바인딩함
and, or | 속성값이 boolean일 경우, 논리곱, 논리합을 얻어 바인딩함
not | 속성값이 boolean일 경우, 반대값으로 바인딩함
convert | 속성값을 문자열로 변환해서 바인딩함
valueAt | 속성이 List, Map일 경우 해당 인덱스 또는 키의 값을 얻어 바인딩함
</table2>

* 예제
[[file:CP-17.6.3-실행결과1.png | thumb | 초기 화면]]
[[file:CP-17.6.3-실행결과2.png | thumb | 화면 크기 변환 후]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.shape.Circle?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:id="root" fx:controller="ch17.p895.RootController" prefHeight="200.0" prefWidth="300.0">
<children>
<Circle fx:id="circle" fill="DODGERBLUE" radius="50.0" stroke="BLACK" />
</children>
</AnchorPane>
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p895;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.binding.Bindings;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.layout.AnchorPane;
import javafx.scene.shape.Circle;

public class RootController implements Initializable {
@FXML private AnchorPane root;
@FXML private Circle circle;

@Override
public void initialize(URL location, ResourceBundle resources) {
circle.centerXProperty().bind(Bindings.divide(root.widthProperty(), 2));
circle.centerYProperty().bind(Bindings.divide(root.heightProperty(), 2));
}

}
</syntaxhighlight>

[[category:컴퓨터프로그래밍및실습]]

컴퓨터프로그래밍및실습 (2022년)/1124

2022-07-22T06:01:09Z

Swpark: /* Bindings 클래스 */

컴퓨터프로그래밍및실습 (2022년)/1124

2022-07-22T06:00:41Z

Swpark: /* 속성 바인딩 */

== JavaFX 개요 ==
# AWT
#* Native UI 컴포넌트 사용
#* 운영체제 마다 UI 모양이 다름
# Swing
#* 운영체제가 제공하는 native UI 사용 안 함
#* 운영체제가 새롭게 제공하는 UI 지원의 어려움
# JavaFX
#* Abode의 flash, Microsoft의 silverlight의 대항마
#* JDK 7부터 지원. JDK 8 권장.
#* JDK 11부터는 별도로 설치해야 함.
#* 화면 레이아웃과 스타일, 애플리케이션 로직 분리
#* Java 코드와 분리해서 스타일 시트(CSS)로 외관 작성 → 개발자와 디자이너의 동시 개발 가능
#* Java 코드에서도 레이아웃과 애플리케이션 로직을 분리하고 싶다면 레이아웃은 FXML로 작성, 로직은 Java로 작성
#* JavaFX 애플리케이션 구성 요소
{| class="wikitable" cellpadding="50"
| rowspan="2" align="center" | '''[레이아웃]'''<br/>자바 코드 파일</br>또는 FXML 파일
| align="center" | '''[외관 및 스타일]'''<br/>CSS 파일
| rowspan="2" align="center" | '''[리소스]'''<br/>그림 파일<br/>동영상 파일<br/>...
|-
| align="center" | '''[비즈니스 로직]'''<br/>자바 코드 파일
|}

== JavaFX 애플리케이션 개발 시작 ==
=== 메인 클래스 ===
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX 라이프사이클(life cycle) ===
* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {
public AppMain() {
System.out.println(Thread.currentThread().getName() + ": AppMain() 호출");
}

@Override
public void init() throws Exception {
System.out.println(Thread.currentThread().getName() + ": init() 호출");
}

@Override
public void start(Stage primaryStage) throws Exception {
System.out.println(Thread.currentThread().getName() + ": start() 호출");
primaryStage.show();
}
@Override
public void stop() throws Exception {
System.out.println(Thread.currentThread().getName() + ": stop() 호출");
}

public static void main(String[] args) throws Exception {
System.out.println(Thread.currentThread().getName() + ": main() 호출");
launch(args);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
main: main() 호출
JavaFX Application Thread: AppMain() 호출
JavaFX-Launcher: init() 호출
JavaFX Application Thread: start() 호출
JavaFX Application Thread: stop() 호출 ← 프로그램을 끝내야 실행된다.
</syntaxhighlight>

=== 메일 클래스 실행 매개값 얻기 ===
<syntaxhighlight lang="text">
C:> java AppMain --ip=192.168.0.5 --port=50001
</syntaxhighlight>

* main()에서 launch(args)를 넘겨 받음
* init() 메소드에서 아래와 같이 실행할 수 있음
<syntaxhighlight lang="java">
Parameters params = getParameters();
List<String> list = params.getRaw();
Map<String, String> map = params.getNamed();
</syntaxhighlight>

=== 무대(Stage)와 장면(Scene) ===
* 윈도우 : Stage
* Stage에는 하나의 Scene을 가질 수 있음
* Scene은 직접 생성해야 함

[[file:CP2022_ch17.2_AppMain.png|thumb|AppMain 실행화면]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
VBox root = new VBox();
root.setPrefWidth(350);
root.setPrefHeight(150);
root.setAlignment(Pos.CENTER);
root.setSpacing(20);

Label label = new Label();
label.setText("Hello, JavaFX");
label.setFont(new Font(50));

Button button = new Button();
button.setText("확인");
button.setOnAction(event->Platform.exit());

root.getChildren().add(label);
root.getChildren().add(button);

Scene scene = new Scene(root); // VBox를 루트 컨테이너(root container)로 해서 Scene 생성

primaryStage.setTitle("AppMain입니다");
primaryStage.setScene(scene); // 윈도우에 장면 설정
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

== JavaFX 레이아웃 ==
=== 프로그램적 레이아웃 ===
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | 프로그램적 레이아웃]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox hbox = new HBox();
hbox.setPadding(new Insets(10));
hbox.setSpacing(10);

TextField textField = new TextField();
textField.setPrefWidth(200);

Button button = new Button();
button.setText("확인");

ObservableList list = hbox.getChildren();
list.add(textField);
list.add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 레이아웃 ===
* FXML 파일 (root.fxml)
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | FXML 레이아웃]]
<syntaxhighlight lang="text">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>

<HBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
<spacing>10</spacing>

<children>
<TextField>
<prefWidth>200</prefWidth>
</TextField>

<Button>
<text>확인</text>
</Button>
</children>
</HBox>
</syntaxhighlight>

* AppMain 클래스
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml")); // ← FXML 로드
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 레이아웃(layout) 여백: 패딩(padding)과 마진(margin) ===
<table2 class=wikitable head=top sep=bar align=cll>
구분 | HBox의 패딩 | Button의 마진
개념 | [[file:CP-17.3.3-padding.png]] | [[file:CP-17.3.3-margin.png]]
자바 코드 | HBox hbox = new HBox();<br/>'''hbox.setPadding(new Insets(50))'''; | Button button = new Button();<br/>'''HBox.setMargin(button, new Insets(50));'''
FXML 태그 | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</padding><br/></HBox> | <Button><br/>{{sp2}}<HBox.margin><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</Hbox.margin><br/></Button>
</table2>

* Margin, Padding 설정 방법
<syntaxhighlight lang="java">
// top, right, bottom, left를 모두 동일한 값으로 설정할 때
// Insets(double topRightBottomLeft)
new Insets(50);

// top, right, bottom, left를 다를 값으로 설정할 때
// Insets(double top, double right, double bottom, double left)
new Insets(10, 20, 30, 40);
</syntaxhighlight>

* 패딩과 마진 적용 예
[[file:CP-17.3.3-AppMain.png|thumb|패딩과 마진 적용 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
// 패딩 설정
HBox hbox = new HBox();
hbox.setPadding(new Insets(50, 10, 10, 50));
Button button = new Button();
button.setPrefSize(100, 100);

// 마진 설정
// HBox hbox = new HBox();
// Button button = new Button();
// button.setPrefSize(100, 100);
// HBox.setMargin(button, new Insets(10, 10, 50, 50));

hbox.getChildren().add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 작성 규칙 ===
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox xmlns:fx="http://javafx.com/fxml"><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
TextField textField = new TextField();<br/>textField.setPrefWidth(200);<br/>{{sp2}} | <TextField><br/>{{sp2}}<prefWidth>200</prefWidth><br/></TextField>
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
ObsetvableList list = hbox.getChildren();<br/>list.add(textField);<br/>list.add(button);<br/><br/><br/><br/><br/>{{sp2}} | <children><br/>{{sp2}}<TextField><br/>{{sp2}}{{sp2}}<prefWidth>200</prefWidth><br/>{{sp2}}</TextField><br/>{{sp2}}<Button><br/>{{sp2}}{{sp2}}<text>확인</text><br/>{{sp2}}</Button><br/></children>
</table2>

==== 패키지(package) 선언 ====
<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML 태그
import javafx.scene.layout.HBox; | <?import javafx.scene.layout.HBox?>
import javafx.scene.control.*; | <?import javafx.scene.control.*?>
</table2>

* <?import?>가 들어가는 위치는 <?xml ...>와 루트 컨테이너 태그 사이이다.
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.*?>

<루트 컨테이너 xmlns:fx="http://javafx.com/fxml">
...
</루트 컨테이너>
</syntaxhighlight>

* import를 제대로 하지 않으면 not a valid type 메시지와 함께 javafx.fxml.LoadException 발생

==== 태그(tag) 선언 ====
* 시작 태그와 끝 태그가 매칭되어야 한다.

<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
</table2>

==== 속성(attribute) 선언 ====
* 속성은 "나 '로 감싸야 한다.
<syntaxhighlight lang="xml">
<태그이름 속성명="값" 속성명='값'> ... </태그이름>
</syntaxhighlight>

* 속성명은 Setter 메소드 명이 옴
* 모든 Setter가 사용될 수 있는 것은 아님. 기본 타입(boolean, byte, short, char, int, long, float, double)의 값을 세팅하거나, String을 세팅하는 Setter만 올 수 있음

* 예
<table2 class=wikitable head=top sep=bar align=lll>
자바 코드 | FXML (Setter 태그) | FXML (Setter 속성)
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button> | <Button text="확인"/><br/><br/>{{sp2}}
</table2>

==== 객체 선언 ====
===== 클래스 속성 =====
* 생성자에 매개 변수가 있고, 매개 변수에 @NamedArg(javafx.beans.NamedArg) 어노테이션이 적용되어 있으면 속성명이나 자식 태그로 작성할 수 있음
<table2 class=wikitable sep=bar align=ll>
<클래스 매개변수="값"><br/><br/>{{sp2}} | <클래스><br/>{{sp2}}<매개변수>값</매개변수><br/></클래스>
</table2>

* 예
** HBox를 패딩할 때 setPadding(Insets value) 메소드를 사용하는데
** Insets는 기본 생성자가 없고,
** Insets(double topRightBottomLeft) 또는 Insets(double top, double right, double bottom, double left)만 있음
** 이 경우 아래와 같이 선언 가능함
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
</table2>

===== 클래스 fx:value =====
* 클래스가 valueOf(String) 메소드를 제공하는 경우
<syntaxhighlight lang="xml">
<클래스 fx:value="값" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
String.valueOf("Hello, World!");<br/>Integer.valueOf("1");<br/>Double.valueOf("1.0");<br/>Boolean.valueOf("false"); | <String fx:value="Hello, World!"/><br/><Integer fx:value="1"/><br/><Double fx:value="1.0"/><br/><Boolean fx:value="false"/>
</table2>

===== 클래스 fx:constant =====
*클래스에 정의된 상수값을 얻고 싶을 경우
<syntaxhighlight lang="xml">
<클래스 fx:constant="상수" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
Button button = new Button();<br/>button.setMaxWidth( Double.MAX_VALUE );<br/><br/><br/>{{sp2}} | <Button><br/>{{sp2}}<maxWidth><br/>{{sp2}}{{sp2}}<Double fx:constant="MAX_VALUE"/><br/>{{sp2}}</maxWidth><br/><Button>
</table2>

===== 클래스 fx:factory =====
* 어떤 클래스는 new 연산자로 객체를 생성할 수 없고,
* 정적 메소드(이를 factory 메소드라 부른다)로 객체를 얻어야 하는 경우가 있음
<syntaxhighlight lang="xml">
<클래스 fx:factory="정적메소드" />
</syntaxhighlight>

* 예: <code>ObservableList</code>의 구현 객체는 <code>javafx.collections.FXCollections</code>의 정적 메소드인 <code>observableArrayList(E... items)</code> 메소드로 얻을 수 있다.
<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
ComboBox combo = new ComboBox();<br/>combo.setItems(FXCollections.observableArrayList("공개", "비공개"));<br/><br/><br/><br/><br/><br/>{{sp2}} | <ComboBox><br/>{{sp2}}<Items><br/>{{sp2}}{{sp2}}<FXCollections fx:factory="observableArrayList"><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="공개"/><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="비공개"/><br/>{{sp2}}{{sp2}}</FXCollections><br/>{{sp2}}</items><br/></ComboBox>
</table2>

=== FXML 로딩과 Scene 생성 ===
* FXML 파일을 작성한 후 이를 이용하여 객체를 만들어야 한다. 이를 '''FXML loading'''이라고 한다.
* javafx.fxml.FXMLLoader를 이용
** 두 개의 load() 메소드 : 정적 메소드, 인스턴스 메소드

<syntaxhighlight lang="java">
Parent root = FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>
* getClass() - 현재 클래스 리턴
* getResource() - 클래스가 위치하는 곳에서 상대 경로로 리소스의 URL을 리턴
* load() - FXML 파일을 로딩

<syntaxhighlight lang="java">
FXMLLoader loader = new FXMLLoader(getClass().getResource("xxx.fxml"));
Parent root = (Parent)loader.load();
</syntaxhighlight>
* load() - Parent 타입을 리턴함. 이것은 FXML 파일에서의 루트 태그로 선언된 컨테이너임
* 만을 루트 태그가 <HBox> 라면 다음과 같이 작성해도 됨

<syntaxhighlight lang="java">
HBox hbox = (HBox) FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>

* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX Scene Builder ===
[[file:CP-SceneBuilder-1.png | thumb | Scene Builder로 root.fxml 띄움]]
* Scene Builder 다운로드 - https://gluonhq.com/products/scene-builder/
* [https://marketplace.visualstudio.com/items?itemName=bilalekrem.scenebuilderextension SceneBuilder extension for Visual Studio Code]
** vscode에서 Ctrl-Shift-P를 눌러 "Configure Scene Builder path"를 실행한다.
*** 경로를 다음과 같이 지정한다 : C:\Users\profs\AppData\Local\SceneBuilder 폴더의 SceneBuilder.exe 지정

* Scene Builder 띄우는 방법
** fxml 파일을 선택한다.
** vscode에서 Ctrl-Shift-P를 누른다.

== JavaFX 컨테이너 ==

<table2 class=wikitable head=top sep=bar align=ll>
컨테이너 | 설명
AnchorPane | 컨트롤을 좌표로 배치하는 레이아웃
BorderPane | 위, 아래, 오른쪽, 왼쪽, 중앙에 컨트롤을 배치하는 레이아웃
FlowPane | 행으로 배치하되 공간이 부족하면 새로운 행에 배치하는 레이아웃
GridPane | 그리드로 배치하되 셀의 크기가 고정적이지 않은 레이아웃
StackPane | 컨트롤을 겹쳐서 배치하는 레이아웃
TilePane | 그리드로 배치하되 고정된 셀의 크기를 갖는 레이아웃
HBox | 수평으로 배치하는 레이아웃
VBox | 수직으로 배치하는 레이아웃
</table2>

=== AnchorPane 컨테이너 ===
[[file:CP-17.4.1-1.png]]

* AnchorPane에서 사용할 수 있는 주요 설정
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
PrefWidth | 폭을 설정 | AnchorPane
PrefHeight | 높이를 설정 | AnchorPane
layoutX | 컨트롤의 X 좌표 | 컨트롤
layoutY | 컨트롤의 Y 좌표 | 컨트롤
<children> | 컨트롤을 포함 | AnchorPane
</table2>

[[file:CP-17.4.1-2.png | thumb | AnchorPane (Scene Builder)]]
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" prefHeight="150.0" prefWidth="300.0">
<children>
<Label layoutX="42.0" layoutY="28.0" text="아이디" />
<Label layoutX="42.0" layoutY="66.0" text="패스워드" />
<TextField layoutX="120.0" layoutY="24.0" />
<PasswordField layoutX="120.0" layoutY="62.0" />
<Button layoutX="97.0" layoutY="106.0" text="로그인" />
<Button layoutX="164.0" layoutY="106.0" text="취소" />
</children>
</AnchorPane>
</syntaxhighlight>

=== HBox와 VBox 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | HBox, VBox
prefHeight | 높이를 설정 | HBox, VBox
alignment | 컨트롤의 정렬을 설정 | HBox, VBox
spacing | 컨트롤의 간격을 설정 | HBox, VBox
fillWidth | 컨트롤의 폭 확장 여부 설정 | VBox
fillHeight | 컨트롤의 높이 확장 여부 설정 | HBox
<children> | 컨트롤을 포함 | HBox, VBox
<HBox.hgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></HBox.hgrow> | HBox의 남은 폭을 채움 | 컨트롤
<VBox.vgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></VBox.vgrow> | VBox의 남을 높이를 채움 | 컨트롤
</table2>

* root2.fxml
** 이 패키지의 하위 폴더로 <code>images</code>를 만들고 여기에 javafx.png 파일을 복사해 넣어둔다. [[file:javafx.png | thumb | javafx.png]]
[[file:CP-17.4.3-project.png | thumb | images 폴더]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.Double?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.Priority?>

<VBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<ImageView fitWidth="200.0" preserveRatio="true"> 
<image>
<Image url="@images/javafx.png" /> 
</image>
</ImageView>
<HBox alignment="CENTER" spacing="20.0">
<children>
<Button text="이전" />
<Button text="다음">
<HBox.hgrow><Priority fx:constant="ALWAYS"/></HBox.hgrow> 
<maxWidth><Double fx:constant="MAX_VALUE"/></maxWidth> 
</Button>
</children>
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
</HBox>
</children>
</VBox>

</syntaxhighlight>

* 예제
[[file:CP-17.4.3-p874.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root2.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== BorderPane 컨테이너 ===
* top, bottom, left, right, center 셀에 컨트롤을 배치하는 컨테이너
* 다른 컨테이너를 배치할 수도 있음
* 각 셀에는 '''하나'''의 컨트롤 또는 컨테이너만 배치할 수 있음

[[file:CP-17.4.4-1.png | 250px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | BorderPane
prefHeight | 높이를 설정 | BorderPane
<top> | top에 배치될 컨트롤을 포함 | BorderPane
<bottom> | bottom에 배치될 컨트롤을 포함 | BorderPane
<right> | right에 배치될 컨트롤을 포함 | BorderPane
<left> | left에 배치될 컨트롤을 포함 | BorderPane
<nowiki><center></nowiki> | center에 배치될 컨트롤을 포함 | BorderPane
</table2>

[[file:CP-17.4.4-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane prefHeight="200.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<top>
<ToolBar prefHeight="40.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<items>
<Button text="Button" />
<Button text="Button" />
</items>
</ToolBar>
</top>
<center>
<TextArea /> 
</center>
<bottom>
<BorderPane>
<center>
<TextField /> 
</center>
<right>
<Button text="Button" />
</right>
</BorderPane>
</bottom>
</BorderPane>
</syntaxhighlight>

=== FlowPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | FlowPane
prefHeight | 높이를 설정 | FlowPane
hgap | 컨트롤의 수평 간격을 설정 | FlowPane
vgap | 컨트롤의 수직 간격을 설정 | FlowPane
<children> | 컨트롤을 포함 | FlowPane
</table2>

[[file:CP-17.4.5-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>

<FlowPane prefHeight="70.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
</children>
</FlowPane>
</syntaxhighlight>

=== TilePane 컨테이너 ===
* 그리드로 컨트롤을 배치하되 고정된 셀(타일) 크기를 갖는 컨테이너
* 오른쪽에 배치할 공간이 부족하면 새로운 행에 컨트롤을 배치함

[[file:CP-17.4.6-TilePane.png | 400px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | TilePane
prefHeight | 높이를 설정 | TilePane
prefTileWidth | 타일의 폭을 설정 | TilePane
prefTileHeight | 타일의 높이를 설정 | TilePane
<children> | 컨트롤을 포함 | TilePane
</table2>

<gallery>
file:fruit1.jpg | fruit1.jpg
file:fruit2.jpg | fruit2.jpg
file:fruit3.jpg | fruit3.jpg
file:fruit4.jpg | fruit4.jpg
file:fruit5.jpg | fruit5.jpg
</gallery>

[[file:CP-17.4.6-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.TilePane?>

<TilePane xmlns:fx="http://javafx.com/fxml" prefHeight="100.0" prefWidth="100.0">
<children>
<ImageView>
<image><Image url="@images/fruit1.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit2.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit3.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit4.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit5.jpg" /></image>
</ImageView>
</children>
</TilePane>
</syntaxhighlight>

=== GridPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | GridPane
prefHeight | 놎이를 설정 | GridPane
hgap | 수평 컨트롤 간격을 설정 | GridPane
vgap | 수직 컨트롤 간격을 설정 | GridPane
<children> | 컨트롤을 포함 | GridPane
GridPane.rowIndex | 컨트롤이 위치하는 행 인덱스를 설정 | 컨트롤
GridPane.columnIndex | 컨트롤이 위치하는 컬럼 인덱스를 설정 | 컨트롤
GridPane.rowSpan | 행 병합 수를 설정 | 컨트롤
GridPane.columnSpan | 컬럼 병합 수를 설정 | 컨트롤
GridPane.hgrow | 수평 빈 공간을 채우기로 설정 | 컨트롤
GridPane.vgrow | 수직 빈 공간을 채우기로 설정 | 컨트롤
GridPane.halignment | 컨트롤의 수평 정렬을 설정 | 컨트롤
GridPane.valignment | 컨트롤의 수직 정렬을 설정 | 컨트롤
</table2>

[[file:CP-17.4.7-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane xmlns:fx="http://javafx.com/fxml" prefWidth="300.0" hgap="10.0" vgap="10.0">
<padding>
<Insets topRightBottomLeft="10.0" />
</padding>

<children>
<Label text="아이디" GridPane.rowIndex="0" GridPane.columnIndex="0" />
<TextField GridPane.rowIndex="0" GridPane.columnIndex="1"
GridPane.hgrow="ALWAYS" /> 

<Label text="패스워드" GridPane.rowIndex="1" GridPane.columnIndex="0" />
<TextField GridPane.columnIndex="1" GridPane.rowIndex="1"
GridPane.hgrow="ALWAYS" /> 
<HBox GridPane.rowIndex="2" GridPane.columnIndex="0"
GridPane.columnSpan="2" GridPane.hgrow="ALWAYS"
alignment="CENTER" spacing="20.0" > 
<children>
<Button text="로그인" />
<Button text="취소" />
</children>
</HBox>
</children>
</GridPane>
</syntaxhighlight>

=== StackPane 컨테이너 ===
* 컨트롤을 겹쳐 배치하는 컨테이너
* 카드 레이아웃(Card Layout)이라고도 함
* 만약 위에 있는 컨트롤이 투명하다면 밑에 있는 컨트롤이 겹쳐 보임

<gallery>
file:duke.jpg | duke.jpg
file:snow.jpg | snow.jpg
</gallery>

[[file:CP-17.4.8-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.StackPane?>

<StackPane xmlns:fx="http://javafx.com/fxml" prefHeight="300.0" prefWidth="500.0">
<children>
<ImageView fitHeight="300.0" fitWidth="500.0">
<image>
<Image url="@images/snow.jpg" />
</image>
</ImageView>
<ImageView preserveRatio="true">
<image>
<Image url="@images/duke.jpg" />
</image>
</ImageView>
</children>
</StackPane>
</syntaxhighlight>

== JavaFX 이벤트 처리 ==

=== 이벤트 핸들러(EventHandler) ===
* JavaFX는 이벤트 발생 콘트롤과 이벤트 핸들러(EventHandler)를 분리하는 위임형(Delegation<ref>Design Pattern 중 Delegation Pattern</ref>) 방식을 사용함
* 이를 위해 먼저 컨트롤에 EventHandler를 등록해야 함 (setOnXXX() 메소드. 예: setOnAction())

<table2 class=wikitable head=top sep=bar align=cccc>
컨트롤(control) | 사건 | 이벤트(event) 발생 | 이벤트 처리 담당 객체 | 이벤트 처리 메소드 실행 | 이벤트 처리 효과
Button | 버튼을 누름 | ActionEvent | EventHandler | public void handle(...) {<br/>{{sp2}}이벤트 처리</br/>} | 1. 윈도우 닫기<br/>2. 컨트롤 내용 변경<br/>3. 다이얼로그 띄우기
</table2>

* Button 클릭 처리하는 이벤트 등록
<syntaxhighlight lang="java">
Button button = new Button();
button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) { ... }
}):
</syntaxhighlight>

* TableView에서 행을 마우스로 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
TableView tableView = new TableView();
tableView.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) { ... }
});
</syntaxhighlight>

* 윈도우 우측 상단(x) 버튼 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
stage.setOnCloseRequest(new EventHandler<WindowEvent>() {
@Override
public void handle(WindowEvent event) { ... }
});
</syntaxhighlight>

* EventHandler는 하나의 메소드를 가진 함수적 인터페이스이므로 람다식을 이용하여 이벤트 등록 가능
<syntaxhighlight lang="java">
button.setOnAction( event->{ ... } );
tableView.setOnMouseClicked( event->{ ... } );
stage.setOnCloseRequest( event->{ ... } );
</syntaxhighlight>

[[file:CP-17.5.1-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox root = new HBox();
root.setPrefSize(200, 50);
root.setAlignment(Pos.CENTER); // 수평 중앙 정렬
root.setSpacing(20);

Button btn1 = new Button("버튼1");
btn1.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
System.out.println("버튼1 클릭");
}
});

Button btn2 = new Button("버튼2");
btn2.setOnAction(event->System.out.println("버튼2 클릭"));

root.getChildren().addAll(btn1, btn2); // HBox에 btn1과 btn2를 추가
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.setOnCloseRequest(event->System.out.println("종료 클릭"));
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

=== FXML 컨트롤러(Controller) ===

==== fx:controller 속성과 컨트롤러 클래스 ====
<syntaxhighlight lang="xml">
<루트컨테이너 xmlns:fx="http://javafx.com/fxml" fx:controller="packageName.ControllerName">
...
</루트컨트롤러>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== fx:id 속성과 @FXML 컨트롤 주입 ====

<syntaxhighlight lang="xml">
<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="sec05.exam02_fxml_controller.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" />
</children>
</HBox>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@FXML private Button btn1;
@FXML private Button btn2;
@FXML
private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== EventHandler 등록 ====

[[file:CP-17.5.2-실행결과.png| thumb | 실행 결과]]
* AppMain.java
<syntaxhighlight lang="java">
package ch17.p889;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

* RootController.java
<syntaxhighlight lang="java">
package ch17.p889;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

public class RootController implements Initializable {
@FXML private Button btn1; // import javafx.fxml.FXML 필요
@FXML private Button btn2;
@FXML private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) {

btn1.setOnAction(new EventHandler<ActionEvent>() { // 직접 EventHandler 생성 후 등록
@Override
public void handle(ActionEvent event) {
handleBtn1Action(event);
}
});

btn2.setOnAction(event->handleBtn2Action(event)); // 람다식 이용
// btn3.setOnAction(event->handleBtn3Action(event));
}

public void handleBtn1Action(ActionEvent event) {
System.out.println("버튼1 클릭");
}

public void handleBtn2Action(ActionEvent event) {
System.out.println("버튼2 클릭");
}
public void handleBtn3Action(ActionEvent event) {
System.out.println("버튼3 클릭");
}

}
</syntaxhighlight>

* root.xml
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.HBox?>

<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="ch17.p889.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" onAction="#handleBtn3Action"/>
</children>
</HBox>
</syntaxhighlight>

==== 이벤트 처리 메소드 매핑 ====
* FXML 파일
<syntaxhighlight lang="xml">
<Button fx:id="btn" text="버튼" onAction="#handleBtnAction" />
</syntaxhighlight>

* Controller 클래스
<syntaxhighlight lang="java">
public void handleBtnAction(ActionEvent event) { ... }
</syntaxhighlight>

== JavaFX 속성 감시와 바인딩 ==

=== 속성 감시 ===
* JavaFX 컨트롤 속성은 세 가지 메소드로 구성
*# Getter
*# Setter
*# Property 객체를 리턴하는 메소드

<syntaxhighlight lang="java">
private StringProperty text = new SimpleStringProperty(); // 값이 저장될 필드

// Setter
public void setText(String newValue) {
text.set(newValue);
}

// Getter
public String getText() {
return text.get();
}

// Property 메소드
public StringProperty textProperty() {
return text;
}
</syntaxhighlight>

* text 속성을 감시하는 리스너 등록
<syntaxhighlight lang="java">
textProperty().addListener(new ChangeListener<String>() {
@Override
public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
...
}
});
</syntaxhighlight>

* Slider의 value 속성에 리스너 등록
<syntaxhighlight lang="java">
Slider slider = new Slider();
slider.valueProperty().addListener( new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
...
}
});
</syntaxhighlight>

* 예제
[[file:CP-17.6.1-실행결과.png | thumb | 예제]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.text.Font?>

<BorderPane xmlns:fx="http://javafx.com/fxml"
fx:controller="ch17.p891.RootController"
prefHeight="250.0" prefWidth="350.0">
<center>
<Label fx:id="label" text="JavaFX">
<font>
<Font size="0" /> 
</font>
</Label>
</center>
<bottom>
<Slider fx:id="slider" />
</bottom>
</BorderPane>
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p891;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.text.Font;

public class RootController implements Initializable {
@FXML private Slider slider;
@FXML private Label label;

@Override
public void initialize(URL location, ResourceBundle resources) {
slider.valueProperty().addListener(new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
label.setFont(new Font(newValue.doubleValue()));
}
});
}

}
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p891;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 속성 바인딩 ===
* JavaFX 속성은 다른 속성과 바인딩될 수 있음
* 바인딩된 속성들은 하나가 변경되면 자동적으로 다른 하나도 변경

* 예: textArea1에서 입력된 내용이 textArea2에 자동으로 입력 (단방향)
<syntaxhighlight lang="java">
TextArea textArea1 = new TextArea();
TextArea textArea2 = new TextArea();
textArea2.textProperty().bind(textArea1.textProperty());
</syntaxhighlight>

* 양방향 바인딩
<syntaxhighlight lang="java">
textArea2.textProperty().bindBidirectional(textArea1.textProperty());
Bindings.bindBidirectional(textArea1.textProperty(), textArea2.textProperty());
</syntaxhighlight>

* Unbind
<syntaxhighlight lang="java">
textArea2.textProperty().unbin(); // 단방향 해제
textArea2.textProperty().unbindBidirectional(textArea1.textProperty()); // 양방향 해제
Bindings.unbindBidirectional(textArea1.textProperty(), textArea2.textProperty()); // 양방향 해제
</syntaxhighlight>

* 예제
[[file:CP-17.6.2-실행결과.png | thumb | 속성 바인딩]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.VBox?>

<VBox xmlns:fx="http://javafx.com/fxml" fx:controller="ch17.p893.RootController" prefHeight="200.0" prefWidth="300.0" spacing="10.0">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<children>
<Label text="textArea1" />
<TextArea fx:id="textArea1" />
<Label text="textArea2" />
<TextArea fx:id="textArea2" />
</children>
</VBox>
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p893;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.binding.Bindings;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TextArea;

public class RootController implements Initializable {
@FXML private TextArea textArea1;
@FXML private TextArea textArea2;

@Override
public void initialize(URL location, ResourceBundle resources) {
Bindings.bindBidirectional(textArea1.textProperty(), textArea2.textProperty());
}

}
</syntaxhighlight>

=== Bindings 클래스 ===

<table2 class=wikitable head=top sep=bar align=ll>
메소드 | 설명
add, substract, multiply, divide | 속성값에 덧셈, 뺄셈, 곱셈, 나눗셈 연산을 수행하고 바인딩함
max, min | 속성값과 어떤 수를 비교해서 최대, 최소값을 얻고 바인딩함
greaterThan, greaterThanOrEqual | 속성값이 어떤 값보다 큰지, 같거나 큰지를 조사해서 true/false로 변환하여 바인딩함
lessThan, lessThanOrEqual | 속성값이 어떤 값보다 작거나, 같거나 작은지를 조사해서 true/false로 변환하여 바인딩함
equal, notEquals | 속성값이 어떤 값과 같은지, 다른지를 조사해서 true/false로 변환하여 바인딩함
equalIgnoreCase, notEqualIgnoreCase | 대소문자와 상관없이 속성값이 어떤 문자열과 같은지, 다른지를 조사해서 true/false로 변환하여 바인딩함
isEmpty, isNotEmpty | 속성값이 비어있는지, 아닌지를 조사해서 true/false로 변환하여 바인딩함
isNull, isNotNull | 속성값이 null 또는 not null인지를 조사해서 true/false로 변환하여 바인딩함
length | 속성값이 문자열일 경우 문자 수를 얻어 바인딩함
size | 속성 타입이 배열, List, Map, Set일 경우 요소 수를 얻어 바인딩함
and, or | 속성값이 boolean일 경우, 논리곱, 논리합을 얻어 바인딩함
not | 속성값이 boolean일 경우, 반대값으로 바인딩함
convert | 속성값을 문자열로 변환해서 바인딩함
valueAt | 속성이 List, Map일 경우 해당 인덱스 또는 키의 값을 얻어 바인딩함
</table2>

[[file:CP-17.6.3-실행결과1.png | thumb | 초기 화면]]
[[file:CP-17.6.3-실행결과2.png | thumb | 화면 크기 변환 후]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.shape.Circle?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:id="root" fx:controller="ch17.p895.RootController" prefHeight="200.0" prefWidth="300.0">
<children>
<Circle fx:id="circle" fill="DODGERBLUE" radius="50.0" stroke="BLACK" />
</children>
</AnchorPane>
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p895;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.binding.Bindings;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.layout.AnchorPane;
import javafx.scene.shape.Circle;

public class RootController implements Initializable {
@FXML private AnchorPane root;
@FXML private Circle circle;

@Override
public void initialize(URL location, ResourceBundle resources) {
circle.centerXProperty().bind(Bindings.divide(root.widthProperty(), 2));
circle.centerYProperty().bind(Bindings.divide(root.heightProperty(), 2));
}

}
</syntaxhighlight>

컴퓨터프로그래밍및실습 (2022년)/1124

2022-07-22T05:57:26Z

Swpark: /* 속성 감시 */

== JavaFX 개요 ==
# AWT
#* Native UI 컴포넌트 사용
#* 운영체제 마다 UI 모양이 다름
# Swing
#* 운영체제가 제공하는 native UI 사용 안 함
#* 운영체제가 새롭게 제공하는 UI 지원의 어려움
# JavaFX
#* Abode의 flash, Microsoft의 silverlight의 대항마
#* JDK 7부터 지원. JDK 8 권장.
#* JDK 11부터는 별도로 설치해야 함.
#* 화면 레이아웃과 스타일, 애플리케이션 로직 분리
#* Java 코드와 분리해서 스타일 시트(CSS)로 외관 작성 → 개발자와 디자이너의 동시 개발 가능
#* Java 코드에서도 레이아웃과 애플리케이션 로직을 분리하고 싶다면 레이아웃은 FXML로 작성, 로직은 Java로 작성
#* JavaFX 애플리케이션 구성 요소
{| class="wikitable" cellpadding="50"
| rowspan="2" align="center" | '''[레이아웃]'''<br/>자바 코드 파일</br>또는 FXML 파일
| align="center" | '''[외관 및 스타일]'''<br/>CSS 파일
| rowspan="2" align="center" | '''[리소스]'''<br/>그림 파일<br/>동영상 파일<br/>...
|-
| align="center" | '''[비즈니스 로직]'''<br/>자바 코드 파일
|}

== JavaFX 애플리케이션 개발 시작 ==
=== 메인 클래스 ===
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX 라이프사이클(life cycle) ===
* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {
public AppMain() {
System.out.println(Thread.currentThread().getName() + ": AppMain() 호출");
}

@Override
public void init() throws Exception {
System.out.println(Thread.currentThread().getName() + ": init() 호출");
}

@Override
public void start(Stage primaryStage) throws Exception {
System.out.println(Thread.currentThread().getName() + ": start() 호출");
primaryStage.show();
}
@Override
public void stop() throws Exception {
System.out.println(Thread.currentThread().getName() + ": stop() 호출");
}

public static void main(String[] args) throws Exception {
System.out.println(Thread.currentThread().getName() + ": main() 호출");
launch(args);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
main: main() 호출
JavaFX Application Thread: AppMain() 호출
JavaFX-Launcher: init() 호출
JavaFX Application Thread: start() 호출
JavaFX Application Thread: stop() 호출 ← 프로그램을 끝내야 실행된다.
</syntaxhighlight>

=== 메일 클래스 실행 매개값 얻기 ===
<syntaxhighlight lang="text">
C:> java AppMain --ip=192.168.0.5 --port=50001
</syntaxhighlight>

* main()에서 launch(args)를 넘겨 받음
* init() 메소드에서 아래와 같이 실행할 수 있음
<syntaxhighlight lang="java">
Parameters params = getParameters();
List<String> list = params.getRaw();
Map<String, String> map = params.getNamed();
</syntaxhighlight>

=== 무대(Stage)와 장면(Scene) ===
* 윈도우 : Stage
* Stage에는 하나의 Scene을 가질 수 있음
* Scene은 직접 생성해야 함

[[file:CP2022_ch17.2_AppMain.png|thumb|AppMain 실행화면]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
VBox root = new VBox();
root.setPrefWidth(350);
root.setPrefHeight(150);
root.setAlignment(Pos.CENTER);
root.setSpacing(20);

Label label = new Label();
label.setText("Hello, JavaFX");
label.setFont(new Font(50));

Button button = new Button();
button.setText("확인");
button.setOnAction(event->Platform.exit());

root.getChildren().add(label);
root.getChildren().add(button);

Scene scene = new Scene(root); // VBox를 루트 컨테이너(root container)로 해서 Scene 생성

primaryStage.setTitle("AppMain입니다");
primaryStage.setScene(scene); // 윈도우에 장면 설정
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

== JavaFX 레이아웃 ==
=== 프로그램적 레이아웃 ===
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | 프로그램적 레이아웃]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox hbox = new HBox();
hbox.setPadding(new Insets(10));
hbox.setSpacing(10);

TextField textField = new TextField();
textField.setPrefWidth(200);

Button button = new Button();
button.setText("확인");

ObservableList list = hbox.getChildren();
list.add(textField);
list.add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 레이아웃 ===
* FXML 파일 (root.fxml)
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | FXML 레이아웃]]
<syntaxhighlight lang="text">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>

<HBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
<spacing>10</spacing>

<children>
<TextField>
<prefWidth>200</prefWidth>
</TextField>

<Button>
<text>확인</text>
</Button>
</children>
</HBox>
</syntaxhighlight>

* AppMain 클래스
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml")); // ← FXML 로드
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 레이아웃(layout) 여백: 패딩(padding)과 마진(margin) ===
<table2 class=wikitable head=top sep=bar align=cll>
구분 | HBox의 패딩 | Button의 마진
개념 | [[file:CP-17.3.3-padding.png]] | [[file:CP-17.3.3-margin.png]]
자바 코드 | HBox hbox = new HBox();<br/>'''hbox.setPadding(new Insets(50))'''; | Button button = new Button();<br/>'''HBox.setMargin(button, new Insets(50));'''
FXML 태그 | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</padding><br/></HBox> | <Button><br/>{{sp2}}<HBox.margin><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</Hbox.margin><br/></Button>
</table2>

* Margin, Padding 설정 방법
<syntaxhighlight lang="java">
// top, right, bottom, left를 모두 동일한 값으로 설정할 때
// Insets(double topRightBottomLeft)
new Insets(50);

// top, right, bottom, left를 다를 값으로 설정할 때
// Insets(double top, double right, double bottom, double left)
new Insets(10, 20, 30, 40);
</syntaxhighlight>

* 패딩과 마진 적용 예
[[file:CP-17.3.3-AppMain.png|thumb|패딩과 마진 적용 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
// 패딩 설정
HBox hbox = new HBox();
hbox.setPadding(new Insets(50, 10, 10, 50));
Button button = new Button();
button.setPrefSize(100, 100);

// 마진 설정
// HBox hbox = new HBox();
// Button button = new Button();
// button.setPrefSize(100, 100);
// HBox.setMargin(button, new Insets(10, 10, 50, 50));

hbox.getChildren().add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 작성 규칙 ===
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox xmlns:fx="http://javafx.com/fxml"><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
TextField textField = new TextField();<br/>textField.setPrefWidth(200);<br/>{{sp2}} | <TextField><br/>{{sp2}}<prefWidth>200</prefWidth><br/></TextField>
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
ObsetvableList list = hbox.getChildren();<br/>list.add(textField);<br/>list.add(button);<br/><br/><br/><br/><br/>{{sp2}} | <children><br/>{{sp2}}<TextField><br/>{{sp2}}{{sp2}}<prefWidth>200</prefWidth><br/>{{sp2}}</TextField><br/>{{sp2}}<Button><br/>{{sp2}}{{sp2}}<text>확인</text><br/>{{sp2}}</Button><br/></children>
</table2>

==== 패키지(package) 선언 ====
<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML 태그
import javafx.scene.layout.HBox; | <?import javafx.scene.layout.HBox?>
import javafx.scene.control.*; | <?import javafx.scene.control.*?>
</table2>

* <?import?>가 들어가는 위치는 <?xml ...>와 루트 컨테이너 태그 사이이다.
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.*?>

<루트 컨테이너 xmlns:fx="http://javafx.com/fxml">
...
</루트 컨테이너>
</syntaxhighlight>

* import를 제대로 하지 않으면 not a valid type 메시지와 함께 javafx.fxml.LoadException 발생

==== 태그(tag) 선언 ====
* 시작 태그와 끝 태그가 매칭되어야 한다.

<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
</table2>

==== 속성(attribute) 선언 ====
* 속성은 "나 '로 감싸야 한다.
<syntaxhighlight lang="xml">
<태그이름 속성명="값" 속성명='값'> ... </태그이름>
</syntaxhighlight>

* 속성명은 Setter 메소드 명이 옴
* 모든 Setter가 사용될 수 있는 것은 아님. 기본 타입(boolean, byte, short, char, int, long, float, double)의 값을 세팅하거나, String을 세팅하는 Setter만 올 수 있음

* 예
<table2 class=wikitable head=top sep=bar align=lll>
자바 코드 | FXML (Setter 태그) | FXML (Setter 속성)
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button> | <Button text="확인"/><br/><br/>{{sp2}}
</table2>

==== 객체 선언 ====
===== 클래스 속성 =====
* 생성자에 매개 변수가 있고, 매개 변수에 @NamedArg(javafx.beans.NamedArg) 어노테이션이 적용되어 있으면 속성명이나 자식 태그로 작성할 수 있음
<table2 class=wikitable sep=bar align=ll>
<클래스 매개변수="값"><br/><br/>{{sp2}} | <클래스><br/>{{sp2}}<매개변수>값</매개변수><br/></클래스>
</table2>

* 예
** HBox를 패딩할 때 setPadding(Insets value) 메소드를 사용하는데
** Insets는 기본 생성자가 없고,
** Insets(double topRightBottomLeft) 또는 Insets(double top, double right, double bottom, double left)만 있음
** 이 경우 아래와 같이 선언 가능함
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
</table2>

===== 클래스 fx:value =====
* 클래스가 valueOf(String) 메소드를 제공하는 경우
<syntaxhighlight lang="xml">
<클래스 fx:value="값" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
String.valueOf("Hello, World!");<br/>Integer.valueOf("1");<br/>Double.valueOf("1.0");<br/>Boolean.valueOf("false"); | <String fx:value="Hello, World!"/><br/><Integer fx:value="1"/><br/><Double fx:value="1.0"/><br/><Boolean fx:value="false"/>
</table2>

===== 클래스 fx:constant =====
*클래스에 정의된 상수값을 얻고 싶을 경우
<syntaxhighlight lang="xml">
<클래스 fx:constant="상수" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
Button button = new Button();<br/>button.setMaxWidth( Double.MAX_VALUE );<br/><br/><br/>{{sp2}} | <Button><br/>{{sp2}}<maxWidth><br/>{{sp2}}{{sp2}}<Double fx:constant="MAX_VALUE"/><br/>{{sp2}}</maxWidth><br/><Button>
</table2>

===== 클래스 fx:factory =====
* 어떤 클래스는 new 연산자로 객체를 생성할 수 없고,
* 정적 메소드(이를 factory 메소드라 부른다)로 객체를 얻어야 하는 경우가 있음
<syntaxhighlight lang="xml">
<클래스 fx:factory="정적메소드" />
</syntaxhighlight>

* 예: <code>ObservableList</code>의 구현 객체는 <code>javafx.collections.FXCollections</code>의 정적 메소드인 <code>observableArrayList(E... items)</code> 메소드로 얻을 수 있다.
<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
ComboBox combo = new ComboBox();<br/>combo.setItems(FXCollections.observableArrayList("공개", "비공개"));<br/><br/><br/><br/><br/><br/>{{sp2}} | <ComboBox><br/>{{sp2}}<Items><br/>{{sp2}}{{sp2}}<FXCollections fx:factory="observableArrayList"><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="공개"/><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="비공개"/><br/>{{sp2}}{{sp2}}</FXCollections><br/>{{sp2}}</items><br/></ComboBox>
</table2>

=== FXML 로딩과 Scene 생성 ===
* FXML 파일을 작성한 후 이를 이용하여 객체를 만들어야 한다. 이를 '''FXML loading'''이라고 한다.
* javafx.fxml.FXMLLoader를 이용
** 두 개의 load() 메소드 : 정적 메소드, 인스턴스 메소드

<syntaxhighlight lang="java">
Parent root = FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>
* getClass() - 현재 클래스 리턴
* getResource() - 클래스가 위치하는 곳에서 상대 경로로 리소스의 URL을 리턴
* load() - FXML 파일을 로딩

<syntaxhighlight lang="java">
FXMLLoader loader = new FXMLLoader(getClass().getResource("xxx.fxml"));
Parent root = (Parent)loader.load();
</syntaxhighlight>
* load() - Parent 타입을 리턴함. 이것은 FXML 파일에서의 루트 태그로 선언된 컨테이너임
* 만을 루트 태그가 <HBox> 라면 다음과 같이 작성해도 됨

<syntaxhighlight lang="java">
HBox hbox = (HBox) FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>

* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX Scene Builder ===
[[file:CP-SceneBuilder-1.png | thumb | Scene Builder로 root.fxml 띄움]]
* Scene Builder 다운로드 - https://gluonhq.com/products/scene-builder/
* [https://marketplace.visualstudio.com/items?itemName=bilalekrem.scenebuilderextension SceneBuilder extension for Visual Studio Code]
** vscode에서 Ctrl-Shift-P를 눌러 "Configure Scene Builder path"를 실행한다.
*** 경로를 다음과 같이 지정한다 : C:\Users\profs\AppData\Local\SceneBuilder 폴더의 SceneBuilder.exe 지정

* Scene Builder 띄우는 방법
** fxml 파일을 선택한다.
** vscode에서 Ctrl-Shift-P를 누른다.

== JavaFX 컨테이너 ==

<table2 class=wikitable head=top sep=bar align=ll>
컨테이너 | 설명
AnchorPane | 컨트롤을 좌표로 배치하는 레이아웃
BorderPane | 위, 아래, 오른쪽, 왼쪽, 중앙에 컨트롤을 배치하는 레이아웃
FlowPane | 행으로 배치하되 공간이 부족하면 새로운 행에 배치하는 레이아웃
GridPane | 그리드로 배치하되 셀의 크기가 고정적이지 않은 레이아웃
StackPane | 컨트롤을 겹쳐서 배치하는 레이아웃
TilePane | 그리드로 배치하되 고정된 셀의 크기를 갖는 레이아웃
HBox | 수평으로 배치하는 레이아웃
VBox | 수직으로 배치하는 레이아웃
</table2>

=== AnchorPane 컨테이너 ===
[[file:CP-17.4.1-1.png]]

* AnchorPane에서 사용할 수 있는 주요 설정
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
PrefWidth | 폭을 설정 | AnchorPane
PrefHeight | 높이를 설정 | AnchorPane
layoutX | 컨트롤의 X 좌표 | 컨트롤
layoutY | 컨트롤의 Y 좌표 | 컨트롤
<children> | 컨트롤을 포함 | AnchorPane
</table2>

[[file:CP-17.4.1-2.png | thumb | AnchorPane (Scene Builder)]]
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" prefHeight="150.0" prefWidth="300.0">
<children>
<Label layoutX="42.0" layoutY="28.0" text="아이디" />
<Label layoutX="42.0" layoutY="66.0" text="패스워드" />
<TextField layoutX="120.0" layoutY="24.0" />
<PasswordField layoutX="120.0" layoutY="62.0" />
<Button layoutX="97.0" layoutY="106.0" text="로그인" />
<Button layoutX="164.0" layoutY="106.0" text="취소" />
</children>
</AnchorPane>
</syntaxhighlight>

=== HBox와 VBox 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | HBox, VBox
prefHeight | 높이를 설정 | HBox, VBox
alignment | 컨트롤의 정렬을 설정 | HBox, VBox
spacing | 컨트롤의 간격을 설정 | HBox, VBox
fillWidth | 컨트롤의 폭 확장 여부 설정 | VBox
fillHeight | 컨트롤의 높이 확장 여부 설정 | HBox
<children> | 컨트롤을 포함 | HBox, VBox
<HBox.hgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></HBox.hgrow> | HBox의 남은 폭을 채움 | 컨트롤
<VBox.vgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></VBox.vgrow> | VBox의 남을 높이를 채움 | 컨트롤
</table2>

* root2.fxml
** 이 패키지의 하위 폴더로 <code>images</code>를 만들고 여기에 javafx.png 파일을 복사해 넣어둔다. [[file:javafx.png | thumb | javafx.png]]
[[file:CP-17.4.3-project.png | thumb | images 폴더]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.Double?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.Priority?>

<VBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<ImageView fitWidth="200.0" preserveRatio="true"> 
<image>
<Image url="@images/javafx.png" /> 
</image>
</ImageView>
<HBox alignment="CENTER" spacing="20.0">
<children>
<Button text="이전" />
<Button text="다음">
<HBox.hgrow><Priority fx:constant="ALWAYS"/></HBox.hgrow> 
<maxWidth><Double fx:constant="MAX_VALUE"/></maxWidth> 
</Button>
</children>
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
</HBox>
</children>
</VBox>

</syntaxhighlight>

* 예제
[[file:CP-17.4.3-p874.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root2.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== BorderPane 컨테이너 ===
* top, bottom, left, right, center 셀에 컨트롤을 배치하는 컨테이너
* 다른 컨테이너를 배치할 수도 있음
* 각 셀에는 '''하나'''의 컨트롤 또는 컨테이너만 배치할 수 있음

[[file:CP-17.4.4-1.png | 250px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | BorderPane
prefHeight | 높이를 설정 | BorderPane
<top> | top에 배치될 컨트롤을 포함 | BorderPane
<bottom> | bottom에 배치될 컨트롤을 포함 | BorderPane
<right> | right에 배치될 컨트롤을 포함 | BorderPane
<left> | left에 배치될 컨트롤을 포함 | BorderPane
<nowiki><center></nowiki> | center에 배치될 컨트롤을 포함 | BorderPane
</table2>

[[file:CP-17.4.4-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane prefHeight="200.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<top>
<ToolBar prefHeight="40.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<items>
<Button text="Button" />
<Button text="Button" />
</items>
</ToolBar>
</top>
<center>
<TextArea /> 
</center>
<bottom>
<BorderPane>
<center>
<TextField /> 
</center>
<right>
<Button text="Button" />
</right>
</BorderPane>
</bottom>
</BorderPane>
</syntaxhighlight>

=== FlowPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | FlowPane
prefHeight | 높이를 설정 | FlowPane
hgap | 컨트롤의 수평 간격을 설정 | FlowPane
vgap | 컨트롤의 수직 간격을 설정 | FlowPane
<children> | 컨트롤을 포함 | FlowPane
</table2>

[[file:CP-17.4.5-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>

<FlowPane prefHeight="70.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
</children>
</FlowPane>
</syntaxhighlight>

=== TilePane 컨테이너 ===
* 그리드로 컨트롤을 배치하되 고정된 셀(타일) 크기를 갖는 컨테이너
* 오른쪽에 배치할 공간이 부족하면 새로운 행에 컨트롤을 배치함

[[file:CP-17.4.6-TilePane.png | 400px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | TilePane
prefHeight | 높이를 설정 | TilePane
prefTileWidth | 타일의 폭을 설정 | TilePane
prefTileHeight | 타일의 높이를 설정 | TilePane
<children> | 컨트롤을 포함 | TilePane
</table2>

<gallery>
file:fruit1.jpg | fruit1.jpg
file:fruit2.jpg | fruit2.jpg
file:fruit3.jpg | fruit3.jpg
file:fruit4.jpg | fruit4.jpg
file:fruit5.jpg | fruit5.jpg
</gallery>

[[file:CP-17.4.6-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.TilePane?>

<TilePane xmlns:fx="http://javafx.com/fxml" prefHeight="100.0" prefWidth="100.0">
<children>
<ImageView>
<image><Image url="@images/fruit1.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit2.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit3.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit4.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit5.jpg" /></image>
</ImageView>
</children>
</TilePane>
</syntaxhighlight>

=== GridPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | GridPane
prefHeight | 놎이를 설정 | GridPane
hgap | 수평 컨트롤 간격을 설정 | GridPane
vgap | 수직 컨트롤 간격을 설정 | GridPane
<children> | 컨트롤을 포함 | GridPane
GridPane.rowIndex | 컨트롤이 위치하는 행 인덱스를 설정 | 컨트롤
GridPane.columnIndex | 컨트롤이 위치하는 컬럼 인덱스를 설정 | 컨트롤
GridPane.rowSpan | 행 병합 수를 설정 | 컨트롤
GridPane.columnSpan | 컬럼 병합 수를 설정 | 컨트롤
GridPane.hgrow | 수평 빈 공간을 채우기로 설정 | 컨트롤
GridPane.vgrow | 수직 빈 공간을 채우기로 설정 | 컨트롤
GridPane.halignment | 컨트롤의 수평 정렬을 설정 | 컨트롤
GridPane.valignment | 컨트롤의 수직 정렬을 설정 | 컨트롤
</table2>

[[file:CP-17.4.7-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane xmlns:fx="http://javafx.com/fxml" prefWidth="300.0" hgap="10.0" vgap="10.0">
<padding>
<Insets topRightBottomLeft="10.0" />
</padding>

<children>
<Label text="아이디" GridPane.rowIndex="0" GridPane.columnIndex="0" />
<TextField GridPane.rowIndex="0" GridPane.columnIndex="1"
GridPane.hgrow="ALWAYS" /> 

<Label text="패스워드" GridPane.rowIndex="1" GridPane.columnIndex="0" />
<TextField GridPane.columnIndex="1" GridPane.rowIndex="1"
GridPane.hgrow="ALWAYS" /> 
<HBox GridPane.rowIndex="2" GridPane.columnIndex="0"
GridPane.columnSpan="2" GridPane.hgrow="ALWAYS"
alignment="CENTER" spacing="20.0" > 
<children>
<Button text="로그인" />
<Button text="취소" />
</children>
</HBox>
</children>
</GridPane>
</syntaxhighlight>

=== StackPane 컨테이너 ===
* 컨트롤을 겹쳐 배치하는 컨테이너
* 카드 레이아웃(Card Layout)이라고도 함
* 만약 위에 있는 컨트롤이 투명하다면 밑에 있는 컨트롤이 겹쳐 보임

<gallery>
file:duke.jpg | duke.jpg
file:snow.jpg | snow.jpg
</gallery>

[[file:CP-17.4.8-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.StackPane?>

<StackPane xmlns:fx="http://javafx.com/fxml" prefHeight="300.0" prefWidth="500.0">
<children>
<ImageView fitHeight="300.0" fitWidth="500.0">
<image>
<Image url="@images/snow.jpg" />
</image>
</ImageView>
<ImageView preserveRatio="true">
<image>
<Image url="@images/duke.jpg" />
</image>
</ImageView>
</children>
</StackPane>
</syntaxhighlight>

== JavaFX 이벤트 처리 ==

=== 이벤트 핸들러(EventHandler) ===
* JavaFX는 이벤트 발생 콘트롤과 이벤트 핸들러(EventHandler)를 분리하는 위임형(Delegation<ref>Design Pattern 중 Delegation Pattern</ref>) 방식을 사용함
* 이를 위해 먼저 컨트롤에 EventHandler를 등록해야 함 (setOnXXX() 메소드. 예: setOnAction())

<table2 class=wikitable head=top sep=bar align=cccc>
컨트롤(control) | 사건 | 이벤트(event) 발생 | 이벤트 처리 담당 객체 | 이벤트 처리 메소드 실행 | 이벤트 처리 효과
Button | 버튼을 누름 | ActionEvent | EventHandler | public void handle(...) {<br/>{{sp2}}이벤트 처리</br/>} | 1. 윈도우 닫기<br/>2. 컨트롤 내용 변경<br/>3. 다이얼로그 띄우기
</table2>

* Button 클릭 처리하는 이벤트 등록
<syntaxhighlight lang="java">
Button button = new Button();
button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) { ... }
}):
</syntaxhighlight>

* TableView에서 행을 마우스로 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
TableView tableView = new TableView();
tableView.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) { ... }
});
</syntaxhighlight>

* 윈도우 우측 상단(x) 버튼 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
stage.setOnCloseRequest(new EventHandler<WindowEvent>() {
@Override
public void handle(WindowEvent event) { ... }
});
</syntaxhighlight>

* EventHandler는 하나의 메소드를 가진 함수적 인터페이스이므로 람다식을 이용하여 이벤트 등록 가능
<syntaxhighlight lang="java">
button.setOnAction( event->{ ... } );
tableView.setOnMouseClicked( event->{ ... } );
stage.setOnCloseRequest( event->{ ... } );
</syntaxhighlight>

[[file:CP-17.5.1-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox root = new HBox();
root.setPrefSize(200, 50);
root.setAlignment(Pos.CENTER); // 수평 중앙 정렬
root.setSpacing(20);

Button btn1 = new Button("버튼1");
btn1.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
System.out.println("버튼1 클릭");
}
});

Button btn2 = new Button("버튼2");
btn2.setOnAction(event->System.out.println("버튼2 클릭"));

root.getChildren().addAll(btn1, btn2); // HBox에 btn1과 btn2를 추가
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.setOnCloseRequest(event->System.out.println("종료 클릭"));
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

=== FXML 컨트롤러(Controller) ===

==== fx:controller 속성과 컨트롤러 클래스 ====
<syntaxhighlight lang="xml">
<루트컨테이너 xmlns:fx="http://javafx.com/fxml" fx:controller="packageName.ControllerName">
...
</루트컨트롤러>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== fx:id 속성과 @FXML 컨트롤 주입 ====

<syntaxhighlight lang="xml">
<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="sec05.exam02_fxml_controller.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" />
</children>
</HBox>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@FXML private Button btn1;
@FXML private Button btn2;
@FXML
private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== EventHandler 등록 ====

[[file:CP-17.5.2-실행결과.png| thumb | 실행 결과]]
* AppMain.java
<syntaxhighlight lang="java">
package ch17.p889;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

* RootController.java
<syntaxhighlight lang="java">
package ch17.p889;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

public class RootController implements Initializable {
@FXML private Button btn1; // import javafx.fxml.FXML 필요
@FXML private Button btn2;
@FXML private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) {

btn1.setOnAction(new EventHandler<ActionEvent>() { // 직접 EventHandler 생성 후 등록
@Override
public void handle(ActionEvent event) {
handleBtn1Action(event);
}
});

btn2.setOnAction(event->handleBtn2Action(event)); // 람다식 이용
// btn3.setOnAction(event->handleBtn3Action(event));
}

public void handleBtn1Action(ActionEvent event) {
System.out.println("버튼1 클릭");
}

public void handleBtn2Action(ActionEvent event) {
System.out.println("버튼2 클릭");
}
public void handleBtn3Action(ActionEvent event) {
System.out.println("버튼3 클릭");
}

}
</syntaxhighlight>

* root.xml
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.HBox?>

<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="ch17.p889.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" onAction="#handleBtn3Action"/>
</children>
</HBox>
</syntaxhighlight>

==== 이벤트 처리 메소드 매핑 ====
* FXML 파일
<syntaxhighlight lang="xml">
<Button fx:id="btn" text="버튼" onAction="#handleBtnAction" />
</syntaxhighlight>

* Controller 클래스
<syntaxhighlight lang="java">
public void handleBtnAction(ActionEvent event) { ... }
</syntaxhighlight>

== JavaFX 속성 감시와 바인딩 ==

=== 속성 감시 ===
* JavaFX 컨트롤 속성은 세 가지 메소드로 구성
*# Getter
*# Setter
*# Property 객체를 리턴하는 메소드

<syntaxhighlight lang="java">
private StringProperty text = new SimpleStringProperty(); // 값이 저장될 필드

// Setter
public void setText(String newValue) {
text.set(newValue);
}

// Getter
public String getText() {
return text.get();
}

// Property 메소드
public StringProperty textProperty() {
return text;
}
</syntaxhighlight>

* text 속성을 감시하는 리스너 등록
<syntaxhighlight lang="java">
textProperty().addListener(new ChangeListener<String>() {
@Override
public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
...
}
});
</syntaxhighlight>

* Slider의 value 속성에 리스너 등록
<syntaxhighlight lang="java">
Slider slider = new Slider();
slider.valueProperty().addListener( new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
...
}
});
</syntaxhighlight>

* 예제
[[file:CP-17.6.1-실행결과.png | thumb | 예제]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.text.Font?>

<BorderPane xmlns:fx="http://javafx.com/fxml"
fx:controller="ch17.p891.RootController"
prefHeight="250.0" prefWidth="350.0">
<center>
<Label fx:id="label" text="JavaFX">
<font>
<Font size="0" /> 
</font>
</Label>
</center>
<bottom>
<Slider fx:id="slider" />
</bottom>
</BorderPane>
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p891;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.text.Font;

public class RootController implements Initializable {
@FXML private Slider slider;
@FXML private Label label;

@Override
public void initialize(URL location, ResourceBundle resources) {
slider.valueProperty().addListener(new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
label.setFont(new Font(newValue.doubleValue()));
}
});
}

}
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p891;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 속성 바인딩 ===

<syntaxhighlight lang="java">
TextArea textArea1 = new TextArea();
TextArea textArea2 = new TextArea();
textArea2.textProperty().bind(textArea1.textProperty());
</syntaxhighlight>

<syntaxhighlight lang="java">
textArea2.textProperty().bindBidirectional(textArea1.textProperty());
Bindings.bindBidirectional(textArea1.textProperty(), textArea2.textProperty());
</syntaxhighlight>

<syntaxhighlight lang="java">
textArea2.textProperty().unbin(); // 단방향 해제
textArea2.textProperty().unbindBidirectional(textArea1.textProperty()); // 양방향 해제
Bindings.unbindBidirectional(textArea1.textProperty(), textArea2.textProperty()); // 양방향 해제
</syntaxhighlight>

<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.VBox?>

<VBox xmlns:fx="http://javafx.com/fxml" fx:controller="ch17.p893.RootController" prefHeight="200.0" prefWidth="300.0" spacing="10.0">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<children>
<Label text="textArea1" />
<TextArea fx:id="textArea1" />
<Label text="textArea2" />
<TextArea fx:id="textArea2" />
</children>
</VBox>
</syntaxhighlight>

* 예제
[[file:CP-17.6.2-실행결과.png | thumb | 속성 바인딩]]
<syntaxhighlight lang="java">
package ch17.p893;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.binding.Bindings;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TextArea;

public class RootController implements Initializable {
@FXML private TextArea textArea1;
@FXML private TextArea textArea2;

@Override
public void initialize(URL location, ResourceBundle resources) {
Bindings.bindBidirectional(textArea1.textProperty(), textArea2.textProperty());
}

}
</syntaxhighlight>

=== Bindings 클래스 ===

<table2 class=wikitable head=top sep=bar align=ll>
메소드 | 설명
add, substract, multiply, divide | 속성값에 덧셈, 뺄셈, 곱셈, 나눗셈 연산을 수행하고 바인딩함
max, min | 속성값과 어떤 수를 비교해서 최대, 최소값을 얻고 바인딩함
greaterThan, greaterThanOrEqual | 속성값이 어떤 값보다 큰지, 같거나 큰지를 조사해서 true/false로 변환하여 바인딩함
lessThan, lessThanOrEqual | 속성값이 어떤 값보다 작거나, 같거나 작은지를 조사해서 true/false로 변환하여 바인딩함
equal, notEquals | 속성값이 어떤 값과 같은지, 다른지를 조사해서 true/false로 변환하여 바인딩함
equalIgnoreCase, notEqualIgnoreCase | 대소문자와 상관없이 속성값이 어떤 문자열과 같은지, 다른지를 조사해서 true/false로 변환하여 바인딩함
isEmpty, isNotEmpty | 속성값이 비어있는지, 아닌지를 조사해서 true/false로 변환하여 바인딩함
isNull, isNotNull | 속성값이 null 또는 not null인지를 조사해서 true/false로 변환하여 바인딩함
length | 속성값이 문자열일 경우 문자 수를 얻어 바인딩함
size | 속성 타입이 배열, List, Map, Set일 경우 요소 수를 얻어 바인딩함
and, or | 속성값이 boolean일 경우, 논리곱, 논리합을 얻어 바인딩함
not | 속성값이 boolean일 경우, 반대값으로 바인딩함
convert | 속성값을 문자열로 변환해서 바인딩함
valueAt | 속성이 List, Map일 경우 해당 인덱스 또는 키의 값을 얻어 바인딩함
</table2>

[[file:CP-17.6.3-실행결과1.png | thumb | 초기 화면]]
[[file:CP-17.6.3-실행결과2.png | thumb | 화면 크기 변환 후]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.shape.Circle?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:id="root" fx:controller="ch17.p895.RootController" prefHeight="200.0" prefWidth="300.0">
<children>
<Circle fx:id="circle" fill="DODGERBLUE" radius="50.0" stroke="BLACK" />
</children>
</AnchorPane>
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p895;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.binding.Bindings;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.layout.AnchorPane;
import javafx.scene.shape.Circle;

public class RootController implements Initializable {
@FXML private AnchorPane root;
@FXML private Circle circle;

@Override
public void initialize(URL location, ResourceBundle resources) {
circle.centerXProperty().bind(Bindings.divide(root.widthProperty(), 2));
circle.centerYProperty().bind(Bindings.divide(root.heightProperty(), 2));
}

}
</syntaxhighlight>

File:CP-17.6.1-실행결과.png

2022-07-22T05:53:10Z

Swpark:

File:CP-17.6.2-실행결과.png

2022-07-22T05:51:38Z

Swpark: Swpark moved page File:CP-17.6.1-실행결과.png to File:CP-17.6.2-실행결과.png without leaving a redirect

File:CP-17.6.3-실행결과2.png

2022-07-22T05:49:29Z

Swpark:

File:CP-17.6.3-실행결과1.png

2022-07-22T05:49:18Z

Swpark:

컴퓨터프로그래밍및실습 (2022년)/1124

2022-07-22T05:49:05Z

Swpark: /* JavaFX 속성 감시와 바인딩 */

== JavaFX 개요 ==
# AWT
#* Native UI 컴포넌트 사용
#* 운영체제 마다 UI 모양이 다름
# Swing
#* 운영체제가 제공하는 native UI 사용 안 함
#* 운영체제가 새롭게 제공하는 UI 지원의 어려움
# JavaFX
#* Abode의 flash, Microsoft의 silverlight의 대항마
#* JDK 7부터 지원. JDK 8 권장.
#* JDK 11부터는 별도로 설치해야 함.
#* 화면 레이아웃과 스타일, 애플리케이션 로직 분리
#* Java 코드와 분리해서 스타일 시트(CSS)로 외관 작성 → 개발자와 디자이너의 동시 개발 가능
#* Java 코드에서도 레이아웃과 애플리케이션 로직을 분리하고 싶다면 레이아웃은 FXML로 작성, 로직은 Java로 작성
#* JavaFX 애플리케이션 구성 요소
{| class="wikitable" cellpadding="50"
| rowspan="2" align="center" | '''[레이아웃]'''<br/>자바 코드 파일</br>또는 FXML 파일
| align="center" | '''[외관 및 스타일]'''<br/>CSS 파일
| rowspan="2" align="center" | '''[리소스]'''<br/>그림 파일<br/>동영상 파일<br/>...
|-
| align="center" | '''[비즈니스 로직]'''<br/>자바 코드 파일
|}

== JavaFX 애플리케이션 개발 시작 ==
=== 메인 클래스 ===
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX 라이프사이클(life cycle) ===
* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {
public AppMain() {
System.out.println(Thread.currentThread().getName() + ": AppMain() 호출");
}

@Override
public void init() throws Exception {
System.out.println(Thread.currentThread().getName() + ": init() 호출");
}

@Override
public void start(Stage primaryStage) throws Exception {
System.out.println(Thread.currentThread().getName() + ": start() 호출");
primaryStage.show();
}
@Override
public void stop() throws Exception {
System.out.println(Thread.currentThread().getName() + ": stop() 호출");
}

public static void main(String[] args) throws Exception {
System.out.println(Thread.currentThread().getName() + ": main() 호출");
launch(args);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
main: main() 호출
JavaFX Application Thread: AppMain() 호출
JavaFX-Launcher: init() 호출
JavaFX Application Thread: start() 호출
JavaFX Application Thread: stop() 호출 ← 프로그램을 끝내야 실행된다.
</syntaxhighlight>

=== 메일 클래스 실행 매개값 얻기 ===
<syntaxhighlight lang="text">
C:> java AppMain --ip=192.168.0.5 --port=50001
</syntaxhighlight>

* main()에서 launch(args)를 넘겨 받음
* init() 메소드에서 아래와 같이 실행할 수 있음
<syntaxhighlight lang="java">
Parameters params = getParameters();
List<String> list = params.getRaw();
Map<String, String> map = params.getNamed();
</syntaxhighlight>

=== 무대(Stage)와 장면(Scene) ===
* 윈도우 : Stage
* Stage에는 하나의 Scene을 가질 수 있음
* Scene은 직접 생성해야 함

[[file:CP2022_ch17.2_AppMain.png|thumb|AppMain 실행화면]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
VBox root = new VBox();
root.setPrefWidth(350);
root.setPrefHeight(150);
root.setAlignment(Pos.CENTER);
root.setSpacing(20);

Label label = new Label();
label.setText("Hello, JavaFX");
label.setFont(new Font(50));

Button button = new Button();
button.setText("확인");
button.setOnAction(event->Platform.exit());

root.getChildren().add(label);
root.getChildren().add(button);

Scene scene = new Scene(root); // VBox를 루트 컨테이너(root container)로 해서 Scene 생성

primaryStage.setTitle("AppMain입니다");
primaryStage.setScene(scene); // 윈도우에 장면 설정
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

== JavaFX 레이아웃 ==
=== 프로그램적 레이아웃 ===
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | 프로그램적 레이아웃]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox hbox = new HBox();
hbox.setPadding(new Insets(10));
hbox.setSpacing(10);

TextField textField = new TextField();
textField.setPrefWidth(200);

Button button = new Button();
button.setText("확인");

ObservableList list = hbox.getChildren();
list.add(textField);
list.add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 레이아웃 ===
* FXML 파일 (root.fxml)
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | FXML 레이아웃]]
<syntaxhighlight lang="text">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>

<HBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
<spacing>10</spacing>

<children>
<TextField>
<prefWidth>200</prefWidth>
</TextField>

<Button>
<text>확인</text>
</Button>
</children>
</HBox>
</syntaxhighlight>

* AppMain 클래스
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml")); // ← FXML 로드
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 레이아웃(layout) 여백: 패딩(padding)과 마진(margin) ===
<table2 class=wikitable head=top sep=bar align=cll>
구분 | HBox의 패딩 | Button의 마진
개념 | [[file:CP-17.3.3-padding.png]] | [[file:CP-17.3.3-margin.png]]
자바 코드 | HBox hbox = new HBox();<br/>'''hbox.setPadding(new Insets(50))'''; | Button button = new Button();<br/>'''HBox.setMargin(button, new Insets(50));'''
FXML 태그 | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</padding><br/></HBox> | <Button><br/>{{sp2}}<HBox.margin><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</Hbox.margin><br/></Button>
</table2>

* Margin, Padding 설정 방법
<syntaxhighlight lang="java">
// top, right, bottom, left를 모두 동일한 값으로 설정할 때
// Insets(double topRightBottomLeft)
new Insets(50);

// top, right, bottom, left를 다를 값으로 설정할 때
// Insets(double top, double right, double bottom, double left)
new Insets(10, 20, 30, 40);
</syntaxhighlight>

* 패딩과 마진 적용 예
[[file:CP-17.3.3-AppMain.png|thumb|패딩과 마진 적용 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
// 패딩 설정
HBox hbox = new HBox();
hbox.setPadding(new Insets(50, 10, 10, 50));
Button button = new Button();
button.setPrefSize(100, 100);

// 마진 설정
// HBox hbox = new HBox();
// Button button = new Button();
// button.setPrefSize(100, 100);
// HBox.setMargin(button, new Insets(10, 10, 50, 50));

hbox.getChildren().add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 작성 규칙 ===
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox xmlns:fx="http://javafx.com/fxml"><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
TextField textField = new TextField();<br/>textField.setPrefWidth(200);<br/>{{sp2}} | <TextField><br/>{{sp2}}<prefWidth>200</prefWidth><br/></TextField>
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
ObsetvableList list = hbox.getChildren();<br/>list.add(textField);<br/>list.add(button);<br/><br/><br/><br/><br/>{{sp2}} | <children><br/>{{sp2}}<TextField><br/>{{sp2}}{{sp2}}<prefWidth>200</prefWidth><br/>{{sp2}}</TextField><br/>{{sp2}}<Button><br/>{{sp2}}{{sp2}}<text>확인</text><br/>{{sp2}}</Button><br/></children>
</table2>

==== 패키지(package) 선언 ====
<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML 태그
import javafx.scene.layout.HBox; | <?import javafx.scene.layout.HBox?>
import javafx.scene.control.*; | <?import javafx.scene.control.*?>
</table2>

* <?import?>가 들어가는 위치는 <?xml ...>와 루트 컨테이너 태그 사이이다.
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.*?>

<루트 컨테이너 xmlns:fx="http://javafx.com/fxml">
...
</루트 컨테이너>
</syntaxhighlight>

* import를 제대로 하지 않으면 not a valid type 메시지와 함께 javafx.fxml.LoadException 발생

==== 태그(tag) 선언 ====
* 시작 태그와 끝 태그가 매칭되어야 한다.

<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
</table2>

==== 속성(attribute) 선언 ====
* 속성은 "나 '로 감싸야 한다.
<syntaxhighlight lang="xml">
<태그이름 속성명="값" 속성명='값'> ... </태그이름>
</syntaxhighlight>

* 속성명은 Setter 메소드 명이 옴
* 모든 Setter가 사용될 수 있는 것은 아님. 기본 타입(boolean, byte, short, char, int, long, float, double)의 값을 세팅하거나, String을 세팅하는 Setter만 올 수 있음

* 예
<table2 class=wikitable head=top sep=bar align=lll>
자바 코드 | FXML (Setter 태그) | FXML (Setter 속성)
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button> | <Button text="확인"/><br/><br/>{{sp2}}
</table2>

==== 객체 선언 ====
===== 클래스 속성 =====
* 생성자에 매개 변수가 있고, 매개 변수에 @NamedArg(javafx.beans.NamedArg) 어노테이션이 적용되어 있으면 속성명이나 자식 태그로 작성할 수 있음
<table2 class=wikitable sep=bar align=ll>
<클래스 매개변수="값"><br/><br/>{{sp2}} | <클래스><br/>{{sp2}}<매개변수>값</매개변수><br/></클래스>
</table2>

* 예
** HBox를 패딩할 때 setPadding(Insets value) 메소드를 사용하는데
** Insets는 기본 생성자가 없고,
** Insets(double topRightBottomLeft) 또는 Insets(double top, double right, double bottom, double left)만 있음
** 이 경우 아래와 같이 선언 가능함
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
</table2>

===== 클래스 fx:value =====
* 클래스가 valueOf(String) 메소드를 제공하는 경우
<syntaxhighlight lang="xml">
<클래스 fx:value="값" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
String.valueOf("Hello, World!");<br/>Integer.valueOf("1");<br/>Double.valueOf("1.0");<br/>Boolean.valueOf("false"); | <String fx:value="Hello, World!"/><br/><Integer fx:value="1"/><br/><Double fx:value="1.0"/><br/><Boolean fx:value="false"/>
</table2>

===== 클래스 fx:constant =====
*클래스에 정의된 상수값을 얻고 싶을 경우
<syntaxhighlight lang="xml">
<클래스 fx:constant="상수" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
Button button = new Button();<br/>button.setMaxWidth( Double.MAX_VALUE );<br/><br/><br/>{{sp2}} | <Button><br/>{{sp2}}<maxWidth><br/>{{sp2}}{{sp2}}<Double fx:constant="MAX_VALUE"/><br/>{{sp2}}</maxWidth><br/><Button>
</table2>

===== 클래스 fx:factory =====
* 어떤 클래스는 new 연산자로 객체를 생성할 수 없고,
* 정적 메소드(이를 factory 메소드라 부른다)로 객체를 얻어야 하는 경우가 있음
<syntaxhighlight lang="xml">
<클래스 fx:factory="정적메소드" />
</syntaxhighlight>

* 예: <code>ObservableList</code>의 구현 객체는 <code>javafx.collections.FXCollections</code>의 정적 메소드인 <code>observableArrayList(E... items)</code> 메소드로 얻을 수 있다.
<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
ComboBox combo = new ComboBox();<br/>combo.setItems(FXCollections.observableArrayList("공개", "비공개"));<br/><br/><br/><br/><br/><br/>{{sp2}} | <ComboBox><br/>{{sp2}}<Items><br/>{{sp2}}{{sp2}}<FXCollections fx:factory="observableArrayList"><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="공개"/><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="비공개"/><br/>{{sp2}}{{sp2}}</FXCollections><br/>{{sp2}}</items><br/></ComboBox>
</table2>

=== FXML 로딩과 Scene 생성 ===
* FXML 파일을 작성한 후 이를 이용하여 객체를 만들어야 한다. 이를 '''FXML loading'''이라고 한다.
* javafx.fxml.FXMLLoader를 이용
** 두 개의 load() 메소드 : 정적 메소드, 인스턴스 메소드

<syntaxhighlight lang="java">
Parent root = FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>
* getClass() - 현재 클래스 리턴
* getResource() - 클래스가 위치하는 곳에서 상대 경로로 리소스의 URL을 리턴
* load() - FXML 파일을 로딩

<syntaxhighlight lang="java">
FXMLLoader loader = new FXMLLoader(getClass().getResource("xxx.fxml"));
Parent root = (Parent)loader.load();
</syntaxhighlight>
* load() - Parent 타입을 리턴함. 이것은 FXML 파일에서의 루트 태그로 선언된 컨테이너임
* 만을 루트 태그가 <HBox> 라면 다음과 같이 작성해도 됨

<syntaxhighlight lang="java">
HBox hbox = (HBox) FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>

* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX Scene Builder ===
[[file:CP-SceneBuilder-1.png | thumb | Scene Builder로 root.fxml 띄움]]
* Scene Builder 다운로드 - https://gluonhq.com/products/scene-builder/
* [https://marketplace.visualstudio.com/items?itemName=bilalekrem.scenebuilderextension SceneBuilder extension for Visual Studio Code]
** vscode에서 Ctrl-Shift-P를 눌러 "Configure Scene Builder path"를 실행한다.
*** 경로를 다음과 같이 지정한다 : C:\Users\profs\AppData\Local\SceneBuilder 폴더의 SceneBuilder.exe 지정

* Scene Builder 띄우는 방법
** fxml 파일을 선택한다.
** vscode에서 Ctrl-Shift-P를 누른다.

== JavaFX 컨테이너 ==

<table2 class=wikitable head=top sep=bar align=ll>
컨테이너 | 설명
AnchorPane | 컨트롤을 좌표로 배치하는 레이아웃
BorderPane | 위, 아래, 오른쪽, 왼쪽, 중앙에 컨트롤을 배치하는 레이아웃
FlowPane | 행으로 배치하되 공간이 부족하면 새로운 행에 배치하는 레이아웃
GridPane | 그리드로 배치하되 셀의 크기가 고정적이지 않은 레이아웃
StackPane | 컨트롤을 겹쳐서 배치하는 레이아웃
TilePane | 그리드로 배치하되 고정된 셀의 크기를 갖는 레이아웃
HBox | 수평으로 배치하는 레이아웃
VBox | 수직으로 배치하는 레이아웃
</table2>

=== AnchorPane 컨테이너 ===
[[file:CP-17.4.1-1.png]]

* AnchorPane에서 사용할 수 있는 주요 설정
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
PrefWidth | 폭을 설정 | AnchorPane
PrefHeight | 높이를 설정 | AnchorPane
layoutX | 컨트롤의 X 좌표 | 컨트롤
layoutY | 컨트롤의 Y 좌표 | 컨트롤
<children> | 컨트롤을 포함 | AnchorPane
</table2>

[[file:CP-17.4.1-2.png | thumb | AnchorPane (Scene Builder)]]
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" prefHeight="150.0" prefWidth="300.0">
<children>
<Label layoutX="42.0" layoutY="28.0" text="아이디" />
<Label layoutX="42.0" layoutY="66.0" text="패스워드" />
<TextField layoutX="120.0" layoutY="24.0" />
<PasswordField layoutX="120.0" layoutY="62.0" />
<Button layoutX="97.0" layoutY="106.0" text="로그인" />
<Button layoutX="164.0" layoutY="106.0" text="취소" />
</children>
</AnchorPane>
</syntaxhighlight>

=== HBox와 VBox 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | HBox, VBox
prefHeight | 높이를 설정 | HBox, VBox
alignment | 컨트롤의 정렬을 설정 | HBox, VBox
spacing | 컨트롤의 간격을 설정 | HBox, VBox
fillWidth | 컨트롤의 폭 확장 여부 설정 | VBox
fillHeight | 컨트롤의 높이 확장 여부 설정 | HBox
<children> | 컨트롤을 포함 | HBox, VBox
<HBox.hgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></HBox.hgrow> | HBox의 남은 폭을 채움 | 컨트롤
<VBox.vgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></VBox.vgrow> | VBox의 남을 높이를 채움 | 컨트롤
</table2>

* root2.fxml
** 이 패키지의 하위 폴더로 <code>images</code>를 만들고 여기에 javafx.png 파일을 복사해 넣어둔다. [[file:javafx.png | thumb | javafx.png]]
[[file:CP-17.4.3-project.png | thumb | images 폴더]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.Double?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.Priority?>

<VBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<ImageView fitWidth="200.0" preserveRatio="true"> 
<image>
<Image url="@images/javafx.png" /> 
</image>
</ImageView>
<HBox alignment="CENTER" spacing="20.0">
<children>
<Button text="이전" />
<Button text="다음">
<HBox.hgrow><Priority fx:constant="ALWAYS"/></HBox.hgrow> 
<maxWidth><Double fx:constant="MAX_VALUE"/></maxWidth> 
</Button>
</children>
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
</HBox>
</children>
</VBox>

</syntaxhighlight>

* 예제
[[file:CP-17.4.3-p874.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root2.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== BorderPane 컨테이너 ===
* top, bottom, left, right, center 셀에 컨트롤을 배치하는 컨테이너
* 다른 컨테이너를 배치할 수도 있음
* 각 셀에는 '''하나'''의 컨트롤 또는 컨테이너만 배치할 수 있음

[[file:CP-17.4.4-1.png | 250px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | BorderPane
prefHeight | 높이를 설정 | BorderPane
<top> | top에 배치될 컨트롤을 포함 | BorderPane
<bottom> | bottom에 배치될 컨트롤을 포함 | BorderPane
<right> | right에 배치될 컨트롤을 포함 | BorderPane
<left> | left에 배치될 컨트롤을 포함 | BorderPane
<nowiki><center></nowiki> | center에 배치될 컨트롤을 포함 | BorderPane
</table2>

[[file:CP-17.4.4-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane prefHeight="200.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<top>
<ToolBar prefHeight="40.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<items>
<Button text="Button" />
<Button text="Button" />
</items>
</ToolBar>
</top>
<center>
<TextArea /> 
</center>
<bottom>
<BorderPane>
<center>
<TextField /> 
</center>
<right>
<Button text="Button" />
</right>
</BorderPane>
</bottom>
</BorderPane>
</syntaxhighlight>

=== FlowPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | FlowPane
prefHeight | 높이를 설정 | FlowPane
hgap | 컨트롤의 수평 간격을 설정 | FlowPane
vgap | 컨트롤의 수직 간격을 설정 | FlowPane
<children> | 컨트롤을 포함 | FlowPane
</table2>

[[file:CP-17.4.5-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>

<FlowPane prefHeight="70.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
</children>
</FlowPane>
</syntaxhighlight>

=== TilePane 컨테이너 ===
* 그리드로 컨트롤을 배치하되 고정된 셀(타일) 크기를 갖는 컨테이너
* 오른쪽에 배치할 공간이 부족하면 새로운 행에 컨트롤을 배치함

[[file:CP-17.4.6-TilePane.png | 400px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | TilePane
prefHeight | 높이를 설정 | TilePane
prefTileWidth | 타일의 폭을 설정 | TilePane
prefTileHeight | 타일의 높이를 설정 | TilePane
<children> | 컨트롤을 포함 | TilePane
</table2>

<gallery>
file:fruit1.jpg | fruit1.jpg
file:fruit2.jpg | fruit2.jpg
file:fruit3.jpg | fruit3.jpg
file:fruit4.jpg | fruit4.jpg
file:fruit5.jpg | fruit5.jpg
</gallery>

[[file:CP-17.4.6-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.TilePane?>

<TilePane xmlns:fx="http://javafx.com/fxml" prefHeight="100.0" prefWidth="100.0">
<children>
<ImageView>
<image><Image url="@images/fruit1.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit2.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit3.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit4.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit5.jpg" /></image>
</ImageView>
</children>
</TilePane>
</syntaxhighlight>

=== GridPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | GridPane
prefHeight | 놎이를 설정 | GridPane
hgap | 수평 컨트롤 간격을 설정 | GridPane
vgap | 수직 컨트롤 간격을 설정 | GridPane
<children> | 컨트롤을 포함 | GridPane
GridPane.rowIndex | 컨트롤이 위치하는 행 인덱스를 설정 | 컨트롤
GridPane.columnIndex | 컨트롤이 위치하는 컬럼 인덱스를 설정 | 컨트롤
GridPane.rowSpan | 행 병합 수를 설정 | 컨트롤
GridPane.columnSpan | 컬럼 병합 수를 설정 | 컨트롤
GridPane.hgrow | 수평 빈 공간을 채우기로 설정 | 컨트롤
GridPane.vgrow | 수직 빈 공간을 채우기로 설정 | 컨트롤
GridPane.halignment | 컨트롤의 수평 정렬을 설정 | 컨트롤
GridPane.valignment | 컨트롤의 수직 정렬을 설정 | 컨트롤
</table2>

[[file:CP-17.4.7-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane xmlns:fx="http://javafx.com/fxml" prefWidth="300.0" hgap="10.0" vgap="10.0">
<padding>
<Insets topRightBottomLeft="10.0" />
</padding>

<children>
<Label text="아이디" GridPane.rowIndex="0" GridPane.columnIndex="0" />
<TextField GridPane.rowIndex="0" GridPane.columnIndex="1"
GridPane.hgrow="ALWAYS" /> 

<Label text="패스워드" GridPane.rowIndex="1" GridPane.columnIndex="0" />
<TextField GridPane.columnIndex="1" GridPane.rowIndex="1"
GridPane.hgrow="ALWAYS" /> 
<HBox GridPane.rowIndex="2" GridPane.columnIndex="0"
GridPane.columnSpan="2" GridPane.hgrow="ALWAYS"
alignment="CENTER" spacing="20.0" > 
<children>
<Button text="로그인" />
<Button text="취소" />
</children>
</HBox>
</children>
</GridPane>
</syntaxhighlight>

=== StackPane 컨테이너 ===
* 컨트롤을 겹쳐 배치하는 컨테이너
* 카드 레이아웃(Card Layout)이라고도 함
* 만약 위에 있는 컨트롤이 투명하다면 밑에 있는 컨트롤이 겹쳐 보임

<gallery>
file:duke.jpg | duke.jpg
file:snow.jpg | snow.jpg
</gallery>

[[file:CP-17.4.8-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.StackPane?>

<StackPane xmlns:fx="http://javafx.com/fxml" prefHeight="300.0" prefWidth="500.0">
<children>
<ImageView fitHeight="300.0" fitWidth="500.0">
<image>
<Image url="@images/snow.jpg" />
</image>
</ImageView>
<ImageView preserveRatio="true">
<image>
<Image url="@images/duke.jpg" />
</image>
</ImageView>
</children>
</StackPane>
</syntaxhighlight>

== JavaFX 이벤트 처리 ==

=== 이벤트 핸들러(EventHandler) ===
* JavaFX는 이벤트 발생 콘트롤과 이벤트 핸들러(EventHandler)를 분리하는 위임형(Delegation<ref>Design Pattern 중 Delegation Pattern</ref>) 방식을 사용함
* 이를 위해 먼저 컨트롤에 EventHandler를 등록해야 함 (setOnXXX() 메소드. 예: setOnAction())

<table2 class=wikitable head=top sep=bar align=cccc>
컨트롤(control) | 사건 | 이벤트(event) 발생 | 이벤트 처리 담당 객체 | 이벤트 처리 메소드 실행 | 이벤트 처리 효과
Button | 버튼을 누름 | ActionEvent | EventHandler | public void handle(...) {<br/>{{sp2}}이벤트 처리</br/>} | 1. 윈도우 닫기<br/>2. 컨트롤 내용 변경<br/>3. 다이얼로그 띄우기
</table2>

* Button 클릭 처리하는 이벤트 등록
<syntaxhighlight lang="java">
Button button = new Button();
button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) { ... }
}):
</syntaxhighlight>

* TableView에서 행을 마우스로 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
TableView tableView = new TableView();
tableView.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) { ... }
});
</syntaxhighlight>

* 윈도우 우측 상단(x) 버튼 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
stage.setOnCloseRequest(new EventHandler<WindowEvent>() {
@Override
public void handle(WindowEvent event) { ... }
});
</syntaxhighlight>

* EventHandler는 하나의 메소드를 가진 함수적 인터페이스이므로 람다식을 이용하여 이벤트 등록 가능
<syntaxhighlight lang="java">
button.setOnAction( event->{ ... } );
tableView.setOnMouseClicked( event->{ ... } );
stage.setOnCloseRequest( event->{ ... } );
</syntaxhighlight>

[[file:CP-17.5.1-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox root = new HBox();
root.setPrefSize(200, 50);
root.setAlignment(Pos.CENTER); // 수평 중앙 정렬
root.setSpacing(20);

Button btn1 = new Button("버튼1");
btn1.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
System.out.println("버튼1 클릭");
}
});

Button btn2 = new Button("버튼2");
btn2.setOnAction(event->System.out.println("버튼2 클릭"));

root.getChildren().addAll(btn1, btn2); // HBox에 btn1과 btn2를 추가
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.setOnCloseRequest(event->System.out.println("종료 클릭"));
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

=== FXML 컨트롤러(Controller) ===

==== fx:controller 속성과 컨트롤러 클래스 ====
<syntaxhighlight lang="xml">
<루트컨테이너 xmlns:fx="http://javafx.com/fxml" fx:controller="packageName.ControllerName">
...
</루트컨트롤러>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== fx:id 속성과 @FXML 컨트롤 주입 ====

<syntaxhighlight lang="xml">
<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="sec05.exam02_fxml_controller.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" />
</children>
</HBox>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@FXML private Button btn1;
@FXML private Button btn2;
@FXML
private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== EventHandler 등록 ====

[[file:CP-17.5.2-실행결과.png| thumb | 실행 결과]]
* AppMain.java
<syntaxhighlight lang="java">
package ch17.p889;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

* RootController.java
<syntaxhighlight lang="java">
package ch17.p889;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

public class RootController implements Initializable {
@FXML private Button btn1; // import javafx.fxml.FXML 필요
@FXML private Button btn2;
@FXML private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) {

btn1.setOnAction(new EventHandler<ActionEvent>() { // 직접 EventHandler 생성 후 등록
@Override
public void handle(ActionEvent event) {
handleBtn1Action(event);
}
});

btn2.setOnAction(event->handleBtn2Action(event)); // 람다식 이용
// btn3.setOnAction(event->handleBtn3Action(event));
}

public void handleBtn1Action(ActionEvent event) {
System.out.println("버튼1 클릭");
}

public void handleBtn2Action(ActionEvent event) {
System.out.println("버튼2 클릭");
}
public void handleBtn3Action(ActionEvent event) {
System.out.println("버튼3 클릭");
}

}
</syntaxhighlight>

* root.xml
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.HBox?>

<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="ch17.p889.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" onAction="#handleBtn3Action"/>
</children>
</HBox>
</syntaxhighlight>

==== 이벤트 처리 메소드 매핑 ====
* FXML 파일
<syntaxhighlight lang="xml">
<Button fx:id="btn" text="버튼" onAction="#handleBtnAction" />
</syntaxhighlight>

* Controller 클래스
<syntaxhighlight lang="java">
public void handleBtnAction(ActionEvent event) { ... }
</syntaxhighlight>

== JavaFX 속성 감시와 바인딩 ==

=== 속성 감시 ===
* JavaFX 컨트롤 속성은 세 가지 메소드로 구성
*# Getter
*# Setter
*# Property 객체를 리턴하는 메소드

<syntaxhighlight lang="java">
private StringProperty text = new SimpleStringProperty(); // 값이 저장될 필드

// Setter
public void setText(String newValue) {
text.set(newValue);
}

// Getter
public String getText() {
return text.get();
}

// Property 메소드
public StringProperty textProperty() {
return text;
}
</syntaxhighlight>

<syntaxhighlight lang="java">
textProperty().addListener(new ChangeListener<String>() {
@Override
public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
...
}
});
</syntaxhighlight>

<syntaxhighlight lang="java">
Slider slider = new Slider();
slider.valueProperty().addListener( new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
...
}
});
</syntaxhighlight>

* 예제
[[file:CP-17.6.1-실행결과.png | thumb | 예제]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.text.Font?>

<BorderPane xmlns:fx="http://javafx.com/fxml"
fx:controller="ch17.p891.RootController"
prefHeight="250.0" prefWidth="350.0">
<center>
<Label fx:id="label" text="JavaFX">
<font>
<Font size="0" /> 
</font>
</Label>
</center>
<bottom>
<Slider fx:id="slider" />
</bottom>
</BorderPane>
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p891;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.text.Font;

public class RootController implements Initializable {
@FXML private Slider slider;
@FXML private Label label;

@Override
public void initialize(URL location, ResourceBundle resources) {
slider.valueProperty().addListener(new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
label.setFont(new Font(newValue.doubleValue()));
}
});
}

}
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p891;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 속성 바인딩 ===

<syntaxhighlight lang="java">
TextArea textArea1 = new TextArea();
TextArea textArea2 = new TextArea();
textArea2.textProperty().bind(textArea1.textProperty());
</syntaxhighlight>

<syntaxhighlight lang="java">
textArea2.textProperty().bindBidirectional(textArea1.textProperty());
Bindings.bindBidirectional(textArea1.textProperty(), textArea2.textProperty());
</syntaxhighlight>

<syntaxhighlight lang="java">
textArea2.textProperty().unbin(); // 단방향 해제
textArea2.textProperty().unbindBidirectional(textArea1.textProperty()); // 양방향 해제
Bindings.unbindBidirectional(textArea1.textProperty(), textArea2.textProperty()); // 양방향 해제
</syntaxhighlight>

<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.VBox?>

<VBox xmlns:fx="http://javafx.com/fxml" fx:controller="ch17.p893.RootController" prefHeight="200.0" prefWidth="300.0" spacing="10.0">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<children>
<Label text="textArea1" />
<TextArea fx:id="textArea1" />
<Label text="textArea2" />
<TextArea fx:id="textArea2" />
</children>
</VBox>
</syntaxhighlight>

* 예제
[[file:CP-17.6.2-실행결과.png | thumb | 속성 바인딩]]
<syntaxhighlight lang="java">
package ch17.p893;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.binding.Bindings;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TextArea;

public class RootController implements Initializable {
@FXML private TextArea textArea1;
@FXML private TextArea textArea2;

@Override
public void initialize(URL location, ResourceBundle resources) {
Bindings.bindBidirectional(textArea1.textProperty(), textArea2.textProperty());
}

}
</syntaxhighlight>

=== Bindings 클래스 ===

<table2 class=wikitable head=top sep=bar align=ll>
메소드 | 설명
add, substract, multiply, divide | 속성값에 덧셈, 뺄셈, 곱셈, 나눗셈 연산을 수행하고 바인딩함
max, min | 속성값과 어떤 수를 비교해서 최대, 최소값을 얻고 바인딩함
greaterThan, greaterThanOrEqual | 속성값이 어떤 값보다 큰지, 같거나 큰지를 조사해서 true/false로 변환하여 바인딩함
lessThan, lessThanOrEqual | 속성값이 어떤 값보다 작거나, 같거나 작은지를 조사해서 true/false로 변환하여 바인딩함
equal, notEquals | 속성값이 어떤 값과 같은지, 다른지를 조사해서 true/false로 변환하여 바인딩함
equalIgnoreCase, notEqualIgnoreCase | 대소문자와 상관없이 속성값이 어떤 문자열과 같은지, 다른지를 조사해서 true/false로 변환하여 바인딩함
isEmpty, isNotEmpty | 속성값이 비어있는지, 아닌지를 조사해서 true/false로 변환하여 바인딩함
isNull, isNotNull | 속성값이 null 또는 not null인지를 조사해서 true/false로 변환하여 바인딩함
length | 속성값이 문자열일 경우 문자 수를 얻어 바인딩함
size | 속성 타입이 배열, List, Map, Set일 경우 요소 수를 얻어 바인딩함
and, or | 속성값이 boolean일 경우, 논리곱, 논리합을 얻어 바인딩함
not | 속성값이 boolean일 경우, 반대값으로 바인딩함
convert | 속성값을 문자열로 변환해서 바인딩함
valueAt | 속성이 List, Map일 경우 해당 인덱스 또는 키의 값을 얻어 바인딩함
</table2>

[[file:CP-17.6.3-실행결과1.png | thumb | 초기 화면]]
[[file:CP-17.6.3-실행결과2.png | thumb | 화면 크기 변환 후]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.shape.Circle?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" fx:id="root" fx:controller="ch17.p895.RootController" prefHeight="200.0" prefWidth="300.0">
<children>
<Circle fx:id="circle" fill="DODGERBLUE" radius="50.0" stroke="BLACK" />
</children>
</AnchorPane>
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p895;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.binding.Bindings;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.layout.AnchorPane;
import javafx.scene.shape.Circle;

public class RootController implements Initializable {
@FXML private AnchorPane root;
@FXML private Circle circle;

@Override
public void initialize(URL location, ResourceBundle resources) {
circle.centerXProperty().bind(Bindings.divide(root.widthProperty(), 2));
circle.centerYProperty().bind(Bindings.divide(root.heightProperty(), 2));
}

}
</syntaxhighlight>

File:CP-17.6.2-실행결과.png

2022-07-22T05:15:27Z

Swpark:

컴퓨터프로그래밍및실습 (2022년)/1124

2022-07-22T05:15:18Z

Swpark: /* JavaFX 속성 감시와 바인딩 */

== JavaFX 개요 ==
# AWT
#* Native UI 컴포넌트 사용
#* 운영체제 마다 UI 모양이 다름
# Swing
#* 운영체제가 제공하는 native UI 사용 안 함
#* 운영체제가 새롭게 제공하는 UI 지원의 어려움
# JavaFX
#* Abode의 flash, Microsoft의 silverlight의 대항마
#* JDK 7부터 지원. JDK 8 권장.
#* JDK 11부터는 별도로 설치해야 함.
#* 화면 레이아웃과 스타일, 애플리케이션 로직 분리
#* Java 코드와 분리해서 스타일 시트(CSS)로 외관 작성 → 개발자와 디자이너의 동시 개발 가능
#* Java 코드에서도 레이아웃과 애플리케이션 로직을 분리하고 싶다면 레이아웃은 FXML로 작성, 로직은 Java로 작성
#* JavaFX 애플리케이션 구성 요소
{| class="wikitable" cellpadding="50"
| rowspan="2" align="center" | '''[레이아웃]'''<br/>자바 코드 파일</br>또는 FXML 파일
| align="center" | '''[외관 및 스타일]'''<br/>CSS 파일
| rowspan="2" align="center" | '''[리소스]'''<br/>그림 파일<br/>동영상 파일<br/>...
|-
| align="center" | '''[비즈니스 로직]'''<br/>자바 코드 파일
|}

== JavaFX 애플리케이션 개발 시작 ==
=== 메인 클래스 ===
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX 라이프사이클(life cycle) ===
* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {
public AppMain() {
System.out.println(Thread.currentThread().getName() + ": AppMain() 호출");
}

@Override
public void init() throws Exception {
System.out.println(Thread.currentThread().getName() + ": init() 호출");
}

@Override
public void start(Stage primaryStage) throws Exception {
System.out.println(Thread.currentThread().getName() + ": start() 호출");
primaryStage.show();
}
@Override
public void stop() throws Exception {
System.out.println(Thread.currentThread().getName() + ": stop() 호출");
}

public static void main(String[] args) throws Exception {
System.out.println(Thread.currentThread().getName() + ": main() 호출");
launch(args);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
main: main() 호출
JavaFX Application Thread: AppMain() 호출
JavaFX-Launcher: init() 호출
JavaFX Application Thread: start() 호출
JavaFX Application Thread: stop() 호출 ← 프로그램을 끝내야 실행된다.
</syntaxhighlight>

=== 메일 클래스 실행 매개값 얻기 ===
<syntaxhighlight lang="text">
C:> java AppMain --ip=192.168.0.5 --port=50001
</syntaxhighlight>

* main()에서 launch(args)를 넘겨 받음
* init() 메소드에서 아래와 같이 실행할 수 있음
<syntaxhighlight lang="java">
Parameters params = getParameters();
List<String> list = params.getRaw();
Map<String, String> map = params.getNamed();
</syntaxhighlight>

=== 무대(Stage)와 장면(Scene) ===
* 윈도우 : Stage
* Stage에는 하나의 Scene을 가질 수 있음
* Scene은 직접 생성해야 함

[[file:CP2022_ch17.2_AppMain.png|thumb|AppMain 실행화면]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
VBox root = new VBox();
root.setPrefWidth(350);
root.setPrefHeight(150);
root.setAlignment(Pos.CENTER);
root.setSpacing(20);

Label label = new Label();
label.setText("Hello, JavaFX");
label.setFont(new Font(50));

Button button = new Button();
button.setText("확인");
button.setOnAction(event->Platform.exit());

root.getChildren().add(label);
root.getChildren().add(button);

Scene scene = new Scene(root); // VBox를 루트 컨테이너(root container)로 해서 Scene 생성

primaryStage.setTitle("AppMain입니다");
primaryStage.setScene(scene); // 윈도우에 장면 설정
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

== JavaFX 레이아웃 ==
=== 프로그램적 레이아웃 ===
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | 프로그램적 레이아웃]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox hbox = new HBox();
hbox.setPadding(new Insets(10));
hbox.setSpacing(10);

TextField textField = new TextField();
textField.setPrefWidth(200);

Button button = new Button();
button.setText("확인");

ObservableList list = hbox.getChildren();
list.add(textField);
list.add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 레이아웃 ===
* FXML 파일 (root.fxml)
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | FXML 레이아웃]]
<syntaxhighlight lang="text">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>

<HBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
<spacing>10</spacing>

<children>
<TextField>
<prefWidth>200</prefWidth>
</TextField>

<Button>
<text>확인</text>
</Button>
</children>
</HBox>
</syntaxhighlight>

* AppMain 클래스
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml")); // ← FXML 로드
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 레이아웃(layout) 여백: 패딩(padding)과 마진(margin) ===
<table2 class=wikitable head=top sep=bar align=cll>
구분 | HBox의 패딩 | Button의 마진
개념 | [[file:CP-17.3.3-padding.png]] | [[file:CP-17.3.3-margin.png]]
자바 코드 | HBox hbox = new HBox();<br/>'''hbox.setPadding(new Insets(50))'''; | Button button = new Button();<br/>'''HBox.setMargin(button, new Insets(50));'''
FXML 태그 | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</padding><br/></HBox> | <Button><br/>{{sp2}}<HBox.margin><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</Hbox.margin><br/></Button>
</table2>

* Margin, Padding 설정 방법
<syntaxhighlight lang="java">
// top, right, bottom, left를 모두 동일한 값으로 설정할 때
// Insets(double topRightBottomLeft)
new Insets(50);

// top, right, bottom, left를 다를 값으로 설정할 때
// Insets(double top, double right, double bottom, double left)
new Insets(10, 20, 30, 40);
</syntaxhighlight>

* 패딩과 마진 적용 예
[[file:CP-17.3.3-AppMain.png|thumb|패딩과 마진 적용 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
// 패딩 설정
HBox hbox = new HBox();
hbox.setPadding(new Insets(50, 10, 10, 50));
Button button = new Button();
button.setPrefSize(100, 100);

// 마진 설정
// HBox hbox = new HBox();
// Button button = new Button();
// button.setPrefSize(100, 100);
// HBox.setMargin(button, new Insets(10, 10, 50, 50));

hbox.getChildren().add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 작성 규칙 ===
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox xmlns:fx="http://javafx.com/fxml"><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
TextField textField = new TextField();<br/>textField.setPrefWidth(200);<br/>{{sp2}} | <TextField><br/>{{sp2}}<prefWidth>200</prefWidth><br/></TextField>
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
ObsetvableList list = hbox.getChildren();<br/>list.add(textField);<br/>list.add(button);<br/><br/><br/><br/><br/>{{sp2}} | <children><br/>{{sp2}}<TextField><br/>{{sp2}}{{sp2}}<prefWidth>200</prefWidth><br/>{{sp2}}</TextField><br/>{{sp2}}<Button><br/>{{sp2}}{{sp2}}<text>확인</text><br/>{{sp2}}</Button><br/></children>
</table2>

==== 패키지(package) 선언 ====
<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML 태그
import javafx.scene.layout.HBox; | <?import javafx.scene.layout.HBox?>
import javafx.scene.control.*; | <?import javafx.scene.control.*?>
</table2>

* <?import?>가 들어가는 위치는 <?xml ...>와 루트 컨테이너 태그 사이이다.
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.*?>

<루트 컨테이너 xmlns:fx="http://javafx.com/fxml">
...
</루트 컨테이너>
</syntaxhighlight>

* import를 제대로 하지 않으면 not a valid type 메시지와 함께 javafx.fxml.LoadException 발생

==== 태그(tag) 선언 ====
* 시작 태그와 끝 태그가 매칭되어야 한다.

<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
</table2>

==== 속성(attribute) 선언 ====
* 속성은 "나 '로 감싸야 한다.
<syntaxhighlight lang="xml">
<태그이름 속성명="값" 속성명='값'> ... </태그이름>
</syntaxhighlight>

* 속성명은 Setter 메소드 명이 옴
* 모든 Setter가 사용될 수 있는 것은 아님. 기본 타입(boolean, byte, short, char, int, long, float, double)의 값을 세팅하거나, String을 세팅하는 Setter만 올 수 있음

* 예
<table2 class=wikitable head=top sep=bar align=lll>
자바 코드 | FXML (Setter 태그) | FXML (Setter 속성)
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button> | <Button text="확인"/><br/><br/>{{sp2}}
</table2>

==== 객체 선언 ====
===== 클래스 속성 =====
* 생성자에 매개 변수가 있고, 매개 변수에 @NamedArg(javafx.beans.NamedArg) 어노테이션이 적용되어 있으면 속성명이나 자식 태그로 작성할 수 있음
<table2 class=wikitable sep=bar align=ll>
<클래스 매개변수="값"><br/><br/>{{sp2}} | <클래스><br/>{{sp2}}<매개변수>값</매개변수><br/></클래스>
</table2>

* 예
** HBox를 패딩할 때 setPadding(Insets value) 메소드를 사용하는데
** Insets는 기본 생성자가 없고,
** Insets(double topRightBottomLeft) 또는 Insets(double top, double right, double bottom, double left)만 있음
** 이 경우 아래와 같이 선언 가능함
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
</table2>

===== 클래스 fx:value =====
* 클래스가 valueOf(String) 메소드를 제공하는 경우
<syntaxhighlight lang="xml">
<클래스 fx:value="값" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
String.valueOf("Hello, World!");<br/>Integer.valueOf("1");<br/>Double.valueOf("1.0");<br/>Boolean.valueOf("false"); | <String fx:value="Hello, World!"/><br/><Integer fx:value="1"/><br/><Double fx:value="1.0"/><br/><Boolean fx:value="false"/>
</table2>

===== 클래스 fx:constant =====
*클래스에 정의된 상수값을 얻고 싶을 경우
<syntaxhighlight lang="xml">
<클래스 fx:constant="상수" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
Button button = new Button();<br/>button.setMaxWidth( Double.MAX_VALUE );<br/><br/><br/>{{sp2}} | <Button><br/>{{sp2}}<maxWidth><br/>{{sp2}}{{sp2}}<Double fx:constant="MAX_VALUE"/><br/>{{sp2}}</maxWidth><br/><Button>
</table2>

===== 클래스 fx:factory =====
* 어떤 클래스는 new 연산자로 객체를 생성할 수 없고,
* 정적 메소드(이를 factory 메소드라 부른다)로 객체를 얻어야 하는 경우가 있음
<syntaxhighlight lang="xml">
<클래스 fx:factory="정적메소드" />
</syntaxhighlight>

* 예: <code>ObservableList</code>의 구현 객체는 <code>javafx.collections.FXCollections</code>의 정적 메소드인 <code>observableArrayList(E... items)</code> 메소드로 얻을 수 있다.
<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
ComboBox combo = new ComboBox();<br/>combo.setItems(FXCollections.observableArrayList("공개", "비공개"));<br/><br/><br/><br/><br/><br/>{{sp2}} | <ComboBox><br/>{{sp2}}<Items><br/>{{sp2}}{{sp2}}<FXCollections fx:factory="observableArrayList"><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="공개"/><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="비공개"/><br/>{{sp2}}{{sp2}}</FXCollections><br/>{{sp2}}</items><br/></ComboBox>
</table2>

=== FXML 로딩과 Scene 생성 ===
* FXML 파일을 작성한 후 이를 이용하여 객체를 만들어야 한다. 이를 '''FXML loading'''이라고 한다.
* javafx.fxml.FXMLLoader를 이용
** 두 개의 load() 메소드 : 정적 메소드, 인스턴스 메소드

<syntaxhighlight lang="java">
Parent root = FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>
* getClass() - 현재 클래스 리턴
* getResource() - 클래스가 위치하는 곳에서 상대 경로로 리소스의 URL을 리턴
* load() - FXML 파일을 로딩

<syntaxhighlight lang="java">
FXMLLoader loader = new FXMLLoader(getClass().getResource("xxx.fxml"));
Parent root = (Parent)loader.load();
</syntaxhighlight>
* load() - Parent 타입을 리턴함. 이것은 FXML 파일에서의 루트 태그로 선언된 컨테이너임
* 만을 루트 태그가 <HBox> 라면 다음과 같이 작성해도 됨

<syntaxhighlight lang="java">
HBox hbox = (HBox) FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>

* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX Scene Builder ===
[[file:CP-SceneBuilder-1.png | thumb | Scene Builder로 root.fxml 띄움]]
* Scene Builder 다운로드 - https://gluonhq.com/products/scene-builder/
* [https://marketplace.visualstudio.com/items?itemName=bilalekrem.scenebuilderextension SceneBuilder extension for Visual Studio Code]
** vscode에서 Ctrl-Shift-P를 눌러 "Configure Scene Builder path"를 실행한다.
*** 경로를 다음과 같이 지정한다 : C:\Users\profs\AppData\Local\SceneBuilder 폴더의 SceneBuilder.exe 지정

* Scene Builder 띄우는 방법
** fxml 파일을 선택한다.
** vscode에서 Ctrl-Shift-P를 누른다.

== JavaFX 컨테이너 ==

<table2 class=wikitable head=top sep=bar align=ll>
컨테이너 | 설명
AnchorPane | 컨트롤을 좌표로 배치하는 레이아웃
BorderPane | 위, 아래, 오른쪽, 왼쪽, 중앙에 컨트롤을 배치하는 레이아웃
FlowPane | 행으로 배치하되 공간이 부족하면 새로운 행에 배치하는 레이아웃
GridPane | 그리드로 배치하되 셀의 크기가 고정적이지 않은 레이아웃
StackPane | 컨트롤을 겹쳐서 배치하는 레이아웃
TilePane | 그리드로 배치하되 고정된 셀의 크기를 갖는 레이아웃
HBox | 수평으로 배치하는 레이아웃
VBox | 수직으로 배치하는 레이아웃
</table2>

=== AnchorPane 컨테이너 ===
[[file:CP-17.4.1-1.png]]

* AnchorPane에서 사용할 수 있는 주요 설정
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
PrefWidth | 폭을 설정 | AnchorPane
PrefHeight | 높이를 설정 | AnchorPane
layoutX | 컨트롤의 X 좌표 | 컨트롤
layoutY | 컨트롤의 Y 좌표 | 컨트롤
<children> | 컨트롤을 포함 | AnchorPane
</table2>

[[file:CP-17.4.1-2.png | thumb | AnchorPane (Scene Builder)]]
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" prefHeight="150.0" prefWidth="300.0">
<children>
<Label layoutX="42.0" layoutY="28.0" text="아이디" />
<Label layoutX="42.0" layoutY="66.0" text="패스워드" />
<TextField layoutX="120.0" layoutY="24.0" />
<PasswordField layoutX="120.0" layoutY="62.0" />
<Button layoutX="97.0" layoutY="106.0" text="로그인" />
<Button layoutX="164.0" layoutY="106.0" text="취소" />
</children>
</AnchorPane>
</syntaxhighlight>

=== HBox와 VBox 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | HBox, VBox
prefHeight | 높이를 설정 | HBox, VBox
alignment | 컨트롤의 정렬을 설정 | HBox, VBox
spacing | 컨트롤의 간격을 설정 | HBox, VBox
fillWidth | 컨트롤의 폭 확장 여부 설정 | VBox
fillHeight | 컨트롤의 높이 확장 여부 설정 | HBox
<children> | 컨트롤을 포함 | HBox, VBox
<HBox.hgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></HBox.hgrow> | HBox의 남은 폭을 채움 | 컨트롤
<VBox.vgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></VBox.vgrow> | VBox의 남을 높이를 채움 | 컨트롤
</table2>

* root2.fxml
** 이 패키지의 하위 폴더로 <code>images</code>를 만들고 여기에 javafx.png 파일을 복사해 넣어둔다. [[file:javafx.png | thumb | javafx.png]]
[[file:CP-17.4.3-project.png | thumb | images 폴더]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.Double?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.Priority?>

<VBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<ImageView fitWidth="200.0" preserveRatio="true"> 
<image>
<Image url="@images/javafx.png" /> 
</image>
</ImageView>
<HBox alignment="CENTER" spacing="20.0">
<children>
<Button text="이전" />
<Button text="다음">
<HBox.hgrow><Priority fx:constant="ALWAYS"/></HBox.hgrow> 
<maxWidth><Double fx:constant="MAX_VALUE"/></maxWidth> 
</Button>
</children>
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
</HBox>
</children>
</VBox>

</syntaxhighlight>

* 예제
[[file:CP-17.4.3-p874.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root2.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== BorderPane 컨테이너 ===
* top, bottom, left, right, center 셀에 컨트롤을 배치하는 컨테이너
* 다른 컨테이너를 배치할 수도 있음
* 각 셀에는 '''하나'''의 컨트롤 또는 컨테이너만 배치할 수 있음

[[file:CP-17.4.4-1.png | 250px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | BorderPane
prefHeight | 높이를 설정 | BorderPane
<top> | top에 배치될 컨트롤을 포함 | BorderPane
<bottom> | bottom에 배치될 컨트롤을 포함 | BorderPane
<right> | right에 배치될 컨트롤을 포함 | BorderPane
<left> | left에 배치될 컨트롤을 포함 | BorderPane
<nowiki><center></nowiki> | center에 배치될 컨트롤을 포함 | BorderPane
</table2>

[[file:CP-17.4.4-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane prefHeight="200.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<top>
<ToolBar prefHeight="40.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<items>
<Button text="Button" />
<Button text="Button" />
</items>
</ToolBar>
</top>
<center>
<TextArea /> 
</center>
<bottom>
<BorderPane>
<center>
<TextField /> 
</center>
<right>
<Button text="Button" />
</right>
</BorderPane>
</bottom>
</BorderPane>
</syntaxhighlight>

=== FlowPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | FlowPane
prefHeight | 높이를 설정 | FlowPane
hgap | 컨트롤의 수평 간격을 설정 | FlowPane
vgap | 컨트롤의 수직 간격을 설정 | FlowPane
<children> | 컨트롤을 포함 | FlowPane
</table2>

[[file:CP-17.4.5-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>

<FlowPane prefHeight="70.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
</children>
</FlowPane>
</syntaxhighlight>

=== TilePane 컨테이너 ===
* 그리드로 컨트롤을 배치하되 고정된 셀(타일) 크기를 갖는 컨테이너
* 오른쪽에 배치할 공간이 부족하면 새로운 행에 컨트롤을 배치함

[[file:CP-17.4.6-TilePane.png | 400px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | TilePane
prefHeight | 높이를 설정 | TilePane
prefTileWidth | 타일의 폭을 설정 | TilePane
prefTileHeight | 타일의 높이를 설정 | TilePane
<children> | 컨트롤을 포함 | TilePane
</table2>

<gallery>
file:fruit1.jpg | fruit1.jpg
file:fruit2.jpg | fruit2.jpg
file:fruit3.jpg | fruit3.jpg
file:fruit4.jpg | fruit4.jpg
file:fruit5.jpg | fruit5.jpg
</gallery>

[[file:CP-17.4.6-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.TilePane?>

<TilePane xmlns:fx="http://javafx.com/fxml" prefHeight="100.0" prefWidth="100.0">
<children>
<ImageView>
<image><Image url="@images/fruit1.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit2.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit3.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit4.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit5.jpg" /></image>
</ImageView>
</children>
</TilePane>
</syntaxhighlight>

=== GridPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | GridPane
prefHeight | 놎이를 설정 | GridPane
hgap | 수평 컨트롤 간격을 설정 | GridPane
vgap | 수직 컨트롤 간격을 설정 | GridPane
<children> | 컨트롤을 포함 | GridPane
GridPane.rowIndex | 컨트롤이 위치하는 행 인덱스를 설정 | 컨트롤
GridPane.columnIndex | 컨트롤이 위치하는 컬럼 인덱스를 설정 | 컨트롤
GridPane.rowSpan | 행 병합 수를 설정 | 컨트롤
GridPane.columnSpan | 컬럼 병합 수를 설정 | 컨트롤
GridPane.hgrow | 수평 빈 공간을 채우기로 설정 | 컨트롤
GridPane.vgrow | 수직 빈 공간을 채우기로 설정 | 컨트롤
GridPane.halignment | 컨트롤의 수평 정렬을 설정 | 컨트롤
GridPane.valignment | 컨트롤의 수직 정렬을 설정 | 컨트롤
</table2>

[[file:CP-17.4.7-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane xmlns:fx="http://javafx.com/fxml" prefWidth="300.0" hgap="10.0" vgap="10.0">
<padding>
<Insets topRightBottomLeft="10.0" />
</padding>

<children>
<Label text="아이디" GridPane.rowIndex="0" GridPane.columnIndex="0" />
<TextField GridPane.rowIndex="0" GridPane.columnIndex="1"
GridPane.hgrow="ALWAYS" /> 

<Label text="패스워드" GridPane.rowIndex="1" GridPane.columnIndex="0" />
<TextField GridPane.columnIndex="1" GridPane.rowIndex="1"
GridPane.hgrow="ALWAYS" /> 
<HBox GridPane.rowIndex="2" GridPane.columnIndex="0"
GridPane.columnSpan="2" GridPane.hgrow="ALWAYS"
alignment="CENTER" spacing="20.0" > 
<children>
<Button text="로그인" />
<Button text="취소" />
</children>
</HBox>
</children>
</GridPane>
</syntaxhighlight>

=== StackPane 컨테이너 ===
* 컨트롤을 겹쳐 배치하는 컨테이너
* 카드 레이아웃(Card Layout)이라고도 함
* 만약 위에 있는 컨트롤이 투명하다면 밑에 있는 컨트롤이 겹쳐 보임

<gallery>
file:duke.jpg | duke.jpg
file:snow.jpg | snow.jpg
</gallery>

[[file:CP-17.4.8-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.StackPane?>

<StackPane xmlns:fx="http://javafx.com/fxml" prefHeight="300.0" prefWidth="500.0">
<children>
<ImageView fitHeight="300.0" fitWidth="500.0">
<image>
<Image url="@images/snow.jpg" />
</image>
</ImageView>
<ImageView preserveRatio="true">
<image>
<Image url="@images/duke.jpg" />
</image>
</ImageView>
</children>
</StackPane>
</syntaxhighlight>

== JavaFX 이벤트 처리 ==

=== 이벤트 핸들러(EventHandler) ===
* JavaFX는 이벤트 발생 콘트롤과 이벤트 핸들러(EventHandler)를 분리하는 위임형(Delegation<ref>Design Pattern 중 Delegation Pattern</ref>) 방식을 사용함
* 이를 위해 먼저 컨트롤에 EventHandler를 등록해야 함 (setOnXXX() 메소드. 예: setOnAction())

<table2 class=wikitable head=top sep=bar align=cccc>
컨트롤(control) | 사건 | 이벤트(event) 발생 | 이벤트 처리 담당 객체 | 이벤트 처리 메소드 실행 | 이벤트 처리 효과
Button | 버튼을 누름 | ActionEvent | EventHandler | public void handle(...) {<br/>{{sp2}}이벤트 처리</br/>} | 1. 윈도우 닫기<br/>2. 컨트롤 내용 변경<br/>3. 다이얼로그 띄우기
</table2>

* Button 클릭 처리하는 이벤트 등록
<syntaxhighlight lang="java">
Button button = new Button();
button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) { ... }
}):
</syntaxhighlight>

* TableView에서 행을 마우스로 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
TableView tableView = new TableView();
tableView.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) { ... }
});
</syntaxhighlight>

* 윈도우 우측 상단(x) 버튼 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
stage.setOnCloseRequest(new EventHandler<WindowEvent>() {
@Override
public void handle(WindowEvent event) { ... }
});
</syntaxhighlight>

* EventHandler는 하나의 메소드를 가진 함수적 인터페이스이므로 람다식을 이용하여 이벤트 등록 가능
<syntaxhighlight lang="java">
button.setOnAction( event->{ ... } );
tableView.setOnMouseClicked( event->{ ... } );
stage.setOnCloseRequest( event->{ ... } );
</syntaxhighlight>

[[file:CP-17.5.1-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox root = new HBox();
root.setPrefSize(200, 50);
root.setAlignment(Pos.CENTER); // 수평 중앙 정렬
root.setSpacing(20);

Button btn1 = new Button("버튼1");
btn1.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
System.out.println("버튼1 클릭");
}
});

Button btn2 = new Button("버튼2");
btn2.setOnAction(event->System.out.println("버튼2 클릭"));

root.getChildren().addAll(btn1, btn2); // HBox에 btn1과 btn2를 추가
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.setOnCloseRequest(event->System.out.println("종료 클릭"));
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

=== FXML 컨트롤러(Controller) ===

==== fx:controller 속성과 컨트롤러 클래스 ====
<syntaxhighlight lang="xml">
<루트컨테이너 xmlns:fx="http://javafx.com/fxml" fx:controller="packageName.ControllerName">
...
</루트컨트롤러>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== fx:id 속성과 @FXML 컨트롤 주입 ====

<syntaxhighlight lang="xml">
<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="sec05.exam02_fxml_controller.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" />
</children>
</HBox>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@FXML private Button btn1;
@FXML private Button btn2;
@FXML
private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== EventHandler 등록 ====

[[file:CP-17.5.2-실행결과.png| thumb | 실행 결과]]
* AppMain.java
<syntaxhighlight lang="java">
package ch17.p889;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

* RootController.java
<syntaxhighlight lang="java">
package ch17.p889;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

public class RootController implements Initializable {
@FXML private Button btn1; // import javafx.fxml.FXML 필요
@FXML private Button btn2;
@FXML private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) {

btn1.setOnAction(new EventHandler<ActionEvent>() { // 직접 EventHandler 생성 후 등록
@Override
public void handle(ActionEvent event) {
handleBtn1Action(event);
}
});

btn2.setOnAction(event->handleBtn2Action(event)); // 람다식 이용
// btn3.setOnAction(event->handleBtn3Action(event));
}

public void handleBtn1Action(ActionEvent event) {
System.out.println("버튼1 클릭");
}

public void handleBtn2Action(ActionEvent event) {
System.out.println("버튼2 클릭");
}
public void handleBtn3Action(ActionEvent event) {
System.out.println("버튼3 클릭");
}

}
</syntaxhighlight>

* root.xml
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.HBox?>

<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="ch17.p889.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" onAction="#handleBtn3Action"/>
</children>
</HBox>
</syntaxhighlight>

==== 이벤트 처리 메소드 매핑 ====
* FXML 파일
<syntaxhighlight lang="xml">
<Button fx:id="btn" text="버튼" onAction="#handleBtnAction" />
</syntaxhighlight>

* Controller 클래스
<syntaxhighlight lang="java">
public void handleBtnAction(ActionEvent event) { ... }
</syntaxhighlight>

== JavaFX 속성 감시와 바인딩 ==

=== 속성 감시 ===
<syntaxhighlight lang="java">
private StringProperty text = new SimpleStringProperty(); // 값이 저장될 필드

// Setter
public void setText(String newValue) {
text.set(newValue);
}

// Getter
public String getText() {
return text.get();
}

// Property 메소드
public StringProperty textProperty() {
return text;
}
</syntaxhighlight>

<syntaxhighlight lang="java">
textProperty().addListener(new ChangeListener<String>() {
@Override
public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
...
}
});
</syntaxhighlight>

<syntaxhighlight lang="java">
Slider slider = new Slider();
slider.valueProperty().addListener( new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
...
}
});
</syntaxhighlight>

* 예제
[[file:CP-17.6.1-실행결과.png | thumb | 예제]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.text.Font?>

<BorderPane xmlns:fx="http://javafx.com/fxml"
fx:controller="ch17.p891.RootController"
prefHeight="250.0" prefWidth="350.0">
<center>
<Label fx:id="label" text="JavaFX">
<font>
<Font size="0" /> 
</font>
</Label>
</center>
<bottom>
<Slider fx:id="slider" />
</bottom>
</BorderPane>
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p891;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.text.Font;

public class RootController implements Initializable {
@FXML private Slider slider;
@FXML private Label label;

@Override
public void initialize(URL location, ResourceBundle resources) {
slider.valueProperty().addListener(new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
label.setFont(new Font(newValue.doubleValue()));
}
});
}

}
</syntaxhighlight>

<syntaxhighlight lang="java">
package ch17.p891;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 속성 바인딩 ===

<syntaxhighlight lang="java">
TextArea textArea1 = new TextArea();
TextArea textArea2 = new TextArea();
textArea2.textProperty().bind(textArea1.textProperty());
</syntaxhighlight>

<syntaxhighlight lang="java">
textArea2.textProperty().bindBidirectional(textArea1.textProperty());
Bindings.bindBidirectional(textArea1.textProperty(), textArea2.textProperty());
</syntaxhighlight>

<syntaxhighlight lang="java">
textArea2.textProperty().unbin(); // 단방향 해제
textArea2.textProperty().unbindBidirectional(textArea1.textProperty()); // 양방향 해제
Bindings.unbindBidirectional(textArea1.textProperty(), textArea2.textProperty()); // 양방향 해제
</syntaxhighlight>

<syntaxhighlight lang="java">
</syntaxhighlight>

<syntaxhighlight lang="java">
</syntaxhighlight>

=== Bindings 클래스 ===

<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.VBox?>

<VBox xmlns:fx="http://javafx.com/fxml" fx:controller="ch17.p893.RootController" prefHeight="200.0" prefWidth="300.0" spacing="10.0">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<children>
<Label text="textArea1" />
<TextArea fx:id="textArea1" />
<Label text="textArea2" />
<TextArea fx:id="textArea2" />
</children>
</VBox>
</syntaxhighlight>

* 예제
[[file:CP-17.6.2-실행결과.png | thumb | 속성 바인딩]]
<syntaxhighlight lang="java">
package ch17.p893;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.binding.Bindings;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TextArea;

public class RootController implements Initializable {
@FXML private TextArea textArea1;
@FXML private TextArea textArea2;

@Override
public void initialize(URL location, ResourceBundle resources) {
Bindings.bindBidirectional(textArea1.textProperty(), textArea2.textProperty());
}

}
</syntaxhighlight>

File:CP-17.5.2-실행결과.png

2022-07-22T03:17:25Z

Swpark:

컴퓨터프로그래밍및실습 (2022년)/1124

2022-07-22T03:17:12Z

Swpark: /* EventHandler 등록 */

컴퓨터프로그래밍및실습 (2022년)/1124

2022-07-22T03:16:14Z

Swpark: /* 이벤트 처리 메소드 매핑 */

== JavaFX 개요 ==
# AWT
#* Native UI 컴포넌트 사용
#* 운영체제 마다 UI 모양이 다름
# Swing
#* 운영체제가 제공하는 native UI 사용 안 함
#* 운영체제가 새롭게 제공하는 UI 지원의 어려움
# JavaFX
#* Abode의 flash, Microsoft의 silverlight의 대항마
#* JDK 7부터 지원. JDK 8 권장.
#* JDK 11부터는 별도로 설치해야 함.
#* 화면 레이아웃과 스타일, 애플리케이션 로직 분리
#* Java 코드와 분리해서 스타일 시트(CSS)로 외관 작성 → 개발자와 디자이너의 동시 개발 가능
#* Java 코드에서도 레이아웃과 애플리케이션 로직을 분리하고 싶다면 레이아웃은 FXML로 작성, 로직은 Java로 작성
#* JavaFX 애플리케이션 구성 요소
{| class="wikitable" cellpadding="50"
| rowspan="2" align="center" | '''[레이아웃]'''<br/>자바 코드 파일</br>또는 FXML 파일
| align="center" | '''[외관 및 스타일]'''<br/>CSS 파일
| rowspan="2" align="center" | '''[리소스]'''<br/>그림 파일<br/>동영상 파일<br/>...
|-
| align="center" | '''[비즈니스 로직]'''<br/>자바 코드 파일
|}

== JavaFX 애플리케이션 개발 시작 ==
=== 메인 클래스 ===
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX 라이프사이클(life cycle) ===
* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {
public AppMain() {
System.out.println(Thread.currentThread().getName() + ": AppMain() 호출");
}

@Override
public void init() throws Exception {
System.out.println(Thread.currentThread().getName() + ": init() 호출");
}

@Override
public void start(Stage primaryStage) throws Exception {
System.out.println(Thread.currentThread().getName() + ": start() 호출");
primaryStage.show();
}
@Override
public void stop() throws Exception {
System.out.println(Thread.currentThread().getName() + ": stop() 호출");
}

public static void main(String[] args) throws Exception {
System.out.println(Thread.currentThread().getName() + ": main() 호출");
launch(args);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
main: main() 호출
JavaFX Application Thread: AppMain() 호출
JavaFX-Launcher: init() 호출
JavaFX Application Thread: start() 호출
JavaFX Application Thread: stop() 호출 ← 프로그램을 끝내야 실행된다.
</syntaxhighlight>

=== 메일 클래스 실행 매개값 얻기 ===
<syntaxhighlight lang="text">
C:> java AppMain --ip=192.168.0.5 --port=50001
</syntaxhighlight>

* main()에서 launch(args)를 넘겨 받음
* init() 메소드에서 아래와 같이 실행할 수 있음
<syntaxhighlight lang="java">
Parameters params = getParameters();
List<String> list = params.getRaw();
Map<String, String> map = params.getNamed();
</syntaxhighlight>

=== 무대(Stage)와 장면(Scene) ===
* 윈도우 : Stage
* Stage에는 하나의 Scene을 가질 수 있음
* Scene은 직접 생성해야 함

[[file:CP2022_ch17.2_AppMain.png|thumb|AppMain 실행화면]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
VBox root = new VBox();
root.setPrefWidth(350);
root.setPrefHeight(150);
root.setAlignment(Pos.CENTER);
root.setSpacing(20);

Label label = new Label();
label.setText("Hello, JavaFX");
label.setFont(new Font(50));

Button button = new Button();
button.setText("확인");
button.setOnAction(event->Platform.exit());

root.getChildren().add(label);
root.getChildren().add(button);

Scene scene = new Scene(root); // VBox를 루트 컨테이너(root container)로 해서 Scene 생성

primaryStage.setTitle("AppMain입니다");
primaryStage.setScene(scene); // 윈도우에 장면 설정
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

== JavaFX 레이아웃 ==
=== 프로그램적 레이아웃 ===
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | 프로그램적 레이아웃]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox hbox = new HBox();
hbox.setPadding(new Insets(10));
hbox.setSpacing(10);

TextField textField = new TextField();
textField.setPrefWidth(200);

Button button = new Button();
button.setText("확인");

ObservableList list = hbox.getChildren();
list.add(textField);
list.add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 레이아웃 ===
* FXML 파일 (root.fxml)
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | FXML 레이아웃]]
<syntaxhighlight lang="text">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>

<HBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
<spacing>10</spacing>

<children>
<TextField>
<prefWidth>200</prefWidth>
</TextField>

<Button>
<text>확인</text>
</Button>
</children>
</HBox>
</syntaxhighlight>

* AppMain 클래스
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml")); // ← FXML 로드
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 레이아웃(layout) 여백: 패딩(padding)과 마진(margin) ===
<table2 class=wikitable head=top sep=bar align=cll>
구분 | HBox의 패딩 | Button의 마진
개념 | [[file:CP-17.3.3-padding.png]] | [[file:CP-17.3.3-margin.png]]
자바 코드 | HBox hbox = new HBox();<br/>'''hbox.setPadding(new Insets(50))'''; | Button button = new Button();<br/>'''HBox.setMargin(button, new Insets(50));'''
FXML 태그 | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</padding><br/></HBox> | <Button><br/>{{sp2}}<HBox.margin><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</Hbox.margin><br/></Button>
</table2>

* Margin, Padding 설정 방법
<syntaxhighlight lang="java">
// top, right, bottom, left를 모두 동일한 값으로 설정할 때
// Insets(double topRightBottomLeft)
new Insets(50);

// top, right, bottom, left를 다를 값으로 설정할 때
// Insets(double top, double right, double bottom, double left)
new Insets(10, 20, 30, 40);
</syntaxhighlight>

* 패딩과 마진 적용 예
[[file:CP-17.3.3-AppMain.png|thumb|패딩과 마진 적용 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
// 패딩 설정
HBox hbox = new HBox();
hbox.setPadding(new Insets(50, 10, 10, 50));
Button button = new Button();
button.setPrefSize(100, 100);

// 마진 설정
// HBox hbox = new HBox();
// Button button = new Button();
// button.setPrefSize(100, 100);
// HBox.setMargin(button, new Insets(10, 10, 50, 50));

hbox.getChildren().add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 작성 규칙 ===
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox xmlns:fx="http://javafx.com/fxml"><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
TextField textField = new TextField();<br/>textField.setPrefWidth(200);<br/>{{sp2}} | <TextField><br/>{{sp2}}<prefWidth>200</prefWidth><br/></TextField>
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
ObsetvableList list = hbox.getChildren();<br/>list.add(textField);<br/>list.add(button);<br/><br/><br/><br/><br/>{{sp2}} | <children><br/>{{sp2}}<TextField><br/>{{sp2}}{{sp2}}<prefWidth>200</prefWidth><br/>{{sp2}}</TextField><br/>{{sp2}}<Button><br/>{{sp2}}{{sp2}}<text>확인</text><br/>{{sp2}}</Button><br/></children>
</table2>

==== 패키지(package) 선언 ====
<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML 태그
import javafx.scene.layout.HBox; | <?import javafx.scene.layout.HBox?>
import javafx.scene.control.*; | <?import javafx.scene.control.*?>
</table2>

* <?import?>가 들어가는 위치는 <?xml ...>와 루트 컨테이너 태그 사이이다.
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.*?>

<루트 컨테이너 xmlns:fx="http://javafx.com/fxml">
...
</루트 컨테이너>
</syntaxhighlight>

* import를 제대로 하지 않으면 not a valid type 메시지와 함께 javafx.fxml.LoadException 발생

==== 태그(tag) 선언 ====
* 시작 태그와 끝 태그가 매칭되어야 한다.

<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
</table2>

==== 속성(attribute) 선언 ====
* 속성은 "나 '로 감싸야 한다.
<syntaxhighlight lang="xml">
<태그이름 속성명="값" 속성명='값'> ... </태그이름>
</syntaxhighlight>

* 속성명은 Setter 메소드 명이 옴
* 모든 Setter가 사용될 수 있는 것은 아님. 기본 타입(boolean, byte, short, char, int, long, float, double)의 값을 세팅하거나, String을 세팅하는 Setter만 올 수 있음

* 예
<table2 class=wikitable head=top sep=bar align=lll>
자바 코드 | FXML (Setter 태그) | FXML (Setter 속성)
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button> | <Button text="확인"/><br/><br/>{{sp2}}
</table2>

==== 객체 선언 ====
===== 클래스 속성 =====
* 생성자에 매개 변수가 있고, 매개 변수에 @NamedArg(javafx.beans.NamedArg) 어노테이션이 적용되어 있으면 속성명이나 자식 태그로 작성할 수 있음
<table2 class=wikitable sep=bar align=ll>
<클래스 매개변수="값"><br/><br/>{{sp2}} | <클래스><br/>{{sp2}}<매개변수>값</매개변수><br/></클래스>
</table2>

* 예
** HBox를 패딩할 때 setPadding(Insets value) 메소드를 사용하는데
** Insets는 기본 생성자가 없고,
** Insets(double topRightBottomLeft) 또는 Insets(double top, double right, double bottom, double left)만 있음
** 이 경우 아래와 같이 선언 가능함
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
</table2>

===== 클래스 fx:value =====
* 클래스가 valueOf(String) 메소드를 제공하는 경우
<syntaxhighlight lang="xml">
<클래스 fx:value="값" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
String.valueOf("Hello, World!");<br/>Integer.valueOf("1");<br/>Double.valueOf("1.0");<br/>Boolean.valueOf("false"); | <String fx:value="Hello, World!"/><br/><Integer fx:value="1"/><br/><Double fx:value="1.0"/><br/><Boolean fx:value="false"/>
</table2>

===== 클래스 fx:constant =====
*클래스에 정의된 상수값을 얻고 싶을 경우
<syntaxhighlight lang="xml">
<클래스 fx:constant="상수" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
Button button = new Button();<br/>button.setMaxWidth( Double.MAX_VALUE );<br/><br/><br/>{{sp2}} | <Button><br/>{{sp2}}<maxWidth><br/>{{sp2}}{{sp2}}<Double fx:constant="MAX_VALUE"/><br/>{{sp2}}</maxWidth><br/><Button>
</table2>

===== 클래스 fx:factory =====
* 어떤 클래스는 new 연산자로 객체를 생성할 수 없고,
* 정적 메소드(이를 factory 메소드라 부른다)로 객체를 얻어야 하는 경우가 있음
<syntaxhighlight lang="xml">
<클래스 fx:factory="정적메소드" />
</syntaxhighlight>

* 예: <code>ObservableList</code>의 구현 객체는 <code>javafx.collections.FXCollections</code>의 정적 메소드인 <code>observableArrayList(E... items)</code> 메소드로 얻을 수 있다.
<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
ComboBox combo = new ComboBox();<br/>combo.setItems(FXCollections.observableArrayList("공개", "비공개"));<br/><br/><br/><br/><br/><br/>{{sp2}} | <ComboBox><br/>{{sp2}}<Items><br/>{{sp2}}{{sp2}}<FXCollections fx:factory="observableArrayList"><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="공개"/><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="비공개"/><br/>{{sp2}}{{sp2}}</FXCollections><br/>{{sp2}}</items><br/></ComboBox>
</table2>

=== FXML 로딩과 Scene 생성 ===
* FXML 파일을 작성한 후 이를 이용하여 객체를 만들어야 한다. 이를 '''FXML loading'''이라고 한다.
* javafx.fxml.FXMLLoader를 이용
** 두 개의 load() 메소드 : 정적 메소드, 인스턴스 메소드

<syntaxhighlight lang="java">
Parent root = FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>
* getClass() - 현재 클래스 리턴
* getResource() - 클래스가 위치하는 곳에서 상대 경로로 리소스의 URL을 리턴
* load() - FXML 파일을 로딩

<syntaxhighlight lang="java">
FXMLLoader loader = new FXMLLoader(getClass().getResource("xxx.fxml"));
Parent root = (Parent)loader.load();
</syntaxhighlight>
* load() - Parent 타입을 리턴함. 이것은 FXML 파일에서의 루트 태그로 선언된 컨테이너임
* 만을 루트 태그가 <HBox> 라면 다음과 같이 작성해도 됨

<syntaxhighlight lang="java">
HBox hbox = (HBox) FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>

* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX Scene Builder ===
[[file:CP-SceneBuilder-1.png | thumb | Scene Builder로 root.fxml 띄움]]
* Scene Builder 다운로드 - https://gluonhq.com/products/scene-builder/
* [https://marketplace.visualstudio.com/items?itemName=bilalekrem.scenebuilderextension SceneBuilder extension for Visual Studio Code]
** vscode에서 Ctrl-Shift-P를 눌러 "Configure Scene Builder path"를 실행한다.
*** 경로를 다음과 같이 지정한다 : C:\Users\profs\AppData\Local\SceneBuilder 폴더의 SceneBuilder.exe 지정

* Scene Builder 띄우는 방법
** fxml 파일을 선택한다.
** vscode에서 Ctrl-Shift-P를 누른다.

== JavaFX 컨테이너 ==

<table2 class=wikitable head=top sep=bar align=ll>
컨테이너 | 설명
AnchorPane | 컨트롤을 좌표로 배치하는 레이아웃
BorderPane | 위, 아래, 오른쪽, 왼쪽, 중앙에 컨트롤을 배치하는 레이아웃
FlowPane | 행으로 배치하되 공간이 부족하면 새로운 행에 배치하는 레이아웃
GridPane | 그리드로 배치하되 셀의 크기가 고정적이지 않은 레이아웃
StackPane | 컨트롤을 겹쳐서 배치하는 레이아웃
TilePane | 그리드로 배치하되 고정된 셀의 크기를 갖는 레이아웃
HBox | 수평으로 배치하는 레이아웃
VBox | 수직으로 배치하는 레이아웃
</table2>

=== AnchorPane 컨테이너 ===
[[file:CP-17.4.1-1.png]]

* AnchorPane에서 사용할 수 있는 주요 설정
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
PrefWidth | 폭을 설정 | AnchorPane
PrefHeight | 높이를 설정 | AnchorPane
layoutX | 컨트롤의 X 좌표 | 컨트롤
layoutY | 컨트롤의 Y 좌표 | 컨트롤
<children> | 컨트롤을 포함 | AnchorPane
</table2>

[[file:CP-17.4.1-2.png | thumb | AnchorPane (Scene Builder)]]
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" prefHeight="150.0" prefWidth="300.0">
<children>
<Label layoutX="42.0" layoutY="28.0" text="아이디" />
<Label layoutX="42.0" layoutY="66.0" text="패스워드" />
<TextField layoutX="120.0" layoutY="24.0" />
<PasswordField layoutX="120.0" layoutY="62.0" />
<Button layoutX="97.0" layoutY="106.0" text="로그인" />
<Button layoutX="164.0" layoutY="106.0" text="취소" />
</children>
</AnchorPane>
</syntaxhighlight>

=== HBox와 VBox 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | HBox, VBox
prefHeight | 높이를 설정 | HBox, VBox
alignment | 컨트롤의 정렬을 설정 | HBox, VBox
spacing | 컨트롤의 간격을 설정 | HBox, VBox
fillWidth | 컨트롤의 폭 확장 여부 설정 | VBox
fillHeight | 컨트롤의 높이 확장 여부 설정 | HBox
<children> | 컨트롤을 포함 | HBox, VBox
<HBox.hgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></HBox.hgrow> | HBox의 남은 폭을 채움 | 컨트롤
<VBox.vgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></VBox.vgrow> | VBox의 남을 높이를 채움 | 컨트롤
</table2>

* root2.fxml
** 이 패키지의 하위 폴더로 <code>images</code>를 만들고 여기에 javafx.png 파일을 복사해 넣어둔다. [[file:javafx.png | thumb | javafx.png]]
[[file:CP-17.4.3-project.png | thumb | images 폴더]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.Double?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.Priority?>

<VBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<ImageView fitWidth="200.0" preserveRatio="true"> 
<image>
<Image url="@images/javafx.png" /> 
</image>
</ImageView>
<HBox alignment="CENTER" spacing="20.0">
<children>
<Button text="이전" />
<Button text="다음">
<HBox.hgrow><Priority fx:constant="ALWAYS"/></HBox.hgrow> 
<maxWidth><Double fx:constant="MAX_VALUE"/></maxWidth> 
</Button>
</children>
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
</HBox>
</children>
</VBox>

</syntaxhighlight>

* 예제
[[file:CP-17.4.3-p874.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root2.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== BorderPane 컨테이너 ===
* top, bottom, left, right, center 셀에 컨트롤을 배치하는 컨테이너
* 다른 컨테이너를 배치할 수도 있음
* 각 셀에는 '''하나'''의 컨트롤 또는 컨테이너만 배치할 수 있음

[[file:CP-17.4.4-1.png | 250px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | BorderPane
prefHeight | 높이를 설정 | BorderPane
<top> | top에 배치될 컨트롤을 포함 | BorderPane
<bottom> | bottom에 배치될 컨트롤을 포함 | BorderPane
<right> | right에 배치될 컨트롤을 포함 | BorderPane
<left> | left에 배치될 컨트롤을 포함 | BorderPane
<nowiki><center></nowiki> | center에 배치될 컨트롤을 포함 | BorderPane
</table2>

[[file:CP-17.4.4-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane prefHeight="200.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<top>
<ToolBar prefHeight="40.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<items>
<Button text="Button" />
<Button text="Button" />
</items>
</ToolBar>
</top>
<center>
<TextArea /> 
</center>
<bottom>
<BorderPane>
<center>
<TextField /> 
</center>
<right>
<Button text="Button" />
</right>
</BorderPane>
</bottom>
</BorderPane>
</syntaxhighlight>

=== FlowPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | FlowPane
prefHeight | 높이를 설정 | FlowPane
hgap | 컨트롤의 수평 간격을 설정 | FlowPane
vgap | 컨트롤의 수직 간격을 설정 | FlowPane
<children> | 컨트롤을 포함 | FlowPane
</table2>

[[file:CP-17.4.5-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>

<FlowPane prefHeight="70.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
</children>
</FlowPane>
</syntaxhighlight>

=== TilePane 컨테이너 ===
* 그리드로 컨트롤을 배치하되 고정된 셀(타일) 크기를 갖는 컨테이너
* 오른쪽에 배치할 공간이 부족하면 새로운 행에 컨트롤을 배치함

[[file:CP-17.4.6-TilePane.png | 400px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | TilePane
prefHeight | 높이를 설정 | TilePane
prefTileWidth | 타일의 폭을 설정 | TilePane
prefTileHeight | 타일의 높이를 설정 | TilePane
<children> | 컨트롤을 포함 | TilePane
</table2>

<gallery>
file:fruit1.jpg | fruit1.jpg
file:fruit2.jpg | fruit2.jpg
file:fruit3.jpg | fruit3.jpg
file:fruit4.jpg | fruit4.jpg
file:fruit5.jpg | fruit5.jpg
</gallery>

[[file:CP-17.4.6-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.TilePane?>

<TilePane xmlns:fx="http://javafx.com/fxml" prefHeight="100.0" prefWidth="100.0">
<children>
<ImageView>
<image><Image url="@images/fruit1.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit2.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit3.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit4.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit5.jpg" /></image>
</ImageView>
</children>
</TilePane>
</syntaxhighlight>

=== GridPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | GridPane
prefHeight | 놎이를 설정 | GridPane
hgap | 수평 컨트롤 간격을 설정 | GridPane
vgap | 수직 컨트롤 간격을 설정 | GridPane
<children> | 컨트롤을 포함 | GridPane
GridPane.rowIndex | 컨트롤이 위치하는 행 인덱스를 설정 | 컨트롤
GridPane.columnIndex | 컨트롤이 위치하는 컬럼 인덱스를 설정 | 컨트롤
GridPane.rowSpan | 행 병합 수를 설정 | 컨트롤
GridPane.columnSpan | 컬럼 병합 수를 설정 | 컨트롤
GridPane.hgrow | 수평 빈 공간을 채우기로 설정 | 컨트롤
GridPane.vgrow | 수직 빈 공간을 채우기로 설정 | 컨트롤
GridPane.halignment | 컨트롤의 수평 정렬을 설정 | 컨트롤
GridPane.valignment | 컨트롤의 수직 정렬을 설정 | 컨트롤
</table2>

[[file:CP-17.4.7-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane xmlns:fx="http://javafx.com/fxml" prefWidth="300.0" hgap="10.0" vgap="10.0">
<padding>
<Insets topRightBottomLeft="10.0" />
</padding>

<children>
<Label text="아이디" GridPane.rowIndex="0" GridPane.columnIndex="0" />
<TextField GridPane.rowIndex="0" GridPane.columnIndex="1"
GridPane.hgrow="ALWAYS" /> 

<Label text="패스워드" GridPane.rowIndex="1" GridPane.columnIndex="0" />
<TextField GridPane.columnIndex="1" GridPane.rowIndex="1"
GridPane.hgrow="ALWAYS" /> 
<HBox GridPane.rowIndex="2" GridPane.columnIndex="0"
GridPane.columnSpan="2" GridPane.hgrow="ALWAYS"
alignment="CENTER" spacing="20.0" > 
<children>
<Button text="로그인" />
<Button text="취소" />
</children>
</HBox>
</children>
</GridPane>
</syntaxhighlight>

=== StackPane 컨테이너 ===
* 컨트롤을 겹쳐 배치하는 컨테이너
* 카드 레이아웃(Card Layout)이라고도 함
* 만약 위에 있는 컨트롤이 투명하다면 밑에 있는 컨트롤이 겹쳐 보임

<gallery>
file:duke.jpg | duke.jpg
file:snow.jpg | snow.jpg
</gallery>

[[file:CP-17.4.8-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.StackPane?>

<StackPane xmlns:fx="http://javafx.com/fxml" prefHeight="300.0" prefWidth="500.0">
<children>
<ImageView fitHeight="300.0" fitWidth="500.0">
<image>
<Image url="@images/snow.jpg" />
</image>
</ImageView>
<ImageView preserveRatio="true">
<image>
<Image url="@images/duke.jpg" />
</image>
</ImageView>
</children>
</StackPane>
</syntaxhighlight>

== JavaFX 이벤트 처리 ==

=== 이벤트 핸들러(EventHandler) ===
* JavaFX는 이벤트 발생 콘트롤과 이벤트 핸들러(EventHandler)를 분리하는 위임형(Delegation<ref>Design Pattern 중 Delegation Pattern</ref>) 방식을 사용함
* 이를 위해 먼저 컨트롤에 EventHandler를 등록해야 함 (setOnXXX() 메소드. 예: setOnAction())

<table2 class=wikitable head=top sep=bar align=cccc>
컨트롤(control) | 사건 | 이벤트(event) 발생 | 이벤트 처리 담당 객체 | 이벤트 처리 메소드 실행 | 이벤트 처리 효과
Button | 버튼을 누름 | ActionEvent | EventHandler | public void handle(...) {<br/>{{sp2}}이벤트 처리</br/>} | 1. 윈도우 닫기<br/>2. 컨트롤 내용 변경<br/>3. 다이얼로그 띄우기
</table2>

* Button 클릭 처리하는 이벤트 등록
<syntaxhighlight lang="java">
Button button = new Button();
button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) { ... }
}):
</syntaxhighlight>

* TableView에서 행을 마우스로 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
TableView tableView = new TableView();
tableView.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) { ... }
});
</syntaxhighlight>

* 윈도우 우측 상단(x) 버튼 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
stage.setOnCloseRequest(new EventHandler<WindowEvent>() {
@Override
public void handle(WindowEvent event) { ... }
});
</syntaxhighlight>

* EventHandler는 하나의 메소드를 가진 함수적 인터페이스이므로 람다식을 이용하여 이벤트 등록 가능
<syntaxhighlight lang="java">
button.setOnAction( event->{ ... } );
tableView.setOnMouseClicked( event->{ ... } );
stage.setOnCloseRequest( event->{ ... } );
</syntaxhighlight>

[[file:CP-17.5.1-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox root = new HBox();
root.setPrefSize(200, 50);
root.setAlignment(Pos.CENTER); // 수평 중앙 정렬
root.setSpacing(20);

Button btn1 = new Button("버튼1");
btn1.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
System.out.println("버튼1 클릭");
}
});

Button btn2 = new Button("버튼2");
btn2.setOnAction(event->System.out.println("버튼2 클릭"));

root.getChildren().addAll(btn1, btn2); // HBox에 btn1과 btn2를 추가
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.setOnCloseRequest(event->System.out.println("종료 클릭"));
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

=== FXML 컨트롤러(Controller) ===

==== fx:controller 속성과 컨트롤러 클래스 ====
<syntaxhighlight lang="xml">
<루트컨테이너 xmlns:fx="http://javafx.com/fxml" fx:controller="packageName.ControllerName">
...
</루트컨트롤러>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== fx:id 속성과 @FXML 컨트롤 주입 ====

<syntaxhighlight lang="xml">
<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="sec05.exam02_fxml_controller.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" />
</children>
</HBox>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@FXML private Button btn1;
@FXML private Button btn2;
@FXML
private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== EventHandler 등록 ====

* AppMain.java
<syntaxhighlight lang="java">
package ch17.p889;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

* RootController.java
<syntaxhighlight lang="java">
package ch17.p889;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

public class RootController implements Initializable {
@FXML private Button btn1; // import javafx.fxml.FXML 필요
@FXML private Button btn2;
@FXML private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) {

btn1.setOnAction(new EventHandler<ActionEvent>() { // 직접 EventHandler 생성 후 등록
@Override
public void handle(ActionEvent event) {
handleBtn1Action(event);
}
});

btn2.setOnAction(event->handleBtn2Action(event)); // 람다식 이용
// btn3.setOnAction(event->handleBtn3Action(event));
}

public void handleBtn1Action(ActionEvent event) {
System.out.println("버튼1 클릭");
}

public void handleBtn2Action(ActionEvent event) {
System.out.println("버튼2 클릭");
}
public void handleBtn3Action(ActionEvent event) {
System.out.println("버튼3 클릭");
}

}
</syntaxhighlight>

* root.xml
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.HBox?>

<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="ch17.p889.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" onAction="#handleBtn3Action"/>
</children>
</HBox>
</syntaxhighlight>

==== 이벤트 처리 메소드 매핑 ====
* FXML 파일
<syntaxhighlight lang="xml">
<Button fx:id="btn" text="버튼" onAction="#handleBtnAction" />
</syntaxhighlight>

* Controller 클래스
<syntaxhighlight lang="java">
public void handleBtnAction(ActionEvent event) { ... }
</syntaxhighlight>

== JavaFX 속성 감시와 바인딩 ==

컴퓨터프로그래밍및실습 (2022년)/1124

2022-07-22T03:15:01Z

Swpark: /* FXML 컨트롤러(Controller) */

== JavaFX 개요 ==
# AWT
#* Native UI 컴포넌트 사용
#* 운영체제 마다 UI 모양이 다름
# Swing
#* 운영체제가 제공하는 native UI 사용 안 함
#* 운영체제가 새롭게 제공하는 UI 지원의 어려움
# JavaFX
#* Abode의 flash, Microsoft의 silverlight의 대항마
#* JDK 7부터 지원. JDK 8 권장.
#* JDK 11부터는 별도로 설치해야 함.
#* 화면 레이아웃과 스타일, 애플리케이션 로직 분리
#* Java 코드와 분리해서 스타일 시트(CSS)로 외관 작성 → 개발자와 디자이너의 동시 개발 가능
#* Java 코드에서도 레이아웃과 애플리케이션 로직을 분리하고 싶다면 레이아웃은 FXML로 작성, 로직은 Java로 작성
#* JavaFX 애플리케이션 구성 요소
{| class="wikitable" cellpadding="50"
| rowspan="2" align="center" | '''[레이아웃]'''<br/>자바 코드 파일</br>또는 FXML 파일
| align="center" | '''[외관 및 스타일]'''<br/>CSS 파일
| rowspan="2" align="center" | '''[리소스]'''<br/>그림 파일<br/>동영상 파일<br/>...
|-
| align="center" | '''[비즈니스 로직]'''<br/>자바 코드 파일
|}

== JavaFX 애플리케이션 개발 시작 ==
=== 메인 클래스 ===
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX 라이프사이클(life cycle) ===
* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {
public AppMain() {
System.out.println(Thread.currentThread().getName() + ": AppMain() 호출");
}

@Override
public void init() throws Exception {
System.out.println(Thread.currentThread().getName() + ": init() 호출");
}

@Override
public void start(Stage primaryStage) throws Exception {
System.out.println(Thread.currentThread().getName() + ": start() 호출");
primaryStage.show();
}
@Override
public void stop() throws Exception {
System.out.println(Thread.currentThread().getName() + ": stop() 호출");
}

public static void main(String[] args) throws Exception {
System.out.println(Thread.currentThread().getName() + ": main() 호출");
launch(args);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
main: main() 호출
JavaFX Application Thread: AppMain() 호출
JavaFX-Launcher: init() 호출
JavaFX Application Thread: start() 호출
JavaFX Application Thread: stop() 호출 ← 프로그램을 끝내야 실행된다.
</syntaxhighlight>

=== 메일 클래스 실행 매개값 얻기 ===
<syntaxhighlight lang="text">
C:> java AppMain --ip=192.168.0.5 --port=50001
</syntaxhighlight>

* main()에서 launch(args)를 넘겨 받음
* init() 메소드에서 아래와 같이 실행할 수 있음
<syntaxhighlight lang="java">
Parameters params = getParameters();
List<String> list = params.getRaw();
Map<String, String> map = params.getNamed();
</syntaxhighlight>

=== 무대(Stage)와 장면(Scene) ===
* 윈도우 : Stage
* Stage에는 하나의 Scene을 가질 수 있음
* Scene은 직접 생성해야 함

[[file:CP2022_ch17.2_AppMain.png|thumb|AppMain 실행화면]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
VBox root = new VBox();
root.setPrefWidth(350);
root.setPrefHeight(150);
root.setAlignment(Pos.CENTER);
root.setSpacing(20);

Label label = new Label();
label.setText("Hello, JavaFX");
label.setFont(new Font(50));

Button button = new Button();
button.setText("확인");
button.setOnAction(event->Platform.exit());

root.getChildren().add(label);
root.getChildren().add(button);

Scene scene = new Scene(root); // VBox를 루트 컨테이너(root container)로 해서 Scene 생성

primaryStage.setTitle("AppMain입니다");
primaryStage.setScene(scene); // 윈도우에 장면 설정
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

== JavaFX 레이아웃 ==
=== 프로그램적 레이아웃 ===
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | 프로그램적 레이아웃]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox hbox = new HBox();
hbox.setPadding(new Insets(10));
hbox.setSpacing(10);

TextField textField = new TextField();
textField.setPrefWidth(200);

Button button = new Button();
button.setText("확인");

ObservableList list = hbox.getChildren();
list.add(textField);
list.add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 레이아웃 ===
* FXML 파일 (root.fxml)
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | FXML 레이아웃]]
<syntaxhighlight lang="text">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>

<HBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
<spacing>10</spacing>

<children>
<TextField>
<prefWidth>200</prefWidth>
</TextField>

<Button>
<text>확인</text>
</Button>
</children>
</HBox>
</syntaxhighlight>

* AppMain 클래스
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml")); // ← FXML 로드
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 레이아웃(layout) 여백: 패딩(padding)과 마진(margin) ===
<table2 class=wikitable head=top sep=bar align=cll>
구분 | HBox의 패딩 | Button의 마진
개념 | [[file:CP-17.3.3-padding.png]] | [[file:CP-17.3.3-margin.png]]
자바 코드 | HBox hbox = new HBox();<br/>'''hbox.setPadding(new Insets(50))'''; | Button button = new Button();<br/>'''HBox.setMargin(button, new Insets(50));'''
FXML 태그 | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</padding><br/></HBox> | <Button><br/>{{sp2}}<HBox.margin><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</Hbox.margin><br/></Button>
</table2>

* Margin, Padding 설정 방법
<syntaxhighlight lang="java">
// top, right, bottom, left를 모두 동일한 값으로 설정할 때
// Insets(double topRightBottomLeft)
new Insets(50);

// top, right, bottom, left를 다를 값으로 설정할 때
// Insets(double top, double right, double bottom, double left)
new Insets(10, 20, 30, 40);
</syntaxhighlight>

* 패딩과 마진 적용 예
[[file:CP-17.3.3-AppMain.png|thumb|패딩과 마진 적용 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
// 패딩 설정
HBox hbox = new HBox();
hbox.setPadding(new Insets(50, 10, 10, 50));
Button button = new Button();
button.setPrefSize(100, 100);

// 마진 설정
// HBox hbox = new HBox();
// Button button = new Button();
// button.setPrefSize(100, 100);
// HBox.setMargin(button, new Insets(10, 10, 50, 50));

hbox.getChildren().add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 작성 규칙 ===
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox xmlns:fx="http://javafx.com/fxml"><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
TextField textField = new TextField();<br/>textField.setPrefWidth(200);<br/>{{sp2}} | <TextField><br/>{{sp2}}<prefWidth>200</prefWidth><br/></TextField>
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
ObsetvableList list = hbox.getChildren();<br/>list.add(textField);<br/>list.add(button);<br/><br/><br/><br/><br/>{{sp2}} | <children><br/>{{sp2}}<TextField><br/>{{sp2}}{{sp2}}<prefWidth>200</prefWidth><br/>{{sp2}}</TextField><br/>{{sp2}}<Button><br/>{{sp2}}{{sp2}}<text>확인</text><br/>{{sp2}}</Button><br/></children>
</table2>

==== 패키지(package) 선언 ====
<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML 태그
import javafx.scene.layout.HBox; | <?import javafx.scene.layout.HBox?>
import javafx.scene.control.*; | <?import javafx.scene.control.*?>
</table2>

* <?import?>가 들어가는 위치는 <?xml ...>와 루트 컨테이너 태그 사이이다.
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.*?>

<루트 컨테이너 xmlns:fx="http://javafx.com/fxml">
...
</루트 컨테이너>
</syntaxhighlight>

* import를 제대로 하지 않으면 not a valid type 메시지와 함께 javafx.fxml.LoadException 발생

==== 태그(tag) 선언 ====
* 시작 태그와 끝 태그가 매칭되어야 한다.

<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
</table2>

==== 속성(attribute) 선언 ====
* 속성은 "나 '로 감싸야 한다.
<syntaxhighlight lang="xml">
<태그이름 속성명="값" 속성명='값'> ... </태그이름>
</syntaxhighlight>

* 속성명은 Setter 메소드 명이 옴
* 모든 Setter가 사용될 수 있는 것은 아님. 기본 타입(boolean, byte, short, char, int, long, float, double)의 값을 세팅하거나, String을 세팅하는 Setter만 올 수 있음

* 예
<table2 class=wikitable head=top sep=bar align=lll>
자바 코드 | FXML (Setter 태그) | FXML (Setter 속성)
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button> | <Button text="확인"/><br/><br/>{{sp2}}
</table2>

==== 객체 선언 ====
===== 클래스 속성 =====
* 생성자에 매개 변수가 있고, 매개 변수에 @NamedArg(javafx.beans.NamedArg) 어노테이션이 적용되어 있으면 속성명이나 자식 태그로 작성할 수 있음
<table2 class=wikitable sep=bar align=ll>
<클래스 매개변수="값"><br/><br/>{{sp2}} | <클래스><br/>{{sp2}}<매개변수>값</매개변수><br/></클래스>
</table2>

* 예
** HBox를 패딩할 때 setPadding(Insets value) 메소드를 사용하는데
** Insets는 기본 생성자가 없고,
** Insets(double topRightBottomLeft) 또는 Insets(double top, double right, double bottom, double left)만 있음
** 이 경우 아래와 같이 선언 가능함
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
</table2>

===== 클래스 fx:value =====
* 클래스가 valueOf(String) 메소드를 제공하는 경우
<syntaxhighlight lang="xml">
<클래스 fx:value="값" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
String.valueOf("Hello, World!");<br/>Integer.valueOf("1");<br/>Double.valueOf("1.0");<br/>Boolean.valueOf("false"); | <String fx:value="Hello, World!"/><br/><Integer fx:value="1"/><br/><Double fx:value="1.0"/><br/><Boolean fx:value="false"/>
</table2>

===== 클래스 fx:constant =====
*클래스에 정의된 상수값을 얻고 싶을 경우
<syntaxhighlight lang="xml">
<클래스 fx:constant="상수" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
Button button = new Button();<br/>button.setMaxWidth( Double.MAX_VALUE );<br/><br/><br/>{{sp2}} | <Button><br/>{{sp2}}<maxWidth><br/>{{sp2}}{{sp2}}<Double fx:constant="MAX_VALUE"/><br/>{{sp2}}</maxWidth><br/><Button>
</table2>

===== 클래스 fx:factory =====
* 어떤 클래스는 new 연산자로 객체를 생성할 수 없고,
* 정적 메소드(이를 factory 메소드라 부른다)로 객체를 얻어야 하는 경우가 있음
<syntaxhighlight lang="xml">
<클래스 fx:factory="정적메소드" />
</syntaxhighlight>

* 예: <code>ObservableList</code>의 구현 객체는 <code>javafx.collections.FXCollections</code>의 정적 메소드인 <code>observableArrayList(E... items)</code> 메소드로 얻을 수 있다.
<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
ComboBox combo = new ComboBox();<br/>combo.setItems(FXCollections.observableArrayList("공개", "비공개"));<br/><br/><br/><br/><br/><br/>{{sp2}} | <ComboBox><br/>{{sp2}}<Items><br/>{{sp2}}{{sp2}}<FXCollections fx:factory="observableArrayList"><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="공개"/><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="비공개"/><br/>{{sp2}}{{sp2}}</FXCollections><br/>{{sp2}}</items><br/></ComboBox>
</table2>

=== FXML 로딩과 Scene 생성 ===
* FXML 파일을 작성한 후 이를 이용하여 객체를 만들어야 한다. 이를 '''FXML loading'''이라고 한다.
* javafx.fxml.FXMLLoader를 이용
** 두 개의 load() 메소드 : 정적 메소드, 인스턴스 메소드

<syntaxhighlight lang="java">
Parent root = FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>
* getClass() - 현재 클래스 리턴
* getResource() - 클래스가 위치하는 곳에서 상대 경로로 리소스의 URL을 리턴
* load() - FXML 파일을 로딩

<syntaxhighlight lang="java">
FXMLLoader loader = new FXMLLoader(getClass().getResource("xxx.fxml"));
Parent root = (Parent)loader.load();
</syntaxhighlight>
* load() - Parent 타입을 리턴함. 이것은 FXML 파일에서의 루트 태그로 선언된 컨테이너임
* 만을 루트 태그가 <HBox> 라면 다음과 같이 작성해도 됨

<syntaxhighlight lang="java">
HBox hbox = (HBox) FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>

* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX Scene Builder ===
[[file:CP-SceneBuilder-1.png | thumb | Scene Builder로 root.fxml 띄움]]
* Scene Builder 다운로드 - https://gluonhq.com/products/scene-builder/
* [https://marketplace.visualstudio.com/items?itemName=bilalekrem.scenebuilderextension SceneBuilder extension for Visual Studio Code]
** vscode에서 Ctrl-Shift-P를 눌러 "Configure Scene Builder path"를 실행한다.
*** 경로를 다음과 같이 지정한다 : C:\Users\profs\AppData\Local\SceneBuilder 폴더의 SceneBuilder.exe 지정

* Scene Builder 띄우는 방법
** fxml 파일을 선택한다.
** vscode에서 Ctrl-Shift-P를 누른다.

== JavaFX 컨테이너 ==

<table2 class=wikitable head=top sep=bar align=ll>
컨테이너 | 설명
AnchorPane | 컨트롤을 좌표로 배치하는 레이아웃
BorderPane | 위, 아래, 오른쪽, 왼쪽, 중앙에 컨트롤을 배치하는 레이아웃
FlowPane | 행으로 배치하되 공간이 부족하면 새로운 행에 배치하는 레이아웃
GridPane | 그리드로 배치하되 셀의 크기가 고정적이지 않은 레이아웃
StackPane | 컨트롤을 겹쳐서 배치하는 레이아웃
TilePane | 그리드로 배치하되 고정된 셀의 크기를 갖는 레이아웃
HBox | 수평으로 배치하는 레이아웃
VBox | 수직으로 배치하는 레이아웃
</table2>

=== AnchorPane 컨테이너 ===
[[file:CP-17.4.1-1.png]]

* AnchorPane에서 사용할 수 있는 주요 설정
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
PrefWidth | 폭을 설정 | AnchorPane
PrefHeight | 높이를 설정 | AnchorPane
layoutX | 컨트롤의 X 좌표 | 컨트롤
layoutY | 컨트롤의 Y 좌표 | 컨트롤
<children> | 컨트롤을 포함 | AnchorPane
</table2>

[[file:CP-17.4.1-2.png | thumb | AnchorPane (Scene Builder)]]
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" prefHeight="150.0" prefWidth="300.0">
<children>
<Label layoutX="42.0" layoutY="28.0" text="아이디" />
<Label layoutX="42.0" layoutY="66.0" text="패스워드" />
<TextField layoutX="120.0" layoutY="24.0" />
<PasswordField layoutX="120.0" layoutY="62.0" />
<Button layoutX="97.0" layoutY="106.0" text="로그인" />
<Button layoutX="164.0" layoutY="106.0" text="취소" />
</children>
</AnchorPane>
</syntaxhighlight>

=== HBox와 VBox 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | HBox, VBox
prefHeight | 높이를 설정 | HBox, VBox
alignment | 컨트롤의 정렬을 설정 | HBox, VBox
spacing | 컨트롤의 간격을 설정 | HBox, VBox
fillWidth | 컨트롤의 폭 확장 여부 설정 | VBox
fillHeight | 컨트롤의 높이 확장 여부 설정 | HBox
<children> | 컨트롤을 포함 | HBox, VBox
<HBox.hgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></HBox.hgrow> | HBox의 남은 폭을 채움 | 컨트롤
<VBox.vgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></VBox.vgrow> | VBox의 남을 높이를 채움 | 컨트롤
</table2>

* root2.fxml
** 이 패키지의 하위 폴더로 <code>images</code>를 만들고 여기에 javafx.png 파일을 복사해 넣어둔다. [[file:javafx.png | thumb | javafx.png]]
[[file:CP-17.4.3-project.png | thumb | images 폴더]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.Double?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.Priority?>

<VBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<ImageView fitWidth="200.0" preserveRatio="true"> 
<image>
<Image url="@images/javafx.png" /> 
</image>
</ImageView>
<HBox alignment="CENTER" spacing="20.0">
<children>
<Button text="이전" />
<Button text="다음">
<HBox.hgrow><Priority fx:constant="ALWAYS"/></HBox.hgrow> 
<maxWidth><Double fx:constant="MAX_VALUE"/></maxWidth> 
</Button>
</children>
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
</HBox>
</children>
</VBox>

</syntaxhighlight>

* 예제
[[file:CP-17.4.3-p874.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root2.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== BorderPane 컨테이너 ===
* top, bottom, left, right, center 셀에 컨트롤을 배치하는 컨테이너
* 다른 컨테이너를 배치할 수도 있음
* 각 셀에는 '''하나'''의 컨트롤 또는 컨테이너만 배치할 수 있음

[[file:CP-17.4.4-1.png | 250px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | BorderPane
prefHeight | 높이를 설정 | BorderPane
<top> | top에 배치될 컨트롤을 포함 | BorderPane
<bottom> | bottom에 배치될 컨트롤을 포함 | BorderPane
<right> | right에 배치될 컨트롤을 포함 | BorderPane
<left> | left에 배치될 컨트롤을 포함 | BorderPane
<nowiki><center></nowiki> | center에 배치될 컨트롤을 포함 | BorderPane
</table2>

[[file:CP-17.4.4-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane prefHeight="200.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<top>
<ToolBar prefHeight="40.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<items>
<Button text="Button" />
<Button text="Button" />
</items>
</ToolBar>
</top>
<center>
<TextArea /> 
</center>
<bottom>
<BorderPane>
<center>
<TextField /> 
</center>
<right>
<Button text="Button" />
</right>
</BorderPane>
</bottom>
</BorderPane>
</syntaxhighlight>

=== FlowPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | FlowPane
prefHeight | 높이를 설정 | FlowPane
hgap | 컨트롤의 수평 간격을 설정 | FlowPane
vgap | 컨트롤의 수직 간격을 설정 | FlowPane
<children> | 컨트롤을 포함 | FlowPane
</table2>

[[file:CP-17.4.5-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>

<FlowPane prefHeight="70.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
</children>
</FlowPane>
</syntaxhighlight>

=== TilePane 컨테이너 ===
* 그리드로 컨트롤을 배치하되 고정된 셀(타일) 크기를 갖는 컨테이너
* 오른쪽에 배치할 공간이 부족하면 새로운 행에 컨트롤을 배치함

[[file:CP-17.4.6-TilePane.png | 400px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | TilePane
prefHeight | 높이를 설정 | TilePane
prefTileWidth | 타일의 폭을 설정 | TilePane
prefTileHeight | 타일의 높이를 설정 | TilePane
<children> | 컨트롤을 포함 | TilePane
</table2>

<gallery>
file:fruit1.jpg | fruit1.jpg
file:fruit2.jpg | fruit2.jpg
file:fruit3.jpg | fruit3.jpg
file:fruit4.jpg | fruit4.jpg
file:fruit5.jpg | fruit5.jpg
</gallery>

[[file:CP-17.4.6-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.TilePane?>

<TilePane xmlns:fx="http://javafx.com/fxml" prefHeight="100.0" prefWidth="100.0">
<children>
<ImageView>
<image><Image url="@images/fruit1.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit2.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit3.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit4.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit5.jpg" /></image>
</ImageView>
</children>
</TilePane>
</syntaxhighlight>

=== GridPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | GridPane
prefHeight | 놎이를 설정 | GridPane
hgap | 수평 컨트롤 간격을 설정 | GridPane
vgap | 수직 컨트롤 간격을 설정 | GridPane
<children> | 컨트롤을 포함 | GridPane
GridPane.rowIndex | 컨트롤이 위치하는 행 인덱스를 설정 | 컨트롤
GridPane.columnIndex | 컨트롤이 위치하는 컬럼 인덱스를 설정 | 컨트롤
GridPane.rowSpan | 행 병합 수를 설정 | 컨트롤
GridPane.columnSpan | 컬럼 병합 수를 설정 | 컨트롤
GridPane.hgrow | 수평 빈 공간을 채우기로 설정 | 컨트롤
GridPane.vgrow | 수직 빈 공간을 채우기로 설정 | 컨트롤
GridPane.halignment | 컨트롤의 수평 정렬을 설정 | 컨트롤
GridPane.valignment | 컨트롤의 수직 정렬을 설정 | 컨트롤
</table2>

[[file:CP-17.4.7-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane xmlns:fx="http://javafx.com/fxml" prefWidth="300.0" hgap="10.0" vgap="10.0">
<padding>
<Insets topRightBottomLeft="10.0" />
</padding>

<children>
<Label text="아이디" GridPane.rowIndex="0" GridPane.columnIndex="0" />
<TextField GridPane.rowIndex="0" GridPane.columnIndex="1"
GridPane.hgrow="ALWAYS" /> 

<Label text="패스워드" GridPane.rowIndex="1" GridPane.columnIndex="0" />
<TextField GridPane.columnIndex="1" GridPane.rowIndex="1"
GridPane.hgrow="ALWAYS" /> 
<HBox GridPane.rowIndex="2" GridPane.columnIndex="0"
GridPane.columnSpan="2" GridPane.hgrow="ALWAYS"
alignment="CENTER" spacing="20.0" > 
<children>
<Button text="로그인" />
<Button text="취소" />
</children>
</HBox>
</children>
</GridPane>
</syntaxhighlight>

=== StackPane 컨테이너 ===
* 컨트롤을 겹쳐 배치하는 컨테이너
* 카드 레이아웃(Card Layout)이라고도 함
* 만약 위에 있는 컨트롤이 투명하다면 밑에 있는 컨트롤이 겹쳐 보임

<gallery>
file:duke.jpg | duke.jpg
file:snow.jpg | snow.jpg
</gallery>

[[file:CP-17.4.8-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.StackPane?>

<StackPane xmlns:fx="http://javafx.com/fxml" prefHeight="300.0" prefWidth="500.0">
<children>
<ImageView fitHeight="300.0" fitWidth="500.0">
<image>
<Image url="@images/snow.jpg" />
</image>
</ImageView>
<ImageView preserveRatio="true">
<image>
<Image url="@images/duke.jpg" />
</image>
</ImageView>
</children>
</StackPane>
</syntaxhighlight>

== JavaFX 이벤트 처리 ==

=== 이벤트 핸들러(EventHandler) ===
* JavaFX는 이벤트 발생 콘트롤과 이벤트 핸들러(EventHandler)를 분리하는 위임형(Delegation<ref>Design Pattern 중 Delegation Pattern</ref>) 방식을 사용함
* 이를 위해 먼저 컨트롤에 EventHandler를 등록해야 함 (setOnXXX() 메소드. 예: setOnAction())

<table2 class=wikitable head=top sep=bar align=cccc>
컨트롤(control) | 사건 | 이벤트(event) 발생 | 이벤트 처리 담당 객체 | 이벤트 처리 메소드 실행 | 이벤트 처리 효과
Button | 버튼을 누름 | ActionEvent | EventHandler | public void handle(...) {<br/>{{sp2}}이벤트 처리</br/>} | 1. 윈도우 닫기<br/>2. 컨트롤 내용 변경<br/>3. 다이얼로그 띄우기
</table2>

* Button 클릭 처리하는 이벤트 등록
<syntaxhighlight lang="java">
Button button = new Button();
button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) { ... }
}):
</syntaxhighlight>

* TableView에서 행을 마우스로 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
TableView tableView = new TableView();
tableView.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) { ... }
});
</syntaxhighlight>

* 윈도우 우측 상단(x) 버튼 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
stage.setOnCloseRequest(new EventHandler<WindowEvent>() {
@Override
public void handle(WindowEvent event) { ... }
});
</syntaxhighlight>

* EventHandler는 하나의 메소드를 가진 함수적 인터페이스이므로 람다식을 이용하여 이벤트 등록 가능
<syntaxhighlight lang="java">
button.setOnAction( event->{ ... } );
tableView.setOnMouseClicked( event->{ ... } );
stage.setOnCloseRequest( event->{ ... } );
</syntaxhighlight>

[[file:CP-17.5.1-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox root = new HBox();
root.setPrefSize(200, 50);
root.setAlignment(Pos.CENTER); // 수평 중앙 정렬
root.setSpacing(20);

Button btn1 = new Button("버튼1");
btn1.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
System.out.println("버튼1 클릭");
}
});

Button btn2 = new Button("버튼2");
btn2.setOnAction(event->System.out.println("버튼2 클릭"));

root.getChildren().addAll(btn1, btn2); // HBox에 btn1과 btn2를 추가
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.setOnCloseRequest(event->System.out.println("종료 클릭"));
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

=== FXML 컨트롤러(Controller) ===

==== fx:controller 속성과 컨트롤러 클래스 ====
<syntaxhighlight lang="xml">
<루트컨테이너 xmlns:fx="http://javafx.com/fxml" fx:controller="packageName.ControllerName">
...
</루트컨트롤러>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== fx:id 속성과 @FXML 컨트롤 주입 ====

<syntaxhighlight lang="xml">
<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="sec05.exam02_fxml_controller.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" />
</children>
</HBox>
</syntaxhighlight>

<syntaxhighlight lang="java">
public class ControllerName implements Initializable {
@FXML private Button btn1;
@FXML private Button btn2;
@FXML
private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) { ... }
}
</syntaxhighlight>

==== EventHandler 등록 ====

* AppMain.java
<syntaxhighlight lang="java">
package ch17.p889;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

* RootController.java
<syntaxhighlight lang="java">
package ch17.p889;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

public class RootController implements Initializable {
@FXML private Button btn1; // import javafx.fxml.FXML 필요
@FXML private Button btn2;
@FXML private Button btn3;

@Override
public void initialize(URL location, ResourceBundle resources) {

btn1.setOnAction(new EventHandler<ActionEvent>() { // 직접 EventHandler 생성 후 등록
@Override
public void handle(ActionEvent event) {
handleBtn1Action(event);
}
});

btn2.setOnAction(event->handleBtn2Action(event)); // 람다식 이용
// btn3.setOnAction(event->handleBtn3Action(event));
}

public void handleBtn1Action(ActionEvent event) {
System.out.println("버튼1 클릭");
}

public void handleBtn2Action(ActionEvent event) {
System.out.println("버튼2 클릭");
}
public void handleBtn3Action(ActionEvent event) {
System.out.println("버튼3 클릭");
}

}
</syntaxhighlight>

* root.xml
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.HBox?>

<HBox xmlns:fx="http://javafx.com/fxml"
fx:controller="ch17.p889.RootController"
prefHeight="50.0" prefWidth="200.0"
alignment="CENTER" spacing="20.0">
<children>
<Button fx:id="btn1" text="버튼1" />
<Button fx:id="btn2" text="버튼2" />
<Button fx:id="btn3" text="버튼3" onAction="#handleBtn3Action"/>
</children>
</HBox>
</syntaxhighlight>

==== 이벤트 처리 메소드 매핑 ====
<syntaxhighlight lang="xml">
<Button fx:id="btn" text="버튼" onAction="#handleBtnAction" />
</syntaxhighlight>

<syntaxhighlight lang="java">
public void handleBtnAction(ActionEvent event) { ... }
</syntaxhighlight>

== JavaFX 속성 감시와 바인딩 ==

컴퓨터프로그래밍및실습 (2022년)/1124

2022-07-22T02:49:57Z

Swpark: /* JavaFX 이벤트 처리 */

== JavaFX 개요 ==
# AWT
#* Native UI 컴포넌트 사용
#* 운영체제 마다 UI 모양이 다름
# Swing
#* 운영체제가 제공하는 native UI 사용 안 함
#* 운영체제가 새롭게 제공하는 UI 지원의 어려움
# JavaFX
#* Abode의 flash, Microsoft의 silverlight의 대항마
#* JDK 7부터 지원. JDK 8 권장.
#* JDK 11부터는 별도로 설치해야 함.
#* 화면 레이아웃과 스타일, 애플리케이션 로직 분리
#* Java 코드와 분리해서 스타일 시트(CSS)로 외관 작성 → 개발자와 디자이너의 동시 개발 가능
#* Java 코드에서도 레이아웃과 애플리케이션 로직을 분리하고 싶다면 레이아웃은 FXML로 작성, 로직은 Java로 작성
#* JavaFX 애플리케이션 구성 요소
{| class="wikitable" cellpadding="50"
| rowspan="2" align="center" | '''[레이아웃]'''<br/>자바 코드 파일</br>또는 FXML 파일
| align="center" | '''[외관 및 스타일]'''<br/>CSS 파일
| rowspan="2" align="center" | '''[리소스]'''<br/>그림 파일<br/>동영상 파일<br/>...
|-
| align="center" | '''[비즈니스 로직]'''<br/>자바 코드 파일
|}

== JavaFX 애플리케이션 개발 시작 ==
=== 메인 클래스 ===
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX 라이프사이클(life cycle) ===
* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {
public AppMain() {
System.out.println(Thread.currentThread().getName() + ": AppMain() 호출");
}

@Override
public void init() throws Exception {
System.out.println(Thread.currentThread().getName() + ": init() 호출");
}

@Override
public void start(Stage primaryStage) throws Exception {
System.out.println(Thread.currentThread().getName() + ": start() 호출");
primaryStage.show();
}
@Override
public void stop() throws Exception {
System.out.println(Thread.currentThread().getName() + ": stop() 호출");
}

public static void main(String[] args) throws Exception {
System.out.println(Thread.currentThread().getName() + ": main() 호출");
launch(args);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
main: main() 호출
JavaFX Application Thread: AppMain() 호출
JavaFX-Launcher: init() 호출
JavaFX Application Thread: start() 호출
JavaFX Application Thread: stop() 호출 ← 프로그램을 끝내야 실행된다.
</syntaxhighlight>

=== 메일 클래스 실행 매개값 얻기 ===
<syntaxhighlight lang="text">
C:> java AppMain --ip=192.168.0.5 --port=50001
</syntaxhighlight>

* main()에서 launch(args)를 넘겨 받음
* init() 메소드에서 아래와 같이 실행할 수 있음
<syntaxhighlight lang="java">
Parameters params = getParameters();
List<String> list = params.getRaw();
Map<String, String> map = params.getNamed();
</syntaxhighlight>

=== 무대(Stage)와 장면(Scene) ===
* 윈도우 : Stage
* Stage에는 하나의 Scene을 가질 수 있음
* Scene은 직접 생성해야 함

[[file:CP2022_ch17.2_AppMain.png|thumb|AppMain 실행화면]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
VBox root = new VBox();
root.setPrefWidth(350);
root.setPrefHeight(150);
root.setAlignment(Pos.CENTER);
root.setSpacing(20);

Label label = new Label();
label.setText("Hello, JavaFX");
label.setFont(new Font(50));

Button button = new Button();
button.setText("확인");
button.setOnAction(event->Platform.exit());

root.getChildren().add(label);
root.getChildren().add(button);

Scene scene = new Scene(root); // VBox를 루트 컨테이너(root container)로 해서 Scene 생성

primaryStage.setTitle("AppMain입니다");
primaryStage.setScene(scene); // 윈도우에 장면 설정
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

== JavaFX 레이아웃 ==
=== 프로그램적 레이아웃 ===
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | 프로그램적 레이아웃]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox hbox = new HBox();
hbox.setPadding(new Insets(10));
hbox.setSpacing(10);

TextField textField = new TextField();
textField.setPrefWidth(200);

Button button = new Button();
button.setText("확인");

ObservableList list = hbox.getChildren();
list.add(textField);
list.add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 레이아웃 ===
* FXML 파일 (root.fxml)
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | FXML 레이아웃]]
<syntaxhighlight lang="text">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>

<HBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
<spacing>10</spacing>

<children>
<TextField>
<prefWidth>200</prefWidth>
</TextField>

<Button>
<text>확인</text>
</Button>
</children>
</HBox>
</syntaxhighlight>

* AppMain 클래스
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml")); // ← FXML 로드
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 레이아웃(layout) 여백: 패딩(padding)과 마진(margin) ===
<table2 class=wikitable head=top sep=bar align=cll>
구분 | HBox의 패딩 | Button의 마진
개념 | [[file:CP-17.3.3-padding.png]] | [[file:CP-17.3.3-margin.png]]
자바 코드 | HBox hbox = new HBox();<br/>'''hbox.setPadding(new Insets(50))'''; | Button button = new Button();<br/>'''HBox.setMargin(button, new Insets(50));'''
FXML 태그 | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</padding><br/></HBox> | <Button><br/>{{sp2}}<HBox.margin><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</Hbox.margin><br/></Button>
</table2>

* Margin, Padding 설정 방법
<syntaxhighlight lang="java">
// top, right, bottom, left를 모두 동일한 값으로 설정할 때
// Insets(double topRightBottomLeft)
new Insets(50);

// top, right, bottom, left를 다를 값으로 설정할 때
// Insets(double top, double right, double bottom, double left)
new Insets(10, 20, 30, 40);
</syntaxhighlight>

* 패딩과 마진 적용 예
[[file:CP-17.3.3-AppMain.png|thumb|패딩과 마진 적용 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
// 패딩 설정
HBox hbox = new HBox();
hbox.setPadding(new Insets(50, 10, 10, 50));
Button button = new Button();
button.setPrefSize(100, 100);

// 마진 설정
// HBox hbox = new HBox();
// Button button = new Button();
// button.setPrefSize(100, 100);
// HBox.setMargin(button, new Insets(10, 10, 50, 50));

hbox.getChildren().add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 작성 규칙 ===
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox xmlns:fx="http://javafx.com/fxml"><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
TextField textField = new TextField();<br/>textField.setPrefWidth(200);<br/>{{sp2}} | <TextField><br/>{{sp2}}<prefWidth>200</prefWidth><br/></TextField>
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
ObsetvableList list = hbox.getChildren();<br/>list.add(textField);<br/>list.add(button);<br/><br/><br/><br/><br/>{{sp2}} | <children><br/>{{sp2}}<TextField><br/>{{sp2}}{{sp2}}<prefWidth>200</prefWidth><br/>{{sp2}}</TextField><br/>{{sp2}}<Button><br/>{{sp2}}{{sp2}}<text>확인</text><br/>{{sp2}}</Button><br/></children>
</table2>

==== 패키지(package) 선언 ====
<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML 태그
import javafx.scene.layout.HBox; | <?import javafx.scene.layout.HBox?>
import javafx.scene.control.*; | <?import javafx.scene.control.*?>
</table2>

* <?import?>가 들어가는 위치는 <?xml ...>와 루트 컨테이너 태그 사이이다.
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.*?>

<루트 컨테이너 xmlns:fx="http://javafx.com/fxml">
...
</루트 컨테이너>
</syntaxhighlight>

* import를 제대로 하지 않으면 not a valid type 메시지와 함께 javafx.fxml.LoadException 발생

==== 태그(tag) 선언 ====
* 시작 태그와 끝 태그가 매칭되어야 한다.

<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
</table2>

==== 속성(attribute) 선언 ====
* 속성은 "나 '로 감싸야 한다.
<syntaxhighlight lang="xml">
<태그이름 속성명="값" 속성명='값'> ... </태그이름>
</syntaxhighlight>

* 속성명은 Setter 메소드 명이 옴
* 모든 Setter가 사용될 수 있는 것은 아님. 기본 타입(boolean, byte, short, char, int, long, float, double)의 값을 세팅하거나, String을 세팅하는 Setter만 올 수 있음

* 예
<table2 class=wikitable head=top sep=bar align=lll>
자바 코드 | FXML (Setter 태그) | FXML (Setter 속성)
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button> | <Button text="확인"/><br/><br/>{{sp2}}
</table2>

==== 객체 선언 ====
===== 클래스 속성 =====
* 생성자에 매개 변수가 있고, 매개 변수에 @NamedArg(javafx.beans.NamedArg) 어노테이션이 적용되어 있으면 속성명이나 자식 태그로 작성할 수 있음
<table2 class=wikitable sep=bar align=ll>
<클래스 매개변수="값"><br/><br/>{{sp2}} | <클래스><br/>{{sp2}}<매개변수>값</매개변수><br/></클래스>
</table2>

* 예
** HBox를 패딩할 때 setPadding(Insets value) 메소드를 사용하는데
** Insets는 기본 생성자가 없고,
** Insets(double topRightBottomLeft) 또는 Insets(double top, double right, double bottom, double left)만 있음
** 이 경우 아래와 같이 선언 가능함
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
</table2>

===== 클래스 fx:value =====
* 클래스가 valueOf(String) 메소드를 제공하는 경우
<syntaxhighlight lang="xml">
<클래스 fx:value="값" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
String.valueOf("Hello, World!");<br/>Integer.valueOf("1");<br/>Double.valueOf("1.0");<br/>Boolean.valueOf("false"); | <String fx:value="Hello, World!"/><br/><Integer fx:value="1"/><br/><Double fx:value="1.0"/><br/><Boolean fx:value="false"/>
</table2>

===== 클래스 fx:constant =====
*클래스에 정의된 상수값을 얻고 싶을 경우
<syntaxhighlight lang="xml">
<클래스 fx:constant="상수" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
Button button = new Button();<br/>button.setMaxWidth( Double.MAX_VALUE );<br/><br/><br/>{{sp2}} | <Button><br/>{{sp2}}<maxWidth><br/>{{sp2}}{{sp2}}<Double fx:constant="MAX_VALUE"/><br/>{{sp2}}</maxWidth><br/><Button>
</table2>

===== 클래스 fx:factory =====
* 어떤 클래스는 new 연산자로 객체를 생성할 수 없고,
* 정적 메소드(이를 factory 메소드라 부른다)로 객체를 얻어야 하는 경우가 있음
<syntaxhighlight lang="xml">
<클래스 fx:factory="정적메소드" />
</syntaxhighlight>

* 예: <code>ObservableList</code>의 구현 객체는 <code>javafx.collections.FXCollections</code>의 정적 메소드인 <code>observableArrayList(E... items)</code> 메소드로 얻을 수 있다.
<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
ComboBox combo = new ComboBox();<br/>combo.setItems(FXCollections.observableArrayList("공개", "비공개"));<br/><br/><br/><br/><br/><br/>{{sp2}} | <ComboBox><br/>{{sp2}}<Items><br/>{{sp2}}{{sp2}}<FXCollections fx:factory="observableArrayList"><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="공개"/><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="비공개"/><br/>{{sp2}}{{sp2}}</FXCollections><br/>{{sp2}}</items><br/></ComboBox>
</table2>

=== FXML 로딩과 Scene 생성 ===
* FXML 파일을 작성한 후 이를 이용하여 객체를 만들어야 한다. 이를 '''FXML loading'''이라고 한다.
* javafx.fxml.FXMLLoader를 이용
** 두 개의 load() 메소드 : 정적 메소드, 인스턴스 메소드

<syntaxhighlight lang="java">
Parent root = FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>
* getClass() - 현재 클래스 리턴
* getResource() - 클래스가 위치하는 곳에서 상대 경로로 리소스의 URL을 리턴
* load() - FXML 파일을 로딩

<syntaxhighlight lang="java">
FXMLLoader loader = new FXMLLoader(getClass().getResource("xxx.fxml"));
Parent root = (Parent)loader.load();
</syntaxhighlight>
* load() - Parent 타입을 리턴함. 이것은 FXML 파일에서의 루트 태그로 선언된 컨테이너임
* 만을 루트 태그가 <HBox> 라면 다음과 같이 작성해도 됨

<syntaxhighlight lang="java">
HBox hbox = (HBox) FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>

* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX Scene Builder ===
[[file:CP-SceneBuilder-1.png | thumb | Scene Builder로 root.fxml 띄움]]
* Scene Builder 다운로드 - https://gluonhq.com/products/scene-builder/
* [https://marketplace.visualstudio.com/items?itemName=bilalekrem.scenebuilderextension SceneBuilder extension for Visual Studio Code]
** vscode에서 Ctrl-Shift-P를 눌러 "Configure Scene Builder path"를 실행한다.
*** 경로를 다음과 같이 지정한다 : C:\Users\profs\AppData\Local\SceneBuilder 폴더의 SceneBuilder.exe 지정

* Scene Builder 띄우는 방법
** fxml 파일을 선택한다.
** vscode에서 Ctrl-Shift-P를 누른다.

== JavaFX 컨테이너 ==

<table2 class=wikitable head=top sep=bar align=ll>
컨테이너 | 설명
AnchorPane | 컨트롤을 좌표로 배치하는 레이아웃
BorderPane | 위, 아래, 오른쪽, 왼쪽, 중앙에 컨트롤을 배치하는 레이아웃
FlowPane | 행으로 배치하되 공간이 부족하면 새로운 행에 배치하는 레이아웃
GridPane | 그리드로 배치하되 셀의 크기가 고정적이지 않은 레이아웃
StackPane | 컨트롤을 겹쳐서 배치하는 레이아웃
TilePane | 그리드로 배치하되 고정된 셀의 크기를 갖는 레이아웃
HBox | 수평으로 배치하는 레이아웃
VBox | 수직으로 배치하는 레이아웃
</table2>

=== AnchorPane 컨테이너 ===
[[file:CP-17.4.1-1.png]]

* AnchorPane에서 사용할 수 있는 주요 설정
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
PrefWidth | 폭을 설정 | AnchorPane
PrefHeight | 높이를 설정 | AnchorPane
layoutX | 컨트롤의 X 좌표 | 컨트롤
layoutY | 컨트롤의 Y 좌표 | 컨트롤
<children> | 컨트롤을 포함 | AnchorPane
</table2>

[[file:CP-17.4.1-2.png | thumb | AnchorPane (Scene Builder)]]
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" prefHeight="150.0" prefWidth="300.0">
<children>
<Label layoutX="42.0" layoutY="28.0" text="아이디" />
<Label layoutX="42.0" layoutY="66.0" text="패스워드" />
<TextField layoutX="120.0" layoutY="24.0" />
<PasswordField layoutX="120.0" layoutY="62.0" />
<Button layoutX="97.0" layoutY="106.0" text="로그인" />
<Button layoutX="164.0" layoutY="106.0" text="취소" />
</children>
</AnchorPane>
</syntaxhighlight>

=== HBox와 VBox 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | HBox, VBox
prefHeight | 높이를 설정 | HBox, VBox
alignment | 컨트롤의 정렬을 설정 | HBox, VBox
spacing | 컨트롤의 간격을 설정 | HBox, VBox
fillWidth | 컨트롤의 폭 확장 여부 설정 | VBox
fillHeight | 컨트롤의 높이 확장 여부 설정 | HBox
<children> | 컨트롤을 포함 | HBox, VBox
<HBox.hgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></HBox.hgrow> | HBox의 남은 폭을 채움 | 컨트롤
<VBox.vgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></VBox.vgrow> | VBox의 남을 높이를 채움 | 컨트롤
</table2>

* root2.fxml
** 이 패키지의 하위 폴더로 <code>images</code>를 만들고 여기에 javafx.png 파일을 복사해 넣어둔다. [[file:javafx.png | thumb | javafx.png]]
[[file:CP-17.4.3-project.png | thumb | images 폴더]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.Double?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.Priority?>

<VBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<ImageView fitWidth="200.0" preserveRatio="true"> 
<image>
<Image url="@images/javafx.png" /> 
</image>
</ImageView>
<HBox alignment="CENTER" spacing="20.0">
<children>
<Button text="이전" />
<Button text="다음">
<HBox.hgrow><Priority fx:constant="ALWAYS"/></HBox.hgrow> 
<maxWidth><Double fx:constant="MAX_VALUE"/></maxWidth> 
</Button>
</children>
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
</HBox>
</children>
</VBox>

</syntaxhighlight>

* 예제
[[file:CP-17.4.3-p874.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root2.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== BorderPane 컨테이너 ===
* top, bottom, left, right, center 셀에 컨트롤을 배치하는 컨테이너
* 다른 컨테이너를 배치할 수도 있음
* 각 셀에는 '''하나'''의 컨트롤 또는 컨테이너만 배치할 수 있음

[[file:CP-17.4.4-1.png | 250px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | BorderPane
prefHeight | 높이를 설정 | BorderPane
<top> | top에 배치될 컨트롤을 포함 | BorderPane
<bottom> | bottom에 배치될 컨트롤을 포함 | BorderPane
<right> | right에 배치될 컨트롤을 포함 | BorderPane
<left> | left에 배치될 컨트롤을 포함 | BorderPane
<nowiki><center></nowiki> | center에 배치될 컨트롤을 포함 | BorderPane
</table2>

[[file:CP-17.4.4-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane prefHeight="200.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<top>
<ToolBar prefHeight="40.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<items>
<Button text="Button" />
<Button text="Button" />
</items>
</ToolBar>
</top>
<center>
<TextArea /> 
</center>
<bottom>
<BorderPane>
<center>
<TextField /> 
</center>
<right>
<Button text="Button" />
</right>
</BorderPane>
</bottom>
</BorderPane>
</syntaxhighlight>

=== FlowPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | FlowPane
prefHeight | 높이를 설정 | FlowPane
hgap | 컨트롤의 수평 간격을 설정 | FlowPane
vgap | 컨트롤의 수직 간격을 설정 | FlowPane
<children> | 컨트롤을 포함 | FlowPane
</table2>

[[file:CP-17.4.5-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>

<FlowPane prefHeight="70.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
</children>
</FlowPane>
</syntaxhighlight>

=== TilePane 컨테이너 ===
* 그리드로 컨트롤을 배치하되 고정된 셀(타일) 크기를 갖는 컨테이너
* 오른쪽에 배치할 공간이 부족하면 새로운 행에 컨트롤을 배치함

[[file:CP-17.4.6-TilePane.png | 400px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | TilePane
prefHeight | 높이를 설정 | TilePane
prefTileWidth | 타일의 폭을 설정 | TilePane
prefTileHeight | 타일의 높이를 설정 | TilePane
<children> | 컨트롤을 포함 | TilePane
</table2>

<gallery>
file:fruit1.jpg | fruit1.jpg
file:fruit2.jpg | fruit2.jpg
file:fruit3.jpg | fruit3.jpg
file:fruit4.jpg | fruit4.jpg
file:fruit5.jpg | fruit5.jpg
</gallery>

[[file:CP-17.4.6-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.TilePane?>

<TilePane xmlns:fx="http://javafx.com/fxml" prefHeight="100.0" prefWidth="100.0">
<children>
<ImageView>
<image><Image url="@images/fruit1.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit2.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit3.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit4.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit5.jpg" /></image>
</ImageView>
</children>
</TilePane>
</syntaxhighlight>

=== GridPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | GridPane
prefHeight | 놎이를 설정 | GridPane
hgap | 수평 컨트롤 간격을 설정 | GridPane
vgap | 수직 컨트롤 간격을 설정 | GridPane
<children> | 컨트롤을 포함 | GridPane
GridPane.rowIndex | 컨트롤이 위치하는 행 인덱스를 설정 | 컨트롤
GridPane.columnIndex | 컨트롤이 위치하는 컬럼 인덱스를 설정 | 컨트롤
GridPane.rowSpan | 행 병합 수를 설정 | 컨트롤
GridPane.columnSpan | 컬럼 병합 수를 설정 | 컨트롤
GridPane.hgrow | 수평 빈 공간을 채우기로 설정 | 컨트롤
GridPane.vgrow | 수직 빈 공간을 채우기로 설정 | 컨트롤
GridPane.halignment | 컨트롤의 수평 정렬을 설정 | 컨트롤
GridPane.valignment | 컨트롤의 수직 정렬을 설정 | 컨트롤
</table2>

[[file:CP-17.4.7-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane xmlns:fx="http://javafx.com/fxml" prefWidth="300.0" hgap="10.0" vgap="10.0">
<padding>
<Insets topRightBottomLeft="10.0" />
</padding>

<children>
<Label text="아이디" GridPane.rowIndex="0" GridPane.columnIndex="0" />
<TextField GridPane.rowIndex="0" GridPane.columnIndex="1"
GridPane.hgrow="ALWAYS" /> 

<Label text="패스워드" GridPane.rowIndex="1" GridPane.columnIndex="0" />
<TextField GridPane.columnIndex="1" GridPane.rowIndex="1"
GridPane.hgrow="ALWAYS" /> 
<HBox GridPane.rowIndex="2" GridPane.columnIndex="0"
GridPane.columnSpan="2" GridPane.hgrow="ALWAYS"
alignment="CENTER" spacing="20.0" > 
<children>
<Button text="로그인" />
<Button text="취소" />
</children>
</HBox>
</children>
</GridPane>
</syntaxhighlight>

=== StackPane 컨테이너 ===
* 컨트롤을 겹쳐 배치하는 컨테이너
* 카드 레이아웃(Card Layout)이라고도 함
* 만약 위에 있는 컨트롤이 투명하다면 밑에 있는 컨트롤이 겹쳐 보임

<gallery>
file:duke.jpg | duke.jpg
file:snow.jpg | snow.jpg
</gallery>

[[file:CP-17.4.8-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.StackPane?>

<StackPane xmlns:fx="http://javafx.com/fxml" prefHeight="300.0" prefWidth="500.0">
<children>
<ImageView fitHeight="300.0" fitWidth="500.0">
<image>
<Image url="@images/snow.jpg" />
</image>
</ImageView>
<ImageView preserveRatio="true">
<image>
<Image url="@images/duke.jpg" />
</image>
</ImageView>
</children>
</StackPane>
</syntaxhighlight>

== JavaFX 이벤트 처리 ==

=== 이벤트 핸들러(EventHandler) ===
* JavaFX는 이벤트 발생 콘트롤과 이벤트 핸들러(EventHandler)를 분리하는 위임형(Delegation<ref>Design Pattern 중 Delegation Pattern</ref>) 방식을 사용함
* 이를 위해 먼저 컨트롤에 EventHandler를 등록해야 함 (setOnXXX() 메소드. 예: setOnAction())

<table2 class=wikitable head=top sep=bar align=cccc>
컨트롤(control) | 사건 | 이벤트(event) 발생 | 이벤트 처리 담당 객체 | 이벤트 처리 메소드 실행 | 이벤트 처리 효과
Button | 버튼을 누름 | ActionEvent | EventHandler | public void handle(...) {<br/>{{sp2}}이벤트 처리</br/>} | 1. 윈도우 닫기<br/>2. 컨트롤 내용 변경<br/>3. 다이얼로그 띄우기
</table2>

* Button 클릭 처리하는 이벤트 등록
<syntaxhighlight lang="java">
Button button = new Button();
button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) { ... }
}):
</syntaxhighlight>

* TableView에서 행을 마우스로 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
TableView tableView = new TableView();
tableView.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) { ... }
});
</syntaxhighlight>

* 윈도우 우측 상단(x) 버튼 클릭할 때 처리하는 이벤트 등록
<syntaxhighlight lang="java">
stage.setOnCloseRequest(new EventHandler<WindowEvent>() {
@Override
public void handle(WindowEvent event) { ... }
});
</syntaxhighlight>

* EventHandler는 하나의 메소드를 가진 함수적 인터페이스이므로 람다식을 이용하여 이벤트 등록 가능
<syntaxhighlight lang="java">
button.setOnAction( event->{ ... } );
tableView.setOnMouseClicked( event->{ ... } );
stage.setOnCloseRequest( event->{ ... } );
</syntaxhighlight>

[[file:CP-17.5.1-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox root = new HBox();
root.setPrefSize(200, 50);
root.setAlignment(Pos.CENTER); // 수평 중앙 정렬
root.setSpacing(20);

Button btn1 = new Button("버튼1");
btn1.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
System.out.println("버튼1 클릭");
}
});

Button btn2 = new Button("버튼2");
btn2.setOnAction(event->System.out.println("버튼2 클릭"));

root.getChildren().addAll(btn1, btn2); // HBox에 btn1과 btn2를 추가
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.setOnCloseRequest(event->System.out.println("종료 클릭"));
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

=== FXML 컨트롤러(Controller) ===

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

== JavaFX 속성 감시와 바인딩 ==

File:CP-17.5.1-실행결과.png

2022-07-21T12:27:46Z

Swpark:

컴퓨터프로그래밍및실습 (2022년)/1124

2022-07-21T12:27:35Z

Swpark: /* JavaFX 이벤트 처리 */

== JavaFX 개요 ==
# AWT
#* Native UI 컴포넌트 사용
#* 운영체제 마다 UI 모양이 다름
# Swing
#* 운영체제가 제공하는 native UI 사용 안 함
#* 운영체제가 새롭게 제공하는 UI 지원의 어려움
# JavaFX
#* Abode의 flash, Microsoft의 silverlight의 대항마
#* JDK 7부터 지원. JDK 8 권장.
#* JDK 11부터는 별도로 설치해야 함.
#* 화면 레이아웃과 스타일, 애플리케이션 로직 분리
#* Java 코드와 분리해서 스타일 시트(CSS)로 외관 작성 → 개발자와 디자이너의 동시 개발 가능
#* Java 코드에서도 레이아웃과 애플리케이션 로직을 분리하고 싶다면 레이아웃은 FXML로 작성, 로직은 Java로 작성
#* JavaFX 애플리케이션 구성 요소
{| class="wikitable" cellpadding="50"
| rowspan="2" align="center" | '''[레이아웃]'''<br/>자바 코드 파일</br>또는 FXML 파일
| align="center" | '''[외관 및 스타일]'''<br/>CSS 파일
| rowspan="2" align="center" | '''[리소스]'''<br/>그림 파일<br/>동영상 파일<br/>...
|-
| align="center" | '''[비즈니스 로직]'''<br/>자바 코드 파일
|}

== JavaFX 애플리케이션 개발 시작 ==
=== 메인 클래스 ===
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX 라이프사이클(life cycle) ===
* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.stage.Stage;

public class AppMain extends Application {
public AppMain() {
System.out.println(Thread.currentThread().getName() + ": AppMain() 호출");
}

@Override
public void init() throws Exception {
System.out.println(Thread.currentThread().getName() + ": init() 호출");
}

@Override
public void start(Stage primaryStage) throws Exception {
System.out.println(Thread.currentThread().getName() + ": start() 호출");
primaryStage.show();
}
@Override
public void stop() throws Exception {
System.out.println(Thread.currentThread().getName() + ": stop() 호출");
}

public static void main(String[] args) throws Exception {
System.out.println(Thread.currentThread().getName() + ": main() 호출");
launch(args);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
main: main() 호출
JavaFX Application Thread: AppMain() 호출
JavaFX-Launcher: init() 호출
JavaFX Application Thread: start() 호출
JavaFX Application Thread: stop() 호출 ← 프로그램을 끝내야 실행된다.
</syntaxhighlight>

=== 메일 클래스 실행 매개값 얻기 ===
<syntaxhighlight lang="text">
C:> java AppMain --ip=192.168.0.5 --port=50001
</syntaxhighlight>

* main()에서 launch(args)를 넘겨 받음
* init() 메소드에서 아래와 같이 실행할 수 있음
<syntaxhighlight lang="java">
Parameters params = getParameters();
List<String> list = params.getRaw();
Map<String, String> map = params.getNamed();
</syntaxhighlight>

=== 무대(Stage)와 장면(Scene) ===
* 윈도우 : Stage
* Stage에는 하나의 Scene을 가질 수 있음
* Scene은 직접 생성해야 함

[[file:CP2022_ch17.2_AppMain.png|thumb|AppMain 실행화면]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
VBox root = new VBox();
root.setPrefWidth(350);
root.setPrefHeight(150);
root.setAlignment(Pos.CENTER);
root.setSpacing(20);

Label label = new Label();
label.setText("Hello, JavaFX");
label.setFont(new Font(50));

Button button = new Button();
button.setText("확인");
button.setOnAction(event->Platform.exit());

root.getChildren().add(label);
root.getChildren().add(button);

Scene scene = new Scene(root); // VBox를 루트 컨테이너(root container)로 해서 Scene 생성

primaryStage.setTitle("AppMain입니다");
primaryStage.setScene(scene); // 윈도우에 장면 설정
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

== JavaFX 레이아웃 ==
=== 프로그램적 레이아웃 ===
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | 프로그램적 레이아웃]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox hbox = new HBox();
hbox.setPadding(new Insets(10));
hbox.setSpacing(10);

TextField textField = new TextField();
textField.setPrefWidth(200);

Button button = new Button();
button.setText("확인");

ObservableList list = hbox.getChildren();
list.add(textField);
list.add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 레이아웃 ===
* FXML 파일 (root.fxml)
[[file:CP_2022_ch17.3.1.AppMain.png | thumb | FXML 레이아웃]]
<syntaxhighlight lang="text">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>

<HBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets top="10" right="10" bottom="10" left="10"/>
</padding>
<spacing>10</spacing>

<children>
<TextField>
<prefWidth>200</prefWidth>
</TextField>

<Button>
<text>확인</text>
</Button>
</children>
</HBox>
</syntaxhighlight>

* AppMain 클래스
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml")); // ← FXML 로드
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== 레이아웃(layout) 여백: 패딩(padding)과 마진(margin) ===
<table2 class=wikitable head=top sep=bar align=cll>
구분 | HBox의 패딩 | Button의 마진
개념 | [[file:CP-17.3.3-padding.png]] | [[file:CP-17.3.3-margin.png]]
자바 코드 | HBox hbox = new HBox();<br/>'''hbox.setPadding(new Insets(50))'''; | Button button = new Button();<br/>'''HBox.setMargin(button, new Insets(50));'''
FXML 태그 | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</padding><br/></HBox> | <Button><br/>{{sp2}}<HBox.margin><br/>{{sp2}}{{sp2}}<Insets topRightBottomLeft="50"/><br/>{{sp2}}</Hbox.margin><br/></Button>
</table2>

* Margin, Padding 설정 방법
<syntaxhighlight lang="java">
// top, right, bottom, left를 모두 동일한 값으로 설정할 때
// Insets(double topRightBottomLeft)
new Insets(50);

// top, right, bottom, left를 다를 값으로 설정할 때
// Insets(double top, double right, double bottom, double left)
new Insets(10, 20, 30, 40);
</syntaxhighlight>

* 패딩과 마진 적용 예
[[file:CP-17.3.3-AppMain.png|thumb|패딩과 마진 적용 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
// 패딩 설정
HBox hbox = new HBox();
hbox.setPadding(new Insets(50, 10, 10, 50));
Button button = new Button();
button.setPrefSize(100, 100);

// 마진 설정
// HBox hbox = new HBox();
// Button button = new Button();
// button.setPrefSize(100, 100);
// HBox.setMargin(button, new Insets(10, 10, 50, 50));

hbox.getChildren().add(button);

Scene scene = new Scene(hbox);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== FXML 작성 규칙 ===
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox xmlns:fx="http://javafx.com/fxml"><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
TextField textField = new TextField();<br/>textField.setPrefWidth(200);<br/>{{sp2}} | <TextField><br/>{{sp2}}<prefWidth>200</prefWidth><br/></TextField>
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
ObsetvableList list = hbox.getChildren();<br/>list.add(textField);<br/>list.add(button);<br/><br/><br/><br/><br/>{{sp2}} | <children><br/>{{sp2}}<TextField><br/>{{sp2}}{{sp2}}<prefWidth>200</prefWidth><br/>{{sp2}}</TextField><br/>{{sp2}}<Button><br/>{{sp2}}{{sp2}}<text>확인</text><br/>{{sp2}}</Button><br/></children>
</table2>

==== 패키지(package) 선언 ====
<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML 태그
import javafx.scene.layout.HBox; | <?import javafx.scene.layout.HBox?>
import javafx.scene.control.*; | <?import javafx.scene.control.*?>
</table2>

* <?import?>가 들어가는 위치는 <?xml ...>와 루트 컨테이너 태그 사이이다.
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.*?>

<루트 컨테이너 xmlns:fx="http://javafx.com/fxml">
...
</루트 컨테이너>
</syntaxhighlight>

* import를 제대로 하지 않으면 not a valid type 메시지와 함께 javafx.fxml.LoadException 발생

==== 태그(tag) 선언 ====
* 시작 태그와 끝 태그가 매칭되어야 한다.

<table2 class=wikitable head=top sep=bar align=ll>
자바 코드 | FXML
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button>
</table2>

==== 속성(attribute) 선언 ====
* 속성은 "나 '로 감싸야 한다.
<syntaxhighlight lang="xml">
<태그이름 속성명="값" 속성명='값'> ... </태그이름>
</syntaxhighlight>

* 속성명은 Setter 메소드 명이 옴
* 모든 Setter가 사용될 수 있는 것은 아님. 기본 타입(boolean, byte, short, char, int, long, float, double)의 값을 세팅하거나, String을 세팅하는 Setter만 올 수 있음

* 예
<table2 class=wikitable head=top sep=bar align=lll>
자바 코드 | FXML (Setter 태그) | FXML (Setter 속성)
Button button = new Button();<br/>button.setText("확인");<br/>{{sp2}} | <Button><br/>{{sp2}}<text>확인</text><br/></Button> | <Button text="확인"/><br/><br/>{{sp2}}
</table2>

==== 객체 선언 ====
===== 클래스 속성 =====
* 생성자에 매개 변수가 있고, 매개 변수에 @NamedArg(javafx.beans.NamedArg) 어노테이션이 적용되어 있으면 속성명이나 자식 태그로 작성할 수 있음
<table2 class=wikitable sep=bar align=ll>
<클래스 매개변수="값"><br/><br/>{{sp2}} | <클래스><br/>{{sp2}}<매개변수>값</매개변수><br/></클래스>
</table2>

* 예
** HBox를 패딩할 때 setPadding(Insets value) 메소드를 사용하는데
** Insets는 기본 생성자가 없고,
** Insets(double topRightBottomLeft) 또는 Insets(double top, double right, double bottom, double left)만 있음
** 이 경우 아래와 같이 선언 가능함
<table2 class=wikitable head=top sep=bar align=ll>
프로그램적 레이아웃 자바 코드 | FXML 레이아웃 태그
HBox hbox = new HBox();<br/>hbox.setPadding(new Inset(10, 10, 10, 10));<br/>hbox.setSpacing(10);<br/><br/>{{sp2}} | <HBox><br/>{{sp2}}<padding><br/>{{sp2}}{{sp2}}<Insets top="10" right="10" bottom="10" left="10"/><br/>{{sp2}}</padding><br/></HBox>
</table2>

===== 클래스 fx:value =====
* 클래스가 valueOf(String) 메소드를 제공하는 경우
<syntaxhighlight lang="xml">
<클래스 fx:value="값" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
String.valueOf("Hello, World!");<br/>Integer.valueOf("1");<br/>Double.valueOf("1.0");<br/>Boolean.valueOf("false"); | <String fx:value="Hello, World!"/><br/><Integer fx:value="1"/><br/><Double fx:value="1.0"/><br/><Boolean fx:value="false"/>
</table2>

===== 클래스 fx:constant =====
*클래스에 정의된 상수값을 얻고 싶을 경우
<syntaxhighlight lang="xml">
<클래스 fx:constant="상수" />
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
Button button = new Button();<br/>button.setMaxWidth( Double.MAX_VALUE );<br/><br/><br/>{{sp2}} | <Button><br/>{{sp2}}<maxWidth><br/>{{sp2}}{{sp2}}<Double fx:constant="MAX_VALUE"/><br/>{{sp2}}</maxWidth><br/><Button>
</table2>

===== 클래스 fx:factory =====
* 어떤 클래스는 new 연산자로 객체를 생성할 수 없고,
* 정적 메소드(이를 factory 메소드라 부른다)로 객체를 얻어야 하는 경우가 있음
<syntaxhighlight lang="xml">
<클래스 fx:factory="정적메소드" />
</syntaxhighlight>

* 예: <code>ObservableList</code>의 구현 객체는 <code>javafx.collections.FXCollections</code>의 정적 메소드인 <code>observableArrayList(E... items)</code> 메소드로 얻을 수 있다.
<table2 class=wikitable head=top sep=bar align=ll>
기본 코드 | FXML
ComboBox combo = new ComboBox();<br/>combo.setItems(FXCollections.observableArrayList("공개", "비공개"));<br/><br/><br/><br/><br/><br/>{{sp2}} | <ComboBox><br/>{{sp2}}<Items><br/>{{sp2}}{{sp2}}<FXCollections fx:factory="observableArrayList"><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="공개"/><br/>{{sp2}}{{sp2}}{{sp2}}<String fx:value="비공개"/><br/>{{sp2}}{{sp2}}</FXCollections><br/>{{sp2}}</items><br/></ComboBox>
</table2>

=== FXML 로딩과 Scene 생성 ===
* FXML 파일을 작성한 후 이를 이용하여 객체를 만들어야 한다. 이를 '''FXML loading'''이라고 한다.
* javafx.fxml.FXMLLoader를 이용
** 두 개의 load() 메소드 : 정적 메소드, 인스턴스 메소드

<syntaxhighlight lang="java">
Parent root = FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>
* getClass() - 현재 클래스 리턴
* getResource() - 클래스가 위치하는 곳에서 상대 경로로 리소스의 URL을 리턴
* load() - FXML 파일을 로딩

<syntaxhighlight lang="java">
FXMLLoader loader = new FXMLLoader(getClass().getResource("xxx.fxml"));
Parent root = (Parent)loader.load();
</syntaxhighlight>
* load() - Parent 타입을 리턴함. 이것은 FXML 파일에서의 루트 태그로 선언된 컨테이너임
* 만을 루트 태그가 <HBox> 라면 다음과 같이 작성해도 됨

<syntaxhighlight lang="java">
HBox hbox = (HBox) FXMLLoader.load(getClass().getResource("xxx.fxml"));
</syntaxhighlight>

* 예제 코드
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== JavaFX Scene Builder ===
[[file:CP-SceneBuilder-1.png | thumb | Scene Builder로 root.fxml 띄움]]
* Scene Builder 다운로드 - https://gluonhq.com/products/scene-builder/
* [https://marketplace.visualstudio.com/items?itemName=bilalekrem.scenebuilderextension SceneBuilder extension for Visual Studio Code]
** vscode에서 Ctrl-Shift-P를 눌러 "Configure Scene Builder path"를 실행한다.
*** 경로를 다음과 같이 지정한다 : C:\Users\profs\AppData\Local\SceneBuilder 폴더의 SceneBuilder.exe 지정

* Scene Builder 띄우는 방법
** fxml 파일을 선택한다.
** vscode에서 Ctrl-Shift-P를 누른다.

== JavaFX 컨테이너 ==

<table2 class=wikitable head=top sep=bar align=ll>
컨테이너 | 설명
AnchorPane | 컨트롤을 좌표로 배치하는 레이아웃
BorderPane | 위, 아래, 오른쪽, 왼쪽, 중앙에 컨트롤을 배치하는 레이아웃
FlowPane | 행으로 배치하되 공간이 부족하면 새로운 행에 배치하는 레이아웃
GridPane | 그리드로 배치하되 셀의 크기가 고정적이지 않은 레이아웃
StackPane | 컨트롤을 겹쳐서 배치하는 레이아웃
TilePane | 그리드로 배치하되 고정된 셀의 크기를 갖는 레이아웃
HBox | 수평으로 배치하는 레이아웃
VBox | 수직으로 배치하는 레이아웃
</table2>

=== AnchorPane 컨테이너 ===
[[file:CP-17.4.1-1.png]]

* AnchorPane에서 사용할 수 있는 주요 설정
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
PrefWidth | 폭을 설정 | AnchorPane
PrefHeight | 높이를 설정 | AnchorPane
layoutX | 컨트롤의 X 좌표 | 컨트롤
layoutY | 컨트롤의 Y 좌표 | 컨트롤
<children> | 컨트롤을 포함 | AnchorPane
</table2>

[[file:CP-17.4.1-2.png | thumb | AnchorPane (Scene Builder)]]
<syntaxhighlight lang="java">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns:fx="http://javafx.com/fxml" prefHeight="150.0" prefWidth="300.0">
<children>
<Label layoutX="42.0" layoutY="28.0" text="아이디" />
<Label layoutX="42.0" layoutY="66.0" text="패스워드" />
<TextField layoutX="120.0" layoutY="24.0" />
<PasswordField layoutX="120.0" layoutY="62.0" />
<Button layoutX="97.0" layoutY="106.0" text="로그인" />
<Button layoutX="164.0" layoutY="106.0" text="취소" />
</children>
</AnchorPane>
</syntaxhighlight>

=== HBox와 VBox 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | HBox, VBox
prefHeight | 높이를 설정 | HBox, VBox
alignment | 컨트롤의 정렬을 설정 | HBox, VBox
spacing | 컨트롤의 간격을 설정 | HBox, VBox
fillWidth | 컨트롤의 폭 확장 여부 설정 | VBox
fillHeight | 컨트롤의 높이 확장 여부 설정 | HBox
<children> | 컨트롤을 포함 | HBox, VBox
<HBox.hgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></HBox.hgrow> | HBox의 남은 폭을 채움 | 컨트롤
<VBox.vgrow><br/>{{sp2}}<Priority fx:constant="ALWAYS"/><br/></VBox.vgrow> | VBox의 남을 높이를 채움 | 컨트롤
</table2>

* root2.fxml
** 이 패키지의 하위 폴더로 <code>images</code>를 만들고 여기에 javafx.png 파일을 복사해 넣어둔다. [[file:javafx.png | thumb | javafx.png]]
[[file:CP-17.4.3-project.png | thumb | images 폴더]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.Double?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.Priority?>

<VBox xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<ImageView fitWidth="200.0" preserveRatio="true"> 
<image>
<Image url="@images/javafx.png" /> 
</image>
</ImageView>
<HBox alignment="CENTER" spacing="20.0">
<children>
<Button text="이전" />
<Button text="다음">
<HBox.hgrow><Priority fx:constant="ALWAYS"/></HBox.hgrow> 
<maxWidth><Double fx:constant="MAX_VALUE"/></maxWidth> 
</Button>
</children>
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
</HBox>
</children>
</VBox>

</syntaxhighlight>

* 예제
[[file:CP-17.4.3-p874.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("root2.fxml"));
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

=== BorderPane 컨테이너 ===
* top, bottom, left, right, center 셀에 컨트롤을 배치하는 컨테이너
* 다른 컨테이너를 배치할 수도 있음
* 각 셀에는 '''하나'''의 컨트롤 또는 컨테이너만 배치할 수 있음

[[file:CP-17.4.4-1.png | 250px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | BorderPane
prefHeight | 높이를 설정 | BorderPane
<top> | top에 배치될 컨트롤을 포함 | BorderPane
<bottom> | bottom에 배치될 컨트롤을 포함 | BorderPane
<right> | right에 배치될 컨트롤을 포함 | BorderPane
<left> | left에 배치될 컨트롤을 포함 | BorderPane
<nowiki><center></nowiki> | center에 배치될 컨트롤을 포함 | BorderPane
</table2>

[[file:CP-17.4.4-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane prefHeight="200.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<top>
<ToolBar prefHeight="40.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<items>
<Button text="Button" />
<Button text="Button" />
</items>
</ToolBar>
</top>
<center>
<TextArea /> 
</center>
<bottom>
<BorderPane>
<center>
<TextField /> 
</center>
<right>
<Button text="Button" />
</right>
</BorderPane>
</bottom>
</BorderPane>
</syntaxhighlight>

=== FlowPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | FlowPane
prefHeight | 높이를 설정 | FlowPane
hgap | 컨트롤의 수평 간격을 설정 | FlowPane
vgap | 컨트롤의 수직 간격을 설정 | FlowPane
<children> | 컨트롤을 포함 | FlowPane
</table2>

[[file:CP-17.4.5-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>

<FlowPane prefHeight="70.0" prefWidth="300.0" xmlns:fx="http://javafx.com/fxml">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>

<children>
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
<Button text="Button" />
</children>
</FlowPane>
</syntaxhighlight>

=== TilePane 컨테이너 ===
* 그리드로 컨트롤을 배치하되 고정된 셀(타일) 크기를 갖는 컨테이너
* 오른쪽에 배치할 공간이 부족하면 새로운 행에 컨트롤을 배치함

[[file:CP-17.4.6-TilePane.png | 400px]]

<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | TilePane
prefHeight | 높이를 설정 | TilePane
prefTileWidth | 타일의 폭을 설정 | TilePane
prefTileHeight | 타일의 높이를 설정 | TilePane
<children> | 컨트롤을 포함 | TilePane
</table2>

<gallery>
file:fruit1.jpg | fruit1.jpg
file:fruit2.jpg | fruit2.jpg
file:fruit3.jpg | fruit3.jpg
file:fruit4.jpg | fruit4.jpg
file:fruit5.jpg | fruit5.jpg
</gallery>

[[file:CP-17.4.6-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.TilePane?>

<TilePane xmlns:fx="http://javafx.com/fxml" prefHeight="100.0" prefWidth="100.0">
<children>
<ImageView>
<image><Image url="@images/fruit1.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit2.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit3.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit4.jpg" /></image>
</ImageView>
<ImageView>
<image><Image url="@images/fruit5.jpg" /></image>
</ImageView>
</children>
</TilePane>
</syntaxhighlight>

=== GridPane 컨테이너 ===
<table2 class=wikitable head=top sep=bar align=lll>
태그 및 속성 | 설명 | 적용
prefWidth | 폭을 설정 | GridPane
prefHeight | 놎이를 설정 | GridPane
hgap | 수평 컨트롤 간격을 설정 | GridPane
vgap | 수직 컨트롤 간격을 설정 | GridPane
<children> | 컨트롤을 포함 | GridPane
GridPane.rowIndex | 컨트롤이 위치하는 행 인덱스를 설정 | 컨트롤
GridPane.columnIndex | 컨트롤이 위치하는 컬럼 인덱스를 설정 | 컨트롤
GridPane.rowSpan | 행 병합 수를 설정 | 컨트롤
GridPane.columnSpan | 컬럼 병합 수를 설정 | 컨트롤
GridPane.hgrow | 수평 빈 공간을 채우기로 설정 | 컨트롤
GridPane.vgrow | 수직 빈 공간을 채우기로 설정 | 컨트롤
GridPane.halignment | 컨트롤의 수평 정렬을 설정 | 컨트롤
GridPane.valignment | 컨트롤의 수직 정렬을 설정 | 컨트롤
</table2>

[[file:CP-17.4.7-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane xmlns:fx="http://javafx.com/fxml" prefWidth="300.0" hgap="10.0" vgap="10.0">
<padding>
<Insets topRightBottomLeft="10.0" />
</padding>

<children>
<Label text="아이디" GridPane.rowIndex="0" GridPane.columnIndex="0" />
<TextField GridPane.rowIndex="0" GridPane.columnIndex="1"
GridPane.hgrow="ALWAYS" /> 

<Label text="패스워드" GridPane.rowIndex="1" GridPane.columnIndex="0" />
<TextField GridPane.columnIndex="1" GridPane.rowIndex="1"
GridPane.hgrow="ALWAYS" /> 
<HBox GridPane.rowIndex="2" GridPane.columnIndex="0"
GridPane.columnSpan="2" GridPane.hgrow="ALWAYS"
alignment="CENTER" spacing="20.0" > 
<children>
<Button text="로그인" />
<Button text="취소" />
</children>
</HBox>
</children>
</GridPane>
</syntaxhighlight>

=== StackPane 컨테이너 ===
* 컨트롤을 겹쳐 배치하는 컨테이너
* 카드 레이아웃(Card Layout)이라고도 함
* 만약 위에 있는 컨트롤이 투명하다면 밑에 있는 컨트롤이 겹쳐 보임

<gallery>
file:duke.jpg | duke.jpg
file:snow.jpg | snow.jpg
</gallery>

[[file:CP-17.4.8-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.layout.StackPane?>

<StackPane xmlns:fx="http://javafx.com/fxml" prefHeight="300.0" prefWidth="500.0">
<children>
<ImageView fitHeight="300.0" fitWidth="500.0">
<image>
<Image url="@images/snow.jpg" />
</image>
</ImageView>
<ImageView preserveRatio="true">
<image>
<Image url="@images/duke.jpg" />
</image>
</ImageView>
</children>
</StackPane>
</syntaxhighlight>

== JavaFX 이벤트 처리 ==

=== 이벤트 핸들러(EventHandler) ===

<syntaxhighlight lang="java">
Button button = new Button();
button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) { ... }
}):
</syntaxhighlight>

<syntaxhighlight lang="java">
TableView tableView = new TableView();
tableView.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) { ... }
});
</syntaxhighlight>

<syntaxhighlight lang="java">
stage.setOnCloseRequest(new EventHandler<WindowEvent>() {
@Override
public void handle(WindowEvent event) { ... }
});
</syntaxhighlight>

<syntaxhighlight lang="java">
button.setOnAction( event->{ ... } );
tableView.setOnMouseClicked( event->{ ... } );
stage.setOnCloseRequest( event->{ ... } );
</syntaxhighlight>

[[file:CP-17.5.1-실행결과.png | thumb | 실행 결과]]
<syntaxhighlight lang="java">
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class AppMain extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
HBox root = new HBox();
root.setPrefSize(200, 50);
root.setAlignment(Pos.CENTER); // 수평 중앙 정렬
root.setSpacing(20);

Button btn1 = new Button("버튼1");
btn1.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
System.out.println("버튼1 클릭");
}
});

Button btn2 = new Button("버튼2");
btn2.setOnAction(event->System.out.println("버튼2 클릭"));

root.getChildren().addAll(btn1, btn2); // HBox에 btn1과 btn2를 추가
Scene scene = new Scene(root);

primaryStage.setTitle("AppMain");
primaryStage.setScene(scene);
primaryStage.setOnCloseRequest(event->System.out.println("종료 클릭"));
primaryStage.show();
}

public static void main(String[] args) {
launch(args);
}
}
</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

=== FXML 컨트롤러(Controller) ===

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

<syntaxhighlight lang="java">

</syntaxhighlight>

== JavaFX 속성 감시와 바인딩 ==

컴퓨터프로그래밍및실습 (2022년)

2022-07-21T12:16:00Z

Swpark: /* 강의 내용 */

== 강의 내용 ==
* [[컴퓨터프로그래밍및실습 (2022년)/0901 | (9/01) 오리엔테이션]]
* [[컴퓨터프로그래밍및실습 (2022년)/0905 | (9/05) 변수와 타입]]

* [[컴퓨터프로그래밍및실습 (2022년)/0908 | (9/08) 연산자]]
* [[컴퓨터프로그래밍및실습 (2022년)/0912 | (9/12) 추석 연휴 – 온라인 강의로 대체. Karel을 이용한 프로그래밍 연습]]

* [[컴퓨터프로그래밍및실습 (2022년)/0915 | (9/15) 조건문, 반복문]]
* [[컴퓨터프로그래밍및실습 (2022년)/0919 | (9/19) 참조 타입]]

* [[컴퓨터프로그래밍및실습 (2022년)/0922 | (9/22) 클래스 1]]
* [[컴퓨터프로그래밍및실습 (2022년)/0926 | (9/26) 클래스 2]]

* [[컴퓨터프로그래밍및실습 (2022년)/0929 | (9/29) 상속]]
* [[컴퓨터프로그래밍및실습 (2022년)/1003 | (10/03) 개천절 – 온라인 강의로 대체. Karel을 이용한 클래스 연습]]

* [[컴퓨터프로그래밍및실습 (2022년)/1006 | (10/06) 인터페이스, 중첩 클래스와 중첩 인터페이스]]
* [[컴퓨터프로그래밍및실습 (2022년)/1010 | (10/10) 한글날 (대체 휴업일) - 온라인 강의로 대체. Karel을 이용한 상속, 인터페이스 연습]]

* [[컴퓨터프로그래밍및실습 (2022년)/1013 | (10/13) 예외 처리]]
* [[컴퓨터프로그래밍및실습 (2022년)/1017 | (10/17) 기본 API 클래스 1]]

* (10/20) 중간고사
* (10/24) 중간고사

* [[컴퓨터프로그래밍및실습 (2022년)/1027 | (10/27) 기본 API 클래스 2]]
* [[컴퓨터프로그래밍및실습 (2022년)/1031 | (10/31) Thread 1]]

* [[컴퓨터프로그래밍및실습 (2022년)/1103 | (11/03) Thread 2]]
* [[컴퓨터프로그래밍및실습 (2022년)/1107 | (11/07) 제네릭(Generic)]]

* [[컴퓨터프로그래밍및실습 (2022년)/1110 | (11/10) 람다식]]
* [[컴퓨터프로그래밍및실습 (2022년)/1114 | (11/14) 컬렉션 프레임워크 1]]

* [[컴퓨터프로그래밍및실습 (2022년)/1117 | (11/17) 컬렉션 프레임워크 2]]
* [[컴퓨터프로그래밍및실습 (2022년)/1121 | (11/21) 스트림과 병렬처리]]

* [[컴퓨터프로그래밍및실습 (2022년)/1124 | (11/24) JavaFX 1]]
* [[컴퓨터프로그래밍및실습 (2022년)/1128 | (11/28) JavaFX 2]]

* [[컴퓨터프로그래밍및실습 (2022년)/1201 | (12/01) JavaFX 3]]
* [[컴퓨터프로그래밍및실습 (2022년)/1205 | (12/05) IO 기반 입출력]]

* (12/8) 기말고사
* (12/12) 기말고사

[[category:컴퓨터프로그래밍및실습]]

컴퓨터프로그래밍및실습 (2022년)/0919

2022-07-21T12:13:59Z

Swpark: Swpark moved page 컴퓨터프로그래밍및실습 (2022년)/0922 to 컴퓨터프로그래밍및실습 (2022년)/0919 without leaving a redirect

== 데이터 타입 분류 ==
# 기본 타입(primitive type)
#* 정수 타입
#** byte
#** char
#** short
#** int
#** int
#** long
#* 실수 타입
#** float
#** double
#* 논리 타입
#** boolean
# 참조 타입(reference type)
#* 배열 타입(array type)
#* 열거 타입(enumeration type)
#* 클래스(class)
#* 인터페이스(interface)

<syntaxhighlight lang="java">
// 기본 타입 변수
int age = 25;
double price = 100.5

// 참조 타입 변수(reference type variable)
String name = "신용권"; // 객체는 힙(heap) 영역에 존재한다.
String hobby = "독서";
</syntaxhighlight>

* 참조 변수인 name에는 "신용권" 객체가 저장되어 있는 메모리의 주소가 저장되어 있다.
* 교재 p.139 그림 참조

== 메모리 사용 영역 ==
* 교재 p.140 그림 참조

# 메소드(method) 영역
#* Java 소스 코드(XXX.java)를 컴파일하여 만들어진 실행 코드(bytecode) (XXX.class)가 적재된 메모리 영역
#* 클래스 로더(class loader)가 class 파일을 읽어 메모리에 올림
#* 상수풀(runtime constant pool), 필대(field) 데이터, 메소드(method) 데이터, 메소드 코드, 생성자(construct) 코드 등 실행에 필요한 바이트코드 및 상수, 전역 변수(클래스 변수, class field)
# 힙(heap) 영역
#* 프로그래머가 생명 주기(life time)을 제어할 수 있는 메모리가 위치하는 영역임
#* new 연산자를 이용하여 생성하는 객체
#* 배열, String도 객체이므로 힙에 존재함
#* new 연사자를 호출하여 객체를 생성하면 만들어지고, garbage가 되면 사라짐
# 스택(stack) 영역
#* 스택 영역은 스레드 마다 독립적으로 존재함
#* 특별히 스레드를 만들지 않았다면 main 메소드가 실행되고 있는 main 스레드만 존재하므로 스택 영역도 하나임
#* 메소드의 인자, 지역 변수(local variable), 리턴 값, 리턴 주소가 저장됨. 이를 activation record라 부름.
#* p.142 그림 참조

* 아래 코드에서 (1), (2), (3) 지점에서의 스택 영역의 형태는?
<syntaxhighlight lang="java">
char v1 = 'A'; // (1)

if (v1 == 'A') { // (2)
int v2 = 100;
double v3 = 3.14;
}

boolean v4 = true; // (3)
</syntaxhighlight>

== 참조 변수의 <nowikI>==</nowiki>, <nowiki>!=</nowiki> 연산 ==
* 교재 p.143 그림 참조
<syntaxhighlight lang="java">
refVar1 = 객체_1;
refVar2 = 객체_2;
refVar3 = 객체_2;

refVar1 == refVar2 // 결과 : false
refVar1 != refVar2 // 결과 : true

refVar2 == refVar3 // 결과 : true
refVar2 != refVar3 // 결과 : false
</syntaxhighlight>

== null과 NullPointerException ==
<syntaxhighlight lang="java">
refVar1 = 객체_1;
refVar2 = null;

refVar1 == null // 결과 : false
refVar1 != null // 결과 : true

refVar2 == null // 결과 : true
refVar2 != null // 결과 : false

int[] intArray = null;
intArray[0] = 10; // NullPointerException 발생

String str = null;
System.out.println("총 문자수 : " + str.length()); // NullPointerException 발생
</syntaxhighlight>

== String 타입 ==
* String은 상수 객체이다. 왜냐하면 String에는 자신이 가진 값을 변경하는 메소드가 없기 때문이다.
<syntaxhighlight lang="java">
String 변수 = "문자열";

String name;
name = "신용권";

String hobby = "자바";
hobby = null; // garbage가 된다.

String name1 = "신용권";
String name2 = "신용권"; // 리터럴이 동일하면 동일한 객체를 가리킴

name1 = "신민철";
name2 = "신민철";
String name3 = new String("신민철");

boolean result = name1 == name2; // true
result = name1 == name3; // false
result = name1.equals(name3); // true;
</syntaxhighlight>

== 배열 타입 ==
* 동일한 타입을 여러 개 만들어야 할 때

=== 배열이라? ===
* 다음은 성가시다.
<syntaxhighlight lang="java">
int score1 = 83;
int score2 = 90;
int score3 = 87;
int score4 = 99;
int score5 = 48;
int score6 = 21;
int score7 = 38;
int score8 = 83;
int score9 = 78;
int score10 = 92;
int score11 = 95;
int score12 = 29;
int score13 = 55;
int score14 = 66;
int score15 = 88;
int score16 = 77;
int score17 = 44;
int score18 = 34;
int score19 = 84;
int score20 = 81;
int score21 = 60;
int score22 = 85;
int score23 = 44;
int score24 = 23;
int score25 = 84;
int score26 = 48;
int score27 = 40;
int score28 = 58;
int score29 = 78;
int score30 = 75;
</syntaxhighlight>

* 평균을 구하고자 한다면 코드를 어떻게 작성해야 하나?
<syntaxhighlight lang="java">
int sum = score1;
sum += score2;
sum += score3;
sum += score4;
sum += score5;
sum += score6;
sum += score7;
sum += score8;
sum += score9;
sum += score10;
sum += score11;
sum += score12;
sum += score13;
sum += score14;
sum += score15;
sum += score16;
sum += score17;
sum += score18;
sum += score19;
sum += score20;
sum += score21;
sum += score22;
sum += score23;
sum += score24;
sum += score25;
sum += score26;
sum += score27;
sum += score28;
sum += score29;
sum += score30;

int avg = sum / 30;
</syntaxhighlight>

* 얼마나 번거러운가? 아래와 같이 바꿔보자.

<syntaxhighlight lang="java">
// score는 배열이다.
int[] score = {83, 90, 87, 99, 48, 21, 38, 83, 78, 92, 95, 29, 55, 66, 88, 77, 44, 34, 84, 81, 60, 85, 44, 23, 84, 48, 40, 58, 78, 75};

int sum = 0;
for(int i = 0; i < score.length; i++) // 여기서 score.length는 30
sum += score[i]; // score[0]는 83, score[1]은 90 ...
int avg = sum / score.length;
</syntaxhighlight>

* 왜 배열이 필요한지 이해가 되는가?

=== 배열 선언 ===

* 두 표현은 동일하다.
<table2 class=wikitable sep=bar align=lllllll>
int[] intArray; | int intArray[];
double[] doubleArray; | double doubleArray[];
String[] strArray; | String strArray[]
</table2>

* 참고할 배열이 없다면 <code>null</code>로 지정한다.
<syntaxhighlight lang="java">
int[] intArray = null;
</syntaxhighlight>

=== 값 목록으로 배열 선언 ===
<syntaxhighlight lang="java">
String[] names = { "신용권", "홍길동", "감자바" };

names[1] = "홍삼원";

//--------------------------------------

String[] names = null;
names = new String[] { "신용권", "홍길동", "감자바" };

//--------------------------------------

// 다음과 같은 add 메소드가 있다면
int add(int[] scores) {
int sum = 0;
for(int i = 0; i < scores.length; i++)
sum += scores[i];
return sum;
}

// 이를 호출하는 방법으로
int result = add( {95, 85, 90} ); // 컴파일 에러 발생

int result = add( new int[] {95, 85, 90} ); // OK
</syntaxhighlight>

=== new 연산자로 배열 생성 ===
<syntaxhighlight lang="java">
int[] scores = new int[30]; // 앞의 예제에서 빈 배열을 만들고자 한다면. 모두 0으로 초기화된다.
scores[0] = 83; // 인덱스는 0부터 시작한다.
scores[1] = 90;
scores[2] = 75;

String[] names = new String[30]; // 모두 null로 초기화된다.
names[0] = "신용권";
names[1] = "홍길동";
names[2] = "감자바";
</syntaxhighlight>

=== 배열 길이 ===
<syntaxhighlight lang="java">
int[] intArray = { 10, 20, 30 };
System.out.println(intArray.length); // 3이 출력됨

intArray.length = 10; // 에러. length는 상수이다. 즉, 값을 변경할 수 없다.
</syntaxhighlight>

=== 커맨드 라인(command line) 입력 ===
* 명령창에서 다음과 같이 Java 프로그램 실행
<syntaxhighlight lang="text">
C:> java MainStringArrayArgument 10 20
</syntaxhighlight>

* 코드
<syntaxhighlight lang="java">
public class MainStringArrayArgument {
public static void main(String[] args) {
if (args.length != 2) { // 입력 데이터가 2개가 아닌 경우
System.out.println("Usage: java MainStringArrayArgument num1 num2");
System.exit(0); // 프로그램 강제 종료
}

String strNum1 = args[0];
String strNum2 = args[1];

int num1 = Integer.parseInt(strNum1); // Integer 클래스의 parseInt 메소드를 이용하여 문자열을 정수로 변환
int num2 = Integer.parseInt(strNum2);

int result = num1 + num2;
System.out.println(num1 + "+" + num2 + "=" + result);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
10+20=30
</syntaxhighlight>

=== 다차원 배열 ===
<syntaxhighlight lang="java">
int[][] scores = new int[2][3];

System.out.println(scores.length); // 2
System.out.println(scores[0].length); // 3
System.out.println(scores[1].length); // 3

//--------------------------------------------

int[][] scores = new int[2][];
scores[0] = new int[2];
scores[1] = new int[3];

System.out.println(scores.length); // 2
System.out.println(scores[0].length); // 2
System.out.println(scores[1].length); // 3

//--------------------------------------------
// 다차원 배열 초기화

int[][] scores = { {95, 80}, {92, 96} };

System.out.println( scores[0][0] ); // 95
System.out.println( scores[1][1] ); // 96

int[][] javaScores = { {95, 80}, {92, 96, 80} };

for(int i = 0; i < javaScores.length; i++) {
for(int k = 0; k < javaScores[i].length; k++) {
System.out.println( javaScores[i][k] );
}
}
</syntaxhighlight>

=== 배열 복사 ===
* 예제 코드
<syntaxhighlight lang="java">
public class ArrayCopyExample {
public static void main(String[] args) {
// for 문 이용

int[] oldIntArray = { 1, 2, 3 };
int[] newIntArray = new int[5];

for(int i = 0; i < oldIntArray.length; i++)
newIntArray[i] = oldIntArray[i];

for(int i = 0; i < newIntArray.length; i++)
System.out.print(newIntArray[i] + "," );

System.out.println();

// arraycopy 이용
String[] oldStrArray = { "java", "array", "copy" };
String[] newStrArray = new String[5];

System.arraycopy(oldStrArray, 0, newStrArray, 0, oldIntArray.length); // p.169 그림 참조

for(int i = 0; i < newStrArray.length; i++)
System.out.print(newStrArray[i] + ", ");

System.out.println();
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
1,2,3,0,0,
java, array, copy, null, null,
</syntaxhighlight>

=== 향상된 for 문 ===
<syntaxhighlight lang="java">
package ch05;

public class ArrayCopyExample {
public static void main(String[] args) {
// for 문 이용

int[] oldIntArray = { 1, 2, 3 };
int[] newIntArray = new int[5];

for(int i = 0; i < oldIntArray.length; i++)
newIntArray[i] = oldIntArray[i];

for(int value : newIntArray) // ← 배열 전체를 스캔하는데 인덱스가 필요없음
System.out.print(value + "," );
System.out.println();

// arraycopy 이용
String[] oldStrArray = { "java", "array", "copy" };
String[] newStrArray = new String[5];

System.arraycopy(oldStrArray, 0, newStrArray, 0, oldIntArray.length);

for(String str : newStrArray) // ← 배열 전체를 스캔하는데 인덱스가 필요없음
System.out.print(str + ", ");
System.out.println();
}
}
</syntaxhighlight>

== 열거 타입(Enumeration Type) ==
* Java에서 이름 짓는 법
<table2 class=wikitable head=top sep=bar align=lll>
종류 | 예 | 설명
변수 | name | 소문자를 이용하여 짓는다. 영어가 아닌 한국어로 변수 이름을 지어도 되지만 관례적으로 로마자를 사용한다.
| myName, myFirstName | 두 개의 단어가 연이어 나오면 새로운 단어의 시작은 대문자로 한다.
메소드 | move() | 소문자로 짓는다. 이름 뒤에 연이어 괄호가 나오기 때문에 이름으로 변수와 메소드를 구분할 수 있다.
| moveLeft() | 두 개의 단어가 연이어 나오면 새로운 단어의 시작은 대문자로 한다.
클래스, 인터페이스, 열거형 | Car | 시작 문자를 대문자로 한다.
| BlueCar | 두 개의 단어가 연이어 나오면 새로운 단어의 시작은 대문자로 한다.
상수(static final) | COLOR | 모든 문자를 대문자로 한다.
| BLUE_COLOR | 두 개의 단어가 연이어 나오면 단어 사이에 _를 붙인다.
</table2>

=== 열거 타입 선언 ===

* 상수를 여러 개 만들고 싶을 때
<syntaxhighlight lang="java">
public enum Week { MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY, SUNDAY };

public enum LoginResult { LOGIN_SUCCESS, LOGIN_FAILED };

Week today;
Week reservationDay;
Week birthday = null;

today = Week.SUNDAY;

if (today == Week.SUNDAY) { // true
</syntaxhighlight>

* Calendar 객체를 이용한 열거형 연습
<syntaxhighlight lang="java">
Calendar now = Calendar.getInstance();

int year = now.get(Calendar.YEAR); // 년
int month = now.get(Calendar.MONTH) + 1; // 월
int day = now.get(Calendar.DAY_OF_MONTH); // 일
int week = now.get(Calendar.DAY_OF_WEEK); // 요일 (1~7)
int hour = now.get(Calendar.HOUR); // 시간
int minute = now.get(Calendar.MINUTE); // 분
int second = now.get(Calendar.SECOND); // 초
</syntaxhighlight>

=== 열거 객체의 메소드 ===
* 열거 객체는 java.lang.Enum 클래스로부터 상속받음.

<table2 class=wikitable head=top sep=bar align=lll>
리턴 타입 | 메소드(매개 변수) | 설명
String | name() | 열거 객체의 문자열을 리턴
int | ordinal() | 열거 객체의 순번(0부터 시작)을 리턴
int | compareTo() | 열거 객체를 비교하여 순번 차이를 리턴
열거 타입 | valueOf(String name) | 주어진 문자열의 열거 객체를 리턴
열거 배열 | values() | 모든 열거 객체들을 배열로 리턴
</table2>

<syntaxhighlight lang="java">
Week today = Week.SUNDAY;

String name = today.name(); // "SUNDAY"

int ordinal = today.ordinal(); // 6. 0부터 시작하여 6번째 데이터라는 뜻임

Week day1 = Week.MONDAY;
Week day2 = Week.WEDNESDAY;

int result1 = day1.compareTo(day2); // -2 (0 - 2)
int result2 = day2.compareTo(day1); // 2 (2 - 0)

Week weekDay = Week.valueOf("SATURDAY"); // Week.SATURDAY

Week[] days = Week.values();
for(Week day : days)
System.out.println(day);
</syntaxhighlight>

[[category:컴퓨터프로그래밍및실습]]

컴퓨터프로그래밍및실습 (2022년)

2022-07-21T12:13:50Z

Swpark: /* 강의 내용 */

== 강의 내용 ==
* [[컴퓨터프로그래밍및실습 (2022년)/0901 | (9/01) 오리엔테이션]]
* [[컴퓨터프로그래밍및실습 (2022년)/0905 | (9/05) 변수와 타입]]

* [[컴퓨터프로그래밍및실습 (2022년)/0908 | (9/08) 연산자]]
* [[컴퓨터프로그래밍및실습 (2022년)/0912 | (9/12) 추석 연휴 – 온라인 강의로 대체. Karel을 이용한 프로그래밍 연습]]

* [[컴퓨터프로그래밍및실습 (2022년)/0915 | (9/15) 조건문, 반복문]]
* [[컴퓨터프로그래밍및실습 (2022년)/0919 | (9/19) 참조 타입]]

* [[컴퓨터프로그래밍및실습 (2022년)/0922 | (9/22) 참조 타입]]
* [[컴퓨터프로그래밍및실습 (2022년)/0926 | (9/26) 클래스 1]]

* [[컴퓨터프로그래밍및실습 (2022년)/0929 | (9/29) 클래스 2]]
* [[컴퓨터프로그래밍및실습 (2022년)/1003 | (10/03) 개천절 – 온라인 강의로 대체. Karel을 이용한 클래스 연습]]

* [[컴퓨터프로그래밍및실습 (2022년)/1006 | (10/06) 상속]]
* [[컴퓨터프로그래밍및실습 (2022년)/1010 | (10/10) 한글날 (대체 휴업일) - 온라인 강의로 대체. Karel을 이용한 상속, 인터페이스 연습]]

* [[컴퓨터프로그래밍및실습 (2022년)/1013 | (10/13) 인터페이스, 중첩 클래스와 중첩 인터페이스]]
* [[컴퓨터프로그래밍및실습 (2022년)/1017 | (10/17) 예외 처리]]

* (10/20) 중간고사
* (10/24) 중간고사

* [[컴퓨터프로그래밍및실습 (2022년)/1027 | (10/27) 기본 API 클래스 1]]
* [[컴퓨터프로그래밍및실습 (2022년)/1031 | (10/31) 기본 API 클래스 2]]

* [[컴퓨터프로그래밍및실습 (2022년)/1103 | (11/03) Thread 1]]
* [[컴퓨터프로그래밍및실습 (2022년)/1107 | (11/07) Thread 2]]

* [[컴퓨터프로그래밍및실습 (2022년)/1110 | (11/10) 제네릭]]
* [[컴퓨터프로그래밍및실습 (2022년)/1114 | (11/14) 람다식]]

* [[컴퓨터프로그래밍및실습 (2022년)/1117 | (11/17) 컬렉션 프레임워크]]
* [[컴퓨터프로그래밍및실습 (2022년)/1121 | (11/21) 스트림과 병렬처리]]

* [[컴퓨터프로그래밍및실습 (2022년)/1124 | (11/24) JavaFX 1]]
* [[컴퓨터프로그래밍및실습 (2022년)/1128 | (11/28) JavaFX 2]]

* [[컴퓨터프로그래밍및실습 (2022년)/1201 | (12/01) JavaFX 3]]
* [[컴퓨터프로그래밍및실습 (2022년)/1205 | (12/05) IO 기반 입출력]]

* (12/8) 기말고사
* (12/12) 기말고사

[[category:컴퓨터프로그래밍및실습]]

컴퓨터프로그래밍및실습 (2022년)/0915

2022-07-21T12:13:25Z

Swpark: Swpark moved page 컴퓨터프로그래밍및실습 (2022년)/0919 to 컴퓨터프로그래밍및실습 (2022년)/0915 without leaving a redirect

== 조건문 ==
{{본문|컴퓨터프로그래밍및실습 (2022년)/조건문}}

{{:컴퓨터프로그래밍및실습 (2022년)/조건문}}

== 반복문 ==
{{본문|컴퓨터프로그래밍및실습 (2022년)/반복문}}

{{:컴퓨터프로그래밍및실습 (2022년)/반복문}}

[[category:컴퓨터프로그래밍및실습]]

컴퓨터프로그래밍및실습 (2022년)

2022-07-21T12:13:13Z

Swpark: /* 강의 내용 */

== 강의 내용 ==
* [[컴퓨터프로그래밍및실습 (2022년)/0901 | (9/01) 오리엔테이션]]
* [[컴퓨터프로그래밍및실습 (2022년)/0905 | (9/05) 변수와 타입]]

* [[컴퓨터프로그래밍및실습 (2022년)/0908 | (9/08) 연산자]]
* [[컴퓨터프로그래밍및실습 (2022년)/0912 | (9/12) 추석 연휴 – 온라인 강의로 대체. Karel을 이용한 프로그래밍 연습]]

* [[컴퓨터프로그래밍및실습 (2022년)/0915 | (9/15) 조건문, 반복문]]
* [[컴퓨터프로그래밍및실습 (2022년)/0919 | (9/19) 조건문, 반복문]]

* [[컴퓨터프로그래밍및실습 (2022년)/0922 | (9/22) 참조 타입]]
* [[컴퓨터프로그래밍및실습 (2022년)/0926 | (9/26) 클래스 1]]

* [[컴퓨터프로그래밍및실습 (2022년)/0929 | (9/29) 클래스 2]]
* [[컴퓨터프로그래밍및실습 (2022년)/1003 | (10/03) 개천절 – 온라인 강의로 대체. Karel을 이용한 클래스 연습]]

* [[컴퓨터프로그래밍및실습 (2022년)/1006 | (10/06) 상속]]
* [[컴퓨터프로그래밍및실습 (2022년)/1010 | (10/10) 한글날 (대체 휴업일) - 온라인 강의로 대체. Karel을 이용한 상속, 인터페이스 연습]]

* [[컴퓨터프로그래밍및실습 (2022년)/1013 | (10/13) 인터페이스, 중첩 클래스와 중첩 인터페이스]]
* [[컴퓨터프로그래밍및실습 (2022년)/1017 | (10/17) 예외 처리]]

* (10/20) 중간고사
* (10/24) 중간고사

* [[컴퓨터프로그래밍및실습 (2022년)/1027 | (10/27) 기본 API 클래스 1]]
* [[컴퓨터프로그래밍및실습 (2022년)/1031 | (10/31) 기본 API 클래스 2]]

* [[컴퓨터프로그래밍및실습 (2022년)/1103 | (11/03) Thread 1]]
* [[컴퓨터프로그래밍및실습 (2022년)/1107 | (11/07) Thread 2]]

* [[컴퓨터프로그래밍및실습 (2022년)/1110 | (11/10) 제네릭]]
* [[컴퓨터프로그래밍및실습 (2022년)/1114 | (11/14) 람다식]]

* [[컴퓨터프로그래밍및실습 (2022년)/1117 | (11/17) 컬렉션 프레임워크]]
* [[컴퓨터프로그래밍및실습 (2022년)/1121 | (11/21) 스트림과 병렬처리]]

* [[컴퓨터프로그래밍및실습 (2022년)/1124 | (11/24) JavaFX 1]]
* [[컴퓨터프로그래밍및실습 (2022년)/1128 | (11/28) JavaFX 2]]

* [[컴퓨터프로그래밍및실습 (2022년)/1201 | (12/01) JavaFX 3]]
* [[컴퓨터프로그래밍및실습 (2022년)/1205 | (12/05) IO 기반 입출력]]

* (12/8) 기말고사
* (12/12) 기말고사

[[category:컴퓨터프로그래밍및실습]]

컴퓨터프로그래밍및실습 (2022년)/0908

2022-07-21T12:12:45Z

Swpark: Swpark moved page 컴퓨터프로그래밍및실습 (2022년)/0915 to 컴퓨터프로그래밍및실습 (2022년)/0908 without leaving a redirect

== 연산자와 연산식 ==
<table2 class=wikitable head=top sep=semicolon align=clccl>
연산자 종류 ; 연산자 ; 피연산자 수 ; 산출값 ; 기능 설명 ; 예
산술 ; +, -, *, /, % ; 이항 ; 숫자 ; 사칙연산 및 나머지 연산 ; 2 + 3
부호 ; +, - ; 단항 ; 숫자 ; 음수와 양수의 부호 ; -2
문자열 ; + ; 이항 ; 문자열 ; 두 문자열을 연결 ; "abc" + "def"
대입 ; =, +=, -=, *=, /=, %=, &= <br/>^=, !=, <<=, >>=, >>>= ; 이항 ; 다양 ; 우변의 값을 좌변의 변수에 대입 ; i += 3
증감 ; ++, -- ; 단항 ; 숫자 ; 1만큼 증가/감소 ; i++
비교 ; ==, !=, >, <, >=, <=<br/>instanceof ; 이항 ; boolean ; 값의 비교 ; i > j
논리 ; !, &, |, &&, <nowiki>||</nowiki> ; 단항<br/>이항 ; boolean ; 논리적 NOT, AND, OR 연산 ; !(a < 3), (a < 3) && (a > 1)
조건 ; (조건식) ? A : B ; 삼항 ; 다양 ; 조건식에 따라 A 또는 B 중 하나를 선택 ; a = (x > y) ? x : y
비트 ; ~, &, |, ^ ; 단항<br/>이항 ; 숫자<br/>boolean ; 비트 NOT, AND, OR, XOR 연산 ; ~a, a & b
쉬프트 ; >>, <<, >>> ; 이항 ; 숫자 ; 비트를 좌측/우측으로 밀어서 이동 ; a >> 3
</table2>

== 연산의 방향과 우선순위 ==

<syntaxhighlight lang="java">
x > 0 && y < 0 // 어떤 순으로 연산될 것인가?

v1 = 100 * 2 / 3 % 5; // v1 = (((100 * 2) / 3) % 5)

a = b = c = 5; // (a = (b = (c = 5)));
</syntaxhighlight>

* 연산자 우선순위
<table2 class=wikitable head=top sep=semicolon align="lcc">
연산자 ; 연산 방향 ; 우선 순위
++, --, +, -, ~, ! ; ← ; 높음
*, /, % ; → ;
+, - ; → ;
<<, >>, >>> ; → ;
<, >, <=, >=, instanceof ; → ;
==, != ; → ;
& ; → ;
^ ; → ;
| ; → ;
&& ; → ;
<nowiki>||</nowiki> ; → ;
? : ; → ;
=, +=, -=, *=, /=, %=, &=, ^=, |=, <<=, >>=, >>>= ; ← ; 낮음
</table2>

<syntaxhighlight lang="java">
int var1 = 1;
int var2 = 3;
int var3 = 2;
int result = var1 + var2 * var3;

int result = (var1 + var2) * var3;
</syntaxhighlight>

== 단항 연산자 ==

=== 부호 연산자 ===
<syntaxhighlight lang="java">
int i1 = +100; // 부호 + (양수)
int i2 = -100; // 부호 - (음수)
double d1 = +3.14;

int x = -100;
int result1 = -x; // OK

short s1 = 100;
short s2 = -s1; // 오류. 정수 연산은 int로 바뀌기 때문
int i3 = -s1; // OK
</syntaxhighlight>

=== 증감 연산자(++, --) ===
<syntaxhighlight lang="java">
++i;
i++;

--i;
i--;

//------------------
int x = 10;
int z;

z = ++x;

// 위 코드는 아래와 동일
x = x + 1;
z = x;

//-------------------
int x = 10;
int z;

z = x++;

// 위 코드는 아래와 동일
z = x;
x = x + 1;

//------------------
int x = 10;
int z;

z = --x;

// 위 코드는 아래와 동일
x = x - 1;
z = x;

//-------------------
int x = 10;
int z;

z = x--;

// 위 코드는 아래와 동일
z = x;
x = x - 1;

</syntaxhighlight>

=== 논리 부정 연산자 ! ===
<syntaxhighlight lang="java">
boolean play = true;

play = !play;
</syntaxhighlight>

=== 비트 반전 연산자 ~ ===
<syntaxhighlight lang="java">
byte v1 = 10; // 00001010
byte v2 = ~v1; // 오류. 정수 종류의 연산은 자동으로 int로 변환됨

int i2 = ~v1; // OK. 11111111 11111111 11111111 11110101

int i3 = ~v1 + 1; // -10 (2의 보수)

System.out.println( Integer.toBinaryString(i3) );
</syntaxhighlight>

== 이항 연산잔 ==
<syntaxhighlight lang="java">
</syntaxhighlight>

=== 산술 연산자 ===
<syntaxhighlight lang="java">
byte byte1 = 1;
byte byte2 = 1;
byte byte3 = byte1 + byte2; // 오류. 정수 타입의 산술 연산은 32비트인 int로 형변환됨

int result1 = byte1 + byte2; // OK

int int1 = 10;
int int2 = 4;
int result2 = int1 / int2; // 2
double result3 = int1 / int2; // 2.0

double result4 = (double) int1 / int2; // 2.5

char c1 = 'A' + 1; // OK 'B'
char c2 = 'A';
char c3 = c2 + 1; // 컴파일 에러. c2가 int로 형변환됨
</syntaxhighlight>

==== 오버플로우 ====
<syntaxhighlight lang="java">
int x = 1000000;
int y = 1000000;

int z = x * y; // z에는 오버플로우되어 -727379968와 같이 알 수 없는 값이 저장됨

//-------------

long x = 1000000;
long y = 1000000;

long z = x * y; // OK
</syntaxhighlight>

==== 정확한 계산은 정수 사용 ====
<syntaxhighlight lang="java">
int apple = 1;
double priceUnit = 0.1;
int number = 7;

double result = apple - number * priceUnit; // 0.3이 되어야 할 것 같지만 아님. 왜?

System.out.println(result); // 0.29999999999999993
</syntaxhighlight>

==== NaN과 Infinity 연산 ====
<syntaxhighlight lang="java">
5 / 0 → ArithmeticException 예외 발생
5 % 0 → ArithmeticException 예외 발생

5 / 0.0 → Infinity
5 % 0.0 → NaN

double val = Double.valueOf("NaN"); // NaN 입력

if (Double.isNaN(val)) { // NaN인지 검사
System.out.println("OOPS");
}
</syntaxhighlight>

=== 문자열 연결 연산자 (+) ===
<syntaxhighlight lang="java">
String str1 = "JDK" + 6.0; // "JDK6.0"
String str2 = str1 + " 특징"; // "JDK6.0 특징"

String str3 = "JDK" + 3 + 3.0; // ("JDK" + 3) + 3.0 → ("JDK" + "3") + 3.0 → "JDK3" + "3.0" → "JDK33.0"
String str4 = 3 + 3.0 + "JDK"; // (3 + 3.0) + "JDK" → (3.0 + 3.0) + "JDK" → "6.0" + "JDK" → "6.0JDK"
</syntaxhighlight>

=== 비교 연산자 ===
<syntaxhighlight lang="java">
int num1 = 10;
int num2 = 10;

boolean result1 = num1 == num2;
boolean result2 = (num1 != num2);
boolean result3 = (num1 <= num2);

char char1 = 'A';
char char2 = 'B';

boolean result4 = (char1 < char2);

//------------------

'A' == 65 → true
3 == 3.0 → true
0.1 == 0.1f → false // 2진수로 변환하기 때문에 정확한 0.1 표현이 안됨.
// 0.1을 2진수로 바꾸었다가 10진수로 변환하면 0.10000000149011612와 같이 표현됨

//------------------

String strVar1 = "신용권";
String strVal2 = "신용권";
String strVal3 = new String("신용권");

strVal1 == strVal2 → true
strVar2 == strVal3 → false

strVal1.equals(strVal2) → true
strVal2.equals(strVal3) → true // 내용으로 비교하기 때문
</syntaxhighlight>

=== 논리 연산자 ===

<table2 class=wikitable head=top sep=semicolon align=cccc>
구분 ; 연산식 ; 설명
AND ; && ; 모두 참일 때만 참
OR ; <nowiki>||</nowiki> ; 모두 거짓일 때만 거짓
XOR ; ^ ; 배타적 논리합. 하나는 true, 다른 하나는 false 일 때만 true
NOT ; ! ; 피연산자의 논리값을 바꿈
</table2>

<syntaxhighlight lang="java">
int charCode = 'A';

if (charCode >= 'A' && charCode <= 'Z') {
System.out.println("대문자입니다");
}
</syntaxhighlight>

=== 비트 연산자 ===

==== 비트 논리 연산자 ====
<syntaxhighlight lang="java">
byte num1 = 45;
byte num2 = 25;

byte result1 = num1 & num2;
byte result2 = num1 | num2;
byte result3 = num1 ^ num2;
byte result4 = ~num1;
</syntaxhighlight>

<table2 class=wikitable head=top sep=semicolon align=llcl>
변수 ; 값 ; 십진수 ; 연산
num1 ; 00101101 ; 45 ;
num2 ; 00011001 ; 25 ;
result1 ; 00001001 ; 9 ; num1 & num2
result2 ; 00111101 ; 61 ; num1 <nowiki>|</nowiki> num2
result3 ; 00110100 ; 52 ; num1 ^ num2
result4 ; 11010010 ; -46 ; ~num1
</table2>

==== 비트 이동 연산자 ====
<syntaxhighlight lang="java">
int result1 = 1 << 3;
int result2 = -8 >> 3;
int result3 = -8 >>> 3;
</syntaxhighlight>

<table2 class=wikitable head=top sep=bar align=lllll>
변수 | 값 | 연산 | 이진값 | 비고
| 1 | | 00000000 00000000 0000000 00000001 |
result1 | 8 | 1 << 3 | 00000000 00000000 0000000 00001000 | 2<sup>3</sup>
| -8 | | 11111111 11111111 1111111 11111000 |
resutl2 | -1 | -8 >> 3 | 11111111 11111111 1111111 11111111 |
result3 | 536870911 | -8 >>> 3 | 00011111 11111111 1111111 11111111 |
</table2>

=== 대입 연산자 ===
* 예제 코드
<syntaxhighlight lang="java">
public class AssignmentOperatorExample {
public static void main(String[] args) {
int result = 0;

result += 10; // result = result + 10;
System.out.println(result);

result -= 5; // result = result - 10;
System.out.println(result);

result *= 3; // result = result * 3;
System.out.println(result);

result /= 5; // result = result / 5;
System.out.println(result);

result %= 3;
System.out.println(result);
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
10
5
15
3
0
</syntaxhighlight>

* 유용한 경우
<syntaxhighlight lang="java">
int result *= x + y * z; // result = result * (x + y * z);
</syntaxhighlight>

== 삼항 연산자 ==
<syntaxhighlight lang="java">
int score = 95;

char grade = (score > 90) ? 'A' : 'B';

// 아래와 동일한 의미의 코드이다.

int score = 95

char grade;
if (score > 90)
grade = 'A';
else
grade = 'B';
</syntaxhighlight>

[[category:컴퓨터프로그래밍및실습]]

컴퓨터프로그래밍및실습 (2022년)

2022-07-21T12:12:32Z

Swpark: /* 강의 내용 */

== 강의 내용 ==
* [[컴퓨터프로그래밍및실습 (2022년)/0901 | (9/01) 오리엔테이션]]
* [[컴퓨터프로그래밍및실습 (2022년)/0905 | (9/05) 변수와 타입]]

* [[컴퓨터프로그래밍및실습 (2022년)/0908 | (9/08) 연산자]]
* [[컴퓨터프로그래밍및실습 (2022년)/0912 | (9/12) 추석 연휴 – 온라인 강의로 대체. Karel을 이용한 프로그래밍 연습]]

* [[컴퓨터프로그래밍및실습 (2022년)/0915 | (9/15) 연산자]]
* [[컴퓨터프로그래밍및실습 (2022년)/0919 | (9/19) 조건문, 반복문]]

* [[컴퓨터프로그래밍및실습 (2022년)/0922 | (9/22) 참조 타입]]
* [[컴퓨터프로그래밍및실습 (2022년)/0926 | (9/26) 클래스 1]]

* [[컴퓨터프로그래밍및실습 (2022년)/0929 | (9/29) 클래스 2]]
* [[컴퓨터프로그래밍및실습 (2022년)/1003 | (10/03) 개천절 – 온라인 강의로 대체. Karel을 이용한 클래스 연습]]

* [[컴퓨터프로그래밍및실습 (2022년)/1006 | (10/06) 상속]]
* [[컴퓨터프로그래밍및실습 (2022년)/1010 | (10/10) 한글날 (대체 휴업일) - 온라인 강의로 대체. Karel을 이용한 상속, 인터페이스 연습]]

* [[컴퓨터프로그래밍및실습 (2022년)/1013 | (10/13) 인터페이스, 중첩 클래스와 중첩 인터페이스]]
* [[컴퓨터프로그래밍및실습 (2022년)/1017 | (10/17) 예외 처리]]

* (10/20) 중간고사
* (10/24) 중간고사

* [[컴퓨터프로그래밍및실습 (2022년)/1027 | (10/27) 기본 API 클래스 1]]
* [[컴퓨터프로그래밍및실습 (2022년)/1031 | (10/31) 기본 API 클래스 2]]

* [[컴퓨터프로그래밍및실습 (2022년)/1103 | (11/03) Thread 1]]
* [[컴퓨터프로그래밍및실습 (2022년)/1107 | (11/07) Thread 2]]

* [[컴퓨터프로그래밍및실습 (2022년)/1110 | (11/10) 제네릭]]
* [[컴퓨터프로그래밍및실습 (2022년)/1114 | (11/14) 람다식]]

* [[컴퓨터프로그래밍및실습 (2022년)/1117 | (11/17) 컬렉션 프레임워크]]
* [[컴퓨터프로그래밍및실습 (2022년)/1121 | (11/21) 스트림과 병렬처리]]

* [[컴퓨터프로그래밍및실습 (2022년)/1124 | (11/24) JavaFX 1]]
* [[컴퓨터프로그래밍및실습 (2022년)/1128 | (11/28) JavaFX 2]]

* [[컴퓨터프로그래밍및실습 (2022년)/1201 | (12/01) JavaFX 3]]
* [[컴퓨터프로그래밍및실습 (2022년)/1205 | (12/05) IO 기반 입출력]]

* (12/8) 기말고사
* (12/12) 기말고사

[[category:컴퓨터프로그래밍및실습]]

컴퓨터프로그래밍및실습 (2022년)/0905

2022-07-21T12:11:49Z

Swpark: Swpark moved page 컴퓨터프로그래밍및실습 (2022년)/0908 to 컴퓨터프로그래밍및실습 (2022년)/0905 without leaving a redirect

== 변수 ==
* 변수란 기억 장소(메모리)에 대한 별칭이다.

=== 변수의 선언 ===
<syntaxhighlight lang="java">
int age; // 정수(int) 값을 저장할 수 있는 age 변수 선언
double value; // 실수(double) 값을 저장할 수 있는 value 변수 선언

int x, y, z; // 여러 개를 선언할 수 있음
</syntaxhighlight>

=== 변수 이름을 붇이는 규칙 ===
# 첫 번째 글자는 문자이거나 $, _ 이어야 하고 숫자로 시작할 수 없다. (필수)
# 영어 대소문자가 구분된다. (필수)
# 첫 문자는 영어 소문자로 시작하되, 다른 단어가 붙을 경우 첫 문자는 대문자로 한다. (관례) (maxSpeed, firstName, carBodyColor)
# 문자 수(길이)의 제한은 없다.
# 자바 예약어는 사용할 수 없다. (필수)
<table2 class=wikitable head=top sep=bar align=ll>
분류 | 예약어
기본 데이터 타입 | boolean, byte, char, short, int, long, float, double
접근 지정자 | private, protected, public
클래스와 관련된 것 | class, abstract, interface, extends, implements, enum
객체와 관련된 것 | new, instanceof, this, super, null
메소드와 관련된 것 | void, return
제어문과 관련된 것 | if, else, switch, case, default, for, do, while, break, continue
논리값 | true, false
예외 처리와 관련된 것 | try, catch, finally, throw, throws
기타 | transient, volatile, package, import, synchronized, native, final, static, strictfp, assert
</table2>

=== 변수의 사용 ===
<syntaxhighlight lang="java">
int score; // 변수 선언
score = 90; // 값 저장

int score = 90; /// 선언과 동시에 값 저장
</syntaxhighlight>

=== Literal ===
* 리터럴(literal) : 소스 코드 내에서 직접 작성된 값
** 정수 리터럴 : 0, 75, -100 (10진수), 02, -04 (8진수), 0x5, 0xA, 0xB3, 0xac08 (16진수)
** 실수 리터럴 : 0.25, -3.14 (10진수), 5E7, 0.12E-5 (0.12×10<sup>-5</sup>)
** 문자 리터럴 : 'A', '한', '\t', '\tn'
<table2 class=wikitable sep=bar head=top align=lll>
Escape 문자 | 용도 | Unicode
\t | 수평 탭 | 0x0009
\n | 줄 바꿈 | 0x000A
\r | 리턴 | 0x000D
\" | "(큰 따옴표) | 0x0022
\ | '(작은 따옴표) | 0x0027
\\ | \ | 0x005C
\u16진수 | 16진수에 해당하는 유니코드 | 0x0000 ~ 0xFFFF
</table2>

=== 변수의 초기화 ===
* 초기화하지 않고 사용하면 오류
<syntaxhighlight lang="java">
int value;
int result = value + 10; // value 값을 초기화하지 않아 오류가 남
</syntaxhighlight>

* 초기화하여 사용한 예
<syntaxhighlight lang="java">
int value = 30;
int result = value + 10;
</syntaxhighlight>

=== 변수의 사용 범위 ===
* 변수는 블록 범위 내에서 정의, 사용할 수 있음

<syntaxhighlight lang="java">
public class VariableScopeExample {
public static void main(String[] args) {
int v1 = 15;
if (v1 > 10) {
int v2 = v1 - 10;
}
int v3 = v1 + v2 + 5; // v2 변수를 사용할 수 없기 때문에 컴파일 에러가 생김
}
}
</syntaxhighlight>

== 데이터 타입 (Data Type) ==

=== 기본(원시: primitive) 타입 ===
<table2 class=wikitable head=top sep=bar align=llll>
값의 종류 | 기본 타입 | 메모리 사용 크기 | 저장되는 값의 범위
정수 | byte | 1 byte (8 bits) | -2<sup>7</sup> ~ 2<sup>7</sup>-1 (-128 ~ 127)
| char | 2 bytes (16 bits) | 0 ~ 2<sup>16</sup>-1 (\u0000 ~ \uFFFF, 0 ~ 65535)
| short | 2 bytes (16 bits) | -2<sup>15</sup> ~ 2<sup>15</sup>-1 (-32,768 ~ 32,767)
| int | 4 bytes (32 bits) | -2<sup>31</sup> ~ 2<sup>31</sup>-1 (-2,147,483,648 ~ 2,147,483,647)
| long | 8 bytes (64 bits) | -2<sup>63</sup> ~ 2<sup>63</sup>-1
실수 | float | 4 bytes (32 bits) | (+/-)1.4E-45 ~ (+/-)13.4028235E38
| double | 8 bytes (64 bits) | (+/-)4.9E-324 ~ (+/-)1.7976931348623157E308
논리 | boolean | 1 byte (8 bits) | true, false
</table2>

=== 정수 타입 ===
* byte, char, short, int, long
* 음수는 2의 보수로 표현함

==== byte ====
<table2 head=top sep=bar align=lr>
이진수 | 십진수
01111111 | 127
01111110 | 128
... | ...
00000001 | 1
00000000 | 0
11111111 | -1
11111110 | -2
... | ...
10000001 | -127
10000000 | -128
</table2>

* 예제 코드
<syntaxhighlight lang="java">
public class ByteExample {
public static void main(String[] args) {
byte var1 = -128;
byte var2 = -30;
byte var3 = 0;
byte var4 = 30;
byte var5 = 127;
// byte var6 = 128; // 컴파일 에러

System.out.println(var5);
var5++;
System.out.println(var1); // var1은 왜 음수가 되는가?
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
127
-128
</syntaxhighlight>

==== char ====
* 예제 코드
<syntaxhighlight lang="java">
public class CharExample {
public static void main(String[] args) {
char c1 = 'A';
char c2 = 65;
char c3 = '\u0041'; // 10진수로 표현하면 65

char c4 = '가';
char c5 = 44032;
char c6 = '\uac00'; // 10진수로 표현하면 44032

int uniCode = c1;

System.out.println(c1);
System.out.println(c2);
System.out.println(c3);
System.out.println(c4);
System.out.println(c5);
System.out.println(c6);
System.out.println(uniCode);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
A
A
A
가
가
가
65
</syntaxhighlight>

* String과 char
<syntaxhighlight lang="java">
String name = "홍길동";

char c1 = ''; // 컴파일 에러
char c2 = ' '; // 에러가 나지 않음. 스페이스 문자

String str = ""; // 빈 문자열
</syntaxhighlight>

==== int ====
* 10진수로 10인 정수(int)의 경우 4 바이트로 다음과 같이 표현
<table2 class=wikitable sep=bar align=cccc>
00000000 | 00000000 | 00000000 | 00001010
1 byte | 1 byte | 1 byte | 1 byte
</table2>

* 예제 코드 (int & long)
<syntaxhighlight lang="java">
public class IntExample {
public static void main(String[] args) {
int var1 = 10; // 10진수로 저장
int var2 = 012; // 8진수로 저장
int var3 = 0xA; // 16진수로 저장

System.out.println(var1);
System.out.println(var2);
System.out.println(var3);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
10
10
10
</syntaxhighlight>

==== long ====
* 예제 코드
<syntaxhighlight lang="java">
public class LongExample {
public static void main(String[] args) {
long var1 = 10;
long var2 = 20L;
// long var3 = 1_0000_0000_0000; // 컴파일 에러
long var4 = 1_0000_0000_0000L;

System.out.println(var1);
System.out.println(var2);
System.out.println(var4);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
10
20
1000000000000
</syntaxhighlight>

=== 실수 타입(float & double) ===
* + m × 10<sup>n</sup>
** + : 부호
** m : 가수(mantissa)
** n : 지수(exponent)

<table2 class=wikitable head=top sep=bar align=ccrcccc>
타입 | 부호 | 지수 | 가수 | 비트 수 | 바이트 수
float | 1 bit | 8 bit | 23 bit | 32 bit | 4 byte
double | 1 bit | 11 bit | 52 bit | 64 bit | 8 byte
</table2>

* 예제 코드
<syntaxhighlight lang="java">
public class FloatDoubleExample {
public static void main(String[] args) {
// 실수값 저장
double var1 = 3.14;
// float var2 = 3.14; // 컴파일 에러 (Type mismatch)
float var3 = 3.14F;

// 정밀도 테스트
double var4 = 0.1234567890123456789;
float var5 = 0.1234567890123456789F;

System.out.println("var1: " + var1);
System.out.println("var3: " + var3); // 교재 오류
System.out.println("var4: " + var4);
System.out.println("var5: " + var5);

// e 사용하기
int var6 = 3_000_000;
double var7 = 3e6;
float var8 = 3e6F;
double var9 = 2e-3;

System.out.println("var6: " + var6);
System.out.println("var7: " + var7);
System.out.println("var8: " + var8);
System.out.println("var9: " + var9);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
var1: 3.14
var3: 3.14
var4: 0.12345678901234568
var5: 0.12345679
var6: 3000000
var7: 3000000.0
var8: 3000000.0
var9: 0.002
</syntaxhighlight>

=== 논리 타입(boolean) ===
<syntaxhighlight lang="java">
boolean stop = true;
if (stop) {
System.out.println("중지합니다.");
} else {
System.out.println("시작합니다.");
}
</syntaxhighlight>

== 타입 변환 ==

=== 자동 변환 타입 ===
* 큰 타입에서 작은 타입으로의 변환
* byte(1) < short(2) < int(4) < long(8) < float(4) < double(8)

<syntaxhighlight lang="java">
byte byteValue = 200;
int intValue = byteValue; // 자동 형 변환이 일어난다. 00000000 00000000 00000000 00001010 <- 00001010

int intValue = 200;
double doubleValue = intValue; // 200.0 <- 200

char charValue = 'A';
int intValue = charValue; // 65 <- 'A'

byteValue = 65;
charValue = byteValue; // 컴파일 오류. 1 바이트 크기의 데이터를 2 바이트 크기의 메모리에 저장 시도
char charData = (char) byteData; // 강제 형변환
</syntaxhighlight>

=== 강제 타입 변환 ===
* 큰 크기의 타입에서 작은 크기의 타입에 대입할 경우

<syntaxhighlight lang="java">
// 값을 잃음
int intValue = 103029770; // 00000100 00100100 00011100 00001010
byte byteValue = (byte) intValue; // 00001010 <- 00000100 00100100 00011100 00001010

// 값을 잃지 않음
intValue = 10;
byteValue = (byte) intValue; // 00001010 <- 00000000 00000000 00000000 00001010

long longValue = 300;
int intValue = (int) longValue;

intValue = 'A';
char charValue = (char) intValue; // 문자는 2 바이트 값이므로 값 유지됨
System.out.println(charValue);

double doubleValue = 3.14;
intValue = (int) doubleValue; // 3 <-- 3.14
</syntaxhighlight>

* 최대값 & 최소값
<table2 class=wikitable head=top sep=bar align=lll>
기본 타입 | 최대값 상수 | 최소값 상수
byte | Byte.MAX_VALUE | Byte.MIN_VALUE
short | Short.MAX_VALUE | Short.MIN_VALUE
int | Integer.MAX_VALUE | Integer.MIN_VALUE
long | Long.MAX_VALUE | Long.MIN_VALUE
float | Float.MAX_VALUE | Float.MIN_VALUE
double | Double.MAX_VALUE | Double.MIN_VALUE
</table2>

==== 정수 타입을 실수 타입으로 변환할 때 정밀도 손실 발생 ====
* 예제 코드
<syntaxhighlight lang="java">
public class FromIntToFloatDouble {
public static void main(String[] args) {
int num1 = 123_456_780;

float num2 = num1;
int num3 = (int) num2; // 정밀도 손실 발생

int result = num1 - num3;
System.out.println(result);

double num4 = num1;
int num5 = (int) num4; // 정밀도 손실 없음

result = num1 - num5;
System.out.println(result);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
-4
0
</syntaxhighlight>

=== 연산식에서의 자동 타입 변환 ===
* 4 바이트 보다 작은 정수(byte, char, short)는 4 바이트 크기의 int로 변환된 후 연산된다.
* 정수 연산에서 피연산자 중 하나가 long이면 long으로 변환된 후 연산된다.
* float 끼리의 연산은 float이지만, 피연산자 중 하나가 double이면 double로 변환된 후 연산된다.
* 실수 리터럴은 double이다.

* 예제 코드
<syntaxhighlight lang="java">
public class OperationPromotionExample {
public static void main(String[] args) {
byte byteValue1 = 10;
byte byteValue2 = 20;
// byte byteValue3 = byteValue1 + byteValue2; // 컴파일 에러. byte는 int로 변환된 후 연산됨
int intValue1 = byteValue1 + byteValue2;
System.out.println(intValue1);

char charValue1 = 'A';
char charValue2 = 1;
// char charValue3 = charValue1 + charValue2; // 컴파일 에러. char는 int로 변환된 후 연산됨
int intValue2 = charValue1 + charValue2;
System.out.println("유니코드=" + intValue2);
System.out.println((char)intValue2);

int intValue3 = 10;
int intValue4 = intValue3 / 4;
System.out.println(intValue4);

int intValue5 = 10;
// int intValue6 = 10 / 4.0; // 컴파일 에러
double doubleValue = intValue5 / 4.0;
System.out.println(doubleValue);
}
}
</syntaxhighlight>

* 실행 결과
<syntaxhighlight lang="text">
30
유니코드=66
B
2
2.5
</syntaxhighlight>

[[category:컴퓨터프로그래밍및실습]]