第18章 B4J的跨平台應用程式開發 18-1 B4J的GUI設計工具與介面控制項 18-2 使用B4J的介面控制項 18-3 建立多視窗和多模組應用程式 18-4 使用B4J內建函數庫

18-1 B4J的GUI設計工具與介面控制項 18-1-1 Visual Designer視窗 18-1-2 WYSIWYG Designer視窗 18-1-3 控制項的事件種類 18-1-4 控制項的共同屬性

18-1-1 Visual Designer視窗–圖例 執行「Designer/Open Internal Designer」命令開啟GUI設計工具的「Visual Designer」視窗，如右圖所示：

18-1-1 Visual Designer視窗–主要使用介面1 元件樹：使用樹狀結構顯示控制項之間的關係，選下方【Files】標籤，可以在版面配置檔加入所需的圖檔，例如：控制項的背景圖片，請按【Add Files】鈕加入檔案，在選擇後，按【Remove】鈕可以刪除圖檔。選【Variants】標籤，可以針對不同尺寸和解析度新增不同版面配置變異，請按【New Variants】鈕新增。 屬性清單：當選擇控制項後（也可以在【Abstract Designer】標籤頁選取），可以顯示選擇控制項的屬性清單，這是以群組方式分類，點選之前+或-號可以展開或隱藏屬性，每一個欄位是一個屬性，左邊是屬性名稱；右邊是屬性值。

18-1-1 Visual Designer視窗–主要使用介面2 Abstract Designer標籤頁：以不同色彩方塊來標示控制項的位置和尺寸，其內容是Name屬性值。當在選取控制項上按滑鼠【右】鍵，可以看到一個快顯功能表，提供命令來複製、刪除控制項和調整控制項前後重疊位置，我們可以將它移至最前或推至最後。最後的【Generate】命令能夠自動產生此控制項的宣告程式碼，或建立指定事件的事件處理程序，如右圖所示：

18-1-1 Visual Designer視窗–主要使用介面3 變異腳本：當在B4J專案建立多個不同尺寸的版面配置變異時，為了達到最完美的顯示效果，可以撰寫變異腳本（Variants Script）的程式碼來微調各控制項的顯示。

18-1-1 Visual Designer視窗–功能表 File功能表：可以新增、開啟和儲存使用介面的版面配置檔，其副檔名為.bjl，本書預設名稱是Main.bjl。 Add View功能表：執行命令來新增版面配置所需的控制項，當在右邊【Abstract Designer】標籤看到新增的控制項後，就可以拖拉調整位置、尺寸和修改其屬性值。 Tools功能表：提供命令來自動產生成員（Generate Members），和更改網格尺寸的單位。 Windows功能表：可以快速開啟指定窗格。

18-1-2 WYSIWYG Designer視窗 B4J的「Visual Designer」視窗是在【Abstract Designer】標籤顯示控制項的編排，使用的是不同色彩的色塊，我們可以在獨立「WYSIWYG Designer」視窗檢視使用介面的顯示效果，如下圖所示：

18-1-3 控制項的事件種類 控制項 支援的事件種類 Button、Label、Pane Resize、MouseClicked、MouseMoved、MouseDragged、MousePressed、MouseReleased、FocusChanged Canvas、ImageView MouseClicked、MouseMoved、MouseDragged、MousePressed、MouseReleased、FocusChanged CheckBox CheckedChange ColorPicker ValueChanged ComboBox ValueChanged、SelectedIndexChanged ListView SelectedIndexChanged、Resize、MouseClicked、MouseMoved、MouseDragged、MousePressed、MouseReleased、FocusChanged RadioButton、ToggleButton SelectedChange ScrollPane VscrollChanged、HscrollChanged、Resize、MouseClicked、MouseMoved、MouseDragged、MousePressed、MouseReleased、FocusChanged TextArea、TextField TextChanged、MouseClicked、FocusChanged WebView LocationChanged、PageFinished、MouseClicked、MouseMoved、MouseDragged、MousePressed、MouseReleased、FocusChanged

18-1-4 控制項的共同屬性 屬性 說明 Name 控制項名稱，建議使用有意義的名稱，和在開頭使用3個字元來標示控制項種類，例如：lbl、btn、txt等 Type 控制項型態的唯讀屬性 Event Name 處理事件的事件處理程序名稱，預設與Name屬性值相同。事件處理程序名稱的格式是此屬性值加上「_」符號，再加上事件名稱，例如：Event Name屬性值Button1的MouseClicked事件處理程序名稱為Button1_MouseClicked Parent 父控制項名稱（有些控制項是容器元件，可以包含子控制項），最上層是Main Left 相對父控制項左方邊界的X軸座標 Top 相對父控制項上方邊界的Y軸座標 Width 控制項的寬度 Height 控制項的高度 Enabled 控制項是否可以使用，True是可以；否為不可以 Visible 控制項是否可見，True是可見；否為隱藏 Tag 用來儲存額外資訊的字串

18-2 使用B4J的介面控制項 18-2-1 文字功能控制項 18-2-2 選擇功能控制項

18-2-1 文字功能控制項- TextField和TextArea控制項 B4J的文字輸入控制項共有兩種，其說明如下所示： TextField控制項：輸入單行文字內容，即單行文字方塊。 TextArea控制項：輸入多行文字內容，即多行文字區塊。 在「Visual Designer」視窗是執行「Add View/TextField」命令和「Add View/TextArea」命令來新增。TextField和TextArea控制項都是使用Text屬性來指定和取得輸入值，如下所示： Dim h As Double = txtHeight.Text / 100.0 Dim w As Double = txtWeight.Text 上述程式碼取得TextField控制項txtHeight和txtWeight輸入的值，B4J會自動將字串內容轉換成浮點數。

18-2-1 文字功能控制項- Label控制項 Label控制項是用來作為欄位說明，或輸出執行結果的文字輸出控制項。在「Visual Designer」視窗是執行「Add View/Label」命令來新增，我們也是使用Text屬性來取得和指定顯示的內容。

18-2-1 文字功能控制項-B4J專案 B4J專案：Ch18-2-1\BMI計算機.b4j 在B4J專案建立簡單的BMI計算機，只需輸入身高和體重，就可以計算和顯示BMI值，如下圖所示：

18-2-2 選擇功能控制項-RadioButton控制項 RadioButton控制項是一種單選控制項，在「Visual Designer」視窗是執行「Add View/RadioButton」命令來新增。因為RadioButton控制項通常是一組選項，在B4J需要使用程式碼來群組多個RadioButton控制項，如下所示： rdbAdd.GroupRadioButtons( _ Array(rdbAdd, rdbDivide,rdbMultiply,rdbSubtract)) 上述程式碼呼叫RadioButton物件的GroupRadioButtons()方法（任何一個RadioButton物件都可以），參數是一組RadionButton物件的陣列。 在B4J是使用RadioButton控制項的Selected屬性判斷是否選擇此選項，如下所示： If rdbAdd.Selected Then op = 1

18-2-2 選擇功能控制項-CheckBox控制項 CheckBox控制項是一種複選控制項，在「Visual Designer」視窗是執行「Add View/CheckBox」命令來新增。在B4J是使用If/Else條件配合Checked屬性來判斷是否勾選CheckBox控制項，如下所示： If chkDivide.Checked Then result = IntDivide(opd1, opd2) ' 整數除法 Else result = opd1 / opd2 ' 除 End If

18-2-2 選擇功能控制項-B4J專案 B4J專案：Ch18-2-2\四則計算機.b4j

18-3 建立多視窗和多模組應用程式 18-3-1 多視窗的BMI計算機 18-3-2 多模組的四則計算機

18-3 建立多視窗和多模組應用程式 B4J的每一個視窗是一個Form物件，我們只需新增Form物件就可以建立多視窗的B4J應用程式，為了方便管理Form物件，一個Form物件對應一個類別模組（Class Module）。 為了重複使用程序與函數，我們可以建立程式碼模組（Code Module），將B4J專案共用的程序與函數改置於程式碼模組。

18-3-1 多視窗的BMI計算機-說明 多視窗的BMI計算機是將第18-2-1節的範例切割成2個視窗，在第1個MainForm視窗輸入身高和體重，按下按鈕，顯示第2個Form2視窗來顯示計算結果的BMI值，我們需要分別新增對應2個視窗的版面配置檔。

18-3-1 多視窗的BMI計算機- 在B4J專案新增類別模組（Class Module） 當開啟和儲存B4J專案後，就可以新增其他類別模組，例如：Form2，其步驟如下所示： Step 1：請執行「Project/Add New Module/Class Module」命令新增類別模組。 Step 2：在「Add New Module」對話方塊的【Enter module name】欄，輸入模組名稱Form2，按【Ok】鈕新增模組。

18-3-1 多視窗的BMI計算機- Form2類別模組(Class_Globals) 基本上，我們是在Form2類別模組建立第2個視窗的Form物件，首先在Class_Globals程序宣告Form物件frm，如下所示： Sub Class_Globals Private frm As Form Private lblOutput As Label End Sub

