顯示具有 FireMonkey 標籤的文章。 顯示所有文章
顯示具有 FireMonkey 標籤的文章。 顯示所有文章

2022/01/10

學會這招 FireMonkey 視覺佈局技巧讓你內力上升一甲子

A little bit about FireMonkey and Delphi XE2 | Andreano Lanusse |  Technology and Software Development

FireMonkey (FMX) 就 EMBT 的設計概念中是要解決跨平台的問題,那跨平台是要解決什麼問題?首當其衝的就是外觀設計了。

跨平台的外觀設計 = 跨螢幕解析度的處理

跨平台的視覺佈局簡單的說,就是要 APP 能在多款解析度的螢幕上都能正確顯示,不會有跑位、消失、需要手指八方滑動才能找到資料的額外行為。

跨平台問題核心 = VCL 和 FMX 外觀設計原理的不同

Delphi 最強大的 VCL 框架在外觀設計上完美的使用 Win32 API,造就了無數桌面應用程式,然而在其它系統上,VCL 外觀設計方法已經無法滿足在 MAC、iOS、Android 等多平台開發的需求,取而代之的就是 FMX,FMX 可以滿足多平台外觀設計的原因是它採用了外觀抽象化設計,FMX 獨有的外觀引擎作為讓外觀層和系統層橋接的媒介,以達到跨平台的目標。

基於上述兩大關鍵因素,使用 FMX 設計前,Eden 要先來梳理 FMX 的外觀容器,才不會在之後的設計上到處採雷,

 

TForm

 

FMX 應用程式唯一標準容器,一個應用程式應當就只有一個 TForm,應用程式裡所有可視元件都會在這唯一容器上顯示。

TPanel

可視的元件容器,當有多數視覺元件需要群組時可用此容器群組化元件;由繼承關係來看,它本身會受到視覺樣式的影響,主要是延襲 VCL 框架裡的 TPanel 元件,使原來的開發者能快速使用。

TLayout

「不」可視元件容器,當有多數視覺元件需要群組時可用此容器群組化元件,和 TPanel 不同,它本身是不可視的;由繼承關係來看,它比 TPanel 更為輕巧,且能控制其子元件顯示功能,值得一提的是它帶有【自動適應能力】,在跨裝置上能自動調整可視元件的顯示排列,所以  TLayout 比 TPanel 更具競爭力,TLayout 容器可說是 FMX 的靈魂也不為過,有興趣學習 FMX 應用程式開發的朋友請務必善用此元件。

TFrame

TFrame 容器由繼承關係來看,它與 TLayout 容器處在同一個位階上,兩者不同之處在:TLayout 負責群組化可視元件,TFrame 則是負責群組化 TLayout 和其程式邏輯,也可以說透過 TFrame 可以創作出重覆利用的視覺模組,可以讓更多應用程式使用它。

從熟悉 VCL 框架移轉到 FMX 時很是興奮,當時覺得行動平台的視覺開發上不能無腦延用 VCL 概念,如果相同就不用推新框架,而且在看過 Android、iOS 視覺設計的文件後,更加深對 FMX 理解的信念。

除了視覺元件差異外,FMX 還有值得一試的設計技巧:

自動適應能力

自動適應能力在 Web 上是一個非常成熟的技術,Web 上使用 CSS 來完成,在 FMX 設計上則善用 TLayout 元件,可以在每個不同解析度的螢幕上試試,你會發現另一片天空。

排版 (Layout)

和自動適應力能一樣,Web 使用 CSS 來完成,FMX 上僅需熟悉 [akLeft,akTop,akRight, akBottom] 即可,推薦你來玩看看。

元件綁定 (Data-Binding)

專案在原型階段時就可以把不可視物件和可視元件進行綁定,不用煩腦更新資料如何替換到可視介面,使我們更能專注在開發上,更重要的是當進入產品開發期則僅需替換資料庫元件就能立馬上線,想不炫技都很困難!

原生支援

FMX 為了跨平台,把各家平台許多原生 API 都封裝成好用的物件,目的就是讓你可以專注在 Delphi 程式開發,而不用在各家平台 API 手冊上奔走學習,不止節省開發時間,也更好地發揮應用程式效率,可以讓你的使用者滑得不亦樂乎!

 

總結

當然還有更多設計上神技巧,日後有學習到更多的技巧會再整理起來和各位分享。

還在觀望 Delphi  的發展性?現在 Delphi 推出了 Delphi Community Edition 社群版,現在免費提供給想加入 Delphi 開發行列的朋友,我也寫了幾篇關於 Delphi CE 的介紹,邀請你現在就搜尋看看。😉

 

