# Java 安裝教學 (JDK/JRE 19 + Eclipse) [含 JavaFX 安裝]

Java 程式的開發需要同時安裝 JRE (Java Runtime Environment，Java 執行環境) 與 JDK (Java Development Kit，Java 開發工具包)。前者 JRE 代表 Java 的執行環境，只要是以 Java 語言開發的應用程式，都需要安裝 JRE，這樣 Java 才可以執行；而後者 JDK 則是 Java 的開發套件，如果是作為開發者需要撰寫 Java 程式，那就必須在電腦中安裝 JDK 並設定好環境變數，Windows 才可順利編譯我們所撰寫的 Java 程式。

本文教學所安裝的 JDK/JRE 版本為 19.0.2，並以 Eclipse 來進行程式開發，請同學的環境建立以 Java 19 為主 (Windows 10/11)。

# <font color = "red">**開始前請於此[連結](https://drive.google.com/drive/folders/1VUd-Cw-enW2fpJvveWsdlT0kiwC-Xx25?usp=sharing)中下載相關執行檔。**</font>

<br/>

## I. 確認是否曾經安裝過 Java 環境

##### Step 1

以系統管理員身份開啟命令提示字元

<img src="https://hackmd.io/_uploads/HkMe2513a.png" align = "left" style="zoom: 80%;" />

<br/>
<br/>

##### Step 2

輸入以下命令，檢查電腦中是否已存在 JDK 或 JRE 的安裝

java -version
javac -version

<img src="https://hackmd.io/_uploads/Bkrq3c13T.png" align = "left" style="zoom:80%;" />

如上圖，有出現版本號則代表原電腦中已安裝過 Java，請卸載後再開始安裝 Java 19。

若沒有出現版本號(如下圖)，則直接跳到第 III 步進行 JDK 的安裝與設定。

<img src="https://hackmd.io/_uploads/Hy_rA9y2p.png" style="zoom:80%;" align = "left" />

<br/>
<br/>
<br/>
<br/>

## II. 卸載已安裝過的 Java

##### Step 1

點擊 Java Uninstall Tool 並以系統管理員身份執行它 (點選並執行之前要先把其他所有應用程式及瀏覽器等全部關掉)。

<img src="https://hackmd.io/_uploads/rJc325k2p.png" align = "left" style="zoom:80%;" />

<br/>
<br/>

##### Step 2

點選同意。

<img src="https://hackmd.io/_uploads/r1d1pq1na.png" style="zoom:80%;" align = "left" />

<br/>
<br/>

##### Step 3

卸載成功後請點選 "關閉"。

<img src="https://hackmd.io/_uploads/BJYET9y2p.png" style="zoom:65%;" align = "left" />

<br/>
<br/>

##### Step 4

重新開啟命令提示字元，再次輸入以下命令，檢查電腦中是否已存在 JDK 或 JRE 的安裝

java -version
javac -version

<img src="https://hackmd.io/_uploads/ByJKa9y2T.png" align = "left" style="zoom:80%;" />

*若是仍存在其他版本的 Java，請繼續往下解除相關安裝。*

<br/>

##### Step 5

於終端機中輸入以下命令，查詢目前有安裝 Java 的應用程式。

where java

<img src="https://hackmd.io/_uploads/rJRqT5k2a.png" style="zoom:80%;" align = "left" />

如上圖所示，目前有使用到 Java 的應用程式為 RedHat。

<br/>

##### Step 6

進入控制台，點選解除安裝程式，選擇該應用程式並解除安裝。

<img src="https://hackmd.io/_uploads/ryGpa5k2p.png" style="zoom:80%;" align = "left"/>

<img src="https://hackmd.io/_uploads/B1WkC9Jh6.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 7

重新開啟命令提示字元，再次輸入以下命令，檢查電腦中是否已存在 JDK 或 JRE 的安裝

java -version
javac -version

<img src="https://hackmd.io/_uploads/rkrg0ck3T.png" style="zoom:80%;" align = "left"/>

如上圖所示，此時電腦中的 JDK 與 JRE 均已卸載成功。

<br/>
<br/>

## III. 安裝 JDK/JRE 19

*Mac 請參考以下連結：
https://blog.csdn.net/weixin_61536532/article/details/126791735*

