Web Development Adventures in a .NET world

Can’t view pages from the Web Development Server (Cassini)

ola karlsson — Wed, 18 Mar 2009 03:25:31 GMT

Are you all of the sudden getting “Internet Explorer cannot display the webpage” / “Address Not Found” when trying to run a web application from inside Visual Studio?

This caused me a fair bit of headache yesterday, so now that I found the solution, I figured I’d try to spread the word.

Basically what’s happened is that an update for “Windows Defender and Microsoft Forefront Client Security” in the form of a new signature file was released on the 9th of March (Signature versions 1.53.283.0). This update was to address possible scenarios where a machines host file might get changed by a trojan or the like. Unfortunately however this had the side effect on some systems that the localhost entry in the host file was removed or corrupted, leading to any attempt to got to http://localhost/[whatever] will fail.

The solution as outlined in the links below in further detail, is to re-add the localhost entry (127.0.0.1 localhost) to your host file (C:\Windows\System32\drivers\etc\hosts).

I appreciate that these things are important etc. but for [insert appropriately bad word here] sake Microsoft, if you push out potentially breaking changes let us know!

In my case what happened was that, as a good Windows user I have automatic updates turned on and I let the machine restart when it needs to etc. Yesterday, after I’d not used Visual studio on my laptop for a couple days, all of the sudden while sitting on a bus trying to do some Silverligth stuff, I couldn’t display any html pages when running then from VS. After some attempts at working out what the heck was going on and being on a bus with no internet connection I had to give up and pack up my laptop. Later after 30 min of Googling I found these two post helping me work out what had happened.
ASP.NET Web Development Server Stops Working
Visual studio Development Server problem in Vista

So I guess Microsoft had let us know in the way that the “Visual Web Developer team” let us know on their blog but come on, this should have been more publically announced in some way, according to some of the comments there are people out there who have struggled for days with this issue. I’m not really sure how they should have done it and maybe I’m just irritated because I got stung, lesson learnt from this. Turn off the automatic update and apply updates manually, once you know what they’re doing!

Happy coding :)
Ola

The Alternative Podcast List

ola karlsson — Tue, 10 Feb 2009 14:43:00 GMT

Earlier today I noticed a new post on Scott Hanselmans blog, where he lists potential technical podcasts for .Net developers and asks other to put up their lists.

Now, most of the ones on his list are pretty much the same as I subscribe to, but having quite an interest in non .Net web development and RIA etc. I do have a couple he’s not mentioning.

I figured I’ll just add the ones which are a bit different from the ones mentioned on Scots' list.

Pixel8ed http://getpixel8ed.com
This is a podcast by Craig Shoemaker, who also does the Polymorphic podcast, where the Polymorphic podcast is aimed at general programming and .Net concepts. Pixel8ed is focused on UX and related ideas and areas.
RIA Weekly http://www.riaweekly.com/
A podcast dedicated to news in the RIA space. Even though the podcast is sponsored by Adobe and one of the hosts is Ryan Stewart, a platform evangelist for Adobe, they do a pretty decent job of covering news across the board, not just Adobe specific things.
Boagworld http://www.boagworld.com/
”A podcast for those who design, develop or run websites”, a podcast mainly about web design but also covering thing like accessibility and web standards.

February Perth .Net UG Silverlight talk

ola karlsson — Mon, 09 Feb 2009 13:02:00 GMT

Thursday last week I did a presentation on RIA and Silverlight for the Perth .Net Community of Practice and as promised here’s the links from the presentation.

Some great examples of how RIA can be used to enhance the user experience of a website.
http://silverlight.net/samples/sl2/silverlightairlines/run/default.html
http://maps.google.com
http://memorabilia.hardrock.com/

Where does the desktop end and where does the web start, RIA blurring the lines
https://www.photoshop.com/express/landing.html

RIA Benchmarking, Bubbelmark is an animation test to practically benchmark different RIA technologies against each other.
http://www.bubblemark.com

