第十七章使用B4J建立跨平台应用程式课件.ppt

1、第第17章章 使用使用B4J建立跨平台應用程式建立跨平台應用程式n 17-1 認識B4J整合開發環境n 17-2 下載與安裝B4J開發環境n 17-3 建立第一個B4J應用程式n 17-4 使用GUI設計工具建立B4J應用程式n 17-5 B4J程式與專案結構17-1 認識認識B4J整合開發環境整合開發環境 n 17-1-1 B4J簡介 n 17-1-2 B4J的基本架構 17-1 認識認識B4J整合開發環境整合開發環境 n B4J是B4X開發工具家族的成員，可以讓我們使用Visual Basic語言開發跨平台的桌上型、伺服端和Web應用程式，其兄弟產品B4A能夠使用Visual Basic語

2、言開發Android App；B4i開發iOS App。17-1-1 B4J簡介簡介n B4J（Basic4Java）是以色列Anywhere Software公司開發的整合開發環境，一套完全免費、簡單且功能強大的快速應用程式開發工具（Rapid Application Development，RAD），可以讓我們使用Visual Basic語言開發跨平台桌上型、伺服端和Web應用程式。n 微軟.NET Framework雖然也有Mono專案支援跨平台開發，但是開發工具MonoDevelop對於Visual Basic語言的支援並不完整。Anywhere Software公司的B4J提供完整且

3、功能強大的開發環境，可以讓Visual Basic語言的開發者直接使用BASIC語言開發跨平台Windows、Mac OS和Linux應用程式，讓你使用Visual Basic語言撰寫的程式在樹莓派（Raspberry Pi）上執行和連接Arduino。17-1-2 B4J的基本架構的基本架構-圖例圖例n B4J是在Java平台上提供一層Visual Basic語言的軟體開發層，開發者使用B4J的Visual Basic語言建立專案後，B4J會將Basic語言的程式碼編譯成Java應用程式，簡單的說，我們是撰寫Visual Basic程式碼來開發Java應用程式，使用B4J開發的應用程式就是標

4、準Java應用程式，能夠跨平台在不同作業系統上執行。17-1-2 B4J的基本架構的基本架構-Java平台平台n Java平台和.NET Framework平台十分類似，Java程式碼是編譯成位元組碼（Bytecode），然後在JVM（Java Virtual Machine）虛擬機器上執行，只需在作業系統安裝JVM，同一位元組碼檔案就可以跨平台在不同作業系統上，使用Java直譯器來執行。n 因為Java平台是一個跨作業系統的開發和執行環境，所以，B4J開發的應用程式可以跨平台在Windows、Mac OS和Linux作業系統執行。17-2 下載與安裝下載與安裝B4J開發環境開發環境 n 17

5、-2-1 下載與安裝JDK n 17-2-2 下載與安裝B4Jn 17-2-3 啟動與設定B4J 17-2-1 下載與安裝下載與安裝JDK-下載下載JDKn JDK（Java SE Development Kit）是Java應用程式的開發套件，包含執行環境和相關工具，可以編譯、除錯和執行Java應用程式。n JDK 8（Java SE Development Kit 8）是JDK第8版，可以在Java官方網站免費下載，其下載網址如下所示：http:/ 在上方選【Java Download】圖示後，點選【Accept License Agreement】同意授權，可以在下方點選超連結下載Wind

6、ows x86的32位元版本（在64位元電腦也可以下載安裝32位元版本），本書使用的下載檔名是【jdk-8u40-windows-i586.exe】。17-2-1 下載與安裝下載與安裝JDK-安裝安裝JDKn JDK 8更新版本並不是使用.後的次版號來表示，而是改用更新Update標示，在本書是使用JDK 8 Update 40，其下載Windows版JDK的檔名是【jdk-8u40-windows-i586.exe】，我們只需執行此檔案就可以安裝JDK 8。17-2-2 下載與安裝下載與安裝B4J-下載下載B4J n B4J是一套完全免費的整合開發環境，可以直接從Anywhere Softw

