Fire UI and the Multi-Device Designer

During CodeRage 9 I had a session on Fire UI and the Multi-Device Designer. You can also check out my previous post on creating a custom FireUI view for the Moto 360.

Fire UI is made up of three parts:

  1. Behavior Services – Runtime & design time platform design information
  2. Multi-Device Designer – Unified project – Tweak UI for platforms
  3. TMultiView Component – Adaptive layout

Behavior Services at Design Time

  • Examples:
    • TTabControl.TabPosition
      • Bottom on iOS, top otherwise
    • Font.Size & Font.Family
    • Many controls have Size.PlatformDefault = True
    • TMultiView mode

Behavior Services at Runtime

  • TBehaviorServices class in FMX.BehaviorManager.pas
  • IDeviceBehavior defines
    • GetDeviceClass: TDeviceInfo.TDeviceClass;
    • GetOSPlatform: TOSPlatform; // Windows, OSX, iOS, Android
    • GetDisplayMetrics: TDeviceDisplayMetrics;
  • IFontBehavior defines
    • GetDefaultFontFamily & GetDefaultFontSize

OS Specific example

 var
  DeviceBehavior: IDeviceBehavior;
begin
  if TBehaviorServices.Current.SupportsBehaviorService(?
    IDeviceBehavior, DeviceBehavior, Self) and
    (DeviceBehavior.GetOSPlatform = TOSPlatform.iOS) then
    // behavior specific to iOS
end;

Display metrics example

var
  DisplayMetrics: TDeviceDisplayMetrics;
begin                        // self is a form in this case
  DisplayMetrics := DeviceBehavior.GetDisplayMetrics(Self);
  if DisplayMetrics.AspectRatio > x then
    // AspectRatio specific behavior
end;
type
TDeviceDisplayMetrics = record
    PhysicalScreenSize: TSize;
    LogicalScreenSize: TSize;
    AspectRatio: Single;
    PixelsPerInch: Integer;
    ScreenScale: Single;
    FontScale: Single;
end;

More Information

Check back later and I’ll have the video replay available too.

Download the XE7 Trial today and check out the special offers.

This entry was posted in design, Mobile. Bookmark the permalink.

2 Responses to Fire UI and the Multi-Device Designer

  1. Pingback: Fire UI and the Multi-Device Designer | Delphi ...

  2. Pingback: ??????? ?? ???? Delphi 27.10 – 02.11 2014 | Delphi 2010 ru

Leave a Reply