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

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

巴特西

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

最新文章

热门文章