Get HTML/JSON from TWebBrowser FireMonkey (Delphi XE7)

Starting

FireMonkey starts from Delphi XE2, this new framework provides many powerful components and runtime library, and the most important point is, most of the components can be used cross-platform.

XE2 -> iOS fundmental features ready.
XE3-XE5 -> Android features were appended.
XE6 -> Almost features were ready, but minor performance issue remained.
XE7 -> Everything is ready, we still need some completion for couple components.

With mobile apps development, we need to connect the web server from time to time. Indy components play as a proper role for Delphi and C++ Builder, but the SSL feature is not perfect yet.

Hence, we still need TWebBrowser for user to interact with website, if the feedback or redirect path contains HTTPS URL, e.g., Facebook login, Google+ login.

However, there is no interfaces provided by TWebBrowser for retrieving the content of the page.

A->B, B->C, C->D

It's said in some movies, "Genius can get A to D without intermediate path, other cannot", I am not genius, so I have to find out A->B, B->C, C->D to achieve A->D.

The following is my thought:
A->D, A is the TWebBrowser, D is retrieveing content.

TWebBrowser cannot get content, but it can run Javascript without return value.
Javascript can get the content, but there is no way to send the content back to Delphi.
TWebBrowser can get the URL, which the browser wish to navigate.
Javascript can redirect the web browser to another specific URL.

So, the workaround is:
1. waiting for the target URL we want to get the content, e.g. the Google+ login result page.

http://www.moveinpocket.com/demo/GoogleLogin_API/index2.php (login page)

https://www.googleapis.com/oauth2/v1/userinfo?access_token= (login success page, the user information will be sent back with JSON format.)

2. if the login success page is done, the onDidFinishLoad event handler will handle the JSON Page:

if (Pos('https://www.googleapis.com/oauth2/v1/userinfo?access_token=',
        self.WebBrowser1.URL) = 1) then begin

            js := 'var markup = document.documentElement.innerText;' + #13 + #10
                + 'var newURL = "http://1.1.1.1/" + markup;' + #13 + #10 +
                'window.location = newURL;';
            self.WebBrowser1.EvaluateJavaScript(js);
    end;

3. Javascript redirect the browser to http://1.1.1.1/ (you can modify it to another http url), and append the JSON data (innerText in above codes) to the URL.

4. Let onShouldStartLoadURL of Browser to get "http://1.1.1.1/" url, then we got the content in Delphi!

if (Pos('http://1.1.1.1/', URL) = 1) then begin
        self.WebBrowser1.Height := 1;
        jsonStr := URL;
        Fetch(jsonStr, 'http://1.1.1.1/');

        jsonStr := TIdURI.URLDecode(jsonStr, IndyTextEncoding_UTF8);

        ShowMessage('got it');
        self.Memo1.Lines.Text := jsonStr;
        self.TabControl1.ActiveTab := self.TabItemResult;
    end;

I had search some work around with the following key words in Google, Stackoverflow, and it's pity that there is no any solution yet:
Delphi, FireMonkey, WebBrowser, get HTML, get JSON, get Content.

So, this work around might be the only way to get content from TWebBrowser, if you need the sample project, please download from here.

Best Regard, and Enjoy your Delphi.
Dennies Chang.

如何用 FireMonkey 的 TWebBrowser 取回 JSON 資料

緣起

從 Delphi XE2 開始, FireMonkey就包含了跨平台的TWebBrowser元件(Windows版本跟行動版本是分開的, 我記得Windows版本的 TWebBrowser 元件, 是 VCL 版本的 ActiveX),但從 XE2 開始到 XE6, 每一版的 TWebBrowser 都少了點東西.

XE2到XE4都沒有Android版本的WebBrowser, 到 XE5 總算行動平台的 WebBrowser 都具備了, 但在網頁當中的 Form 輸入文字, 卻有選擇了文字無法傳送到文字框的缺失, 這個問題在 XE6 被解決掉了，XE6 的 WebBrowser 又有了效能不夠好的問題。

到了 XE7，終於大多數問題都被解決掉了，也加入了強制執行 Javascript 的功能，可謂十全八美 (按：iOS執行 Javascript之後，可以把執行後的字串當成回傳值讓 UIWebBrowserDelegate 處理，Delphi XE7 目前還不行)。

另外，也還無法直接 access WebBrowser 裡面的內容，在以往我們使用 VCL 版本的 TWebBrowser 時，我們至少還可以透過 ActiveX 介面取得 innerHTML 或者 innerText，然而目前在行動裝置上，FireMonkey 並沒有可以讓我們可以取得內容的途徑。

由A到B 由B到C 由C到D的轉折

俗話說「山不轉路轉」，TWebBrowser沒有可以 access 內容的途徑，但是Javascript有。Javascript 不能把字串直接傳給 Delphi 程式碼，但是可以把字串當成Javascript 的變數。TWebBrowser 不能直接取得內容，但可以取得網址。

所以，筆者兜兜轉轉，拼湊出了這麼一套方法：

1. 先確定進入了我們需要的內容網址，筆者以自己寫的 Google+ 登入網頁作為範例。

http://www.moveinpocket.com/demo/GoogleLogin_API/index2.php (登入)

https://www.googleapis.com/oauth2/v1/userinfo?access_token= (登入成功頁, 會以 JSON 格式回傳使用者的資料)

2. 檢查是否進入了登入成功頁，如果進入了，就讓 WebBrowser 執行Javascript，把 innerText 抓出來當字串變數。

if (Pos('https://www.googleapis.com/oauth2/v1/userinfo?access_token=',
        self.WebBrowser1.URL) = 1) then begin

            js := 'var markup = document.documentElement.innerText;' + #13 + #10
                + 'var newURL = "http://1.1.1.1/" + markup;' + #13 + #10 +
                'window.location = newURL;';
            self.WebBrowser1.EvaluateJavaScript(js);
    end;

3. 用 Javascript 的 redirect 方法：windows.location，轉到一個不存在的網址，把innerText 當成該網址的參數，不用名字，直接接在網址後面就行了。

4. 透過 TWebBrowser 的 ShouldStartLoadURL， 就可以抓到這串字了。

if (Pos('http://1.1.1.1/', URL) = 1) then begin
        self.WebBrowser1.Height := 1;
        jsonStr := URL;
        Fetch(jsonStr, 'http://1.1.1.1/');

        jsonStr := TIdURI.URLDecode(jsonStr, IndyTextEncoding_UTF8);

        ShowMessage('got it');
        self.Memo1.Lines.Text := jsonStr;
        self.TabControl1.ActiveTab := self.TabItemResult;
    end;

也太費功夫了吧⋯⋯ 不過沒辦法，這方法還真的能抓到TWebBrowser的內容喔。

使用時機

大家可能會問我：為什麼不用IdHttp，或者 TRESTClient來抓資料，這麼費神幹嘛，你自己不是Indy的愛用者嗎？

是的，筆者愛用Indy是事實，也還寫了Indy的書沒有錯，但有時候還是會有需要用TWebBrowser的時候，像是如果需要用 Google+ 當作登入頁，試問除了TWebBrowser，還有什麼方式可以做到？

這時候千萬別回我「用IdHTTP」喔，在行動裝置上的IdHTTP，對https網址是無法載入的，不信可以試試看。所以認命點，這是你在全球唯一能找到的解決方法了，問問我怎麼這麼有自信？因為我才剛在寫這篇文章之前做過功課，從 stackoverflow，到 edn，到Marco cantu的 Blog，expert-exchange，KTOP我都找過了，到2015年一月，目前也只有這個解法了，請相信！

以下，附上範例程式碼，太長的內容我不保證一定成功喔，但JSON資料還OK啦。
本篇文章範例程式專案

Virtual Keyboard 的顯示與隱藏

緣起

在 iOS app 裡面, 很多時機仍舊需要使用者輸入文字, 因此 iDevice (iPhone, iPad, iPod Touch) 上面的虛擬鍵盤就很重要。

然而，在 Delphi 上面，我們要構成一個完整的 app 畫面，需要許多的設計，包含美術設計與介面設計，美術設計會構築美觀的畫面，而介面設計跟程式設計的人則賦予這個畫面完整的功能。

如果您很習慣於使用 XCode 來製作 iOS app, 一定很常使用 UIImageView 或者 TapDetectingImageView 來取代一般的 UIButton, 因為 UIButton 常常在圖片的調整上面不精準，會讓整個畫面跟原來美術設計的構想差距很大。