Shine Draw(http://www.shinedraw.com/) – Flash vs Silverlight repository, compares various animation effects implemented in Flash and Silverlight and lets the visitors vote which is better.

Thanks to everyone who came to the presentation, if you have any feedback or questions, don’t hesitate to drop me a line.

Cheers.

Blogging, Life and jQuery

ola karlsson — Sun, 18 Jan 2009 14:22:26 GMT

Soooo, it’s been a bit quiet here lately, eh.

Well as per always, life got in the way. Between work, family and life in general, there just haven’t been much time for anything else. However as things are slowly calming down, I’m now hoping to get back into the swing of things with the blog!

The title says “Blogging, life and jQuery”, what’s that all about? Well firstly I thought I’d talk a bit about that changes I’m wanting to make to this blog. Then as part of of those changes, I’ll talk a bit about what’s been going on in my world in general.

Blogging

I’ve decided to try and make some changes to this blog. When I started blogging, I tried to make my posts very focused, “professional” and tutorial like. However that style of posts require lots and lots of time and effort to produce. I would still like to post tutorials every now and then but they wont be very frequent.
So instead to get some more life into the blog I’ll try to make more frequent posts reflecting what ever is on my mind at the time, a little bit like the later posts before “the big silence”.

Life

Well as a father of two, a three and half year old and a 6months old. I can tell you one thing for certain, the people who say that once you have one child, you might as well have two, because there’s not much difference in the effort involved looking after them, they’re lying! That said I wouldn’t change a thing!
However having a young family, means there’s not much time for extra curricular activities and take a way time for some sports activities to keep me at least reasonably fit, I’m afraid the old computing passion has had to go on the back burner to some extent.

jQuery

Ok time to get something web dev related in this post. I was recently fortunate enough, to be on a project which involved developing a product/plan recommendation engine/app, for one of our clients. The fortunate thing about this was that it was to be done all in jQuery.

Not having worked with jQuery before, it was quite a learning curve. However seeing as there’s been a alot of talk about jQuery lately with the announcement of it being endorsed by Microsoft and everything. I was looking forward to getting a chance to having a look at it.

Basically it took me and another developer a couple of weeks to get our heads around it but in the end we got the job done and it’s now up and running, you can check it out here: http://www.iinet.com.au/needhelp/

Silverlight

What about Silverlight? The blog has up until now been very focused on Silverlight, will this change? Not really, as I mentioned earlier I’m hoping to getting some more general content in here, but Silverlight is still very much one of my main interest when it comes to web development.

And that being the case I’m exited to announce that the Perth .Net User Groups’ February presentation will be on Silverlight 2 and it will be presented by no ne less then myself and Stephen Price. We’ve still not locked down 100%, what we’ll cover etc. but it should be a good evening. So if you’re in or around Perth make sure you come and check it out :)

Cheers,
Ola

Silverlight 2 RTW on Monday?

ola karlsson — Sat, 11 Oct 2008 14:38:00 GMT

I just spotted this on Twitter and I must say this is looking good!

Basically Microsoft came out yesterday on their PressPass site, with a press release saying that there will be a teleconference on Monday (13 October) where ScottGu (Scott Guthrie) will make a "significant announcement related to Microsoft Silverlight".

I did some poking around on the internet and found one or two mentions of this, at ZDNet and on Kurt Brockett's blog but that was it, for some reason, maybe because it's weekend? This doesn't seem to have been covered much on other blogs, so I thought I'd spread the word :)

On Kurt's blog there are some comments discussing the possible release, and among others, there's a comment by Adam Kinney hinting that he's busy upgrading his Beta 2 projects for release. Someone else however is saying that Silverlight 2 won't be released on Monday, and that it will just be an announcement about the release date.

Either way, exiting stuff, bring on Monday!!

NFL Flash Player

ola karlsson — Fri, 05 Sep 2008 06:37:00 GMT

As per my last post the US National Footaball League (NFL) have choosen to go with Adobe and Flash to provide online video and media content. A couple of people like Gilbert Corrales and Ryan Stewart have already had a look at the look and feel of the player and some of it's features. Notable features include 5 concurrent feeds giving the possibility to swap between cameras etc. Unfortunately, just as with the NBC coverage of the Beijing Olympics using Silverlight, the content on the NFL site is US only. So unfortunately no NFL Flash goodness for the rest of us.

Adobe to power NFL on the web, the race is on!

