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部件都應該包含這個清單。

到這裡，程式碼的自定義部分都全部做完了，下一講我們將看一下定義之後的效果。