C++ Boot Camp Tuesday: Fast Responsive User Interface Effects and Animations

Posted by on in Programming

Day 2 of C++ Boot Camp covers creating fast and responsive user interfaces with effects and animations.

Agenda

Today we will mostly focus on FireMonkey with lots of practical examples of different user interface considerations. While we will focus on Windows user interfaces, we will also discuss how to plan for mobile.

  • User Interface Considerations
    • Discuss some common user interface paradigms and common elements. 
  • Working with Animations
    • Animations are a great way to add movement to your user interface. Especially useful when it comes to bringing your user interface to life to help your users discover how to interact with it.
  • Creating Effects
    • Effects can be as simple as a drop shadow on a button, or as complex as a page curl. They add depth to your user interface.
  • Avoiding Freezes
    • Freezes are bad news for your user interface. Typically the result of long running processes in the main user thread. We will look at a couple technique to avoid freezes to keep your application responsive and your users happy.
  • Dealing with Screen Resolutions
    • Not everyone is running on 30" High-DPI displays. We will discuss making your user interface responsive to different screen sizes so it always looks good and is easy to use.
  • Customizing Styles and Appearance
    • The styling system helps your application look great, and simple customizations are a great way to make your application stand out and look fantastic.

Presenter

  • Jim McKeethJim 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
    • Improvisational comedy performer with CSz Boise
    • Follow on Twitter @JimMcKeeth

Get your free C++Builder Starter license (Limited time)

Video replay with Q&A


 

Downloads

Understanding and using FireMonkey Layouts

FireMonkey and the FireUI makes it easy to build one form to rule all the platforms. Combining layout controls and making use of Anchors, Alignment, Padding and Margins it is easy to make one form that looks and works great on all platforms.

Anchors

  • Position relative to one or more edge(s) of parent:Anchor
    • Top
    • Bottom
    • Left
    • Right
  • Default is Top, Left
  • Moves with parent resize
  • Each control has 0 to 4 anchors

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 (priority over other edge alignments):
    • MostBottom, MostTop, MostLeft, MostRight
  • Resize only on one axis (width or height)
    • Vertical, VertCenter, Horizontal, HorzCenter
  • Miscellaneous
    • Client – Fills client area, less other children
    • Center – No resize, just centered
    • Contents – Fills client area, ignoring other children
    • Scale – resizes and moves to maintain the relative position and size

Spacing – Margins and PaddingMargins and Padding

  • Margins
    • Spacing for siblings (and parent edges)
  • Padding
    • Spacing for children

TFlowLayout

  • Arrange child controls like words in a paragraph
  • Controls arranged in order added to layout
    • Use “Move to Front” or “Send to Back” to reorder
  • Use TFlowLayoutBreak for forced line break

FlowLayout1 FlowLayout2

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

GridLayout2 GridLayout1

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

GridPanelLayout2 GridPanelLayout1

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
  • Some styles look better zoomed than others. The font grows – it is not a bitmap scale.
  • Has properties for OriginalWidth and OriginalHeight – Compare to Width and Heightto determine scaling.

ScaledLayout-Stretch

TScrollBox

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

Frames

  • Reusable pieces of User Interface
    • Includes
      • The layout
      • All the event handlers
      • All the code in the unit
  • Create 1 or more Frames, then reposition based on current layout
    • Examples:
      • In TTabControl for phone
      • Side-by-side for Tablet

TMultiView

  • One super panel with multiple modesMultiView
  • Supported modes
    • PlatformDefault
    • Drawer
    • NavigationPane
    • Panel
    • Popover
    • Custom
  • Point to MasterPane, DetailPane and definable MasterButton
  • PlatformDefault adapts to platform and orientation
  • Custom supports user defined layout and behavior

Learning Resources

Why Use Animations, Transitions and Effects?

  • Give you user interface life
  • Make application more interactive
  • Keep users attention
  • Use motion to provide meaning
  • Implement Google’s Material Design
  • Skumorphic behavior
  • Less code and better UI performance
  • Add affordance to user interface

FireMonkey Basics

  • Anything can be nested
  • Most numeric properties are a single & animatable
    • Position (X, Y), RotationCenter, Scale, Size (Height & Width), Opacity, & RotationAngle
  • Use MakeScreenshot method to get Bitmap of layout
  • VCL Developers Guide to FireMonkey by Robert Love, MVP - On YouTube from CodeRage 8

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
  • Can also use the Animate* methods
  • Note: Multiple animation instances are not necessarily synchronized (noticeable over time).

Interpolation

  • Determines how the rate of the value changes 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.

Effects 

  • Over 40 GPU powered effects (not counting transition effects)
  • Built using shader filters
  • Supports optional trigger for automatic enable or disable
  • Apply to image or control

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

