Россия, Башкирский Государственный университет, 2006 |
Вставка приложений Silverlight в web приложения
Вставка приложений Silverlight в Office SharePoint Server
Для работы Silverlight на портале Office SharePoint Server необходимы следующие компоненты:
- Windows SharePoint Services 3.0 Service Pack 1.
- .NET Framework 3.5 для Silverlight
- Настройки Internet Information Server
- Visual Studio 2008 Silverlight 3.0 Tools + Silverlight 3.0 SDK
- Expression Blend 3.0 (если нужен дизайн)
- Плагин Silverlight 3.0 для браузера
Приложение Silverlight в портале SharePoint находится:
- Внутри веб-части (Web-part), которую можно назвать SilverPart
- ASP.NET страницы узла
- Пользовательские типы полей списков
- Навигационные элементы управления
Обмен данными между приложением Silverlight и порталом Office SharePoint Server можно осуществлять с помощью:
- Веб-сервисов
- WCF - Windows Communication Foundation
- Скрытых полей HTML (hidden fields)
- Свойства initParams
- Параметры элементов управления Silverlight конфигурируются через свойства веб-части
Когда могут использоваться приложения Silverlight в портале SharePoint:
- Сложные (может быть интерактивные) представления данных в виде графиков, многотабличных отчетов и т.д.
- Красивое отображение медиа данных из библиотеки SharePoint (см. раздел 0 Smooth Streaming и Expression Encoder)
- Нестандартная навигация
- Перенос нагрузки на клиента
- Асинхронные операции
Создание веб-части Silverlight
Создается проект пор шаблону Visual C# Class Library и добавляется класс BasicSilverLightWebPart.
using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Serialization; using System.Text; using System.IO; using System.Globalization; namespace SilverLightWebParts { [DefaultProperty("Text"), ToolboxData("<{0}:BasicSilverLightWebPart runat=server></{0}:BasicSLWebPart>"), XmlRoot(Namespace = "http://SilverLightWebParts") ] public class BasicSilverLightWebPart : WebPart { //Constructor public BasicSilverLightWebPart() { } } }Листинг 6.7.
В класс добавляются переменные:
#region Private Variables private string _JSPath = ""; private const string defaultText = ""; private string text = defaultText; private string _SLCtlHeight = "100%"; private string _SLCtlWidth = "100%"; private string _MainCtlJS = "Default_html"; private string _XAMLPageName = "Page"; #endregionЛистинг 6.8.
В класс добавляются свойства, которые устанавливают путь к файлам *.js и *.xaml. Можно добавить собственные свойства для улучшения функциональности
#region Properties [Browsable(true),Personalizable(), WebBrowsable, Category("Custom Settings"), DefaultValue(defaultText), Description("Text Property")] public string Text { get { return text; } set { text = value; } } [Browsable(true),Personalizable(), WebBrowsable, Category("Custom Settings"), DefaultValue("100%"), Description("Silverlight Control Width")] public string SLControlWidth { get { return _SLCtlWidth; } set { _SLCtlWidth = value; } } [Browsable(true),Personalizable(), WebBrowsable, Category("Custom Settings"), DefaultValue("100%"), Description("Silverlight Control Height")] public string SLControlHeight { get { return _SLCtlHeight; } set { _SLCtlHeight = value; } } [Browsable(true),Personalizable(), WebBrowsable, Category("Custom Settings"), DefaultValue(""), Description("Javascript file path")] public string JSPath { get { return _JSPath; } set { _JSPath = value; } } [Browsable(true),Personalizable(), WebBrowsable, Category("Custom Settings"), DefaultValue(""), Description("Main JS file Name")] public string MainCtlJS { get { return _MainCtlJS; } set { _MainCtlJS = value; } } [Browsable(true),Personalizable(), WebBrowsable, Category("Custom Settings"), DefaultValue("Page"), Description("Xaml FileName")] public string XAMLPageName { get { return _XAMLPageName; } set { _XAMLPageName = value; } } #endregionЛистинг 6.9.
Регистрируются 3 файла со скриптами Jscript и JavaScript. Это стандартные скрипты любого приложения Silverlight:
- silverlight.js. Скрипт обнаруживает установлен ли плагин Silverlight в браузер. Если нет, то скрипт покажет иконку-ссылку на странцу, с которой можно его установить.
- Default_html.js. Скрипт содержит функцию createSilverlight
- Page.xaml.js. Содержит слушателей событий.
protected override void OnPreRender(EventArgs e) { String JSString; // Register the webpart specfic script (Each different type of webpart needs its own main, multiple instances of the same webpart on a page reference the same script JSString = "<script type=\"text/javascript\" src=\"" + _JSPath + _MainCtlJS + ".js\"></script>\n"; if (!Page.ClientScript.IsClientScriptBlockRegistered("SilverlightWebPartScript")) Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "SilverlightDefaultScript", JSString); // Register the general scripts (Two web parts can use this same script blocks as they are generic) JSString = "<script type=\"text/javascript\" src=\"" + _JSPath + "Silverlight.js\"></script>\n"; JSString += "<script type=\"text/javascript\" src=\"" + _JSPath + "Page.xaml.js\"></script>\n"; if (!Page.ClientScript.IsClientScriptBlockRegistered("GeneralSilverlightScripts")) Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "GeneralSilverlightScripts", JSString); }Листинг 6.10.
Добавляется код, который генерирует таг <div>, где объект Silverlight будет вставлен в веб-часть
protected override void RenderContents(HtmlTextWriter writer) { EnsureChildControls(); HtmlTextWriter textWriter = new HtmlTextWriter(new StringWriter(CultureInfo.InvariantCulture)); try { string width, height; width = "400px"; height = "300px"; if (this.SLControlWidth.Length > 0) width = _SLCtlWidth; if (this.SLControlHeight.Length > 0) height = _SLCtlHeight; textWriter.WriteLine("<TABLE class='ms-summarycustombody' cellpadding='0' cellspacing='0' border='0'>"); textWriter.WriteLine("<tr><td width='95%'>"); textWriter.WriteLine("<div id='SilverlightControlHost" + this.ClientID + "' Class=''>"); textWriter.WriteLine("<script type=\"text/javascript\"> "); textWriter.WriteLine("var localScene=new SilverlightTest1.Page();"); textWriter.WriteLine("createSilverlight('SilverlightControlHost" + this.ClientID + "', '" + _XAMLPageName + "', 'SilverlightControl" + this.ClientID + "','" + width + "','" + height + "', localScene); "); textWriter.WriteLine("</script></div>"); textWriter.WriteLine("</td></tr></TABLE>"); } catch { textWriter = new HtmlTextWriter(new StringWriter(CultureInfo.InvariantCulture)); textWriter.WriteLine("<TABLE class='ms-summarycustombody' cellpadding='0' cellspacing='0' border='0'>"); textWriter.WriteLine("<TR><TD>There was an error creating this web part</TD></TR>"); textWriter.WriteLine("</TABLE>"); } writer.Write(textWriter.InnerWriter.ToString()); }Листинг 6.11.
Создается файл Default_html.js file и в него копируется код модифицированной функции createSilverlight.
function createSilverlight(controlHost, xamlSource, controlName, controlWidth, controlHeight) { var SLObj = new SilverlightTest1.Page(); Silverlight.createObjectEx( { source: xamlSource, parentElement: document.getElementById(controlHost), id: controlName, properties: { width: controlWidth, height: controlHeight, version: "1.0" }, events: { onLoad: Silverlight.createDelegate(SLObj, SLObj.handleLoad) } }); } if (!window.Silverlight) window.Silverlight = {}; Silverlight.createDelegate = function(instance, method) { return function() { return method.apply(instance, arguments); }Листинг 6.12.
Создание XAML
Создается Page.xaml файл:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480" Background="White" x:Name="Page" > <TextBlock Width="247" Height="72" Canvas.Left="197" Canvas.Top="121" Text="This is great" TextWrapping="Wrap"/> </Canvas>
Развертывание веб-части Silverlight на Office SharePoint Server
Развертывание веб-части Silverlight на Office SharePoint Server 2007 выполняется в следующей последовательности:
- Устанавливается последняя версия плагина Silverlight. Если плагина нет, отображается ссылка на страницу установки
- Копируется сборка *.dll в каталог _app_bin приложения SharePoint ( C:\Inetpub\wwwroot\wss\VirtualDirectories\80\_app_bin ). Файл можно установить в global assembly cache (GAC)
- Копируются файлы default_html.js, Page.xaml, Page.xaml.js и SilverLight.js в корневую директорию. Укажите этот же путь в свойствах JSPath веб-части
- Добавить строку в web.config файл
<SafeControl Assembly="SilverLightWebPart2005" Namespace="SilverLightWebParts" TypeName="*" Safe="True" />
- Зайти на галерею веб-частей и добавить веб-часть BasicSilverLightWebPart в список.
- Зайти на сайт SharePoint и добавить на страницу созданную веб-часть
- Убедиться, что в строке custom properties указан полный либо относительный путь к файлу Page.xaml, например /Page.xaml.
Файлы Page.xaml.js и Default_html.js
Файлы Page.xaml.js и Default_html.js должны содержать следующий код.
Page.xaml.js if (!window.SilverlightTest1) window.SilverlightTest1 = {}; SilverlightTest1.Page = function() { } SilverlightTest1.Page.prototype = { handleLoad: function(control, userContext, rootElement) { this.control = control; // Sample event hookup: rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown)); }, // Sample event handler handleMouseDown: function(sender, eventArgs) { // The following line of code shows how to find an element by name and call a method on it. // this.control.content.findName("Timeline1").Begin(); } } Default_html_js function createSilverlight() { var scene = new SilverlightTest1.Page(); Silverlight.createObjectEx({ source: "Page.xaml", parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: { width: "100%", height: "100%", version: "1.0" }, events: { onLoad: Silverlight.createDelegate(scene, scene.handleLoad) } }); } function createSilverlight(controlHost, xamlSource, controlName, controlWidth, controlHeight) { var SLObj = new SilverlightTest1.Page(); Silverlight.createObjectEx({ source: xamlSource, parentElement: document.getElementById(controlHost), id: controlName, properties: { width: controlWidth, height: controlHeight, version: "1.0" }, events: { onLoad: Silverlight.createDelegate(SLObj, SLObj.handleLoad) } }); } if (!window.Silverlight) window.Silverlight = {}; Silverlight.createDelegate = function(instance, method) { return function() { return method.apply(instance, arguments); } }Листинг 6.13.
Заключение
С помощью веб-частей Silverlight можно создавать очень сложные веб-части и публиковать их на портале Office SharePoint Server.