Friday, 25 July 2008

Firefox 3, XAML, Silverlight (and Windows 2000 Pro)



Firefox 3, XAML, Silverlight (and Windows 2000 Pro) with Apache for local serving.

I got distracted because I am old ;-) and it works and I'm stuck with my tiny via TX series and that's fine. This machine "only" runs Windows 2000 + SP4 + loadsa patches, firewall, FF3. I wasn't expecting much Silverlight joy.

Installing Silverlight Beta 2 on Windows 2000 Pro

Download and install Silverlight 2 beta 2. I got an error message afer installation from the installer but just ignored it and restarted Firefox. Well, I kind ignored it and have yet to hit a problem. It worked! I could view XAML content on Win2K.x

Setting up Apache to Server XAML File

I used Apache to setup another local HTTP server for me. This one lives on 127.0.0.13 and will be used to server up files. My servers live at E:\servers\SomeServerName under this is public_html. In this case that server directory is called 1313.

Open Apache's conf\httpd.conf file and add a new host. If you want to name it edit %SYSTEMROOT%\System32\drivers\etc\hosts ...
<VirtualHost 127.0.0.13>
ServerAdmin wbmstr@1313.co.uk
ServerName 1313
DocumentRoot "E:/server/1313/public_html"
</VirtualHost>
Then add this to control access permissions on the folder ...
<Directory "E:/server/1313/public_html">
Options Indexes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
</Directory>
We will need to also edit Apache's mime.types file. To this add ...
text/xaml   xaml
This will set the Content-Type header to text/xaml when serving a file ending in the .xaml extension.

You may want to make sure that Listen is set to 80. If it isn't change port numbers elsewhere. You have several options.

Now you should restart Apache.

Now go to Firefox 3 and enter http://127.0.0.13/xaml.html

Not much yet. Let's put those files in place.
  1. The latest "Silverlight.js" from http://code.msdn.microsoft.com/silverlightjs
    Save this as E:\server\1313\public_html\Silverlight.js

  2. A .xaml file to try. XML version is important. There are many
    Save this as E:\server\1313\public_html\plugin.xaml
    <?xml version="1.0" encoding="utf-8"?>
    <Canvas xmlns="http://schemas.microsoft.com/client/2007">
    <TextBlock>Some text... don't ask me what will happen cos' I don't know...</TextBlock>
    </Canvas>

  3. An HTML file in which to host your Silverlight/XAML control.
    Save this as E:\server\1313\public_html\xaml.html
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>My Silverlight Application</title>
    <!-- Helper files for initializing and creating the Silverlight plug-in -->
    <script type="text/javascript" src="Silverlight.js"></script>
    </head>
    <!--head and html tags omitted-->
    <body>
    <P>Expect silverlight below...</p>
    <div id="slPluginHost" >
    <script type="text/javascript">
    // Create a variable that references the HTML element that hosts the plug-in.
    var parentElement = document.getElementById("slPluginHost");

    Silverlight.createObjectEx(
    {
    source: 'plugin.xaml', // Source property value.
    parentElement:parentElement, // DOM reference to hosting DIV tag.
    id:'myPlugin', // Unique plug-in ID value.
    properties:
    { // Plug-in properties.
    width:'100%', // Width of rectangular region of plug-in, in pixels.
    height:'100%', // Height of rectangular region of plug-in, in pixels.
    background:'blue', // Background color of plug-in.
    framerate:'24', // MaxFrameRate property value.
    version:'2.0'
    },
    events:{
    onError:Silverlight.default_error_handler
    },
    initParams:null, // initParams property value -- user-settable string for information passing.
    context:null,
    }
    ); // Context value -- passed to Silverlight.js onLoad event handlers.
    </script>
    </div>
    </body>

  4. 4 - Install Firebug. It's as good as it gets at the moment.
Debugging

Debugging is primitive but useful and is enabled in the example xaml.html file.

The property onError is set to Silverlight.default_error_handler.

This function is part of Silverlight.js and will produce a Javascript alert dialogue when Silverlight detects an error.

To disable the debugging alert remove the onError handler.

Silverlight Beta 2 Support

NOTE. Support for Silverlight Beta 2 is slightly fuzzy. Whilst you can force support for Beta 2 by specifying a property within the properties member of the silverlight.createObjectEx call. Add
version:'2.0.30523'.
However, the HTML object created will have the type attribute type="application/x-silverlight-2-b2".

By looking in navigator.plugins with Firebug showed that both mime types application/x-silverlight and application/x-silverlight-2-b2 invoke version 2.0.30523.8 of npctrl.dll.

The only difference is that application/x-silverlight is bound to suffix .scr. Strange.

Signing off...

No comments: