RAD in Action: FireUI

EMBARCADERO TECHNOLOGIES

BUILD ONE UI FOR 4 FORM FACTORS

DAVID INTERSIMONE “DAVID I”

Revolutionary UI Development with FireUI


About David Intersimone “David I”

• V.P. of Developer Relations & Chief Evangelist

• B.S. Computer Science – Cal Poly SLO

• Email: [email protected]

• Blog: http://embt.co/SipFromTheFirehose

• Twitter: @davidi99


Agenda

• FireUI Overview

• Part 1 - Behavior Services

• Part 2 - Multi-Device Designer

• Part 3 - TMultiView Component

• Part 4 - Native and Custom Styles & Controls

• Part 5 - Multi-Touch and Multi-Display

• Q&A


FIREUI OVERVIEW

Revolutionary user interface development for multi-device


FireUI

• Embarcadero’s collection of technologies to create a shared User Interface across all devices and form factors– UI Form Designer

– MultiView Components

– Behavior Services


Multi-Device Designer

• MasterForm Design

• Create specific views if needed– MasterForm uses

StreamInheritance to manage deltas

• One project and one form across all devices– Shared UI code and event

handling


Delta Streams: The Power Behind FireUI

• Based on form inheritance streaming

• Toggle visibility, position, size between views

• Device detection picks the best delta from the master view

• One form object holds all controls for all views

7


TMultiView: A Super Component

• It’s a drawer, popup, panel

• A container for other controls

• Presentation abstracted to a separate object

• Set the presentation or let it be selected at runtime

8


Behavior ServicesPart 1

9


Behavior Services - “Every Platform is Different”

• “Behind the scenes”

• API provides platform appropriate design time and runtime behavior

• Adds PlatformDefault size, position and behavior for some controls.

10


Platform Default Behaviors

• PlatformDefault Component Size

– New Size property

– PlatformDefault is enabled on new components

– Automatically disables when a component is resized.

• Tab position

– New PlatformDefault setting

– Maps to Bottom for iOS, Top for all others

11


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

12


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

13

OP


Behavior Services - OS Specific

var

DeviceBehavior: IDeviceBehavior;

begin

if TBehaviorServices.Current.SupportsBehaviorService(IDeviceBehavior, DeviceBehavior, Self) and

(DeviceBehavior.GetOSPlatform = TOSPlatform.iOS) then

// behavior specific to iOS

end;

14

OP


Behavior Services - Display Metrics

var

DisplayMetrics: TDeviceDisplayMetrics;

begin // self is a form in this case

DisplayMetrics := DeviceBehavior.GetDisplayMetrics(Self);

if DisplayMetrics.AspectRatio > x then

// AspectRatio specific behavior

end;

15

OP



type

TDeviceDisplayMetrics = record

PhysicalScreenSize: TSize;

LogicalScreenSize: TSize;

AspectRatio: Single;

PixelsPerInch: Integer;

ScreenScale: Single;

FontScale: Single;

end;

16

OP


Behavior Services at Runtime

• TBehaviorServices class in FMX.BehaviorManager.hpp

• IDeviceBehavior defines

• GetDeviceClass: TDeviceInfo.TDeviceClass;

• GetOSPlatform: TOSPlatform; // Windows, OSX, iOS, Android

• GetDisplayMetrics: TDeviceDisplayMetrics;

• IFontBehavior defines

• GetDefaultFontFamily & GetDefaultFontSize

17

C++


Behavior Services - OS Specific

_di_IDeviceBehavior DeviceBehavior;

if (TBehaviorServices::Current->SupportsBehaviorService(

__uuidof(IDeviceBehavior), DeviceBehavior, this) &&

(DeviceBehavior->GetOSPlatform() == TOSPlatform::iOS)) {

// iOS specific code

}

18

C++



_di_IDeviceBehavior DeviceBehavior;

if (TBehaviorServices::Current->SupportsBehaviorService(

__uuidof(IDeviceBehavior), DeviceBehavior, this))

{

TDeviceDisplayMetrics DisplayMetrics;

DisplayMetrics = DeviceBehavior->GetDisplayMetrics(this);

if (DisplayMetrics.AspectRatio > x) {

// AspectRatio specific behavior

}

}

19

C++



struct DECLSPEC_DRECORD TDeviceDisplayMetrics {

public:

System::Types::TSize PhysicalScreenSize;

System::Types::TSize LogicalScreenSize;

float AspectRatio;

int PixelsPerInch;

float ScreenScale;

float FontScale;

}

20

C++


DemonstrationFireUI – Behavior Services

21


Multi-Device DesignerPart 2

22


Multi-Device Designer - Introduction

• Create a Master View

• Customize views as necessary for different platforms.

• StreamInheritance only stores difference between platform views

23


Multi-Device Designer - Details

• There is only one form class for all platforms

• Based on streaming differences (StreamInheritance)

• One FMX file for master, one FMX file per view

• Compiler will selectively include only current platform resources

24


Multi-Device Designer - Custom Views

• Install package with unit that calls TDeviceinfo.AddDevicedefining device at initialization, and TDeviceinfo.RemoveDevice at finalization.

• This unit is used at runtime to take advantage of custom view.

• Defines device type, physical screen pixels, logical screen size and aspect ratio.

• Add matching entry to %AppData%\Roaming\Embarcadero\BDS\15.0\MobileDevices.xml

25


DemonstrationFireUI – Multi-Device Designer

26


TMultiView ComponentPart 3

27


TMultiView Component

• 4 presentations in one• A sort of “Super Panel”

• Presentation depends on device kind and orientation

• Automatically adapts to different form factors and orientations, and platforms.

• Custom presentation available

28


TMultiView Parts

29

TMultiView

MasterButton

TargetControl

Not always visible depending on mode, should not be on TMultiView.

Usually TLayout or TTabControlcontaining other controls. This is the main content area.

Usually contains other controls. Only occasionally visible. (Useful for settings, menu, navigation, etc.)


TMultiView Modes

• PlatformDefault

• Popover

• Drawer

• Panel

• Custom

30

Button always visible

Button covered when open

Button always hidden


TMultiView at Runtime

• Open and close drawer (or equivalent)

• MultiView1.HideMaster / MultiView1.ShowMaster

• For custom view

• Implement TMultiViewPresentation

• Set it for the MultiView1.CustomPresentationClass

• HasPresenter & MultiView1.Presenter.State

• Set of (Installed, Opened, Moving)

31


DemonstrationFireUI – TMultiView Component

32


Native and Custom Styles & Controls

Part 4

33


Native and Custom Styles

34Native iOS 8 style Custom iOS style

• Built-in Native Styles for iOS, Android, Windows and Mac

• Premium custom themes for all 4 supported platforms


FireMonkey Style Designer

• Create, edit, and test FireMonkey styles– Edit Default Style command– Edit Custom Style command– Views

• Object Viewer• Structure View• Object Inspector

35

http://docwiki.embarcadero.com/RADStudio/XE7/en/FireMonkey_Style_Designer


Bitmap Style Designer

• Create style files – IDE Tools menu and Bin folder

• You can distribute to graphic designers & customers

• The Bitmap Style Designer enables you to:

– Create, edit, and test FireMonkey styles (.style files)

– Create, edit, and test VCL styles (.vsf files)

– Convert a VCL style (.vsf file) into a FireMonkey style by saving the VCL style as a FireMonkey style (.style file)

36


Using a Custom/Premium Style – Android-L0. Download the Android-L Style Pack1. Place a TStyleBook onto your Master view2. Set TStyleBook.Name = "AndroidLStyleBook"3. Load AndroidLLight.fsf, AndroidLDarkBlue.fsf or AndroidLDark.fsf to AndroidLStyleBook4. Use the TForm.OnCreate event and add this code:

Object Pascal:

{$IFDEF ANDROID}if TOSVersion.Major = 5 then

Form1.StyleBook := AndroidLStyleBook;{$ENDIF}

C++:

#if defined(__ANDROID__)if (System::Sysutils::TOSVersion::Check(5)) {

Form1->StyleBook = AndroidLStyleBook;}#endif

37 http://cc.embarcadero.com/item/30118


Native iOS Controls

• TEdit family of controls

• Same control, different presentation

• Model/View architecture

• Best of both worlds:

– High performance

– Platform-independent code

38


DemonstrationFireUI – Native and Custom Styles & Controls

39


Multi-Touch, Multi-MonitorPart 5

40


Multi-Touch

• New FMX.MultiTouch unit: TMultiTouchManager

• Choose ONE of the following to use with FMX– OnGesture

– OnTap

– OnTouch

• DocWiki– http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.MultiTouch

– http://docwiki.embarcadero.com/RADStudio/XE7/en/Gestures_in_FireMonkey


Multi-Touch – OnTap, OnTouch

• OnTap– Single tap on a UI component– C++: FormTap(TObject *Sender, const TPointF &Point)– OP: FormTap(Sender: TObject; const Point: TPointF)

• OnTouch– Multi-Touch gestures that are truly gestures

• TTouchAction• Down - Occurs when a finger or other touch device touches the screen• Up - Occurs when a finger or other touch device is removed or lifted from the screen• Move - Occurs when a finger or other touch device moves but is not performing a Down or an Up action• None - A default value; should never occur in reality.• Cancel - Cancels the gesture.

– C++: FormTouch(TObject *Sender, const TTouches Touches, const TTouchAction Action• if (Action == TTouchAction::Down)• Touches[i].Location.X• Touches[i].Location.Y

– OP: FormTouch(Sender: TObject; const Touches: TTouches; const Action: TTouchAction)• if Action=TTouchAction.Down then• Touches[i].Location.X• Touches[i].Location.Y


Multi-Touch - OnGesture

• Standard Gestures:– The standard gestures (Up, Down, Triangle, and so on) are equivalent to Application Gestures

on Windows, and to Multi-Touch Sequences on Mac OS X and iOS. Standard gestures are made with one finger on Windows, and with two fingers on Mac OS X.

– After the gesture finishes (the user lifts the finger), the OnGesture event is fired (if a standard gesture was recognized).

• Interactive Gestures:– The interactive gestures are multi-touch gestures (Zoom, Rotate, and so on) that are

equivalent to System Gestures on Windows, and to Gestures on Mac OS X, iOS, and Android. Every time the fingers move on the touch surface, an OnGesture event is fired.

– FireMonkey uses the four standard gestures Up, Down, Left, and Right as equivalent to the interactive Swipe gesture (on Mac OS X, iOS, Android, and Windows 8).

43

http://docwiki.embarcadero.com/RADStudio/XE7/en/TStandardGesture_Enum

http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.Controls.TControl.OnGesture

http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.Types.TInteractiveGestures


Multi-Monitor

• FMX and VCL• VCL - TScreen

– Screen.MonitorCount– Screen.Monitors[I].MonitorNum– Screen.Monitors[I].Top– Screen.Monitors[I].Left– Screen.Monitors[I].Width– Screen.Monitors[I].Height

• FMX – TScreen– Screen.DisplayCount– Screen.Displays[I].Index– Screen.Displays[I].Bounds.Top– Screen.Displays[I].Bounds.Left– Screen.Displays[I].Bounds.Width– Screen.Displays[I].Bounds.Height– Screen.Displays[I].Primary

44


DemonstrationFireUI – Multi-Touch, Multi-Monitor

45


Summary

• FireUI allows you to build one UI for all form factors and platforms

• The multi-device designer allows you to create custom and unique UI and user experience

• TMultiView component adapts to each device form factor and orientation

46


More Information• Form Designer

– http://docwiki.embarcadero.com/RADStudio/XE7/en/Form_Designer– http://docwiki.embarcadero.com/RADStudio/XE7/en/Using_FireMonkey_Views– http://docwiki.embarcadero.com/RADStudio/XE7/en/Adding_Views_to_Your_Multi-

Device_Project– http://docwiki.embarcadero.com/RADStudio/XE7/en/Adding_a_Customized_View_to_the_Vi

ew_Selector– http://docwiki.embarcadero.com/RADStudio/XE7/en/Mobile_Tutorial:_Using_Tab_Componen

ts_to_Display_Pages_(iOS_and_Android)

• FireMonkey Styles– http://docwiki.embarcadero.com/RADStudio/XE7/en/FireMonkey_Style_Designer– http://docwiki.embarcadero.com/RADStudio/XE7/en/Bitmap_Style_Designer

• TMultiView Component– http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.MultiView.TMultiView– http://docwiki.embarcadero.com/RADStudio/XE7/en/Mobile_Tutorial:_Using_a_MultiView_C

omponent_to_Display_Alternate_Views_of_Information_(iOS_and_Android)

47

http://docwiki.embarcadero.com/RADStudio/XE7/en/Form_Designer

http://docwiki.embarcadero.com/RADStudio/XE7/en/Using_FireMonkey_Views

http://docwiki.embarcadero.com/RADStudio/XE7/en/Adding_Views_to_Your_Multi-Device_Project

http://docwiki.embarcadero.com/RADStudio/XE7/en/Adding_a_Customized_View_to_the_View_Selector

http://docwiki.embarcadero.com/RADStudio/XE7/en/Mobile_Tutorial:_Using_Tab_Components_to_Display_Pages_(iOS_and_Android)

http://docwiki.embarcadero.com/RADStudio/XE7/en/FireMonkey_Style_Designer

http://docwiki.embarcadero.com/RADStudio/XE7/en/Bitmap_Style_Designer

http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.MultiView.TMultiView

http://docwiki.embarcadero.com/RADStudio/XE7/en/Mobile_Tutorial:_Using_a_MultiView_Component_to_Display_Alternate_Views_of_Information_(iOS_and_Android)


More Information• Multi-Touch

– http://docwiki.embarcadero.com/RADStudio/XE7/en/Gestures_in_FireMonkey

– http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.MultiTouch

– http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.Forms.TCommonCustomForm.OnTouch

– http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.Forms.TCommonCustomForm.OnTap

• Multi-Monitor– http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.Forms.TScreen.

Displays

48

http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.MultiTouch

http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.MultiTouch

http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.Forms.TCommonCustomForm.OnTouch

http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.Forms.TCommonCustomForm.OnTap

http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.Forms.TScreen.Displays


More Information

• CodeRage 9 sessions for FireUI– Object Pascal

• FireUI and the Multi-Device Designer - https://www.youtube.com/watch?v=cj_geQ3Vz9E• Designing Multi-Device Applications with FireUI and TMultiView -

https://www.youtube.com/watch?v=Qkf3n8Cw7_E• What's New in FireMonkey - https://www.youtube.com/watch?v=PScvVpEO-Rs• Touch Management with Object Pascal on all Platforms -

https://www.youtube.com/watch?v=lRYT3ToaMK8

– C++• FireUI and the Multi-Device Designer - https://www.youtube.com/watch?v=zuE1ufYksAg• Designing Multi-Device Applications with FireUI and TMultiView -

https://www.youtube.com/watch?v=i3M5T0oWmFU• What's New in FireMonkey - https://www.youtube.com/watch?v=yjm0PxoxHnI

49

https://www.youtube.com/watch?v=cj_geQ3Vz9E

https://www.youtube.com/watch?v=Qkf3n8Cw7_E

https://www.youtube.com/watch?v=PScvVpEO-Rs

https://www.youtube.com/watch?v=lRYT3ToaMK8

https://www.youtube.com/watch?v=zuE1ufYksAg

https://www.youtube.com/watch?v=i3M5T0oWmFU

https://www.youtube.com/watch?v=yjm0PxoxHnI


More Information

• Developer Skill Sprints

– Landing Page - http://www.embarcadero.com/landing-pages/skill-sprints

– YouTube playlist -https://www.youtube.com/playlist?list=PLwUPJvR9mZHhZTajVWsgaFPLtDA-t1Xwc

50

http://www.embarcadero.com/landing-pages/skill-sprints

https://www.youtube.com/playlist?list=PLwUPJvR9mZHhZTajVWsgaFPLtDA-t1Xwc


Special offers and bonuses

• Enterprise purchases or upgrade from Pro to Enterprise– Receive a 10-user deployment license for Enterprise Mobility Services– January 21 to March 31, 2015

• XE2 and earlier versions registered users– Upgrade from any previous version– Get the upgrade price on RAD Studio XE7, Delphi XE7 or C++Builder XE7 when you purchase

the upgrade with 1 year Support and Maintenance– January 12 to March 31, 2015

• Get Free Bonuses until March 31, 2015– New Object Pascal Handbook by Marco Cantu– Castalia for Delphi 2014.11– VCL and FireMonkey Premium Styles– Mida Converter Basic

51Find all the details at http://www.embarcadero.com/radoffer


Q&A

52


THANK YOU

EMAIL: [email protected]

BLOG: HTTP://EMBT.CO/SIPFROMTHEFIREHOSE

TWITTER: @DAVIDI99

53

RAD in Action: FireUI

Software

Transcript of RAD in Action: FireUI