Justin has posted 7 posts at DZone. You can read more from them at their website. View Full User Profile

Silverlighting Your PHP, Part 2: Hijacking XAML From Expression Blend

04.15.2010
| 20155 views |
  • submit to reddit

In Part One of this series, “Silverlighting Your PHP: Adding Silverlight With Nothing But Notepad”, you learned how to add some Silverlight to your PHP app by using PHP to generate XAML code. Using some very simple XAML, you not only generated a series of menu options, but also added some basic animation and a dropshadow effect.

One thing that app demonstrated, aside from how to create a potentially elegant menu, is how tricky it is to code XAML by hand without any development tools. Free, yes. But still difficult, with a lot of trial and error. That’s why in Part 2 of this series, you’ll step it up a notch by incorporating Expression Blend into your workflow.

Background

Microsoft released the Expression Suite in conjunction with Silverlight as a tool for enabling side-by-side development. In other words, as the graphics team designs the user interface, the developers can build out the code in tandem using Visual Studio. The entire workflow was architected to decouple code from design, to increase productivity in an Agile workplace.

But here’s the interesting thing for PHP developers: the design side of the equation doesn’t just produce static graphics. One of the primary components of the suite, Expression Blend, gives app developers a lot of functionality right out of the gate. In addition to building out a vector-based user interface, you can add timeline-based animation without writing a single line of code.

In this example, you’ll learn how to use Expression Blend as a starting point for a more stylized UI, which you’ll populate using PHP code. First you’ll use Expression Blend to create your XAML code, then you’ll then break it apart and incorporate PHP to add your dynamic elements.

This walkthrough emulates a highly responsive record-detail selection action. You’ll keep both record and detail simple by creating an “Employee List” that consists of Name and Job Title. As in the previous walkthrough, you’ll use an array rather than database calls. Don’t want to get too fancy here.

 

Step One: Classic PHP Employee List

Before diving into Expression Blend, take a moment to create your placeholder for the XAML you’ll ultimately be creating. Save the following to PHPEmpList.php. This will serve as the landing page.

<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>

 

Before running this, add a couple of JavaScript files. One is the magic Silverlight.js file that you need for all Silverlight apps. You can find a copy here. The second is a short script to create your XAML object. Save the following code as 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);
}
}

 

One last piece, create an empty doc and name it “createList.php”. You may have noticed this referenced in the object JavaScript. This will eventually contain your XAML. The nifty trick at play here is that the XAML doesn’t need to be created by a “.xaml” file. You can use PHP to generate your XAML and then reference the result by assigning it as the source for your Silverlight object, as is being done here.

If you run PHPEmpList.php now, you’ll see a pretty basic page (Figure 1). This would be your “Before” picture. Note that this example already includes the Silverlight object at the bottom half of the page, though this is currently empty.

 

 

Step Two: Create a XAML Front-End

Download Expression Blend 4, currently in Preview. This includes Silverlight 4 Runtime, which you can’t download or install without a .NET 4 development tool, all of which are in Beta at the time this was written. By using Expression Blend 4, you’ll be able to run Silverlight 4 apps locally. However, for this walkthrough you’ll be sticking with Silverlight 3 features so you can go live with your examples should you desire.

To start, create a new “Silverlight 4 Application + Website” and call it “PHPEmpList”.

 

 

One of the first things you’ll notice, assuming you’ve never used Expression Blend before, is that this is a hybrid of design and development, hence the name. While you can’t create extremely complex graphics content, which is the domain of Expression Design, or do any .NET coding, which is the purpose of Visual Studio, you can still get quite a bit done. More to the point, you can create the XAML you’ll need for your PHP app.

Instead of defaulting to a blank white canvas, add some design elements. One way to do this is to draw a rectangle over the canvas using the Rectangle control on the left (see Figure 3). To keep it simple, draw a rectangle over the top fifth of the canvas and color it dark grey. Then draw another rectangle over the bottom fifth of the canvas and color it light grey.

 

 