7、are公司的官方網站免費下載，其系統需求是.NET Framework 4.0之上版本。n B4J可以在官方網站免費下載，其下載網址如下所示：http:/ 在進入網頁後，請按【Download B4J Full Version】鈕下載B4J，下載檔名是【B4J.exe】。17-2-2 下載與安裝下載與安裝B4J-安裝安裝B4J n 在成功下載B4J後，就可以在Windows開發電腦安裝B4J，本書安裝的是3.5版，如下圖所示：17-2-3 啟動與設定啟動與設定B4J-啟動啟動B4Jn 在安裝最後一步驟如果勾選【Launch B4J】，在安裝後就會馬上啟動B4J，否則，請執行開始/所有程式/B4

8、J/B4J命令來啟動B4J，可以進入B4J整合開發環境的使用介面。17-2-3 啟動與設定啟動與設定B4J-設定設定B4Jn 接著，我們需要設定B4J，告訴B4J到哪一個路徑可以找到JDK的javac.exe，其步驟如下所示：n 請啟動B4J，執行Tools/Configure Paths命令，可以看到Paths Configuration對話方塊。17-2-3 啟動與設定啟動與設定B4J-結束結束B4Jn 離開B4J請執行File/Exit命令。17-3 建立第一個建立第一個B4J應用程式應用程式-說明說明n 現在，我們可以啟動B4J整合開發環境建立第一個B4J應用程式，基本上，B4J應用程

9、式的開發步驟和VS Express for Desktop並沒有什麼不同，筆者就不重複說明。n 基本上，本節B4J應用程式十分簡單，只是一個在視窗標題列顯示文字內容的空視窗，其主要目的是說明B4J整合開發環境的使用。17-3 建立第一個建立第一個B4J應用程式應用程式-步驟一：新增與儲存步驟一：新增與儲存B4J專案專案(Step 1)n Step 1：請啟動B4J整合開發環境，可以看到預設建立名為Main的程式碼模組，或是執行File/New/UI(JavaFX)命令新增B4J專案，如下圖所示：17-3 建立第一個建立第一個B4J應用程式應用程式-步驟一：新增與儲存步驟一：新增與儲存B4J專案

10、專案(Step 2)n Step 2：請在AppStart程序的的倒數第2列輸入程式碼，指定MainForm.Title屬性值，如下所示：Sub AppStart(Form1 As Form,Args()As String)MainForm=Form1 MainForm.SetFormStyle(UNIFIED)MainForm.RootPane.LoadLayout(Layout1)Load the layout file.MainForm.Title=我的第一個我的第一個B4J程式程式!MainForm.ShowEnd Subn MainForm物件是主表單視窗，在指定表單樣式後，指定Ti

11、tle屬性值，即視窗標題文字，最後呼叫Show()方法顯示視窗。17-3 建立第一個建立第一個B4J應用程式應用程式-步驟一：新增與儲存步驟一：新增與儲存B4J專案專案(Step 3)n Step 3：在編譯和執行專案前，我們需要先儲存專案（不然會顯示請先儲存專案的錯誤訊息），請執行File/Save命令，可以看到另存新檔對話方塊。17-3 建立第一個建立第一個B4J應用程式應用程式-步驟一：新增與儲存步驟一：新增與儲存B4J專案專案(Step 4)n Step 4：B4J專案需要儲存在獨立的專屬資料夾，請先切換至儲存路徑後，按上方【新增資料夾】鈕新增名為【Ch17-3】資料夾，再將B4J專案