ola karlsson — Fri, 05 Sep 2008 05:51:00 GMT

The US National Football League (NFL) and Adobe, yesterday announced that NFL has chosen Adobe Flash technology to deliver their online video content.

Personally I think this is great! But why you might say, aren’t you one of those Silverlight fan boy types?

Well even thought there might be some truth in that ;) I think looking at the bigger picture, this can only be a good thing. Adobe taking a step like this after Microsoft’s deal with NBC to broadcast the Beijing Olympics, now means the race is on for who’s technology will get to provide us with rich media content over the web. This means competition, competition in a market, which for quite a while now has been dominated by Adobe. As I’ve previously pointed out, I don’t think Silverlight will be the Flash killer media like to portray it as, but rather I think that it will provide some healthy competition to Adobe’s Flash / Flex platform. I very much look forward to seeing how this will play out. Hopefully it will mean better service to all the users on the web and better tools for us developers.

Animated Silverlight Panel on top of Html

ola karlsson — Fri, 01 Aug 2008 12:19:00 GMT

As promised, here's my article from the "Silverlight: write and win" competition.

A live example of the finished outcome can be viewed here: http://olakarlsson.com/SL2Beta2FlyoutDemo/SL2Beta2FlyoutDemoTestPage.aspx and the source can be downloaded from http://olakarlsson.com/downloads.aspx

Overview

In this article we’ll be looking at the concept of adding interactive Silverlight elements to existing Web pages to provide added rich features. We’ll be looking at creating an animated Silverlight panel which will slide in from the side of the browser window when a button is clicked.

The somewhat tricky bit is that we want the panel to lie on top on the normal HTML content of the page and when when the Silverlight UI is slid out we want to be able to interact with the HTML instead.
Why did I decide on this topic:

Working as an asp.net developer and having a keen interest for web development in general, I find this way of using Silverlight quite interesting but I have also found that it is not covered very much on the web at the moment.

Concepts and tools we’re using

Tools

Visual Studio 2008 with the Silverlight 2 Beta 2 tools installed
Blend 2.5 June Preview
C#

Concepts

Visual State Manager
Silverlight/Managed Code - DOM/JavaScript interaction
XHTML/CSS
Controlling the SL Plugin

First there was creation

First thing's first, open Visual Studio and create a new Silverlight 2 project/solution to get the full structure including a asp.net test project.

I created a new .Net 3.5, C#, Silverlight project and chose to add a Web Application project to test my Silverlight UI in.

(I only chose “Web Application” because that’s what I’m used to working with, you could as easily use a “Web Site” project.)

Once the IDE has finished loading our new solution, we want to open the page.xaml file in Blend, so we can create the Silverlight UI interface.

Blending it up

In Blend, we now create our Silverlight interface.

For this demo I will simply use the default LayoutRoot grid and change the size to 200×300. However to create the effect we want, we then set the size of the usercontrol to 220×300.

Next drag on a button which we give a size of 20×40, then drag the button into position just outside the upper right corner of the grid. This is probably not the most elegant layout solution but as this article is about browser interaction and animating with Visual State Manager and not about advanced XAML layout, it’s good enough.

As a bit of a nice touch, we’ll make the background a dark semi transparent colour so that one implemented we’ll still be able to see a hint of the HTML content underneath it. To finish our UI, we also drag on a TextBlock, I then gave the controls the amazingly colourful names of “myText” and “myButton”. I also changed the foreground colour and font properties for the TextBlock so it will stand out a bit. This gave me the following:

<UserControl x:Class="SL2Beta2FlyoutDemo.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml
    Width="220" Height="300"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
    <Grid x:Name="LayoutRoot" Background="#35000000" RenderTransformOrigin="0.5,0.5" Width="200"      HorizontalAlignment="Left">
        <TextBlock Height="35" HorizontalAlignment="Stretch"
            Margin="41,42,45,0" VerticalAlignment="Top" FontSize="22"
            Foreground="#FFE25B1C" Text="TextBlock" TextWrapping="Wrap"
            x:Name="myText" FontWeight="Bold" />

        <Button HorizontalAlignment="Right" Margin="0,-1,-20,0"
            VerticalAlignment="Top" Content=">" Click="myButton_Click" x:Name="myButton"
            Width="20" Height="40"/>
    </Grid>
</UserControl>

Next we move on to use the new Visual State Manager to create our slide out, slide in effect. The Visual State Manger (VSM) is located in the upper left corner and lets us define visual “states” for our UI elements and group these states into “State Groups”. For our UI I defined a State Group called SlideStates and then added two States name Out and In, to it. Note that in VSM there is always a Base State which defines the default state/view in addition to any states you create.

Our next step is to define the base state of our UI, in our case we want create an effect where the UI comes sliding in from the side.

To accomplish this we first select the Base state, then we make sure the correct element is selected (the LayoutRoot grid) and finally we make any necessary adjustments. Since our UI is to slide in from out of view, it needs to start outside the screen, hence we set the x value for the LayoutRoot grid to a minus of its own width (in this case -200). This will set the main section of our UI off the screen but leaves the button on screen.

Next we move on to defining our own states, as the Out state in fact will be the same as the Base state we don’t actually need to make any changes to it.

In the case of the “In” state however, we want the UI to be on screen. As per when we set up the base state, we select the state, then the element and finally make any adjustments. In this case, to bring the LayoutRoot grid back onto the screen we simply set the X value back to 0.

We can now preview the behaviour by clicking on out different states and seeing what happens. However if we were to run this as it currently is, the transition between the states would be pretty much nonexistent, so to get a nice animated transition between the states we use the “Transition Duration” in VSM, here I’ve set it to 0.4 of a second, meaning that, 0.4sec is the time it will take to transition from one state to another.

We could also add more specific transitions of we wanted by using the Add Transition buttons, however for our simply demo, the Default Transition setting works perfectly fine.

Back to where we started (in VS2008)

With those final adjustments in Blend, it’s now time to go back to Visual Studio (VS), so make sure you have saved the changes and go back into VS, when asked if you want to reload the XAML, answer yes. NOTE: When the design surface in VS loads it will display and error message and won’t show the UI we created in Blend, this is a known bug and the good news is that the project will actually still build and when it’s run in the browser it should work fine.

So we now move from the world of XAML into the world of HTML, CSS and JavaScript. For this demo, I’m using the automatically created test page SL2Beta2FlyoutDemoTestPage.aspx, first step is to get the Silverlight plugin on top of the HTML. And to accomplish this we need to edit the default setup somewhat.

We’ll do it in a few steps:

1. To start with I’ve changed the size of the plugin, building a full Silverlight app the size of the Silverlight plugin is usually set to 100% width and height, however if we want to use it together with the HTML, we need to change it to match the actual size of your XAML/Silverlight element. We will also revisit these setting later when creating our slide in, slide out effect. This gives us the following:

<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/SL2Beta2FlyoutDemo.xap"
MinimumVersion="2.0.30523" Width="220" Height="300" />

2. Next we add another <div> tag with some HTML content, just after the div that holds the Silverlight plugin. (I’ve also set the background of the page to a gray colour so we can see better what’s happening with our Silverlight plugin).

<body style='height:100%;margin:0;background-color:#CCCCCC'>
    <form id="form1" runat="server" style='height:100%;'>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div id="SLDiv" >
            <asp:Silverlight ID="Xaml1" runat="server"
                Source="~/ClientBin/SL2Beta2FlyoutDemo.xap"
                MinimumVersion="2.0.30523" Width="220" Height="300" />
        </div>
        <div id="contentDiv" >
            <h2 style='text-align:center;'>Lorem ipsum dolor sit amet</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vestibulum lacinia tortor eros.</p>
            <p>Sed ornare ullamcorper lacus. Ut vel risus. Vestibulum laoreet ligula et, per inceptos himenaeos. Nulla ipsum. Nullam metus. </p>
            <p>Sed nisl nisi, sagittis non, ullamcorper ac, . Aliquam erat volutpat. In hac habitasse platea dictumst. Nunc vehicula enim et justo. </p>
        </div>
    </form>
</body>

All this will do however is to add some Content text on the page after our Silverlight plugin. You can note thought that we now can see the first part of our UI on the page!

3. To actually get the Silverlight area on top of the other content we turn to the power of CSS, and make the following changes:

