A Beginner’s Guide to Silverlight with PHP Article

Silverlight applications are built using Visual Studio for the code,and the Expression Studio suite of tools for the user interface. ShaneMorris has a greatarticle here detailing the use of Expression Studio to design aSilverlight UI. In this article, we’ll focus instead on the developmentside.Preparing to build Silverlight applications is quite simple. First,you’ll need Visual Studio. Microsoft has a free Express version of thissoftware available, so head over to the Silverlightwebsite and download the Web Platform Installer. It will guide youto download Visual Web Developer and the Silverlight tools. If you doalready have Visual Studio, you can download the Silverlight toolsdirectly.

Once you have the Silverlight tools installed, there will be newoptions available in Visual Studio to create Silverlight applications.Start by selecting New Project from the File menu. Browse toSilverlight, and selectSilverlight Application. Enter a name and alocation to save your new project, and clickOK.

Figure 1. Creating a new Silverlight application

The next screen allows you to choose how you want your applicationto be hosted. For the purposes of this tutorial, just leave the defaultsettings and click OK.You will be presented with two projects in the Visual StudioSolution Explorer—one for the Silverlight project and one for an ASP.NETsite. Even though we’re planning to use PHP for the server-side code,we’ll be able to take some generated code from the ASP.NET site to makeour job easier.

Figure 2. The two new projects shown in the Solution Explorer

Before we jump in and integrate Silverlight with PHP, let’s create abasic Silverlight application to become familiar way it works. Start byopening MainPage.xaml in your Silverlightapplication. It’s an XAML file, which stands for eXtensible ApplicationMarkup Language, and is how the Silverlight (and WPF) user interface isbuilt. It’s quite similar to HTML, so you’ll be able to pick it upquickly.Let’s start simple by adding a text box and a button to the screen.With your cursor placed inside the <Grid> element, enter the following XAML:<StackPanel></StackPanel>. A StackPanel is a kind of layout control inSilverlight. It will force the controls you enter inside it to stackeither vertically or horizontally.Next, we’ll add a TextBox and aButton inside the StackPanel, likethis:

<Grid x:Name="LayoutRoot">  <StackPanel>    <TextBox Text="Joe Citizen" x:Name="txtName"/>    <Button Content="Click Me!"/>  </StackPanel></Grid>

Pressing F5 will run the application. You shouldsee a button and text box appear on the screen.

Figure 3. Our sample application viewed in a browser

Clicking the button will achieve nothing at this stage. Let’s fixthat.Stop the application by closing the browser. Back in Visual Studio,locate the button in the XAML file and add an attribute called Click. Typing Click="" willcause Visual Studio to prompt you with <New EventHandler>. Select this option by pressingEnter. You can then right-click the text that was addedand select Navigate to Event Handler. This willtake you into the “code behind.” The code behind is the area that’s usedto enter C# (or VB.NET) code—the guts of the application is written incode behind.Let’s make the application show the text from the text box in amessage dialog.First, add using System.Windows.Browser; to thearea at the top of the page where you see a list ofusing statements:

using System.Windows.Shapes;using System.Windows.Browser;namespace PHPTutorialFirst{

This code imports a namespace. Namespaces allow the very large .NETframework class library to be split into smaller, manageable parts. Thisparticular namespace includes the alert functionality we’re after.Next, enter the following code inside theButton_Click function to show the popup:

private void Button_Click(object sender, RoutedEventArgs e){  HtmlPage.Window.Alert(txtName.Text);}

This will show the contents of the text box on the screen. You mayremember that back in the XAML file you added an attribute to the TextBlock called x:Name. This name is how we reference theelement in our code: txtName.Now that you’ve written a basic application, you’re ready to gofurther and start consuming a web service. But before we do we’ll look athow to insert our Silverlight application into our HTML files or PHPtemplates.

The first step to integrating Silverlight with your PHP applicationis to include the application itself in the pages generated by PHP. Thereare a couple of ways that Silverlight can be instantiated. The firstoption is to dynamically add new Silverlight applications usingJavaScript. I won’t go into detail here, but you can find out moreinformation in the MSDN Silverlight.jsreference document.The second option is to use the <object> HTML tag. The <object> tag is a way to tell a browser to loadan external object like an image or a plugin. Most plugins like Flash andSilverlight now use this tag.To help you out, Visual Studio makes a sample page for you when youcreate a new Silverlight project. You can find it in the web project youcreated earlier called [applicationname]TestPage.html. So, for our sample application, the file inquestion is SampleApplicationTestPage.html.Create a new directory in your server’s web root for your newapplication (in our examples we’ll be calling itsilverlight), and make a newindex.php page inside it. Copy the contents of thetest page that Visual Studio created into that file, and copySilverlight.js from the web project to your newdirectory.Now you have a PHP file that includes an <object> tag pointing to a Silverlightapplication, and an accompanying JavaScript file with some necessaryutilities. But, if you examine the object element, you’ll see that its src attribute is ClientBin/SampleApplication.xap. Looking backat the web project Visual Studio created for you, you’ll see that it doesindeed contain a ClientBin directory with aSampleApplication.xap file.Silverlight applications are compiled into what is known as a XAP(pronounced “zap”) package, which is what’s then included in the page withthe help of the <object> tag. So youjust need to copy the ClientBin directory into yourapplication’s directory, and your index.php page should now correctlydisplay your Silverlight application. You can rename or move the XAP file;you just need to remember to adjust the object’s src accordingly. Remember that if you modifyyour Silverlight application, you’ll need to copy theClientBin directory file again. During development,it’s probably easier to run your Silverlight applications from VisualStudio, and copy them over to the PHP directory when you’re done.Your silverlight directory should now look asshown in Figure 4, “The contents of the silverlightdirectory”, with theindex.php file containing the contents of thegenerated SampleApplicationTestPage.html from yourVisual Studio web project.

Figure 4. The contents of the silverlightdirectory