SharePoint Framework 构建你的第一个web部件(二)

时间:2024-04-10 22:05:52

博客地址:http://blog.csdn.net/FoxDave

本篇接上一讲,介绍一下web部件项目中的代码。

下面首先列举一下项目中的一些关键文件。

Web部件类

HelloWorldWebPart.ts定义了web部件的主要入口。Web部件类HelloWorldWebPart继承了BaseClientSideWebPart类。任何一个客户端web部件都应该继承它来被定义为有效的web部件。构造函数如下所示:

public constructor(context: IWebPartContext) {
super(context);
}

SharePoint Framework 构建你的第一个web部件(二)

BaseClientSideWebPart实现了构建一个web部件的最小功能。这个类也提供了许多参数来验证和访问只读属性如displayMode,web部件属性,web部件上下文,web部件instanceId和web部件domElement等。

注意web部件类是被定义来接收IHelloWorldWebPartProps这个属性类型的。

该属性类型作为一个接口被单独定义在IHelloWorldWebPartProps.ts文件中。

SharePoint Framework 构建你的第一个web部件(二)

这个属性定义是用来为你的web部件定义自定义属性类型的,之后会在web部件属性面板进行详细介绍。

Web部件渲染方法

Render方法中提供了web部件应该渲染到的DOM元素的位置。该方法用来将web部件渲染到DOM元素。在HelloWorldweb部件中,DOM元素被设置为了一个DIV元素。方法参数包含了显示模式(Read或Edit)和web部件的配置属性(如果有的话),方法声明可以看上面的一张图,除了一个收尾的大括号基本上都在里面了。

这个模型很灵活,web部件可以在任意的JavaScript框架中构建然后加载到DOM元素中。下面是如何加载React组件来代替HTML文本的例子:

render(): void {
let e = React.createElement(TodoComponent, this.properties);
ReactDom.render(e, this.domElement);
}

注意:Yeoman SharePoint生成器允许你在向项目中添加新web部件时选择React作为框架。

配置web部件属性面板

属性面板同样定义在HelloWorldWebPart类中,propertyPaneSettings这个属性是用来定义属性面板的。

当属性被定义完之后,你可以通过使用this.properties.<property-value>来访问他们,就像在render方法中那样调用:

<p class="ms-font-l ms-fontColor-white">${this.properties.description}</p>

阅读Integrating property pane with a web part这篇文章来了解更多关于属性面板和属性面板字段类型信息,在之后的文章中我也会进行介绍。

替用下面的代码替换propertyPaneSettings方法,这段代码展示了如何添加文本类型之外的类型。

protected get propertyPaneSettings(): IPropertyPaneSettings {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: 'Description'
}),
PropertyPaneTextField('test', {
label: 'Multi-line Text Field',
multiline: true
}),
PropertyPaneCheckbox('test1', {
text: 'Checkbox'
}),
PropertyPaneDropdown('test2', {
label: 'Dropdown',
options: [
{ key: '1', text: 'One' },
{ key: '2', text: 'Two' },
{ key: '3', text: 'Three' },
{ key: '4', text: 'Four' }
]}),
PropertyPaneToggle('test3', {
label: 'Toggle',
onText: 'On',
offText: 'Off'
})
]
}
]
}
]
};
}

替换完之后会提示一些错误,因为我们增加了新的属性字段,需要从框架中导入。定位到web部件代码类的顶部,将下面的内容添加到import部分的from '@microsoft/sp-client-preview'中:

PropertyPaneCheckbox,

PropertyPaneDropdown,

PropertyPaneToggle

完整的import部分的代码如下所示:

import {
BaseClientSideWebPart,
IPropertyPaneSettings,
IWebPartContext,
PropertyPaneTextField,
PropertyPaneCheckbox,
PropertyPaneDropdown,
PropertyPaneToggle
} from '@microsoft/sp-client-preview';

格式化(快捷键为Alt+Shift+F)并保存文件。接下来将这些属性添加到IHelloWorldWebPartProps接口中来映射我们刚才添加的字段。

打开IHelloWorldWebPartProps.ts文件,将代码替换为下面的内容:

export interface IHelloWorldWebPartProps {
description: string;
test: string;
test1: boolean;
test2: string;
test3: boolean;
}

保存文件,切换回HelloWorldWebPart.ts文件。

添加完web部件属性之后,就可以像之前调用description属性那样的方式进行调用了,如:

<p class="ms-font-l ms-fontColor-white">${this.properties.test2}</p>

如果要设置属性的默认值,你需要更新web部件清单的属性包,打开文件HelloWorldWebPart.manifest.json,将属性部分(properties)修改为下面的样子:

"properties": {
"description": "HelloWorld",
"test": "Multi-line text field",
"test1": true,
"test2": "2",
"test3": true
}

Web部件清单

HelloWorldWebPart.manifest.json文件定义了web部件元数据如版本、id、显示名、图标和描述。每个web部件都应该包含这个清单。

SharePoint Framework 构建你的第一个web部件(二)

到这里,代码的自定义部分都全部做完了,下一讲我们将看一下定义之后的效果。