Использование Silverlight и RSS для разработки панели анонсов (hero bar) в приложениях ASP.NET (исходники)

Источник: GOT DOT NET

Лоранс Морони (Laurence Moroney)

Мы все видели панели анонсов на наших любимых веб-сайтах. Это те самые баннеры наверху страницы, которые показывают новый контент и обеспечивают прямую ссылку на него. Знаете ли вы, что создать такую панель с помощью Silverlight несложно? А знаете ли вы о том, что содержимым этой панели легко управлять с помощью RSS? В этой статье вы узнаете, как создать простую панель анонсов, которая будет легко настраиваться и будет воспроизводиться простым редактированием документа RSS. Таким образом, вы можете разработать панель анонсов, которая будет отображать новые записи в вашем блоге, если он поддерживает потоки RSS. И все что необходимо для обновления панели анонсов - это создание новой записи в блоге!

Рис. 1 показывает панель анонсов в действии.

Рис. 1. Просмотр панели анонсов с помощью Internet Explorer

В данной статье описаны следующие шаги, которые необходимо сделать для создания панели анонсов:

Создание шаблона XAML, который будет содержать один элемент и все необходимые ресурсы, такие как анимация (Создание шаблона XAML).
Создание приложения ASP.NET, которое будет читать поток RSS и создавать XAML, используя шаблон из шага 1 (Создание приложения ASP.NET для генерации XAML на основе документа RSS).
Создание второго приложения ASP.NET, которое будет читать файл RSS и генерировать код JavaScript, состоящий из ссылок URL (Управление ссылками URL).
Создание страницы 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>
<Imаge x:Name="img0" Width="344" Height="136"
       Canvas.Left="8" Canvas.Top="8" Source=""/>
<TextBlock x:Name="hdln0" Width="576" Height="40"
           Canvas.Left="376" Canvas.Top="8"
           FontFamily="Tahoma" FontSize="24"
           FontWeight="Normal"
           Foreground="#FFFFFFFF"
           Text="Headline Text 1"
           TextWrapping="Wrap"/>
<TextBlock x:Name="detl0" Width="576" Height="96"
           Canvas.Left="376" Canvas.Top="48"
           FontFamily="Tahoma" FontSize="14"
           FontWeight="Normal"
           Foreground="#FFFFFFFF"
           Text="Text Details 1 Describing the
                 stuff inside the hero bar.
                 Clicking anywhere on the bar
                 should take us to the bar
                 details page."
           TextWrapping="Wrap"/></Canvas>

Конечно, вы можете разработать собственный дизайн 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 определяется узел <item>, который может содержать заголовок, ссылку, описание и элемент ресурса, например графику или видео внутри тэга <enclosure>. В этом примере используется изображение, но в принципе нет причин для того, чтобы не использовать видео-панель анонсов и указывать видеоресурсы внутри тэга <enclosure>, при этом использовать <MediaElement> вместо <Image> внутри 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="http://channel9.msdn.com/playground/wpfe/images/rvbplayer.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="http://channel9.msdn.com/playground/wpfe/images/grandpiano.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="http://channel9.msdn.com/playground/wpfe/images/wpfepad.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()\n");
for (int lp = 0; lp < xnItems.Count; lp++)
{
 string strItemLink =
  xnItems[lp].SelectSingleNode("link").InnerText;
 Response.Write("urls[" + lp + "]='" +
                          strItemLink + "';\n");
}
А вот пример массива 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 происходит внутри элемента <script>. В этом случае при вызове страницы GenerateJS.aspx она сгенерирует массив JavaScript, описанный в предыдущей секции. XAML-элемент <Canvas> указывает, что DoClick должна реагировать на нажатие левой кнопки мыши, и сама функция реализована здесь. В ней используется новая переменная n. В эту переменную помещается значение sender, заменяя строку cnvItem на пустую строку.

В sender содержится имя элемента canvas, в котором произошло событие, например cnvItem0, cnvItem1. После замены cnvItem на пустую строку, в переменную n помещается 0 или 1 (для приведенных выше примеров). Далее для перехода по одной из ссылок определенной в массиве urls (сгенерированном страницей GenerateJS.aspx) мы используем вызов Window.Open(urls[n]).

Наконец мы создаем элемент управления Silverlight, вызвав функцию createSilverlight(). Она находится внутри JavaScript-библиотеки createSilverlight.js, которая включается в страницу в одной из начальных строк. Ниже приведен код, необходимый для создания экземпляра элемента управления Silverlight:

function createSilverlight()
{
 Sys.Silverlight.createObject(
       "GenerateXaml.aspx",
       slControlHost,
       "slControl1",
       {width:'960', height:'150',
        inplaceInstallPrompt:true,
        background:'black', isWindowless:'true',
        framerate:'24', version:'0.8' },
       {onError:null, onLoad:null},
       null);
}

Первый параметр - это страница GenerateXaml.aspx, которая генерирует XAML, о чем мы узнали ранее. После этого Silverlight отображает сгенерированный XAML и на вашей странице появляется панель анонсов, которую вы можете легко модернизировать путем правки XAML и не менее легко обновлять с помощью RSS. Здесь показано, как органично вписывается Silverlight в экосистему разработки приложений Microsoft. Используйте RSS, ASP.NET, XAML и Silverlight для создания новых приложений!