Thursday, November 29, 2007

Silverlight 1.1 is dead...

So just this morning Scott G. released that Silverlight 1.1 is now 2.0 and we will get a go live license in Q1 08. All the new controls we have been waiting for it looks like will be in that build. I would guess we will get around Mix...

http://weblogs.asp.net/scottgu/archive/2007/11/29/net-web-product-roadmap-asp-net-silverlight-iis7.aspx

Tuesday, November 27, 2007

Silverlight Preloader animation is the answer

I got this email today:

Hi!
In our project we call a function which retrieves a data from a webservice.
This function takes some time 1-3 seconds.
This we do in the end of the OnLoad event.
This causes the application not to appear immediately and is not drawn until the retrieve function is finished.
How can we let the application finish rendering and then invoke the retrieve function?
Then we could put up a message to ask the user to wait while loading.
Is there any onRendered event in Silverlight?
Or could be put a custom event back to the event queue some how, then we could emit an event which calls the retrieve function after the rendering is finished?
Best regards,
Haraldur


In most complicated Silverlight applications I generally have a preloader animation. So when the silverlight application first loads it shows some little animation that runs on the canvas loaded event until some other method is called that stops the animation and fades in the UI etc.

Using the downloader object this is pretty straight forward as you can add a delegate to the downloader object and then the delegate gets called when the download is complete and it can do something to get the application running. a simple example is:

var downloader = this.control.createObject("downloader");
downloader.addEventListener("completed", Silverlight.createDelegate(this, this.MediaClipDownloadCompleted));
downloader.open("GET", "control/MediaClip.xaml");
downloader.send();

in this case the downloader is pulling some xaml but really it could be anything. when complete the method 'MediaClipDownloadCompleted that in this case looks like this:

MediaClipDownloadCompleted: function(sender, eventArgs)

{

var xamlItem = sender.getResponseText("");

MediaClipClass = new MediaClipBaseClass( xamlItem );

MediaClipClass.LoadTarget( this.control.content, this.root.findName("MediaTarget"), 50, 100, "test/sample.wmv", "test/thumb.png" );

}

anyway working with the HTTPRequestObject is similar. take this code for example:

this.HTTPRequestObject.open("GET", this.url, true); this.HTTPRequestObject.onreadystatechange = this.XMLObjCallback; this.HTTPRequestObject.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); this.HTTPRequestObject.send(null);

basically we set the 'onreadystatechange' to our delegate that deals with things when the request is returned. In this case the method looks like this:

XMLObjCallback: function( )
{ // Check for the completed status
if (_XMLRef.HTTPRequestObject.readyState == 4)
{ // Check for successful server response
if (_XMLRef.HTTPRequestObject.status == 200)
{
if( _XMLRef.XML == "" )
{
_XMLRef.XML = _XMLRef.HTTPRequestObject.responseText;
}
if (!window.ActiveXObject)
{
var parser = new DOMParser();
_XMLRef.XmlDocument = parser.parseFromString(_XMLRef.XML,"text/xml");
}
else //is i.e
{
_XMLRef.XmlDocument = new ActiveXObject("Microsoft.XMLDOM");
_XMLRef.XmlDocument.async = "false";
_XMLRef.XmlDocument.loadXML(_XMLRef.XML);
}
}
else
{ // HTTP error
alert('Error: ' + _XMLRef.HTTPRequestObject.status);
}
}
},

its a bit complicated but basically when the code returns it does its thing. For more information on XML see these previous posts:

http://hackingsilverlight.blogspot.com/2007/10/parsing-xml-in-silverlight-10-cross.html

and this code sample

http://www.HackingSilverlight.net/samples/XMLParser.zip

also look at some of the bits in 1.1 and hopefully the new 1.1 drop that comes soon will have some more goodness for us.

Friday, November 23, 2007

Silverlight Sidebar Gadgets in 64bit Vista

As a matter of 'fact' Silverlight doesn't run in a 64bit IE browser... ok fine but if your running 64bit Vista you probably won’t see this as an issue as the default is the 32bit version that runs fine. And I'm sure at some point Silverlight will work in 64bit version of Vista. But the side bar gadget framework is in fact paired with the OS type so on a 64bit version of Vista... no Silverlight for you.