12、儲存至D:程式範例Ch17Ch17-3資料夾，名稱為【FirstProgram.b4j】，按【存檔】鈕儲存專案。17-3 建立第一個建立第一個B4J應用程式應用程式-步驟二：使用步驟二：使用Debug偵錯模式編譯與執行偵錯模式編譯與執行B4J應用程式應用程式(Step 1)n 當完成B4J專案儲存後，就可以編譯與執行B4J應用程式，預設使用Debug偵錯模式，提供除錯功能，其步驟如下所示：n Step 1：請在B4J執行Project/Compile&Run命令或按F5鍵，如下圖所示：17-3 建立第一個建立第一個B4J應用程式應用程式-步驟二：使用步驟二：使用Debug偵錯模式編譯與執行偵錯

13、模式編譯與執行B4J應用程式應用程式(Step 2)n Step 2：可以看到Compile&Rapid Debug對話方塊顯示的編譯資訊。17-3 建立第一個建立第一個B4J應用程式應用程式-步驟二：使用步驟二：使用Debug偵錯模式編譯與執行偵錯模式編譯與執行B4J應用程式應用程式(Step 3)n Step 3：上述訊息顯示已經完成剖析與程式碼編譯（將BASIC程式碼轉換成Java程式碼），成功會在最後顯示Completed successfully訊息文字（有語法錯誤會顯示錯誤訊息和所在位置），和馬上看到執行結果的空視窗，如下圖所示：17-3 建立第一個建立第一個B4J應用程式應用程式

14、-步驟二：使用步驟二：使用Debug偵錯模式編譯與執行偵錯模式編譯與執行B4J應用程式應用程式(Step 4)n Step 4：因為B4J預設使用Debug偵測模式，回到B4J可以看到位在下方的除錯視窗，請執行Debug/Stop命令結束偵錯，停止目前程式的執行（也可以直接關閉空視窗）。17-3 建立第一個建立第一個B4J應用程式應用程式-步驟三：使用步驟三：使用Release釋出模式編譯與執行釋出模式編譯與執行B4J應用程式應用程式(Step 1)n 實務上，除非程式有錯誤，我們並不需要除錯功能，或是專案已經完成開發，請使用釋出模式來編譯與執行，其步驟如下所示：n Step 1：在B4J上方

15、工具列最後的下拉式清單方塊，選【Release】切換成釋出模式，如下圖所示：17-3 建立第一個建立第一個B4J應用程式應用程式-步驟三：使用步驟三：使用Release釋出模式編譯與執行釋出模式編譯與執行B4J應用程式應用程式(Step 2)n Step 2：執行Project/Compile&Run命令或按F5鍵，可以看到Compile對話方塊顯示的編譯資訊。17-3 建立第一個建立第一個B4J應用程式應用程式-步驟三：使用步驟三：使用Release釋出模式編譯與執行釋出模式編譯與執行B4J應用程式應用程式(Step 3)n Step 3：成功編譯可以看到Completed successf

16、ully訊息文字，按【Close】鈕關閉對話方塊，同時可以看到和步驟二相同的空視窗。在B4J開啟存在專案是執行File/Open Source命令，請切換至專案資料夾，選副檔名.b4j的專案檔來開啟B4J專案。17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-說明說明n B4J內建GUI設計工具（Visual Designer）是一套功能強大的視覺化工具，可以如同VS Express for Desktop設計表單一般建立圖形使用介面，提供抽象設計（Abstract Designer）標籤頁來幫助我們建立使用介面。n 在這一節筆者準備從啟動B4J新增專案開始，使用完整實例

17、來說明GUI設計工具的使用，這個範例是簡單的【兒童數學訓練】，可以訓練兒童數學的加法運算。17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟一：啟動步驟一：啟動B4J新增專案新增專案(Step 12)n 我們準備從啟動B4J新增本節B4J專案開始，專案名稱是【SecondProgram.b4j】，其步驟如下所示：n Step 1：啟動B4J後，請執行File/New/UI(JavaFX)命令新增專案，可以看到和啟動時相同的Main模組和範本程式碼。n Step 2：請執行FileSave命令儲存B4J專案，我們是儲存在D:程式範例Ch17Ch17-4資料夾，專案名稱是