<div id="SLDiv" style='position:absolute; left:0; top:0; z-index:2;'>

<div id="contentDiv" style='position:absolute; top:0; left:0; z-index:1;'>

Basically, we’re using CSS to lock the two divs in absolute positions and then we use the z-index attribute to layer them on top of each other (higher number = higher up in the stack). These changes give us quite a different result, where the Silverlight plugin is layered on top of our HTML content.

Now some of you might be saying, “Hey, what happened the transparency we set back in Blend?”
Well, what we did in Blend was that we set the XAML to be semi transparent, but to get the actual plugin transparent there’s a couple of things we need to change in how we set up the plugin on our page. Namely we need to add the two new parameters, Windowless and PluginBackground to the Silverlight control:

<asp:Silverlight ID="Xaml1" runat="server"
                Source="~/ClientBin/SL2Beta2FlyoutDemo.xap"
                MinimumVersion="2.0.30523" Width="220" Height="300"
               Windowless="true" PluginBackground="Transparent" />

If we now run our page again, you should find that the Silverlight plugin area is no longer visible, so where’s our UI? Well all is as it should, as you might recall, the base state for our XAML UI is actually to start off page, hence we can’t see it!

However, to make things a bit easier for ourselves while working with the plugin, we’ll change the PluginBackground to Black for now, so we can see the plugin area.

But I want to see the rest of my XAML UI

Ok fair enough, this is all very exciting but I’m sure by now most of you want to see if this actually works?!

Well lets get coding! So to prove to you that this actually works, we’ll go over to VS and open up the code behind file for our XAML file “Page.xaml.cs”. Just as a quick test we make the following change to the Page method:

public Page()
        {
            InitializeComponent();
            VisualStateManager.GoToState(this, "In", true);
        }

All this does is that it tells the VSM, that our current control (this) should go to the state “In”, the final boolean value decides whether a transition should be used. If you now go ahead and compile the solution and run the page, you should see our XAML UI slide in from the left hand side in all its glory! (Minus the transparency of course but we’ll get back to that later)

So how do we control this? We don’t want it coming in when the page loads! Well head back into code land.

Take control

Step one of taking control of our animated UI is to create a new event handler for out button, open the XAML view of Page.xaml, in the tag for the button, add a Click event:

Next right click on the new event and select “Navigate to Event Handler”, this will take us into the code behind file straight to the newly created event handler. Once there, simply move the line for the VSM interaction from the Page method into the new event handler. In the code behind make the changes to make it look like the following code:

public partial class Page : UserControl
{
    String state;

    public Page()
    {
        InitializeComponent();
        state = "out";
    }

    private void myButton_Click(object sender, RoutedEventArgs e)
    {
        if (state == "out")
        {
            VisualStateManager.GoToState(this, "In", true);
            state = "in";
            myButton.Content = "<";
        }
        else
        {
            VisualStateManager.GoToState(this, "Out", true);
            state = "out";
            myButton.Content = ">";
        }
    }
}

Basically we’ve set up a variable to hold the current state of the control, then we’re using the Click event handler to slide the UI in or out based on the value in out variable. Just as an extra touch I also change the content (text) of the button to reflect which direction it will go when clicked.

So if we now set the PluginBackground to Transparent, we’re done right?!

We’ll, almost, the problem we’ll run into with our project that way it is currently. Is pretty plain to see while we don’t have the PluginBackground set to Transparent, as the Silverlight plugin is layered on top of our HTML, it stops us from interacting with the HTML below. Setting the PluginBackground will let us see what’s underneath, but as I’ve been pointing out to people when discussing these kind of implementations, just because you can see it doesn’t mean you can click it!

So how do we solve this problem? In steps JavaScript to save the day!

Two worlds come together

To solve this issue, we’ll use JavaScript to change the size of the Silverlight plugin container.

First we need to make a couple of adjustments to the Silverlight plugin tag, we’re adding a OnPluginLoaded event which I’ve set up to call the JavaScript function “PluginLoaded”. That function will be used to get a JavaScript reference to the Silverlight plugin object.

