bài 2 web part và các trang sharepoint

Bài 2:
Web Part và các trang SharePoint
Nội dung bài cũ
Giới thiệu SharePoint 2010
Môi trường thực thi và môi trường phát triển SharePoint
Mô hình đối tượng trên SharePoint 2010
Solutions và Features trên SharePoint 2010
Web Part và các trang SharePoint
2
Mục tiêu bài học
Tìm hiểu Web Part trên SharePoint
Tìm hiểu các cách phát triển Web Part trên SharePoint
Tìm hiểu các loại trang trên SharePoint
Giới thiệu về SharePoint Designer 2010 để tùy biến, thiết
kế và xây dựng giải pháp SharePoint mà không cần viết
code.
Tìm hiểu Web Part trên SharePoint
Tìm hiểu các cách phát triển Web Part trên SharePoint
Tìm hiểu các loại trang trên SharePoint
Giới thiệu về SharePoint Designer 2010 để tùy biến, thiết
kế và xây dựng giải pháp SharePoint mà không cần viết
code.
Web Part và các trang SharePoint
3
SharePoint Web Part là gì?
SharePoint Web Part: là thành phần giao diện chính trên
các trang SharePoint
Web Part: cho phép người dùng thay đổi nội dung, vị trí,
cách hiển thị và tác động tới các trang web, trực tiếp
trên trình duyệt.
Web Part: hỗ trợ khả năng tùy biến (Customization) và

cá nhân hóa (Personalization)
SharePoint Web Part: là thành phần giao diện chính trên
các trang SharePoint
Web Part: cho phép người dùng thay đổi nội dung, vị trí,
cách hiển thị và tác động tới các trang web, trực tiếp
trên trình duyệt.
Web Part: hỗ trợ khả năng tùy biến (Customization) và
cá nhân hóa (Personalization)
Web Part và các trang SharePoint
4
DEMO Web Part có sẵn trên
SharePoint 2010
DEMO một số Web Part có sẵn trên SharePoint
Content Editor Web Part
Image Web Part
Site Users Web Part
Content Query Web Part
User Tasks Web Part
…
DEMO một số Web Part có sẵn trên SharePoint
Content Editor Web Part
Image Web Part
Site Users Web Part
Content Query Web Part
User Tasks Web Part
…
Web Part và các trang SharePoint
5
Lịch sử của Web Part
Windows

SharePoint Services
3.0
• Tương thích ngược
với các nền tảng
Web Part trước đó
Windows SharePoint
Services 2.0
• Được thiết kế với
nền tảng Web Part
đầu tiên sử dụng cho
WSS 2.0
Microsoft
®
ASP.NET 2.0
• Được thiết kế với nền
tảng Web Part thống
nhất
• Mềm dẻo và dễ mở
rộng hơn nền tảng cho
WSS trước đó
• Không hỗ hỗ trợ và
tương thích với nền
tảng Web Part WSS 2.0
Windows
SharePoint Services
3.0
• Tương thích ngược
với các nền tảng
Web Part trước đó
Web Part và các trang SharePoint

6
Cấu trúc một trang Web Part
Trang Web Part được thiết kế với…
Một thực thể của lớp WebPartManager
Một hoặc nhiều Web Part Zones
Có thể có Editor Zone và/hoặc Catalog Zone
Web Part và các trang SharePoint
7
Các loại Web Part trong
SharePoint 2010
WSS Web Parts
WSS Web Parts
SharePoint Foundation Runtime
ASP.NET 2.0 Runtime
ASP Web Parts
ASP Web Parts
ASP Web Parts
Hybrid Web Parts
Web Part và các trang SharePoint
8
WSS v2 Runtime
Hybrid Web Parts
Hybrid Web Parts
WSS Web Parts
WSS Web Parts
WSS Web Parts
Các loại Web Part trong
SharePoint 2010
Có hai loại Web Part được hỗ trợ trên SharePoint
2010

ASP.NET Web Parts sử dụng lớp cơ sở
System.Web.UI.WebControls.WebParts.WebPart
SharePoint Web Parts sử dụng lớp cơ sở
Microsoft.SharePoint.WebPartPages.WebPart
Nên sử dụng ASP.NET Web Parts
Có hai loại Web Part được hỗ trợ trên SharePoint
2010
ASP.NET Web Parts sử dụng lớp cơ sở
System.Web.UI.WebControls.WebParts.WebPart
SharePoint Web Parts sử dụng lớp cơ sở
Microsoft.SharePoint.WebPartPages.WebPart
Nên sử dụng ASP.NET Web Parts
Web Part và các trang SharePoint
9
SharePoint Web Part với VS 2010
Web Part và các trang SharePoint
10
SharePoint Web Part với VS 2010
Web Part: Web part chuẩn
Là cách phát triển Web part truyền thống
Không có khả năng kéo thả các control để thiết kế
Visual Web Part: Web part trực quan
Là các phát triển Web Part mở rộng trong SharePoint 2010
Có khả năng kéo thả các control để thiết kế
Web Part: Web part chuẩn
Là cách phát triển Web part truyền thống
Không có khả năng kéo thả các control để thiết kế
Visual Web Part: Web part trực quan
Là các phát triển Web Part mở rộng trong SharePoint 2010
Có khả năng kéo thả các control để thiết kế

Web Part và các trang SharePoint
11
Khả năng tùy biến và cá nhân hóa
của Web Part
Khả năng tùy biến (Customizable) và khả năng cá nhân
hóa (Personalizable) của Web Part cho phép các Web
Part được sử dụng cho nhiều mục đích khác nhau.
Khả năng tùy biến được hiểu là bất cứ thay đổi nào đối
với Web Part đều tác động đến toàn bộ người dùng đang
sử dụng Web Part đó.
VD: quản trị trang có thể chỉ định một Feed để hiển thị lên
trang chủ, khi đó tất cả người dùng có thể xem Feed này.
Khả năng tùy biến (Customizable) và khả năng cá nhân
hóa (Personalizable) của Web Part cho phép các Web
Part được sử dụng cho nhiều mục đích khác nhau.
Khả năng tùy biến được hiểu là bất cứ thay đổi nào đối
với Web Part đều tác động đến toàn bộ người dùng đang
sử dụng Web Part đó.
VD: quản trị trang có thể chỉ định một Feed để hiển thị lên
trang chủ, khi đó tất cả người dùng có thể xem Feed này.
Web Part và các trang SharePoint
12
Khả năng cá nhân hóa của Web Part
Khả năng cá nhân hóa được hiểu là một sự thay đổi nào
đó đối với Web Part sẽ chỉ có tác động với người thực
hiện sự thay đổi đó mà không ảnh hưởng tới những
người dùng khác.
VD: người dùng có thể thay đổi địa chỉ Feed để mỗi khi
vào trang chủ thay vì hiển thị Feed do quản trị chỉ định,
web site sẽ hiển thị Feed do chính người dùng chỉ định mà

không ảnh hưởng tới người dùng khác
Khả năng cá nhân hóa được hiểu là một sự thay đổi nào
đó đối với Web Part sẽ chỉ có tác động với người thực
hiện sự thay đổi đó mà không ảnh hưởng tới những
người dùng khác.
VD: người dùng có thể thay đổi địa chỉ Feed để mỗi khi
vào trang chủ thay vì hiển thị Feed do quản trị chỉ định,
web site sẽ hiển thị Feed do chính người dùng chỉ định mà
không ảnh hưởng tới người dùng khác
Web Part và các trang SharePoint
13
DEMO
Demo:
Tùy biến WebPart trên SharePoint 2010
Cá nhân hóa WebPart trên SharePoint 2010
Demo: Kết nối giữa hai Web Part
Web Part và các trang SharePoint
14
Web Part: Element.xml
Elements.xml:
Định nghĩa Web Part trên SharePoint. Bao gồm tên, các file
liên quan, vị trí triển khai.
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns=" >
<Module Name="HelloWebPart" List="113" Url="_catalogs/wp">
<File Path="HelloWebPart\HelloWebPart.webpart"
Url="HelloWebPart.webpart"
Type="GhostableInLibrary">
<Property Name="Group" Value="Custom" />
</File>

</Module>
</Elements>
Web Part và các trang SharePoint
15
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns=" >
<Module Name="HelloWebPart" List="113" Url="_catalogs/wp">
<File Path="HelloWebPart\HelloWebPart.webpart"
Url="HelloWebPart.webpart"
Type="GhostableInLibrary">
<Property Name="Group" Value="Custom" />
</File>
</Module>
</Elements>
Web Part: *.cs
*.cs: Định nghĩa Web Part control
Thực thi các đoạn mã logic cho Web Part.
Web Part: Là một Web control được kế thừa từ lớp
WebPart trong namespace:
System.Web.UI.WebControls.WebParts
*.cs: Định nghĩa Web Part control
Thực thi các đoạn mã logic cho Web Part.
Web Part: Là một Web control được kế thừa từ lớp
WebPart trong namespace:
System.Web.UI.WebControls.WebParts
Web Part và các trang SharePoint
16
public class HelloWebPart : WebPart
{
//sử dụng phương thức này để xây dựng các controls

//và giao diện cho WebPart
protected override void CreateChildControls()
{
}
}
Web Part: *.webpart
*.webpart: File mô tả cách hiển thị Web Part
Type: chỉ ra thư viện thực thi code logic cho Web Part;
Properties: các thuộc tính của Web part như: Title,
Description
Web Part và các trang SharePoint
17
Web Part: *.webpart
<?xml version="1.0" encoding="utf-8"?>
<webParts>
<webPart xmlns=" /><metaData>
<type name="Lab02.VisualWebPart,
$SharePoint.Project.AssemblyFullName$" />
<importErrorMessage>
$Resources:core,ImportErrorMessage;
</importErrorMessage>
</metaData>
<data>
<properties>
<property name="Title" type="string">VisualWebPart1</property>
<property name="Description" type="string">Visual WebPart</property>
</properties>
</data>
</webPart>
</webParts>

Web Part và các trang SharePoint
18
<?xml version="1.0" encoding="utf-8"?>
<webParts>
<webPart xmlns=" /><metaData>
<type name="Lab02.VisualWebPart,
$SharePoint.Project.AssemblyFullName$" />
<importErrorMessage>
$Resources:core,ImportErrorMessage;
</importErrorMessage>
</metaData>
<data>
<properties>
<property name="Title" type="string">VisualWebPart1</property>
<property name="Description" type="string">Visual WebPart</property>
</properties>
</data>
</webPart>
</webParts>
Cá nhân hóa trên SharePoint
Cá nhân hóa được thực hiện thông qua trình đơn phía
góc phải trên cùng của trang SharePoint
Một Web Part hỗ trợ cá nhân hóa được khai báo thông
qua attribute Personalizable cho một Property nào đó
[Personalizable(PersonalizationScope.Shared),
WebBrowsable(false)]
public string XmlUrl {
get { return xmlUrl; }
set { xmlUrl = value; }
}

Web Part và các trang SharePoint
19
[Personalizable(PersonalizationScope.Shared),
WebBrowsable(false)]
public string XmlUrl {
get { return xmlUrl; }
set { xmlUrl = value; }
}
Web Part Properties
Web Part sử dụng các Properties để khởi tạo giá trị đầu
vào cho Web Part
Người dùng có thể thay đổi các giá trị này trực tiếp trên
trình duyệt
Web Part sử dụng các Properties để khởi tạo giá trị đầu
vào cho Web Part
Người dùng có thể thay đổi các giá trị này trực tiếp trên
trình duyệt
Web Part và các trang SharePoint
20
[Personalizable(PersonalizationScope.Shared),
WebBrowsable(false)]
public string XmlUrl {get; set; }
Web Part Properties
WebBrowsable:
Chỉ ra Web Part có khả năng được sửa đổi trực tiếp trên
trình duyệt
Personalizable: Khả năng cá nhân hóa
PersonalizationScope.User:
Người dùng có khả năng cá nhân hóa Property này
PersonalizationScope.Shared:

Người dùng không có khả năng cá nhân hóa Property này.
WebBrowsable:
Chỉ ra Web Part có khả năng được sửa đổi trực tiếp trên
trình duyệt
Personalizable: Khả năng cá nhân hóa
PersonalizationScope.User:
Người dùng có khả năng cá nhân hóa Property này
PersonalizationScope.Shared:
Người dùng không có khả năng cá nhân hóa Property này.
Web Part và các trang SharePoint
21
EditorPart
Tool Pane
GetEditorParts
The image cannot be displayed. Your compu ter may not have enou gh memory to op en the image, or the image may have been co rrupted. Restart your c omputer, and then op en the file again. If the red x still appears, yo u may have to delete the image and then insert it again.
Web Part và các trang SharePoint
2222
WEB PART
EDITOR
PART
EDITOR
PART
COMMON
PROPS
COMMON
PROPS
GetEditorParts
ApplyChanges
SyncChanges
Thể hiện Properties thông qua

EditorPart
EditorPart
Là các control ASP.NET được hiển thị trên Tool Pane khi
người dùng chọn chức năng sửa đổi Web Part
Cho phép sửa đổi, xác thực các Property để truyền vào
cho Web Part.
Tạo EditorPart:
Tạo một lớp, kế thừa từ lớp EditorPart được định nghĩa
trong namespace System.Web.UI.WebControls.WebParts
EditorPart
Là các control ASP.NET được hiển thị trên Tool Pane khi
người dùng chọn chức năng sửa đổi Web Part
Cho phép sửa đổi, xác thực các Property để truyền vào
cho Web Part.
Tạo EditorPart:
Tạo một lớp, kế thừa từ lớp EditorPart được định nghĩa
trong namespace System.Web.UI.WebControls.WebParts
Web Part và các trang SharePoint
23
public class OPMLEditor : EditorPart
Tạo EditorPart
Tạo EditorPart:
Override phương thức CreateEditorParts bên trong lớp
Web Part để tải Editor Part do bạn tự định nghĩa
Web Part và các trang SharePoint
24
EditorPartCollection IWebEditable.CreateEditorParts()
{
List<EditorPart> editors = new List<EditorPart>();
editors.Add(new OPMLEditor());

return new EditorPartCollection(editors);
}
Demo
Demo:
Viết Web Part trực quan sử dụng Visual Studio 2010
Web Part và các trang SharePoint
25