See also

2018/04/07

About New Threads On FMX For Android (CHT)

在 Delphi Tokyo (10.2) 後,Delphi UI 的 Thread 在 Android 下發生了一點變化,原文如下:

Unification of Delphi and Java threads on Android: CallInUIThread has been deprecated. All code is now running in the Java UI Thread, removing the need for thread synchronization.
由此可推斷出,以前 FMX 在 Android 的運作模式如下:

FMX for android in  before Delphi 10.1

因為 Delphi UI Thread 是基於 Java UI 之上,使用者操作 Java UI 層時,還需要經過 Delphi UI 層的同步處理才能觸發 Delphi 物件的相關事件,故效能和原生的 Java App 相比下會來得差一點。


而在 10.2 之後,不再是雙 Thread 並行,除了執行效能有顯著提升外,連 FMX 在 Android 平台都【自動升格為 Thrad safe 】了!



但問題來了,這種底層架構的調整,對於 FMX for Android 舊版本專案會有影響嗎?

答案很明顯的……



















一定有!但不大

問題不大的原因在於,絕大多數的開發方式並不會使用到 Thread,也就是說,UI 層的問題在編譯程式時就已經解決了。

而最大的問題在:邏輯層面的 Bug。

既然是 Thread 層的修正,那問題一定也會出在 Thread 上。

首當其衝的當然就是『3rd party』了!(笑)



FGX-FireMonkey】的範例就有用上 Thread (TfgActivityDialog, TfgProgressDialog),相當經典,但在 10.2 時卻會發生元件畫面無法出現的問題。

相同的程式碼在 10.1 以前的程式流程是這樣的:

TfgAD = TfgActivityDialog

如果程式碼不改變的情況,在 10.2 後『純 Java UI Thread』下的流程會是這樣:



於是 TfgActivityDialog 自然就看不到囉!(笑)


結論
FMX 還是一個年輕且在成長的框架,所以每當底層架構有所變化時,都要檢視一下自己的專案是否會因改版而必須有所更動,每一個版本的 What's New 內容非常重要,務必好好研讀。

其實上圖之所以會有這個問題不是 FGX 作者的問題 (就算是,作者也不再維護了……),主因還是會回到 Thread 控制根本上的不同,隨著架構的變化而重構專案程式碼才會是最佳解。



See also:


2017/07/30

FMX的設計硬傷,如何做出正確的跨平台UI設計?


最近再一次體驗Delphi在行動平台上的開發,接觸了許多官方和部落客的教學文章,做出來的APP卻總覺得只算是差強人意,視覺上有驚艷,但是體驗卻跟不上視覺所帶來的強烈感受。

大部分功能單一的元件沒有問題,複合功能多的用起來會有【可以用,但有說不上來的怪怪感】,整理起來不脫以下情形:

2016/12/05

政治大學磨課師課程:作業 2 衝鋒陷陣

花了好多時間,這題目真是太有趣了!

  • ★ 接續作業一,完成作業一之所有要求。
  • ★ 主角可透過上下左右鍵流暢移動,不能飛到畫面外。
  • ★ 血條數值為 0-100 依比例顯示,初始值為20。
  • ★★ 被敵機碰到扣20滴血,吃到寶物加10滴血。
  • ★★ 敵機與寶物碰到戰機後就會消失,敵機再從左側出發,寶物則隨機在畫面任一點出現。
  • ★★ 實作完整遊戲流程:開始畫面、遊戲中、失敗畫面,且每個畫面都能實際運作且在正確的時機顯示。(失敗條件:血量為零時進入失敗畫面)
  • ★★★ 敵機只能由左往右飛,且在飛的過程中會衝向戰機。戰機不動會被撞,但動了就有機會閃躲

底下是執行擷圖:



See also:

2016/12/02

政治大學磨課師課程:Pong Game


遊戲規則:
  • 按任意鍵啟動/重啟遊戲
  • 玩家控制右邊綠色棒子
  • 使用滑鼠控制上下移動




執行畫面

See also:

2016/12/01

政治大學磨課師課程:作業 1 空中漫遊

最近終於有時間可以學習新的東西,感謝政大推出【磨課師課程】讓我有機會學習如何製作遊戲。

不過課程核心應是偏重【學程式】,而非【學寫遊戲】。 (笑)