We also set the width of the plugin to 20(the width of our button), this so that our button appears but the rest of the Silverlight area isn’t hindering us from interacting with the HTML. As we’re not changing the height there will be a narrow strip left but if we really wanted to we’d just change that as well.

Next we go into our Page.xaml.cs file and add a "using System.Windows.Browser; " then modify our Click event handler to what's shown below.

Then once we have the System.Windows.Browser using statement in place, we can use HTMLPage.Window to get a reference to the browser window and thereby interact with it from our managed code! CreateInstance, simple calls and executes the JavaScript methods defined.

private void myButton_Click(object sender, RoutedEventArgs e)
{
    if (state == "out")
    {
        VisualStateManager.GoToState(this, "In", true);
        HtmlPage.Window.CreateInstance("GrowHorisontal");
        state = "in";
        myButton.Content = "<";
    }
    else
    {
        VisualStateManager.GoToState(this, "Out", true);
        state = "out";
        myButton.Content = ">";
       HtmlPage.Window.CreateInstance("DelayedShrink");
    }
}

Next step is to add the necessary JavaScript functions to the header section of out aspx page:

<head runat="server">
    <script type="text/javascript">
        var slCtl = null;

        function pluginLoaded(sender)
          { // Get a refernce to the Silverlight plugin when the page loads
             slCtl = sender.get_element();
          }

        function GrowHorisontal()
        {
            //Grow the width
            slCtl.style.width='220px';
        }

        function DelayedShrink()
        {
            //Delay the call to the actual shrink function to let the animation finish before shrinking the area
            setTimeout(ShrinkHorisontal, 500);
        }

        function ShrinkHorisontal()
        { //Shrink the area
            slCtl.style.width='20px';
        }
    </script>
    <title>Test Page For SL2Beta2FlyoutDemo</title>
</head>

Pheew, well the good news is, we’re almost done!

The only real thing that remains is to set the PluginBackground to Transparent and we’re done, if you’ve made it this far, give yourself a pat on the shoulder from me, well done for sticking with it.

The final thing I did was to set the background colour of the HTML body back to white to better see the Silverlight UI.

Conclusion

Using the new Visual Sate Manger we were able to very easily create a animated Silverlight and using JavaScript and CSS we dynamically slid the Silverlight on top of the HTML without hindering interaction with the HTML.
References:

Results of the "Silverlight: Write and Win contest"

ola karlsson — Fri, 01 Aug 2008 05:11:00 GMT

As I mentioned in my last post, I entered an article in the "Silverlight: Write and Win contest" run by Michael Sync over at his blog.

Well, the results have been published and I was happily surprised to find that my article with the somewhat cryptic name "Silveright FlyoutPanel", actually ended up in second place!! :)

I must say I'm very happy with the result, especially after having to pull a couple of really late nights to get the article in on time. If you happen to have read the article over at Michael's blog and voted for it, thank you very much :)

As far as the name "Silveright FlyoutPanel" goes, basically the article describes how to create an animated sliding panel in Silverlight, and then laying it on top of an existing html page without restricting the access to the html content.

I need to make a couple minor changes to the article then I'll put it up here as well and make the source available.

Silverlight 2 writing competition

ola karlsson — Sun, 27 Jul 2008 04:44:00 GMT

If you've not come across it yet, Michael Sync is running a conpetition for best Silverlight 2 article over at his blog http://michaelsync.net/.

There's about 10 or so submissions on various Silverlight 2 topics, all well worth checking out.

And while you're over there din't miss the chance to vote for my article Silveright FlyoutPanel ;)

Web services, VSM, DOM interaction and other goodies

ola karlsson — Tue, 01 Jul 2008 17:16:40 GMT

I’ve been playing around with a pet project lately calling web services, using VSM and interacting with the DOM etc.and I've finally gotten it to a state where I reckon it's wort show it to people without feeling ashamed ;)

I’ve implemented it on http://www.olakarlsson.com/ , excuse the sparseness of the site, it’s a work in progress ;), what you’re looking for though is in the upper left corner of the browser window, it’s the “myFlickr” button.

I’m planning on trying to do a proper write up about it at some stage but to family commitments, it might not happen for a while....

A quick glance at the things that have gone in there however

· Calling Flickr Web service

