ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -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

18
samples/sqlservices/src/controllers/button.html Normal file
View File

@@ -0,0 +1,18 @@
<!--
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
-->
<html>
<header>
</header>
<body>
<button onclick="count()">Count</button>
<script>
function count() {
parent.postMessage('count', '*');
}
</script>
</body>
</html>

21
samples/sqlservices/src/controllers/counter.html Normal file
View File

@@ -0,0 +1,21 @@
<!--
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
-->
<html>
<header>
</header>
<body>
<div id="output">Total Counts: 0</div>
<script>
let output = document.getElementById('output');
window.addEventListener("message", receiveMessage, false);
function receiveMessage(e) {
output.innerText = 'Total Counts: ' + e.data;
}
</script>
</body>
</html>

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 Utils from '../utils';
import * as vscode from 'vscode'; import * as vscode from 'vscode';
import SplitPropertiesPanel from './splitPropertiesPanel'; import SplitPropertiesPanel from './splitPropertiesPanel';
import * as fs from 'fs';
import * as path from 'path';
/** /**
* The main controller class that initializes the extension * The main controller class that initializes the extension
@@ -33,6 +35,8 @@ export default class MainController implements vscode.Disposable {
} }
public activate(): Promise<boolean> { 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.registerSqlServicesModelView();
this.registerSplitPanelModelView(); this.registerSplitPanelModelView();
@@ -40,12 +44,12 @@ export default class MainController implements vscode.Disposable {
vscode.window.showInformationMessage(`Clicked from profile ${profile.serverName}.${profile.databaseName}`); vscode.window.showInformationMessage(`Clicked from profile ${profile.serverName}.${profile.databaseName}`);
}); });
vscode.commands.registerCommand('sqlservices.openDialog', () => { vscode.commands.registerCommand('sqlservices.openDialog', () => {
this.openDialog(); this.openDialog();
}); });
vscode.commands.registerCommand('sqlservices.openEditor', () => { vscode.commands.registerCommand('sqlservices.openEditor', () => {
this.openEditor(); this.openEditor(buttonHtml, counterHtml);
}); });
return Promise.resolve(true); return Promise.resolve(true);
@@ -69,51 +73,51 @@ export default class MainController implements vscode.Disposable {
dialog.customButtons = [customButton1, customButton2]; dialog.customButtons = [customButton1, customButton2];
tab1.registerContent(async (view) => { tab1.registerContent(async (view) => {
let inputBox = view.modelBuilder.inputBox() let inputBox = view.modelBuilder.inputBox()
.withProperties({ .withProperties({
//width: 300 //width: 300
}) })
.component(); .component();
let inputBox2 = view.modelBuilder.inputBox() let inputBox2 = view.modelBuilder.inputBox()
.component(); .component();
let checkbox = view.modelBuilder.checkBox() let checkbox = view.modelBuilder.checkBox()
.withProperties({ .withProperties({
label: 'Copy-only backup' label: 'Copy-only backup'
}) })
.component(); .component();
checkbox.onChanged(e => { checkbox.onChanged(e => {
console.info("inputBox.enabled " + inputBox.enabled); console.info("inputBox.enabled " + inputBox.enabled);
inputBox.enabled = !inputBox.enabled; inputBox.enabled = !inputBox.enabled;
}); });
let button = view.modelBuilder.button() let button = view.modelBuilder.button()
.withProperties({ .withProperties({
label: '+' label: '+'
}).component(); }).component();
let button3 = view.modelBuilder.button() let button3 = view.modelBuilder.button()
.withProperties({ .withProperties({
label: '-' label: '-'
}).component(); }).component();
let button2 = view.modelBuilder.button() let button2 = view.modelBuilder.button()
.component(); .component();
button.onDidClick(e => { button.onDidClick(e => {
inputBox2.value = 'Button clicked'; inputBox2.value = 'Button clicked';
}); });
let dropdown = view.modelBuilder.dropDown() let dropdown = view.modelBuilder.dropDown()
.withProperties({ .withProperties({
value: 'Full', value: 'Full',
values: ['Full', 'Differential', 'Transaction Log'] values: ['Full', 'Differential', 'Transaction Log']
}) })
.component(); .component();
let f = 0; let f = 0;
inputBox.onTextChanged((params) => { inputBox.onTextChanged((params) => {
vscode.window.showInformationMessage(inputBox.value); vscode.window.showInformationMessage(inputBox.value);
f = f + 1; f = f + 1;
inputBox2.value=f.toString(); inputBox2.value = f.toString();
}); });
dropdown.onValueChanged((params) => { dropdown.onValueChanged((params) => {
vscode.window.showInformationMessage(inputBox2.value); vscode.window.showInformationMessage(inputBox2.value);
inputBox.value = dropdown.value; inputBox.value = dropdown.value;
}); });
let radioButton = view.modelBuilder.radioButton() let radioButton = view.modelBuilder.radioButton()
.withProperties({ .withProperties({
@@ -121,68 +125,84 @@ export default class MainController implements vscode.Disposable {
name: 'radioButtonOptions', name: 'radioButtonOptions',
label: 'Option 1', label: 'Option 1',
checked: true checked: true
//width: 300 //width: 300
}).component(); }).component();
let radioButton2 = view.modelBuilder.radioButton() let radioButton2 = view.modelBuilder.radioButton()
.withProperties({ .withProperties({
value: 'option2', value: 'option2',
name: 'radioButtonOptions', name: 'radioButtonOptions',
label: 'Option 2' label: 'Option 2'
//width: 300 //width: 300
}).component(); }).component();
let flexRadioButtonsModel = view.modelBuilder.flexContainer() let flexRadioButtonsModel = view.modelBuilder.flexContainer()
.withLayout({ .withLayout({
flexFlow: 'column', flexFlow: 'column',
alignItems: 'left', alignItems: 'left',
justifyContent: 'space-evenly', justifyContent: 'space-evenly',
height: 50 height: 50
}).withItems([ }).withItems([
radioButton, radioButton2] radioButton, radioButton2]
, { flex: '1 1 50%' }).component(); , { flex: '1 1 50%' }).component();
let formModel = view.modelBuilder.formContainer() let formModel = view.modelBuilder.formContainer()
.withFormItems([{ .withFormItems([{
component: inputBox, component: inputBox,
title: 'Backup name' title: 'Backup name'
}, { }, {
component: inputBox2, component: inputBox2,
title: 'Recovery model' title: 'Recovery model'
}, { }, {
component:dropdown, component: dropdown,
title: 'Backup type' title: 'Backup type'
}, { }, {
component: checkbox, component: checkbox,
title: '' title: ''
}, { }, {
component: inputBox2, component: inputBox2,
title: 'Backup files', title: 'Backup files',
actions: [button, button3] actions: [button, button3]
}, { }, {
component: flexRadioButtonsModel, component: flexRadioButtonsModel,
title: 'Options' title: 'Options'
}], { }], {
horizontal:false, horizontal: false,
width: 500, width: 500,
componentWidth: 400 componentWidth: 400
}).component(); }).component();
await view.initializeModel(formModel); await view.initializeModel(formModel);
}); });
sqlops.window.modelviewdialog.openDialog(dialog); sqlops.window.modelviewdialog.openDialog(dialog);
} }
private openEditor(): void { private openEditor(html1: string, html2: string): void {
let editor = sqlops.workspace.createModelViewEditor('Test Editor view'); let editor = sqlops.workspace.createModelViewEditor('Test Editor view');
editor.registerContent(async view => { editor.registerContent(async view => {
let inputBox = view.modelBuilder.inputBox() let count = 0;
.withValidation(component => component.value !== 'valid') let webview1 = view.modelBuilder.webView()
.withProperties({
html: html1
})
.component(); .component();
let formModel = view.modelBuilder.formContainer() let webview2 = view.modelBuilder.webView()
.withFormItems([{ .withProperties({
component: inputBox, html: html2
title: 'Enter anything but "valid"' })
}]).component(); .component();
await view.initializeModel(formModel); 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(); editor.openEditor();
} }

4
src/sql/parts/modelComponents/components.contribution.ts
View File

@@ -11,6 +11,7 @@ import DropDownComponent from './dropdown.component';
import ButtonComponent from './button.component'; import ButtonComponent from './button.component';
import CheckBoxComponent from './checkbox.component'; import CheckBoxComponent from './checkbox.component';
import RadioButtonComponent from './radioButton.component'; import RadioButtonComponent from './radioButton.component';
import WebViewComponent from './webview.component';
import TextComponent from './text.component'; import TextComponent from './text.component';
import { registerComponentType } from 'sql/platform/dashboard/common/modelComponentRegistry'; import { registerComponentType } from 'sql/platform/dashboard/common/modelComponentRegistry';
import { ModelComponentTypes } from 'sql/workbench/api/common/sqlExtHostTypes'; import { ModelComponentTypes } from 'sql/workbench/api/common/sqlExtHostTypes';
@@ -40,5 +41,8 @@ registerComponentType(CHECKBOX_COMPONENT, ModelComponentTypes.CheckBox, CheckBox
export const RADIOBUTTON_COMPONENT = 'radiobutton-component'; export const RADIOBUTTON_COMPONENT = 'radiobutton-component';
registerComponentType(RADIOBUTTON_COMPONENT, ModelComponentTypes.RadioButton, RadioButtonComponent); registerComponentType(RADIOBUTTON_COMPONENT, ModelComponentTypes.RadioButton, RadioButtonComponent);
export const WEBVIEW_COMPONENT = 'webview-component';
registerComponentType(WEBVIEW_COMPONENT, ModelComponentTypes.WebView, WebViewComponent);
export const TEXT_COMPONENT = 'text-component'; export const TEXT_COMPONENT = 'text-component';
registerComponentType(TEXT_COMPONENT, ModelComponentTypes.Text, TextComponent); registerComponentType(TEXT_COMPONENT, ModelComponentTypes.Text, TextComponent);

3
src/sql/parts/modelComponents/interfaces.ts
View File

@@ -63,7 +63,8 @@ export enum ComponentEventType {
PropertiesChanged, PropertiesChanged,
onDidChange, onDidChange,
onDidClick, onDidClick,
validityChanged validityChanged,
onMessage
} }
export interface IModelStore { export interface IModelStore {

130
src/sql/parts/modelComponents/webview.component.ts Normal file
View File

@@ -0,0 +1,130 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./webview';
import {
Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList
} from '@angular/core';
import * as sqlops from 'sqlops';
import Event, { Emitter } from 'vs/base/common/event';
import { Webview } from 'vs/workbench/parts/html/browser/webview';
import { addDisposableListener, EventType } from 'vs/base/browser/dom';
import { Parts } from 'vs/workbench/services/part/common/partService';
import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
@Component({
template: '',
selector: 'webview-component'
})
export default class WebViewComponent extends ComponentBase implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _webview: Webview;
private _onMessage = new Emitter<any>();
private _renderedHtml: string;
constructor(
@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@Inject(forwardRef(() => ElementRef)) private _el: ElementRef) {
super(changeRef);
}
ngOnInit(): void {
this.baseInit();
this._createWebview();
this._register(addDisposableListener(window, EventType.RESIZE, e => {
this.layout();
}));
}
private _createWebview(): void {
this._webview = this._register(new Webview(this._el.nativeElement,
this._commonService.partService.getContainer(Parts.EDITOR_PART),
this._commonService.themeService,
this._commonService.environmentService,
this._commonService.contextViewService,
undefined,
undefined,
{
allowScripts: true,
enableWrappedPostMessage: true
}
));
this._register(this._webview.onMessage(e => {
this._onEventEmitter.fire({
eventType: ComponentEventType.onMessage,
args: e
});
}));
this._webview.style(this._commonService.themeService.getTheme());
this.setHtml();
}
ngOnDestroy(): void {
this.baseDestroy();
}
/// Webview Functions
private setHtml(): void {
if (this._webview && this.html) {
this._renderedHtml = this.html;
this._webview.contents = this._renderedHtml;
this._webview.layout();
}
}
private sendMessage(): void {
if (this._webview && this.message) {
this._webview.sendMessage(this.message);
}
}
/// IComponent implementation
public layout(): void {
this._webview.layout();
}
public setLayout(layout: any): void {
// TODO allow configuring the look and feel
this.layout();
}
public setProperties(properties: { [key: string]: any; }): void {
super.setProperties(properties);
if (this.html !== this._renderedHtml) {
this.setHtml();
}
this.sendMessage();
}
// CSS-bound properties
public get message(): any {
return this.getPropertyOrDefault<sqlops.WebViewProperties, any>((props) => props.message, undefined);
}
public set message(newValue: any) {
this.setPropertyFromUI<sqlops.WebViewProperties, any>((properties, message) => { properties.message = message; }, newValue);
}
public get html(): string {
return this.getPropertyOrDefault<sqlops.WebViewProperties, string>((props) => props.html, undefined);
}
public set html(newValue: string) {
this.setPropertyFromUI<sqlops.WebViewProperties, string>((properties, html) => { properties.html = html; }, newValue);
}
}

10
src/sql/parts/modelComponents/webview.css Normal file
View File

@@ -0,0 +1,10 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
webview-component {
height: 100%;
width : 100%;
display: block;
}

20
src/sql/sqlops.proposed.d.ts vendored
View File

@@ -22,11 +22,12 @@ declare module 'sqlops' {
inputBox(): ComponentBuilder<InputBoxComponent>; inputBox(): ComponentBuilder<InputBoxComponent>;
checkBox(): ComponentBuilder<CheckBoxComponent>; checkBox(): ComponentBuilder<CheckBoxComponent>;
radioButton(): ComponentBuilder<RadioButtonComponent>; radioButton(): ComponentBuilder<RadioButtonComponent>;
webView(): ComponentBuilder<WebViewComponent>;
text(): ComponentBuilder<TextComponent>; text(): ComponentBuilder<TextComponent>;
button(): ComponentBuilder<ButtonComponent>; button(): ComponentBuilder<ButtonComponent>;
dropDown(): ComponentBuilder<DropDownComponent>; dropDown(): ComponentBuilder<DropDownComponent>;
dashboardWidget(widgetId: string): ComponentBuilder<WidgetComponent>; dashboardWidget(widgetId: string): ComponentBuilder<DashboardWidgetComponent>;
dashboardWebview(webviewId: string): ComponentBuilder<WebviewComponent>; dashboardWebview(webviewId: string): ComponentBuilder<DashboardWebviewComponent>;
formContainer(): FormBuilder; formContainer(): FormBuilder;
} }
@@ -273,6 +274,11 @@ declare module 'sqlops' {
editable?: boolean; editable?: boolean;
} }
export interface WebViewProperties {
message?: any;
html?: string;
}
export interface ButtonProperties { export interface ButtonProperties {
label?: string; label?: string;
} }
@@ -308,16 +314,22 @@ declare module 'sqlops' {
onValueChanged: vscode.Event<any>; onValueChanged: vscode.Event<any>;
} }
export interface WebViewComponent extends Component {
html: string;
message: any;
onMessage: vscode.Event<any>;
}
export interface ButtonComponent extends Component { export interface ButtonComponent extends Component {
label: string; label: string;
onDidClick: vscode.Event<any>; onDidClick: vscode.Event<any>;
} }
export interface WidgetComponent extends Component { export interface DashboardWidgetComponent extends Component {
widgetId: string; widgetId: string;
} }
export interface WebviewComponent extends Component { export interface DashboardWebviewComponent extends Component {
webviewId: string; webviewId: string;
} }

4
src/sql/workbench/api/common/sqlExtHostTypes.ts
View File

@@ -72,6 +72,7 @@ export enum ModelComponentTypes {
Button, Button,
CheckBox, CheckBox,
RadioButton, RadioButton,
WebView,
Text, Text,
DashboardWidget, DashboardWidget,
DashboardWebview, DashboardWebview,
@@ -95,7 +96,8 @@ export enum ComponentEventType {
PropertiesChanged, PropertiesChanged,
onDidChange, onDidChange,
onDidClick, onDidClick,
validityChanged validityChanged,
onMessage
} }
export interface IComponentEventArgs { export interface IComponentEventArgs {

43
src/sql/workbench/api/node/extHostModelView.ts
View File

@@ -80,6 +80,13 @@ class ModelBuilderImpl implements sqlops.ModelBuilder {
return builder; return builder;
} }
webView(): sqlops.ComponentBuilder<sqlops.WebViewComponent> {
let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<sqlops.WebViewComponent> = this.getComponentBuilder(new WebViewWrapper(this._proxy, this._handle, id), id);
this._componentBuilders.set(id, builder);
return builder;
}
button(): sqlops.ComponentBuilder<sqlops.ButtonComponent> { button(): sqlops.ComponentBuilder<sqlops.ButtonComponent> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<sqlops.ButtonComponent> = this.getComponentBuilder(new ButtonWrapper(this._proxy, this._handle, id), id); let builder: ComponentBuilderImpl<sqlops.ButtonComponent> = this.getComponentBuilder(new ButtonWrapper(this._proxy, this._handle, id), id);
@@ -94,16 +101,16 @@ class ModelBuilderImpl implements sqlops.ModelBuilder {
return builder; return builder;
} }
dashboardWidget(widgetId: string): sqlops.ComponentBuilder<sqlops.WidgetComponent> { dashboardWidget(widgetId: string): sqlops.ComponentBuilder<sqlops.DashboardWidgetComponent> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder = this.getComponentBuilder<sqlops.WidgetComponent>(new ComponentWrapper(this._proxy, this._handle, ModelComponentTypes.DashboardWidget, id), id); let builder = this.getComponentBuilder<sqlops.DashboardWidgetComponent>(new ComponentWrapper(this._proxy, this._handle, ModelComponentTypes.DashboardWidget, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
dashboardWebview(webviewId: string): sqlops.ComponentBuilder<sqlops.WebviewComponent> { dashboardWebview(webviewId: string): sqlops.ComponentBuilder<sqlops.DashboardWebviewComponent> {
let id = this.getNextComponentId(); let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<sqlops.WebviewComponent> = this.getComponentBuilder(new ComponentWrapper(this._proxy, this._handle, ModelComponentTypes.DashboardWebview, id), id); let builder: ComponentBuilderImpl<sqlops.DashboardWebviewComponent> = this.getComponentBuilder(new ComponentWrapper(this._proxy, this._handle, ModelComponentTypes.DashboardWebview, id), id);
this._componentBuilders.set(id, builder); this._componentBuilders.set(id, builder);
return builder; return builder;
} }
@@ -523,6 +530,34 @@ class CheckBoxWrapper extends ComponentWrapper implements sqlops.CheckBoxCompone
} }
} }
class WebViewWrapper extends ComponentWrapper implements sqlops.WebViewComponent {
constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
super(proxy, handle, ModelComponentTypes.WebView, id);
this.properties = {};
this._emitterMap.set(ComponentEventType.onMessage, new Emitter<any>());
}
public get message(): any {
return this.properties['message'];
}
public set message(v: any) {
this.setProperty('message', v);
}
public get html(): string {
return this.properties['html'];
}
public set html(v: string) {
this.setProperty('html', v);
}
public get onMessage(): vscode.Event<any> {
let emitter = this._emitterMap.get(ComponentEventType.onMessage);
return emitter && emitter.event;
}
}
class RadioButtonWrapper extends ComponentWrapper implements sqlops.RadioButtonComponent { class RadioButtonWrapper extends ComponentWrapper implements sqlops.RadioButtonComponent {
constructor(proxy: MainThreadModelViewShape, handle: number, id: string) { constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {