Використання Silverlight і RSS для розробки панелі анонсів (hero bar) в додатках ASP.NET (исходники), Різне, Програмування, статті

Ми всі бачили панелі анонсів на наших улюблених веб-сайтах. Це ті самі банери вгорі сторінки, які показують новий контент і забезпечують пряме посилання на нього. Чи знаєте ви, що створити таку панель за допомогою Silverlight нескладно? А чи знаєте ви про те, що вмістом цієї панелі легко керувати за допомогою RSS? У цій статті ви дізнаєтеся, як створити просту панель анонсів, яка буде легко налаштовуватися і буде відтворюватися простим редагуванням документа RSS. Таким чином, ви можете розробити панель анонсів, яка буде відображати нові записи у вашому блозі, якщо він підтримує потоки RSS. І все що необхідно для поновлення панелі анонсів – це створення нового запису в блозі!

Рис. 1 показує панель анонсів в дії.

Рис. 1. Перегляд панелі анонсів за допомогою Internet Explorer
Рис. 1. Перегляд панелі анонсів за допомогою Internet Explorer


У даній статті описані наступні кроки, які необхідно зробити для створення панелі анонсів:



  1. Створення шаблону XAML, який буде містити один елемент і всі необхідні ресурси, такі як анімація (Створення шаблону XAML).
  2. Створення програми ASP.NET, яке буде читати потік RSS і створювати XAML, використовуючи шаблон з кроку 1 (Створення програми ASP.NET для генерації XAML на основі документа RSS).
  3. Створення другого додатка ASP.NET, яке буде читати файл RSS і генерувати код JavaScript, що складається з посилань URL (Управління посиланнями URL).
  4. Створення сторінки HTML, яка буде містити елемент управління Silverlight, узятий з програми ASP.NET, створеного на кроці 2 і з JavaScript-генератора, створеного на кроці 3 (Відображення панелі анонсів в Silverlight).

Створення шаблону XAML


Панель анонсів, показана на рис. 1, це панель розміром 960 на 150 пікселів, що містить одне зображення, заголовний елемент зі збільшеним шрифтом та елементи опису зі шрифтом поменше. У XAML все це необхідно зібрати усередині canvas, як показано нижче:





<canvas Width=”960″ Height=”150″
x:Name=”cnvItem0″ Opacity=”0″
MouseLeftButtonDown=”javascript:DoClick”>
<canvas.Background>
<LinearGradientBrush EndPoint=”1,0.5″
StartPoint=”0,0.5″>
<GradientStop Color=”#FF310909″ Offset=”0″/>
<GradientStop Color=”#FFAE0000″ Offset=”1″/>
</LinearGradientBrush>
</Canvas.Background>

Звичайно, ви можете розробити власний дизайн XAML, але звертайте пильну увагу на назви елементів. Ці назви використовуються ASP.NET для адресації до відповідних елементів за допомогою XPath. Крім всього цього вам напевно захочеться анімувати переходи від банера до банеру. У наведеному нижче прикладі анімація використовується для плавного переходу з прозорості від поточного елемента до наступного:





<Storyboard x:Name=”FadeIn”
RepeatBehavior=”Forever”>
<DoubleAnimationUsingKeyFrames x:Name=”Step0″
Storyboard.TargetName=”cnvItem0″
Storyboard.TargetProperty=
“(UIElement.Opacity)” >
<SplineDoubleKeyFrame KeyTime=”00:00:00″
Value=”0″/>
<SplineDoubleKeyFrame KeyTime=”00:00:05″
Value=”1″/>
<SplineDoubleKeyFrame KeyTime=”00:00:06″
Value=”0″/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

У цьому прикладі використовується елемент DoubleAnimationUsingKeyFrames, який плавно змінює прозорість елемента від 0 (невидимий) до 1 (повна видимість) за п’ять секунд і з 1 до 0 за наступну секунду. Це буде використано як шаблон для кожної анімації. Наприклад, якщо на вашій панелі анонсів розміщено п’ять елементів, то для кожного з них доведеться заводити таку зміну прозоростей (розкадрування Storyboard).

Використання RSS


Специфікацією RSS визначається вузол , який може містити заголовок, посилання, опис і елемент ресурсу, наприклад графіком або відео всередині тега . У цьому прикладі використовується зображення, але в принципі немає причин для того, щоб не використовувати відео-панель анонсів і вказувати відеоресурси всередині тега , при цьому використовувати замість всередині XAML. Нижче наведено приклад документа RSS, який містить посилання на приклади Silverlight на ресурсі Channel9. Ці посилання ви можете замінити на будь-які інші.





