Въведение
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.
This time its free e-books. All the headings speak for them selfs and with few words these books are MUST HAVE for every developer. Only few chapters are included in pdf’s as you are encouraged to buy them! Here is the content:
Introducing Microsoft LINQ
Introducing Microsoft ASP.NET AJAX
Introducing Microsoft Silverlight 1.0
AJAX has revolutionized Web user interfaces, and ASP.NET AJAX has made AJAX available to the Visual Studio® users. It comes in three separate downloads: ASP.NET AJAX Extensions (asp.net/ajax/downloads), which provides the core, fully tested set of AJAX functionality; ASP.NET AJAX Futures (asp.net/downloads/futures), which contains experimental features on which the product group wants feedback; and the ASP.NET AJAX Control Toolkit (asp.net/ajax/ajaxcontroltoolkit/samples), which provides a grab bag of AJAX controls as well as an SDK for building controls of your own.
