Flexible Window Layout in Theia IDE

Theia is an open source IDE for cloud and desktop. The project is relatively young, but currently moving forward with an astonishing speed. This post describes one of the numerous recent contributions: a more flexible window layout.

Components of a Theia Window

A Theia window has four areas where editors, views etc. (called widgets in the following) can be placed, as shown in the figure below.

Components of a Theia Window

The main area is used for editors, while the other areas contain views such as the Files navigator or Terminal instances. The four areas have different properties:

  • The main area is always visible. A horizontal tab is shown for each contained widget. The area can be split horizontally or vertically in order to show the content of multiple widgets.
  • The bottom panel behaves the same way as the main area, but can be hidden. It is always hidden when empty.
  • The left and right panels show the titles of their contained widgets vertically. The panels can be collapsed and expanded by clicking on such a title. Similarly to the bottom panel, the side panels and the related title bars are hidden when empty. These panels cannot be split, so each can show at most one widget.

Theia is not a specific IDE, but rather a framework for building IDEs and similar applications. Therefore the window areas can be used differently depending on the context (this concept is called Perspective in Eclipse). This means that every Theia-based application can have a different set of widgets and a different arrangement of these widgets in the application window.

Drag & Drop Between Panels

A few days ago I contributed a change that allows to drag widgets from any area of the application window to any other area. The following screencast demonstrates this:

When a panel is currently hidden, it is shown temporarily during a mouse drag operation as soon as the mouse cursor gets close to the respective border of the window. For example, in the screencast the right panel pops in as the user drags the Problems view to the right.

Try It!

The example application contained in the Theia repository can be built and started with a few steps. Feel free to try the new drag & drop feature, and let us know what you think.

By | 2018-02-13T17:05:45+00:00 February 13th, 2018|Cloud IDE, Electron, Theia|2 Comments

About the Author:

Miro is a software engineer and consultant at TypeFox and a committer for Xtext, ELK, and LSP4J. He started to get involved into open source development while researching graph layout algorithms and their application to graphical modeling at the University of Kiel. Miro's contributions to KIELER, an academic project on modeling pragmatics and semantics, have been the foundation of his doctoral thesis and are now part of the ELK project.

2 Comments

  1. Jay April 28, 2018 at 03:08 - Reply

    Last year I worked on an Windows app that used Eclipse-4 and RAP, and later ported it to RCP Eclipse-4. One of the notable weaknesses of the RCP version was that embedded browser windows were trying to use IE11, while the RAP version could use your selected default browser (mine was chrome).

    It seems to me that, because of the ability to select the better browser widget, an E4-RAP base might be a good starting point for a multi-window (multi separate window) Theia/Sprotty project.

    Has anyone experimented with E4-RAP as a base for these projects?

    • Miro Spönemann May 2, 2018 at 09:41 - Reply

      Theia and Sprotty are completely independent of Eclipse RAP. How would you want to use RAP as a base for them?

Leave A Comment