18、【SecondProgram.b4j】。17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟二：在步驟二：在GUI設計工具新增介面控制項設計工具新增介面控制項(Step 1)n Step 1：請執行Designer/Open Internal Designer命令，可以看到Visual Designer視窗，在右邊是【Abstract Designer】標籤頁，和一個獨立的WYSIWYG Designer視窗。17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟二：在步驟二：在GUI設計工具新增介面控制項設計工具新增介面控制項(Step 2)n

19、Step 2：在上方Add View功能表包含B4J支援的介面控制項，請執行Add View/Label命令新增Label控制項。17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟二：在步驟二：在GUI設計工具新增介面控制項設計工具新增介面控制項(Step 3)n Step 3：在右邊【Abstract Designer】標籤頁，可以看到新增一個Label控制項（右圖是Label1在WYSIWYG Designer視窗的顯示效果），如下圖所示：17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟二：在步驟二：在GUI設計工具新增介面控制項設計工

20、具新增介面控制項(Step 4)n Step 4：點選Label控制項，請使用四周定位點調整控制項尺寸，和拖拉調整位置，同時在WYSIWYG Designer視窗也會一併變更（因為Label1控制項背景預設是透明，並無法明顯看出控制項邊界），如右圖所示：17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟二：在步驟二：在GUI設計工具新增介面控制項設計工具新增介面控制項(Step 5)n Step 5：同樣方式，請再新增3個Label24（或在Label標籤上執行【右】鍵快顯功能表的【Duplicate】命令來複製控制項），和分別調整尺寸和位置，如右圖所示：17-4 使

21、用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟二：在步驟二：在GUI設計工具新增介面控制項設計工具新增介面控制項(Step 6)n Step 6：請再分別執行Add View/TextField和Add View/Button命令，新增TextField文字方塊和Button按鈕控制項，和分別調整尺寸和位置，如下圖所示：17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟二：在步驟二：在GUI設計工具新增介面控制項設計工具新增介面控制項(Step 7)n Step 7：在左邊的Views Tree窗格是控制項的樹狀結構，使用階層結構顯示控制項清單，我們

22、可以在此點選欲編輯的控制項（也可以直接在【Abstract Designer】標籤頁點選），如下圖所示：17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟三：在步驟三：在GUI設計工具設定控制項的屬性設計工具設定控制項的屬性(Step 1)n Step 1：請在【Abstract Designer】標籤頁，或Views Tree窗格選【Button1】，可以在中間Properties窗格編輯屬性值，如下圖所示：17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟三：在步驟三：在GUI設計工具設定控制項的屬性設計工具設定控制項的屬性(Step 2

23、3)n Step 2：在【Name】屬性欄輸入【btnAction】更改屬性值，同時自動更新【Event Name】屬性值（此屬性是事件處理程序名稱的開頭）。n Step 3：然後捲動視窗找到和展開【Background Properties】，在【Color】屬性視窗開啟下拉式清單，選【LightGreen】，如右圖所示：17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟三：在步驟三：在GUI設計工具設定控制項的屬性設計工具設定控制項的屬性(Step 4)n Step 4：接著輸入【Text】屬性值【回答】，和更改【Size】屬性值【24】來放大尺寸，如下圖所示：1

24、7-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟三：在步驟三：在GUI設計工具設定控制項的屬性設計工具設定控制項的屬性(Step 5)n Step 5：在完成Button1控制項的屬性編輯後，可以看到實際的顯示效果，如右圖所示：17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟三：在步驟三：在GUI設計工具設定控制項的屬性設計工具設定控制項的屬性(Step 6)n Step 6：同樣方式，請依序更改Label14控制項的屬性值，如右表所示：控制項控制項屬性屬性屬性值屬性值Label1NamelblResultLabel1Background

25、ColorWhiteLabel1Size20Label1Text請輸入答案Label1Text ColorRedLabel1Text AlignmentCenterLabel2NamelblNumber1Label2Size25Label2Text8Label2Text AlignmentCenterLabel3Size25Label3Text+Label3Text AlignmentCenterLabel4NamelblNumber2Label4Size25Label4Text8Label4Text AlignmentCenter17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式

26、應用程式-步驟三：在步驟三：在GUI設計工具設定控制項的屬性設計工具設定控制項的屬性(Step 6)17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟三：在步驟三：在GUI設計工具設定控制項的屬性設計工具設定控制項的屬性(Step 7)n Step 7：請更改TextField1控制項的屬性值，如下表所示：控制項控制項屬性屬性屬性值屬性值TextField1NametxtResultTextField1Size30TextField1Prompt輸入結果17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟四：儲存版面配置檔與自動產生程式碼步驟四

27、：儲存版面配置檔與自動產生程式碼(Step 1)n Step 1：在Visual Designer視窗提供命令來儲存版面配置檔，請開啟File功能表。17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟四：儲存版面配置檔與自動產生程式碼步驟四：儲存版面配置檔與自動產生程式碼(Step 2)n Step 2：執行File/Save命令，可以看到Create New Layout對話方塊。17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟四：儲存版面配置檔與自動產生程式碼步驟四：儲存版面配置檔與自動產生程式碼(Step 3)n Step 3：在【L

28、ayout name】欄輸入版面配置檔名稱【Main】，按【Ok】鈕儲存版面配置檔。17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟四：儲存版面配置檔與自動產生程式碼步驟四：儲存版面配置檔與自動產生程式碼(Step 4)n Step 4：請切換至B4J主使用介面，選右下方【Files Manager】標籤，可以看到我們建立的版面配置檔Main.bjl，如下圖所示：17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟四：儲存版面配置檔與自動產生程式碼步驟四：儲存版面配置檔與自動產生程式碼(Step 5)n Step 5：因為程式碼需要參考版面配

29、置檔中的控制項物件，請切換至Visual Designer視窗來自動產生所需的程式碼，如下圖所示：17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟四：儲存版面配置檔與自動產生程式碼步驟四：儲存版面配置檔與自動產生程式碼(Step 6)n Step 6：請執行Tools/Generate Members命令，可以看到Generate Members對話方塊。17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟四：儲存版面配置檔與自動產生程式碼步驟四：儲存版面配置檔與自動產生程式碼(Step 7)n Step 7：請勾選btnAction和之下的

30、MouseClicked事件、txtResult、lblNumber1、lblNumber2和lblResult，按【Generate Members】鈕產生程式碼後，再按右上角【X】鈕關閉對話方塊。17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟四：儲存版面配置檔與自動產生程式碼步驟四：儲存版面配置檔與自動產生程式碼n Visual Designer視窗產生成員功能可以在Process_Globals程序自動產生使用Private宣告的控制項變數，這些是在程式碼模組需要參考的控制項物件，如下所示：Sub Process_Globals Private lblNum

31、ber1 As Label Private lblNumber2 As Label Private lblResult As Label Private txtResult As TextField Private btnAction As ButtonEnd Sub17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟四：儲存版面配置檔與自動產生程式碼步驟四：儲存版面配置檔與自動產生程式碼n 因為勾選btnAction按鈕之下的MouseClicked事件，所以會自動建立此事件的事件處理程序（即Visual Studio的Click事件），如下所示：Sub btnAct

32、ion_MouseClicked(EventData As MouseEvent)End Subn 請注意！不同於Visual Studio，事件處理程序名稱開頭的btnAction是【Event Name】屬性值（位在_底線前），不是【Name】屬性值。17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟五：編輯事件處理程序的程式碼步驟五：編輯事件處理程序的程式碼(Step 1)n Step 1：在AppStart程序新增MainForm.RootPane.LoadLayout()方法載入版面配置檔，即參數Main後，指定MainForm.Title屬性的標題文字（程

