Build One UI for 4 Form Factors with 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: davidi@embarcadero.com
• 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 Services
Part 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++

Demonstration
FireUI – Behavior Services
21

Multi-Device Designer
Part 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.AddDevice
defining 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%RoamingEmbarcaderoBDS15.0MobileDevic
es.xml
25

Demonstration
FireUI – Multi-Device Designer
26

TMultiView Component
Part 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 TTabControl
containing 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

Demonstration
FireUI – TMultiView Component
32

Native and Custom Styles & Controls
Part 4
33

Native and Custom Styles
34
Native 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-L
0. Download the Android-L Style Pack
1. Place a TStyleBook onto your Master view
2. Set TStyleBook.Name = "AndroidLStyleBook"
3. Load AndroidLLight.fsf, AndroidLDarkBlue.fsf or AndroidLDark.fsf to AndroidLStyleBook
4. 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

Demonstration
FireUI – Native and Custom Styles & Controls
39

Multi-Touch, Multi-Monitor
Part 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_FireM
onkey

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

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

Demonstration
FireUI – 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

More Information
• Multi-Touch
– http://docwiki.embarcadero.com/RADStudio/XE7/en/Gestures_in_FireM
onkey
– http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.MultiTouch
– http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.Forms.TCommo
nCustomForm.OnTouch
– http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.Forms.TCommo
nCustomForm.OnTap
• Multi-Monitor
– http://docwiki.embarcadero.com/Libraries/XE7/en/FMX.Forms.TScreen.
Displays
48

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

More Information
• Developer Skill Sprints
– Landing Page - http://www.embarcadero.com/landing-
pages/skill-sprints
– YouTube playlist -
https://www.youtube.com/playlist?list=PLwUPJvR9mZHhZ
TajVWsgaFPLtDA-t1Xwc
50

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
51
Find all the details at http://www.embarcadero.com/radoffer

Q&A
52

THANK YOU 
EMAIL: DAVIDI@EMBARCADERO.COM
BLOG: HTTP://EMBT.CO/SIPFROMTHEFIREHOSE
TWITTER: @DAVIDI99
53

Build One UI for 4 Form Factors with FireUI

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Build One UI for 4 Form Factors with FireUI

Similar to Build One UI for 4 Form Factors with FireUI (20)

Recently uploaded

Recently uploaded (20)

Build One UI for 4 Form Factors with FireUI