On the boundary between the two, add an Ellipse control in the same way. Try to get it to come out about 80 height and 150 width. If you can’t quite get it using the tool, you can set the dimensions directly using the properties panel on the right. You can also change its fill color here, for example to a lovely robin’s egg blue.

Select the Textblock tool from the toolbox to the left of the controls.

 

 

Add a Textblock to the center of your ellipse and give it some placeholder content, such as “Placeholder.” You can set Text Properties on the right. Use a font size of 10 and the font family of your choice.

 

 

It might also be helpful to center the text, which you can do using the Paragraph properties on the right.

 

 

Select both the Ellipse and the Textblock and group them by selecting Object -> Group Into -> Grid (see Figure 7). This nests the XAML for those two objects inside a Grid container. This is not strictly required for adding interactivity, but makes for nicer organization. This new container will also serve as a prototype for the PHP you’ll create later.

 

 

These ellipses will also serve as selectors for each of your “employees”, with the detail, in this case Job Title, appearing in a central box below. To create that box, add another Rectangle object to the center of the canvas. Select it with the Selector tool (also known as the arrow at the top of the toolbox on the left) to reveal its control points. Notice the upper left corner of the rectangle has two additional control points. Drag them and see what happens. The result should be similar to Figure 8.

 

 

As with the Ellipse, drag a Textblock onto your new rectangle and fill it with placeholder text, such as “Placeholder text”. Center it and give it a font size of 24. You should have something like Figure 9. This is the one object you’ll want to name, so call it “bubbleText”. Also be sure to group the Rectangle and Textblock together.

 

 

Now that you have a basic UI, now’s a good time to look at the XAML you’ve created. Under View -> Active Document, you’ll notice a few options for organizing your workspace. These will be familiar to anyone used to WYSIWYG editors, except that in this case the code being generated is XAML. Go to “Split View” so you can see the result up to this point.

Before going further, this would be the perfect point for a quick sanity check. Build and Run the code as is. You should see your Silverlight app in your browser.

 

 

Copy and paste your new XAML code into createList.php. Reload PHPEmpList.php.

See anything wrong? You’ll probably see nothing at all. At all. That’s because the XAML is not showing up. Took another look at your XAML code. You’ll see two things created by Expression Blend that won’t work in this type of architecture.

Expression Blend nests everything in a “UserControl” object. Edit every instance of “UserControl” to be “Grid” instead.

Expression Blend also adds a Class reference in that same object. This is a reference to the compiled code created by the IDE. In fact, if you look at your Project files, you’ll see that your code has been conveniently capsulated in a .xap container inside the ClientBin folder of PHPEmpListSite. Expression Blend makes it extremely easy to deploy your Silverlight project in this way. However, since you’re circumventing this elegant deployment process at the moment, just remove the following line:

x:Class="PHPEmpList.MainPage"

 

Your createList.php file should look something like this:

<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>

 

Reload PHPEmpList.php again and you should now see the Silverlight object at the bottom of the page as it appeared in Figure 10. (If nothing shows up, don’t forget to make sure you copied the Silverlight.js file.)


AttachmentSize
Figure1.png14.97 KB
Figure2.png23.99 KB
Figure 3.png37.44 KB
Figure 4.png34.16 KB
Figure 5.png40.41 KB
Figure 6.png5.02 KB
Figure 7.png78.87 KB
Figure 8.png5.05 KB
Figure 9.png7.42 KB
Figure 10.png49.4 KB
Figure 11.png13.88 KB
Figure 12.png13.96 KB
Figure 13.png20.3 KB
Figure 14.png14.5 KB
Figure 15.png14.9 KB
Figure 16.png18.36 KB
Figure 17.png31.19 KB
Figure 18.png6.79 KB
Figure 19.png10.61 KB
Figure 20.png54.78 KB
Figure 21.png64.4 KB
Figure 22.png19.35 KB
Figure 23.png44 KB
Silverlight.js_.zip2.96 KB
SilverlightingYourPHP_part2.zip5.79 KB
Published at DZone with permission of its author, Justin Whitney.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)