Porubov.home

В ролике показано как получить информацию из базы данных при помощи WCF и LinqToSql классов и привязать к DataGrid (7 минут).

Перехожу на видео-уроки, ибо так намного нагляднее и интереснее ;)

Это мой первый вебкаст, так что пишите что нравится и не нравится, в следующих роликах постараюсь учесть все пожелания :)

Хотите сохранить понравившийся ролик у себя на компе? Нет проблем!

1)Для начала ставим себе на Firefox  плагин Firebug.

2)Заходим на сайт с видеороликом.

3)Открываем окно firebug'а, затем вкладку All -> Net и ищем WMV файл.

4)Нажимаем на него правой кнопкой мыши и выбираем Copy Location.

5)Вставляем ссылку из буфера в адресную строку, переходим по ней и вуаля! файлик наш 8) Видео можно также скачать любым менеджером закачек.

Silverlight Streaming – что же это такое? Это 4Gb места под ваши SL-приложения! Вы больше не зависите от хостинга и вам не нужно выделять дополнительное место для видео на своём сайте! Плюс пользоваться этим очень просто!

Итак, идём на silverlight.live.com, для входа нужен LiveID, и если вы ещё не регистрировались, то надо бы уже догадаться и подрегиться ;) В общем, после входа в свой аккаунт и принятия соглашения об использовании вам выдадут Account ID, который будет использоваться во всех ссылках на ваши проекты. Далее жмём “Manage Applications” и “Upload a Silverlight Application”. В верхнем поле вводим название приложения, а в нижнем выбираем путь к зазипованному проекту. Об этом поподробней.

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

• ttf – application/octet-stream
• js - Application/x-javascript
• dll – application/x-msdownload
• xaml – application/xaml+xml
• xml – application/xml
• zip – application/x-zip-compressed
• wma – audio/x-ms-wma
• wmv – audio/x-ms-wmv
• mp3 – audio/mpeg
• gif – image/gif
• jpeg – image/jpeg
• png – image/png
• txt – text/plain
• sdx – text/plain

Если архив содержит что-то другое, то он не пройдет. Это сделано для очистки ненужного мусора на хостинге. Итак, берем любой проект, копируем в другую папку и чистим от ненужных файлов – удаляйте все, без чего программа сможет нормально работать.

Далее необходимо создать XLM-файл под названием manifest.xml. Он должен содержать описание вашего приложения для робота. Обычно он содержит:

<SilverlightApp>
   <source>Название главного Xaml-файла</source>
   <version>1.0 или 1.1 Версия (либо пустой)</version>
   <width>Ширина в пикселях или процентах</width>
   <height>Высота в пикселях или процентах</height>
   <jsOrder>
      <js>JS-файл, загружаемый первым</js>
      <js>Вторым</js>
      <js>...И так далее…</js>
   </jsOrder>
</SilverlightApp>

Этого достаточно для любого приложения. О дополнительных опциях читаем тут.

Структура файлов тоже должна быть соответствующая – каждый тип файлов, кроме xaml, сохраняем в отдельной папке:

• JavaScript – в js/[cool.js]
• Картинки – в images/[picture.jpg]
• Dll – в ClientBin/[mega.dll]

В разметке также ссылаемся на относительный пути, например, картинка sample.jpg будет доступна так: <Image Source="images/sample.jpg"/>.

Стоит отметить, что видео-файл не должен превышать 22Mb, такие уж ограничения. Выход – разбить видео-файл на несколько частей и по-очереди проигрывать.

После совершения всех вышеописанных действий, загружаем архив на сервер и получаем реквизиты доступа. Например, я получил следующее:

1) Это можно вставить в любое место страницы: <script type="text/javascript" src="http://agappdom.net/h/silverlight.js"></script>
<script type="text/javascript" src="CreateSilverlight.js"></script>

2)Див копируем в то место, где должно находиться приложение на странице: <div id="Wrapper_CoolAnim" style="width:1280px; height:1024px; overflow:hidden;"></div>
<script type="text/javascript">
var Wrapper_CoolAnim = document.getElementById("Wrapper_CoolAnim");
CreateSilverlight();
</script>

3)Создаем файл CreateSilverlight.js и копируем туда: function CreateSilverlight(){
  Silverlight.createHostedObjectEx({
    source: "streaming:/36889/CoolAnim",parentElement: Wrapper_CoolAnim});
}

Грузим в браузере страницу и наслаждаемся результатом! Вы можете легко обновлять приложения с помощью кнопки “Upload Updated Application”.

Любые вопросы пишем в комменты, хотя, я думаю, остаться их не должно 8)

На форуме Silverlight.ru появился вопрос о повторении видео-ролика бесконечно или необходимое количество раз. Сделать это очень просто, необходимо назначить слушателя события окончания видео.

Есть уйма способов решения. Приведу конкретный пример. Для начала создаем пустой JavaScript файл, в  который добавляем код:

//Количество повторений

var countRepeat = 2;

//Ссылка на слушателя события

var eventListener = null;

function MediaElement_Loaded(sender, e) {

    //Добавим слушателя события MediaEnded,

    //вызывается по окончании ролика

    eventListener = sender.addEventListener("MediaEnded",

      replayVideo);

}

function replayVideo(sender, e) {

    //Останавливаем видео, т.к. иначе реплей не начинается

    sender.stop(); 

    if(countRepeat < 0) {

        sender.play();

    } else if(countRepeat > 0) {

        //Начинаем проигрывание сначала

        sender.play();

        //Вычитаем счётчик

        countRepeat--;

    } else {

        //Удаляем слушателя

        sender.removeEventListener("MediaEnded",

          eventListener);

    }

}

Затем необходимо создать MediaElement и добавить атрибуты x:Name=”любое имя” и Loaded=”MediaElement_Loaded”. Здесь задается функция-обработчик, которая вызывается после загрузки медиа-элемента. Примерно так должен выглядеть ваш 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"

    >

    <MediaElement Loaded="MediaElement_Loaded"

                x:Name="myVideo"

                Width="330"

                Height="227"

                Canvas.Left="62"

                Canvas.Top="78"

                Volume="1"

                Stretch="Fill"

                Source="Butterfly.wmv"/>

</Canvas>

Если хотите динамически создать реплей видео, то можно использовать следующую функцию:

//Конструктор принимает ссылку на 

//объект MediaElement и количество повторений

function repeatVideo(mediaElementLink, numberRepeat) {

    countRepeat = numberRepeat;

    eventListener = 

    mediaElementLink.addEventListener("MediaEnded",

     replayVideo);

};

Как видите она использует предыдущий код, и в ней можно указать количество повторов. Если не хочется писать все это заново, то ловим исходник.

Слыхали про Dreamscene? Это новая фича от microsoft, позволяющая пользователям Windows Vista устанавливать видео-ролики в качестве обоев рабочего стола. Но к сожалению доступна она только пользователям Windows Vista Ultimate ;(. Не отчаиваемся, сейчас сделаем себе обои не хуже на любимом Silverlight.

Для начала создаем новый проект и добавляем в XAML-файл MediaElement с атрибутами:

• x:Name="MyVideo" - понадобиться для VideoBrush - видео-кисти, которую будем использовать в качестве фона страницы.
• Width=0, Height=0 - для сокрытия MediaElement, чтобы не получилось две копии видео на экране.
• Source="Ваше_видео.wmv" - путь к вашему ролику.

Затем назначаем фоном страницы элемент VideoBrush с атрибутом SourceName="MyVideo" - имя, назначенное медиа-элементу. Получается такой код:

   1:  <Canvas

   2:      xmlns="http://schemas.microsoft.com/client/2007"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      Width="1280" Height="994"

   5:      x:Name="Page"

   6:      >

   7:    <Canvas.Background>

   8:      <VideoBrush SourceName="MyVideo"

   9:                  Stretch="Fill"/>

  10:    </Canvas.Background>

  11:      <MediaElement x:Name="MyVideo"

  12:                  Width="0"

  13:                  Height="0"

  14:                  Source="Bear.wmv"

  15:                  Volume="1"/>

  16:  </Canvas>

Размеры canvas'a задаем так: ширину устанавливаем равной разрешению по горизонтали (у меня стоит 1280x1024, поэтому я задал 1280), а высоту - ваше разрешение по вертикали минус размеры панели пуск (приблизительно 40 пикселей).

Далее необходимо убрать отступы непосредственно в xhtml-странице. Задаем margin и padding 0px у элементов body и вашего div'a, в котором помещается silverlight-плагин. Вот как примерно должен выглядеть ваш Default.html файл:

   1:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   2:   "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

   3:  <html xmlns="http://www.w3.org/1999/xhtml">

   4:  <head>

   5:      <title>Videowallpaper</title>

   6:   

   7:      <script type="text/javascript"

   8:       src="Silverlight.js"></script>

   9:      <script type="text/javascript"

  10:       src="Default_html.js"></script>

  11:      <script type="text/javascript"

  12:       src="Page.xaml.js"></script>

  13:      <style type="text/css">

  14:          .silverlightHost {

  15:              height: 994px;

  16:              width: 1280px;

  17:              margin:0px;

  18:              padding:0px;

  19:          }

  20:          body 

  21:          {

  22:              margin:0px;

  23:              padding:0px;

  24:          }

  25:      </style>

  26:  </head>

  27:   

  28:  <body>

  29:      <div id="SilverlightControlHost"

  30:           class="silverlightHost">

  31:          <script type="text/javascript">

  32:              createSilverlight();

  33:          </script>

  34:      </div>

  35:  </body>

  36:  </html>

После запуска проекта должно получиться следующее (конечно видео будет ваше):

Наши видео обои готовы!

Перейдем к рабочему столу. В Windows есть функция установки на рабочий стол веб-содержимого, в XP щёлкаем правой кнопкой крысы на рабочем столе -> рабочий стол -> Настройка рабочего стола -> Вкладка "Веб" -> Создать -> Обзор -> Выбираем файл Default.html из папки с созданными обоями -> Ok. Галочку "Закрепить элементы рабочего стола убираем. Щёлкаем Ok -> Применить. На столе должно появиться окно с видео:

Жмём кнопку, показанную на предыдущем скриншоте и наслаждаемся видео-обоями! Как видите с помощью Silverlight небольшими усилиями мы построили довольно эффектную фичу, которой не стыдно похвастаться перед друзьями ;)

Что можно добавить:

• Автоматическое проигрывание видео сначала после того как оно завершится.
• Добавить кнопки управления.
• Загружать автоматически последние видео из сети.
• и т.п.

Интересно, что весь проект занимает всего 10кб (конечно без видео)! Качаем исходники - VideoWallpaper Source.

Не менее интересно было бы узнать сколько будет весить такое чудо на AIR или Flash/Flex, поэтому, если не трудно, сделайте аналоги и отпишитесь пожалуйста в комментах.