縹緲's blog

嚴格來說，計算兩點間的距離，應該跟 Android 開發無關，因為這只是要用什麼方式來估算兩個經緯度間的距離而已，不過通常只有手機(或平版)上，才能比較精確的定位，所以就當成是一種開發 app 的應用好了，比如業務人在公司外面，如果有一個 app 可以即時算出所在地附近一定距離內有哪些客戶，對於臨時要做一些拜訪應該是有幫助的。

在還沒開始前，想說先把上一篇的部分做些補充，上次只有提到應用 Google web api 將經緯度轉換成地址，那如果是顛倒的需求，要將地址轉換成經緯度該怎麼做呢？其實也粉簡單，Google api  都已經有提供了，不過這部分一樣受到 2,500次/天 以及呼叫間隔不能太頻繁的限制，呼叫方式如下

於瀏覽器執行的話，可以得到一個 json 格式的回傳值，其中下圖標示紅框的部分，就是該地址轉換後的經緯度

這時候可以透過 Delphi 提供的 TJSONObject、TJsonArray、TJSONPair 等找出 json 中你需要的特定資料

Delphi XE 版本後，為了(也必須)貼近符合 mobile 的開發需要，所以陸續新增了以前在 Windows 環境所沒有的元件，Location Sensor 就是其中一個，mobile 環境中當然不只有這一個Sensor，其他包含 MotionSensor、OrientationSensor、LightSensor、EnvironmentalSensor、MechanicalSensor、ElectricalSensor、BiometricSensor、ScannerSensor 這幾個，不過元件盤中，只看的到 Location Sensor、MotionSensor 與 OrientationSensor

這次要介紹的是 Location Sensor，顧名思義，就是透過 Location Sensor 可以得到目前所在地的經緯度資料，用法很簡單，新增一個專案後，再新增兩個 TButton、數個 TLabel 與一個 TLocationSensor，如下圖

接下來，在取得經緯度的 Button(btnActiveSensor) 以及 LocationSensor1 的 LocationChanged 這個 event，分別撰寫如下程式碼

既然是讀取 Json 資料顯示在手機上，表示 Server 端可能是你自己或是別人提供的，你只是透過 RESTful 的方式來呼叫取得資料而已…如果還有印象的話，這次我們仍要沿用之前用過的一個資料，就是「臺北市旅服中心服務據點資訊」，網址為 http://data.taipei.gov.tw/opendata/apply/NewDataContent?oid=8AC76ABB-A384-4968-AD3C-9E8E9D238168，開啟該網頁，你如果細心一點的話，你會看到台北市政府資料開放平台其實提供兩種格式，第一種是 CSV，另外一個就是 Json 嚕

首先，Delphi XE5 有提供一個新的工具，不過顯然是忘記放在 Tools 的 Menu 裡面了，不過沒關係，你可以自己加入，透過 Menu->Tools->Config Tools...如下圖

然後依據下述畫面逐一鍵入相關資料...

不知不覺...ListBox 已經是這個系列第 10 篇 blog 了，現在才深深體會到寫書人的辛苦，厚厚一本書，不知道要燃燒掉多少青春歲月才能完成啊...本來想維持每週至少寫兩篇 blog 的，不過有時後實在...想偷懶，就像光輝的十月那週，想說跟國家一起放個假吧，所以該週掛零...呵呵

言歸正傳，ListBox 是幾乎每個非遊戲類的 app 都會用到的介面，首先我們先看一下官方的 demo 畫面

所以只要是 app 中需要做一些參數設定的介面，大多都會運用到 ListBox，當然其他資訊的呈現，也可以使用 ListBox，不過如同之前提過的，ListBox 跟 ListView 比起來，前者是比較耗資源的…那麼就讓我們一步一步說明，該做哪些設定才能讓 ListBox「長」的像那個樣子

接下來，以 Android 手機中都會有的一個設定音效畫面，來模擬看看如何做出類似的效果

ListView 與 ListBox 是兩個在 mobile 的世界中，主要用來顯示條列式資訊的元件，ListView 相對於 ListBox 來說，耗用的資源比較少，實際使用的狀況就反映在操作上，捲動的速度會比較流暢，缺點則是客製化的顯示沒有辦法那麼豐富(應該算追求顯示速度的代價吧..)，這次先介紹的是 ListView