33、式碼是位在LoadLayout()方法之後），NewQuestion程序可以產生新的數學加法問題（修改部分是粗體和底線的程式碼），如下所示：Sub AppStart(Form1 As Form,Args()As String)MainForm=Form1 MainForm.SetFormStyle(UNIFIED)MainForm.RootPane.LoadLayout(Main)Load the layout file.MainForm.Title=兒童數學訓練兒童數學訓練 MainForm.Show NewQuestionEnd Sub17-4 使用使用GUI設計工具建立設計工具建立B4J

34、應用程式應用程式-步驟五：編輯事件處理程序的程式碼步驟五：編輯事件處理程序的程式碼(Step 2)n Step 2：新增NewQuestion程序，程序是使用亂數產生2個110之間的數字來建立新的數學加法問題，如下所示：Sub NewQuestion lblNumber1.Text=Rnd(1,10)lblNumber2.Text=Rnd(1,10)lblResult.Text=請輸入答案.txtResult.Text=End Sub17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟五：編輯事件處理程序的程式碼步驟五：編輯事件處理程序的程式碼(Step 3)n Ste

35、p 3：在btnAction_MouseClicked事件處理程序使用If Then/Else條件敘述判斷按鈕的標題文字，如果有輸入就判斷答案是否正確，否則產生下一題數學問題，如下所示：Sub btnAction_MouseClicked(EventData As MouseEvent)If btnAction.Text=回答 Then If txtResult.Text=Then lblResult.Text=沒有輸入答案.Else If txtResult.Text=lblNumber1.Text+lblNumber2.Text Then lblResult.Text=答對了.btnAct

36、ion.Text=下一題 Else lblResult.Text=答錯了,再試一次.End If End If Else NewQuestion btnAction.Text=回答 End IfEnd Sub17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟五：編輯事件處理程序的程式碼步驟五：編輯事件處理程序的程式碼(Step 4)n Step 4：請在Main程式碼模組開頭展開#Region Project Attributes區塊的專案屬性，更改主表單尺寸為500 X 500，如下圖所示：17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟

37、六：編譯與執行步驟六：編譯與執行B4J應用程式應用程式(Step 1)n Step 1：請在B4J執行Project/Compile&Run命令或按F5鍵，可以看到Compile對話方塊顯示的編譯資訊。17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟六：編譯與執行步驟六：編譯與執行B4J應用程式應用程式(Step 2)n Step 2：上述訊息顯示已經完成剖析與程式碼編譯，成功顯示Completed successfully訊息文字，和馬上看到【兒童數學訓練】的執行結果。17-4 使用使用GUI設計工具建立設計工具建立B4J應用程式應用程式-步驟六：編譯與執行步驟六

38、：編譯與執行B4J應用程式應用程式(Step 3-4)n Step 3：請輸入答案，按【回答】鈕，可以在上方顯示答案是否正確。n Step 4：如果回答正確，按鈕的標題文字會改為【下一題】，按下按鈕，可以回答下一題問題。17-5 B4J程式與專案結構程式與專案結構n 17-5-1 B4J專案的程式結構 n 17-5-2 B4J專案的資料夾結構 17-5-1 B4J專案的程式結構專案的程式結構 說明說明n B4J專案的程式結構是由一個一個模組（Modules）檔所組成，這是專案的檔案結構，每一個視窗是一個Form物件，雖然新增視窗並不需要同時新增對應的模組，但實務上，如果是建立多視窗的應用程式，

39、除了主表單物件外，通常會使用一個類別模組來管理一個Form物件。n 基本上，B4J建立的應用程式是由1至多個表單（Forms）組成，對應Visual Studio的Windows表單，每一個視窗包含版面配置檔.bjl的使用介面，我們可以使用GUI設計工具建立此版面配置檔，或自行使用Visual Basic程式碼來新增使用介面。17-5-1 B4J專案的程式結構專案的程式結構 B4J專案的模組（專案的模組（Modules）n B4J專案的模組可以分為兩種，其說明如下所示：類別模組（Class Module）：類別模組就是物件導向程式設計的範本，我們可以使用此類別模組建立多個物件實例，每一個物件實

