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部件都应该包含这个清单。

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