Post on 24-May-2015
Silverlight + SharePoint ：在企業內網提供用戶端更好的使用者經驗盧昊產品行銷經理台灣微軟haulu@microsoft.com
課程大綱在 SharePoint 上客製化開發當哈利遇見莎莉： SharePoint & Silverlight?Silverlight Blueprint for SharePoint (SL4SP)建構酷炫的 SharePoint 網站 – AdventureWorks for SharePoint
Q & A
課程大綱在 SharePoint 上客製化開發當哈利遇見莎莉： SharePoint & Silverlight?Silverlight Blueprint for SharePoint (SL4SP)建構酷炫的 SharePoint 網站 – AdventureWorks for SharePoint
Q & A
SharePoint = WSS & MOSS
Custom Coding
Custom Web Parts
Site Definitions
Workflow
Content Types
Microsoft Visual Studio
Web site construction
Create lists and doclibs
Design Web pages
No-code data view/forms
Web part hookup
SharePoint Designer + Browser
SharePoint 平台開發工具的選擇
SharePoint 平台客製化的選擇
不一定所有的客製化需求都需要寫程式兩套客製化方式，讓開發人員選擇最快速路程Office SharePoint Designer 也是開發工具，能夠省去開發人員相當多的時間
善用 Data View/Data Form Web PartMaster Page 客製化、建置 CSSConditional Formatting…
SharePoint Designer 2007
建構新的 SharePoint 網站並進行表現層客製化無程式碼設計 (No C#/VB.NET code)支援 IntelliSense支援 ASP.NET 控制項可檢視與使用 Web part 和 Data source
Visual Studio 2008
IDE for creating assemblies, server/user controls and advanced workflows直接呼叫 SharePoint object model支援 IntelliSense藉由 Team Foundation Server 可進行完整的程式碼控制 (Source Control)
Visual Studio Extensions for WSS v1.2(VSeWSS 1.2)Visual Studio 2008 上的 Add-on ，可以輕
輕鬆鬆建置與佈署 SharePoint 客製化專案提供繁體中文版下載VS 2005 使用者應下載 1.1 版
Build & deploy提供各式範本自動產生 Solution Package
VSeWSS 1.3 CTP 版已經推出支援 64-bit
VSeWSS 1.2 Item Templates
List DefinitionContent TypeField ControlWeb PartModuleTemplateEvent ReceiverList InstanceList Definition from Content Type
WSP View & Build
WSP ViewView -> Other Windows
Build and DeploySETUP.BATSolution Generator
Demo
SharePoint 開發Hello World Web Part
SPVirtualServer
SPWebServer
SPGlobalAdmin
SPSite
SPWeb
SPList
SPListItem
SPControl
SharePoint Sites
SharePoint 物件模型
Web PartsWeb Pages
Smart 以及Mobile Clients
WebServices
使用 SharePoint 物件模型- 直接存取 Object Model
Demo
SharePoint Object Model
課程大綱在 SharePoint 上客製化開發當哈利遇見莎莉： SharePoint & Silverlight?Silverlight Blueprint for SharePoint (SL4SP)建構酷炫的 SharePoint 網站 – AdventureWorks for SharePoint
Q & A
Evolve Baseline Templates…
當哈利遇見莎莉
To this…
SharePoint & Silverlight - Why?• 藉由更好的互動性增進使用者經驗• 更酷更炫的網站• 譜出美工與開發人員的愛情• XAML & Code-behind
• 更有效的管控網頁程式• 支援多種語言： C#/VB.Net and
dynamic languages (e.g. JavaScript, Ruby, Python, etc.)
Demo
SharePoint & Silverlight in Action
課程大綱在 SharePoint 上客製化開發當哈利遇見莎莉： SharePoint & Silverlight?Silverlight Blueprint for SharePoint (SL4SP)建構酷炫的 SharePoint 網站 – AdventureWorks for SharePoint
Q & A
開發環境Silverlight 2
Visual Studio 2008
Visual Studio Tools for Silverlight 2
Microsoft Expression Blend
Silverlight 2 SDK
SharePoint
MOSS 2007 (Enterprise)
WSS 3.0 SP1 (or MOSS 2007 SP1)
Visual Studio Extensions for WSS (VSeWSS) 1.2
重要設定 ( 手動 )
.NET Framework 3.5 (for Silverlight 2.0)將 System.Web.Silverlight.dll 佈署到 GAC
DLL 可在 Silverlight SDK 中找到在 IIS Web application 中設定 MIME type 對應至 .XAP
.xap -> application/x-silverlight-2
修改 web.config 使其支援 Silverlight 2
基本 中度 高度
不同種類的整合
Streaming Services
<iframe/>
置放於Web Part
.NET AssemblyCustom
SP Object
Web Part 與 Silverlight 結合
Content Editor Web Part藉由 HTML 程式碼在SharePoint 加入 Silverlight
HTMLTextWriter class在 Web Part 中呼叫HTMLTextWriter 寫出呼叫Silverlight 的 HTML 碼
以 Web Part 方式開發Required Assemblies
System.Web.Extensions.dllSystem.Web.Silverlight.dll
AlsoScript Manager on PageAdd Silverlight controlControl properties
…protected override void
CreateChildControls() {
System.Web.UI.SilverlightControls.Silverlight myCustomForm = new System.Web.UI.SilverlightControls.Silverlight();
myCustomForm.ID = "myCustomForm";
myCustomForm.Source = "http://stefoxdemo/XAPS1/CustomerEntryForm.xap";
myCustomForm.Width = new System.Web.UI.WebControls.Unit(475);
myCustomForm.Height = new System.Web.UI.WebControls.Unit(300);
this.Controls.Add(myCustomForm);
}…
Demo
Silverlight & Content Editor Web Part
Demo
Hello World Silverlight Web Part
自訂欄位型別 (Custom Field Type)使用 Silverlight 作為自訂
欄位型別的控制項InitParametersHidden field
Create Silverlight app
Create SharePointproject with customfield type
頁面層級的 Silverlight 客製化用 Silverlight 作為基礎頁面美工項目藉由 SharePoint Designer 修改Master Page客製化導覽列跨 site collection 的Master Page 客製化重要訊息或廣告輪播
課程大綱在 SharePoint 上客製化開發當哈利遇見莎莉： SharePoint & Silverlight?Silverlight Blueprint for SharePoint (SL4SP)建構酷炫的 SharePoint 網站 – AdventureWorks for SharePoint
Q & A
Demo
AdventureWorks SharePoint 網站
使用 Silverlight 與 SharePoint Designer客製導覽列
使用 Silverlight 與 SharePoint Designer客製導覽列架構圖
使用 Silverlight 與 SharePoint Designer客製導覽列Master Page
Out-of-the-box asp:SiteMapPath Control
<aw:Menu ID="CurrentNav" runat="server" datasourceID="SiteMapDS" orientation="Vertical" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="0" StaticSubMenuIndent="1" ItemWrap="true" AccessKey="3" CssClass="leftNav" SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>"><LevelMenuItemStyles><asp:MenuItemStyle CssClass="leftNav1" />…</aw:Menu>
Custom Web Server Control
<div id="navigation"><div class="navigation_main"><AWSL:AWNavigation runat="server"
navigationMapProvider="SPSiteMapProvider" _ </AWSL:AWNavigation></div>
</div>
使用 Silverlight 與 SharePoint Designer客製導覽列Web Server Control
註冊 ScriptManager找到導覽列內容 ( 節點 )產生 Silverlight 導覽列將資訊傳遞給 Silverlight 導覽列繪製 (Renders) 出 Silverlight 導覽列
使用 Silverlight 與 SharePoint Designer客製導覽列Silverlight 導覽列
接收到啟動參數 ( 導覽節點 )註冊 storyboards & event handlers動態產生導覽列選單提供互動功能
Demo
AdventureWorks 導覽列
使用 Silverlight 連結搜尋服務
呼叫 SharePoint Web Services
用於展現存放在SharePoint 圖片庫中的多媒體檔案Silverlight 程式透過呼叫SharePoint 的Web service 進行資料交換
使用 Silverlight 連結搜尋服務 架構圖
使用 Silverlight 連結搜尋服務 Design Pattern
Web PartReusable hosting container
Web and WCF Services在 SharePoint Server 中佈署SOA 的方式讓其他元件呼叫 SharePoint 搜尋服務
Silverlight Applications藉由 WCF 呼叫服務
Demo
AdventureWorks 人員搜尋 Web Part
注意事項檢查 web.config 中是否加入了必要的設定
<SafeControl Assembly="System.Web.Silverlight, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.SilverlightControls" TypeName="*" Safe="True" />
在編輯 web.config 前先備份檔案確認 Silverlight runtime 版本的一致性，設定 MIME Type
application/x-silverlight-app
確認 System.Web.Silverlight.dll 有被佈署致 GAC
gacutil -l | FINDSTR System.Web.Silverlight
確認崁入 Silverlight 的 SharePoint 物件指向正確的 XAP 檔案位置
結論• Silverlight 2.0 大幅提升了 SharePoint
的使用經驗• 提供更好的視覺化元件 (e.g. Dashboards)• 多媒體播放器展示存放於 SharePoint 中之多
媒體檔• 導覽元件 , Web Parts...• RIA 提供更多、更豐富的客戶端功能
• 了解如何在 SharePoint平台上開發• 立即下載 Silverlight & SharePoint
Blueprints
相關資源MSSharePointDeveloper - http://www.microsoft.com/click/SharePointDeveloper/
Virtual Lab - http://go.microsoft.com/?linkid=9234915
使用 Silverlight 2 網頁組件讓 SharePoint 更耀眼 - http://msdn.microsoft.com/zh-tw/magazine/dd148643.aspxIntroduction to SharePoint Products and Technologies for the Professional .NET Developer - http://msdn.microsoft.com/en-us/library/cc537498.aspxSilverlight Blueprint for SharePoint - http://www.codeplex.com/SL4SP
How To: Get up and running with the Silverlight 2.0 Blueprints for SharePoint 2007 - http://www.zimmergren.net/archive/2008/03/19/how-to-get-up-and-running-with-the-silverlight-2-0-blueprints-for-sharepoint-2007.aspxInstalling the SharePoint BluePrint for Silverlight: SilverlightPart - http://www.wssdemo.com/Blog/archive/2008/03/24/installing-the-sharepoint-blueprint-for-silverlight-silverlightpart.aspx
Q & A