第17章 使用B4J建立跨平台應用程式 17-1 認識B4J整合開發環境 17-2 下載與安裝B4J開發環境

Presentation on theme: "第17章 使用B4J建立跨平台應用程式 17-1 認識B4J整合開發環境 17-2 下載與安裝B4J開發環境"— Presentation transcript:

1 第17章 使用B4J建立跨平台應用程式 17-1 認識B4J整合開發環境 17-2 下載與安裝B4J開發環境
17-4 使用GUI設計工具建立B4J應用程式 17-5 B4J程式與專案結構

2 17-1 認識B4J整合開發環境 B4J簡介 B4J的基本架構

3 17-1 認識B4J整合開發環境 B4J是B4X開發工具家族的成員，可以讓我們使用Visual Basic語言開發跨平台的桌上型、伺服端和Web應用程式，其兄弟產品B4A能夠使用Visual Basic語言開發Android App；B4i開發iOS App。

4 B4J簡介 B4J（Basic4Java）是以色列Anywhere Software公司開發的整合開發環境，一套完全免費、簡單且功能強大的快速應用程式開發工具（Rapid Application Development，RAD），可以讓我們使用Visual Basic語言開發跨平台桌上型、伺服端和Web應用程式。 微軟.NET Framework雖然也有Mono專案支援跨平台開發，但是開發工具MonoDevelop對於Visual Basic語言的支援並不完整。Anywhere Software公司的B4J提供完整且功能強大的開發環境，可以讓Visual Basic語言的開發者直接使用BASIC語言開發跨平台Windows、Mac OS和Linux應用程式，讓你使用Visual Basic語言撰寫的程式在樹莓派（Raspberry Pi）上執行和連接Arduino。

5 B4J的基本架構-圖例 B4J是在Java平台上提供一層Visual Basic語言的軟體開發層，開發者使用B4J的Visual Basic語言建立專案後，B4J會將Basic語言的程式碼編譯成Java應用程式，簡單的說，我們是撰寫Visual Basic程式碼來開發Java應用程式，使用B4J開發的應用程式就是標準Java應用程式，能夠跨平台在不同作業系統上執行。

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

7 17-2 下載與安裝B4J開發環境 下載與安裝JDK 下載與安裝B4J 啟動與設定B4J

8 下載與安裝JDK-下載JDK JDK（Java SE Development Kit）是Java應用程式的開發套件，包含執行環境和相關工具，可以編譯、除錯和執行Java應用程式。 JDK 8（Java SE Development Kit 8）是JDK第8版，可以在Java官方網站免費下載，其下載網址如下所示： 在上方選【Java Download】圖示後，點選【Accept License Agreement】同意授權，可以在下方點選超連結下載Windows x86的32位元版本（在64位元電腦也可以下載安裝32位元版本），本書使用的下載檔名是【jdk-8u40-windows-i586.exe】。

9 下載與安裝JDK-安裝JDK JDK 8更新版本並不是使用「.」後的次版號來表示，而是改用更新Update標示，在本書是使用JDK 8 Update 40，其下載Windows版JDK的檔名是【jdk-8u40-windows-i586.exe】，我們只需執行此檔案就可以安裝JDK 8。

10 下載與安裝B4J-下載B4J B4J是一套完全免費的整合開發環境，可以直接從Anywhere Software公司的官方網站免費下載，其系統需求是.NET Framework 4.0之上版本。 B4J可以在官方網站免費下載，其下載網址如下所示： 在進入網頁後，請按【Download B4J Full Version】鈕下載B4J，下載檔名是【B4J.exe】。

11 下載與安裝B4J-安裝B4J 在成功下載B4J後，就可以在Windows開發電腦安裝B4J，本書安裝的是3.5版，如下圖所示：

12 啟動與設定B4J-啟動B4J 在安裝最後一步驟如果勾選【Launch B4J】，在安裝後就會馬上啟動B4J，否則，請執行「開始/所有程式/B4J/B4J」命令來啟動B4J，可以進入B4J整合開發環境的使用介面。

13 啟動與設定B4J-設定B4J 接著，我們需要設定B4J，告訴B4J到哪一個路徑可以找到JDK的javac.exe，其步驟如下所示： 請啟動B4J，執行「Tools/Configure Paths」命令，可以看到「Paths Configuration」對話方塊。

14 啟動與設定B4J-結束B4J 離開B4J請執行「File/Exit」命令。

