1 of 29

Day 3 Building Effective

User Interfaces

with FireMonkey

Daniele Teti

d.teti@bittime.it

@danieleteti

Jim McKeeth

jim.mckeeth@embarcadero.com

@JimMcKeeth

2 of 29

Agenda

User Interface Considerations
Layouts & Paradigms
Using Animations
Using Effects
Using Transitions
Screen resolution
Customizing Styles and Appearance
Planning for Mobile and other platform
Mastering FireMonkey controls, shapes, and effects

More information

http://embt.co/2016delphicampday3

3 of 29

Daniele Teti

CEO @ bit Time Professionals

High-Level Consultancy,

Trainings and Development

Book Author

Open Source

DelphiMVCFramework

DelphiRedisClient

DelphiSTOMPClient

LoggerPro for Delphi

Others…

More information

http://embt.co/2016delphicampday3

blog: www.danieleteti.it

company: www.bittimeprofessionals.it

email: d.teti@bittime.it

4 of 29

Jim McKeeth

Lead World Wide Developer Evangelist & Engineer
Long time software developer
Invented and patented pattern and swipe to unlock

US Patent # 8352745 & 6766456, etc.

Built thought controlled drone with Google Glass
Host of Podcast at Delphi.org
Lives near Boise, Idaho, USA with his family & dogs
Improvisational comedy performer with CSz Boise

More information

http://embt.co/2016delphicampday3

blog: delphi.org

twitter: @JimMcKeeth

email: jim.mckeeth@embarcadero.com

5 of 29

User Interface Considerations

Layouts
Anchors
Alignments
Padding
Spacing
Tab Control
List View vs. List Box
Scollables
Frames
MultiView

FMX Layout Strategies http://embt.co/fmxlayouts

6 of 29

FireMonkey (FMX) Basics

Anything can be nested

See ClipChildren

Most numeric properties are a single & animatable

Position, RotationCenter, Scale, Size (Height & Width), Opacity, & RotationAngle

Use MakeScreenshot method to get Bitmap of layout

7 of 29

Anchors

Position relative to one or more edge(s) of parent:

Top
Bottom
Left
Right

Default is Top, Left
Moves with parent resize
Each control has 0 to 4 anchors

DocWiki: http://embt.co/fmxanchors

8 of 29

Alignment

Aligns control within parent, setting anchors, size and position. Default is None.
Anchor and fill along edge

Top, Bottom, Left, Right

Fill parent, but preserve aspect ratio

Fit, FitLeft, FitRight

Fill along one side of the parent

MostBottom, MostTop, MostLeft, MostRight

Resize only on one axis (width or height)

Vertical, VertCenter, Horizontal, HorzCenter

Miscellaneous

Client, Center, Contents, Scale

DocWiki: http://embt.co/fmxalignlayout

9 of 29

Spacing – Margins and Padding

Margins

Spacing for siblings �(and parent edges)
http://embt.co/fmxmargins

Padding

Spacing for children
http://embt.co/fmxpadding

10 of 29

TFlowLayout

Arrange child controls like words in a paragraph
Controls arranged in order added to layout
Use TFlowLayoutBreak for forced line break
DocWiki: http://embt.co/tflowlayout

11 of 29

TGridLayout

Arranges child controls in a grid of equal sizes
Controls flow through grid as parent resizes
Use ItemWidth and ItemHeight properties
Customize margins of individual controls

DocWiki : http://embt.co/tgridlayout

12 of 29

TGridPanelLayout

Creates a grid of specified rows and columns
Does not change the anchor or size of child
Each cell can contain 1 child control
You set the Height, Width, Align, and Anchors of children
Controls can span multiple cells

DocWiki : http://embt.co/tgridpanellayout

13 of 29

TScaledLayout

Stretches child controls as it is resized at runtime
Doesn’t respect aspect ratios of controls
Set the Align of the TScaledLayout to Fit to maintain aspect ratio
DocWiki: http://embt.co/tscaledlayout

14 of 29

TScrollBox

Allows children to take up more space than parent
Usually anchored to Client
Only anchor children to Top & Left (default)

Do not align children to client!

Scroll to see additional children
See also:

TVertScrollBox, THorzScrollBox, TFramedScrollBox and TFramedVertScrollBox
DocWiki: http://embt.co/tscrollbox

15 of 29

TTabControl

Control to group child controls into tabs
Tabs are in a stack with one visible at a time.
TabPosition := PlatformDefault to use platform default behavior.
TabPosition := None to hide navigation.
Use TTabChangeAction to animate transitions.
DocWiki: http://embt.co/usingttabcontrol

16 of 29

TMultiView

One super panel with multiple modes
Supported modes

PlatformDefault
Drawer
NavigationPane
Panel
Popover
Custom

Point to MasterPane, DetailPane and definable MasterButton
PlatformDefault adapts to platform and orientation (for mobile)
Custom supports user defined layout and behavior
DocWiki: http://embt.co/usingmultiview

17 of 29

Frames

Reusable pieces of User Interface

The layout and all the event handlers
All the code in the unit

Create 1 or more Frames in project, then reuse them in different layouts or in different places

DocWiki: �http://embt.co/workingwithframes

https://commons.wikimedia.org/wiki/File:Oil_painting_frame_Wellcome_L0067855.jpg

18 of 29

List View vs. List Box

TListBox is similar to the VCL TListBox

Contains an items TStrings list property
Ideal for lists of controls
DocWiki: http://embt.co/fmxlistbox

TListView is new for FireMonkey

Optimized for scrolling speed
Great design time customization
Ideal for lists of data
DocWiki: http://embt.co/fmxlistview

19 of 29

Animations

Modify property values over duration
Automatic or manual start
Optional delay, loop, inverse, etc.
Triggers (or True or False)

IsMouseOver, IsDragOver, IsFocused, IsVisible, IsPressed, IsChecked, IsSelected, IsExpanded

Events OnProcess & OnFinish
Note: Multiple animation instances are not necessarily synchronized (noticeable over time).

http://embt.co/animation-effects

20 of 29

Interpolation

Determines how the rate of the value changes to the over time.
Linear is default and changes at a constant rate.

All options: Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back, & Bounce

AnimationType controls how Interpolation is applied (start vs. end)

In - The curve applies to the starting value of the property animated.
Out - The curve applies to the ending value of the property animated and proceeds backwards to the starting value.
InOut - The curve applies to the both the starting value and the ending value of the property animated and meets at the center point.

http://embt.co/interpolation-type

21 of 29

Effects

Over 40 GPU powered effects (not counting transition effects)
Built using shader filters
Progress property represents precentage of application (can be animated over time)
Supports optional trigger for automatic enable or disable
Apply to image or control

http://embt.co/fmx-effects

22 of 29

Transition Effects

Over 20 Transition Effects
A subset of regular Effects
Changes parent image (or control) into target image
Progress property represents percentage of application (can be animated over time)
For control transitions use MakeScreenshot to get Target image

http://embt.co/fmx-effects