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 2010Môi trường thực thi và môi trường phát triển SharePointMô hình đối tượng trên SharePoint 2010Solutions 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 SharePointTìm hiểu các cách phát triển Web Part trên SharePointTìm hiểu các loại trang trên SharePointGiới thiệu về SharePoint Designer 2010 để tùy biến, thiếtkế và xây dựng giải pháp SharePoint mà không cần viếtcode.

Tìm hiểu Web Part trên SharePointTìm hiểu các cách phát triển Web Part trên SharePointTìm hiểu các loại trang trên SharePointGiới thiệu về SharePoint Designer 2010 để tùy biến, thiếtkế và xây dựng giải pháp SharePoint mà không cần viếtcode.


SharePoint Web Part là gì?

SharePoint Web Part: là thành phần giao diện chính trêncác trang SharePointWeb 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ếptrê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êncác trang SharePointWeb 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ếptrê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ênSharePoint 2010

DEMO một số Web Part có sẵn trên SharePointContent Editor Web PartImage Web PartSite Users Web PartContent Query Web PartUser Tasks Web Part…

DEMO một số Web Part có sẵn trên SharePointContent Editor Web PartImage Web PartSite Users Web PartContent Query Web PartUser Tasks Web Part…


Lịch sử của Web Part

WindowsSharePoint Services3.0

• Tương thích ngượcvới các nền tảngWeb Part trước đó

Windows SharePointServices 2.0

• Được thiết kế vớinền tảng Web Partđầu tiên sử dụng choWSS 2.0

Microsoft® ASP.NET 2.0

• Được thiết kế với nềntảng Web Part thốngnhất

• Mềm dẻo và dễ mởrộng hơn nền tảng choWSS trước đó

• Không hỗ hỗ trợ vàtương thích với nềntảng Web Part WSS 2.0

WindowsSharePoint Services3.0

• Tương thích ngượcvới các nền tảngWeb 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 WebPartManagerMột hoặc nhiều Web Part ZonesCó thể có Editor Zone và/hoặc Catalog Zone


Các loại Web Part trongSharePoint 2010

WSS Web PartsWSS Web Parts

SharePoint Foundation RuntimeASP.NET 2.0 Runtime

ASP Web PartsASP 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 trongSharePoint 2010

Có hai loại Web Part được hỗ trợ trên SharePoint2010

ASP.NET Web Parts sử dụng lớp cơ sởSystem.Web.UI.WebControls.WebParts.WebPartSharePoint 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 SharePoint2010

ASP.NET Web Parts sử dụng lớp cơ sởSystem.Web.UI.WebControls.WebParts.WebPartSharePoint 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ẩnLà cách phát triển Web part truyền thốngKhông có khả năng kéo thả các control để thiết kế

Visual Web Part: Web part trực quanLà các phát triển Web Part mở rộng trong SharePoint 2010Có khả năng kéo thả các control để thiết kế

Web Part: Web part chuẩnLà cách phát triển Web part truyền thốngKhông có khả năng kéo thả các control để thiết kế

Visual Web Part: Web part trực quanLà các phát triển Web Part mở rộng trong SharePoint 2010Có khả năng kéo thả các control để thiết kế


Khả năng tùy biến và cá nhân hóacủa Web Part

Khả năng tùy biến (Customizable) và khả năng cá nhânhóa (Personalizable) của Web Part cho phép các WebPart đượ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 đốivới Web Part đều tác động đến toàn bộ người dùng đangsử dụng Web Part đó.

VD: quản trị trang có thể chỉ định một Feed để hiển thị lêntrang 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ânhóa (Personalizable) của Web Part cho phép các WebPart đượ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 đốivới Web Part đều tác động đến toàn bộ người dùng đangsử dụng Web Part đó.

VD: quản trị trang có thể chỉ định một Feed để hiển thị lêntrang 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ựchiện sự thay đổi đó mà không ảnh hưởng tới nhữngngười dùng khác.

VD: người dùng có thể thay đổi địa chỉ Feed để mỗi khivà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ựchiện sự thay đổi đó mà không ảnh hưởng tới nhữngngười dùng khác.

VD: người dùng có thể thay đổi địa chỉ Feed để mỗi khivà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 2010Cá 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 fileliê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="HelloWebPart\HelloWebPart.webpart"