· Using VSM for the UI

· Some Templates for the buttons

· Interaction with the HTML Dom and JS

The big one in my opinion, and which I’m pretty please with how it worked out is, that the flyout overlays the HTML but when it’s in the “out” state, it takes the div for the Silverlight HTML plugin with it, out of the window, so You can still interact with the HTML underneath, I hope that makes sense.

There’s some work still to be done, especially in the transitions between different states and some of the button effects etc., also it would be nice to pull in the info about the selected image from Flickr. But that's for version2 :)

Any constructive feedback is welcome.

Cheers,

Ola

Silverlight 2 Beta 2 has been released

ola karlsson — Mon, 09 Jun 2008 13:23:00 GMT

Following my post last week about the imminent release of Silverlight 2 Beta 2, I thought I'd better point out to anyone who might have missed it, although I'm not sure how you would have if you have any interest in Silverlight ;). That Beta 2 has now been released, ScottGu the source of all knowledge, when it comes to Asp.Net related technologies has a post describing some of the changes and linking to even more detailed resources. Happy coding everyone :)

Silverlight 2 beta 2 available this week!!

ola karlsson — Tue, 03 Jun 2008 15:21:00 GMT

I don't usually post news etc. as I think there are plenty of other people doing a good job in that area.

However I just saw something that got me really exited, Bill Gates announced today at Microsoft Tech·Ed North America 2008 Developers that Silverlight 2 beta 2 will be available this week!

And why is this sooo exiting, well for one thing it's one step closer to being RTW (Released To Web) it's also bound to have some bug fixes and possible some new features. However the really big deal is that it comes with a commercial Go Live license! So now we can finally start using Silverlight 2 in real world projects for clients.

Aside from looking forward to starting building real apps in Silverlight 2 myself, I'm also very much looking forward to seeing what other people will come up with now that it's commercially available.

Update: The folks over at the Silverlight SDK Blog now has a post that mentions some of the changes that we'll be seeing in Beta 2.

Silverlight, Microsoft's Flash Killer - NOT

ola karlsson — Tue, 20 May 2008 15:39:00 GMT

As an early adopter of Silverlight etc. the one phrase that grates me each time I hear or read it is "Silverlight, Microsoft’s Flash killer".

And why does it so bother me? Well in my mind it's not a matter of one technology killing the other! As with most technologies, I believe that they'll quite happily live side by side, some people favouring one, some the other.

At least for the foreseeable future, it's not even a matter of who's got the bigger feature set etc., the hard reality, like it or not, is that corporate enterprise type of companies favours Microsoft technologies just like they lean towards Microsoft over open source solutions. While the smaller more fast moving Web 2.0 type companies favour technologies like Ruby on Rails, Flash/Flex and often use open source software.

I recently read a very interesting blog post called Post Microsoft MIX 2008 Thoughts, it's by a Flex/Flash developer called Jesse Warden and it gives an interesting insight into how Silverlight is probably viewed by many in the Adobe Flash/Flex camp.

The post is well written and fairly objective (not much of the MS bashing you might expect from a Flex/Flash developer), it covers his impressions of MIX 2008 and especially the Silverlight related topics that were demoed there. One thing that has stuck in my mind after reading it is how he felt frustrated over the "oohs" and "aahs" of the audience, over things now possible with Silverlight 2 but which according to him have been easily achieved with Flex and Flash for quite some time.

That exact type of thing however is one of the main reasons, which makes me believe that the feature set of the technologies play a lesser role than most may think.

Most people developing in the .Net space, who are often mainly focused on corporate enterprise type applications, just simply don't know anything about what is or isn't possible with technologies like Flex/Flash.

If we lived in a perfect world, we would all live and play together, .Net developers and architects with experience in building large scale enterprise applications, would be bringing their skills end experiences to the table. While the often more UX focused Flex and Flash developers would be bringing their expertise in building visually compelling and well functioning user interfaces along and together we'd be creating truly great User Experiences for the end users.

One can but dream ;)

Semi transparent Silverlight on top of HTML

ola karlsson — Fri, 18 Apr 2008 05:24:00 GMT

My last post was about laying Silverlight on top of HTML, using CSS for positioning and ordering of the layers.

However one thing that had me stumped for a bit was how to set the transparency on the Silverlight area. Surely it can't be that hard!?

Lessons learned

In my previous post I mentioned, possibly using the CSS opacity setting on the <object> tag to achieve the goal. Having had a play around, I found that, yes you can do it that way, and it seems to work fine (keep in mind different browsers support it somewhat differently). However there is a much simpler and neater way of doing it.

In the default test page that gets created the <object> tag takes a parameter named background , this gave me the first clue.

Next I saw Michael Kordahi's example of overlaying SL on top of HTML and got some ideas from how he was doing things, the problem was that he was using the SL 1.0 way of calling up the silverlight using the createSilverlight() in a silverlight.js file etc. So I had to figure out how to translate that into what I was doing, it would seem pretty basic. Michael was passing in the following as part of his javascript call to create the Silverlight object. background:'transparent', isWindowless: 'true'. However passing in those as parameters to my HTML objet tag didn't work.

To make what was a pretty long story short( the long version including me stumbling around trying to figure things out) , here is what I learned.

A. There seems to be some issues with passing in parameters to HTML <object>, I got caught out a few times making changes then refreshing the page and nothing happening (making me think I was doing it wrong), this went on until I found some resources confirming that I was in fact doing it the right way. Once I started closing and restarting the browser between changes, things worked a lot better.

B. The background and windowless attributes seem to be SL2 specific ones. Looking at various resources (including both W3C and Microsoft) covering the HTML <object> tag gave me no information, however eventually I came upon this blog post by Alex Golesh, that briefly talks about the difference in between SL2 and CreateSilverlight(), this post in itself didn't really tell me what I wanted to know but it pointed me onwards and evetually I found my way to the Microsoft SL2 documentation about Instantiating a Silverlight Plug-In. You can tell it's beta documentation but at least it's got some info, I guess this was a lesson learnt, start by looking at the MS documentation, then hit the web.

So, on to the actual solution!

As I said it seems like it should be pretty simple, and guess what, it is! There's two steps, first edit the hosting page, then make the necessary modifications to the XAML.

Step 1

If you're hosting your SL in a HTML page, set the background parameter to transparent and the windowless parameter to true. Also keep in mind the size, building a full SL app this is usually set to 100% width and height, however if we want to use it together with the HTML, we want to change it to match the actual size of your XAML/Silverlight element.

If you're hosting it in a aspx page using the SL2 Silverlight control, you want to do the same adjustments as above, adjust the size, then add the parameters PluginBackground and Windowless.

As per usual when working with server controls you can either change things in code as per above or use the properties window as below.

Step 2

Adjust the opacity/transparency of the XAML, this can be done in a few different ways and they have slightly different outcomes.

Option 1

Setting the opacity of the user control

Or on the LayoutRoot element

Gives the following result

The thing to notice here is that the opacity setting is inherited by the children of the control it's set on.
Hence both the canvas and the button are effected in both cases.

Option 2

A slightly different and most of the time a probably, a more appropriate way of setting the transparency/opacity, is to set the background of the LayoutRoot, to the hexadecimal representation of a colour and include the alpha transparency.

Which gives us the following result, where the background is semi transparent but the button is not affected.

Hope you find this useful, I've definitely found that resources in regards to this seems a bit sparse at the moment. And the ones that are out there can be a bit tricky to find.

Links

Blog post by Malky Wullur on overlaying Silverligth on top of Virtual Earth, very cool.
http://geeks.netindonesia.net/blogs/malky/archive/2008/04/16/route-animation-silverlight-with-virtual-earth.aspx

Post by Alex Golesh on Instantiating a Silverlight Plug-In
http://blogs.microsoft.co.il/blogs/alex_golesh/archive/2008/03/16/silverlight-2-amp-createsilverlight.aspx

Using Silverlight.js
http://msdn2.microsoft.com/en-us/library/cc265155(VS.95).aspx

Instantiating a Silverlight Plug-In (Silverlight 2)
http://msdn2.microsoft.com/en-us/library/cc189089(VS.95).aspx#

HTML Objects
http://msdn2.microsoft.com/en-us/library/ms535859(VS.85).aspx#