所以，這個觀念在轉向到 Delphi 設計 app 的時候，也就會有一樣的擔憂，進而也使用 Delphi 的 TImage 來構築畫面，在 TImage 上面建立 onClick 的事件處理常式，把 TImage 當成 TButton 來用，畢竟這樣使用，在畫面的呈現上，要比先把一個 TButton 放到畫面上，再把圖片拉進到 TButton 裡面去要更為精準，也更為直接。

然而，在這種作法之下，居然產生了很大的副作用，所以有了這篇分享文章的誕生。

Virtual Keyboard 的顯示

圖一: 主要討論介面，模擬登入

我們接下來在整篇文章當中都會以圖一作為討論的介面，因為筆者已經把所有重點都濃縮在這個畫面當中了。

一般來說，只要是有需要使用者登入的介面，大多會有帳號、密碼的輸入框，就像上圖當中的 Account 跟 Password 欄位，當我們觸碰輸入框 (在本例是 TEdit) 的時候，虛擬鍵盤就會自動出現，如圖二所示。

圖二:虛擬鍵盤出現了

虛擬鍵盤旁邊有時候會有些 Done, Prev, Next 的功能按鈕，但介面上的設計就是要讓使用者自由自在的使用，所以我們在設計介面的時候，沒辦法規定使用者一定只能照著特定的操作步驟來用 app.

以圖二當中的登入畫面來看，如果密碼欄位旁邊有個『登入』按鈕，大多數的使用者一定會直接點選它，並期盼虛擬鍵盤會自己消失，然後完成登入的動作，切換到下一頁，幾乎不會有使用者先把虛擬鍵盤關掉，然後才去點選『登入』按鈕的，這個程序在 iPad 就更是如此了。

因此，在圖一一開始製作的時候，筆者就設定了三個按鈕在上面，分別是最上方的『By Button』，這是一個 TButton 元件，然後筆者再把 TImage 跟 TLabel 放進裡面去，如果還不知道這個步驟要如何達成，請參考筆者之前這篇文章。

第二列則有兩個按鈕，都是 TImage 當中直接放了一個 TLabel 來製作的，因為有實作出 onClick 事件，所以點選它的時候，也可以跟點選 TButton 有幾乎完全相同的效果，當然，筆者一開始也是這樣以為的，只是，遇到了虛擬鍵盤的時候，就多了很多需要注意的地方，以下，且聽我為您娓娓道來。

使用 TButton

如果我們的『登入』按鈕是一個TButton, 那麼，只需實作它的 onClick 事件處理常式，其他什麼都不用管，點擊它，虛擬鍵盤就會消失，並且執行按鈕的 onClick 事件處理常式，如圖三所示。

圖三: 點選了By Button 按鈕，虛擬鍵盤消失，顯示 ShowMessage 的內容.

使用 TImage

接著，我們用 TImage 來試試看，同樣只實作它的 onClick 事件處理常式，然後點擊這個 TImage 看看，這是圖三當中下面那列按鈕的右方按鈕。

圖四:點擊了 TImage, 虛擬鍵盤卻沒有消失

這時候，TImage 的 onClick 事件處理常式程式碼如下:
procedure TForm1.Image2Click(Sender: TObject);
begin
   ShowMessage('IMage Clicked');
end;

單純的 ShowMessage, 沒辦法隱藏虛擬鍵盤, 如果這個動作還會把整個畫面釋放掉的話，引起的問題就會更多，甚至會造成 Access Violation, 原因是從 iOS 向上層層回傳的 SingleTap 事件沒有元件可以處理，所以造成了 Access Violation.

要解決這個問題，可以無副作用解決的方法有二：
1. 用 TButton 來包覆 TImage, 這樣就不會有上面的問題。
2. 在 TImage 的 onClick 事件處理常式當中，首先就把 Focus 轉移到其他可以取得 Focus 的元件上，例如途中的 CheckBox, 改過後的程式如下：
procedure TForm1.Image3Click(Sender: TObject);
begin
   self.CheckBox1.SetFocus;
   ShowMessage('Image clicked with transfer focus');
end;

而執行後的程式畫面則如圖五:

圖五: 把 Focus 移轉後的畫面

