В первой части этой серии « Silverlighting Your PHP: добавление Silverlight с помощью только блокнота » вы узнали, как добавить Silverlight в приложение PHP с помощью PHP для генерации кода XAML. Используя очень простой XAML, вы не только сгенерировали серию опций меню, но также добавили базовую анимацию и эффект дропшоу.
Одна вещь, которую приложение продемонстрировало, помимо того, как создать потенциально элегантное меню, заключается в том, насколько сложно вручную кодировать XAML без каких-либо инструментов разработки. Бесплатно да. Но все еще сложно, с большим количеством проб и ошибок. Вот почему во второй части этой серии вы добавите Expression Blend в свой рабочий процесс.
Фон
Microsoft выпустила Expression Suite вместе с Silverlight как инструментом для обеспечения параллельной разработки. Другими словами, когда графическая команда разрабатывает пользовательский интерфейс, разработчики могут создавать код в тандеме, используя Visual Studio. Весь рабочий процесс был спроектирован таким образом, чтобы отделить код от проекта и повысить производительность в Agile-среде.
Но вот интересная вещь для разработчиков PHP: проектная сторона уравнения не просто создает статическую графику. Один из основных компонентов пакета, Expression Blend, предоставляет разработчикам приложений множество функциональных возможностей прямо у ворот. Помимо создания векторного пользовательского интерфейса, вы можете добавить анимацию на временной шкале без написания одной строки кода.
В этом примере вы узнаете, как использовать Expression Blend в качестве отправной точки для более стилизованного пользовательского интерфейса, который вы будете заполнять с помощью PHP-кода. Сначала вы будете использовать Expression Blend для создания своего кода XAML, затем вы разбите его на части и включите PHP для добавления ваших динамических элементов.
Это пошаговое руководство имитирует очень отзывчивое действие выбора деталей записи. Вы будете хранить и записи, и детали простыми, создав «Список сотрудников», который состоит из имени и должности. Как и в предыдущем пошаговом руководстве, вы будете использовать массив, а не вызовы базы данных. Не хочу здесь слишком увлекаться.
Шаг первый: классический список сотрудников PHP
Прежде чем погрузиться в Expression Blend, уделите время созданию заполнителя для XAML, который вы в конечном итоге создадите. Сохраните следующее в PHPEmpList.php. Это будет служить целевой страницей.
<html>
<head>
<title>Silverlight PHP Employee List</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="xamlFunctions.js"></script>
<style type="text/css">
.empList {
height: 480px;
width: 640px;
}
</style>
</head>
<body>
<p>Just PHP:</p>
<div id="empListPlain" class="empList">
<?
// Database fetch goes here. For this example,
// use a multidimensional array.
$employees =
array(
array('id'=>1, 'name'=>'Apollo', 'jobtitle'=>'God of Music'),
array('id'=>2, 'name'=>'Aphrodite', 'jobtitle'=>'Goddess of Love'),
array('id'=>3, 'name'=>'Mars', 'jobtitle'=>'God of War'),
array('id'=>4, 'name'=>'Artemis', 'jobtitle'=>'Goddess of the Hunt') );
$n = 0;
foreach ($employees as $employee) {
$n++;
echo('<p>' . $employee['name'] . ' : ' . $employee['jobtitle'] . '</p>');
}
?>
</div>
<p>Silverlighted PHP:</p>
<div id="empListSL" class="empList">
<script type="text/javascript">
createEmpList();
</script>
</div>
</body>
</html>
Перед запуском добавьте пару файлов JavaScript. Одним из них является волшебный файл Silverlight.js, который вам нужен для всех приложений Silverlight. Вы можете найти копию здесь. Второй — это короткий скрипт для создания вашего объекта XAML. Сохраните следующий код как xamlFunctions.js:
function createEmpList()
{
Silverlight.createObjectEx({
source: "createList.php",
parentElement: document.getElementById("empListSL"),
id: "slEmpList",
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);
}
}
Последний кусок, создайте пустой документ и назовите его «createList.php». Возможно, вы заметили это в объекте JavaScript. Это в конечном итоге будет содержать ваш XAML. Отличный трюк в том, что XAML не нужно создавать из файла «.xaml». Вы можете использовать PHP для генерации XAML, а затем ссылаться на результат, назначая его в качестве источника для объекта Silverlight, как это делается здесь.
Если вы запустите PHPEmpList.php сейчас, вы увидите довольно простую страницу (рисунок 1). Это будет ваша картина «До». Обратите внимание, что этот пример уже включает объект Silverlight в нижней половине страницы, хотя в настоящее время он пуст.
Шаг второй: создание внешнего интерфейса XAML
Загрузите Expression Blend 4, в настоящее время в Preview . Это включает в себя Silverlight 4 Runtime, которую нельзя загрузить или установить без инструмента разработки .NET 4, все они находятся в бета-версии на момент написания этой статьи. Используя Expression Blend 4, вы сможете запускать приложения Silverlight 4 локально. Тем не менее, в этом пошаговом руководстве вы будете использовать функции Silverlight 3, чтобы при желании вы могли использовать их примеры.
Для начала создайте новый «Silverlight 4 Application + Website» и назовите его «PHPEmpList».
Первое, что вы заметите, если предположить, что вы никогда не использовали Expression Blend, это то, что это гибрид дизайна и разработки, отсюда и название. Хотя вы не можете создавать чрезвычайно сложный графический контент, который является предметом Expression Design, или выполнять какое-либо кодирование .NET, которое является целью Visual Studio, вы все равно можете сделать немало. Более того, вы можете создать XAML, который вам понадобится для вашего приложения PHP.
Вместо использования по умолчанию пустого белого холста, добавьте некоторые элементы дизайна. Один из способов сделать это — нарисовать прямоугольник поверх холста, используя элемент управления Rectangle слева (см. Рисунок 3). Чтобы было проще, нарисуйте прямоугольник поверх пятой части холста и раскрасьте его темно-серым цветом. Затем нарисуйте еще один прямоугольник над нижней пятой части холста и раскрасьте его в светло-серый.
На границе между ними добавьте элемент управления Ellipse таким же образом. Попробуй заставить его выйти примерно на 80 высот и 150 на ширину. Если вы не можете получить его с помощью инструмента, вы можете установить размеры непосредственно с помощью панели свойств справа. Вы также можете изменить цвет заливки здесь, например, на прекрасный синий яйцо малиновки.
Выберите инструмент «Текстовый блок» на панели инструментов слева от элементов управления.
Добавьте текстовый блок в центр вашего эллипса и добавьте в него заполнитель, например «Заполнитель». Вы можете установить свойства текста справа. Используйте размер шрифта 10 и семейство шрифтов по вашему выбору.
Также может быть полезно центрировать текст, что можно сделать с помощью свойств абзаца справа.
Выберите Ellipse и Textblock и сгруппируйте их, выбрав Object -> Group Into -> Grid (см. Рисунок 7). Это вложит XAML для этих двух объектов в контейнер Grid. Это не обязательно для добавления интерактивности, но делает для организации лучше. Этот новый контейнер также послужит прототипом для PHP, который вы создадите позже.
Эти эллипсы также будут использоваться в качестве селекторов для каждого из ваших «сотрудников», а подробности, в данном случае должность, отображаются в центральном окне ниже. Чтобы создать это поле, добавьте еще один объект Rectangle в центр холста. Выберите его с помощью инструмента «Селектор» (также известного как стрелка вверху панели инструментов слева), чтобы отобразить контрольные точки. Обратите внимание, что в верхнем левом углу прямоугольника есть две дополнительные контрольные точки. Перетащите их и посмотрите, что произойдет. Результат должен быть похож на рисунок 8.
Как и в случае с эллипсом, перетащите текстовый блок на новый прямоугольник и заполните его заполнителем, например «Текст заполнителя». Отцентрируйте его и дайте ему размер шрифта 24. У вас должно получиться что-то вроде рисунка 9. Это один объект, который вы хотите назвать, поэтому назовите его «bubbleText». Также обязательно сгруппируйте Rectangle и Textblock вместе.
Теперь, когда у вас есть базовый пользовательский интерфейс, самое время взглянуть на созданный вами XAML. Под View -> Active Document вы увидите несколько вариантов организации вашего рабочего пространства. Они будут знакомы всем, кто привык к редакторам WYSIWYG, за исключением того, что в этом случае генерируется код XAML. Перейдите в разделенный вид, чтобы увидеть результат до этого момента.
Прежде чем идти дальше, это было бы идеальным пунктом для быстрой проверки работоспособности. Постройте и запустите код как есть. Вы должны увидеть свое приложение Silverlight в своем браузере.
Скопируйте и вставьте ваш новый код XAML в createList.php. Перезагрузите PHPEmpList.php.
Видите что-нибудь не так? Вы, вероятно, вообще ничего не увидите. Совсем. Это потому, что XAML не появляется. Взглянул еще раз на ваш код XAML. Вы увидите две вещи, созданные Expression Blend, которые не будут работать в архитектуре этого типа.
Выражение Blend вкладывает все в объект «UserControl». Вместо этого измените каждый экземпляр «UserControl» на «Grid».
Выражение Blend также добавляет ссылку Class в этот же объект. Это ссылка на скомпилированный код, созданный в среде IDE. Фактически, если вы посмотрите на свои файлы Project, то увидите, что ваш код удобно помещен в контейнер .xap внутри папки ClientBin на PHPEmpListSite. Expression Blend позволяет чрезвычайно легко развернуть ваш проект Silverlight таким способом. Однако, поскольку вы в настоящее время обходите этот элегантный процесс развертывания, просто удалите следующую строку:
x:Class="PHPEmpList.MainPage"
Ваш файл createList.php должен выглядеть примерно так:
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle Fill="#FFBCBCBC" Stroke="Black"/>
<Rectangle Fill="#FF565656" Height="67" Stroke="Black" VerticalAlignment="Top"/>
<Grid HorizontalAlignment="Left" Height="80" Margin="21,23,0,0" VerticalAlignment="Top" Width="143">
<Ellipse Fill="#FF4F8DC8" Stroke="Black" />
<TextBlock HorizontalAlignment="Left" Height="28" Margin="19,31,18,21" TextWrapping="Wrap" Text="Placeholder" VerticalAlignment="Top" Width="106" FontSize="13.333" FontWeight="Bold" FontFamily="Trebuchet MS" TextAlignment="Center"/>
</Grid>
<Grid Margin="146,152,165,129">
<Rectangle Fill="White" RadiusY="39" RadiusX="39" Stroke="Black"/>
<TextBlock x:Name="bubbleText" FontSize="24" FontFamily="Trebuchet MS" Margin="18,25,27,24" TextAlignment="Center" TextWrapping="Wrap" Text="Placeholder text."/>
</Grid>
</Grid>
</Grid>
Снова перезагрузите PHPEmpList.php, и теперь вы должны увидеть объект Silverlight внизу страницы, как это показано на рисунке 10. (Если ничего не появляется, не забудьте убедиться, что вы скопировали файл Silverlight.js.)
Шаг третий: создание анимации XAML
Вернитесь в Expression Blend и посмотрите на панель Objects and Timeline, где появлялись ваши новые объекты. В верхней части панели вы увидите раскрывающийся список раскадровок. Многие находят процесс создания раскадровок менее интуитивным в Expression Blend. В дополнение к элементам управления, доступным для использования на вашем холсте, таким как прямоугольники, ползунки, списки и т. Д., У вас есть доступ к нескольким предварительно настроенным моделям поведения. Такое поведение добавляет интерактивность вашему приложению Silverlight, позволяя вам, например, добавлять триггеры или управлять раскадровкой.
Однако ни одно из этих Поведений на самом деле не создает раскадровки. Для этого вы будете использовать панель «Объекты». В этом случае вы анимируете окно отображения в середине холста, поэтому выберите его, а затем нажмите знак «+», чтобы создать новую раскадровку.
Вы должны увидеть новую временную шкалу, измеряемую в секундах, справа от ваших объектов (см. Рисунок 12). Пока вы находитесь в режиме записи, как сейчас, вы можете создавать анимацию, создавая ключевые кадры с течением времени. В этом примере вы захотите, чтобы окно показа переместилось в соответствие с названием должности выбранного человека, в конечном итоге в соответствии с размером, который вы создали. Ваша анимация должна длиться одну секунду.
Так как это конечное состояние анимации, перейдите на одну секунду на временной шкале и нажмите значок ключевого кадра, как показано на рисунке 13. Здесь больше ничего не нужно делать.
Затем вернитесь к 0 секундам и добавьте еще один ключевой кадр.
На этот раз вы измените размер, настроив свойство RenderTransform. Справа разверните панель Transform и найдите вкладку RenderTransform. Так как это тип данных Double, вы увидите текущие значения вашей сетки 1 для X и Y, что означает 100% для ширины и высоты. Измените их на 0, как вы можете видеть на рисунке 15.
Чтобы проверить анимацию, нажмите значок воспроизведения рядом с раскадровкой. Вы должны увидеть, как ваша центральная коробка вырастет из ничего в полный размер. Это интересное начало, но нужно кое-что.
Разверните свой грид-контейнер. Только что записав изменение в свойстве RenderTransform, вы увидите новый объект в вашей группе: RenderTransform. Выберите это.
В Expression Blend у вас есть возможность определить не только изменение свойства с течением времени, но и то, как это свойство изменяется с течением времени. Это изменение или интерполяция отображается на KeySpline, который отображает значение x с течением времени. Вы можете изменить этот график вручную или использовать одну из предварительно созданных функций EasingFunctions, которая отображает, как свойство «облегчает» его целевое значение или «облегчает» его начальное значение.
Выберите вкладку EasingFunction и посмотрите на выпадающий список. Expression Blend 4 предлагает множество готовых графиков, которые описывают интерполяцию вашего свойства. Лучше всего, если вы выберете любую из этих капель необходимого XAML, чтобы это произошло. Из этого списка выберите «Bounce» в столбце «In».
Вы не хотите сходить с ума от анимации здесь, поэтому измените значения Bounce на что-то неуловимое, например, Bounces = 1 и Bounciness = 1.
Теперь попробуйте снова сыграть в раскадровку. Это одна бодрая коробка. Поскольку вы закончили создание раскадровки, вы можете пойти дальше и закрыть его.
Вот один умеренно запутанный момент для начинающих: даже если вы чувствовали, что вы редактировали свой контейнер сетки, вы делали это только в контексте раскадровки. С закрытой раскадровкой ваша сетка возвращается к тому, что была до того, как вы начали записывать анимацию. Чтобы закончить эффект отскока текста из небытия (и скрыть изменение текста при добавлении массива PHP), вы должны начать с пустоты. Таким образом, оставив выделенную сетку, снова измените свойство RenderTransform на 0, 0.
У вас есть анимация, но вам все равно нужно как-то ее запустить. У вас есть несколько способов сделать это.
На вкладке «Активы» в левом верхнем углу посмотрите доступные варианты поведения. В состав Expression Blend входит несколько готовых вариантов поведения, которые можно реализовать без написания одной строки кода. На самом деле, вы также увидите ссылку на галерею выражений, где вы можете найти больше поведений.
Если вы собираетесь развернуть это приложение как проект .NET, вы можете просто добавить одно из этих поведений, например «ControlStoryboardAction», затем выбрать MouseLeftButtonDown в качестве события (которое должно быть по умолчанию) и «bubbleOut» в качестве Раскадровка. И вы сделали.
Затем Expression Blend связывает соответствующие сборки, затем компилирует и упаковывает код, необходимый для запуска приложения Silverlight. И если вы не делаете что-то довольно сложное, вы, вероятно, найдете все необходимые вам функции здесь, даже не открывая проект в Visual Studio.
Тем не менее, цель этого приложения — генерировать XAML через PHP, а не полагаться на XAML, упакованный в файл .xap. Это означает запуск анимации с использованием JavaScript.
Но перед добавлением этого последнего бита, возьмите весь ваш недавно созданный код XAML и скопируйте его в createList.php, заменив текущее содержимое этих файлов.
Шаг четвертый: порежьте его и добавьте PHP
На втором шаге у вас была возможность внести незначительные изменения в сгенерированный код XAML, чтобы заставить его работать должным образом в этой конфигурации. Это была просто разминка. Теперь у вас есть больше кода для игры, но процесс по сути тот же, с незначительным отличием включения вашего PHP.
A.
Сначала измените UserControl на Grid. У вас есть другие объекты, кроме Grid, но пока придерживайтесь того, что вы знаете. Кроме того, с добавлением вашей раскадровки Expression Blend создал контейнер «UserControl.Resources», поэтому обязательно измените его также (на «Grid.Resources»). Вы должны увидеть четыре ссылки, которые необходимо заменить.
Б.
Также вверху вы увидите ссылку на несколько сборок .NET. К счастью, вы можете обойтись без этого, так что избавьтесь от этого. Рассматриваемое свойство должно быть строкой 4:
xmlns: i = «clr-namespace: System.Windows.Interactivity; Assembly = System.Windows.Interactivity» xmlns: im = «clr-namespace: Microsoft.Expression.Interactivity.Media; Assembly = Microsoft.Expression.Interactions»
C.
Удалить ссылку на «PHPEmpList.MainPage» в следующей строке.
D.
Если вы добавили это поведение на рис. 22 только для ударов, это создаст триггер в XAML. Выполните поиск по «Триггерам». Если вы найдете контейнер с именем «i: Interaction.Triggers», удалите весь контейнер и все, что в нем.
Проверка работоспособности: перезагрузите PHPEmpList.php и посмотрите, что произойдет. Если с XAML что-то не так, то ничего не появится, и вы не получите никакого сообщения об ошибке (да, полезно это). Но если вы видите овал «Заполнитель», значит, вы все правильно поняли.
Затем вернитесь в createList.php, разбейте код и добавьте свой PHP. Вверху добавьте простой многомерный массив для тестирования. Это то место, где вы обычно выполняете выборку из базы данных, вызов JSON или какой-либо другой элемент данных. Вы можете использовать тот же фрагмент со своей целевой страницы:
<?
$employees =
array(
array('id'=>1, 'name'=>'Apollo', 'jobtitle'=>'God of Music'),
array('id'=>2, 'name'=>'Aphrodite', 'jobtitle'=>'Goddess of Love'),
array('id'=>3, 'name'=>'Mars', 'jobtitle'=>'God of War'),
array('id'=>4, 'name'=>'Artemis', 'jobtitle'=>'Goddess of the Hunt') );
?>
Спуститесь в свой Grid-контейнер, вложив Ellipse и TextBlock. Поскольку вы создали прототип объекта, вы можете обернуть свой PHP вокруг этого, чтобы перебрать сбор данных. Вот пример с небольшим изменением свойств Margin для настройки интервала:
<?
$n = 0;
foreach ($employees as $employee) {
echo('<Grid x:Name="' . $employee['jobtitle'] . '" HorizontalAlignment="Left" Height="80" Margin="' . (($n * 150) + ($n * 5) + 5) . ',23,0,0" VerticalAlignment="Top" Width="150" MouseLeftButtonDown="mouseClick">');
echo('<Ellipse Fill="#FF4F8DC8" Stroke="Black"/>');
echo('<TextBlock FontWeight="Bold" FontSize="13.333" FontFamily="Trebuchet MS" Margin="20,31,18,21" TextAlignment="Center" TextWrapping="Wrap" Text="' . $employee['name'] . '"/>');
echo('</Grid>');
$n ++;
}
?>
Обратите внимание, что этот фрагмент кода также включает ваше событие MouseLeftButtonDown. Это ручная часть подключения раскадровки, которую вы должны сделать вручную.
В этом примере вы также можете заметить небольшой взлом: неправильное использование свойства Name. Это используется только для демонстрационных целей и не должно быть предпринято дома. В реальном сценарии вы могли бы вместо этого сохранить поле идентификатора в поле имени, а затем включить более сложную выборку данных для заполнения дополнительных полей.
Последняя часть бизнеса для завершения подключения. Вернитесь к файлу xamlFunctions.js и добавьте в конец следующее:
function mouseClick(sender, mouseEventArgs)
{
sender.findName("bubbleText")["Text"] = sender.Name;
sender.findName("bubbleOut").Begin();
}
Как видите, это простая функция для заполнения текста вашей сетки bubbleText и запуска раскадровки bubbleOut.
После этого перезагрузите PHPEmpList.php. Если все прошло хорошо, вы должны увидеть список ваших «сотрудников» в верхней части. Нажмите на один, чтобы увидеть вашу оживленную анимацию. (Если все пошло не так, вот полный список кодов для этого проекта .)
Вы можете увидеть код в действии здесь:
http://www.justinwhitney.com/silverlight2/PHPEmpList.php
Вывод
Если у вас есть PHP, уже созданный и готовый к работе, но для этого нужно немного больше, это один из простых способов Silverlight для этого приложения PHP. Используя Expression Blend, вы можете создать свой пользовательский интерфейс и добавить некоторые эффекты анимации без написания кода. Затем просто украдите XAML и используйте его в качестве основы для вашего интерфейса. С помощью некоторого JavaScript для подключения анимации, конечный результат — RIA, который не имеет реального эквивалента в мире AJAX / DOM.