其實之前「讀取資料庫資料顯示在手機上」這部分的時候，已經用過 ListView 元件了，不過在這邊還是交代一些基本的屬性

首先先放一個 ListView 在 Form 上，並且將 Align 設定為 alClient，然後為了讓 ListView 有資料可以顯示，我們借用 TPrototypeBindSource 這個元件，這個元件的目的就如同其名，是在建立 Prototype 的程式時，為了看起來比較貼近真實的畫面，因此可以事先模擬資料庫的資料，建立在 TPrototypeBindSource 這個元件中，當然也可以透過 TPrototypeBindSource 本身提供的一些功能，就不用從頭到尾自己建立模擬資料(缺點就是只有英文的...)，如果都完成的話，畫面應該像這樣

接下來在 PrototypeBindSource1 這個元件上用滑鼠左鍵點兩下，會開出如下視窗

TabControl 在 mobile 的世界中，是一個非常基本、也是不可或缺的元件，使用的方式很單純，先在 Form 上擺一個 TabControl 的元件後，就可以在 TabControl 上按滑鼠右鍵，即可得到如下畫面，選擇 Add Item 的 TTabItem 後，即可新增一個頁籤

下圖為新增了兩個頁籤後的樣子

TabControl 比較特別的屬性，就是 TabPosition，主要是用來決定顯示頁籤的 Title 顯示在哪裡(或不顯示)，分別可以設定為 tpTop(預設)、tpBottom、tpDots、tpNone，就讓我偷懶一下把官網的圖貼到這裡來吧...

(1)CalendarEdit 顧名思義就是用來輸入日期的元件，如果將 CalendarEdit.InputSupport 為 True(預設為 False)，則可以自行輸入數字，而非透過選單來選擇日期

(2)ClearEditButton 跟 TEdit StyleLookup 選擇為 clearingeditstyle 長的幾乎一樣，但是 ClearEditButton 的 按下去之後確實會將 Edit 上的文字清除，但  TEdit 的則沒有任何反應

(3)SpinBox 跟 VCL 時代 SpinEdit 的用途是一樣的，就是提供一個可以選擇特定範圍的數值輸入介面

(4)Switch 在 mobile 的世界裡常常看見，一般就是表達該選項是「開」或「關」

TEdit 是在簡單不過的元件，打從 Delphi 1 的時代就有嚕，不過當還在 Windows 年代的時候，TEdit 算是一個很陽春的元件，很多功能 EMBT 並未在 TEdit 上實現，簡單舉個例子，比如限制 TEdit 只能輸入數字，就必須自己寫 code，或是 TEdit 右邊需要一個小按鈕，類似這些基本的「進階」需求，TEdit 都沒有提供，除了仰賴設計師自己的功力外，當然你也可以透過 3rd party 的元件來滿足相關的需求，就不用自己傷腦筋開發了，不過隨著進入 mobile 的時代，EMBT 在 TEdit 上也做了部分功能上的擴充，以便迎合在 mobile 使用情境上的需要…

今天要介紹其中兩個部分，一個是 TEdit.KeyboardType，另外一個則不算是 TEdit 專屬的屬性，就是常常會用到的 StyleLookup

首先來看 KeyboardType，KeyboardType 總共有 8 個值可供設定，主要是依據 Edit 輸入情境的不同來選擇，方便使用者在虛擬鍵盤中可以比較快速選擇到要輸入的資料

預設值是 vktDefault，游標在此 Edit 時，虛擬鍵盤就會跳出來並顯示成這樣

以前在寫 windows 程式的時候，常常會遇到要將一些畫面上的選項、設定值等儲存到 ini 檔案中，以便記住使用者相關的設定，下次使用時不用重複再設定。現在環境轉換到了 Android 有什麼不一樣嗎？

觀念跟需求其實是一樣的，只是 mobile 的作業系統不管是 iOS 或是 Android 檔案結構跟 Windows  不太相同，所以 ini 檔案要存放在哪裡，也就變成一個問題，按照一般的建議，iOS 的部分，應該要存放在 StartUp\Documents\ 目錄中，而 Android 則是 assets\ 目錄，細節跟原因有興趣的話，請自行參閱各作業系統的開發指南