當然，鐵齒如我，也嘗試過了很多方法，例如把 TVirtualKeyboard 從系統中硬鏟出來，然後呼叫它的 HideVirtualKeyboard 方法：

首先宣告
FService: IFMXVirtualKeyboardService;

procedure TForm1.FormCreate(Sender: TObject);
begin
    if TPlatformServices.Current.SupportsPlatformService
        (IFMXVirtualKeyboardService, IInterface(FService)) then begin
    end;
end;

procedure TForm1.Image3Click(Sender: TObject);
begin
   FService.HideVirtualKeyboard;
end;

這樣在畫面上，看起來的確是會把虛擬鍵盤弄不見，但如果沒有把 Focus 先移到別的元件上頭，切換到下一個畫面以後，就會發現不管點什麼，還是會出現 Access Violation, 所以別鐵齒。

要強制虛擬鍵盤出現，就直接在該 Edit/Memo 元件上面設定 Focus, 如前面的程式碼範例中的 self.CheckBox1.SetFocus;

要強制虛擬鍵盤出現，就把 Focus 從編輯文字的元件上移除即可。

本篇文章的範例程式，可以在這裡下載。

FireMonkey v.s. VCL 之一 - 動態產生視覺元件的差異

在撰寫程式的過程中，對於畫面的製作，會隨著程式經驗與類型的積累，產生幾種演進：

所有畫面都事先在DesignTime，也就是設計階段，把畫面都先處理好

能在設計階段製作的，先在設計階段處理，不行的部分，在RunTime即時產生

所有畫面都在RunTime 產生

演進的狀況不外乎上述三種，但未必每個程式人員都有機會遭遇到全部三種狀況，也很難說那一種做法是功力最高的，因為所有的程式製作方法，都應該視當時的條件來決定製作的方式，這些條件包含了：

開發時程 - 有時候很多專案會被要求在極短的時間之內完成，沒時間，就沒機會使用全RunTime的做法完成。

對FootPrint （整個編譯結果的檔案大小）的要求- 如果遇到只能在非常局限的磁碟空間中安裝，完全RunTime 的做法或許是達成要求的唯一方法。

便於團隊對程式碼的長久維護- 此時就要考慮整個團隊的程式設計習慣，挑選適合的做法。

且不管最後選了哪一種，在RunTime建立畫面的需求都是可能會存在的，所以我們在此對完成這個需求的方法做些介紹。，也就是動態產生元件的方法，並就VCL跟 FireMonkey 兩種架構的差異進行比較。

我們以最簡單的，在 Form 上面建立 Button 的程序進行比較

VCL版:
procedure TForm1.btnAddButtonClick(Sender: TObject);
var
    btn: TButton;
    countByRow, idx: integer;
begin
    btn := TButton.Create(self);
    btn.Parent := self.Panel1;

    self.ButtonList.Add(btn);
    idx := self.ButtonList.IndexOf(btn);
    btn.Caption := 'btn' + IntToStr(idx);

    countByRow := (self.Panel1.Width div btn.Width);
    btn.Left := idx mod (countByRow) * btn.Width + 10;
    btn.Top := idx div (countByRow) * btn.Height + 10;
end;
上面這段程式可以在 VCL 建立一個 Button, 但在 FireMonkey 當中, 建立的方法就不一樣了:

FireMonkey版:
procedure TForm2.btnAddNewButtonClick(Sender: TObject);
var
    btn: TButton;
    countByRow, idx: integer;
begin
    btn := TButton.Create(self);
    self.scrollBox.AddObject(btn);

    self.ButtonList.Add(btn);
    idx := self.ButtonList.IndexOf(btn);
    btn.Text := 'btn' + IntToStr(idx);

    countByRow := Trunc(self.scrollBox.Width / btn.Width);
    btn.Position.X := idx mod (countByRow) * btn.Width + 10;
    btn.Position.Y := idx div (countByRow) * btn.Height + 10;
end;
在 VCL 當中，動態建立了一個新的按鈕以後，我們只需指定該按鈕的 Parent, 就可以把建立的按鈕放到 Parent 這個元件上面，當然，也需要先指定新按鈕的位置 (Left, Top) 與大小 (Width, Height).

