Categories
design FireMonkey User Interface VCL

FireMonkey vs. VCL

Frequently when I am talking about the VCL or FireMonkey I get some of these common questions:

  • Is VCL deprecated?
  • Which is better FMX or VCL?
  • If I am starting a new app today, should I use VCL or FMX?

FireMonkey vs. VCL

The first is easy to answer, the other two are a little harder. The VCL (or Visual Component Library) is NOT depreciated, nor will it be any time soon. As long as there is Windows and the Windows API, there will be VCL. Just recently in Marco’s Windows 10 Webinar he said “VCL is the best library for Windows desktop development and fully embraces Windows 10.

The VCL gets new components, features and bug fixes frequently, but maybe not as often as FireMonkey. The reason is the VCL is a mature framework, while FireMonkey has been going through a lot of growth the past few versions (although it has stabilized a lot recently, and is reaching a more mature status.)

So which is better, and which to use? There isn’t a straightforward answer, but instead I can tell you the advantages of each, and you can make an educated choice for your next project.

Visual Component Library (VCL)Visual Component Library (VCL)

The VCL was release with the first version of Delphi. It is mostly a thin wrapper over the Windows API controls, but also includes a lot of owner draw controls. It uses GDI, Windows Handles and Windows Messages. This makes it subject to the same behavior as 90% of the other windows applications out there. If you want to you can inject a VCL button from your app into another app, or sniff messages sent to a different app and redirect them into yours.

As I said earlier, the VCL is mature, and so is the 3rd party component space. There are thousands of high quality VCL components, controls and libraries out there. Probably the most notable are the grids. The VCL grids are the best in the industry, and for good reason, our technology partners were making grids for the VCL before any other platforms had the idea of 3rd party controls. So if you want the best grid on the planet, you will probably use the VCL (although the FireMonkey grids are gaining fast).

Because VCL is mostly a thin wrapper on the Windows API, VCL based applications are much smaller than FireMonkey applications. Anymore this usually isn’t a huge deal with fast download speeds and huge hard drive sizes. But if you need a really small lightweight application, then VCL might be a good choice.

Because VCL has been around a while, you may have some existing VCL code that you want to integrate into your application. You could use a utility like Mida converter to convert it to FireMonkey, or something like Monkey Mixer or TFireMonkeyContainer to mix FireMonkey with VCL.

Generally if I am building a simple grid intensive application that I know will only run on Windows, then I find myself using VCL. Or if I need to leverage a specific 3rd party control, or Windows API feature that requires Windows messages. This is less and less frequent though.

FireMonkey (FMX)FireMonkey Cross Platform Framework (FMX)

As FireMonkey is a newer framework you tend to see it covered more. A lot of people are still learning how to use it, and how to tackle cross platform development. The main advantage of FMX is that it is designed from the ground up to be a cross platform framework. It lets you design a single user interface that runs and looks great on Windows, iOS, macOS and Android. But that isn’t the only reason to use FireMonkey.

FireMonkey is based on the latest GPU frameworks: DirectX for Windows and OpenGL elsewhere. It supports both 3D and 2D rendering models, both of which are hardware accelerated. If you want to have some powerful graphic effects or 3D, then FireMonkey is probably going be your first choice. There are some really powerful 3D engines as well as some great graphics effects libraries for VCL, but FireMonkey has these ideas baked into it’s core.

FireMonkey is also a lot more flexible. You can embed any control in any other control with FireMonkey. This ability to build composite controls turns the smaller set of controls it includes into a much more robust set of controls. Also there are animations and effects that let you build fantastic, rich user interfaces with very little effort.

VCL has a respectable set of containers and alignments, but FireMonkey has many, many more, and again they are much more flexible. Another big difference is FireMonkey uses a single precision floating point number instead of an integer in laying out the controls. Much higher precision, but typically subpixel precision doesn’t buy you much. Where it does make a difference is when you scale on FireMonkey since it supports multiple pixel densities.

The most obvious reason to use FireMonkey is if you are currently planning to target multiplatform, or there is a possibility you might in the future (which is a pretty high likelihood). The other reasons are you want a more flexible UI or you plan to take advantage of 3D or other effects FireMonkey provides.