15 17-3 建立第一個B4J應用程式-說明 現在，我們可以啟動B4J整合開發環境建立第一個B4J應用程式，基本上，B4J應用程式的開發步驟和VS Express for Desktop並沒有什麼不同，筆者就不重複說明。 基本上，本節B4J應用程式十分簡單，只是一個在視窗標題列顯示文字內容的空視窗，其主要目的是說明B4J整合開發環境的使用。

16 17-3 建立第一個B4J應用程式- 步驟一：新增與儲存B4J專案(Step 1)
Step 1：請啟動B4J整合開發環境，可以看到預設建立名為Main的程式碼模組，或是執行「File/New/UI(JavaFX)」命令新增B4J專案，如下圖所示：

17 17-3 建立第一個B4J應用程式- 步驟一：新增與儲存B4J專案(Step 2)
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.Show End Sub MainForm物件是主表單視窗，在指定表單樣式後，指定Title屬性值，即視窗標題文字，最後呼叫Show()方法顯示視窗。

18 17-3 建立第一個B4J應用程式- 步驟一：新增與儲存B4J專案(Step 3)
Step 3：在編譯和執行專案前，我們需要先儲存專案（不然會顯示請先儲存專案的錯誤訊息），請執行「File/Save」命令，可以看到「另存新檔」對話方塊。

19 17-3 建立第一個B4J應用程式- 步驟一：新增與儲存B4J專案(Step 4)
Step 4：B4J專案需要儲存在獨立的專屬資料夾，請先切換至儲存路徑後，按上方【新增資料夾】鈕新增名為【Ch17-3】資料夾，再將B4J專案儲存至「D:\程式範例\Ch17\Ch17-3」資料夾，名稱為【FirstProgram.b4j】，按【存檔】鈕儲存專案。

20 17-3 建立第一個B4J應用程式- 步驟二：使用Debug偵錯模式編譯與執行B4J應用程式(Step 1)
當完成B4J專案儲存後，就可以編譯與執行B4J應用程式，預設使用Debug偵錯模式，提供除錯功能，其步驟如下所示： Step 1：請在B4J執行「Project/Compile & Run」命令或按F5鍵，如下圖所示：

21 17-3 建立第一個B4J應用程式- 步驟二：使用Debug偵錯模式編譯與執行B4J應用程式(Step 2)
Step 2：可以看到「Compile & Rapid Debug」對話方塊顯示的編譯資訊。

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

23 17-3 建立第一個B4J應用程式- 步驟二：使用Debug偵錯模式編譯與執行B4J應用程式(Step 4)
Step 4：因為B4J預設使用Debug偵測模式，回到B4J可以看到位在下方的除錯視窗，請執行「Debug/Stop」命令結束偵錯，停止目前程式的執行（也可以直接關閉空視窗）。

24 17-3 建立第一個B4J應用程式- 步驟三：使用Release釋出模式編譯與執行B4J應用程式(Step 1)
實務上，除非程式有錯誤，我們並不需要除錯功能，或是專案已經完成開發，請使用釋出模式來編譯與執行，其步驟如下所示： Step 1：在B4J上方工具列最後的下拉式清單方塊，選【Release】切換成釋出模式，如下圖所示：

25 17-3 建立第一個B4J應用程式- 步驟三：使用Release釋出模式編譯與執行B4J應用程式(Step 2)
Step 2：執行「Project/Compile & Run」命令或按F5鍵，可以看到「Compile」對話方塊顯示的編譯資訊。

26 17-3 建立第一個B4J應用程式- 步驟三：使用Release釋出模式編譯與執行B4J應用程式(Step 3)
Step 3：成功編譯可以看到Completed successfully訊息文字，按【Close】鈕關閉對話方塊，同時可以看到和步驟二相同的空視窗。 在B4J開啟存在專案是執行「File/Open Source」命令，請切換至專案資料夾，選副檔名.b4j的專案檔來開啟B4J專案。

27 17-4 使用GUI設計工具建立B4J應用程式-說明
B4J內建GUI設計工具（Visual Designer）是一套功能強大的視覺化工具，可以如同VS Express for Desktop設計表單一般建立圖形使用介面，提供抽象設計（Abstract Designer）標籤頁來幫助我們建立使用介面。 在這一節筆者準備從啟動B4J新增專案開始，使用完整實例來說明GUI設計工具的使用，這個範例是簡單的【兒童數學訓練】，可以訓練兒童數學的加法運算。

