Silverlight в ASP.NET уеб сайт
Въведение
Silverlight е нова технология от Майкрософт предназначена за разработването на RIA. Тя се вгражда във всеки браузър като плъг-ин и е платформено независима. В тази статия ще покажа как се вграждат Silverlight проект в ASP.NET сайт.
Какво е необходимо
Като за начало изтеглете и инсталирайте новата версия на VS 2008 бета 2 от тук. Повече за новостите във Visual Studio 2008 бета 2. За да разработвате Silverlight приложения, също така ви е необходимо и Silverlight Tools Alpha. След като ги инсталирате, опцията за Silverlight проект ще стане активна в VS.
За да виждаме резултата в браузър ни е необходимо Silverlight runtime/plugin 1.1 Alpha
Идеята
Silverlight е базиран на Xaml, което е XML базиран език за UI елементи. С помоща на Xaml е възможно разграничаването на визуалните елементи от програмната част. Това се реализира чрез ‘code-behind’ концепция позната ни от ASP.NET. На всеки Xaml файл съществува C# файл, който съдържа програмната логика за управлението на графичните елементи.
Когато създаваме Silverlight проект използвайки темплейт от VS 2008, някои файлове се генерират автоматично с образователна цел. Xaml файлът е интегриран в примерена HTML страница. В тази статия ще ви покажа как да извадите Xaml от HTML страницата и да го интегрирате в ASP.NET страница.
Проектите
1. Silverlight проекта
Ако сте инсталирали всичко правилно трябва да видите следният екран когато изберете от менюто File -> New Project:
Проекта ще бъде създаден след като натиснете OK. Следните страници са създадени по подразбиране:
- Page.xaml: това е страницата в която описвате UI елементите
- Page.xaml.cs: тук пишете програмната логика. Обикновен C# код
- Silverlight.js: това е javascript файл с който създавате Silverlight контрола в HTML/ASPX страницата за да показвате Xaml съдържанието.
- TestPage.html: HTML страницата която съдържа Silverlight контрола
2. ASP.NET сайтът
Трябва да добавим и асп проектът към общия solution. Add -> New Web Site.
3. Добавяме Silverlight към уеб сайта
Натискаме с десния бутон на прокта на уеб сайта и от падащото меню избираме Add Silverlight Link.
Това беше първата стъпка. Следващата е да разгледаме HTML страницата за да разберем кой код е отговорен за генерирането на Silverlight контрола в testpage.html:
<head>
<title>Silverlight Project Test Page </title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="TestPage.html.js"></script>
</head>
<body>
<div id="SilverlightControlHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>
Както се вижда, контрола е създаден с javascript функция, която се съдържа в Silverlight.js. Това което трябва да направим е да добавим този файл към асп сайта. После създаваме нов javascript файл, който ще съдържа в себе си кода от testpage.html.js
// JScript source code
//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight( xamlPage )
{
Silverlight.createObjectEx({
source: xamlPage,
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "1.1",
enableHtmlAccess: "true"
},
events: {}
});
// Give the keyboard focus to the Silverlight control by default
document.body.onload = function() {
var silverlightControl = document.getElementById('SilverlightControl');
if (silverlightControl)
silverlightControl.focus();
}
}
С малка промяна(добавен параметър) кодът изглежда по следния начин:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Integrating Silverlight in aspx</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="XamlPageCreation.js"></script>
</head>
<body>
<form id="frmMain" runat="server">
<div id="SilverlightControlHost" >
<script type="text/javascript">
createSilverlight( 'Page.xaml' );
</script>
</div>
</form>
</body>
</html>
Какво ще показваме?
Засега имаме работещ ASP.NET/Silverlight пример който не показва нищо. Нека направим TextBlock със съобщение потребителя да избира файлове. При кликване на TextBlock-а се отваря FileBrowse диалог и след селекция на няколко файла, техните имена се показват в TextBlock контрола.
<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="SilverlightSamplePrj.Page;assembly=ClientBin/SilverlightSamplePrj.dll"
Width="400"
Height="400"
Background="#EEEEEE"
>
<TextBlock x:Name="txtFileName"
Canvas.Top="5" Canvas.Left="5"
Foreground="Black"
Text="Click for OpenFileDialog"
MouseLeftButtonDown="OnClick"/>
</Canvas>
Ето и кода в C# файла:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightSamplePrj
{
public partial class Page : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
}
public void OnClick(object o, MouseEventArgs e)
{
txtFileName.Text = "";
string NL = Environment.NewLine;
OpenFileDialog ofDlg = new OpenFileDialog();
ofDlg.EnableMultipleSelection = true;
if (ofDlg.ShowDialog() == DialogResult.OK)
{
foreach (FileDialogFileInfo fdFileInfo in ofDlg.SelectedFiles)
{
txtFileName.Text += fdFileInfo.Name + NL;
}
}
}
}
}
Заключение
Това е достатъчно за начало, очакваме следващите версии на Silverlight където се надяваме да има предефинирани контроли плюс куп други възможности който да утвърдят Silverlight като Технологията за RIA.