現在就讓我們來實做看看，如果是用 Delphi XE5 該如何處理呢？

(1)首先還是先 New 一個 FireMonkey Mobile Application

(2)簡單置放一個 CheckBox、Edit 與 Button 如下

後端 Server 已經準備好了，那麼重頭戲就要上場，如何把 Database 的資料顯示在 app 上呢？其實粉簡單，delphi 已經把複雜的部分都已經隱藏起來了，還記得前面提過，不用寫任何一行 code  就可以做到這件事嗎？在 Server 端我們的確沒有寫任何一行 code(SQL 語法不算的話)，那麼接下來就說明如何處理 app(Client)這部分

(1)首先在開啟 delphi 之後，點選 File-> New -> FireMonkey Mobile Application

(2)在 wizard 畫面選擇 Blank Application

(3)接下來點選 File-> New -> Other

要展示從資料庫抓取資料顯示到 app 上，首先當然是要建立一個簡單的資料庫，就拿「臺北市旅服中心服務據點資訊」當成這次的展示標的好了

資料來源你可以從台北市政府資料開放平台中取得，網址如下

http://data.taipei.gov.tw/opendata/apply/NewDataContent?oid=8AC76ABB-A384-4968-AD3C-9E8E9D238168

細節就不多說了，取得資料後你可以想辦法匯入到 Database 中，以 SQL Server 為例，Table Name 取名為 NavigationCenter，只從開放平台

的資料中擷取四個欄位，分別是編號、名稱、地址、電話與服務時間，Table Schema 如下

今天要展示的，是如何使用 delphi debug 撰寫好的 app，想到的大概可以用三種方式

(1)把 app Project 的 Target Platforms 改成 32-bit Windows

    這種方式在測試一些程式碼運作邏輯的正確性上，是最為方便的，如果要測試的部分與硬體無關(比如不是使用 sensor)，或是與

    手機 UI 無關的部分，那麼先透過 Windows 的環境驗證，是最為快速也有效的方式。

在開始寫這個簡單到不行的 app 之前，還是讓我們先在確認一下環境，看看官網是怎麼說的

1.XE5 可以安裝在那些 Windows 版本

2.安裝 XE5 所需硬體最小需求

撰寫 blog 的初衷，就是希望能為 delphi 做點啥，這次繼續撰寫並未改變初衷。在 XE5 推出後，delphi 已經可以橫跨四大主要平台，包含 Windows、Mac、iOS 與 Android，你想要開發程式或 app　都輕而易舉，而且用的是同樣的語法、同樣的邏輯、同樣的 IDE 設計介面，加上撰寫出來的都是原生的 code，放眼望去市場上幾乎無人能敵，加上原本 RAD 的優勢，可以讓初學者很快的就撰寫出有模有樣的功能。

個人極為看好這樣的 delphi，有很好的機會重新在開發工具中佔有一席之地，也期望有新的新血能進入 delphi 的領域，讓 Object Pascal 語法可以繼續發光發熱。由於 delphi XE5 主要是為了開發 Android app 而生，加上市面上超過 6、7 成的設備都是使用 Android，設備本身也相對便宜，因此這次後續的文章，是盡量以撰寫給初學者的角度來看，讓沒接觸過 delphi 的使用者，也能一窺 delphi 的奧秘，見識 delphi 如何提高生產力，而非寫 iOS 要學 Objective C，開發 Android 又得學 Java，code 無法共用，就算有些解決方案，包括 PhoneGap 或 c#+Xamarin package，某些程度上能不用撰寫兩次，但有些是靠虛擬機運作，有些在撰寫 back end 的 code 時，無法同時兼顧設計 UI 的畫面，總是讓人覺得不夠直覺，而這一切，交給 delphi 就對了，也許 delphi 在開發 app 上不是銀色子彈，但是相信在一般的應用上絕對是綽綽有餘，困難的還是要開發何種創新應用，撰寫...不再是難事。

因為是希望撰寫給初學者看，所以就想起以前的快快樂樂系列叢書，看了總是讓人覺得很快就可以上手，很快可以獲得成就感，即便部分老鳥不是那麼認同啦...