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.

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)

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
…

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 đó

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

Các loại Web Part trong
SharePoint 2010
WSS Web PartsWSS Web Parts
SharePoint Foundation Runtime
ASP.NET 2.0 Runtime
ASP Web Parts
ASP Web PartsASP Web Parts
Hybrid Web Parts
WSS v2 Runtime
Hybrid Web PartsHybrid Web Parts
WSS Web PartsWSS 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

SharePoint Web Part với VS 2010

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ế

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.

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

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: 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="http://schemas.microsoft.com/sharepoint/" >
<Module Name="HelloWebPart" List="113" Url="_catalogs/wp">
<File Path="HelloWebPartHelloWebPart.webpart"
Url="HelloWebPart.webpart"
Type="GhostableInLibrary">
<Property Name="Group" Value="Custom" />
</File>
</Module>
</Elements>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/" >
<Module Name="HelloWebPart" List="113" Url="_catalogs/wp">
<File Path="HelloWebPartHelloWebPart.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
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: *.webpart
<webParts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<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>
<webParts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<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; }
}
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
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.

EditorPart
Tool Pane
GetEditorParts
The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.
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
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
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

Các trang SharePoint và UI
Các trang (pages) là thành phần cơ bản tạo nên giao
diện người dùng UI trên SharePoint
Có hai loại trang (chính) trên SharePoint
Application page
Site page
Cả hai loại trang trên SharePoint đều kế thừa bố cục
(layout) từ Master Page
Các trang (pages) là thành phần cơ bản tạo nên giao
diện người dùng UI trên SharePoint
Có hai loại trang (chính) trên SharePoint
Application page
Site page
Cả hai loại trang trên SharePoint đều kế thừa bố cục
(layout) từ Master Page

Các trang SharePoint và UI
Ngoài các trang, SharePoint cũng bao gồm các thành
phần khác tạo nên giao diện người dùng
Server Ribbon
Web Part
CSS
Theme
…
Ngoài các trang, SharePoint cũng bao gồm các thành
phần khác tạo nên giao diện người dùng
Server Ribbon
Web Part
CSS
Theme
…
Tham khảo: http://msdn.microsoft.com/en-us/library/ee539040.aspx

Application page
Application page dùng để thực thi một số chức năng
được dùng chung trên SharePoint
Application page là các file vật lý được lưu trên thư mục
gốc của SharePoint:
C:Program FilesCommon FilesMicrosoft SharedWeb
Server Extensions14TEMPLATELAYOUTS
Application page dùng để thực thi một số chức năng
được dùng chung trên SharePoint
Application page là các file vật lý được lưu trên thư mục
gốc của SharePoint:
C:Program FilesCommon FilesMicrosoft SharedWeb
Server Extensions14TEMPLATELAYOUTS

Application page
Application page được gắn trong Master page theo thứ
tự để tạo ra sự thống nhất về mặt giao diện trên
SharePoint.
Application page không có khả năng sửa đổi sử dụng
SharePoint Designer
Ví dụ về Application page : Settings.aspx
Application page được gắn trong Master page theo thứ
tự để tạo ra sự thống nhất về mặt giao diện trên
SharePoint.
Application page không có khả năng sửa đổi sử dụng
SharePoint Designer
Ví dụ về Application page : Settings.aspx
Tham khảo: http://msdn.microsoft.com/en-us/library/ee539040.aspx

Site page
Site page là các file được lưu ở trong cơ sở dữ liệu của
SharePoint
Ví dụ Site page : Default.aspx, NewForm.aspx
Site page có thể được tạo, chỉnh sửa và tùy biến bởi
người dùng.
Có thể chỉnh sửa Site page sử dụng trình duyệt Web
hoặc SharePoint Designer
Site page bao gồm hai loại
Trang chuẩn: chứa text, ảnh, Web part và các thành phần
khác
Trang Web Parts: chỉ chứa Web part trong các Web Part
Zone
Site page là các file được lưu ở trong cơ sở dữ liệu của
SharePoint
Ví dụ Site page : Default.aspx, NewForm.aspx
Site page có thể được tạo, chỉnh sửa và tùy biến bởi
người dùng.
Có thể chỉnh sửa Site page sử dụng trình duyệt Web
hoặc SharePoint Designer
Site page bao gồm hai loại
Trang chuẩn: chứa text, ảnh, Web part và các thành phần
khác
Trang Web Parts: chỉ chứa Web part trong các Web Part
Zone