作業內容是這樣的:
【作業 1 空中漫遊】
  • ★: 放上戰機、血條和寶物。血量和寶物位置隨機指定
  • ★: 為作業加上註解,並標註與作業要求有關的程式碼
  • ★: 變數名稱要能適切代表其意義,並使用 camelCase 方式命名
  • ★★:放上敵機由左向右重複飛行。敵機完全移出右方螢幕後,從左方重新開始飛行。
  • ★★★: 放上背景,並向右無限捲動

實際運作畫面

之後會再用 FireMonkey 來實作後面課程內容

See also:

2016/03/22

FireMonkey 學習日記06 --【骰子搖搖樂實作】(下)

前情提要:
FireMonkey 學習日記06 --【骰子搖搖樂實作】(上)
FireMonkey 學習日記06 --【骰子搖搖樂實作】(中)

接著就是最難的部份:搖搖樂

在 Delphi 下要怎麼實現呢?

很貼心的,Delphi有個叫【TMotionSensor】。

這個元件集合了重力感知器(G. Sensor)、加速度感知器(Acceleration Sensor)、陀螺儀(Gyroscope Sensor)的探知功能。

我在這裡則是使用了加速度感知器來搭配。
因為 Android 只吐上面幾個項目……


不過呢,該怎麼讓程式知道有在震動呢?

2016/03/15

FireMonkey 學習日記06 --【骰子搖搖樂實作】(中)

繼上回一時衝動,決定自己要寫 App 之後,就要來動手了!

首先,必須先去 Embarcader 官網,下載最新試用版的 Delphi,而且還要申請一個新的帳號,目前一個帳號可以試用30 天,每個版本都以一次為先。

對目前的我來說,我只想快點玩遊戲,什麼30天,3天都嫌久了!

究竟,Delphi 是否可以完成這不可能的任務呢?


3 天熟成 App!

2016/03/12

FireMonkey 學習日記06 --【骰子搖搖樂實作】(上)

最近去圖書館借小朋友的童書,裡面有附桌遊,真是讓人懷念以前小學和同學玩桌遊同樂的日子。
不過好像沒有附骰子,如果要買的話……

2016/02/21

FireMonkey 學習日記05 -- 實現 Login 功能(下)

繼上回所做出來的結果:

結果輸入畫面會被虛擬鍵盤摭住,所以接下來就是參考【FireMonkey -- 實現 Login 功能(中) 】所提到的「KeyboardDemoForm」專案來解決這個問題


比較有意思的是,為了能方便在 Windows 下的 Debug,可以設定全域變數:

2016/02/20

FireMonkey 學習日記04 -- 實現 Login 功能(中)

原來官方的 Demo 裡有解決虛擬鍵盤擋住輸入元件的辦法

範例專案名是:KeyboardDemoForm

看了看原始碼,我認為是利用拉霸(Scroll Bar)來操作輸入欄位的處理

2016/02/19

FireMonkey 學習日記03 -- 實現 Login 功能(上)

繼昨日的 FireMonkey 範例專案後,就在這個專案上加點東西吧,就以 Login 功能來實作好了

首先,再加入 TTabControl,給了兩個分頁
在「LOGIN」分頁加入了 TLabel, TEdit 物件,畫面如下:

2016/02/18

FireMonkey 學習日記02 -- 從範例專案學分頁技巧

FireMonkey最原先的目標是在行動平台上,就以行動平台範例來學習吧!

專案精靈裡有個「Tabbed with Navigation」項目
Tabbed with Navigation
在這個專案中,我們可以學習到:

2016/02/17

FireMonkey 學習日記01 -- 多國語言嘗試

FireMonkey 裡有個 TLang 元件

主要是使用 TLang 裡的「Language designer」進行映射工作,如下圖:
博君一笑的成分很大


來試試看結果如何吧!

比較重要的是,標籤的部份沒有區分大小寫

英文版:


正體中文版:


意外的簡單用 ^_^

See also:

2016/02/16

秘技!【FireMonkey Mobile 預覽功能】

這功能算是隱藏版的秘技

但使用上很簡單

在 Project Source 的 uses 區塊,加上:

2015/02/17

試用 Devart MyDAC 在 FireMonkey Andoird 的專案教學

在 Delphi.Ktop 論壇中,有看到該如何選擇 Connection,讓 Android 平台可以連線。

最常搭配的是 MySQL ,今天就來嘗試看看 Devart MyDAC 的威力!

首先,我們先到 Devart 的介紹網頁來下載 MyDAC,安裝方式很簡單。

Just do it!