而 FireMonkey 要做到相同的效果，則是看我們要把建立出來的按鈕放在哪個元件上面，就呼叫該元件的AddObject 方法，例如我們要把新建立的按鈕顯示在表單上面，就直接呼叫 scrollBox.AddObject(newButton);

帶一句題外話：從上面的兩個範例 procedure 裡面, 可以看出 FireMonkey 的座標與元件大小都可以有小數點, 但 VCL 不行。

要動態移除該元件的時候，也非常不同，VCL只需要呼叫該元件的 Free 方法即可：
procedure TForm1.btnRemoveBtnClick(Sender: TObject);
var
    btn: TButton;
begin
    if self.ButtonList.Count > 0 then begin
        btn := self.ButtonList.Last;

        if Assigned(btn) then begin
            self.ButtonList.Remove(btn);
            btn.Free;
        end;
    end else begin
        ShowMessage('No Button');
    end;
end;
FireMonkey 則不一樣:
procedure TForm2.btnRemoveClick(Sender: TObject);
var
    btn: TButton;
begin
    if self.ButtonList.Count > 0 then begin
        btn := self.ButtonList.Last;

        if Assigned(btn) then begin
            self.ButtonList.Remove(btn);

            self.scrollBox.RemoveObject(btn);
            btn.DisposeOf;
        end;
    end else begin
        ShowMessage('No Button');
    end;
end;
在 VCL 裡面，呼叫了 Free 方法以後，obj 所佔用的記憶體就會在 Windows 系統裡面被釋放出來，但在 FireMonkey 當中，由於要適應絕大多數系統上的特性，所以 Free 方法只會把該元件的 Reference Count 減一，在 Android 跟 iOS, Mac OS 裡面，一個元件要被系統釋放掉的話，必須要 Reference Count 等於 0, 才會真正把元件刪除掉。

所以 RemoveObject 被呼叫以後，obj 元件會在畫面上看不見了，但它還沒有真的被刪除，在 FireMonkey 當中，我們可以呼叫 obj 元件的 DisposeOf 方法，這個方法在Windows 平台上，會有等同於呼叫了 Free 方法的作用。

但在 iOS, Andorid, Mac OSX 上面, 則會強制把 Reference Count 遞減為 0, 真正強制的把佔用的記憶體釋放出來。

結語
許多已經很習慣於傳統 Delphi 或 傳統 Windows 應用程式設計的 Programmer, 會很習慣於把所有的畫面都放在同一個 Form 裡面。

在傳統的 Windows 或桌機型的應用程式環境當中，這是沒有問題的，但在行動裝置或者嵌入式裝置的應用程式當中，這是行不通的，因為在行動裝置當中，記憶體極其有限，有時只要使用超過了 40MB 的記憶體，應用程式就會被強制停止，也就是俗稱的閃退。

大家或許會覺得，40MB 很少，或者自己的應用程式不會用這麼多，但請大家記得一個數字，一張 2048x1536 的圖片，就可能佔用了約 10-15MB 的記憶體。

為什麼我提到 2048x1536 這個數字？

因為它正是 iPad Retina 螢幕的實際解析度，包含 iPad 3, 4, 5 (iPad Air), 以及 iPad Mini 2, 都是這個解析度，我們一旦有這個解析度大小的應用程式，只要兩張全螢幕的圖片，就已經處在危險邊緣。

如果還像以往的寫法，把所有的圖片、畫面都放在同一個 Form 裡面的話，只要換個兩頁，應用程式就會閃退，這種應用程式連上架的機會都沒有，所以，動態產生、動態刪除元件或畫面的需求將會越來越大，大家也一定要實際學會怎麼處理這種情形，不然前路絕對是坎坷不平的。

動態產生範例 (VCL & FireMonkey)

Delphi 用 for..in 迴圈釋放物件的注意事項 (XE5, XE6)

從 Delphi 2009 開始, 新增了不少原本 Object Pascal 沒有支援的語法, 包含了我還蠻常用的 for-each 迴圈. (在 Perl, obj-c 我都還蠻常用這個功能的)

為了搭配動態產生元件, 用 for-each 迴圈來處理釋放動態新增的物件, 在 Delphi XE5 分外重要，因為在 XE5 當中，我常用 TVertScrollBox 這個元件來處理需要動態新增、高度不確定的 Contents.

舉個大家最常見的例子來說，即時通訊軟體的對話內容，內容會有多少？誰也說不準，可能跟朋友A的對話內容有一千則，但跟不熟的路人甲則只有三則。

這時候，要用什麼元件來顯示這些對話內容呢? 從 XE2 開始，大多數的範例程式都是用 TListBox 或者 TListView 來載入這些資料，TListBox 跟 TListView 也很好，但這兩個元件的內容呈現比較制式，用來顯示通訊錄裡面的聯絡人非常適合，但要用來顯示對話內容的話，就不很合適了。

請回憶一下，現在大家都常用的通訊軟體，Line, What's app, iMessage 等等，都是以左邊顯示對方傳來的訊息，右邊顯示我方傳過去的訊息，底下會用個氣泡圖片來襯底，我們看一下 iMessage 的畫面：

要在 Delphi XE5, XE6 裡面製作完全相同的效果的話, 要怎麼做?

透過 TListView, 很抱歉, 我一時半刻創意不足, 想不出來, TListBox 倒是可以。

因為TListBox 的 Items 是 TListItem，建立TListItem 出來以後，可以用 AddObject 這個方法來把圖片 (TImage), 文字 (TLabel) 加到 TListItem 裡，所以也可以製作出像上圖的畫面，但如果要在上圖的畫面上顯示圖片呢？現在即時通訊軟體都流行貼圖，這種功能要怎麼在 TListBox 做出來呢?

抱歉，我又創意不足，一時技窮了。

這時候，大概也只有 TVertScrollBox 可以用來製作這樣的畫面效果了。

TVertScrollBox 跟 THorzScrollBox 都是從 TScrollBox 繼承而來的，從名稱來看，TVertScrollBox 是垂直方向的捲動視窗，而 THorzScrollBox 則是水平方向的捲動視窗，所以要製作上圖的畫面的話，就可以用 TVertScrollBox 來製作。

讓我寫一段簡單的 procedure 來示範怎麼把一個 TStrings 裡面的文字放進 TVertScrollBox 裡面去：

procedure addTextToScrollBox(info : TStringList);
var
   oneLine : string;
   currentY : Single;
   idx : integer;
   newLabel : TLabel;
begin
    currentY := 0.0;

    for idx := 0 to info.Count -1 do begin
         oneLine := info.Strings[idx];
         newLabel := TLabel.Create(self);
         newLabel.Position.X := 10;
         newLabel.Position.Y := currentY;
         newLabel.Text := oneLine;

         vScrollBox.AddObject(newLabel);

         currentY := currentY + 10.0 + newLabel.Height;  
    end;
end;

以上這段程式就可以把傳進去的 TStrings 的內容一行行顯示在名為 vScrollBox 的 TVertScrollBox 裡面去了，但這範例會有個小困擾，就是在對話內容要釋放，或者刷新的時候，需要把所有的資料全部清除，在 XE6 底下，可以用以下這個 procedure 來達成:

procedure clearScrollBox;
var
    obj : TFMXObject;
begin
    for obj in vScrollBox.Children do begin
         vScrollBox.removeObject(obj);
         obj.DisposeOf;
    end;
end;

在行動平台中，請記得除了透過 vScrollBox.removeObject(obj); 把 obj 從 vScrollBox 的可視範圍移除以外，還要呼叫 obj.DisposeOf; 這樣 obj 才會實際消失，不然的話，雖然obj 當時是看不見的，但卻也還存在記憶體當中沒有沒事放掉。

視覺效果上，我們會看到 vScrollBox 內容空無一物，但捲動軸卻不會消失，這就會讓使用者覺得很納悶了，所以記得，除了RemoveObj之外，還要呼叫 DisposeOf 把物件是放掉。

如果是 XE5 的話, TVertScrollBox 的 Children 就不只存放我們透過 addObject 放進去的物件，我實測的結果，會連同捲動軸也列名在 Children 裡面，所以得先判斷其 Class 是否是我們要釋放的，因此要加入 Delphi 的 RTTI 功能，改為：

procedure clearScrollBox;
var
    obj : TFMXObject;
begin
    for obj in vScrollBox.Children do begin
         if (obj is TLabel) then begin
             vScrollBox.removeObject(obj);
             obj.DisposeOf;
         end;
    end;
end;

