ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-22 01:25:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Feature/webview for model view (#1463)

Browse Source 
* support webview for view model

* formatting

* remove unused imports
This commit is contained in:
Abbie Petchtes
2018-05-23 09:51:44 -07:00
committed by GitHub
parent 1461929f86
commit 36a8991682
10 changed files with 325 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,8 @@ import * as sqlops from 'sqlops';
import * as Utils from '../utils';
import * as vscode from 'vscode';
import SplitPropertiesPanel from './splitPropertiesPanel';
import * as fs from 'fs';
import * as path from 'path';
/**
* The main controller class that initializes the extension
@@ -33,6 +35,8 @@ export default class MainController implements vscode.Disposable {
}
public activate(): Promise<boolean> {
const buttonHtml = fs.readFileSync(path.join(__dirname, 'button.html')).toString();
const counterHtml = fs.readFileSync(path.join(__dirname, 'counter.html')).toString();
this.registerSqlServicesModelView();
this.registerSplitPanelModelView();
@@ -40,12 +44,12 @@ 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.openEditor', () => {
this.openEditor();
vscode.commands.registerCommand('sqlservices.openEditor', () => {
this.openEditor(buttonHtml, counterHtml);
});
return Promise.resolve(true);
@@ -69,51 +73,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();
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({
@@ -121,68 +125,84 @@ export default class MainController implements vscode.Disposable {
name: 'radioButtonOptions',
label: 'Option 1',
checked: true
//width: 300
}).component();
//width: 300
}).component();
let radioButton2 = view.modelBuilder.radioButton()
.withProperties({
value: 'option2',
name: 'radioButtonOptions',
label: 'Option 2'
//width: 300
}).component();
//width: 300
}).component();
let flexRadioButtonsModel = view.modelBuilder.flexContainer()
.withLayout({
flexFlow: 'column',
alignItems: 'left',
justifyContent: 'space-evenly',
height: 50
}).withItems([
radioButton, radioButton2]
}).withItems([
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'
}], {
horizontal:false,
width: 500,
componentWidth: 400
}).component();
horizontal: false,
width: 500,
componentWidth: 400
}).component();
await view.initializeModel(formModel);
});
sqlops.window.modelviewdialog.openDialog(dialog);
}
private openEditor(): void {
private openEditor(html1: string, html2: string): void {
let editor = sqlops.workspace.createModelViewEditor('Test Editor view');
editor.registerContent(async view => {
let inputBox = view.modelBuilder.inputBox()
.withValidation(component => component.value !== 'valid')
let count = 0;
let webview1 = view.modelBuilder.webView()
.withProperties({
html: html1
})
.component();
let formModel = view.modelBuilder.formContainer()
.withFormItems([{
component: inputBox,
title: 'Enter anything but "valid"'
}]).component();
await view.initializeModel(formModel);
let webview2 = view.modelBuilder.webView()
.withProperties({
html: html2
})
.component();
webview1.onMessage((params) => {
count++;
webview2.message = count;
});
let flexModel = view.modelBuilder.flexContainer()
.withLayout({
flexFlow: 'column',
alignItems: 'left'
}).withItems([
webview1, webview2
], { flex: '1 1 50%' })
.component();
await view.initializeModel(flexModel);
});
editor.openEditor();
}