- Overview
- Getting Started
- Project Goals
- theia FAQ
- Using the theia IDE
- Getting Started
- Installing VS Code Extensions
- Using AI Features
- theia Coder (AI assistant)
- Using the dynamic Toolbar
- Data Usage & Telemetry
- Download
- Adopting the theia Platform
- Build your own IDE/Tool
- Extending the theia IDE
- Extensions and Plugins
- Authoring theia Extensions
- Authoring VS Code Extensions
- Consuming theia fixes without upgrading
- Platform Concepts & APIs
- Services and Contributions
- Architecture Overview
- Commands/Menus/Keybindings
- Widgets
- Preferences
- theia AI
- Label Provider
- Message Service
- Property View
- Tree Widget
- Events
- Frontend Application Contributions
- Backend Application Contributions
- Communication via JSON-RPC
- Tasks
- Internationalization
- Language Support
- Dynamic Toolbar
- Breadcrumbs
- Enhanced Tab Bar Preview
- Contribution Filter
- Advanced Tips
Events
Events in theia can be confusing, hopefully we can clarify things.
Let's consider this code:
(From logger-watcher.ts)
@injectable()
export class LoggerWatcher {
getLoggerClient(): ILoggerClient {
const emitter = this.onLogLevelChangedEmitter
return {
onLogLevelChanged(event: ILogLevelChangedEvent) {
emitter.fire(event)
}
}
}
private onLogLevelChangedEmitter = new Emitter<ILogLevelChangedEvent>();
get onLogLevelChanged(): Event<ILogLevelChangedEvent> {
return this.onLogLevelChangedEmitter.event;
}
}
Let's start with:
private onLogLevelChangedEmitter = new Emitter<ILogLevelChangedEvent>();
So first what is an Emitter?
An Emitter is an event handler container, it allows for event handlers to be registered on it and triggered with an event of type X in this case an ILogLevelChangedEvent.
So here we just create an Emitter that will have events of type ILogLevelChangedEvent;
Next we want to be able to register an event handler on this Emitter to do so we do this:
get onLogLevelChanged(): Event<ILogLevelChangedEvent> {
return this.onLogLevelChangedEmitter.event;
}
What this actually returns is a function that will register an event handler. Passing it your event handler function will register it so that it's called when the event fires.
So you can call:
(From logger.ts)
/* Update the root logger log level if it changes in the backend. */
loggerWatcher.onLogLevelChanged(event => {
this.id.then(id => {
if (id === this.rootLoggerId) {
this._logLevel = Promise.resolve(event.newLogLevel);
}
});
});
This registers the anonymous function passed as param on this emitter.
Next we will need to trigger this event handler by firing an event:
onLogLevelChanged(event: ILogLevelChangedEvent) {
emitter.fire(event)
}
When calling this function, the emitter fires and all the event handlers are called.
So if you need to trigger events in theia:
- Create an emitter
- Register events with the emitter.event function
- Fire events with emitter.fire(event)