Ok so I'm not really that patient with waiting for the new wiz bang 2.0 version of silverlight that is 64bit so I have this little hack... installer that will correct the problem and allow 'Silverlight' to run in the side bar of a 64bit version of Vista.

If you are not running a 64bit version of Vista then this email is not important. No need to read farther.

So I started to go down the road of mucking up my regestry to do this but that proved to time consuming so I have built this simple code base (and silverlight gadget) so I can get my silverlight gadgets to run in my sidebar on my 64bit version of vista.

http://www.HackingSilverlight.net/Samples/Sidebar32on64.Codebase.zip

and gadget:

http://www.HackingSilverlight.net/Samples/Blender.Gadget

So basically there are two binaries. One will search the running processes and kill the sidebar process and then spins up the 32bit version. The next basically installs the other and sets it up to run each time a user logs in so they get the 32bit version of the side bar that actually supports Silverlight.

Friday, November 16, 2007

64Bit? No Silverlight For You

Not sure what is up with this but... If your using the 64bit version of IE even if you install Silverlight... The control will not instatiate. The Silverlight library specifically disabled htis but I hacked it so that it would try and the object is entirely not avaible in the 64bit version. That wouldn't bother me so much but the Vista Side bar is only 64bit if you are running a 64bit OS so you basically are screwed if you want to build a silverlight gadget that runs on a 64bit version of Vista... No Silverlight for you. To add insult to injury Silverlight works fine in the 32bit version of IE on a 64bit box... But for me that means no Silverlight Gadgets on my 64bit box.

ET Emmy Sight On MS Silverlight site

Check out this site I helped o that is on the Microsoft Silverlight site:

http://www.microsoft.com/silverlight/default_ns.aspx

or just do directly to the Silverlight app at:

http://www.etonline.com/emmys/

Tuesday, November 13, 2007

Hiding Clientside Source...

One of the problems with 'Silverlight 1.0' is that you can't hide your JavaScript source... One trick you can do is to user the Silverlight downloader to 'download' source when it returns you can pull the text and eval it like you would a 'JSON' array. This way class, controls or other scripted objects can be abstracted from the source and further the HTML will also be cleaner and no one will be able to see the your source without alot more jumping around.

So the code 'might' look like this:

Site.Scene.prototype =
{
handleLoad: function(control, userContext, rootElement)
{
this.control = control;
this.root = control.content.root;

this.downloadControlsXaml();
},

downloadControlsXaml: function()
{
//Menu
var downloader = this.control.createObject("downloader");
downloader.addEventListener("completed", Silverlight.createDelegate(this, this.JScriptObjDownloadCompleted));
downloader.open("GET", "control/object.js");
downloader.send();
},

JScriptObjDownloadCompleted: function(sender, eventArgs)
{
var xamlItem = sender.getResponseText("");

this.Object = eval( xamlItem );
// some more code...

}
}

I'm not saying you should do this... just that it can be done.

Friday, November 9, 2007

Silverlight Lessons Learned

Designers at least in my world are all about design, sexy, hot UI. The Developer is all about making it real and functional (mostly ugly too). Together Designer and Developers when they work together create not just the dream of vapor ware but something hot and sexy, pleasant to the eyes and smooth to the touch, soft and that is easy to work with. That’s the kind of next generation User Experience we want to build into our web applications. In the WPF world this is a much farther along than the typical web application could dream of. With WPF in Vista and on Microsoft’s new Surface computing it’s like something out of a sci-fi movie. Using Silverlight we can bring a little bit of that to the web.

I talked about in the past how Silverlight really shines in the
ability for designers and developers to come together. Part of the basis of this is for developers to know Xaml enough to work with the bits coming from the designers. For the developer that is used to just looking at code all day this is a bit of a jump but the average ASP.NET web developer might be a bit more comfortable. Like ASP.NET you have a file with your look and feel (Xaml) and a code behind (cs or js file) and like ASP.NET the look and feel ‘file’ is a bunch of tags for the most part.