ShaderFilters Sample (Ships with Delphi & RAD Studio)

  • \Samples\Object Pascal\Multi-Device Samples\User Interface

Q&A Logs

1st Session

Q: Might be early, and maybe not on the topic of C++, but FMX-applications can be written in C++, is it also possible to do in Delphi-language?
A: Yes it is. FMX works with both Delphi and C++Builder equally.

Q: Which edition of RAD Studio provides both C++ & Delphi personalities?
A: All editions of RAD Studio provides both C++ & Delphi personalities.

Q: I know that this is a C++ boot camp but everything I saw yesterday I believe can be done in Delphi. Is that true ?  If not, what can you do in C++ that you can't do in Delphi ?
A: You can't write C++ in Delphi. <grin> Tomorrow we will look at some C++11 specific language features that are unique to C++.

Q: I always had the idea FMX was based on a different language
A: FMX is built using Delphi. Under the covers the UI components connect to platform APIs for the user interface - we call this part FireUI. There are other parts of FMX that are related to the connections to 2D and 3D graphics (and the use of the GPU) on Windows, macOS, iOS and Android.

Q: When will we have unique_ptr in c++builder and a similar feature in Delphi in windows programs?
A: C++Builder supports unique_ptr for example: std::unique_ptr<TMyObject> obj(new TMyObject());

Q: where is the tool box to add elements to the form?
A: When you are in the IDE form designer - the Tool Palette shows all of the visual and non-visual components you can use. you can search in the tool palette (for example type button and get all of the components that have button in the name. type edit and see all of the components that have edit in their name.

Q: Can you simulate a panoramic view or a carousel type of UI?
A: Yes you can - in our samples, there is a "FireFlow" sample - which implements a "CoverFlow" type of UI - like you see on iTunes, music carousels, etc. All of our samples are also on SourceForge.

Q: is there anything available in C++ starter Berlin that is not available in XE7
A: Windows 10 styles and components, new UI components. Best way to see what's new between a specific version and the latest version - go to the DocWiki and read through the what's new section on each of the releases since your current version :D

Q: I can access all the FMX controls on Berlin.  Why would I need MIDA converter? Do I need it?
A: if you need to convert VCL forms to FMX forms

Q: I can't find the links for the sources, can you paste it here?
A: https://sourceforge.net/p/radstudiodemos/code/HEAD/tree/branches/RADStudio_Berlin/CPP/

Q: Any good books about LiveBindings?
A: http://docwiki.embarcadero.com/RADStudio/Berlin/en/LiveBindings_in_RAD_Studio has a lot of info

Q: GetIt Manager only has 16 items available ( some of those are multiple formats for the same thing ), is there any more coming ?
A: There are more in Pro and we're always open to adding more

Q: Delphi uses direct core function so, it is a platform for high-performance application. Correct?
A: It uses DirectX / Direct2D on Windows, OpenGL on other platforms - so yes, definitely high performance

Q: Can we handle gigabyte images made from applications like photoshop in image control?
A: You may run into DirectX restrictions at that size! Best approach is to tile the image or resample down and show different tiles at various zoom levels

Q: What version is app tethering
A: XE6 and above, I think, though recent versions have some fixes and changes of course

Q: What is the best way to handle string between anscii string and Unicode string in migration from Delphi's older version?
A: Marco Cantu wrote a great whitepaper: https://community.embarcadero.com/images/38980/Delphi_and_Unicode.pdf For C++, use wide strings and streams instead of narrow

Q: Is the complete win32 API available
A: Yes, plus the VCL which is a really nice wrapper over the WinAPI controls (plus custom controls.) The entire WinAPI, including nonvisual APIs, is definitely and easily available

Q: Speaking of mixing Object Pascal supported inline assembly, does C++ support this?
A: Inline assembler in Delphi only.  You can link Assembler files into your C++ projects.

Q: is it possible to get separate parts/modules of c++ builder like get GPS module get just android compilation etc. in other words "build your own C++ Builder" version
A: Some parts are modularised - eg Mobile, FireDAC

Q: please suggest place from where we can learn REST from beginning.
A: Jim made a good video: http://edn.embarcadero.com/article/43695 Also http://docwiki.embarcadero.com/RADStudio/Berlin/en/Tutorial:_Using_the_REST_Client_Library_to_Access_REST-based_Web_Services

Q: Is the starter version and pro version only different in keys? Can I install starter and upgrade to pro by using different keys?
A: Yes, if you buy Pro you get a new license key, then you can use the Feature Installer to install more features

Q: What is the advantage using C++ over python or java
A: we create native code for Intel and ARM processors. We don't create bytecode.  I know there are just in time compilers for Java and Python - but we go from source code to optimized machine code for compile apps.

Q: Is TButon may have the appearance of the District , and whether it will have any color
A: You can use FMX Styles to control buttons. you can also place (parent) an image on a tbutton and control color and bitmap on the image.

2nd Sesssion

Q: Do the padding, spacing etc. being discussed apply to vcl as well as fmx?
A: Yes, although in VCL they work very slightly differently. FireMonkey layout strategies - http://docwiki.embarcadero.com/RADStudio/Berlin/en/FireMonkey_Layouts_Strategies

Q: while justifying inside TflowLayout does it depend on tab order?
A: TflowLayout - http://docwiki.embarcadero.com/Libraries/Berlin/en/FMX.Layouts.TFlowLayout. Also, check the TFlowLayout - rules - http://docwiki.embarcadero.com/Libraries/Berlin/en/FMX.Layouts.TFlowLayoutRules

Q: So how do you have a memo expand to the size of a form. I have had what he is describing occur with memos when I try to anchor to the left and right what is the best practice for that.
A: You can align to "client", that is, fill up the entire space available, accounting for spacing, or anchor to left/right/top/bottom

Q: Difference between Tab Control and Page Control?
A: Tab and page control are different in VCL, where a tab control has the same tab content for all tabs, a page control doesn't.  In FMX, there's just the tab control, every tab has different content

Q: How can I have a memo follow the right side without filling up the whole client
A: Anchor it to right, and it will stay the same width and stick to the right edge 

Q: about the Product RoadMap:
A: Marco Cantu wrote an article on the Embarcadero Community with an update to our Product Roadmap (august 2016) - you can find it at http://community.embarcadero.com/article/news/16418-product-roadmap-august-2016  

Q: What does the double colon mean in the code?
A: In something like TForm2::Foo() ?  They indicate scope - TForm2 is the class, Foo is the method in that class. You use the same syntax for namespaces, which are a way of grouping classes, methods, variables, etc 

Q: When would one still use VCL instead of FMX for a new project?
A: I'd use FMX all the time, but you use VCL if you want Windows only.  It has native Windows controls and is a very mature library, one we're still developing and adding to. FMX is for cross-platform and has all the GPU powered stuff, antialiasing display quality, great effects etc - it's the new way 

Q: How FireMonkey works inside in relation to rendering? Is it based on Direct2D/DirectWrite as new Win10 approach uses? Can it be somehow compared to WPF/milcore (mostly managed) and SL/agcore (mostly native) ?? Thanks.
A: It uses Direct2D on Windows, OpenGL on other platforms.  It is similar to WPF, only with a less XML-esque streaming, native controls (you can have native controls!), and cross-platform 

Q: I had some little experience with Delphi and VCL and it seemed that in your world were not much used some advanced algorithms for collections as hash tables and also async processing - so although it's native, it was quite sluggish. Will this be improved throughout whole libraries fo FMX approach? thanks
A: In C++, there are definitely things like hash tables, and async is available through the parallel programming library for both C++ and Delphi.  In Delphi, check out the Spring4D library - some great collections and other code 

Q: How much allows C++ starter in relation to FMX styles? All editing possible? To make my own "crazy" style for Win at least? Users don't want too much unified skin-like behavior across platforms (in some app types though) - but for some kind of apps, its pixel-perfect rendering of the same UI across platforms (as in games) possible?
A: You can create your own styles, yes! And you can use the same style across platforms, to have the exact same look across several

Q: Long ago, I used QuickReports. This was bundled with Delphi, like FastReports now.   If I need to maintain/update that old code under current IDE, what recourse do I have?
A: Quickreports and FastReports both support 10.1 Berlin. If you want just use FastReports - they have a QuickReports converter.

Q: What language are FMX and VCL written in?
A: FMX and VCL are written in Delphi and some assembler 

Q: what database interfacing is available to the package : Starter; Pro; Enterprise etc?
A: Database support in Pro and Enterprise - FireDAC docwiki shows you all the SQL databases supported - http://docwiki.embarcadero.com/RADStudio/Berlin/en/FireDAC 

Q: What is more used on a global Market : Delphi or C++ Builder?
A: C++ language is used by more developers worldwide.  Delphi is used a lot in parts of the world - Brazil, Russia, South Africa, Eastern Europe, etc.



Comments

  • Tim M13395
    Tim M13395 Wednesday, 10 August 2016

    Hi Jim, Unfortunately I was not able to make the session this morning, will there be a recorded replay as there is for Day 1?

  • Tim M13395
    Tim M13395 Wednesday, 10 August 2016

    Thanks!

  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: