SharePoint Framework 构建你的第一个web部件（二）

博客地址：http://blog.csdn.net/FoxDave
本篇接上一讲，介绍一下web部件项目中的代码。
下面首先列举一下项目中的一些关键文件。
Web部件类
HelloWorldWebPart.ts定义了web部件的主要入口。Web部件类HelloWorldWebPart继承了BaseClientSideWebPart类。任何一个客户端web部件都应该继承它来被定义为有效的web部件。构造函数如下所示：

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

BaseClientSideWebPart实现了构建一个web部件的最小功能。这个类也提供了许多参数来验证和访问只读属性如displayMode，web部件属性，web部件上下文，web部件instanceId和web部件domElement等。
注意web部件类是被定义来接收IHelloWorldWebPartProps这个属性类型的。
该属性类型作为一个接口被单独定义在IHelloWorldWebPartProps.ts文件中。



这个属性定义是用来为你的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部件都应该包含这个清单。



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