2009年7月10日 星期五

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

推文
功能:同第一篇。

說明:就如同標題一樣,前端會用到JavaFXSwingJava Web StartGoogle Map

的技術,後端就是JDBCServlet的技術,以及我們會簽署認證jar檔案,這

樣才可存取客戶端(ex:執行命令,存檔等等),以這樣的架構其實很容易就可

以讓我們開發各式各樣的系統,當然你得發揮你的創意,其中的一項重點就

servlet與前端互傳的Serial物件,你可以將他寫入資料庫的欄位,這樣每

當你的客戶端需求有變動時,隨時可新增刪減欄位,不必還得在資料庫的表

格再新增或刪減一個或多個欄位,當然你存入資料庫的Serial物件的欄位必

須設定好足夠的空間(可用比較大型資料typeblobclob等等或自訂type)

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


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

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

  3. 步驟12是基礎,各位學JavaFX一定要先看。

  4. 下載 JavaFX 1.2 SDK,到網址

    http://javafx.com/downloads/windows.jsp


    選 JavaFX 1.2 SDK,下載及安裝。
  5. 在寫 javafx 前,我們要先下更新javafx 開發元件,選menuTools--->Plugins

    如下圖,點tabAvailable Plugins,在search欄位打入javafx搜尋字,出現3

    plugins,全選,然後按Install按鈕安裝


  6. meunFile-->New Project,如下圖,建置一個JavaFX Project,按Next


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

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

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

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


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

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

那要如何建立JavaFXGUI?如下圖展開右邊Palette,選Swing ComponentsButton

件,拉到TextEditor,我們在程式碼裡設一個變數button1,其typeSwingButton

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

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

使用它們。



如下圖,再建立JavaFX Class檔,File Name輸入FlipViewPackage輸入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輸入MyJTableJPPackage輸入jdbcfx.java,按Finish





    在將我附上的原始檔MyJTableJP.java複製進來即可。

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

    以及如何建JavaFXGUI注意要加入librarycos.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,這樣我們才可輕而一舉的在

    javafxscript使用swingcomponent wrap 方法將其轉成 SwingComponent type

    的元件。

    jdbcfx.java.TableHelper.java

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



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.pngpie.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的設定。

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

本篇教學文件下載

0 意見: