ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-19 09:35:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix view model editor and webview component (#1483)

Browse Source 
* destroy viewmodel when editor is closed and add example

* support retainContextWhenHidden option for webview component

* fix breaking change from master

* dispose html element during dispose

* add more comments
This commit is contained in:
Abbie Petchtes
2018-05-24 13:54:41 -07:00
committed by GitHub
parent 1359354387
commit c208abf0c5
11 changed files with 176 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
samples/sqlservices/src/controllers/mainController.ts
View File

@@ -35,7 +35,6 @@ export default class MainController implements vscode.Disposable {
}
public activate(): Promise<boolean> {
const webviewExampleHtml = fs.readFileSync(path.join(__dirname, 'webviewExample.html')).toString();
const buttonHtml = fs.readFileSync(path.join(__dirname, 'button.html')).toString();
const counterHtml = fs.readFileSync(path.join(__dirname, 'counter.html')).toString();
this.registerSqlServicesModelView();
@@ -45,16 +44,16 @@ export default class MainController implements vscode.Disposable {
vscode.window.showInformationMessage(`Clicked from profile ${profile.serverName}.${profile.databaseName}`);
});
vscode.commands.registerCommand('sqlservices.openDialog', () => {
vscode.commands.registerCommand('sqlservices.openDialog', () => {
this.openDialog();
});
vscode.commands.registerCommand('sqlservices.openEditor1', () => {
this.openEditor1(buttonHtml, counterHtml);
vscode.commands.registerCommand('sqlservices.openEditor', () => {
this.openEditor();
});
vscode.commands.registerCommand('sqlservices.openEditor2', () => {
this.openEditor2(webviewExampleHtml);
vscode.commands.registerCommand('sqlservices.openEditorWithWebView', () => {
this.openEditorWithWebview(buttonHtml, counterHtml);
});
return Promise.resolve(true);
@@ -78,51 +77,51 @@ export default class MainController implements vscode.Disposable {
dialog.customButtons = [customButton1, customButton2];
tab1.registerContent(async (view) => {
let inputBox = view.modelBuilder.inputBox()
.withProperties({
//width: 300
})
.component();
.withProperties({
//width: 300
})
.component();
let inputBox2 = view.modelBuilder.inputBox()
.component();
.component();
let checkbox = view.modelBuilder.checkBox()
.withProperties({
label: 'Copy-only backup'
})
.component();
.withProperties({
label: 'Copy-only backup'
})
.component();
checkbox.onChanged(e => {
console.info("inputBox.enabled " + inputBox.enabled);
inputBox.enabled = !inputBox.enabled;
console.info("inputBox.enabled " + inputBox.enabled);
inputBox.enabled = !inputBox.enabled;
});
let button = view.modelBuilder.button()
.withProperties({
label: '+'
}).component();
.withProperties({
label: '+'
}).component();
let button3 = view.modelBuilder.button()
.withProperties({
label: '-'
.withProperties({
label: '-'
}).component();
}).component();
let button2 = view.modelBuilder.button()
.component();
.component();
button.onDidClick(e => {
inputBox2.value = 'Button clicked';
inputBox2.value = 'Button clicked';
});
let dropdown = view.modelBuilder.dropDown()
.withProperties({
value: 'Full',
values: ['Full', 'Differential', 'Transaction Log']
})
.component();
.withProperties({
value: 'Full',
values: ['Full', 'Differential', 'Transaction Log']
})
.component();
let f = 0;
inputBox.onTextChanged((params) => {
vscode.window.showInformationMessage(inputBox.value);
vscode.window.showInformationMessage(inputBox.value);
f = f + 1;
inputBox2.value = f.toString();
});
dropdown.onValueChanged((params) => {
vscode.window.showInformationMessage(inputBox2.value);
inputBox.value = dropdown.value;
vscode.window.showInformationMessage(inputBox2.value);
inputBox.value = dropdown.value;
});
let radioButton = view.modelBuilder.radioButton()
.withProperties({
@@ -150,38 +149,57 @@ export default class MainController implements vscode.Disposable {
radioButton, radioButton2]
, { flex: '1 1 50%' }).component();
let formModel = view.modelBuilder.formContainer()
.withFormItems([{
component: inputBox,
title: 'Backup name'
.withFormItems([{
component: inputBox,
title: 'Backup name'
}, {
component: inputBox2,
title: 'Recovery model'
component: inputBox2,
title: 'Recovery model'
}, {
component: dropdown,
title: 'Backup type'
component: dropdown,
title: 'Backup type'
}, {
component: checkbox,
title: ''
component: checkbox,
title: ''
}, {
component: inputBox2,
title: 'Backup files',
actions: [button, button3]
component: inputBox2,
title: 'Backup files',
actions: [button, button3]
}, {
component: flexRadioButtonsModel,
title: 'Options'
component: flexRadioButtonsModel,
title: 'Options'
}], {
horizontal: false,
width: 500,
componentWidth: 400
}).component();
horizontal: false,
//width: 500,
componentWidth: 400
}).component();
await view.initializeModel(formModel);
});
sqlops.window.modelviewdialog.openDialog(dialog);
}
private openEditor1(html1: string, html2: string): void {
let editor = sqlops.workspace.createModelViewEditor('Editor view1');
private openEditor(): void {
let editor = sqlops.workspace.createModelViewEditor('Test Model View');
editor.registerContent(async view => {
let inputBox = view.modelBuilder.inputBox()
.withValidation(component => component.value !== 'valid')
.component();
let formModel = view.modelBuilder.formContainer()
.withFormItems([{
component: inputBox,
title: 'Enter anything but "valid"'
}]).component();
view.onClosed((params) => {
vscode.window.showInformationMessage('The model view editor is closed.');
});
await view.initializeModel(formModel);
});
editor.openEditor();
}
private openEditorWithWebview(html1: string, html2: string): void {
let editor = sqlops.workspace.createModelViewEditor('Editor view1', { retainContextWhenHidden: true });
editor.registerContent(async view => {
let count = 0;
let webview1 = view.modelBuilder.webView()
@@ -213,29 +231,6 @@ export default class MainController implements vscode.Disposable {
editor.openEditor();
}
private openEditor2(html: string): void {
let editor = sqlops.workspace.createModelViewEditor('Editor view2');
editor.registerContent(async view => {
let webview1 = view.modelBuilder.webView()
.withProperties({
html: html
})
.component();
let flexModel = view.modelBuilder.flexContainer()
.withLayout({
flexFlow: 'column',
alignItems: 'stretch',
height: '100%'
}).withItems([
webview1
], { flex: '1' })
.component();
await view.initializeModel(flexModel);
});
editor.openEditor();
}
private registerSqlServicesModelView(): void {
sqlops.ui.registerModelViewProvider('sqlservices', async (view) => {
let flexModel = view.modelBuilder.flexContainer()