JavaFX結合 JDBC, Servlet, Swing, Google Map及動態產生比例圖 (2)：JavaFX建立及程式碼說明 (转帖)

說明：就如同標題一樣，前端會用到JavaFX、Swing、Java Web Start、Google Map 的技術，

後端就是JDBC、Servlet的技術，以及我們會簽署認證jar檔案，這樣才可存取客戶端(ex:執行命令，存檔等等)，

以這樣的架構其實很容易就可以讓我們開發各式各樣的系統，當然你得發揮你的創意，其中的一項重點就

是servlet與前端互傳的Serial物件，你可以將他寫入資料庫的欄位，這樣每當你的客戶端需求有變動時，

隨時可新增刪減欄位，不必還得在資料庫的表格再新增或刪減一個或多個欄位，當然你存入資料庫的Serial

物件的欄位必須設定好足夠的空間(可用比較大型資料type如blob，clob等等或自訂type)，確實也以

此架構幫公司設計了一些系統，覺得還不錯用，介紹給大家。

1. 學習JavaFX Script語法的網址 http://java.sun.com/javafx/1/tutorials/core/

2. 學習如何建立JavaFX GUI的網址 http://java.sun.com/javafx/1/tutorials/ui/

3. 步驟1跟2是基礎，各位學JavaFX一定要先看。

4. 下載 JavaFX 1.2 SDK，到網址 http://javafx.com/downloads/windows.jsp 
   選 JavaFX 1.2 SDK，下載及安裝。

5. 在寫 javafx 前，我們要先下更新javafx 開發元件，選menu的Tools--->Plugins

   如下圖，點tab的Available Plugins，在search欄位打入javafx搜尋字，出現3

   個plugins，全選，然後按Install按鈕安裝 
   

6. 選meun，File-->New Project，如下圖，建置一個JavaFX Project，按Next鈕 
   

如下圖，Project Name輸入jdbcfx，Project Location我的是C:\netbeans，其他預設即可，而

Create Main File我們輸入jdbcfx.fx.Main(多加個package name fx，為了好區分而已)，這個

Main.fx檔是我們要Run這個jdbcfx Project時的主要啟動檔案，檔案名稱你可自己設，不一

定要Main.fx，不過我們這用預設即可，按Finish鈕 

然後在將我附上的原始檔Main.fx全部覆蓋複製進來，此時會有錯誤，因為有些檔案還沒建

立，先忽略，之後再一步一步建立。

那要如何建立JavaFX的GUI呢?如下圖展開右邊Palette，選Swing Components的Button元

件，拉到TextEditor，我們在程式碼裡設一個變數button1，其type為SwingButton

(var button1:SwingButton =)，將button元件拉到等號右邊，然後設定Button的text屬性及動

作的方法，各種元件的詳細操作使用方式，各位一定要先看完步驟1及2，才能了解如何去

使用它們。

如下圖，再建立JavaFX Class檔，File Name輸入FlipView，Package輸入jdbcfx.fx，

按Finish鈕

 

然後再將我附上的原始檔FlipView.fx複製進來即可。

1. 接下來我們需要建立Swing GUI，由於我的GUI是由Eclipse IDE所建立，所以在這

   我們直接以建立Java Class方式複製進來，如下圖，當然你也可以選擇JPanel Form的

   方式建立Swing GUI，注意我們的Swing GUI必須是繼承自JComponent類別，才可

   用JavaFX API所提供的SwingComponent類別的方法wrap包裹進來，而JFrame不是

   ，所以無法用SwingComponent類別提供的方法，不過大部分的Swing GUI均可使用

   SwingComponent類別來轉換，所以JavaFX還是可以使用大部分的Swing GUI，

   如下圖：Class Name輸入MyJTableJP，Package輸入jdbcfx.java，按Finish鈕 
    
    
   在將我附上的原始檔MyJTableJP.java複製進來即可。

1. 以上的步驟只是要讓各位了解如何在JavaFX Project裡建javafx script檔及java檔，

   以及如何建JavaFX的GUI，注意要加入library，cos.jar前端傳送序列物件用，加入

   方式參考上一篇步驟8，我會附上我建的NetBeans Project，稍後各位只要使用

   NetBeans開啟project即可，如你要一步一步建檔，就請依照上列步驟建立。

2. 程式碼說明：(這部分網頁顯示的有點亂，請參考下載文件)

   jdbcfx netbeans project 程式碼如下(包含package name)

   jdbcfx

   |--- fx

   \--- FlipView.fx

\--- Main.fx

|--- java

\--- MyJTableJP.java

\--- TableHelper.java

yj

|--- db

\--- MyDataSerial.java

\--- MyJTableJP_Model.java

salary netbeans project 程式碼如下(web project，包含 package name)

yj

|--- db

\--- MyDataSerial.java

\--- MyJTableJP_Model.java

|--- servlet

\--- DataIUS_Servlet.java

\--- GenGraphic_Servlet.java

\--- GenMapfile_Servlet.java

|--- dbutility

\--- DB_Utility.java

以上是兩個project程式碼的清單，底下在逐一說明各程式碼主要功能，但詳細說明

還是請參考程式碼的註解。

1. jdbcfx project部分

   jdbcfx.fx.FlipView.fx：

   主要功能是讓我們動態產生的統計圖檔(長條圖跟圓餅圖)，作翻轉切換。

   jdbcfx.fx.Main.fx：

   這是這整個程式的進入點，類似java application 的 main function。

   jdbcfx.java.MyJTableJP.java

   這是個swing component Jpanel，裡面有放入JTable，這樣我們才可輕而一舉的在

   javafx的script使用swingcomponent 的 wrap 方法將其轉成SwingComponent type

   的元件。

   jdbcfx.java.TableHelper.java：

   主要功能是讓我們可以在javafx script建立MyJTableJP的type的物件。

yj.db.MyDataSerial.java：

這是我們前後端傳送的 serial 物件。

yj.db.MyJTableJP_Model.java：

這是MyJTableJP裡的JTable所用的TableModel。

salary web project部分

yj.db.MyDataSerial.java：

同上。

yj.db.MyJTableJP_Model.java：

同上。

yj.db.servlet.DataIUS_Servlet.java

主要功能為對資料庫資料表作新增刪除修改的動作。

yj.db.servlet.GenGraphic_Servlet.java

主要產生長條圖跟圓餅圖檔(bar.png，pie.png)。

yj.db.servlet.GenMapfile_Servlet.java

主要是動態產生Googel Map的相對應員工家地址的地圖html檔。

yj.db.servlet.dbutility.DB_Utility.java

jdbc的設定檔，這支程式是針對SQL Server 2000，如果你的是其他DataBase Server，

請參考其他相關db server jdbc的設定。

下一篇將介紹部署及應用，未完待續~~~