<?xml version=”1.0″ encoding=”ISO-8859-1″ ?>
<rss version=”2.0″>
<channel><title>W3Schools Home Page</title>
<link>http://www.w3schools.com</link>
<description>
Free web building tutorials
</description>
<item>
<title>
Red v Blue, starring Scott Guthrie
</title>
<link>http://channel9.msdn.com/playground/wpfe/rvbplayer/</link>
<description>
ScottGu in Red v Blue. Can an executive shoot a gun? Can he do it again?
</description>
<enclosure url=”./060920111200003904.jpg” length=”10659″ type=”image/jpeg” />
</item>
<item>
<title>
Updated Grand Piano showing Keyboard input!
</title>
<link>http://channel9.msdn.com/playground/wpfe/grandpiano/</link>
<description>
Your chance to be the concert pianist you always wanted to be…
</description>
<enclosure url=”./060920111200003905.jpg” length=”6809″ type=”image/jpeg” />
</item>
<item>
<title>An online WPFE Pad</title>
<link>http://channel9.msdn.com/playground/wpfe/wpfepad/</link>
<description>
A great little online notepad that allows you to write and test your XAML
</description>
<enclosure url=”./060920111200003906.jpg” length=”10938″ type=”image/jpeg” />
</item>
</channel>
</rss>

Якщо ви використовуєте RSS, згенерована, наприклад, вашим блогом, переконайтеся, що підтримуються зазначені вище вузли, якщо це не так, то доведеться доробляти код ASP.NET для того, щоб обробляти структуру документа RSS.

Створення програми ASP.NET для генерації XAML на основі документа RSS


Перше що необхідно зробити – це перевизначити HTML-висновок, що отримується зі сторінки ASPX, тому що вам необхідно, щоб в такому висновку виходив код XAML. Найпростіший спосіб – це стерти весь код розмітки окрім першого рядка зі сторінки ASPX. Наприклад, якщо ви назвали свою сторінку “GenerateXaml.aspx”, в ній повинна міститися рядок, наведена нижче:





<%@ Page Language=”C#” AutoEventWireup=”true”
CodeFile=”GenerateXaml.aspx.cs”
Inherits=”_Default” %>

Далі вам напевно захочеться використовувати код, подібний нижчеподаному в обробнику події Page_Load:





protected void
Page_Load(object sender, EventArgs e)
{ String strRSSDoc = Request.Params[“feed”];
if (strRSSDoc == null)
strRSSDoc = Server.MapPath(“rssfeed.xml”);
WebClient rssClient = new WebClient();
Stream data = rssClient.OpenRead(strRSSDoc);
StreamReader reader = new StreamReader(data);
String sBuffer = reader.ReadToEnd();
XmlDocument xmlDoc = new XmlDocument();
xmlDoc.LoadXml(sBuffer);
XmlDocument xmlXaml = GenerateXaml(xmlDoc);
Response.ContentType = “text/xml”;
Response.Write(xmlXaml.OuterXml);
}

Так як цей код обробляє параметр feed, то вказати URI документа RSS ви можете, виконавши виклик http://server/GenerateXaml.aspx?feed=URI. Якщо ж ви не вкажете значення цього параметра, то читання буде вироблятися з файлу rssfeed.xml, розташованого в тій же директорії, що і сторінка ASPX. Далі виробляється читання потоку RSS в документ XAML, і проводиться виклик допоміжної функції GenerateXaml для створення нового документа XmlDocument, названого xmlXaml. Далі вміст документа xmlXaml виводиться в відповідь потік.

Вся робота відбувається всередині допоміжної функції GenerateXaml. Це велика функція, і ми розберемо її по кроках. Спочатку вам необхідно зробити наступне:





XmlDocument xmlXaml = new XmlDocument();
xmlXaml.Load(Server.MapPath(“template.xml”)); / / Установка просторів імен. / / Це необхідно для звернень XPath до документа / / XML, який буде містити / / Декілька просторів імен. / / Важливо: простір імен, / / Використовується за умовчанням, / / Не має префікса, але для того щоб / / Запити XPath виконувалися коректно, / / Префікс необхідний, і ми будемо використовувати “d” / / (Що відповідає default)
NameTable myn = new NameTable();
XmlNamespaceManager mng =
new XmlNamespaceManager(new NameTable());
mng.AddNamespace(“d”,
“http://schemas.microsoft.com/
winfx/2006/xaml/presentation”);
mng.AddNamespace(“x”,
“http://schemas.microsoft.com/
winfx/2006/xaml”);

Коли ви використовуєте XAML в ASP.NET спільно з інтерфейсами XML API, вам необхідно використовувати XmlNameSpaceManager для роботи з різними просторами імен. Деякі елементи Silverlight використовують простір імен за замовчуванням, у той час як інші використовують простору імен з префіксом “x:” (наприклад “x: Name”). Такий префікс необхідно вказати менеджеру просторів імен; коли використовуєте простір імен за замовчуванням, ставте префікс “d”. Наприклад, коли шукаєте вузли в просторі імен “Image”, який є простором імен за замовчуванням, вам необхідно звертатися до нього як “d: Image”. Далі ви отримуєте список вузлів з документа RSS. Для цього ви використовуєте інтерфейс SelectNodes API для того, щоб отримати список елементів NodeList.





/ / Елементи панелі анонсів зберігаються в елементі RSS “item”. / / Отримуємо список елементів.
XmlNodeList xnItems =
rssFeed.SelectNodes(“//item”); Тепер необхідно пройти по всьому списку і створити копії XAML canvas для кожного вузла.
for (int lp = 0; lp < xnItems.Count; lp++)
{ if (lp == 0)
{ itemCanvasTemplate =
xmlXaml.SelectSingleNode(
“//d:Canvas[@x:Name=”cnvItem0″]”,
mng);
}
else
{
XmlNode xNodeToCopy = xmlXaml.SelectSingleNode(
“//d:Canvas[@x:Name=”cnvItem0″]”,
mng);
itemCanvasTemplate = xNodeToCopy.Clone();
}

Тепер, коли є вузол, необхідно відредагувати деталі, помістити зображення, взяти заголовок з елемента RSS:





/ / Тепер, коли у нас є потрібний вузол, / / Ми налаштуємо його відповідно з даними, / / Отриманими з RSS-елемента item. / / Спочатку вважаємо в змінні / / Значення елементів RSS.
string strItemTitle =
xnItems[lp].SelectSingleNode(“title”).InnerText;
string strItemLink =
xnItems[lp].SelectSingleNode(“link”).InnerText;
string strItemDescription =
xnItems[lp].SelectSingleNode(“description”)
.InnerText;
string strItemPicture =
xnItems[lp].SelectSingleNode(“enclosure”)
.Attributes[“url”].InnerText; / / Після чого ми відредагуємо вузол / / Відповідно до отриманих значень. / / 1. Редагуємо canvas, / / Надавши елементу унікальний ID
string strCanvasName = “cnvItem” + lp;
itemCanvasTemplate.Attributes[“x:Name”].Value
= strCanvasName; / / 2. Редагуємо властивості Name і Source / / Елемента Image
XmlNode xNode = itemCanvasTemplate.SelectSingleNode(
“//d:Image[@x:Name=”img0″]”, mng);
string strImageName = “img” + lp;
xNode.Attributes[“x:Name”].Value = strImageName;
xNode.Attributes[“Source”].Value=strItemPicture; / / 3. Редагуємо ім’я та вміст / / Заголовного елемента Textblock
xNode = itemCanvasTemplate.SelectSingleNode(
“//d:TextBlock[@x:Name=”hdln0″]”, mng);
string strHeadlineName = “hdln” + lp;
xNode.Attributes[“x:Name”].Value=strHeadlineName;
xNode.Attributes[“Text”].Value = strItemTitle; / / 4. Редагуємо ім’я та вміст / / Елемента Textblock, що містить описи
xNode = itemCanvasTemplate.SelectSingleNode(
“//d:TextBlock[@x:Name=”detl0″]”, mng);
string strDetailsName = “detl” + lp;
xNode.Attributes[“x:Name”].Value=strDetailsName;
xNode.Attributes[“Text”].Value =
strItemDescription;
xmlXaml.DocumentElement.AppendChild(
itemCanvasTemplate);

Управління посиланнями URL


Однією невеликою проблемою XAML є те, що визначаються JavaScript-обробники подій сторінки не можна параметризованих. І тому не можна передати індивідуальну посилання URI елемента в панелі анонсів в XAML, як показано нижче:





MouseLeftButtonDown=”javascript:DoClick(MyURI)”

Замість цього вам доведеться викликати власну функцію DoClick і використовувати ідентифікатор елемента canvas, на якому сталася подія. Друга сторінка ASPX буде зчитувати потік RSS і генерувати масив JavaScript. Сторінка, що містить банер Silverlight, може звертатися до масиву, який буде використовуватися в JavaScript-обробниках подій. Нижче наведено код на мові C #, який виводить масив JavaScript:





XmlNodeList xnItems=xmlDoc.SelectNodes(“//item”);
Response.Write(“var urls = new Array()
“);
for (int lp = 0; lp < xnItems.Count; lp++)
{
string strItemLink =
xnItems[lp].SelectSingleNode(“link”).InnerText;
Response.Write(“urls[” + lp + “]=”” +
strItemLink + “”;
“);
} А ось приклад масиву JavaScript, який буде виведений в результаті виконання попереднього прикладу:
var urls = new Array()
urls[0]=”http://channel9.msdn.com/playground/
wpfe/rvbplayer/”;
urls[1]=”http://channel9.msdn.com/playground/
wpfe/grandpiano/”;
urls[2]=”http://channel9.msdn.com/playground/
wpfe/wpfepad/”;

Відображення панелі анонсів в Silverlight


Тепер, коли всі складові частини в зборі, відобразити панель анонсів за допомогою Silverlight стало нескладним завданням. Повний код сторінки HTML, яка реалізує таке відображення, разом з обробниками JavaScript для управління посиланнями URL наведено нижче:

Відзначимо, що звернення до сторінки GenerateJS.aspx відбувається всередині елемента

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Метки: , , , , , ,
Рубрики: Різне

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*