Hi, I am still getting this same error,please see this topic : Error in ApplicationShell postConstruct - Theia Community (theia-ide.org).
I used “yo theia-extension” to create an “empty” extension and wrote some code as below
Theia version is 1.36.0 and inversify version is 5.1.1. I checked and confirmed there is only one version of inversify. But the error “Cannot read property ‘topPanel’ of undefined” still occurs.
Is there something I am generally missing ,thank yuo
Hey @caixiao7,
the topPanel is constructed in the init method of the ApplicationShell superclass. If you override the method topPanel is never set, so it will always stay undefined.
To fix this, you’ll simply need to call the super.init(); method.
@caixiao7 you’re missing a super.init() call in your override of init() else topPanel is never set:
import { injectable, postConstruct } from "@theia/core/shared/inversify";
import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
@injectable()
export class CustomApplicationShell extends ApplicationShell {
@postConstruct()
protected override init(): void {
super.init();
this.topPanel.hide();
}
}
Thank you!
Actually, I copied the code from * https://github.com/vince-fugnitto/theia-top-menu .
It doesn’t have the statement " super.init()" either. Could you tell me the reason ? I suppose there are some things shoule be aware of and I missed.
I added “super.init();” and the error is gone. However,the topPanel remains unhide.
@vince-fugnitto
I guess that area is not called “topPanel”. Instead, it is called as “menu bar” ?
I saw the “menu bar” is hiden using “this.topPanel.hide()” ,please refer to this link
How to remove some UI elements - Theia Community (theia-ide.org)
It doesn’t have the statement " super.init()" either. Could you tell me the reason ? I suppose there are some things shoule be aware of and I missed.
The example is quite old (~2 years) so there are likely things that changed in the meantime. It was a mistake not to call super there as well, but there was no issue as the init did not do much at the time (~1.16.0 of the framework).
I guess that area is not called “topPanel”. Instead, it is called as “menu bar” ?
The topPanel does include the main-menu, but in order to hide the menu you should take a look at the initial implementation:
You’ll notice that based on preferences we set the topPanel visibility. If you want to explicitly hide the topPanel at all times then you’ll probably want to override the setTopPanelVisibility method as well:
protected override setTopPanelVisibility(preference: string): void {
// no-op.
}
@vince-fugnitto
Thanks! I get it.
Now I am a little bit confused, if I want to implement my own theia extension with some features, what’s the proper way to do that?
For example, I want to hide the menu bar.
I searched the theia community to see whether there are helpful topics. In fact I got one but the example is too old, and I am stuck.
Besides, I think the API is quite clear (“this.topPanel.hide();”) but it doesn’t work. Is there any way I could figure it out without bothering you. What should I do if next time some similar problem occur? Should I take a look at the source code or maybe any helpful documents I could refer ?
Now I simply refer to this link (plugin | Theia TypeDoc) and search information from theia community.
Any suggestion?
@caixiao7 The issue isn’t so much that this.topPanel.hide() doesn’t work. It’s that the framework itself later calls topPanel.show(), depending on some user settings.
In Theia there is a clear tradeoff between out-of-the-box functionality and “easy” extensibility. The framework has now more than 200k LOC, packing tons of features. Also note that the official, stable API mostly consists of *Contribution interfaces that allow to add functionality to Theia. Modifying/Changing Theia behavior by rebinding existing services isn’t as straightforward, and often times requires digging through the framework source in order to figure out what you need.
Thanks!
this makes sense to me.