Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!
C++DelphiIDEModernizationNewsProductivityRAD Studio

New in RAD Studio 12.1: Split Editor Views!

RAD Studio 12.1 launched a few weeks ago, and while it was mostly quality-focused it added some key new features. The most major is an IDE productivity enhancement, one we’ve wanted to add for some time and which can be extremely useful… split editor views.

Where you used to have one editor (with many tabs) in the IDE main window, you can now have any number of adjacent editors (each with many tabs.) Like so:

121's split editors visible in the IDE, with two code editors and one designer all adjacent to each other in the main IDE window

You’re seeing a form designer on the left (which of course can be toggled to code), and on the right two editors displaying code. This layout is completely flexible and can have any on-screen arrangement you want, with any number of editors (each with any number of tabs) which can of course all handle both code and design as you expect. The layout in this screenshot is just an example.

This lets you:

  • Have the form designer, and the code for the same unit, both open side by side (or above and below, whatever you want)
  • Have multiple units open, easily readable and editable next to each other: great for reference.
  • Want to edit multiple bits of code? Do so! Want to refer to one unit while writing another? Do so! Want to edit in the same unit, in two different places at once like the interface and implementation simultaneously? Open it twice and do so! Crikey, open the same unit ten times and edit in all ten of them if you want! Go wild!
  • Oh, and this works with multiple editor windows, too, so you can have multiple windows, all full of multiple editors.

If this seems useful to you, go download or try out RAD Studio 12.1 right now! We have an upgrade amnesty with big savings before May 31.

It’s particularly good if you have a wide screen, as many people do today. As an example, I myself use two editors as adjacent columns almost all the time now.

Meanwhile, let’s dig into the feature further. Make sure you read the section on saving desktop layouts below. Otherwise you will get unexpected behaviour.

Split Editors

All IDE windows that host editors, which is both the IDE main window and the windows you got when right-clicking a tab and selecting New Edit Windows (a hugely useful feature on its own, and it works with split views) have traditionally only been able to show one editor at a time. Multiple tabs, so you could switch between editing many files, but one single UI control that allowed typing. For the rest of this article, I’ll just refer to the IDE main window, but remember it works in separate windows too.

Diagram of the IDE layout showing how in the past the main window hosted only a single editor control in the center

In this diagram, the IDE has docked panes to the left and right (sometimes below as well), and a single editor in the center. This was fixed. You could not have a second.

The name ‘split views’ is not ours (it refers to the feature generically), but it comes from the idea that you would divide this editor space in two, and thus split it.

Diagram showing the IDE layout with the previously single code editor in the center now split into two so two editors to the left and right of each other

The editor space is ‘split’ into two, here, vertically.

And you can keep subdividing. In this diagram, one set of docked panels was hidden, and views were split left/right, and top/bottom:

Diagram of the IDE main window showing many editors all adjacent to each other in a complex subdivided layout

To do this, right-click on an editor tab, and mouse over the Split menu. You will get a submenu to split up, down, left, or right, and that’s the side the new editor will appear relative to the current editor.

The editor tab context menu showing the Split and Move items each with leftrighttopbottom submenu itemsThe new editor will open with only a single tab open: the same file. Ie, the same file is now open twice.

The same menu has a Move submenu. This does exactly the same thing, only it takes the file you’re editing with it: the file is moved to a new editor to the left, top, right or bottom.

Dockable Editors

Referring to these as split views implies that the only way to handle them is to split. That’s how they are in other software. But we’ve gone a step further. In fact, editor windows are now fully dockable panes — just like the Object Inspector, Structure view, and others.

The moment you split, you’ll notice that all your editors have a title bar:

Screenshot of a split editor in the IDE main window which once there's more than one) now shows a title bar like any other docked pane

You can drag this around. Drag to undock. Then dock it again somewhere else – next to other editor on any edge to insert it to that side, in another editor window, or just let the mouse go to make it its own floating window. You can also dock the window onto another editor, merging the set of tabs they display (drag over the tabs.)

 

Hold Control to make sure that moving the mouse doesn’t try to dock, ie if you want it to stay floating.

Note there’s a Close (X) button too. You can click this to close the entire editor tab group.

Saving Desktop Layouts

Dockable windows and saved layouts interact, so this section is important to read so you get the behaviour you want.

First, an Intro to Desktop Layouts

Desktop Layouts save what docked windows are visible, their sizes and locations, etc. This is how when you start debugging, the IDE will rearrange what windows are visible to show the Call Stack, Local Variables, etc: windows useful only when debugging. This is because showing those windows is saved in a layout, and that layout is set as the one to switch to when the IDE changes state while debugging.

