Статьи

Silverlighting Your PHP: добавление Silverlight только с помощью блокнота

Февраль 17, 2019

Если вы не используете Visual Studio .NET и / или Microsoft Expression Studio, вы можете подумать, что Silverlight ничего не может вам предложить. И, на самом деле, ваши возможности ограничены. Но, как разработчик PHP, вы будете удивлены тем, что можете использовать только правильный синтаксис в нужном месте. Это может занять немного проб и ошибок, но вы можете Silverlight своего PHP-приложения, добавив несколько элегантных наворотов, не взламывая Microsoft IDE.

В этом пошаговом руководстве вы познакомитесь с очень простым приложением Silverlight, которое сочетает в себе PHP с XAML и javascript, а не .NET-код. Это должно дать вам почувствовать потенциал Silverlight. Вы начнете с простого меню PHP, поставляемого в стиле винтажного заголовка. Затем вы создадите приложение Silverlight типа Hello, World с помощью вашего любимого текстового редактора. Как только это сработает, вы соберете их вместе, чтобы сгенерировать немного Silverlight на лету, и закончите с анимацией, чтобы сделать его более интересным.

 

Шаг 1: Классическое меню PHP

Просто чтобы с чем-то поработать, вы создадите искусственно-динамическое меню. В этом пошаговом руководстве вы будете использовать простой массив вместо создания базы данных контента.

Создайте страницу с именем PHPMenu.php: 

<html>
 <head>
  <title>Silverlight PHP Menu</title>
      <style type="text/css">
            .navMenu {
                  height: 300px;
                  width: 400px;
            }
      </style>
 </head>

 <body>
       <p>Just PHP:</p>
      <div id="navMenuPlain" class="navMenu">
      <?

       // This is where you would do a fetch
 $menu=array('Home','Links','About','Contact');

 $n = 0;
 foreach ($menu as $m) {
      $n++;
      echo('<h2>' . $m . '</h2>');
 }
?>
      </div>     
 </body>
</html>

 

Запустите это, и вы должны увидеть что-то вроде рисунка 1.

Шаг 2: Привет, Silverlight!

Теперь прыгайте треки на несколько минут и создайте базовое приложение Silverlight. Если и когда вы начнете использовать некоторые инструменты для Silverlight, такие как Expression Studio и Visual Studio .NET, вы обнаружите несколько вещей:

  • Создание нового проекта автоматически создаст для вас всю структуру рабочих каталогов, дополненную исполняемым кодом.
  • Вы сможете опубликовать этот проект в различных местах, в том числе локально, и автоматически создаст структуру производственных каталогов.
  • Ни файлы проекта, ни структура каталогов НИЧЕГО не похожи на то, что вы собираетесь создать.

Об этом последнем пункте: самые последние версии Visual Studio и Silverlight перешли в совершенно другой формат, чем при запуске. Например, проекты теперь включают весь необходимый код и сборки, объединенные в файлы .xap для повышения производительности и простоты развертывания. К счастью, старая техника для создания проектов Silverlight все еще работает и очень удобна для типа проекта, который вы собираетесь создать здесь.

В конечном счете, вам действительно нужно всего четыре файла для создания приложения Silverlight:

  • Silverlight.js — вспомогательный файл для создания компонента Silverlight. Он создается автоматически при каждом запуске нового проекта Silverlight. Текущую версию можно найти здесь [ссылка на Silverlight.js]. 
  • Целевая страница — страница, которая содержит объект Silverlight. Через минуту это будет PHPMenu.php.
  • Страница Javascript — она ​​может быть включена в целевую страницу, но более удобна как отдельный файл
  • Файл XAML — это то, что интерпретируется плагином Silverlight. Обычно это создается Expression Blend, Visual Studio, или любое количество 3 — й сторонних приложений , поступающих на рынок. Для этой демонстрации вы создадите ее вручную, через PHP. И это ключ к Silverlighting вашего PHP — это не обязательно должен быть настоящий файл .xaml, если в результате получается правильный синтаксис XAML.

 

Начните с целевой страницы. На шаге 3 вы объедините этот код с PHPMenu.php, но сейчас создайте файл с именем HelloSilverlight.htm:

<html>
 <head>
  <title>Silverlight PHP Menu</title>
      <script type="text/javascript" src="Silverlight.js"></script>
      <script type="text/javascript" src="xamlFunctions.js"></script>
</head>
<body>     
      <p>Silverlighted PHP:</p>
      <div id="navMenuSL" class="navMenu">
            <script type="text/javascript">
                  createNavMenu();
            </script>
      </div>
 </body>
</html>

 

Затем создайте JavaScript. Это обнаружит плагин Silverlight и создаст делегата, а затем создаст объект Silverlight, который находится в файле .htm. Конечно, вы также можете сделать все это прямо на HTML-странице, которую вы только что создали. Вызовите этот файл xamlFunctions.js:

function createNavMenu()
{     
      Silverlight.createObjectEx({
            source: "hello.xaml",
            parentElement: document.getElementById("navMenuSL"),
            id: "slNavMeu",
            properties: {
                  width: "100%",
                  height: "100%",
                  inplaceInstallPrompt:true,
                  version: "3.0"
            }
      });
}

if (!window.Silverlight)
      window.Silverlight = {};
 
Silverlight.createDelegate = function(instance, method) {
      return function() {
            return method.apply(instance, arguments);
      }
}

 

Наконец, создайте свой файл XAML, на который в приведенном выше коде ссылаются как на «источник». Через некоторое время это будет преобразовано в файл PHP, чтобы упростить обслуживание некоторых параметров динамического меню. Также, как уже упоминалось, этот код обычно создается с использованием инструмента дизайна. XAML, как известно, хитро сложен для ручного кода. Не только отладка затруднена (если вы что-то не так делаете, в результате получается пустой пробел, куда идет ваш XAML), но не все доступные элементы управления могут использоваться так, как вы их здесь используете. Многие элементы управления, особенно те, которые добавлены в версии 3 и теперь 4, в настоящее время в бета-версии, требуют сборки для создания экземпляров. Но, надеюсь, этот пример даст вам прочную основу для построения чего-то более сложного. Вызовите этот файл hello.xaml:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="navMenu_Grid">
      <Canvas HorizontalAlignment="Left" Margin="0,0,0,0" Width="300" Height="400" VerticalAlignment="Top">
<Rectangle x:Name="Rect0" Fill="#FF5A2191" Height="40" Canvas.Left="20" RadiusY="15" RadiusX="15" Opacity=".5" Stroke="Black" Canvas.Top="0" Width="150" >
</Rectangle>
<TextBlock Foreground="#FFF7F1F1" Canvas.Top="10" Canvas.Left="45" Text="Hello, Silverlight!"  />
      </Canvas>
</Grid>

 

Несколько замечаний по поводу этого кода:

  • Вложенность: Silverlight использует различные контейнеры, такие как Grid, Canvas и StackPanel. Вы можете найти описание всего этого в другом месте на этом сайте и в MSDN. Хорошая причина использовать Canvas — это когда вы хотите использовать…
  • Слои: поскольку элемент управления Rectangle не имеет атрибута Text, вам необходимо создать отдельный TextBlock и установить соответствующие атрибуты Canvas.Top, чтобы они были правильно выровнены. Порядок, в котором элементы управления вложены в холст, — это порядок, в котором они будут отображаться на странице.
  • Непрозрачность . Непрозрачность элемента управления — это значение типа double в диапазоне от 0 до 1. Здесь непрозрачность устанавливается равной 50% или 0,5 для создания затемненного элемента управления.
  • RadiusX / Y: Здесь XAML становится интересным. Просто изменив атрибуты Радиуса, вы можете закруглить углы прямоугольника. Поскольку эти атрибуты могут быть установлены с помощью JavaScript, вы можете изменить их динамически.

Нажмите на новую страницу HelloSilverlight.htm. (Вы не забыли поместить свой Silverlight.js в тот же каталог?) Вы должны увидеть что-то вроде рисунка 2.

Перед тем, как перейти к шагу 3, внесите небольшую поправку в файл XAML. Вот где сила Silverlight начинает поднимать свою прекрасную голову. Добавив три строки кода, вы можете придать своему элементу управления хороший эффект тени, который в противном случае потребовал бы миль кодирования или статического искусства. И это даже не касается многих свойств, с которыми можно возиться.

Между вашими тегами <Rectangle> </ Rectangle> добавьте следующее:

<Rectangle.Effect>
   <DropShadowEffect/>
</Rectangle.Effect> 

 

Вот результат:

 

Обратите внимание, что этот эффект, как и все остальные, полностью настраивается: DropShadowEffect Class .

 

Шаг 3: объединяем два великолепных вкуса

Теперь, когда у вас есть рабочий пример как PHP, так и Silverlight, пришло время собрать их вместе.

Начните с вашей целевой страницы.  Перенос содержимого HelloSilverlight.htm в PHPMenu.php должен привести к следующему:

<html>
 <head>
  <title>Silverlight PHP Menu</title>
      <script type="text/javascript" src="Silverlight.js"></script>
      <script type="text/javascript" src="xamlFunctions.js"></script>
      <style type="text/css">
            .navMenu {
                  height: 300px;
                  width: 400px;
            }
      </style>
 </head>
 <body>
      <p>Just PHP:</p>
      <div id="navMenuPlain" class="navMenu">
      <?     
       // This is where you would do a fetch
 $menu=array('Home','Links','About','Contact');

 $n = 0;

 foreach ($menu as $m) {

      $n++;
      echo('<h2>' . $m . '</h2>');
 }

 ?>
      </div>
      <p>Silverlighted PHP:</p>
      <div id="navMenuSL" class="navMenu">
            <script type="text/javascript">
                  createNavMenu();
            </script>
      </div>
 </body>
</html>

 

Затем в файле xamlFunctions.js вы внесете одно небольшое изменение: замените «hello.xaml» на «createMenu.php». Как уже упоминалось, ваш источник XAML не обязательно должен быть .xaml-файлом. Удобно, это.

Теперь создайте новый файл с именем createMenu.php:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="navMenu_Grid">
 
      <Canvas HorizontalAlignment="Left" Margin="0,0,0,0" Width="300" Height="400" VerticalAlignment="Top">
          
<?

//Database fetch goes here
$menu=array('Home','Links','About','Contact');
$n = 0;

foreach ($menu as $m) {

      echo('<Rectangle x:Name="Rect' . $n . '" Fill="#FF5A2191" Height="40" Canvas.Left="20" RadiusY="15" RadiusX="15" Opacity=".5" Stroke="Black" Canvas.Top="' . ($n * 40) . '" Width="150" MouseEnter="mouseEntered" MouseLeave="mouseLeft">');

      echo('<Rectangle.Effect><DropShadowEffect/></Rectangle.Effect>');
      echo('</Rectangle>');
      echo('<TextBlock Foreground="#FFF7F1F1" Canvas.Top="' . (($n * 40) +10) . '" Canvas.Left="45" Text="' . $m . '"  />');

      $n ++;

}
 ?>

      </Canvas>

</Grid>

 

Как видите, это по сути идентично hello.xaml, за некоторыми очевидными исключениями. Вместо одного элемента управления вы перебираете свой динамический список, в данном случае просто массив. Добавьте небольшой счетчик для позиционирования, и у вас будет вертикальный столбец с закругленными прямоугольниками, с текстом меню, расположенным сверху.

Вы могли также заметить добавление событий MouseEnter и MouseLeave. Те вступят в игру в ближайшее время, буквально.

Перейдите к PHPMenu.php и посмотрите результат. Вы должны увидеть что-то вроде рисунка 4.

И это одно стоит стоимости входного билета. От меню навигации стиля середины 90-х до кнопок стиля конца 90-х. Винтаж очень вкусный, но все создано динамично, через XAML и Silverlight. И что еще более важно, все они в высшей степени управляемы, со свойствами, которые можно установить на лету или изменить с помощью javascript.

Но что было бы с классическими кнопками без эффекта классического ролловера? Читать дальше…

 

Шаг 4: Добавление анимации

Один умный аспект XAML — это возможность для разработчиков добавлять ресурсы в слой гнезда, в частности раскадровки. В Silverlight анимация обрабатывается путем присвоения диапазона значений через раскадровку определенному свойству определенного элемента управления. Присваивая имена и назначая конкретные свойства, вы можете делать такие вещи, как изменять непрозрачность элемента управления, смешивать его цвет от одного оттенка к другому, даже перемещать элемент управления.

К сожалению, это тоже требует много проб и ошибок, так как некоторые свойства не анимируются, как можно было ожидать. Например, в Quickstarts Silverlight.net есть несколько отличных стартовых примеров для анимации различных частей холста, включая изменение цвета самого холста: http://www.silverlight.net/learn/quickstarts/animations/ . Однако применение той же техники смещения цвета, скажем, к прямоугольнику, требует некоторой умопомрачительной гимнастики кодирования, которая кажется нелогичной, даже с полными ресурсами среды IDE, такой как Visual Studio.

Тем не менее, вы все равно можете добиться некоторых хороших эффектов даже с помощью простого приложения, такого как это. Для начала откройте файл createMenu.php и добавьте следующее под открывающим тегом <Canvas> и над сценарием PHP:

<Canvas.Resources>
<Storyboard x:Name="fadeIn">
<DoubleAnimation x:Name="fadeInDouble" Storyboard.TargetProperty="Opacity" Storyboard. Storyboard.TargetName="Rect1" To="1" Duration="0:0:1" />
</Storyboard>
<Storyboard x:Name="fadeOut">
<DoubleAnimation x:Name="fadeOutDouble" Storyboard.TargetProperty="Opacity" Storyboard. Storyboard.TargetName="Rect1" To=".5" Duration="0:0:1" />
</Storyboard>
</Canvas.Resources>

 

Несколько заметок об этом коде:

Обратите внимание, что контейнером является Canvas.Resources. Раскадровки считаются ресурсом для любого контейнера, в котором они находятся. Например, если бы это был StackPanel, вы бы использовали StackPanel.Resources.

Раскадровка должна быть названа так, чтобы на нее можно было ссылаться вызывающей подпрограммой.

В раскадровке фактическая анимация основана на типе значения изменяемого параметра. Этот пример изменит непрозрачность прямоугольника. Непрозрачность, как вы помните, имеет тип double, следовательно, «DoubleAnimation». Кроме того, сама анимация должна быть названа, как это будет также упомянуто позже.

Внутри анимации у вас есть TargetProperty, в данном случае «Непрозрачность», и TargetName, ссылающиеся на владельца этого свойства. На данный момент это жестко закодировано в «Rect1».

Вы можете использовать «Кому» и «От» для определения диапазона эффекта. Например, переход от «.5» к «1» приведет к тому, что элемент управления перейдет из полупрозрачного в полностью сплошное состояние. Обычно вы хотите установить оба конца диапазона. Но в этом случае исключение конца диапазона From позволяет сгладить эффект ролловера, поскольку эти параметры по умолчанию имеют свои текущие значения. Другими словами, если вы запустите анимацию MouseEnter и достигнете прозрачности 0,75, а затем отойдете, анимация MouseLeave начнется с 0,75 и перейдет к 0,5.

Вы также можете установить продолжительность анимации, используя формат H: M: S. В этом случае анимация устанавливается на 1 секунду.

Как только анимации определены, вам все равно нужно их запустить. Поэтому откройте ваш файл xamlFunctions.js и добавьте следующее внизу:

function mouseEntered(sender, mouseEventArgs)
{
sender.findName("fadeIn").Begin();
}

function mouseLeft(sender, mouseEventArgs)
{
sender.findName("fadeOut").Begin();
}

 

Как видите, он находит указанную раскадровку и начинает ВСЕ анимации внутри этой раскадровки.

Перезагрузите PHPMenu.php и попробуйте перевернуть свои фиолетовые кнопки. Вы должны увидеть плавное затухание. За исключением небольшой проблемы, это происходит только на одной кнопке, «Rect1», то есть «Ссылки». Не очень полезно.

Было время, когда это было так же хорошо, как и получалось. Чтобы сделать больше, вам нужно создать анимацию для каждого элемента управления. К счастью, Microsoft добавила несколько изменений в движок Silverlight, чтобы упростить ссылки на параметры в javascript.

Замените только что добавленный javascript следующим:

 

function mouseEntered(sender, mouseEventArgs)
{
sender.findName("fadeIn").Stop();
sender.findName("fadeInDouble")["Storyboard.TargetName"] = sender.Name;
sender.findName("fadeIn").Begin();
} 

function mouseLeft(sender, mouseEventArgs)
{
sender.findName("fadeOut").Stop();
sender.findName("fadeOutDouble")["Storyboard.TargetName"] = sender.Name;
sender.findName("fadeOut").Begin();
}

 

Два важных момента здесь:

  • Прежде чем назначать анимацию новой цели, вам нужно остановить ее на текущей.

  • TargetName является дочерним элементом анимации, а не дочерним элементом раскадровки. Как только анимация назначена новой цели, вы можете снова начать раскадровку.

Попробуйте запустить PHPMenu.php. Вы должны увидеть несколько хороших анимаций ролловера с плавными градациями от полупрозрачности до сплошного. Гораздо лучше, чем _on и _off версии ваших картинок.

Вы можете увидеть демонстрацию этого кода здесь: http://www.justinwhitney.com/silverlight1/PHPMenu.php

То, что вы только что сделали, — отколоть маленький кубик льда от кончика очень большого айсберга. Используя четыре основных файла, вы сгенерировали динамическое меню на лету и добавили несколько простых, но элегантных эффектов ролловера. Помните, что все, что вы только что создали, настраивается с помощью параметров: типа элемента управления, его размеров, цвета, тени, формы и направления тени, поведения.

Комбинируя XAML и javascript, вы смогли добавить всплеск Silverlight в свое PHP-приложение, не используя никаких дополнительных инструментов разработки, чем те, которые вы использовали все это время. Поскольку эта серия продолжается, у вас будет возможность увеличить ее на несколько ступеней с помощью бесплатных загрузок. Тогда вы начнете понимать, что Silverlight действительно может сделать для ваших приложений PHP.

34
Share: