练习1– Hello Umboy在这个实验中,你将开发和部署你的第一个Web Part。这个Web Part将:
·
在这个Web Part中显示标签上的文本
·
允许在这个标签上编辑文本和修改文本颜色
任务1– 创建一个SharePoint Web Part 解决方案在这个任务重将创建一个解决方案和项目。将包含此实验中开发工作的其余部分。
1.
从开始|程序|Microsoft Visual Studio 2008 | Microsoft Visual Studio 2008打开Visual Studio 2008.
2.
从这个菜单选择 文件 | 新建| 项目.
3.
在这个新项目对话框中,展开Visual C# SharePoint
项目类型 并选择 Web Part.
4.
在位置中输入 “E:"testcode"Labs"Lab01-WebParts”
5.
在名称中输入“HelloUmboyWebPart
”
6.
在解决方案名称中输入“UMBOY_WebParts”

图1 – 新建项目
7.
单击确定.
8.
在解决方案文件夹中出现了 HelloUmboyWebPart
项目。注意将创建名为WebPart1的文件夹 和他包含的一些文件.

图2 – 在解决方案资源管理器中的WebPart1
9.
从这个项目中删除WebPart1
文件夹. 在下一步你将创建一个合适名称的新Web Part.
注意:
虽然您可以重命名 WebPart1 文件夹和其内部文件,但更快、 更简单的还是删除并重新创建 这个Web Part。
10.
在解决方案资源管理器中右击刚建的 HelloUmboyWebPart
项目,选择添加 | 新建项.
11.
在添加新项对话框的类别区域选择SharePoint,在模板区域选择Web Part.
12.
把这个Web Part命名为 HelloUmboy 并选择 添加.

图3 – 添加新项
注意这个HelloUmboy文件夹已经被添加到了本项目中。这个文件夹包含了三个基本名称为HelloUmboy的文件
13.
右击这个HelloUmboyWebPart
项目并选择属性. 将显示这个项目的属性.
14.
选择这个调试标签.
15.
设置启动URL
为 http://localhost. 这个URL被VSeWSS 用来确定SharePoint 的位置,当部署这个方案时.

图4: 启动URL
任务2 –添加Web Part 定制这个任务将描述增加代码到这个Web Part的步骤。将创建 Web Part的属性,包括可以使用 SharePoint 基于浏览器的接口更改设置.
1.
打开HelloUmboy.webpart. 这个XML文件包含了部署到SharePoint 中的Web Part 定义.
<?xml version="1.0" encoding="utf-8"?>
<webParts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<metaData>
<!--
The following Guid is used as a reference to the web part class,
and it will be automatically replaced with actual type name at deployment time.
-->
<type name="3513d572-17c8-4551-a0ef-7da53d1e34de" />
<importErrorMessage>Cannot import HelloUmboy Web Part.</importErrorMessage>
</metaData>
<data>
<properties>
<property name="Title" type="string">HelloUmboy Web Part</property>
<property name="Description" type="string">HelloUmboy Description</property>
</properties>
</data>
</webPart>
</webParts>
图5- HelloUmboy.webpart
2.
修改这个Description property为 “A simple Hello Umboy Web Part”.
3.
在Visual Studio 中打开HelloUmboy.cs
文件,并检查这个代码. 这个CreateChildControls
方法包含了实现添加标签控件到Web Part中注释代码。
在这个CreateChildControls
方法中反注释掉缺省代码. 这个方法将类似如下代码.
protected override void CreateChildControls()
{
base.CreateChildControls();
// TODO: add custom rendering code here.
Label label = new Label();
label.Text = "Hello Umboy";
this.Controls.Add(label);
}
注意:
CreateChildControls是一个被重写的方法. HelloUmboyWebPart需要这个方法提供一个明确的实现,在控件被创建时。
4.
下面的步骤是为这个Web Part添加属性。创建一个新属性以便允许用户定义这个“Hello Umboy” 消息来显示. 粘帖下面的代码到这个Web Part 类中.
private string _helloUmboyText = "Hello SharePoint!";
public string HelloUmboyText
{
get { return _helloUmboyText; }
set { _helloUmboyText = value; }
}
5.
这个 Web Part 属性必须用一个新特性来修饰。添加下列using语句到HelloUmboy.cs的头部.
using System.ComponentModel;
6.
为SharePoint正确的显示这个用户修改的HelloUmboyText 属性, 你必须添加下列特性到这个属性中。
[WebBrowsable(true),
Personalizable(PersonalizationScope.User),
WebDescription("Hello World Text"),
Category("Hello World"),
WebDisplayName("Text")]
public string HelloUmboyText
{
get { return _helloUmboyText; }
set { _helloUmboyText= value; }
}
这些特性控制了这些属性如何显示给用户,当修改这个Web Part时.
7.
接下来, 添加一个允许用户为这个消息选择颜色的属性. 这将遵循与上面类似的步骤来处理。.
首先,添加System.Drawing的引用. 右击这个HelloUmboyWebPart
项目,并选择添加引用.
8.
从.NET标签中选择System.Drawing.

图7 – 添加引用对话框
9.
单击确定.
10.
添加下列using 语句到HelloUmboy.cs头部.
using System.Drawing;
11.
使用下列代码插入TextColor
属性.
private KnownColor _textColor = KnownColor.Black;
[WebBrowsable(true),
Personalizable(PersonalizationScope.User),
WebDescription("Hello Umboy
Text Color"),
Category("Hello Umboy"),
WebDisplayName("Text Color")]
public KnownColor TextColor
{
get { return _textColor; }
set { _textColor = value; }
}
注意: KnownColor 是包含在 .NET 彩色的所有颜色的枚举。枚举将提供一个下拉列表形式的选择组用于编辑 SharePoint Web 部件任务窗格中 Web 部件。
12.
接下来的这步是编辑CreateChildControls
方法中的代码。设置label.Text 前你应该确保这个属性包含了一些文本. 在设置label.Text值前添加下列代码.
if (string.IsNullOrEmpty(HelloUmboyText ))
{
HelloUmboyText = "Hello SharePoint!";
}
13.
删除设置这个标签文本的缺省代码.
label.Text = "Hello Umboy";
14.
现在设置这个label
变量Text
属性为HelloUmboyText
文本并设置这个label的ForeColor
属性为TextColor property.
label.Text = HelloUmboyText ;
label.ForeColor = Color.FromKnownColor(TextColor);
注意:
你需要转换KnownColor
枚举值为Color 值.
15.
最终CreateChildControls
方法将象如下.
protected override void CreateChildControls()
{
base.CreateChildControls();
Label label = new Label();
if (string.IsNullOrEmpty(HelloUmboyText ))
{
HelloUmboyText = "Hello SharePoint!";
}
label.Text = HelloUmboyText ;
label.ForeColor = Color.FromKnownColor(TextColor);
this.Controls.Add(label);
}
任务 3 – 部署和测试这个With Web Part 编码完成后,这部分将部署它到SharePoint 网站. 你就可以测试它来确认它是否正确了。
1.
右击HelloUmboyWebPart
项目并选择部署
则部署这个项目到SharePoint 中。
2.
在 Visual Studio 状态栏中应该显示部署成功.
3.
打开 Internet Explorer 并导航到这个SharePoint 主页, http://localhost.
4.
在打开的网页的右上角位置,选择网站操作 | 编辑网页.

图8 – 编辑网页
5.
在左边的Web Part区域头部单击 添加Web Part.
6.
滚到所有Web Part | 杂项| HelloUmboy Web Part 并选择这个复选框.

图9 – 添加Web Part
7.
单击 添加 .
8.
这个HelloUmboy Web Part 将添加到这个页面中,并缺省显示Hello SharePoint!

图10 – 添加的Web Part
9.
在新添加的Web Part 上选择编辑按钮来编辑这个Web Part. 选择编辑共享 Web Part.

图11 – 编辑Web Part
10.
在这个显示的 Web Part 任务面板中, 展开这个 Hello Umboy 部分.
11.
在这个Text
框中输入期望的文本, 并在Text Color中选择期望的颜色.

图12 – 定制Web Part
12.
单击 确定.这个 Web Part 将显示修改的情况.
·
在这个Web Part中显示标签上的文本
·
允许在这个标签上编辑文本和修改文本颜色
任务1– 创建一个SharePoint Web Part 解决方案在这个任务重将创建一个解决方案和项目。将包含此实验中开发工作的其余部分。
1.
从开始|程序|Microsoft Visual Studio 2008 | Microsoft Visual Studio 2008打开Visual Studio 2008.
2.
从这个菜单选择 文件 | 新建| 项目.
3.
在这个新项目对话框中,展开Visual C# SharePoint
项目类型 并选择 Web Part.
4.
在位置中输入 “E:"testcode"Labs"Lab01-WebParts”
5.
在名称中输入“HelloUmboyWebPart
”
6.
在解决方案名称中输入“UMBOY_WebParts”

图1 – 新建项目
7.
单击确定.
8.
在解决方案文件夹中出现了 HelloUmboyWebPart
项目。注意将创建名为WebPart1的文件夹 和他包含的一些文件.

图2 – 在解决方案资源管理器中的WebPart1
9.
从这个项目中删除WebPart1
文件夹. 在下一步你将创建一个合适名称的新Web Part.
注意:
虽然您可以重命名 WebPart1 文件夹和其内部文件,但更快、 更简单的还是删除并重新创建 这个Web Part。
10.
在解决方案资源管理器中右击刚建的 HelloUmboyWebPart
项目,选择添加 | 新建项.
11.
在添加新项对话框的类别区域选择SharePoint,在模板区域选择Web Part.
12.
把这个Web Part命名为 HelloUmboy 并选择 添加.

图3 – 添加新项
注意这个HelloUmboy文件夹已经被添加到了本项目中。这个文件夹包含了三个基本名称为HelloUmboy的文件
13.
右击这个HelloUmboyWebPart
项目并选择属性. 将显示这个项目的属性.
14.
选择这个调试标签.
15.
设置启动URL
为 http://localhost. 这个URL被VSeWSS 用来确定SharePoint 的位置,当部署这个方案时.

图4: 启动URL
任务2 –添加Web Part 定制这个任务将描述增加代码到这个Web Part的步骤。将创建 Web Part的属性,包括可以使用 SharePoint 基于浏览器的接口更改设置.
1.
打开HelloUmboy.webpart. 这个XML文件包含了部署到SharePoint 中的Web Part 定义.
<?xml version="1.0" encoding="utf-8"?>
<webParts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<metaData>
<!--
The following Guid is used as a reference to the web part class,
and it will be automatically replaced with actual type name at deployment time.
-->
<type name="3513d572-17c8-4551-a0ef-7da53d1e34de" />
<importErrorMessage>Cannot import HelloUmboy Web Part.</importErrorMessage>
</metaData>
<data>
<properties>
<property name="Title" type="string">HelloUmboy Web Part</property>
<property name="Description" type="string">HelloUmboy Description</property>
</properties>
</data>
</webPart>
</webParts>
图5- HelloUmboy.webpart
2.
修改这个Description property为 “A simple Hello Umboy Web Part”.
3.
在Visual Studio 中打开HelloUmboy.cs
文件,并检查这个代码. 这个CreateChildControls
方法包含了实现添加标签控件到Web Part中注释代码。
在这个CreateChildControls
方法中反注释掉缺省代码. 这个方法将类似如下代码.
protected override void CreateChildControls()
{
base.CreateChildControls();
// TODO: add custom rendering code here.
Label label = new Label();
label.Text = "Hello Umboy";
this.Controls.Add(label);
}
注意:
CreateChildControls是一个被重写的方法. HelloUmboyWebPart需要这个方法提供一个明确的实现,在控件被创建时。
4.
下面的步骤是为这个Web Part添加属性。创建一个新属性以便允许用户定义这个“Hello Umboy” 消息来显示. 粘帖下面的代码到这个Web Part 类中.
private string _helloUmboyText = "Hello SharePoint!";
public string HelloUmboyText
{
get { return _helloUmboyText; }
set { _helloUmboyText = value; }
}
5.
这个 Web Part 属性必须用一个新特性来修饰。添加下列using语句到HelloUmboy.cs的头部.
using System.ComponentModel;
6.
为SharePoint正确的显示这个用户修改的HelloUmboyText 属性, 你必须添加下列特性到这个属性中。
[WebBrowsable(true),
Personalizable(PersonalizationScope.User),
WebDescription("Hello World Text"),
Category("Hello World"),
WebDisplayName("Text")]
public string HelloUmboyText
{
get { return _helloUmboyText; }
set { _helloUmboyText= value; }
}
这些特性控制了这些属性如何显示给用户,当修改这个Web Part时.
|
表1 – HelloUmboyText 属性说明 |
|
| WebDisplayName("…") |
This attribute defines the text that is used to label the property in the Web Part task pane. |
| WebBrowsable(true) |
This is used to allow Editing of the Web Part property. Without this the property will not be displayed in the Web Part task pane. |
| Personalizable(PersonalizationScope.User) |
This attribute should be coupled with WebBrowsable as it allows saving of modified property values. |
| WebDescription("…") |
This is an optional attribute and can contain anything you define. The description is displayed as a tooltip when hovering over the property in the Web Part task pane. |
| Category("…") |
This optional attribute is an organizing mechanism, defining where the property should reside in the Web Part task pane of SharePoint and also providing a grouping strategy for logically related properties. The default category is Miscellaneous. |
7.
接下来, 添加一个允许用户为这个消息选择颜色的属性. 这将遵循与上面类似的步骤来处理。.
首先,添加System.Drawing的引用. 右击这个HelloUmboyWebPart
项目,并选择添加引用.
8.
从.NET标签中选择System.Drawing.

图7 – 添加引用对话框
9.
单击确定.
10.
添加下列using 语句到HelloUmboy.cs头部.
using System.Drawing;
11.
使用下列代码插入TextColor
属性.
private KnownColor _textColor = KnownColor.Black;
[WebBrowsable(true),
Personalizable(PersonalizationScope.User),
WebDescription("Hello Umboy
Text Color"),
Category("Hello Umboy"),
WebDisplayName("Text Color")]
public KnownColor TextColor
{
get { return _textColor; }
set { _textColor = value; }
}
注意: KnownColor 是包含在 .NET 彩色的所有颜色的枚举。枚举将提供一个下拉列表形式的选择组用于编辑 SharePoint Web 部件任务窗格中 Web 部件。
12.
接下来的这步是编辑CreateChildControls
方法中的代码。设置label.Text 前你应该确保这个属性包含了一些文本. 在设置label.Text值前添加下列代码.
if (string.IsNullOrEmpty(HelloUmboyText ))
{
HelloUmboyText = "Hello SharePoint!";
}
13.
删除设置这个标签文本的缺省代码.
label.Text = "Hello Umboy";
14.
现在设置这个label
变量Text
属性为HelloUmboyText
文本并设置这个label的ForeColor
属性为TextColor property.
label.Text = HelloUmboyText ;
label.ForeColor = Color.FromKnownColor(TextColor);
注意:
你需要转换KnownColor
枚举值为Color 值.
15.
最终CreateChildControls
方法将象如下.
protected override void CreateChildControls()
{
base.CreateChildControls();
Label label = new Label();
if (string.IsNullOrEmpty(HelloUmboyText ))
{
HelloUmboyText = "Hello SharePoint!";
}
label.Text = HelloUmboyText ;
label.ForeColor = Color.FromKnownColor(TextColor);
this.Controls.Add(label);
}
任务 3 – 部署和测试这个With Web Part 编码完成后,这部分将部署它到SharePoint 网站. 你就可以测试它来确认它是否正确了。
1.
右击HelloUmboyWebPart
项目并选择部署
则部署这个项目到SharePoint 中。
2.
在 Visual Studio 状态栏中应该显示部署成功.
3.
打开 Internet Explorer 并导航到这个SharePoint 主页, http://localhost.
4.
在打开的网页的右上角位置,选择网站操作 | 编辑网页.

图8 – 编辑网页
5.
在左边的Web Part区域头部单击 添加Web Part.
6.
滚到所有Web Part | 杂项| HelloUmboy Web Part 并选择这个复选框.

图9 – 添加Web Part
7.
单击 添加 .
8.
这个HelloUmboy Web Part 将添加到这个页面中,并缺省显示Hello SharePoint!

图10 – 添加的Web Part
9.
在新添加的Web Part 上选择编辑按钮来编辑这个Web Part. 选择编辑共享 Web Part.

图11 – 编辑Web Part
10.
在这个显示的 Web Part 任务面板中, 展开这个 Hello Umboy 部分.
11.
在这个Text
框中输入期望的文本, 并在Text Color中选择期望的颜色.

图12 – 定制Web Part
12.
单击 确定.这个 Web Part 将显示修改的情况.
浙公网安备 33010602011771号