Click a button to open a widget with state?

hi , i am wondering if i can do this

  • first, I have a button
  • then , when I click this button, a widget will be opend in the main area
  • after I click this button , something else will be done to to obtain some data , then the data will be passed as react state to the above widget

so , here comes my question

  • how to open a customized widget by clicking a button
  • how to pass the data between these two widget
  • or did i miss something???

Hello @zhoujingfighting, you can see some examples of opening a widget with state in a few different places in the Theia repository. For example, there are commands that open the PreferencesWidget with a certain search query or a certain scope:

Another example is if an editor widget is opened with a specific selection:

The basic pattern is that you must expose a method on the widget to set the state that you need. Then your click handler could be something like this:

// Like the 'PreferenceContribution,' for example
@inject(MyViewContribution) protected readonly viewContribution: AbstractViewContribution;
// ... other code

async handleButtonClick(): Promise<void> {
    const widget = await this.viewContribution.openView({activate: true});
    // ... do the work to get the state you want to set
    widget.acceptState(someState); // Pass the state to the widget.