28 17-4 使用GUI設計工具建立B4J應用程式- 步驟一：啟動B4J新增專案(Step 1~2)
我們準備從啟動B4J新增本節B4J專案開始，專案名稱是【SecondProgram.b4j】，其步驟如下所示： Step 1：啟動B4J後，請執行「File/New/UI(JavaFX)」命令新增專案，可以看到和啟動時相同的Main模組和範本程式碼。 Step 2：請執行「File>Save」命令儲存B4J專案，我們是儲存在「D:\程式範例\Ch17\Ch17-4」資料夾，專案名稱是【SecondProgram.b4j】。

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

30 17-4 使用GUI設計工具建立B4J應用程式- 步驟二：在GUI設計工具新增介面控制項(Step 2)
Step 2：在上方Add View功能表包含B4J支援的介面控制項，請執行「Add View/Label」命令新增Label控制項。

31 17-4 使用GUI設計工具建立B4J應用程式- 步驟二：在GUI設計工具新增介面控制項(Step 3)
Step 3：在右邊【Abstract Designer】標籤頁，可以看到新增一個Label控制項（右圖是Label1在「WYSIWYG Designer」視窗的顯示效果），如下圖所示：

32 17-4 使用GUI設計工具建立B4J應用程式- 步驟二：在GUI設計工具新增介面控制項(Step 4)
Step 4：點選Label控制項，請使用四周定位點調整控制項尺寸，和拖拉調整位置，同時在「WYSIWYG Designer」視窗也會一併變更（因為Label1控制項背景預設是透明，並無法明顯看出控制項邊界），如右圖所示：

33 17-4 使用GUI設計工具建立B4J應用程式- 步驟二：在GUI設計工具新增介面控制項(Step 5)
Step 5：同樣方式，請再新增3個Label2~4（或在Label標籤上執行【右】鍵快顯功能表的【Duplicate】命令來複製控制項），和分別調整尺寸和位置，如右圖所示：

34 17-4 使用GUI設計工具建立B4J應用程式- 步驟二：在GUI設計工具新增介面控制項(Step 6)
Step 6：請再分別執行「Add View/TextField」和「Add View/Button」命令，新增TextField文字方塊和Button按鈕控制項，和分別調整尺寸和位置，如下圖所示：

35 17-4 使用GUI設計工具建立B4J應用程式- 步驟二：在GUI設計工具新增介面控制項(Step 7)
Step 7：在左邊的「Views Tree」窗格是控制項的樹狀結構，使用階層結構顯示控制項清單，我們可以在此點選欲編輯的控制項（也可以直接在【Abstract Designer】標籤頁點選），如下圖所示：

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

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

38 17-4 使用GUI設計工具建立B4J應用程式- 步驟三：在GUI設計工具設定控制項的屬性(Step 4)
Step 4：接著輸入【Text】屬性值【回答】，和更改【Size】屬性值【24】來放大尺寸，如下圖所示：

39 17-4 使用GUI設計工具建立B4J應用程式- 步驟三：在GUI設計工具設定控制項的屬性(Step 5)
Step 5：在完成Button1控制項的屬性編輯後，可以看到實際的顯示效果，如右圖所示：

40 17-4 使用GUI設計工具建立B4J應用程式- 步驟三：在GUI設計工具設定控制項的屬性(Step 6)
Step 6：同樣方式，請依序更改Label1~4控制項的屬性值，如右表所示： 控制項 屬性 屬性值 Label1 Name lblResult Background Color White Size 20 Text 請輸入答案 Text Color Red Text Alignment Center Label2 lblNumber1 25 8 Label3 + Label4 lblNumber2

41 17-4 使用GUI設計工具建立B4J應用程式- 步驟三：在GUI設計工具設定控制項的屬性(Step 6)

42 17-4 使用GUI設計工具建立B4J應用程式- 步驟三：在GUI設計工具設定控制項的屬性(Step 7)
Step 7：請更改TextField1控制項的屬性值，如下表所示： 控制項 屬性 屬性值 TextField1 Name txtResult Size 30 Prompt 輸入結果

43 17-4 使用GUI設計工具建立B4J應用程式- 步驟四：儲存版面配置檔與自動產生程式碼(Step 1)
Step 1：在「Visual Designer」視窗提供命令來儲存版面配置檔，請開啟「File」功能表。

44 17-4 使用GUI設計工具建立B4J應用程式- 步驟四：儲存版面配置檔與自動產生程式碼(Step 2)
Step 2：執行「File/Save」命令，可以看到「Create New Layout」對話方塊。

45 17-4 使用GUI設計工具建立B4J應用程式- 步驟四：儲存版面配置檔與自動產生程式碼(Step 3)
Step 3：在【Layout name】欄輸入版面配置檔名稱【Main】，按【Ok】鈕儲存版面配置檔。

46 17-4 使用GUI設計工具建立B4J應用程式- 步驟四：儲存版面配置檔與自動產生程式碼(Step 4)
Step 4：請切換至B4J主使用介面，選右下方【Files Manager】標籤，可以看到我們建立的版面配置檔Main.bjl，如下圖所示：

47 17-4 使用GUI設計工具建立B4J應用程式- 步驟四：儲存版面配置檔與自動產生程式碼(Step 5)
Step 5：因為程式碼需要參考版面配置檔中的控制項物件，請切換至「Visual Designer」視窗來自動產生所需的程式碼，如下圖所示：

48 17-4 使用GUI設計工具建立B4J應用程式- 步驟四：儲存版面配置檔與自動產生程式碼(Step 6)
Step 6：請執行「Tools/Generate Members」命令，可以看到「Generate Members」對話方塊。

49 17-4 使用GUI設計工具建立B4J應用程式- 步驟四：儲存版面配置檔與自動產生程式碼(Step 7)
Step 7：請勾選btnAction和之下的MouseClicked事件、txtResult、lblNumber1、lblNumber2和lblResult，按【Generate Members】鈕產生程式碼後，再按右上角【X】鈕關閉對話方塊。

50 17-4 使用GUI設計工具建立B4J應用程式- 步驟四：儲存版面配置檔與自動產生程式碼
「Visual Designer」視窗產生成員功能可以在Process_Globals程序自動產生使用Private宣告的控制項變數，這些是在程式碼模組需要參考的控制項物件，如下所示： Sub Process_Globals …… Private lblNumber1 As Label Private lblNumber2 As Label Private lblResult As Label Private txtResult As TextField Private btnAction As Button End Sub

51 17-4 使用GUI設計工具建立B4J應用程式- 步驟四：儲存版面配置檔與自動產生程式碼
因為勾選btnAction按鈕之下的MouseClicked事件，所以會自動建立此事件的事件處理程序（即Visual Studio的Click事件），如下所示： Sub btnAction_MouseClicked (EventData As MouseEvent) …… End Sub 請注意！不同於Visual Studio，事件處理程序名稱開頭的btnAction是【Event Name】屬性值（位在「_」底線前），不是【Name】屬性值。

52 17-4 使用GUI設計工具建立B4J應用程式- 步驟五：編輯事件處理程序的程式碼(Step 1)
Step 1：在AppStart程序新增MainForm.RootPane.LoadLayout()方法載入版面配置檔，即參數Main後，指定MainForm.Title屬性的標題文字（程式碼是位在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 NewQuestion End Sub

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

54 17-4 使用GUI設計工具建立B4J應用程式- 步驟五：編輯事件處理程序的程式碼(Step 3)
Step 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 = "答對了..." btnAction.Text = "下一題" lblResult.Text = "答錯了, 再試一次.." End If NewQuestion btnAction.Text = "回答" End Sub

55 17-4 使用GUI設計工具建立B4J應用程式- 步驟五：編輯事件處理程序的程式碼(Step 4)
Step 4：請在Main程式碼模組開頭展開#Region Project Attributes區塊的專案屬性，更改主表單尺寸為500 X 500，如下圖所示：

56 17-4 使用GUI設計工具建立B4J應用程式- 步驟六：編譯與執行B4J應用程式(Step 1)
Step 1：請在B4J執行「Project/Compile & Run」命令或按F5鍵，可以看到「Compile」對話方塊顯示的編譯資訊。

57 17-4 使用GUI設計工具建立B4J應用程式- 步驟六：編譯與執行B4J應用程式(Step 2)
Step 2：上述訊息顯示已經完成剖析與程式碼編譯，成功顯示Completed successfully訊息文字，和馬上看到【兒童數學訓練】的執行結果。

58 17-4 使用GUI設計工具建立B4J應用程式- 步驟六：編譯與執行B4J應用程式(Step 3-4)

59 17-5 B4J程式與專案結構 B4J專案的程式結構 B4J專案的資料夾結構

60 B4J專案的程式結構 – 說明 B4J專案的程式結構是由一個一個模組（Modules）檔所組成，這是專案的檔案結構，每一個視窗是一個Form物件，雖然新增視窗並不需要同時新增對應的模組，但實務上，如果是建立多視窗的應用程式，除了主表單物件外，通常會使用一個類別模組來管理一個Form物件。 基本上，B4J建立的應用程式是由1至多個表單（Forms）組成，對應Visual Studio的Windows表單，每一個視窗包含版面配置檔.bjl的使用介面，我們可以使用GUI設計工具建立此版面配置檔，或自行使用Visual Basic程式碼來新增使用介面。

61 17-5-1 B4J專案的程式結構 – B4J專案的模組（Modules）
類別模組（Class Module）：類別模組就是物件導向程式設計的範本，我們可以使用此類別模組建立多個物件實例，每一個物件實例都擁有自己的狀態。 程式碼模組（Code Module）：程式碼模組是一種靜態模組（Static Module），這是一種只能建立1個物件的類別，類別等同物件，我們可以直接使用模組名稱來呼叫方法和存取變數值。

62 17-5-1 B4J專案的程式結構 – B4J程式碼模組的程式結構(專案屬性)
B4J專案預設建立Main模組，其結構是一個程式碼模組（Code Module），當我們在B4J新增專案時，就會自動建立基本程式結構的專案屬性、Process_Globals程序和AppStart事件處理程序。首先是專案屬性，如下所示： #Region Project Attributes #MainFormWidth: 600 #MainFormHeight: 400 #End Region 上述#Region/#End Regin區塊預設是摺疊，展開可以看到2個專案屬性用來指定主表單尺寸，即寬（#MainFormWidth）和高（#MainFormHeight），預設值為600和400。

63 17-5-1 B4J專案的程式結構 – B4J程式碼模組的程式結構(Process_Globals)
Sub Process_Globals Private fx As JFX Private MainForm As Form End Sub Process_Globals程序是用來定義全域變數，使用Public宣告的變數是整個專案各模組都可以存取的變數，Private宣告的是目前模組可以存取的全域變數，以此例是Form物件變數MainForm，JFX物件是使用JavaFX使用介面的物件。

64 17-5-1 B4J專案的程式結構 – B4J程式碼模組的程式結構(AppStart)
位在Process_Globals程序下是應用程式啟動時第1個呼叫的AppStart事件處理程序（如同Main()），如下所示： Sub AppStart (Form1 As Form, Args() As String) MainForm = Form1 MainForm.SetFormStyle("UNIFIED") 'MainForm.RootPane.LoadLayout("Layout1") 'Load the layout file. MainForm.Show End Sub AppStart事件處理程序的第1個參數是Form物件，所以在第1列就是取得此物件的主表單，然後依序指定表單樣式，和載入表單使用的版面配置檔（預設註解掉此列），最後呼叫MainForm物件的Show()方法顯示主表單。

65 17-5-1 B4J專案的程式結構 – 控制項的事件處理程序
B4J和Visual Studio都是使用事件驅動程式設計來建立應用程式，整個程式結構就是在處理各種事件的事件處理程序，當我們使用GUI設計工具新增控制項（如同Visual Studio控制項）後，例如：新增名為btnAction按鈕控制項，就可以在Main程式碼模組建立處理MouseClicked事件的事件處理程序，如下所示： Sub btnAction_MouseClicked (EventData As MouseEvent) Log("按下按鈕!") End Sub 上述程序是當使用者按下按鈕後執行的事件處理程序，「_」底線前是控制項的事件名稱（Event Name）屬性值（並不是Name屬性值）；在之後是事件名稱MouseClicked。

66 B4J專案的資料夾結構 – 1 當B4J成功編譯專案後，在B4J專案資料夾會新增名為Files和Objects的兩個子資料夾，如下圖所示：

67 B4J專案的資料夾結構 – 2 「Files」資料夾是B4J應用程式所需的資源檔案，例如：圖片檔和版面配置檔，在「Objects」子資料夾是JDK編譯結果產生的Java應用程式檔，副檔名是.jar，如下圖所示：

68 End