Layouts, VCL, FireMonkey, and … DevExpress!

ctodx
03 August 2020

Last week I was having a chat with an old “Delphi” friend, Andrea Raimondi, about DevExpress’ recent CTP release of our FireMonkey (FMX) grid for RAD Studio. For some reason he kept on veering away from that to layouts, what they are, and why they are important. After wondering what beer he was drinking, fine, says I, write me a post and I’ll publish it on the DevExpress Community blog site. A couple of hours later, I got The Email. A great discussion on using layouts with the DevExpress VCL Subscription, with a neat follow-up on FMX. Take it away, Andrea!

DevExpress Layouts: When you only look at the grid you're missing out!

Introduction

We all know what DevExpress is good at: grids, right? Maybe you know about the editing ones and, the most advanced of you may even know about the pivot grid. Well, if that is what you think, maybe it's time for you to try the Layout control. The layout control is the only (as far as I know) visible control that disappears at runtime. I know it sounds weird but in a sense that is exactly its purpose: it gives your UI structure while being completely invisible.

A small example

Let's create a layout at design time and align it to client.

clip_image001

Then, let's add three layout groups:

clip_image002

You get here with a double-click on the control. Now let's move those onto the actual layout surface by selecting them and dragging and dropping them onto the root one by one (multi-select isn't supported – noted! Ed.).

This is what you see then:

clip_image003

This gives you hints as to what it is set up like: it's flowing vertically and not aligned to client. Which is fine for us because now we are going to change the layout direction and something else will appear, this:

clip_image004

What happened? Let's align everything to client, shall we? Look:

clip_image005

Tabs. We did this by changing the layout direction, like so:

clip_image006

You get a tabbed view by simply changing a property. We will look at the look and feel later on because we can do some neat stuff with that as well.

A simple login screen

By today's standards, we might want a slightly different way to approach a login screen because doing the classic dialog doesn't really work anymore. You can do that very easily.

When working with layouts you must reason as though you were working with panels but the trick is that layouts don't require nearly as many: you can use a layout group everywhere you would otherwise use a panel.

First of all, we need it centered, therefore we add a layout group to do just that:

clip_image007

