Recent Changes‎ > ‎

Improved Layout Editor Windowing

posted May 16, 2012, 10:43 AM by Tor Norbye   [ updated May 16, 2012, 10:47 AM ]
TL;DR:
As previously mentioned, ADT 20 sports a brand new property sheet. Unfortunately, Eclipse by default places the property sheet as a wide window shared with the Console view, the Problems view, etc. The property view works better as a tall and narrow view.

We considered adding a new "Layout Editing Perspective", where we could create an "optimal" window configuration for layout editing, with both the outline and the property sheet arranged vertically. However, switching between perspectives has some distinct disadvantages, especially when you're jumping frequently between editing Java code and tweaking a layout file.

Another option is to do what WindowBuilder does: Embed all the views you need for layout editing inside the editor area itself -- including a new outline ("structure"), a new property sheet, etc. When you maximize the window, you have everything you need. However, this has a disadvantage similar to the perspective-solution: when you switch back and forth between Java and GUI editing, you'll need to maximize and un-maximize, or your Java editor won't show the outline of the Java class.

What we came up with is a hybrid approach which hopefully provides the best of both worlds: no new perspective, and a property sheet shown vertically when you're editing layouts. 

The first part of the solution is to simply embed the property sheet into the layout editor's outline view:
Notice how the Outline window on the right (which has a blue focus rectangle around it) contains both the layout structure, and the properties. Note however that if you open the actual Property Sheet View in Eclipse, and for example place it on the left hand side where the Package explorer is, then the Outline will immediately drop its own property sheet section and show just the Outline.

The second part of the solution is to support a maximized editor properly. In the above screenshot, you can see both the Package Explorer and the output windows on the bottom, such as the Lint View. When you're editing layouts, especially large tablet ones, you want as much screen space assigned to the layout editor itself.  You can maximize the editor (by double clicking on the title tab, or using a keystroke, Ctrl+M). However, with the above setup, this will just show the layout editor and palette, and it will hide the Outline and the Property Sheet.

So what we do now is to also embed the Outline and Property Sheet areas in the layout editor. And this mode is automatically entered when you maximize the editor, and automatically exited when you un-maximize the editor, such that you don't end up with two outlines and two property sheets. Here's how the maximized editor looks:
Now the left and bottom views unrelated to the layout editor is gone, and we still have the palette, outline and property views. 

If you look carefully you can also see that the window decorations for these views look a bit different. That's because these are not Eclipse views, but instead embedded views based on the WindowBuilder ones. This offers several features. For one thing, you can minimize them by clicking on the little arrow, to for example hide the Palette view -- notice the thing vertical area to the left of the layout with the vertical "Palette" label:
If you hover or click over the palette area, you can temporarily expose the palette, and initiate a drag -- and as soon as you do, it will dismiss itself again. This lets you have more permanent available space to view the layout, and only pull up the palette (or outline or property sheet) when you need it:
You can also drag these views around a bit to rearrange the layout editor layout. For example, you can drag the palette to the right and the structure view to the left (and the black rectangle in this screenshot is the drop location preview during a drag):
Or you could place the structure view on the bottom -- it will display in a horizontal arrangement instead of in a vertical arrangement:
One final thing to mention: The palette view should now be more reasonable with how much space it uses. In the previous implementation, we used a widget which only let us assign a percentage of the width, so the palette would always take up 20% of the space, which was unreasonable for both narrow and wide screen sizes. Now it will instead not just have a fixed initial size, but it will also remember the size you assign to it.

With these changes, the new property sheet should be much more useful, since it shows up by default, and stays visible along with the outline even in zoomed/maximized editor mode.

The code to accomplish all this is a bit tricky, relying on listening to various Eclipse window system events and working around some issues, so there's potential for bugs. For that reason we'd really like feedback and bug reports on how it works (it will be available as part of ADT 20 Preview 2). Use the normal feedback channels.
 
Comments