跨越 Windows 到 Android 的程式設計 Basic4Android 介紹國立臺南高商林文雄 一 前言程式設計課程是目前高職商業學校資料處理科最主要的專業課程之一, 也是許多學校規劃特色課程的重要方向, 而 Visual Basic( 以下簡稱 VB) 語言則是主要的程式設計語言, 是學生在高職階段頗具挑戰的課程 本校在規劃特色課程中, 為因應現今 3C 科技產品的流行趨勢與提升學生的學習興趣, 也將智慧型行動裝置 App 程式設計列為延伸課程的考量範圍 一般而言 App 程式的撰寫, 主要是以 Java 程式語言為主, 然而在高職階段的學生除了少數極有興趣曾經接觸 C C++ 或 Java 外, 因為課程的關係, 現階段的多數學生仍只有認識 VB 2010 程式語言 因此如何銜接課程內容, 使之具有延續性, 也讓學生不致於花費太多時間即可上線設計 App 程式, 是本校資料處理科課程討論中一直關切的問題 在百般思考與探索下,Basic4Android 或 Basic4iOS 語言正是符合我等期待的程式語言, 可以讓學生從 Windows 無縫接軌到 Android 或 ios 的程式設計應用 因多數學生的智慧型行動裝置主要為 Android 系統, 故本文主要以 Basic4Android( 以下簡稱 B4A) 語言為主, 透過程式設計流程與程式碼之介紹, 期能提供有興趣的教師與各校課程規劃的參考 二 Basic4Android 的優勢 學習程式語言與程式設計是比較花費時間的, 因此若能在有限的時間內, 讓學生快速的上手, 對學習者則較具有即時性的吸引力與學習興趣 且 B4A 對高職學生而言極具親和力, 因此歸納出 B4A 具有以下六點的優勢 : ( 一 ) 環境建置容易, 只要在電腦教室建置無線 Wifi 環境, 並以學生自備的手機或平板為執行平台即可, 所需硬體的負荷有限並不高 或者也可以安裝 Android 介面手機模擬軟體, 執行開發程式亦可, 但利用學生手機或平板為執行平台應會更具吸引力 ( 二 )B4A 與 VB 視窗應用程式發展的操作模式相當類似, 主要步驟有二 : 表單設計與程式碼撰寫, 對於學習過 VB 程式語言的高職學生而言, 使用上不會有什麼太大的困擾 ( 三 )B4A 與 VB 的資料型態 程式碼與控制項物件也頗為相似, 常用控制項物件比較詳如表一所示 此外資料型態 運算式 繪圖 多媒體播放 檔案 資料庫 網路 物件陣列或資源庫等使用方法, 兩者也大同小異 ( 四 ) 國內參考書籍雖然不多, 但尚可提供學習者之參考, 如碁峰 上奇資訊皆有出版 ( 五 ) 線上社群資源豐富, 且為免費註冊使用 ( 六 )B4A 與 VB 無縫接軌, 不必重新學習全新的程式語法, 對學生而言負擔較輕, 也比較會有學習的意願, 因為此一階段在於應用程式 App 的創意設計, 並不在於程式語言的學習 1
表一 :VB2010 與 V4B 常用控制項物件比較 說明 Visual Basic 2010 Basic4Android 表單 Form Designer 標籤 Label Label 文字方塊 TextBox EditText RichTextBox 命令按鈕 Button Button 對話訊息方塊 Msgbox Msgbox MsgBox2 單選鈕 RadioButton RadioButton 複選鈕 CheckBox CheckBox 下拉式清單 ComboBox Spinner 清單選項 ListBox ListView 容器 Panel Panel 瀏覽器 WebBrowser WebView 影像 PictureBox ImageView 進度軸 ProgressBar ProgressBar 計時器 Timer Timer 三 Basic4Android 程式設計步驟 B4A 的程式設計步驟與 VB 2010 視窗應用設計步驟是相同的, 首先都必須先設計視覺化 的視窗界面, 其次才是撰寫程式碼 不同的 B4A 主程式中必須載入表單的指令, 而 VB 2010 通常直接以表單 Form1 為預設界面, 不需要特別的處理, 比較表如表二 為了具體比較兩者 的差異性, 本文將設計一座號抽籤程式來加以說明, 所使用的控制項物件皆不重新命名, 以 預設的控制項物件編號呈現 表二 :VB 與 B4A 的設計步驟比較 VB Basic4Android Step1 表單設計 Form Designer Step2 程式碼撰寫 程式碼撰寫 四 表單與程式碼設計 ( 一 ) 視窗界面 -- 表單設計 1. 在 B4A 的視窗功能表中選取 Designer, 如圖一所示, 隨後即出現 Designer 的設計畫面 2
圖一 :Designer 功能表 2. 選取 Designer 功能表單的 Add View, 即可出現與 VB 2010 相近的 Button CheckBox Label 等控制項名稱, 如圖二 本文程式主要以 Button Label Spinner 三個控制項物件為主, 其中 Spinner 與 VB 2010 的 ComboBox 較為接近 圖二 :Designer 中的 Add View 選單 3. 在功能表下方的 Designer Scripts 標籤, 可以用來設定表單控制項物件的預設值, 以因應智慧型行動裝置的尺寸不同, 動態調整物件大小, 其設計內容如圖三所示, 圖四則為虛擬螢幕視窗 待完成表單設計並儲存檔名為 ChoiceNo 後, 即可回到程式碼編輯區進行程式碼撰寫 圖三 :Designer 中的 Designer Scripts 標籤 3
圖四 : 虛擬螢幕視窗 ( 二 ) 程式碼編輯區說明 B4A 的程式碼編輯區, 預設有五個程序 (Process), 如圖五所示, 並分別說明如下 : 1. Process_Globals Sub Process_Globals 'Process_Globals 此處定義此一 App 下的全域變數, 任何的 ' 程式模組皆可以使用 2. Global Sub Globals 'Globals 定義此 Activity 運作模組下的變數, 僅此一模組內 ' 可以進行存取的變數. 3. Activity_Create App 一開始執行時, 會呼叫這個程序, 此程序中的 FirstTime 參數是 Boolean ( 布林值 ), 若 FirstTime = True 代表第一次執行活動 (Activity) 通常在此程序中來進行一些資料初始化或版面配置的動作, 如載入步驟一儲存表單 ChoiceNo: Sub Activity_Create(FirstTime As Boolean) 'Do not forget to load the layout file created with the ' visual designer. For example: 4
Activity.LoadLayout("ChoiceNo") 4.Activity_Pause 手機或平版上有很多的程式同時在運作著, 當 App 本來在前景使用, 但突然進入背景狀態時 ( 比如說 : 接電話, 或按了 Home 鍵 ), 便會觸發此程序 UserClosed 參數是 Boolean ( 布林值 ), 傳回值可以用來判斷是否為使用者進行了某些操作才讓此 App 進入背景 Sub Activity_Pause (UserClosed As Boolean) 5.Activity_Resume Activity_Resume 和 Activity_Pause 剛好是相反情況, 當 App 本來在背景模式, 但切換至前景狀態時, 便會觸發此程序, 此程序也是會在 Activity_Create 之後會接著執行的程序 Sub Activity_Resume 圖五 : 程式碼編輯區 5
( 三 ) 座號抽籤程式碼說明 Sub Process_Globals Dim Timer1 As Timer ' 宣告控制項物件 Timer1, Timer2 Dim Timer2 As Timer 'VB 2010 中則不用宣告, 在表單中拉入使用即可 Dim p As Phone ' 宣告 p 為手機 Phone 程式庫物件 Sub Globals Dim Label1, Label2, Label3, Label4 As Label ' 同上說明, 使用的控制項 Dim Spinner1, Spinner2 As Spinner ' 都必須宣告,Spinner 與 Dim Button1 As Button 'VB 2010 的 ComboBox 較為接近 Dim X3, X4, TempX3, TempX4, Ntime As Int 'Int 為整數, VB 為 Integer Sub Activity_Create(FirstTime As Boolean) Activity.LoadLayout("ChoiceNo") ' 載入 ChoiceNo 表單 p.setscreenorientation(1) ' 旋轉螢幕為直向 For i=1 To 50 ' 動態增加 Spinner 選單 1-50 Spinner1.Add(i) ' 在 VB 2010 中則為 ComboBox.Items.Add(i) Spinner2.Add(i) ' 用法相近 Next Spinner1.SelectedIndex=0 'Spinner1 預設值為第一個選項 Index=0 Spinner2.SelectedIndex=39 ' 與 VB 2010 中 ComboBox 用法相同 If FirstTime=True Then Timer1.Initialize("Timer1",20) ' 預設 Timer1, Timer 的 Interval 為 Timer2.Initialize("Timer2",20) '20 us 與 VB 2010 定義相同 Spinner1.Color=Colors.White ' 宣告 Spinner1, Spinner2 屬性 Spinner1.TextColor=Colors.Black Spinner1.DropdownBackgroundColor=Colors.White Spinner1.DropdownTextColor=Colors.Black Spinner2.Color=Colors.White Spinner2.TextColor=Colors.Black 6
Spinner2.DropdownBackgroundColor=Colors.White Spinner2.DropdownTextColor=Colors.Black Sub Activity_Resume Sub Activity_Pause (UserClosed As Boolean) Sub Button1_Click ' 開始選號按鈕 TempX3 = Rnd(Spinner1.SelectedItem,Spinner2.SelectedItem+1) ' 產生座號亂數 TempX4=TempX3 Mod 10 ' 取出十位數數字 TempX3=Round(TempX3 / 10+0.5)-1 ' 取出個位數數字 X3 = 0 X4 = 0 Ntime=80 ' 拉霸效果旋轉次數 Label3.Color =Colors.White Label4.Color =Colors.White Timer1.Enabled=True ' 啟動 Timer1 兩位數字的拉霸旋轉效果 Sub Timer1_tick ' 兩位數字的拉霸旋轉效果 Label3.Text = X3 Label4.Text = X3 X3 = X3 + 1 If X3 = 10 Then X3 = 0 ' 由 0-9 循環旋轉 Ntime = Ntime- 1 If Ntime = 0 Then '80 次則停止十位數拉霸旋轉效果 Timer1.Enabled = False ' 停止 Timer1 Ntime = 20 ' 個位數的拉霸效果旋轉效果 20 次 Timer2.Enabled = True ' 啟動 Timer2, 個位數字的拉霸旋轉效果 Label3.Text = TempX3 ' 顯示十位數之數字及背景顏色為洋紅色 Label3.Color =Colors.RGB(255,0,255) 7
Sub Timer2_tick ' 個位數字的拉霸旋轉效果 Label4.Text = X4 X4 = X4 + 1 If X4 = 10 Then X4 = 0 ' 由 0-9 循環旋轉 Ntime = Ntime- 1 If Ntime = 0 Then '20 次則停止個位數字拉霸旋轉效果 Timer2.Enabled = False ' 停止 Timer2 Label4.Text = TempX4 ' 顯示個位數之數字及背景顏色為洋紅色 Label4.Color =Colors.RGB(255,0,255) ' ' 從資源庫中取得音樂檔並播放 ' Dim MP As MediaPlayer ' 宣告媒體播放程式庫 MP.Initialize2("MP") MP.Load(File.DirAssets, "NICEDING.wav") MP.Play Sub Activity_KeyPress (KeyCode As Int) As Boolean ' 手機按鈕確認 Dim Answ As Int If KeyCode=KeyCodes.KEYCODE_BACK Then Answ=Msgbox2(" 確定離開?"," 選座號!"," 是 ", "", " 否 ", Null) If Answ=DialogResponse.POSITIVE Then Activity.Finish() ' 結束模組運作 ExitApplication ' 離開應用程式 Return False 8
( 四 ) 執行畫面 圖六 : 執行畫面示意五 App 分享以下為筆者所自製的三個 App, 可利用手機或平板的瀏覽器至下列網址下載, 需設定手機或平板的安全性中可以允許安裝來源不明的應用程式, 若有安裝藍光濾波器軟體則請暫停其運作, 直至 App 安裝完成後再恢復運作即可 ( 一 ) http://nature.tncvs.tn.edu.tw/apps/tictactoe.apk 井字遊戲 ( 二 ) http:// nature.tncvs.tn.edu.tw/apps/puzzle.apk 拼圖 ( 三 ) http:// nature.tncvs.tn.edu.tw/choiceme.apk 座號抽籤 9