Devart MyDAC 安裝首頁,剩的便是「Next」
安裝好之後,就是 MySQL,這邊為了加速展示,我採用的是 xampp-portable-win32-5.6.3-0-VC11.7z 。
XAMPP 的執行畫面
接著便是設定 XAMPP 裡 MySQL 的遠端連線:
*****開放一個帳號擁有「%」的權限*****
擁有「%」的帳號示意圖

最後就是在我們的 FireMonkey 專案中,設定「TMyConnection」,如下圖:
除了基本的連線資訊外,Options.Direct 也請別忘記檢查一下!
TMyConnection.Connected 可以成功後,整個專案大致會長成以下的模樣:
再一步就要可以看到成果了!
連接好你的 Android,我們就可以做測試了!底下附上成果圖:



因為是試用版,所以在啟動後會跳出說明訊息。
可以成功執行!這裡因為是使用 MyDAC 試用版,所以會跳出試用版說明:
每個 TDataSet只能載入 6 個 Field 為上限。


很想再多說點什麼,但真的太簡單了,快去實作吧!

2014/10/06

溫習 RAD Studio 各個版本新增的內容

很好奇每個版本間到底有什麼差異,把 HELP 的連結貼過來,方便溫習。

What Was New in Past Releases


底下是個人筆記重點:
===========================================

2007 Add:

dbExpress 系:

  • Driver 最佳化。
  • Driver 增加部份對資料庫的 Unicode 支援。(但 VCL UI 元件還不支援 Unicode,白搭)

RTL 系:

TFileOpenDialog, TFileSaveDialog, TTaskDialog:
但這些都是 Vista (含以上) 限定, XP 以下不工作。

TTaskDialog 畫面很漂亮!學習資料:

其它新增的類別大都是為了上述元件產生的。
==================================

2009 Add:

DataSnap 系:

  • 基於 Indy 的 TDSxxx 元件,所做出的 RESTful 框架。(Base WinHTTP)
  • 納入 Blackfish 資料庫 ($$$)。

RTL 系:

  • 正式導入 Unicode
  • 增加更多的 UI 元件。如:Tiburon 和 Ribbon
  • 改變 TDataSet.Bookmark 的方法
  • 因應 GlyFx 而增加的單元: PNG = pngimage; Gif = gifImg; Jpg = jpeg ← 超重要
==================================

2010 Add:

IDE 最佳化。

DataSnap 系:

  • 提供 MIDAS DLL 的原始碼。
  • 強化 RESTful 框架。

RTL 系:

  • 增加 RTTI 單元。
  • 增加支援平板的 手勢、 Touch 功能。
  • 重製 .NET: TStringBuilder 元件在 RAD Studio 上。
  • 新增的元件 Bug 修正和補強。
==================================

XE Add:

Blackfish 死掉了。

IDE 增加 Code Formatting 功能,終於可以自動化編排原始碼了。
Code Editor 強化了許多功能和樣版(Live Templates)。大推

DataSnap 系:

  • 持續增強 RESTful 框架,並加強 dbExpress 對 JSON 的支援。

RTL 系:

  • 增加 IOUtils 單元。
  • TStrings 加入 TEncoding 初始化功能。
  • 加入一票 3rd 函式庫;如:RegularExpressions、Boots 等。
  • TThread.Suspend 和 Resume 被刪除了,新的使用方式請詳閱公開說明書。
  • C++ VCL 增加了對 Unicode 的支援。

消化完再走到下一版。

XE7 Add:


    2014/08/27

    RAD Studio XE7 其它亮點

    Pull to refresh in TListView.
    OnGesture 和 OnTouch 事件終於切開了!再也不會誤觸 TEdit 而拉不動了!
    TScaledLayout 上的元件會自動隨解析度調整大小。(不過裡面有 TWebControl 時會有相容性問題)


    2014/08/22

    FireMonkey 核心 -- LiveBinding

    LiveBinding 幾乎完美發揮泛型的優點。
    不須再使用 IntToStr, FloatToStr 等轉換函式。

    TBindingsList.Notify             ← 配合已綁定 Class 事件呼叫時可用。
    TBindExpression.Evaluate   ← 應用上,只要記得 BindExpression 是讓哪個 Class 作動即可。

    2014/08/19

    [筆記]RAD Studio XE6 的環境設定

    Android:

    Create a New Android SDK
    RAD Studio 的編譯器會自動從 Android SDK 路徑找出機器對應的版本,只要確保相關版本有被下載下來即可。

    ZipAlign.exe: