TypeScript sqlops.workspace類代碼示例

	private openEditorWithWebview(html1: string, html2: string): void {
		let editor = sqlops.workspace.createModelViewEditor('Editor webview', { retainContextWhenHidden: true });
		editor.registerContent(async view => {
			let count = 0;
			let webview1 = view.modelBuilder.webView()
				.withProperties({
					html: html1
				})
				.component();
			let webview2 = view.modelBuilder.webView()
				.withProperties({
					html: html2
				})
				.component();
			webview1.onMessage((params) => {
				count++;
				webview2.message = count;
			});

			let editor1 = view.modelBuilder.editor()
				.withProperties({
					content: 'select * from sys.tables'
				})
				.component();

			let editor2 = view.modelBuilder.editor()
				.withProperties({
					content: 'print("Hello World !")',
					languageMode: 'python'
				})
				.component();

			let flexModel = view.modelBuilder.flexContainer().component();
			flexModel.addItem(editor1, { flex: '1' });
			flexModel.addItem(editor2, { flex: '1' });
			flexModel.setLayout({
				flexFlow: 'column',
				alignItems: 'stretch',
				height: '100%'
			});

			view.onClosed((params) => {
				vscode.window.showInformationMessage('editor1: language: ' + editor1.languageMode + ' Content1: ' + editor1.content);
				vscode.window.showInformationMessage('editor2: language: ' + editor2.languageMode + ' Content2: ' + editor2.content);
			});
			await view.initializeModel(flexModel);
		});
		editor.openEditor();
	}

	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 openEditorWithWebview2(): void {
		let editor = sqlops.workspace.createModelViewEditor('Editor webview2', { retainContextWhenHidden: true });
		editor.registerContent(async view => {

			let inputBox = view.modelBuilder.inputBox().component();
			let dropdown = view.modelBuilder.dropDown()
				.withProperties({
					value: 'aa',
					values: ['aa', 'bb', 'cc']
				})
				.component();
			let runIcon = path.join(__dirname, '..', 'media', 'start.svg');
			let runButton = view.modelBuilder.button()
				.withProperties({
					label: 'Run',
					iconPath: runIcon
				}).component();

			let monitorLightPath = vscode.Uri.file(path.join(__dirname, '..', 'media', 'monitor.svg'));
			let monitorIcon = {
				light: monitorLightPath,
				dark: path.join(__dirname, '..', 'media', 'monitor_inverse.svg')
			};

			let monitorButton = view.modelBuilder.button()
				.withProperties({
					label: 'Monitor',
					iconPath: monitorIcon
				}).component();
			let toolbarModel = view.modelBuilder.toolbarContainer()
				.withToolbarItems([{
					component: inputBox,
					title: 'User name:'
				}, {
					component: dropdown,
					title: 'favorite:'
				}, {
					component: runButton
				}, {
					component: monitorButton
				}]).component();


			let webview = view.modelBuilder.webView()
				.component();

			let flexModel = view.modelBuilder.flexContainer().component();
			flexModel.addItem(toolbarModel, { flex: '0' });
			flexModel.addItem(webview, { flex: '1' });
			flexModel.setLayout({
				flexFlow: 'column',
				alignItems: 'stretch',
				height: '100%'
			});

			let templateValues = { url: 'http://whoisactive.com/docs/' };
			Utils.renderTemplateHtml(path.join(__dirname, '..'), 'templateTab.html', templateValues)
				.then(html => {
					webview.html = html;
				});

			await view.initializeModel(flexModel);
		});
		editor.openEditor();
	}