Conclusion

In summary VCL is amazing, and continues to get fixes and new features. It is a better user interface framework than any other out there, except maybe FireMonkey. So use VCL when you are only targeting Windows and don’t need the 3D, effects or flexibility of FireMonkey. Use FireMonkey when you are going multiplatform, or you new some of FireMonkey’s flexibility especially when working around graphics.

Both frameworks will be around for a while. As you use them both you will get a better feel for which to use in each situation. I’d love to hear your feedback about when you choose which framework.

Categories
Android design iOS Tools

Looking at Radiant Shapes

RadiantShapes_Logo
I’ve been playing with Raize Software‘s new Radiant Shapes components this week. These are the brand new primitive shape component set for FireMonkey on all platforms: Windows, OS X, iOS and Android. I’ve been a long time fan of Raize Components because of their attention to detail and high quality. Radiant Shapes continues this tradition.

Radiant Shapes PaletteRadiant Shapes is made up of 35 reusable shape controls that are all pretty flexible. If you caught Ray Konopka’s RAD In Action: Seeing is Believing on Data Visualization then you have a pretty good idea the importance of using primitive shapes like these to communicate useful information to your users, especially in mobile development.

All of the shapes include useful design time menus to make common changes quickly and easily. You can probably get away without using the Object Inspector for a lot of your common tasks. They also have various customizations that make them very flexible.

One thing that is interesting is they introduce the idea of a TRadiantDimension they allows you to specify some of the sizes as either absolute pixels, or as a scale factor. This gives great flexibility in how they behave when resized.

Ray Konopka introduced the Radiant Shapes during CodeRage 9 with a couple great sessions. You can catch the replay for both Object Pascal and C++.

I really like the TRadiantGear component, so I decided to play with it in detail. You can specify the number of cogs (teeth), their size (as a Radiant Dimension) and the size and visibility of the hole. Just like all the other shapes, they handle hit tests correctly, so at runtime, you can click between the cogs of the gear and it doesn’t produce an onClick event.

Gears

Just for fun I put down three gears and used LiveBindings to connect a TTrackBar.Value to their rotation. A little math in the OnAssigningValue event and I had all the gears rotating in unison. The fact that the gears stayed synced up, and the teeth meshed perfectly was really impressive.

procedure TForm4.RotateGearBigAssigningValue(Sender: TObject;
  AssignValueRec: TBindingAssignValueRec; var Value: TValue;
  var Handled: Boolean);
begin
  Value := TValue.From(-1 * (Value.AsExtended / 2 + 18));
end;

procedure TForm4.RotateGearRightAssigningValue(Sender: TObject;
  AssignValueRec: TBindingAssignValueRec; var Value: TValue;
  var Handled: Boolean);
begin
  Value := TValue.From(-1 * (Value.AsExtended + 18));
end;

18 is the offset for the gears (360° / 10 cogs / 2 (half offset) = 18) and the 2 comes from the big gear being twice as big (20 cogs), then the -1 is so they rotate the opposite direction.

Overall I am impressed with the Radiant Shapes. Something I would like to see include a polygon component where I can specify the number of sizes. You can do that with the star and gear, but a flexible polygon would be nice. Also, the shapes can be rotated with the rotation property, but it would be cool if there was a way to rotate it in the designer too. That might be a big undertaking though.

You can buy the Radiant Shapes from Raize Software for $49, which gives you a 1 year subscription for updates. I did get a complimentary copy from Raize Software to review them.

Be sure to join Ray on Friday the 23rd as he is featured in the Embarcadero Technology Partner Spotlight.

Categories
design Mobile

Fire UI and the Multi-Device Designer

During CodeRage 9 I had a session on Fire UI and the Multi-Device Designer. You can also check out my previous post on creating a custom FireUI view for the Moto 360.

Fire UI is made up of three parts:

  1. Behavior Services – Runtime & design time platform design information
  2. Multi-Device Designer – Unified project – Tweak UI for platforms
  3. TMultiView Component – Adaptive layout

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

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