Url="HelloWebPart.webpart"Type="GhostableInLibrary">

<Property Name="Group" Value="Custom" /></File>

</Module></Elements>


<?xml version="1.0" encoding="utf-8"?><Elements xmlns="http://schemas.microsoft.com/sharepoint/" >

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

http://schemas.microsoft.com/sharepoint/

http://schemas.microsoft.com/sharepoint/

Web Part: *.cs

*.cs: Định nghĩa Web Part controlThực thi các đoạn mã logic cho Web Part.

Web Part: Là một Web control được kế thừa từ lớpWebPart trong namespace:System.Web.UI.WebControls.WebParts

*.cs: Định nghĩa Web Part controlThực thi các đoạn mã logic cho Web Part.

Web Part: Là một Web control được kế thừa từ lớpWebPart 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 WebPartprotected override void CreateChildControls(){}

}

Web Part: *.webpart

*.webpart: File mô tả cách hiển thị Web PartType: 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

<?xml version="1.0" encoding="utf-8"?><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>


<?xml version="1.0" encoding="utf-8"?><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>

http://schemas.microsoft.com/WebPart/v3

http://schemas.microsoft.com/WebPart/v3

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íagóc phải trên cùng của trang SharePointMột Web Part hỗ trợ cá nhân hóa được khai báo thôngqua 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ị đầuvào cho Web PartNgười dùng có thể thay đổi các giá trị này trực tiếp trêntrình duyệt

Web Part sử dụng các Properties để khởi tạo giá trị đầuvào cho Web PartNgười dùng có thể thay đổi các giá trị này trực tiếp trêntrì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êntrình duyệt

Personalizable: Khả năng cá nhân hóaPersonalizationScope.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êntrình duyệt

Personalizable: Khả năng cá nhân hóaPersonalizationScope.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

EDITORPART

EDITORPART

COMMONPROPS

COMMONPROPS

GetEditorParts

ApplyChanges

SyncChanges

Thể hiện Properties thông quaEditorPart

EditorPartLà các control ASP.NET được hiển thị trên Tool Pane khingười dùng chọn chức năng sửa đổi Web PartCho phép sửa đổi, xác thực các Property để truyền vàocho Web Part.

Tạo EditorPart:Tạo một lớp, kế thừa từ lớp EditorPart được định nghĩatrong namespace System.Web.UI.WebControls.WebParts

EditorPartLà các control ASP.NET được hiển thị trên Tool Pane khingười dùng chọn chức năng sửa đổi Web PartCho phép sửa đổi, xác thực các Property để truyền vàocho Web Part.

Tạo EditorPart:Tạo một lớp, kế thừa từ lớp EditorPart được định nghĩatrong 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ớpWeb 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 giaodiện người dùng UI trên SharePointCó hai loại trang (chính) trên SharePoint

Application pageSite 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 giaodiện người dùng UI trên SharePointCó hai loại trang (chính) trên SharePoint

Application pageSite 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ànhphần khác tạo nên giao diện người dùng

Server RibbonWeb PartCSSTheme…

Ngoài các trang, SharePoint cũng bao gồm các thànhphần khác tạo nên giao diện người dùng

Server RibbonWeb PartCSSTheme…


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 SharePointApplication page là các file vật lý được lưu trên thư mụcgốc của SharePoint:

C:\Program Files\Common Files\Microsoft Shared\WebServer Extensions\14\TEMPLATE\LAYOUTS

Application page dùng để thực thi một số chức năngđược dùng chung trên SharePointApplication page là các file vật lý được lưu trên thư mụcgốc của SharePoint:

C:\Program Files\Common Files\Microsoft Shared\WebServer Extensions\14\TEMPLATE\LAYOUTS


http://msdn.microsoft.com/en-us/library/ee539040.aspxApplication

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ênSharePoint.Application page không có khả năng sửa đổi sử dụngSharePoint 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ênSharePoint.Application page không có khả năng sửa đổi sử dụngSharePoint 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ủaSharePoint

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ởingười dùng.Có thể chỉnh sửa Site page sử dụng trình duyệt Webhoặc SharePoint DesignerSite page bao gồm hai loại

Trang chuẩn: chứa text, ảnh, Web part và các thành phầnkhácTrang Web Parts: chỉ chứa Web part trong các Web PartZone