You can control this yourself: In the Tools > Options dialog, go to IDE > Desktop and Layout, and you can choose which saved layout to change to for various IDE situations.

You can create any number of saved layouts. In the IDE title bar, there is a Desktop Layout combo box. This allows you to manually change to any layout (eg, some people have a preferred coding layout vs form design layout and so create layouts for each, and toggle manually.) When you have your IDE set up as you want it — all windows in the right spot, the right docked panes visible, etc — just click the Save Desktop button next to this combo. You can enter any name, or overwrite an existing one.

Screenshot of the IDE title bar showing the Desktop Layout combo box and the Save Desktop Layout button

Screenshot showing the combo to apply a desktop layout, and the desktop layout save button. This button is new in 12.1: it used to be part of the IDE desktop menu, which is the dropdown button to its right.

Desktop Layouts and Split Views

I wrote, ‘Desktop Layouts save what docked windows are visible, their sizes and locations, etc’ — and now, editors are docked windows.

If you split and create editors, and then just close and reopen the IDE, they won’t reappear as you expect. Click the Save Desktop Layout button to keep your layout.

But the same applies when changing layout. If you set up lots of editors in the default layout, and then start debugging, the IDE will switch to the Debug Layout. That layout does not have editors where you had them.

When the IDE encounters any situation like this — docked editors but no place to put them — it converts them into floating windows. So, just re-dock where you want them… and save your debug layout.

One Oddity

I said at the top that the IDE used to be designed around a single editor per window. That’s obviously not the case any more, but there’s one remnant: the IDE’s original editor, the one you first split from, cannot be closed. It will show as blank space and there’s a message suggesting you drag a tab onto it. You’ll see this very rarely, when closing tab groups, and only if you try to close all tabs in what was the original editor. We may resolve this in future.

Editing the Same File in Multiple Editors

We’ve been working towards split editor views for some time. The past couple of years have seen us focus on making sure multiple floating editor windows worked well, and that’s because split editors are basically the same thing: it’s just where the editors are located. We were heading in the split editor direction, but didn’t say anything until we got there 🙂

When writing about multiple windows — which is still very useful and will remain so for as long as people use multiple monitors, so forever — we often talked about how you could have the designer for a unit, and the code for a unit, visible and editable at the same time. While the designer can only be in one window/editor, you can pull the designer between editors: click the Design tab, and if the designer is displaying elsewhere you can pull it to the current editor. This works for split views as well, of course.

But we also said you can have the same unit open in two windows at once. This is not a new feature, and I haven’t checked how many years back it goes, but possibly to the Turbo Pascal days? And this works, of course, with split views too. You can have the same file open in as many editors onscreen at once as you like, and type in any of them.

Screenshot showing the same unit open in tabs in three editorsWe have sometimes been asked, ‘how do the editors synchronise? Is it safe to type in one and then in another without saving?’ and similar questions. The answer is: completely safe, and talking about synchronization isn’t how they work. The architecture is different. The graphical editor control is a view over a single editor buffer. The buffer is where the file text lives. There can be any number of views over the buffer (ie, graphical editors) but there is only a single instance of the text. So when you type in one editor, and see your text appear in another editor for the same unit, it’s not right to say it’s synced. It’s there because it’s the same content, by definition. It cannot be different.

The screenshot on the right has the same file, Cell.cpp, open in all three editors. On the left a form designer is visible, but on the right it’s code. I could type in any of these three just fine, and the changes would be immediately drawn in the others — there’s only one copy of the file Cell.cpp in the IDE, even if there are multiple editors displaying it.

So open and type in as many editors for the same file as you wish. I myself often type in a method in one editor, and have a very short split view editor above it showing some of the interface section.

Productivity

And that’s the new editor split view feature in 12.1! Multiple editors, any number of them, form and code for the same unit next to each other and usable at the same time, the same unit editable in multiple places, etc.

I’ll leave you with this screenshot which is my personal favourite editor layout. Compared to what you can do, it’s very simple. I use two columns, and I click the Pin button on the docked windows to collapse them to tabs on the left and right of the IDE main window (they reappear when you mouse over.) That gives me full-width coding space.

Screenshot of the author's favourite split editor layout, two columns

 

Happy coding!

And remember,

 

 

See What's New in 12.2 Athens See What's New in 12.2 Athens Dev Days of Summer 2-24

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

About author

David is an Australian developer, currently living in far-north Europe. He is the senior product manager for C++ at Idera, looking after C++Builder and Visual Assist.

3 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES