---
# System prepended metadata

title: ZK環境安裝 (Eclipse)
tags: [智慧影像科專案]

---

# ZK環境安裝 (Eclipse)
###### tags: `智慧影像科專案`

## 安裝ZK Studio

### 功能列→Help→EclipseMarketplace
![](https://i.imgur.com/DBg2q8U.png)

### 輸入ZK Studio尋找，點選Install
![](https://i.imgur.com/PFPAPi3.png)

### 重開Eclpise
![](https://i.imgur.com/aS1ouy0.png)

### 登入ZK (※請先至https://www.zkoss.org/ 註冊帳號)
![](https://i.imgur.com/xo1ZgXg.png)

### 功能列→Window→Preferences
![](https://i.imgur.com/SXLwfCG.png)

### ZK→ZK Account→確認狀態為activated
![](https://i.imgur.com/lVFbBK0.png)

### ZK→ZK Packages→ZK有被勾選
![](https://i.imgur.com/D8AHqox.png)

### 改為使用ZK CE (預設為ZK EE，會有試用期限的問題)
#### 下載網址：https://www.zkoss.org/download/zk
點選Download ZK CE，將zk-bin-8.6.0.1.zip下載到本機
![](https://i.imgur.com/8KBETl6.png)
#### 功能列→Window→Preferences
![](https://i.imgur.com/iHYmSJK.png)
#### ZK→ZK Packages→Add File / Directory…
![](https://i.imgur.com/EBvgzYa.png)
#### 點選File Import→選擇zk-bin-8.6.0.1.zip的路徑
![](https://i.imgur.com/yrt7IlZ.png)
#### 選8.6.0.1版本→點選Apply and Close
![](https://i.imgur.com/jcXqtIU.png)
#### 新增專案時，請記得選擇8.6.0.1版本
![](https://i.imgur.com/xSIYm98.png)
:::danger
註：將系統日期改為超過ZK EE試用期，還是可以執行，還是會有警告 
只能等待真的試用期到期，再測試…
![](https://i.imgur.com/tkL6wpT.png)
::: 

## 設定Tomcat
### 下載網址：http://tomcat.apache.org
#### 點選左邊下載所要的tomcat版本
![](https://i.imgur.com/eLhktq3.png)
#### 依據自己的作業系統下載相對應的版本
![](https://i.imgur.com/kUpUpf3.png)
#### 解壓縮資料夾，放置某路徑，並記住路徑
![](https://i.imgur.com/FJ85rPx.png)

## 設定Server
#### 功能列 → Window → Show View → Other → Server → Servers
![](https://i.imgur.com/YGlsUQV.png)

![](https://i.imgur.com/nGHOyDT.png)
#### 選擇Tomcat v9.0 Server
![](https://i.imgur.com/8ogwzFM.png)

## 建置Java 網頁
![](https://i.imgur.com/IWAxWpO.png)
:::success
專案管理區：顯示所有建立的專案，並提供管理功能
程式撰寫區：編輯與撰寫程式碼
各類資訊區：包含Console、Problems…，顯示專案的警告、錯誤、執行結果等訊息
ZK工具區：提供ZK圖形化元件，可直接拖拉至程式編輯區
程式架構區：撰寫程式時，顯示所使用到的各類介面元件 
:::

:::warning
※ 可於 功能列 → Windows → Show View，添加所需工具於Eclipse IDE開發介面中

![](https://i.imgur.com/kgyllnv.png)

:::


## 新增Maven專案
#### 功能列 → Window → Preferences → Maven → Archetypes → Add Remote Catalog…
![](https://i.imgur.com/Sz3O5b5.png)

:::danger
Catalog File: http://mavensync.zkoss.org/maven2/ 
Description: ZK Maven Archetype
:::
![](https://i.imgur.com/3nGeySt.png)

#### 功能列 → File → New → Project… → Maven Project
![](https://i.imgur.com/iUSC3Le.png)
#### 確定[Create a simple project…] 無勾選
![](https://i.imgur.com/i5wJSBK.png)
#### 選擇 zk-archetype-webapp
![](https://i.imgur.com/QTbHyMG.png)
#### 輸入Group Id、Artifact Id
![](https://i.imgur.com/AHpIse0.png)

## 網頁部署
#### 編輯index.zul
![](https://i.imgur.com/sj6whiP.png)
#### 匯出war檔
![](https://i.imgur.com/W9aVZgZ.png)
#### 需要佈署的war檔案複製到\...\ apache-tomcat-9.0.13\webapps路徑下
#### 瀏覽器輸入 http://localhost:8080/HelloWorld_ZK/
![](https://i.imgur.com/4FenwB9.png)

![](https://i.imgur.com/n2NLHrY.png)






 


