Chapter 7 Deploying to a Web Page
In This Chapter
Deploying a Silverlight application to a web page is an exciting step: You share your work with the world! Depending on your past experience, you may already have a website. In that case, you probably know about FTP and publishing HTML already, and some sections of this chapter will feel like a refresher.
Creating a Test Page
When you create a new Silverlight application in Blend and run it by pressing F5, an HTML page is automatically created for you. The first thing we will do is copy the test page’s code and create a new one, which we can modify as we want. Later (in Chapter 14, “Letting .NET and JavaScript Talk”) we see how Visual Studio can generate a website and the corresponding HTML page for you so that you don’t need to copy the generated HTML page every time you create a new Silverlight application. For now, simply follow these steps.
1. Create a new Silverlight 2 application in Blend. Name it TestObjectTag.
2. Change the background color of the main grid named LayoutRoot to Red.
3. Build the application by selecting the Project, Build Solution from the menu. This step is needed to generate the files we want.
4. Right-click on the project in the Project panel (just under the solution), and select Open Folder in Windows Explorer.
5. You should now see all the files included in the project, for example App.xaml, App.xaml.cs, Page.xaml, Page.xaml.cs, and so on.
6. Navigate to the folder [Project Root]inDebug. You should now see a bunch of generated files, including a file named TestObjectTag.xap (we’ll talk about this file later) and a file named Default.html.
7. Copy the file Default.html into the project root (the folder where you have the XAML and CS files). We don’t want to edit the original one, because it is regenerated by Blend every time you compile the application, and your changes would be overwritten.
8. Right-click on the file Default.html that you just copied, and select Open With, Notepad. This opens the HTML file in a text editor. Alternatively, you can choose any text editor you prefer.
9. Since we moved this file, we need to edit the path to the XAP file. Locate the line starting with <param name=″source″ and change the value from ″TestObjectTag.xap″ to ″bin/Debug/TestObjectTag.xap″. Depending on your editor, the text color might be different, but the content is the same. This is a URL! You must use the forward slash “/” to separate the folders, and not Windows backslash.
10. In Windows Explorer, double-click on the file Default.html you just modified. You should now see your red Silverlight application in your favorite browser.
Understanding the object Tag
The file Default.html has the following sections:
In the header, three CSS rules to style the page and the Silverlight application. CSS (Cascaded Style Sheets) is outside the scope of this book. It is enough to say that you can “style” a Silverlight object tag and its enclosing div element. For example, use the rule named #silverlightControlHost to set the size, position, or other features of the div element with the same id.
Still in the header, a JavaScript function named onSilverlightError. It will be called if an error occurs with your Silverlight application. You don’t need to worry about this for the moment.
In the body section, a div element with the id errorLocation. The JavaScript function onSilverlightError will display additional information about the possible errors in this element. In normal conditions, this element is invisible.
The main div element (id: silverlightControlHost), containing an object tag. This is where the magic occurs.
Attributes
object tags are used to create an instance of a plug-in. This is also the mechanism used, for example, by Adobe Flash or by Java applets to run on a page. It contains a series of attributes that define the behavior of the plug-in. Let’s talk about the most important ones.
The type Attribute
This attribute is important because it helps the plug-in to decide whether a newer version is needed to run the current content. For example, if the type attribute specifies application/x-silverlight-2, it means that version 2 of Silverlight is the minimum needed to run this application. If only version 1 is installed, the Install Microsoft Silverlight button will be displayed (see the later section “Detecting Silverlight” for details).
The Width and Height Attributes
These attributes can be used to set the size of the Silverlight application. It is better to leave these two attributes set to 100% and to use the CSS rule #silverlightControlHost to change the size of the application. Do not remove these attributes however, they are mandatory.
The id Attribute
The id must be unique within your whole HTML page. Though this id is not generated by the HTML test page, it is a good idea to uniquely identify your Silverlight object, in order to access it later, either through JavaScript or CSS.
Parameters
The object tag also has children (remember, HTML is very close to XML, so the hierarchy also exists here), a series of param tags used to pass information to the plug-in.
The Source Parameter
This parameter tells the plug-in where to look for the content to be displayed. It is mandatory and cannot be omitted.
The onerror Parameter
This parameter contains the name of a JavaScript function, which will be executed if there is an error when creating or running the Silverlight application. In the generated test HTML page, the JavaScript function is already available. It has two parameters, sender and args. This last parameter contains additional information about the error, such as the error type, error message, and so on. The generated error handling function displays the error message to the user. You can of course modify this function to customize the error message or to display it in another way.
The onload Parameter
This parameter is not created by default, but you can add it. It follows the exact same syntax as the onerror parameter. The JavaScript function that it references will be called when the Silverlight application has been fully loaded and is completely ready to start working.
The Background Parameter
This sets the color of the Silverlight application’s background. This color will be visible only if you set the windowless parameter to true as explained in the next section.
The Background parameter is a XAML color, not an HTML color. It means that you can also set the Alpha channel, as we saw in Chapter 5.
In addition to these generated parameters, you can create additional ones as discussed in the following sections.
The windowless Parameter
This parameter is tricky. To keep it simple, let’s say that if windowless is false, even if you set the background color of your XAML page to Transparent, you will not see what is underneath the Silverlight plug-in. We say that the plug-in is “windowed.” On the other hand, if windowless is true, the plug-in is integrated with the HTML markup, and you can even place HTML elements on top of the Silverlight scene.
Additional Parameters
There are additional parameters and attributes not mentioned here. You can find their description in Silverlight’s documentation (see Chapter 1, “Introducing Silverlight,” in the section called “Installing the Documentation”). Look for the documentation page titled “Instantiating a Silverlight Plug-In (Silverlight 2)”.
Modifying the Attributes and Parameters
We saw the most important attributes in the preceding sections. There are a few other ones, and you should definitely read the documentation about them to learn more. For the moment, let’s just play a little with the attributes we know and observe their effect. First let’s prepare our application with the following steps:
1. In Blend, in the application TestObjectTag, set the width and height of the top user control to 300, respectively 200.
2. Place a small rectangle in the bottom-right corner of the grid LayoutRoot. We will use this rectangle as a “marker.” The bottom-right corner of the rectangle should be placed in the bottom-right corner of the Grid.
3. Build the application.
Playing with the Size
Let’s experiment with the application’s (and its container’s) size first with the next steps:
1. Go back to the file Default.html that we copied before.
2. Change the CSS rule for the HTML page’s body as in Listing 7.1:
body {
padding: 0;
margin: 0;
background-color: Green;
}
3. Change the CSS rule #silverlightControlHost as in Listing 7.2:
#silverlightControlHost {
height: 180px;
width: 280px;
}
4. Change the value of the background parameter of the Silverlight object tag to Blue.
5. Double-click on Default.html to run it in your favorite browser. You should see the red Silverlight application, but notice how you see only part of the “marker” rectangle as shown in Figure 7.1. The size of the Silverlight application remains 300x200. The rest of the application is hidden, as well as the blue background we just set.
Figure 7.1 Silverlight plug-in is too small.
6. Now change the #silverlightControlHost CSS rule as in Listing 7.3:
#silverlightControlHost {
height: 220px;
width: 320px;
background-color: yellow;
}
7. Refresh the page in the web browser. You should now see a border of blue between the red Grid and the green body background (see Figure 7.2). The yellow color never appears, because the div element is completely filled by the Silverlight application, and the application itself is completely filled by the red Grid.
Figure 7.2 Silverlight plug-in is too big.
In general, you want to match the size of the silverlightControlHost div element with the size of the Silverlight application. In our case, the rule would be as in Listing 7.4:
#silverlightControlHost {
height: 200px;
width: 300px;
background-color: yellow;
}
The last experiment is to modify the size of the Silverlight plug-in within the div element. In other words, we will now see the div element’s yellow background:
1. Change the width and the height attributes in the object tag to 50%. The width and height attributes in the object tag use the same syntax as CSS width and height, so you can use %, px, and so on.
2. Refresh the page in the web browser. You should now see that the Silverlight plug-in occupies only one quarter of the yellow div. As we said before, you usually want the Silverlight plug-in to occupy the whole div element, but controlling these two attributes might come in handy in some occasions.
Colors, Transparency, and windowless
Let’s try diverse transparency settings with the following steps:
1. In Blend, set LayoutRoot’s background color to red, but with the Alpha channel set to 50% like we did in Chapter 5.
2. Build the application.
3. Open the file Default.html in your web browser. You should see a purple background for your application (see Figure 7.3). The reason is that the red Grid is half transparent, so the red color is mixed with the Silverlight plug-in’s blue background (blue + red = purple).
Figure 7.3 Half-transparent red Grid on blue background.
4. Change the value of the background parameter in the object tag to Transparent. Since this is a XAML color, Transparent is a valid value.
5. Then, add a parameter as follows:
<param name=″windowless″ value=″true″ />
6. Refresh the page in the web browser. You should now see an orange background: The blue background is gone, and since the Silverlight application is windowless, the HTML element div is visible underneath. This div has a yellow background (yellow + red = orange).
7. Just out of curiosity, change the windowless parameter from true to false and refresh the web page. Depending on your operating system, the results will vary:
In Windows, you will see a dark red background. This is because the non-windowless Silverlight plug-in appears as a black element (half transparent red + black = dark red).
On Macintosh computers, you shouldn’t see any difference, because the windowless parameter is ignored.
These small exercises are important to understand the hierarchy of all the elements needed to represent a Silverlight application. From the web page’s body, to the div host, to the Silverlight plug-in, to the main user control, to the LayoutRoot and its children, all these elements have a size and a color that will influence the end result.
Deploying with JavaScript
There is an alternative way to deploy your application on an HTML page, using JavaScript. We see this alternative in the next chapter (Chapter 8, “Programming Silverlight with JavaScript”), where we talk more about this fascinating (and often misunderstood) programming language.
Detecting Silverlight
We saw already in Chapter 1 that Silverlight can detect whether the Silverlight plug-in is installed. In fact, it can even detect whether the installed version is recent enough to play the downloaded content. If that is not the case, an Install Microsoft Silverlight button is displayed. Often, however, you want a more creative message.
For example, imagine that you have a low-resolution video posted on an online video service. Since you know that Silverlight offers a better user experience, you want to offer this video in high-definition to your end user. If Silverlight is installed on the client, the high-resolution video must play; if it isn’t, you want to display the low resolution video instead. Let’s see what steps are needed.
1. In TestObjectTag, in Default.html, change the type attribute from application/x-silverlight-2 to application/x-silverlight-3. Then refresh the page in the web browser. You should now see the button asking you to install Silverlight. This is because you requested a version of Silverlight that is not installed on your PC (in fact, it is not even available on the market yet).
2. With Default.html open in a text editor, go down to the line starting with:
<a href=″http://go.microsoft.com/fwlink/?LinkID=115261″
3. This is where the browser finds the content to be displayed, in this case an Install Microsoft Silverlight picture enclosed in a link. In fact, the whole HTML markup included between the last param element and the closing </object> tag will be displayed. This is where you can be creative and display any HTML content you want.
4. As you probably noticed, the content displayed by default is hosted by Microsoft.com. It means that the Get Silverlight button will not be displayed if you are offline. In most cases, however, you want to host the content yourself.
5. Don’t forget to change the type attribute back to application/x-silverlight-2!
Integrating Silverlight in an Existing Web Page
Adding Silverlight content to an existing web page is actually pretty easy because of the fact that the object tag is just a standard HTML tag. Also, the source parameter accepts a XAP file even if it’s not located on the same web server as the HTML page hosting it.
This fact is especially important in case you want to integrate Silverlight content in a blog, for instance. Many providers allow you to add custom HTML content to some sections of your blog, but do not allow you to save any external files (apart from pictures) on their server. With this ability, you can save the Silverlight content on your own web server and reference it on your blog.
Understanding the Original Code
In the following example, you edit an existing web page and replace the central image with an animated Silverlight application. Follow the steps.
1. Download the original code located at www.galasoft.ch/SL2U/Chapter07/SilverlightBookCover.Original.zip.
2. Extract the content of the Zip file to a local folder.
3. Open the file index.html in a web browser. You should see Figure 7.4.
Figure 7.4 Original Silverlight book cover page
4. If you open index.html in a text editor of your choice, you see that the page has four main areas:
The HTML header with the included CSS file.
A Silverlight logo (picture). This image is positioned using CSS so that it appears “on top” of the central image if the page is resized to a very narrow size.
The Silverlight book cover picture that we want to replace.
A div with a promotional message.
Getting the XAP file
The whole Silverlight application is packaged as an XAP file. This includes the XAML markup, the C# code-behind (compiled in a DLL), a small Silverlight logo movie displayed in the top-left corner, and the book cover, which will be animated.
To use the XAP in the web page you are modifying, you need to get the XAP file with the following steps:
1. Download the XAP file from www.galasoft.ch/SL2U/Chapter07/SilverlightBookCover.xap.
2. Save this file in the resources folder, located in the same directory as the file index.html that you are editing now. Make sure that it is really named SilverlightBookCover.xap. Sometimes the web browser adds a “.zip” extension to the file name. If that’s the case, you must remove this extension!
That’s it, you have everything you need!
The steps needed to create the book cover animation are not listed here. It is a standard Silverlight 2 application, created using Expression Blend. If you want to study the code, you can download it from www.galasoft.ch/SL2U/Chapter07/SilverlightBookCover.Source.zip. Simply extract the content to a local folder, and then open the file SilverlightBookCover.sln in Blend.
If you don’t want to use the proposed animation but instead create your own XAP file, feel free to do so. After you build the application, the XAP file is found in the bin/debug folder.
Modifying the Markup
To include the new Silverlight logo, open the file index.html in a text editor of your choice, and follow these steps:
1. The original markup we want to replace is in Listing 7.5:
<!--Book cover-->
<img src=′resources/SL2U-web.png′
alt=′Silverlight 2 Unleashed′
title=′Silverlight 2 Unleashed′
style=′width: 470px;height: 445px;′ />
2. Replace this markup with the markup as in Listing 7.6:
<!--Silverlight-enabled book cover animation-->
<div id=″silverlightControlHost″>
<object data=″data:application/x-silverlight,″
type=″application/x-silverlight-2″
width=″100%″ height=″100%″>
<param name=″source″ value=″resources/SilverlightBookCover.xap″/>
<param name=″background″ value=″Transparent″ />
<param name=″windowless″ value=″true″ />
<!--″Static″ book cover-->
<img src=′resources/SL2U-web.png′
alt=′Silverlight 2 Unleashed′
title=’Silverlight 2 Unleashed′
style=’width: 470px;height: 445px;′ />
</object>
</div>
3. See how we keep the original img tag within the Silverlight object tag? This is the content that will be displayed if Silverlight is not available.
4. To display the Silverlight logo in the center of the screen, we need to add some CSS code. In the header section, on top of the page, under the other .css file, add the code in Listing 7.7:
<!--Silverlight Animated Logo-->
<style type=″text/css″>
#silverlightControlHost
{
height: 445px;
width: 470px;
margin: auto;
}
</style>
Testing the Result
Open the file index.html in a web browser.
You should now see the animated book cover, as well as the famous Silverlight logo running as a movie in the top-left corner. Notice also that the TextBlock “Powered by Microsoft Silverlight” has a color animation.
If you resize the browser window to a very narrow size, the Silverlight logo (an image) appears on top of the book cover, which is exactly what we wanted.
Try and open this page on a computer without Silverlight, and see that the original static picture is indeed displayed. On Internet Explorer, you can simulate this behavior by deactivating the Silverlight plug-in with the following steps:
1. Select Tools, Manage Add-ons, Enable or Disable Add-ons.
2. Locate Microsoft Silverlight under Add-ons Currently Loaded in Internet Explorer.
3. Select the Disable radio button and click OK.
4. Refresh the page. You may have to close and restart the web browser to see the change.
5. Keep this code; we will reuse it in the next chapter!
Referencing a XAP on Another Web Server
We mentioned before that Silverlight can display a XAP file located on an external web server. This can be handy if you want to add Silverlight content to a website on which you cannot load any XAP files—for example, a blog. Depending on your blog provider, you may be able to add the object tag, but you must host the XAP content yourself.
In the preceding example, we downloaded the XAP file from the website www.galasoft.ch. Let’s see whether we can now reference this XAP file directly, without downloading it first. Follow these steps:
1. In the file index.html that we just edited, replace the source parameter in the object tag with the following:
<param name=″source″
value=″http://www.galasoft.ch/SL2U/Chapter07/SilverlightBookCover.xap″/>
2. Reload the page index.html in the web browser.
3. The Silverlight application doesn’t show up.
So what happened? This is a permission problem. We mentioned earlier that there are some differences between running your application in File mode or in HTTP mode. This is one of them: A web page running in File mode may not execute Silverlight code loaded over HTTP.
As a workaround, you can copy the file index.html as well as the folders “resources” and “layout” to your own web server, as explained later in this chapter. If the file index.html runs in HTTP mode, you can load the XAP from the GalaSoft website and you will see the animated logo.
Because the remote XAP file needs more time to load, you may see a subtle animation showing the download percentage (see Figure 7.5). This animation is built-in in the Silverlight plug-in, and you don’t need to do anything to make it appear.
Figure 7.5 Silverlight download animation
Getting Web Space
A web server must be online 24/7, be resilient to errors, be able to sustain a lot of traffic without crashing, and in the worst case, be able to “crash gracefully” and either restart on its own, or give the provider enough information to be able to put all the websites online, fast.
This is not an easy task for a computer to fulfill. In fact, servers usually run on specialized systems (hardware and software) and are set up and monitored by specialists.
Fortunately, improvements in hardware and software, as well as intense competition, has made commercial web server space very affordable. Space on a typical, high-quality web server costs less than $10 a month, including server space around 1GB or more, email server, around-the-clock support, and so on.
A website such as www.free-webhosts.com can help you in your quest for inexpensive or free web space.
Web Server Requirements
Serving a Silverlight application requires no special equipment (software or hardware) whatsoever. Since the code is executed on the web client, the Silverlight runtime needs to be present only on the client.
It is perfectly okay to serve Silverlight from any web server, such as Apache running on Linux, Unix, and so on. For the web server, a Silverlight application is just a collection of files, which will be sent on request. The whole work is done on the client only.
Finding a Provider
That’s the tricky part. There are just so many of them. A search online for “cheap web server provider” returns hundreds of thousands of addresses. In general, it’s a good idea to try a few providers before settling on one. Most of them offer trial periods. A few rules can make the choosing process easier:
Try to find out where the support is located. Do they even speak your language? Are they in your time zone? Can they be reached by phone, or only by email, or using a web-based ticketing system? Is support available round the clock?
Try placing a request and see how fast the support answers. You may want to ask for your password, for example. Do you get a standardized answer (or no answer at all), or is someone really answering?
During the trial period, try to access your website often. Is the web server down sometimes? If it is, did you get a notice? Is the outage documented in a log?
Try to find user reviews about the provider you choose. Sometimes you can find interesting information in forums. Users who have had bad experiences are readier to share them, so no review may be a good review.
Ask your friends and your peers. Many of them have stories to share.
Compare, compare, compare. The provider’s site should give a clear indication of what they’re selling. Don’t forget, there are many of them, so as the customer, you can afford to be picky!
To sum up, reputation, good technical support, and few (or no) outages are the criteria you’re looking for.
Getting Started with FTP
After you get server space, your provider will give you the following information:
FTP host—This can be an address such as ftp.myprovider.com or an Internet Protocol (IP) address like 167.247.4.32.
A username and password for your account.
This information is needed to connect to your web server using an application called an FTP client.
Setting Up an FTP Client
A few good FTP clients are available. Depending on the operating system you are using, you will need a specific FTP client. A good search on the Internet allows you to get a good free (or cheap) client. While the illustrations will be different for your FTP client, it should be easy to adapt them to your case.
For the purpose of the demo, we use a free application named Core FTP for Windows, which provides all the functionality you need for no money. This application can be downloaded from www.coreftp.com and installed with the following steps:
1. After downloading the setup program, execute it and follow the instructions to install the application. You can select all the default options.
2. Start the program. The dialog shown in Figure 7.6 is displayed.
Figure 7.6 Setting up a new connection
3. If it’s the first time you start the program, or if you just got a new server, you must set up a connection:
Site name—This is just a friendly name for this connection.
Host/IP/URL—This information is given to you by your provider.
Username/Password—This information is also given to you by your provider. Do not check the Anonymous check box.
If you prefer, you can check the Don’t Save Password check box. This is recommended if you are using the FTP client on a public unprotected computer.
All the other information can be left untouched.
4. Click the Connect button.
Connecting to Your Server
The FTP client displays two lists of folders (see Figure 7.7):
On the left-hand side, you see your local file system. You can use this panel to navigate to the folder containing your Silverlight application.
To navigate upwards from a given folder, double-click on the folder named “..”, or click the Up Directory button.
On the right-hand side, you see the web server’s file system. You can only navigate in your own space and cannot see or access other users’ folders. Using this panel, you can manage (create, rename, delete) folders and files on the server.
The bottom panel displays information about the current transfer (if there is one).
The top panel shows a log of the current connection. In most cases, you can ignore this information.
Figure 7.7 FTP client main window
Copying Your Silverlight Application
Silverlight 2 makes deploying a Silverlight application easy. All files needed are packed in the XAP file. That said, your application will typically need additional files, such as HTML, JavaScript, images and videos, and so on.
Table 7.1 gives an overview of all the file types found in a typical Silverlight application, with a short explanation. Some file types will become clearer as we progress in our exploration, but this table should already provide a handy guide as to what you should and should not copy to the web server.
Table 7.1 Copying Files to the Web Server
Even though a file or folder is marked “not needed,” it doesn’t harm your web server if you copy it anyway. In some cases, it can even be a good idea to copy all the files to the web server—for example, for tests, as a backup, and so on.
To upload the files, follow these steps:
1. In the right-hand panel, navigate to the folder in which you want to upload your Silverlight application.
2. On the right-hand panel, click the Make Directory button to create a new directory for your application if needed.
3. Select a file, a group of files, or a whole folder in the left-hand panel.
4. Click the Upload button.
It is actually easy to check whether a given video or image file must be copied as a loose file to the web server, with the following steps:
1. Open the XAP file with WinZip or any other Zip utility. Since the XAP is simply a Zip file, you can see the content and check whether the video or image file is included.
2. Alternatively, do not copy them to the web server first and then test the application. If the media is displayed correctly, everything is fine. if not, you need to copy it to the web server. Call this an empiric method.
Testing Your Work
After you copy all the files mentioned in Table 7.1 to your web server, you can test your work in the web browser.
The address you enter in your web browser depends on the location in which you copied the Silverlight files. The entry point for your application is the HTML file in which the silverlightControlHost element is placed.
If you copied your Silverlight files on your web server http://www.mydomain.com and placed them in the folder Silverlight/MyFirstApplication, then the complete address is: http://www.mydomain.com/Silverlight/MyFirstApplication/Default.html.
Summary
In this chapter, you got a better understanding of the object tag needed to place a Silverlight application in an HTML page. You saw how a XAP file is used to pack the items needed to make the Silverlight application work. You also learned what you can do if Silverlight is not installed, or if the version installed is too old for your application’s needs.
Then you used that knowledge in a small practical exercise and added a “rich island” of Silverlight functionality within standard HTML content. Importantly, you learned how Silverlight can load XAP files located on an external web server, and how this feature can be used to add Silverlight content to a blog or another website.
In the second half of the chapter, we talked about web space, web providers, and FTP clients needed to deploy the Silverlight application to a web server.
After this chapter, you should be ready to enhance your web page with Silverlight! In the next chapters, we see how Visual Studio can assist us to make the deployment even easier, but you are now already able to deploy some applications manually.