18-3-1 多視窗的BMI計算機- Form2類別模組(Initialize建構子) 然後建立初始物件的建構子方法Initialize()，這是B4J預設的建構子方法名稱，如下所示： Public Sub Initialize(title As String, Owner As Form) frm.Initialize("frm", 260, 150) frm.Resizable = False frm.RootPane.LoadLayout("Result") frm.Title = title frm.SetOwner(Owner) End Sub Initialize()方法的參數是視窗標題文字和擁有者的Form物件（可自行定義），在方法的程式碼是呼叫frm.Initialize()方法初始Form物件，第1個參數是事件名稱，之後是視窗尺寸的寬和高。 Resizeable屬性指定是否允許使用者更改視窗尺寸，False為不可以，然後呼叫方法載入版面配置檔，接著指定標題文字和呼叫SetOwner()方法指定擁有者，如此在顯示視窗時，它會位在擁有者視窗之上。

18-3-1 多視窗的BMI計算機- Form2類別模組(Show方法) 在類別模組擁有Show()方法來顯示視窗frm表單，如下所示： Public Sub Show frm.Show() lblOutput.Text = "BMI值：" & Main.BMI End Sub 上述方法呼叫Show()方法顯示視窗，關閉視窗是使用Close()方法。

18-3-1 多視窗的BMI計算機- 開啟Form2視窗 MainForm主視窗是在Button1按鈕的MouseClicked事件處理程序開啟Form2視窗，如下所示： Dim frm As Form2 frm.Initialize("顯示BMI值", MainForm) frm.Show() 上述程式碼呼叫Initialize()方法初始Form2物件，然後呼叫Show()方法顯示第二個視窗，BMI值是使用行程變數BMI傳遞至此視窗。

18-3-1 多視窗的BMI計算機-B4J專案 B4J專案：Ch18-3-1\多視窗的BMI計算機.b4j 在B4J專案建立多視窗的BMI計算機，這是修改自第18-2-1節的B4J專案，在主視窗輸入身高和體重，按下按鈕，可以在第2個視窗顯示計算結果的BMI值，如下圖所示：

18-3-2 多模組的四則計算機-說明 多模組的四則計算機是修改自第18-2-2節範例，新增程式碼模組，將相關程序和函數都改集中置於程式碼模組檔案。 在B4J專案新增程式碼模組（Code Module） 在開啟和儲存B4J專案後，就可以執行「Project>Add New Module>Code Module」指令新增程式碼模組。

18-3-2 多模組的四則計算機- MyTools程式碼模組 在MyTools程式碼模組有Cal函數計算四則運算式的值；IntDivide函數是整數除法。 當B4J專案的其他模組需要呼叫位在MyTools程式碼模組的程序與函數時，我們需要使用加上模組名稱的全名，如下所示： result = MyTools.Cal(opd1, opd2, op) ...... result = MyTools.IntDivide(opd1, opd2) 上述函數名稱需要指定模組名稱MyTools。

18-3-2 多模組的四則計算機-B4J專案 B4J專案：Ch18-3-2\多模組的四則計算機.b4i 在B4J專案建立多模組的四則計算機，這是修改自第18-2-2節的B4J專案，將與使用介面處理無關的函數都抽出建立成MyTools程式碼模組，其執行結果和第18-2-2節完全相同。

18-4 使用B4J內建函數庫 18-4-1 檔案讀寫 18-4-2 繪圖

18-4 使用B4J內建函數庫 B4J是使用函數庫來擴充功能，提供眾多內建函數庫來處理SQL資料庫、檔案和多媒體等功能。在內建函數庫最重要的是「核心函數庫」（Core Library），提供建立B4J應用程式所需的基礎物件，包含：語法關鍵字、字串、日期/時間、計時器、集合物件和檔案等物件。 B4J物件的方法、屬性和事件的說明，可以在官方文件查詢，其網址如下所示： http://www.b4x.com/b4j/documentation.html 這一節我們就來看一看核心函數庫的檔案和Canvas物件的繪圖功能。

18-4-1 檔案讀寫-說明 B4J是使用預定關鍵字File的方法來讀寫檔案，我們可以將字串、List和Map物件存入檔案，和從檔案讀取字串、List和Map物件。

18-4-1 檔案讀寫-B4J標準目錄的儲存位置 B4J標準目錄是我們可以讀寫檔案的目錄位置，每一個標準目錄擁有不同的用途，如下所示： File.DirApp：B4J應用程式所在的目錄。 File.DirAssets：唯讀目錄，這是在B4J的【Files Manager】標籤新增的檔案，我們可以使用此目錄來讀取檔案內容或圖檔。 File.DirTemp：暫存檔案的目錄。

18-4-1 檔案讀寫-File預建物件的方法 B4J提供File預建物件來處理檔案、資料夾和文字檔案讀寫。相關方法說明如下表所示： 方法 File.WriteString(Dir, FileName, Text) 第1個參數是儲存目錄，第2個參數是檔案名稱，可以將參數Text字串寫入檔案 File.ReadString(Dir, FileName) 讀取參數檔案傳回檔案內容字串 File.WriteList(Dir, FileName, List) 將參數List物件寫入參數檔案 File.ReadList(Dir, FileName) 讀取參數檔案傳回檔案內容的List物件 File.WriteMap(Dir, FileName, Map) 將參數Map物件寫入參數檔案 File.ReadMap(Dir, FileName) 讀取參數檔案傳回檔案內容的Map物件 File.Exists(Dir, FileName) 檢查參數的檔案是否存在，傳回True表示存在；False為不存在

18-4-1 檔案讀寫-B4J專案 B4J專案：Ch18-4-1\檔案讀寫.b4j 在B4J專案測試File預建物件的檔案讀寫方法，擁有6個按鈕，可以分別寫入字串、List物件和Map物件至檔案，和從檔案讀取字串、List物件和Map物件，如下圖所示：

18-4-2 繪圖-畫圓 在畫布畫圓是使用Canvas物件的DrawCircle()方法，如下所示： cvCanvas.DrawCircle(50, 40, 25, fx.Colors.Red, True, 3) 上述方法的前2個參數是圓心(x, y)座標，第3個參數是半徑，第4個參數是色彩，這是JFX物件的色彩常數值，第5個參數決定是否填滿，值True是填滿；False只繪出邊框，最後1個參數是線條寬度。

18-4-2 繪圖-畫長方形 Canvas物件繪出長方形方法是DrawRect()方法，如下所示： cvCanvas.DrawRect (20, 80, 150, 100, fx.Colors.Blue, False, 3) 上述方法的前2個參數是長方形左上角座標(x, y)，後2個是寬和高，第5個參數是JFX物件的色彩常數，第6個參數決定是否填滿，值True是填滿；False只繪出邊框，最後1個參數是線條寬度。

18-4-2 繪圖-畫直線 Canvas物件是呼叫DrawLine()方法繪出直線，如下所示： cvCanvas.DrawLine(20, 200, 160, 200, fx.Colors.Green, 3) 上述方法的前2個參數是第1個點(x1, y1)座標，第3和4個參數是第2個點(x2, y2)座標，第5個參數是JFX物件的色彩常數，最後1個參數是線寬度。

18-4-2 繪圖-畫出圖檔 我們可以在畫布繪出圖檔，首先需要建立Image物件，如下所示： image1.Initialize(File.DirAssets, "Cow.jpg") 上述程式碼建立Image物件，Initialize()方法的第1個參數是目錄，File.DirAssets是【Files Manager】標籤新增的圖檔，第2個參數是圖檔名稱字串。然後使用Canvas物件的DrawImage()方法繪出圖檔的Image物件，如下所示： cvCanvas.DrawImage(image1, 20, 220, image1.Width/2, image1.Height/2) 上述方法的第1個參數是繪出的Image物件，第2~3個參數是左上角座標，最後2個是圖片尺寸的寬和高。

18-4-2 繪圖-畫出文字內容 Canvas物件是使用DrawText()方法在畫布繪出文字內容，首先需要建立Font字型物件，如下所示： Dim f As Font f = fx.CreateFont("Courier New", 20, True, False) cvCanvas.DrawText("B4J程式設計!", 20, 320, f, fx.Colors.Red, "LEFT") 上述程式碼呼叫JFX物件的CreateFont()方法建立Font字型物件，DrawText()方法的第1個參數是繪出的字串，第2和3個參數是繪出位置的參考座標(x, y)，繪出座標會因文字對齊方式而不同，第4個參數是字型，第6個參數是文字色彩，最後1個參數是文字對齊方式，可以是："LEFT"、"CENTER"和"RIGHT"。

18-4-2 繪圖-B4J專案 B4J專案：Ch18-4-2\繪圖.b4j 在B4J專案測試Canvas物件的繪圖方法，和顯示Cow.jpg圖檔，如右圖所示：

End