[[Property:modification_date|Mon, 23 Jan 2023 09:22:48 GMT]]
[[Property:publication_date|Tue, 21 Aug 2018 18:55:21 GMT]]
[[Property:title|Customizing the tools layout and toolbars]]
[[Property:weight|-8]]
[[Property:uuid|eb75573e-c653-9290-376a-063cb5fa32d4]]
==Overview==

We saw in [[Viewing Classes]] how EiffelStudio panes could be resized and how the Auto Hide feature works for a pane. 

Now let's look at some other ways in which you can customize the layout the EiffelStudio tools.

The first time you use EiffelStudio, it will display a '''default''' tools layout that reflects the preferences of a majority of users. Typical user preferences change, so don't be too surprised if things look just a little different after installing a new version.

As you gain more experience with EiffelStudio, you may want to adapt the layout to your personal preferences. For example, you may always want to have certain tools visible which were not visible by default. Once you make a change like this, EiffelStudio generally remembers that change and it will be in force the next time you open EiffelStudio. But you can also save a complete tools layout and recall it at a later time. For example, you might have two or three different development '''modes''' that you work in, and have a saved tools layout for each. 

The ways in which the EiffelStudio tools can be arranged are nearly endless. You can make tools visible or hide them. You can make almost any tool a tab in almost any pane. You can re-order the tabs for a pane. You can pull tools completely out of EiffelStudio as free-floating windows. You can create additional panes as needed. Almost any pane can be "pinned" open or "auto hidden". 


==Reverting to the default layout==

If you changed the layout and are not pleased with the result,  you can revert to the default. Use the menu path:
<code lang="text">
View --> Tools Layout --> Reset Tools Layout
</code>
to reset EiffelStudio to the default tools layout.

[[Image:es gt reset tools layout 01|Reset Tools Layout]]

Figure 1


So at the end of the section [[Viewing Classes]] we manually reversed the changes that we had made to the layout to make additional space. We could have just selected Reset Tools Layout to restore the default layout. 

You can try this now and see the effect. Your tools layout will probably not change very much.

You can see in the image above that you would also follow that menu path in order to save a tools layout or to activate one that you had previously saved.

==Reverting to the default layout using the command line ==

From the command line, since version 20.05, it is also possible to reset the IDE layout

```sh
ec -reset_ide_layout
```

From the command line, you may need to set the ISE_EIFFEL, and ISE_PLATFORM environment variable.
The `ec` executable is located in `$ISE_EIFFEL/studio/spec/$ISE_PLATFORM/bin`.

==Minimizing, maximizing, restoring, and closing tools==

At the right end of the top bar for each tool you will see buttons that help you control the way the tool and its containing pane are displayed. Here are the icons and what they mean:

* [[Image:minimize-icon]] Minimize this pane.
* [[Image:maximize-icon]] Maximize this pane.
* [[Image:restore-icon]] Restore this pane to its previous size.
* [[Image:auto-hide-icon]] Set this pane to Auto Hide.
* [[Image:close-icon]] Close this tool.

There are a few subtleties you should understand when using these:

The pane in which the Editing tool resides is special. It is the only pane that supports '''minimize'''. And it does not support Auto Hide, nor Close. We'll learn a little more about this in the section on [[#Docking|Docking]].

When you maximize a pane it fills all available space. At the same time, its maximize icon changes to the Restore icon. When you click Restore, the pane relinquishes the extra space it annexed when you maximized it, and then returns to its original size and location.

The Close button will close only the current tool. So, that tool goes away, but any other tools in the same pane remain. However, when you close the last tool in a pane, the pane itself disappears and the space is absorbed by other panes. Remember that you can re-display closed tools through the menu path:
<code lang="text">
View --> Tools --> tool name
</code>
 
{{note|EiffelStudio supports a number of [[EiffelStudio: Key shortcuts|'''key shortcuts''']] (sometimes called '''accelerators''',  some of which can be useful for changing aspects of the Development Window. For example, <code>CTRL+M</code> will toggle the Editing pane between Maximize and Restore, and <code>CTRL+N</code> will create a fresh Development Window. Keyboard shortcuts themselves are tailorable in the [[Keyboard shortcuts preferences|EiffelStudio Preferences]].}}


==Re-ordering tabs==

Within a particular pane, it is possible to have many tools visible. Each will be represented as a tab at the bottom of the pane. For example, the pane that contains the Class and Feature tools has the following tabs by default in the version that is current at the time of this writing:


[[Image:es gt default pane tabs|A default set of tool tabs]]

Figure 2


One easy way to customize your tool layout is to change the order of these tabs if you prefer. Just drag a tab horizontally to a new position to the right or left of where it originally was located and release it. As you drag the tab, you'll see it relocate itself, so you'll know just were it will end up when you release it. 

So suppose that you felt that it would be more convenient to your style of work to have the Outputs tool be the left most tool, versus the Class tool. Just drag it over there ... and now your tabs should reflect the new order:


[[Image:es gt reordered pane tabs|Tool tabs after moving Outputs tool to the left end]]

Figure 3


Try this now, if you'd like but be careful to move the tab '''only''' horizontally along the row of other tabs. If you move it off the row of tabs, you may inadvertently enter the extraordinary, but more complex realm of '''docking''', our next topic. Just in case you do get off the row of tabs and you see strange icons appearing on the Development Window, don't release the mouse button, just press the <code>ESC</code> key to cancel the dragging action.


==Docking==

The docking ability within EiffelStudio is arguably the most powerful tool at your disposal for tailoring the tools layout to your liking. Docking can be a little daunting at first, but once you understand a few concepts, you will likely find it both easy to use and helpful.

Maybe the first thing to know about docking is that EiffelStudio gives you the option of locking elements of the interface against inadvertent changes in docking. Following the menu path:
<code lang="text">
View --> Docking Lock
</code>
you can choose to lock (or leave docking enabled) on toolbars, tool panes, and/or editing panes. So, if you get things just the way you want them, in addition to save your tool layout, you may want to lock the elements against additional docking changes.

Perhaps the second thing to understand, if you haven't already guessed, is that, for docking purposes, the EiffelStudio interface supports toolbars and two different types of panes. One type of pane is the one in which the Editing tools reside, which we'll call an '''editing pane'''. The other is the type of pane is the '''tools pane''' where other tools can be docked.

So, with this in mind, we can take another look at the EiffelStudio layout.


[[Image:es gt a development window 02|Default tools layout]]

Figure 4


Here we see the editing pane with one editing tool targeted to the class <code>LIST</code>. 

There are two tools panes. Docked in one are the Class, Feature, Outputs, and Error List tools. In the other are the Groups, Features, and AutoTest tools ... and to the right of the AutoTest tab we see the icon ([[Image:continued-icon]]) and a number indicating that there are more tabs, but no room to display them. In this case there is only one more tab; it is for the Favorites tool. Of course, if the that tools pane were a little wider, we would see the tab for the Favorites tool and the "continued" icon and the number would disappear.

It turns out that there are actually two more tools panes in this layout. One contains the Diagrams tool and the other contains the Dependency, Metrics, and Info tools. These two panes are Auto Hidden so we only see the minimum evidence that they exist ... just their tabs. You can tell that these are two different panes by how the tabs are distributed. Diagram is somewhat "off by itself" whereas Dependency, Metrics and Info are grouped closely together.

As we learned in [[Viewing Classes]] you can make one of these tool panes visible by moving your cursor over it, or clicking on one of its tabs. The pane will expose itself for the length of time that the cursor remains over it, then recede into hiding again when the cursor is moved away. 

Try this now with the Diagram tool. The pane housing the diagram tool appears from the bottom of the screen. Notice also that it has occluded the pane containing Class, Feature, Outputs, and Error List tools, and about half of the pane containing the Groups, Features, AutoTest, and Favorites tools.


[[Image:es gt development window diagram tool unhidden|Diagram tool unhidden]]

Figure 5


So, Auto Hide works well to keep panes that we might not use very often out of the way ... but still pretty handy.

===Floating a pane===

Let's dive into our first docking (or maybe undocking) experience. Suppose, though, that you were in the analysis and design phase of a project and you wanted the Diagram tool to be open and available at all times. Of course, you could move your cursor over it to "un-hide" it, then pin it open. But then it would be covering the other tool panes which we use often. 

One great capability of the docking mechanisms in EiffelStudio is that you can disconnect, or '''float''', a pane away from the rest of the EiffelStudio development window. Let's float the hidden pane that now contains just the Diagram tool out to the right of the entire Development Window.

In order to float this tool pane, we first have to set Auto Hide off. 


{{note|In versions of EiffelStudio starting with version 6.6, it will no longer be necessary to set Auto Hide off before moving a pane. }}


So move your cursor over the Diagram tab and the pane should expand (if it does not make it self visible, then click on the tab). Then move to the upper right and click the horizontal pushpin icon ([[Image:auto-hide-off-icon]]) to turn off Auto Hide and pin the pane open. 


[[Image:es gt diagram tool pane pinned 01|With Auto Hide off, occluded panes become visible.]]

Figure 6


You may notice that a pane that is auto hidden may, when it expands, occlude other panes. However, when you turn off Auto Hide by pinning the pane open, any panes that it had occluded will become at least minimally visible. In the case of this example, the pane containing the Class tool was temporarily covered by the expanded Diagram pane, as was the row of tabs on the pane containing Groups. When you pin the Diagram pane open, the title bar for the pane with the Class tool becomes visible, and the pane with the Groups tool gets shortened to fit above the Diagram tool's pane.

It is at this point that new EiffelStudio users sometimes have problems understanding what's happening. So read the following description of what's going on before you actually try to move the pane ... and don't forget that you can always reset the tools layout if things don't go the way you intended.

Now that we've turned off Auto Hide for Diagram's pane, we can move the pane and either re-dock it somewhere else in the development window or, as is our intention, "float" it as a window separate from the Development Window. 

To undock and re-dock or float a pane, you drag the pane by its title bar (but don't do this quite yet). As soon as you begin to drag the pane, you will see the look of the Development window change:


[[Image:es gt docking in progress 01|Dragging a pane to dock]]

Figure 7


In the figure you can see the cursor arrow on the title bar of the pane. The pane has been dragged very slightly and EiffelStudio has sensed that we want to move the pane from its current position. In response, EiffelStudio has overlaid the Development Window with a set of icons that represent valid docking targets for the pane being moved. We'll look closer at those in a moment.

But for now, notice the large dark, semi-transparent '''docking feedback''' area at the bottom left of the image above. This represents what will happen to your pane if you release the mouse button at the current time. So in the case of the figure above, releasing the mouse button immediately will '''float''' the pane on top of the Development Window. This is nearly our intent, although we want to move the floating pane out to the right of the Development Window. So, without releasing we drag the pane off the top and to the right of the Development Window, then release it. 


[[Image:es gt diagram tool pane floating 01|800px|Diagram tool floating]]

Figure 8


So go ahead and try it now. If you've pinned the pane with the Diagram tool open, then drag the pane by its title bar out to the right and off the Development Window and release it. 

===Docking a pane===

The problem that some users have when first trying to adjust the tool layout using docking (without the benefit of this Guided Tour) is that once they move a pane, it's not obvious to them what to do next to get the effect that they want. As a consequence, they attempt to put things back the way that they were when they first dragged the pane ... and usually they aren't successful. Remember that you can always press the <code>ESC</code> key to cancel the drag while still holding the mouse button down.

Now let's take a look at the target graphics and what they mean, and we'll do an exercise in which we put the pane with the Diagram tool back where it was originally. 

In Figure 7 above, you can see the docking target graphics. You see this figure:


[[Image:docking-target|Docking target]]

Figure 9


in two places, and four smaller figures:

[[Image:docking-target-top|Top]]  [[Image:docking-target-left|Left]]  [[Image:docking-target-right|Right]] [[Image:docking-target-bottom|Bottom]] 

Figure 10


one near each border of the Development Window.

The graphic in Figure 9, shaped like a "plus" sign or cross, will appear in any pane which is a valid docking target for the pane you are moving. So, in Figure 7, those panes are the pane housing the Groups tool and the one housing the Class tool. 

The center of the graphic represents the target pane itself. So, if you drag your pane over the center of the graphic and release it, your pane will now become a new tab in the target pane. You can see the docking feedback area hinting to this effect. In the figure below, the pane with the Diagram tool was dragged over the center of the target graphic on the tool with the Class pane. Notice that the whole pane is covered with the docking feedback area, which even shows the hint of a new tab. 


[[Image:es gt add tab to pane|Hovering over center target will add a pane as a new tab]]

Figure 11


If we were to release the pane at this point, it would dock as a new tab along side Class, Feature, Outputs, and Error List. In this case, the pane we are moving contains only one tool, Diagram, but if it contained multiple tools, each of those tools would become a new tab in the target pane.

But remember that our goal in this exercise is to restore the pane holding the Diagram tool back to its original position. So, making it a tab in the pane with Class, won't achieve that goal. Let's look at some other possibilities. 

What happens if we drag our pane over one of the tips of the cross shaped target graphic? These targets will allow us to split the target pane into two panes, one containing the original content and the other containing the content of the pane we are moving. The original pane will be split according to which tip of the cross you drop your pane onto. For example dropping on the right tip will split the target pane into left and right panes an put your pane on the right. Again you can see this depicted in a preview when you hover over one of these, as shown below.


[[Image:es gt split pane right|Hovering over the tip of a cross causes the target pane to be split and the new pane added adjacent]]

Figure 12


It's pretty obvious that this will not get Diagram back to its original location. The only options left unexplained are the four graphics shown in Figure 10. These each look like a detached version of one of the tips of the cross shaped graphic, but they are located along the four edges of the Development Window. If you drop your pane on one of these it will add it as a new pane along the corresponding margin of the Development Window. 

We know that originally our pane with Diagram was in Auto Hide mode at the bottom of the Development Window. 

So, drag the pane from its floating position and drop it at the bottom of the Development window on this graphic:

[[Image:docking-target-bottom|Bottom]] 


The effect is that now your pane has been docked back into the Development Window at the bottom. The only thing left to do now is turn Auto Hide back on by clicking the push-pin icon. Now the pane that houses the Diagram tool is back in its original place in the layout.


===Docking and the Editing pane===

As we learned earlier in [[#Minimizing, maximizing, restoring, and closing tools|Minimizing, maximizing, restoring, and closing tools]], the pane in which the Editing tools reside has special properties and restrictions not present for panes housing other tools. It's the same for docking. Just as you can't close the Editing pane, you can't re-dock it in any other location. You can't dock other tools, the Feature tool for example, in the Editing pane (notice that you don't get a targeting cross in the Editing pane when you drag a pane). 

Although the Editing pane can house only Editing tools, you ''can'' re-order the tabs for Editing tools and you ''can'' re-dock Editing tools by splitting the Editing pane. For example you might want to look at two classes side by side in two different panes. In the image below, after opening tabs for classes <code>LIST</code> and <code>CHAIN</code>, we dragged the tab for <code>CHAIN</code> and dropped over the right tip of the cross shaped graphic that appeared in the Editing pane. Then we put the pane Groups and the one with Class in Auto Hide to enlarge the size of the Editing tools. This allows us to view <code>LIST</code> and <code>CHAIN</code> side by side. 


[[Image:es gt side by side editing|Viewing two classes side by side in the Editing pane]]

Figure 13


===Docking and toolbars===

You can drag toolbars and re-dock them in different places. You can float toolbars in the same way you would do a tool pane. In the figure below, the Project toolbar has been dragged away from its default home to the right of the Standard Buttons toolbar. Now it's over undockable space, so if released here it will float, just as we saw with tool panes.


[[Image:es gt redocking project toolbar|Dragging the Project toolbar around]]

Figure 14


When you move a toolbar, drag it by its "head". The head is indicated by an icon ([[Image:toolbar-head-icon]]) that looks like a vertical row of dots at the left end of each toolbar.

The figure above shows that there are two "rows" available for placing toolbars. This is the way it is in the default layout. But the number of rows can be expanded if needed. So, if you drag a toolbar toward the bottom of the toolbar area, you will see that a new row will become available in which you can dock the toolbar that you are moving.


[[Image:es gt redocking project toolbar new row|Dragging a toolbar to a new toolbar row]]

Figure 15 


In the figure above, the Project toolbar has been dragged near the bottom of the toolbar area, and a new toolbar row has opened up to allow the Project toolbar to be docked there.


==Customizing toolbars==

In addition to using the docking facilities to move toolbars around to suit your work style, you can also customize each toolbar by adding, removing, or re-ordering the buttons on that toolbar. See more about this on the page [[Toolbar customization]].