Master Page
Master page định nghĩa một cấu trúc chung cho các
trang trên SharePoint
Master page đem đến sự thống nhất về mặt giao diện
trên SharePoint
Các Master Page trên SharePoint được lưu trữ trên thư
mục
%ProgramFiles%Common FilesMicrosoft Sharedweb
server extensions14TEMPLATEGLOBAL
Master page định nghĩa một cấu trúc chung cho các
trang trên SharePoint
Master page đem đến sự thống nhất về mặt giao diện
trên SharePoint
Các Master Page trên SharePoint được lưu trữ trên thư
mục
%ProgramFiles%Common FilesMicrosoft Sharedweb
server extensions14TEMPLATEGLOBAL

SharePoint Designer 2010

SharePoint Designer 2010
Microsoft SharePoint Designer 2010 là công cụ thiết kế
web và ứng dụng được sử dụng để tùy biến SharePoint
và các ứng dụng.
Sử dụng SharePoint Designer chúng ta có thể:
Tạo định dạng các trang web
Xây dựng giải pháp tự động hóa quy trình
Thiết kế cách hiển thị web site…
Microsoft SharePoint Designer 2010 là công cụ thiết kế
web và ứng dụng được sử dụng để tùy biến SharePoint
và các ứng dụng.
Sử dụng SharePoint Designer chúng ta có thể:
Tạo định dạng các trang web
Xây dựng giải pháp tự động hóa quy trình
Thiết kế cách hiển thị web site…

Giao diện SharePoint Designer 2010

Giao diện SharePoint Designer 2010
Navigation:
Dùng để chuyển giữa các phần, các thành phần hoặc các
site trong SharePoint
Gallery và Summary:
Dùng hiển thị chi tiết các phần, các thành phần hoặc các
site được chọn từ Navigation
Ribbon:
Để thực hiện các hành động đối với các thành phần được
chọn
Navigation:
Dùng để chuyển giữa các phần, các thành phần hoặc các
site trong SharePoint
Gallery và Summary:
Dùng hiển thị chi tiết các phần, các thành phần hoặc các
site được chọn từ Navigation
Ribbon:
Để thực hiện các hành động đối với các thành phần được
chọn

Demo
Demo:
Sử dụng SharePoint Designer 2010 để định dạng lại dữ
liệu hiển thị trên Web Part

Tổng kết bài học
Web Part trên SharePoint 2010 tương thích với các nền
tảng Web part trước đó
Visual Studio 2010 cung cấp 2 loại hình phát triển Web
part cho SharePoint
Web Part chuẩn
Web Part trực quan
Chúng ta có thể viết Web Part để hỗ trợ các khả năng
Tùy biến
Cá nhân hóa
Khởi tạo và thay đổi giá trị trong lúc thực thi thông qua
Properties và EditorPart
Web Part trên SharePoint 2010 tương thích với các nền
tảng Web part trước đó
Visual Studio 2010 cung cấp 2 loại hình phát triển Web
part cho SharePoint
Web Part chuẩn
Web Part trực quan
Chúng ta có thể viết Web Part để hỗ trợ các khả năng
Tùy biến
Cá nhân hóa
Khởi tạo và thay đổi giá trị trong lúc thực thi thông qua
Properties và EditorPart

Tổng kết bài học
SharePoint có hai lại trang triển khai và sử dụng với các
mục đích khác nhau
Application Page
Site Page
SharePoint Designer 2010 được sử dụng như là một
công cụ thiết kế và xây dựng giải pháp không cần code
trên SharePoint
SharePoint có hai lại trang triển khai và sử dụng với các
mục đích khác nhau
Application Page
Site Page
SharePoint Designer 2010 được sử dụng như là một
công cụ thiết kế và xây dựng giải pháp không cần code
trên SharePoint

Danh sách tham khảo
http://office.microsoft.com/en-us/sharepoint-designer-
help/video-introducing-sharepoint-designer-2010-
VA101822495.aspx
help/introducing-sharepoint-designer-2010-
HA101782482.aspx?CTT=3
http://msdn.microsoft.com/en-us/library/ee539040.aspx
help/video-introducing-sharepoint-designer-2010-
VA101822495.aspx
help/introducing-sharepoint-designer-2010-
HA101782482.aspx?CTT=3

Bài 2: Web Part và các trang SharePoint

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Bài 2: Web Part và các trang SharePoint

Similar a Bài 2: Web Part và các trang SharePoint (20)

Más de MasterCode.vn

Más de MasterCode.vn (20)

Bài 2: Web Part và các trang SharePoint