不然也可能會把捲動軸弄消失，但這一點在 XE6 以後的版本應該不用再擔心了，真是太好了。

FireMonkey - 行動裝置上虛擬鍵盤的出現與隱藏

在 Win32 的應用程式開發中, VCL 架構當中, 我們常常會在畫面上有多個 TEdit 或 TMemo 的時候, 設定這些元件的 TabOrder, 用以決定每個文字編輯元件的順序, 待使用者輸入文字後，按下Tab鍵，便可切換到下一個文字輸入元件。

在行動裝置上卻沒有所謂以Tab鍵進行文字輸入元件切換的功能，要不是在虛擬鍵盤或手寫輸入控制元件上緣有上一個、下一個的按鍵進行切換，就會直接在鍵盤或手寫輸入框裏有換行、完成的按鍵，待使用者按下之後切換到下一個輸入的文字框去。

不僅如此，在行動裝置上輸入文字時，還會因為虛擬鍵盤的出現，需要把畫面整個向上挪移，才不會有文字框被虛擬鍵盤擋住，使用者輸入了什麼都看不見的窘況。

在 FireMonkey 的 TEdit，TMemo，就是扮演文字輸入框的角色，然而遍尋這兩個元件的所有Event，卻也找不著要如何達成前述切換文字輸入框的相關事件，更別提要像obj-c提供個像是 textFieldBeginEdit 這樣的Delegate method來偵測虛擬鍵盤的出現了。

雖然在TEdit裡面有onChange，onKeyUp，onKeyDown，onTyping這些事件，但這些事件卻無法接收到虛擬鍵盤的Return被觸發的事件，當然Windows系統上的Return可以測得，但行動裝置的不行，所以很令人煩躁。

然而，在FireMonkey 中，還是能夠達到前述功能的，只是要多花一些功夫，稍微多幾個步驟就是了：

KillFocusByReturn

這個屬性（property）是 TEdit 的新屬性，在設定接受到虛擬鍵盤的 Return 值時，是否要停止編輯，並讓目前的TEdit 失去Focus，這個屬性預設值是false，我們要把它改設定成true。

這樣一來，按下虛擬鍵盤的Return時，虛擬鍵盤就會自動縮回去了，也就是該文字框完成了編輯。

 

TEdit 與鍵盤相關的新屬性

                        

TEdit 的事件

onEnter 事件

在每一個TEdit的事件表裡面，都有 onEnter 跟 onExit 這兩個事件，可以偵測到行動裝置上，該欄位是否開始/結束編輯了」

我們得自己計算一下每個TEdit 進入編輯模式時，該TEdit會不會被擋到？以iPad 為例，iPad的虛擬鍵盤（橫向）高度約為250，所以我會在橫向畫面最底下的TEdit 的 onEnter 事件當中設定一個畫面座標向上挪移250的動作：

procedure THeaderFooterForm.Edit1Enter(Sender: TObject);
begin
   shiftY := -150;
end;

設定了-150 的Y軸位移量之後，接著要偵測虛擬鍵盤出現與消失的事件：onVirtualKeyboardShow, onVirtualKeyboardHidden 這兩個事件，別急，看完再去寫 code。

Form 的虛擬鍵盤顯示/隱藏事件

onVirtualKeyboardShow, onVirtualKeyboardHidden 這兩個事件並不是歸屬給單一 TEdit 或TMemo 的哦，它們是歸屬於 TForm 的事件。

所以，我們接下來要先點選 TForm 元件，找到 onVirtualKeyboardShow, onVirtualKeyboardHidden 這兩個事件，雙擊它們，來製作出處理這兩個事件的事件處理常式。

如果Form 的畫面是由一個 align 設定為全螢幕（alClient）的TTabControl 元件所構成的，則在 onVirtualKeyboardShow 這個事件裡，我們要先把 TTabControl 元件的 align 屬性改設定為 alNone，否則修改其Position.Y 就不會有任何效果。

出現虛擬鍵盤

輸入完畢以後, 恢復原位

接著，把TTabControl Position.Y 設定為 ShiftY，就會看到畫面向上移動，露出正在輸入當中的 TEdit 或 TMemo 了。

最後，onVirtualKeyboardHidden 的時候，只要把 Position.Y 設定為 0，畫面就會恢復正常了。

