Layouts, VCL, FireMonkey, and … DevExpress!

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.

Then, let's add three layout groups:

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:

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:

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

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

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:

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:

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

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

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:

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:

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:

Let's see how it looks at runtime:

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!

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

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:

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

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:

So, how did I do this?

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

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

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.)

Thanks for a great post, Andrea!

Free DevExpress Products - Get Your Copy Today