JavaFX結合 JDBC, Servlet, Swing, Google Map及動態產生比例圖 (1)：NetBeans 寫 Servlet

推文

功能：這支程式的主要功能是將 javafx 與 swing 的結合，以 JDBC、Servlet的技術

存取(新增刪除修改查詢)後端資料庫，而前端以 javafx 結合 JTable 來呈現，

以及顯示動態查詢後的結果來產生"部門所佔薪資比例長條圖、圓餅圖"，而

由前端的 JTable 裡選擇 row 可產生到該員工家的Google地圖。

說明：建議JavaFX應用程式的撰寫開發工具還是以 NetBeans 為主，Sun自家的開發工

具對 JavaFX 支援還是比較好用，而eclipse的plugin雖然1.2版已支援了 Code

Completion 但對在 javafx script 裡引入 Java API 還是有些問題。

本主題共有三篇，相關檔案會在第三篇放上，

我會以 NetBeans 建兩個專案，一個是 Web Servlet，另一個專案是JavaFX應用程

式的專案，所以第一部分我會先介紹 NetBeans 寫 Servlet。

1. 先下載工具 NetBeans IDE 6.5.1

   http://www.netbeans.org/downloads/6.5.1/
   
   這個頁面也會有其他不同功能的下載版本，我們選擇Java的版本，而 JavaFX我們

   第二篇介紹 JavaFX 時，再用更新方式update，因為這篇主要介紹開發 Servlet。

   注意：你電腦須先裝 JDK 6 Update 13 以上版本 ，如沒有到底下網址下載

   http://java.sun.com/javase/downloads/index.jsp

2. 下載 Application Server，Tomcat Server 6.0.18 版

   http://archive.apache.org/dist/tomcat/tomcat-6/v6.0.18/bin/apache-tomcat-6.0.18.zip

   我是解壓縮到 C:\apache-tomcat-6.0.18

3. 如圖選 menu，File-->New Project

   

   如下圖，選 Java Web，Web Application，按 Next 按鈕

   

   如下圖，Project Name輸入 salary，Project Location 指定你要放置專案的目錄，我放在目錄

   C:\netbeansprj，按 Next 按鈕

   

   4. 如下圖加入 Tomcat Server，按 Add 按鈕

   

   如下圖，選 Tomcat6.0，按 Next 按鈕

   

   如下圖選擇我們在步驟2解壓的目錄 C:\apache-tomcat-6.0.18

   Username，Password請自行輸入管理員的帳號密碼(隨你喜歡，如無會依你輸入建立)，

   這帳號可以管理 Web Application 的 start ,stop, reload, undeploy，按 Finish鈕

   

   再按 一次 Finish 鈕

   
   

   5. 產生了 salary project，以及預設會幫我們建立index.jsp檔，如下圖
      
      
      

   如下圖，點 salary 按右鍵 Run

   

   會啟動Tomcat server，及瀏覽器自動開啟index.jsp(印出 Hello World!)

   6. 接下來就是建立 Servlet，點 salary 按右鍵 ---> New ---> Other跳出如下畫面，

      左邊 Categories選 Web，右邊 File Types 選 Servlet，按 Next 鈕
      
      
      

   如下圖 Class Name 輸入 HelloWorldServlet，Package 輸入 yj.servlet，按 Finish 鈕

   
   
   

   7. 將程式碼33行及42行的註解行移除，39行改成

      out.println("Hello World 這世界~~~");如下圖

      注意 NetBeans 的 Servlet範本的 doPost跟 doGet 方法均轉給 processRequest方法來

      處理，我們當然也可改範本，在munu的 Tools ---> Templates ---> Web 的 Servlet，

      即可更改。
      
      
      

   點左邊程式 HelloWorldServlet.java，按右鍵 Run File，會跳出框框如下圖

   

   這是問你要不要加參數，我們只是印 Hello World 而已，所以直接按 OK 鈕即可，此時可看

   到瀏覽器自動開啟(印出 Hello World 這世界~~~) ，即表成功建立 HelloWorldServet。

   
   

   8. 接下來重複步驟6建立三個 Servlet 檔案，Class Name 輸入

      DataIUS_Servlet、GenGraphic_Servlet、GenMapfile_Servlet，

      Package 輸入 yj.servlet，然後將我附上的各 java 原始檔複製進來，以及會用到的lib

      JDBC(for SQL Server 2000)：jtds-1.2.jar，

      JfreeChart：jfreechart-1.0.12.jar、jcommon-1.0.15.jar，(繪長條圖及圓餅圖用)

      設定進開發環境裡，如下圖選salary按右鍵選Properties，選Libraries按

      Add JAR/Folder鈕，將lib jar檔加進來
      
      
      

      相關檔案的功能作用我會在下篇用到時介紹，java 原始碼也會有註解說明，

      這步驟你可以省略，因我會提供我的netbeans project壓縮檔給各位，你只要用

      NetBeans IDE開啟即可，lib會自動加進來。

   
   

   9. Web application的部署：

      我的這個salary project是放在目錄C:\netbeansprj底下，所以在

      C:\netbeansprj\salary\dist 目錄下會有 salary.war，如果這檔案不是最新的，請在執行

      Built 或者是 Clean and Build 以產生更新的 war 檔，如下圖
      
      
      

   然後再將你的 salary.war 檔案複製到你要對外開放的 Tomcat Server的目錄，我的是

   C:\Tomcat602\webapps底下，如有啟動 Tomcat Server 會自動產生目錄 salay，我的電腦是裝

   兩個Tomcat Server，一個給 NetBeans 開發用，如步驟4，另一個是對外開放發佈用，但請

   注意兩個Tomcat Server 的幾個 port 要設成不一樣，請將其中一個 Tomcat Server更改

   C:\apache-tomcat-6.0.18\conf\server.xml檔案，找到如下內容：

   …...

   <server port="8005" shutdown="SHUTDOWN"> 預設 8005我改成 8006

   …...

   <connector connectiontimeout="20000" port="8080" protocol="HTTP/1.1" redirectport="8443"> 預設 8080改成 8081

   …...

   <connector port="8009" protocol="AJP/1.3" redirectport="8443">

   預設 8009 改成 8010

   這樣servlet的部份即完成，下一偏將介紹 JavaFX如何結合JDBC, Servlet, Swing,

   Google Map及動態產生比例圖，未完待續~~~

   本篇教學文件下載