EMBARCADERO TECHNOLOGIES
BUILD ONE UI FOR 4 FORM FACTORS
DAVID INTERSIMONE “DAVID I”
Revolutionary UI Development with FireUI
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
Behavior Services - Display Metrics
type
TDeviceDisplayMetrics = record
PhysicalScreenSize: TSize;
LogicalScreenSize: TSize;
AspectRatio: Single;
PixelsPerInch: Integer;
ScreenScale: Single;
FontScale: Single;
end;
16
OP
EMBARCADERO TECHNOLOGIES
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++
EMBARCADERO TECHNOLOGIES
Behavior Services - OS Specific
_di_IDeviceBehavior DeviceBehavior;
if (TBehaviorServices::Current->SupportsBehaviorService(
__uuidof(IDeviceBehavior), DeviceBehavior, this) &&
(DeviceBehavior->GetOSPlatform() == TOSPlatform::iOS)) {
// iOS specific code
}
18
C++
EMBARCADERO TECHNOLOGIES
Behavior Services - Display Metrics
_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++
EMBARCADERO TECHNOLOGIES
Behavior Services - Display Metrics
struct DECLSPEC_DRECORD TDeviceDisplayMetrics {
public:
System::Types::TSize PhysicalScreenSize;
System::Types::TSize LogicalScreenSize;
float AspectRatio;
int PixelsPerInch;
float ScreenScale;
float FontScale;
}
20
C++
EMBARCADERO TECHNOLOGIES
Multi-Device Designer - Introduction
• Create a Master View
• Customize views as necessary for different platforms.
• StreamInheritance only stores difference between platform views
23
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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.)
EMBARCADERO TECHNOLOGIES
TMultiView Modes
• PlatformDefault
• Popover
• Drawer
• Panel
• Custom
30
Button always visible
Button covered when open
Button always hidden
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
Native iOS Controls
• TEdit family of controls
• Same control, different presentation
• Model/View architecture
• Best of both worlds:
– High performance
– Platform-independent code
38
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
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
EMBARCADERO TECHNOLOGIES
THANK YOU
EMAIL: [email protected]
BLOG: HTTP://EMBT.CO/SIPFROMTHEFIREHOSE
TWITTER: @DAVIDI99
53