Now we need two groups one of which is aligned to the bottom (that's for the buttons) and another which is aligned to client inside the centered one:

clip_image008

Finally, we add the edits and the buttons with no labels. Why? Because those are built-in, making label controls redundant in this situation:

clip_image009

It would however look better if the buttons were on the same line and maybe aligned at left and right, like so:

clip_image010

Playing with the LayoutDirection property you can get this effect.

Do you like all those borders though? I do not, thus let's change a few ShowBorder properties in the groups and make it slightly slicker:

clip_image011

I have changed all the captions by modifying the "CaptionOptions" property set in both groups and items. To get a better feeling of it, I have also renamed the groups and a few other things:

clip_image012

Naming the layout control as "Layout" is very helpful because then you get everything much more easily recognizable. As you can see I have a very consistent naming convention, which I advise you use as well just to make your life easier.

Now though, we don't really want to see those tabs, right? Yeah you can hide them straight up, by doing so:

clip_image013

Let's see how it looks at runtime:

clip_image014

Not bad, huh!?

Look and feel

But we can do better: let's add some skinning. Make the project skin aware and add a LookAndFeel controller. Obviously in a real application you would do that on a datamodule, but let's keep it simple.

When you have done that, here comes the magic: there is a controller for layouts!

clip_image015

To connect the layout to the main controller just double-click on it and add a new item, like so:

clip_image016

To get this, when you click on the plus sign just select "Use LookAndFeel controller".

To connect it to the actual layout control, you set this property:

clip_image017

Now let's change the controller to a skin and run it again:

clip_image018

Now we're talking, right?

CTP for FireMonkey

Here cometh the real giggle though: you can do this very thing with FireMonkey as well. Unlike the VCL side, however, you need to use FireMonkey styles, but the result is incredibly similar (but not the same, at least for now).

What is missing at the moment is a tab layout but it's a CTP so it's kind of fair. It means you will have to find ways around this issue, and I have a suggestion further down, so keep reading!!!

Because we have seen the basics of how it works and because there are no major operational differences, I will start with the complete screen and walk you through what changes: first of all, if you want to test this properly you will need to do so on an Android phone. The Windows side doesn't work all that well for now, but again it's a CTP so fair enough.

When you do so – that is, testing on Android – you will get this:

clip_image019

So, how did I do this?

The basic idea is quite simple: here is the structure view on FMX (with appropriate names):

clip_image020

Note that there are no buttons and the reason for that relies on how the password button is configured:

clip_image021

By doing so, we spare the need for a button and make the UI lighter and snappier. (Do please note how this UI is incredibly fast!)

Advanced layout usage

One great thing about layouts is that you can do nearly anything. For example, you can use entire frames as controls. This obviously works both in VCL and in FMX (may I, once more, quietly remind you that this is a CTP, basically DX is still touching it gently, not at full steam!) and it's stunning. I do absolutely invite and encourage you to try for yourself. I can't get a picture of it running on my phone because something isn't working just right and I have no idea if it's the CTP or RAD Studio 10.4. (I tossed a coin and it came up RAD Studio ! Ed.)

Because of a lack of tabbed layouts, you may need to get creative on FMX (for example by using TFrameStand and switching frames around).

Conclusion

By this point, I think I made a compelling argument for you to try using layouts in your app: they are powerful, flexible and work cross-platform. And for FMX this is just a starting point. Oh, just one more thing: this article has been written with the RichEditor sample that comes with the DevExpress VCL Subscription. Yes, seriously. (Score! Ed.)

clip_image032


Thanks for a great post, Andrea!

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
6 comment(s)
Donald Shimoda
Donald Shimoda

Which one use? TdxSkinController or TcxLookAndFeelController? In which order the full applications take the precedence?

Im experimenting with this without luck.


Best regards

3 August 2020
Andrea Raimondi
Andrea Raimondi

Hi! 

If you enable the project to use skins, you can use the Lookandfeel controller. That's what I did for this one and what I normally do anyway. 

3 August 2020
Donald Shimoda
Donald Shimoda

Thanks Andrea. The doubt raises because lookandfeelcontroller have LESS properties than skincontroller and completely different properties than lyoutlookandfeelitems. For that reason can be great a post or doc explaining which is the library developers suggested usage for that components.

Im using right now the 3 component in a datamodule for my projects , setting all the same properties (wherever have coincidence) and find the only way to setup skins to some layout controllers is assigning the default layoutlookandfeel component to it . IMHO the logic says that must dont needed and it will takes the lookandfeelcontroller properties.

Another doubt is if theres anyway to avoid the automatic add of skins unit to all the forms using devexpress componentes. I hope theres a better way to do and maintain cleaner my code.

Best regards.

P.S. layout is an amazing functionality from devexpress. Agree.

3 August 2020
Andrea Raimondi
Andrea Raimondi

Hi!

Yes, you can just unselect the ones you don't want. My suspicion is that you need the units for all the skins you want because they are managed through initialization/finalization and if the order changes you end up having to review the initialization order and that is not fun! 

Thus, they just include them every single time and that's it. The side advantage to this is that you always know which skins are available via code (rarely you might need to do things with them and in those cases it's useful to know). 

3 August 2020
Alexander Elagin
Alexander Elagin
I have been using the dxLayoutControl for years and cannot imagine creating complex forms without it. This control is a real gem in the DX VCL collection.
7 August 2020
Dany Marmur
Dany Marmur

Exactly like Alexander says!

IMHO the (VCL) LayoutControl is one of the best thingies ever, all platform analogues included.

It should IMHO be made more "standalone" (DX skins, DX base forms) and sold separately.

2 October 2020

Please login or register to post comments.