在開始安裝前，請先確保電腦內並未安裝任何版本的 JDK/JRE：

java -version
javac -version

<img src="https://hackmd.io/_uploads/rkKWC5Jha.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 1

下載 JDK/JRE 安裝檔，點選並以系統管理員身份執行。

<img src="https://hackmd.io/_uploads/rkGvCcyn6.png" align = "left" style="zoom:80%;" />

<br/>
<br/>

##### Step 2

點選 "Next" 執行下一步。

<img src="https://hackmd.io/_uploads/rkGORc1np.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 3

**請勿變更預設的安裝路徑(除非路徑中有中文)。<font color = "red">(請把這段安裝路徑記錄下來，等下環境變數設定時會用到)</font>**

如果預設安裝路徑裡面有中文，請在 C 槽底下新增一個空資料夾，命名為 Java，選擇這個資料夾為安裝路徑（同樣要記下來，等下環境變數設定會用到）。

<img src="https://hackmd.io/_uploads/SkNc09y3T.png" style="zoom:80%;" align = "left" />

<br/>
<br/>

##### Step 4

完成安裝，關閉安裝程式視窗。

<img src="https://hackmd.io/_uploads/r11NJokna.png" style="zoom:80%;" align = "left" />

<br/>
<br/>
<br/>

## IV. 於 Windows 系統設定環境變數

##### Step 1

按下鍵盤中的 "Win + R"，開啟 "執行" 對話框，輸入 ```sysdm.cpl```，點選 "確定" 以開啟系統內容視窗。

<img src="https://hackmd.io/_uploads/rkmbgo1hp.png" style="zoom:80%;" align = "left" />

<br/>
<br/>

##### Step 2

在系統內容視窗中，於 "進階" 頁面中選擇 "環境變數"。

<img src="https://hackmd.io/_uploads/r1eGgsk2a.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 3

在 "系統變數" 區域中，點選 "新增" 來新增一筆系統變數。

<img src="https://hackmd.io/_uploads/HJ1Qlsy3T.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

如下圖所示，請在變數名稱欄位中輸入```JAVA_HOME```，而變數值欄位則填入剛剛 JDK/JRE 19 的安裝路徑 ([步驟 III 中 Step 3](#Step-31) 記錄下的那個)。

<img src="https://hackmd.io/_uploads/SkmNxskna.png" align = "left" />

<br/>
<br/>

如下圖所示，可以看到 ```JAVA_HOME``` 變數新建成功。

<img src="https://hackmd.io/_uploads/ryrrli13a.png" align = "left" style="zoom:80%;" />

<br/>
<br/>

##### Step 4

在 "系統變數" 區域中，找到名為 "Path" 的系統變數，點選 "編輯" 來編輯該系統變數。

<img src="https://hackmd.io/_uploads/SJePgiy3a.png" style="zoom:80%;" align = "left" />

<br/>
<br/>

如下圖所示，點選 "新增" 按鍵，輸入 ```%JAVA_HOME%\bin```，按下確定後儲存變更。

<img src="https://hackmd.io/_uploads/HJ-dxsk26.png" style="zoom:80%;" align = "left" />

<br/>
<br/>

最後於環境變數頁面中按下 "確定" 鍵儲存變更。

<img src="https://hackmd.io/_uploads/SkkYesyh6.png" style="zoom:80%;" align = "left" />

<br/>
<br/>

##### Step 4

重新開啟命令提示字元，於終端機中輸入以下命令，確認 JDK 19 是否安裝成功。(請確認版本號為 19.0.2)

java -version
javac -version

<img src="https://hackmd.io/_uploads/ryn5lok2p.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>
<br/>

## V. 安裝 Eclipse

*Mac 請參考以下連結：
https://blog.csdn.net/weixin_43847458/article/details/123213669*

在開始安裝前，請先確保電腦內已安裝 JDK/JRE 19：

java -version
javac -version

<img src="https://hackmd.io/_uploads/ByBpxoyha.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 1

點擊 Eclipse 安裝檔，以系統管理員身份執行。

<img src="https://hackmd.io/_uploads/r1YCxsJnT.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 2

點選 "Eclipse IDE for Java Developers"。

<img src="https://hackmd.io/_uploads/B1iJ-s1hp.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 3

請確保 Java 版本為 JDK 19，其他路徑請勿更改，點選 "Install"。

<img src="https://hackmd.io/_uploads/SJlWZik2p.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 4

點選同意。

<img src="https://hackmd.io/_uploads/rkyGWj1na.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 5

完成安裝，執行 Eclipse IDE。

<img src="https://hackmd.io/_uploads/H13fZjyha.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>
<br/>

## VI. 開始使用 Eclipse IDE

##### Step 1

首次開啟 Eclipse 時，會跳出一個視窗要選擇 workspace 目錄的位置，這個目錄主要是用來儲存未來所撰寫的所有 Java 專案，同學可自行改變位置，或新建一個資料夾用來放 Java 檔案(資料夾名稱盡量以英文命名)。

<img src="https://hackmd.io/_uploads/Syv4-sy2p.png" style="zoom:80%;" align = "left"/>

勾選 "Use this as the default and do not ask again" 後，下次開啟時 Eclipse 就不會再詢問 workspace 位置了。

<br/>

##### Step 2

關掉歡迎頁面。

<img src="https://hackmd.io/_uploads/ByUw-jk3T.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 3

新增一個 Java 專案。

<img src="https://hackmd.io/_uploads/ByKY-iknT.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 4

輸入專案名稱，選擇 Java 版本 (若只是單純寫程式而非進行專案開發的話，以後多數的 Java 檔案均存在本專案內即可)。

<img src="https://hackmd.io/_uploads/ByicZiJ3a.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

如下圖所示，專案建立完成後，底下會有兩個資料夾，其中 JRE System Library 中存放的是 JDK 19 的開發套件，而 src 中則是存放所有的 Java 檔案。

<img src="https://hackmd.io/_uploads/Byto-oJh6.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 5

右鍵點選專案名稱，新建一個 Java class (**若只是單純寫程式而非進行專案開發的話，以後建檔的時候從這個步驟開始即可**)。

<img src="https://hackmd.io/_uploads/HkHxzs13T.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 6

命名並建立該 class，其中 Package name 請依照作業類型統一命名為 `assignment`。

<img src="https://hackmd.io/_uploads/rkIIX7m2p.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 7

撰寫程式碼進行測試。

package assignment; // package 名稱必須與剛剛建立的 package 檔名相同，請依照作業類別統一命名為 assignment

/*
 * Assignment 00
 * Name: 王小明
 * Student Number: 123456789
 * Course 2023-課程代碼-班級
 */

public class HelloWorld { // class 名稱必須與剛剛建立的 class 檔名相同

	public static void main(String[] args) {
        // TODO Auto-generated method stub
		System.out.println("Hello world!");
	}

}

請注意，程式碼中的 class 名稱必須與剛剛建立的 class 檔名相同，而 package 名稱也必須相同。(預設會直接建立好)
另外，註解處的班級請寫上自己的班級 (如資工 1A)，<font color="red">**不是寫上實習課的 A/B 班**</font>。

<br/>

##### Step 7

儲存並執行檔案。

<img src="https://hackmd.io/_uploads/rJNQzsyha.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

<img src="https://hackmd.io/_uploads/HJYMms12p.png" align = "left"/>

<br/>
<br/>

##### Step 8

成功執行檔案並印出 `Hello World`。

<img src="https://hackmd.io/_uploads/SyoEzsJha.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>
<br/>

## VII. `.java` 檔與 `.class` 檔的位置

##### Step 1

進入 Eclipse workspace 路徑 ([步驟 VI 中的 Step 1](#Step-15)) 後，進入專案資料夾 ([步驟 VI 中的 Step 4](#Step-45)) 內。

<img src="https://hackmd.io/_uploads/r1THzj1nT.png" style="zoom:80%;" align = "left"/>

<br/>
<br/>

##### Step 2

- 在專案內，`\bin\{package_name}\`中存放的是`.class`檔

<img src="https://hackmd.io/_uploads/rJh8fsk2a.png" style="zoom:80%;" align = "left"/>

<br/>

- 在專案內，`\src\{package_name}\`中存放的是`.java`檔

<img src="https://hackmd.io/_uploads/ry4tMoknT.png" style="zoom:80%;" align = "left"/>

<br/>

<font color = "red">**未來繳交作業請上傳 `.java`檔即可，上傳其他多餘檔案者將予以扣分。**</font>

## VIII. 編碼查看
請確認程式碼是以 utf-8 編碼：
進入 Windows -> Preference

進入 General -> Workspace，確認編碼狀態為 utf-8

# 使用 JavaAWT

## I. 設定 module info

進入當前 package 底下的 `module-info.java`

於 module 底下新增一行 `requires java.desktop;`

## II. 執行 Java AWT

設定完畢後即可使用 Java AWT。

# 安裝 JavaFX

## I. 下載 JavaFX package

##### Step 1

進入 [JavaFX 官網](https://gluonhq.com/products/javafx/)，選擇下方版本並下載

##### Step 2

解壓縮該文件，將資料夾放到合適的檔案位置(之後請勿移動該資料夾位置)

## II. 於 Eclipse 中安裝 JavaFX

##### Step 1 開啟 User Library

開啟 Eclipse，選擇 Window -> Preference

選擇 Java -> Build Path -> User Libraries -> New

##### Step 2 自訂 User Library

輸入 Library 名稱：名稱可自訂

選取剛剛新增的 Library，點選 Add External JAR Selection

進入剛剛的 javafx-sdk-22.0.1/lib 裡面，全選所有檔案並匯入


點選 Apply and Close

## III. 安裝 Eclipse 插件

##### Step 1

點選 Help -> Eclipse Marketplace

於搜尋框中輸入 `JavaFX`，點選下方插件進行安裝


點選同意，並按下 Finish

安裝成功後，重新啟動 Eclipse

##### Step 2

進入 Window -> Preferences -> JavaFX
點選 Browse，去找 javafx-sdk-22.0.1 的位置

## III. 建立 project

##### Step 1 新建一個 Java Project


##### Step 2 新建一個 Java class

於該 Java class 中寫上以下測試用程式碼

package assignment;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;

public class HelloJavaFX extends Application {
	@Override
        // Override the start method in the Application class
	public void start(Stage primaryStage) {
	// Create a button and place it in the scene
	    Button btOK = new Button("OK");
	    Scene scene = new Scene(btOK, 200, 250);
	    primaryStage.setTitle("MyJavaFX"); // Set the stage title
	    primaryStage.setScene(scene); // Place the scene in the stage
	    primaryStage.show(); // Display the stage
	}
  
	/**
	 * The main method is only needed for the IDE with limited
	 * JavaFX support. Not needed for running from the command line.
	 **/
	
	public static void main(String[] args) { 
		launch(args);
	}
}

其中，package 名稱與 class 名稱請根據不同檔案而調整。

程式碼剛貼上時會有各種報錯。

## IV. 設定 project 環境

##### Step 1 建立 project 環境

對 project 右鍵，選取 Build Path -> Add Libraries

選取 User Library

點選剛剛建好的 JavaFX22

JavaFX Library 成功匯入

##### Step 2 環境設定

* 作法一：針對整個 Eclipse 環境設定參數 (Eclipse 上所有環境會被設定為僅適用於 JavaFX 的環境，所有非 JavaFX 檔案無法執行)

- 進入 Window -> Preference

- 編輯 VM Argument

- 填入以下參數

    --module-path "C:\Program Files (x86)\Java\javafx-sdk-22.0.1\lib" --add-modules javafx.controls,javafx.fxml

其中，"C:\Program Files (x86)\Java\javafx-sdk-22.0.1\lib"的部分請填入剛剛放 javafx-sdk-22.0.1\lib 的路徑

* 作法二：針對單一 Java 檔設定參數 (每個 JavaFX 檔案都必須重新做一次這個設定，但原先的非 JavaFX 檔案仍可以執行)

- 執行 JavaFX 檔案 (一定要先執行一次產生錯誤訊息的檔案才行)

會產生以上 Error Message

- 設定參數
進入 Run Configuration

在 Arguments 中填入以下參數後，執行該程式碼

    --module-path "C:\Program Files (x86)\Java\javafx-sdk-22.0.1\lib" --add-modules javafx.controls,javafx.fxml,javafx.media

其中，"C:\Program Files (x86)\Java\javafx-sdk-22.0.1\lib"的部分請填入剛剛放 javafx-sdk-22.0.1\lib 的路徑


可成功執行

## V. 執行範例程式碼

執行前必須先刪除原先建立專案時自動建成的 project-info.java

成功執行結果