40、例都擁有自己的狀態。程式碼模組（Code Module）：程式碼模組是一種靜態模組（Static Module），這是一種只能建立1個物件的類別，類別等同物件，我們可以直接使用模組名稱來呼叫方法和存取變數值。17-5-1 B4J專案的程式結構專案的程式結構 B4J程式碼模組的程式結構程式碼模組的程式結構(專案屬性專案屬性)n B4J專案預設建立Main模組，其結構是一個程式碼模組（Code Module），當我們在B4J新增專案時，就會自動建立基本程式結構的專案屬性、Process_Globals程序和AppStart事件處理程序。首先是專案屬性，如下所示：#Region Project At

41、tributes#MainFormWidth:600#MainFormHeight:400#End Regionn 上述#Region/#End Regin區塊預設是摺疊，展開可以看到2個專案屬性用來指定主表單尺寸，即寬（#MainFormWidth）和高（#MainFormHeight），預設值為600和400。17-5-1 B4J專案的程式結構專案的程式結構 B4J程式碼模組的程式結構程式碼模組的程式結構(Process_Globals)n 然後是Process_Globals程序，如下所示：Sub Process_Globals Private fx As JFX Private Mai

42、nForm As FormEnd Subn Process_Globals程序是用來定義全域變數，使用Public宣告的變數是整個專案各模組都可以存取的變數，Private宣告的是目前模組可以存取的全域變數，以此例是Form物件變數MainForm，JFX物件是使用JavaFX使用介面的物件。17-5-1 B4J專案的程式結構專案的程式結構 B4J程式碼模組的程式結構程式碼模組的程式結構(AppStart)n 位在Process_Globals程序下是應用程式啟動時第1個呼叫的AppStart事件處理程序（如同Main()），如下所示：Sub AppStart(Form1 As Form,Ar

43、gs()As String)MainForm=Form1 MainForm.SetFormStyle(UNIFIED)MainForm.RootPane.LoadLayout(Layout1)Load the layout file.MainForm.ShowEnd Subn AppStart事件處理程序的第1個參數是Form物件，所以在第1列就是取得此物件的主表單，然後依序指定表單樣式，和載入表單使用的版面配置檔（預設註解掉此列），最後呼叫MainForm物件的Show()方法顯示主表單。17-5-1 B4J專案的程式結構專案的程式結構 控制項的事件處理程序控制項的事件處理程序n B4J和V

44、isual Studio都是使用事件驅動程式設計來建立應用程式，整個程式結構就是在處理各種事件的事件處理程序，當我們使用GUI設計工具新增控制項（如同Visual Studio控制項）後，例如：新增名為btnAction按鈕控制項，就可以在Main程式碼模組建立處理MouseClicked事件的事件處理程序，如下所示：Sub btnAction_MouseClicked(EventData As MouseEvent)Log(按下按鈕!)End Subn 上述程序是當使用者按下按鈕後執行的事件處理程序，_底線前是控制項的事件名稱（Event Name）屬性值（並不是Name屬性值）；在之後是事件名稱MouseClicked。17-5-2 B4J專案的資料夾結構專案的資料夾結構 1n 當B4J成功編譯專案後，在B4J專案資料夾會新增名為Files和Objects的兩個子資料夾，如下圖所示：17-5-2 B4J專案的資料夾結構專案的資料夾結構 2n Files資料夾是B4J應用程式所需的資源檔案，例如：圖片檔和版面配置檔，在Objects子資料夾是JDK編譯結果產生的Java應用程式檔，副檔名是.jar，如下圖所示：