心得分享：每一個文字輸入框的 ShiftY 都是獨立的，不用去管其他文字框的位移量是多少，彼此並沒有交互作用。


範例程式: 下載點

FireMonkey 桌面應用程式最小化

問題 - 視窗縮小時不會整個應用程式縮小

在製作 Delphi 或 VB 程式時, 常常會使用多個 Form, 在每個 Form 的畫面當中, 會賦予不同的功能, 但每個 Form 都會被當成獨立的畫面, 也就是 MainForm.

我們對 MainForm 的預期, 就是在按下右上方的縮小鍵時, 整個應用程式縮小到工作列上, 按了工作列上的按鈕時, 整個程式畫面還原回來原來的狀態.

但從過去 VCL 的時期到現在的 FireMonkey, 都並沒有這麼容易, 多個 Form 的時候, 只要不是按下 MainForm 的縮小按鈕, 視窗都會縮在桌面左下角。

視窗沒有縮到工作列上, 而是成為縮小視窗

以往這種 Form 的特性, 是為了製作 MDI Application, 也就是一個大的 Form 當中有多個文件會被開啟, 就像 Word, Powerpoint 那樣, 可以開啟多個文件, 讓每個文件有獨立的小視窗用來檢視文件。

以往在 VCL 架構的解決方法

在 VCL 架構的應用程式中, 解決這個問題的方法, 是在任何一個 Form 裡面建立一個 onMessage 的事件處理常式, 並在 FormCreate 事件中把它指派給 Application.OnMessage 事件:

procedure TForm1.HandleMessage(var Msg: TMsg; var Handled: Boolean); 
begin
   if (Msg.Message=WM_SYSCOMMAND) and (Msg.wParam=SC_MINIMIZE) then
     Application.Minimize;
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
   Application.onMessage := self.HandleMessage;
end;

當我們發現 SC_MiniMize 事件發生, 就直接執行 Application.Minimize, 整個應用程式就會縮到工作列上了, VCL 上面如此, FireMonkey 卻不然...... 時至今日, 網路上的各個論壇還在尋找著跟 VCL 架構當中的 Application.onMessage 對應的事件...... 然而, 我也找不到, 但是在 FireMonkey 當中, 有很多玩法跟 VCL 不相同, 花了一陣子搜尋 XE5 裡面的 RTL 原始碼, 找到了這個玩法, 有效, 簡易, 跟大家分享。

範例-製作兩個 Form 互相切換

先建立一個 FireMonkey 應用程式, 包含兩個 Form, Form1 跟 Form2, Form1 是 預設的MainForm, Form2 則是一般的 Form.

Form1, 放一個 button 切換到 Form2

Form2, 放一個 button 切換到 Form1

Form1 上面的 Button1Click 內容如下

procedure TForm1.Button1Click(Sender: TObject);
begin
   form2.Show;

   self.Hide;
end;

Form2 上面的 Button1Click 內容如下

procedure TForm2.Button1Click(Sender: TObject);
begin
   form1.Show;

   self.Hide;
end;

這是最常見的寫法, 然而切換到 Form2 的時候, 按下視窗上的縮小按鈕, 就會跟本文最上方的圖片所顯示的一樣:

這時候, 只要在 Form1 的 Button1Click 加上一行:
Application.MainForm := form2;

就可以把 Application.MainForm 從 form1 切換成 form2, 此時再按 form2 的縮小按鈕, 就不會再出現縮小的視窗了耶, 超神奇, 兩個 click 事件處理常式如下
修改後, Form1 上面的 Button1Click 內容如下:

procedure TForm1.Button1Click(Sender: TObject);
begin
   form2.Show;
   Application.MainForm := form2;
   self.Hide;
end;

修改後, Form2 上面的 Button1Click 內容如下

procedure TForm2.Button1Click(Sender: TObject);
begin
   form1.Show;
   Application.MainForm := form1;
   self.Hide;
end;

結語

FireMonkey 上面許多用法都很神奇, 由於所有元件都有 Container 的特性, 所以可以直接收納其他元件, Application.MainForm 也不是唯讀屬性, 所以可以在切換 form 的時候順帶把 Application.MainForm 做重新指派, 雖然很難想到這個用法, 不過它確確實實的有效, 程式碼也簡潔, 所以推薦給大家使用.

範例程式連結