Site page là các file được lưu ở trong cơ sở dữ liệu củaSharePoint

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ởingười dùng.Có thể chỉnh sửa Site page sử dụng trình duyệt Webhoặc SharePoint DesignerSite page bao gồm hai loại

Trang chuẩn: chứa text, ảnh, Web part và các thành phầnkhácTrang Web Parts: chỉ chứa Web part trong các Web PartZone


http://msdn.microsoft.com/en-us/library/ee539040.aspxSite

Master Page

Master page định nghĩa một cấu trúc chung cho cáctrang trên SharePointMaster page đem đến sự thống nhất về mặt giao diệntrên SharePointCác Master Page trên SharePoint được lưu trữ trên thưmục

%ProgramFiles%\Common Files\Microsoft Shared\webserver extensions\14\TEMPLATE\GLOBAL

Master page định nghĩa một cấu trúc chung cho cáctrang trên SharePointMaster page đem đến sự thống nhất về mặt giao diệntrên SharePointCác Master Page trên SharePoint được lưu trữ trên thưmục

%ProgramFiles%\Common Files\Microsoft Shared\webserver extensions\14\TEMPLATE\GLOBAL


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 SharePointvà các ứng dụng.Sử dụng SharePoint Designer chúng ta có thể:

Tạo định dạng các trang webXây dựng giải pháp tự động hóa quy trìnhThiế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 SharePointvà các ứng dụng.Sử dụng SharePoint Designer chúng ta có thể:

Tạo định dạng các trang webXây dựng giải pháp tự động hóa quy trìnhThiế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ácsite 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ácsite được chọn từ Navigation

Ribbon:Để thực hiện các hành động đối với các thành phần đượcchọn

Navigation:Dùng để chuyển giữa các phần, các thành phần hoặc cácsite 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ácsite được chọn từ Navigation

Ribbon:Để thực hiện các hành động đối với các thành phần đượcchọ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ềntảng Web part trước đóVisual Studio 2010 cung cấp 2 loại hình phát triển Webpart cho SharePoint

Web Part chuẩnWeb Part trực quan

Chúng ta có thể viết Web Part để hỗ trợ các khả năngTùy biếnCá nhân hóaKhởi tạo và thay đổi giá trị trong lúc thực thi thông quaProperties và EditorPart

Web Part trên SharePoint 2010 tương thích với các nềntảng Web part trước đóVisual Studio 2010 cung cấp 2 loại hình phát triển Webpart cho SharePoint

Web Part chuẩnWeb Part trực quan

Chúng ta có thể viết Web Part để hỗ trợ các khả năngTùy biếnCá nhân hóaKhởi tạo và thay đổi giá trị trong lúc thực thi thông quaProperties 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ácmục đích khác nhau

Application PageSite Page

SharePoint Designer 2010 được sử dụng như là mộtcông cụ thiết kế và xây dựng giải pháp không cần codetrên SharePoint

SharePoint có hai lại trang triển khai và sử dụng với cácmục đích khác nhau

Application PageSite Page

SharePoint Designer 2010 được sử dụng như là mộtcông cụ thiết kế và xây dựng giải pháp không cần codetrên SharePoint


Danh sách tham khảo

http://office.microsoft.com/en-us/sharepoint-designer-help/video-introducing-sharepoint-designer-2010-VA101822495.aspxhttp://office.microsoft.com/en-us/sharepoint-designer-help/introducing-sharepoint-designer-2010-HA101782482.aspx?CTT=3http://msdn.microsoft.com/en-us/library/ee539040.aspxhttp://msdn.microsoft.com/en-us/library/ee535520.aspx

http://office.microsoft.com/en-us/sharepoint-designer-help/video-introducing-sharepoint-designer-2010-VA101822495.aspxhttp://office.microsoft.com/en-us/sharepoint-designer-help/introducing-sharepoint-designer-2010-HA101782482.aspx?CTT=3http://msdn.microsoft.com/en-us/library/ee539040.aspxhttp://msdn.microsoft.com/en-us/library/ee535520.aspx


http://office.microsoft.com/en-us/sharepoint-designer-


http://msdn.microsoft.com/en-us/library/ee539040.aspx






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

Documents