OS Specific example

 var
  DeviceBehavior: IDeviceBehavior;
begin
  if TBehaviorServices.Current.SupportsBehaviorService(?
    IDeviceBehavior, DeviceBehavior, Self) and
    (DeviceBehavior.GetOSPlatform = TOSPlatform.iOS) then
    // behavior specific to iOS
end;

Display metrics example

var
  DisplayMetrics: TDeviceDisplayMetrics;
begin                        // self is a form in this case
  DisplayMetrics := DeviceBehavior.GetDisplayMetrics(Self);
  if DisplayMetrics.AspectRatio > x then
    // AspectRatio specific behavior
end;
type
TDeviceDisplayMetrics = record
    PhysicalScreenSize: TSize;
    LogicalScreenSize: TSize;
    AspectRatio: Single;
    PixelsPerInch: Integer;
    ScreenScale: Single;
    FontScale: Single;
end;

More Information

Check back later and I’ll have the video replay available too.

Download the XE7 Trial today and check out the special offers.

Categories
design

Know Your Alignments

FireMonkey offers a lot more alignment options than those offered in the VCL. The Alignment aligns the control within its parent, setting anchors, size and position. The Default is None. To make it easier to think about them, you can group the different types of alignments.

  • Anchor and fill along edge – these are 4 of the alignments you are most likely familiar with.
    • Top, Bottom, Left, Right
  • Like the above, but takes precedence over other alignments
    • MostBottom, MostTop, MostLeft, MostRight
  • Fill parent, but preserve aspect ratio – very powerful, especially when applied to one of the new layouts, like the TScaledLayout.
    • Fit, FitLeft, FitRight
  • Resize only on one axis (width or height) to fill that axis of the parent and optionally centered
    • Vertical, VertCenter, Horizontal, HorzCenter
  • Miscellaneous
    • Client – Fills remaining space not occupied by other pinned controls.
    • Contents – Fills entire client area of the parent overlapping other controls.
    • Center – Just moves to the center without resizing.
    • Scale – Maintains relative size and position relative to the parent as it resizes.

Checkout the full DocWiki pages for more details on FMX.Types.TAlignLayout and Vcl.Controls.TAlign.

Categories
Android design iOS Mobile

Skeuomorphic No More?

Skeuomorph is compounded from the Greek: skéuos (container or tool), and morph (shape). It describes something that possess additional ornamentation indicative of its inspiration. It is used to describe both physical objects as well as digital designs.

In the physical world we frequently see it as something made of plastic that is styled to look like leather, wood, etc. In the digital world it shows up when a button or other digital element contains textures, shading, etc. to make it look like the physical element that inspired it. From a design point of view in digital assets it is useful in that the user recognizes what an object represents by its physical familiarity (called an affordance).

Apple’s platforms used to be full of a great examples of Skeuomorphism. On iOS all the default icons had a glare that made them look 3D. Many apps, had a extra details to make them look lifelike. Take the Notes app, it was full of torn bits of paper, leather borders, stitching, paper lines, etc. The new version doesn’t have any of that (although it does have a slight paper texture).

iOS6 vs iOS7 Notes

iOS 7 didn’t lead the move to non-skeuomorphic design. Windows Phone 7 (the predecessor to WP8 and Windows 8) and the Metro design eschewed skeuomorphism completely. (If you are keeping score, iOS 7’s features were inspired by Android and design inspired by Microsoft.) Android has always been been straddling the proverbial skeuomorphic fence. Although with the the other two mobile plays moving away from skeuomorphism I expect Android to follow.

iOS7’s move away from skeuomorphism really highlights how most apps design no longer tries to mimic the platform’s design completely. Users are creative with their apps, and often times bring their own design with their app across all platforms. That is the great thing about building your cross platform apps with Delphi. You can use the standard platform styles so your app looks like a standard app on each platform, or just as easily switch to a premium or custom style and have your app stand-out and look consistent across platforms.

Now you need to ask yourself if I only wrote this post so I could use words like eschew, skeuomorphic, proverbial and affordance.