So getting back to our use case we had a bunch of guys working on different bits mostly new to Silverlight. There were a few guys that really already knew their stuff and built out the underlying structure of the site. It ended up being thousands of lines of Xaml and code but the story here was the fact that they had to bind it together. Being able to look at Xaml code even if you not a designers and understand what is happening is critical to being able to wire things up so that something actually happens. But on the designer side… please, please give objects reasonable names. When your Xaml is 1000 lines long and there are no names or worse, all the names are like x1 x2 etc. it makes it harder to wire things up.

Out of our little death march to get our site done there was one incident where poor communication between designers and developers really broken down and we spun hours clean up. Basically a developer, that thought he was all that, created a class or object that was probably a bit over complicated and it didn’t follow the structure that others were using. A dev in question checked in the class into source control and went home for the night. A designer tried to use it and in his frustration couldn’t figure out how it worked and after hours of rework completely reworked it and then found out with the help of others that it wasn’t the problem with the code but something else. The next morning this almost broke out into a fight…

Lessons learned, don’t through complex code over the fence for designers to have to wire up, it’s not their job for starters but generally we can’t leave each other high and dry. (In comes the integrator role) Communication is critical and being consistent even if it is not the best way to-do things is more important than this way or that way.

Oh we also learned that margaritas at 3 am do not improve productivity… amazingly enough this is true of designers and developers.

Thursday, November 8, 2007

VS TFS Hack...

Here is a little hack for Visual Studio that is useful if you are using Team Foundation Server (TFS) and Visual Studio 8 and dont' want VS to auto connect...

I got this from another friend (WPF guy) Karim H.

"Below is a registry setting which will prevent VS from attempting to automatically connect to TFS on launch. Instead you will need to hit the refresh button in Source Control Explorer, or open a solution with bindings to TFS."

[HKEY_CURRENT_USER\SOFTWARE\Microsoft\VisualStudio\8.0\TeamFoundation]
"AutoLoadServer"=dword:00000000

Silverlight Firestarter

Come up to Microsoft and check out this free conference they are putting on. I'll be there. You be there too :)

November 29, 2007
Microsoft Redmond Campus
1 Microsoft Way
Redmond, WA
Building 33, Kodiak Room
** Please have a photo ID with you to register onsite and park

Check-in: 8:00 am
Event: 8:30 am – 5:00 pm

Register: http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032359153&Culture=en-US

or by calling 1-877-673-8368 and referencing Event ID 1032359153

I found this off of Brad Adams blog.

http://blogs.msdn.com/brada/archive/2007/11/07/silverlight-1-0-fire-starter.aspx

Wednesday, November 7, 2007

Silverlight Carousel Control

Here is a really cool Carousel control that Sajiv Thomas from Identitymine did. Alas it is only Silverlight 1.0 but still it is very very cool. Granted I work there but the guys really do cool stuff. Sajiv did this one just for fun :) He also has the source available at:

http://blog.identitymine.com/blogs/sajivthomas/archive/2007/11/07/silverlight-1-0-carousel.aspx

and a sample it is running at:

http://www.hackingsilverlight.net/Samples/CarouselSL/CarouselSL/Default.html

Friday, November 2, 2007

Quick Silverlight Hyper Links

this for the most part I don't do silverlight such that I need a lot of links so this never occured to me before but here is a nifty little trick I thought...

So say I put an image tag in my xaml that I want to link to something. I can put the url in the 'tag' property and then ad a mouseleftbuttondown to this little function:

function LaunchItem( sender, args )
{
window.open(sender.Tag, '_blank');
}

and your good.

So the xaml ends up looking like this:

<img height="30" src="" name="RSS" opacity=".4" source="img/rss.png" left="110" top="40" cursor="Hand" zindex="1" mouseleftbuttondown="LaunchItem" tag="http://hackingsilverlight.blogspot.com/feeds/posts/default" //&rt;

If you want some cool animation or roll over then you have to add that your self.